@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400;500&display=swap');

/* Hard-constrain the document to the viewport height.
   Without this, body's overflow:hidden is propagated to the viewport
   (per CSS spec) instead of being applied to body itself — allowing
   body to grow beyond 100vh and pushing flex children off-screen. */
html {
  height: 100%;
  overflow: hidden;
}

:root {
  /* Neutral deep-slate palette — cool, clean, modern.  The old green-tinted
     scheme read as murky/dated; accents carry the colour identity instead. */
  --bg:       #0a0b0e;
  --surface:  #0f1116;
  --surface2: #14171e;
  --surface3: #1b1f28;
  --border:   #21252e;
  /* --border2 doubles as a faint-text colour in many places; nudged lighter
     so those labels are legible while still reading as a subtle border. */
  --border2:  #3d4757;
  --accent:   #00d9ff;
  --accent2:  #00e88f;
  --warn:     #ffb224;
  --danger:   #ff5533;
  /* --label is the dim-text token — raised for readability on dark surfaces. */
  --label:    #808b9c;
  --text:     #c2cad6;
  --text2:    #8a94a6;
  --fg:       #e8edf4;
  --fg-dim:   #9aa5b5;
  /* Dedicated faint border that stays subtle (was --border2's old value). */
  --hairline: #2a3038;
  --tab-h:    52px;

  /* Border radius scale */
  --r-xs:   4px;
  --r-sm:   7px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.5);
  --shadow-md:    0 4px 24px rgba(0,0,0,0.7);
  --shadow-lg:    0 8px 48px rgba(0,0,0,0.85);
  --shadow-float: 0 8px 40px rgba(0,0,0,0.9), 0 2px 10px rgba(0,0,0,0.6);

  /* Transition */
  --trans: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
  background:var(--bg);
  color:var(--text);
  font-family:'DM Mono',monospace;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.btn {
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  padding:6px 13px;
  border:1px solid var(--border2);
  background:var(--surface2);
  color:var(--text2);
  cursor:pointer;
  border-radius:var(--r-sm);
  transition:background var(--trans), border-color var(--trans),
             color var(--trans), box-shadow var(--trans);
}

.btn:hover {
  border-color:var(--accent2); color:var(--accent2); background:var(--surface3);
  box-shadow:0 0 0 1px rgba(0,232,143,.15), 0 2px 12px rgba(0,0,0,.35);
}
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.btn.primary { border-color:var(--accent2); color:var(--accent2); background:rgba(0,232,143,.06); }
.btn.active { border-color:var(--accent2); color:var(--accent2); background:rgba(0,232,143,.13); }
.btn.warn { border-color:var(--warn); color:var(--warn); background:rgba(255,178,36,.06); }
#autoChordBtn.active { border-color:#bb88ff; color:#bb88ff; background:rgba(187,136,255,.12); animation:chord-pulse 1s ease-in-out infinite alternate; }
@keyframes chord-pulse { from { opacity:.7; } to { opacity:1; } }
.btn:disabled { opacity:.25; cursor:default; pointer-events:none; }

.sep { width:1px; height:20px; background:var(--border2); margin:0 2px; flex-shrink:0; border-radius:var(--r-pill); }

/* ── GLOBAL SCROLLBARS ── */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb {
  background:var(--border2);
  border-radius:var(--r-pill);
  border:2px solid var(--bg);        /* inset look */
}
::-webkit-scrollbar-thumb:hover { background:var(--label); }
::-webkit-scrollbar-corner { background:transparent; }

body.drag-over::after {
  content:'DROP FILE HERE';
  position:fixed; inset:0;
  background:rgba(0,217,255,.05);
  backdrop-filter:blur(3px);
  border:2px dashed var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',sans-serif; font-size:44px; letter-spacing:10px;
  color:var(--accent); z-index:50; pointer-events:none;
}