/* =============================================
   SheetApp — base.css
   CSS Variables, Reset, Scrollbar
   ============================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-base:       #eef0f7;
  --bg-surface:    #ffffff;
  --bg-overlay:    #f4f5fb;
  --bg-raised:     #e8eaf6;
  --bg-hover:      #dde0f5;
  --bg-sheet:      #ffffff;

  --accent:        #6d28d9;
  --accent-light:  #7c3aed;
  --accent-dim:    #8b5cf6;
  --accent-glow:   rgba(109,40,217,.15);
  --success:       #059669;
  --warning:       #d97706;
  --danger:        #dc2626;
  --chord-color:   #e11d48;

  --text-primary:  #1e1b4b;
  --text-secondary:#4c4a7a;
  --text-muted:    #8b85b8;
  --border:        rgba(109,40,217,.12);
  --border-active: rgba(109,40,217,.45);

  --sidebar-w:     290px;
  --toolbar-h:     64px;
  --radius:        12px;
  --radius-sm:     8px;
  --radius-xs:     5px;
  --shadow:        0 4px 24px rgba(109,40,217,.12);
  --shadow-sm:     0 1px 6px rgba(0,0,0,.08);
  --transition:    .2s cubic-bezier(.4,0,.2,1);

  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

html { font-size: 14px; height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  display: flex;
  height: 100%;
  overflow: hidden;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-raised); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg-hover); }

/* Utilities */
.hidden   { display: none !important; }
.mt-half  { margin-top: .4rem; }
.mt-1     { margin-top: .75rem; }
.mt-2     { margin-top: 1.5rem; }
.text-sm  { font-size: .825rem; }
.text-xs  { font-size: .7rem; }
.text-muted   { color: var(--text-muted); }
.text-center  { text-align: center; }
.w-full   { width: 100%; }

/* Tags */
.tag { display: inline-block; padding: .15rem .5rem; border-radius: 99px; font-size: .7rem; font-weight: 500; background: var(--bg-raised); color: var(--text-secondary); border: 1px solid var(--border); }
.tag-purple { background: rgba(167,139,250,.15); color: var(--accent); border-color: rgba(167,139,250,.3); }
.tag-green  { background: rgba(52,211,153,.15); color: var(--success); border-color: rgba(52,211,153,.3); }

/* KBD badge */
.kbd { display: inline-block; font-size: .6rem; color: var(--text-muted); background: var(--bg-overlay); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 3px; padding: .05em .35em; font-family: var(--font-mono); line-height: 1.6; }