@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════════
   NomaeClip — Obsidian & Copper
   Deep warm blacks · layered surfaces · sage & gold
   ═══════════════════════════════════════════════════ */

:root {
  /* Surface stack — deep warm blacks */
  --bg:        #060606;
  --bg-2:      #0a0a0c;
  --surface:   #101014;
  --surface-2: #16161a;
  --surface-3: #1c1c22;
  --well:      #08080a;

  /* Text — warm off-white */
  --text:      #f0f0ec;
  --text-2:    #c5c5be;
  --text-3:    #8a8a82;
  --text-dim:  #5e5e58;

  /* Lines */
  --border:        rgba(255,255,255,0.06);
  --border-2:      rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.16);

  /* Primary — sage emerald */
  --accent:        #14b880;
  --accent-bright: #3dd9a0;
  --accent-dim:    #0e8a5e;
  --accent-soft:   rgba(20,184,128,0.12);
  --accent-line:   rgba(20,184,128,0.40);
  --accent-glow:   rgba(20,184,128,0.25);

  /* Secondary — warm copper/gold */
  --copper:        #d4a853;
  --copper-soft:   rgba(212,168,83,0.12);
  --copper-line:   rgba(212,168,83,0.35);
  --copper-glow:   rgba(212,168,83,0.20);

  /* Signal */
  --danger:      #e8554a;
  --danger-soft: rgba(232,85,74,0.12);

  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --r:    16px;
  --r-sm: 12px;
  --r-xs: 8px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
::selection { background:var(--accent-soft); color:var(--text); }
html { -webkit-tap-highlight-color:transparent; }

body {
  font-family:var(--sans);
  background:
    radial-gradient(600px 400px at 50% -5%, rgba(20,184,128,0.06), transparent 55%),
    radial-gradient(500px 300px at 50% 100%, rgba(212,168,83,0.04), transparent 50%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  min-height:100dvh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding:clamp(0.75rem, 2.5vw, 2rem);
}

/* film grain — subtle texture */
body::before {
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0.018;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat; background-size:256px;
}

::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--surface-3); border-radius:4px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:#282830; background-clip:padding-box; }

.lucide { vertical-align:middle; flex-shrink:0; }
.hidden { display:none !important; }

/* ═══════════════ APP SHELL ═══════════════ */
.app-shell {
  width:100%;
  max-width:720px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  position:relative;
}

/* center spine — faint vertical guide line */
.app-shell::before {
  content:"";
  position:absolute;
  top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:1px;
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.04) 20%, rgba(255,255,255,0.04) 80%, transparent 100%);
  pointer-events:none; z-index:0;
}

/* ── Top bar ── */
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand { display:flex; align-items:center; gap:0.85rem; }
.brand-mark {
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent-bright);
  background:var(--surface);
  border:1px solid var(--border-2);
  border-radius:var(--r-xs);
  box-shadow:0 0 0 1px rgba(0,0,0,0.35), 0 10px 26px rgba(0,0,0,0.45);
}
.brand-mark svg { width:28px; height:24px; }
.brand-text { display:flex; flex-direction:column; line-height:1.15; }
.brand-name { font-weight:800; font-size:1.12rem; letter-spacing:-0.02em; color:var(--text); }
.brand-tag {
  font-family:var(--mono); font-size:0.68rem; font-weight:500;
  color:var(--text-dim); letter-spacing:0.08em; text-transform:uppercase;
}

.status-pill {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.4rem 0.8rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
}
.status-indicator {
  width:7px; height:7px; border-radius:50%;
  background:var(--text-dim);
  transition:all .3s var(--ease);
}
.status-indicator.active {
  background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft), 0 0 10px var(--accent-glow);
}
.status-indicator.recording {
  background:var(--danger);
  box-shadow:0 0 0 3px var(--danger-soft), 0 0 10px rgba(232,85,74,0.35);
  animation:pulse 1.1s ease-in-out infinite;
}

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.status-text { font-family:var(--mono); font-size:0.72rem; font-weight:500; color:var(--text-2); white-space:nowrap; }

/* ── Tabs — floating dock ── */
.tabs {
  display:flex;
  gap:0.3rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  padding:0.4rem;
  position:sticky;
  top:0.75rem;
  z-index:100;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  background:rgba(16,16,20,0.85);
}
.tab {
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:0.4rem;
  padding:0.55rem 0.5rem;
  border:none; background:transparent; cursor:pointer;
  color:var(--text-3);
  font-family:var(--mono); font-size:0.68rem; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase;
  border-radius:999px;
  transition:color .15s var(--ease), background .2s var(--ease);
}
.tab .tab-icon { width:15px; height:15px; stroke-width:2; }
.tab:hover { color:var(--text-2); }
.tab.active {
  color:#051a12;
  background:var(--accent);
  font-weight:700;
  box-shadow:0 4px 16px var(--accent-glow);
}

/* ── App / panels ── */
.app { position:relative; }
.tab-panel { display:none; }
.tab-panel.active { display:block; animation:fade .22s var(--ease); }
@keyframes fade { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

.panel {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:2rem;
  box-shadow:0 1px 0 rgba(255,255,255,0.015) inset, 0 24px 60px rgba(0,0,0,0.50);
  transition:background .25s, border-color .25s, box-shadow .25s;
  position:relative;
  z-index:1;
}

.panel-head {
  margin-bottom:1rem;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
}
.panel-title { font-size:1.35rem; font-weight:800; letter-spacing:-0.02em; color:var(--text); }
.panel-sub { font-size:0.88rem; color:var(--text-3); margin-top:0.25rem; max-width:58ch; line-height:1.55; }

.count-pill {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:21px; padding:0 0.45rem;
  font-family:var(--mono); font-size:0.68rem; font-weight:700;
  background:var(--copper-soft); color:var(--copper);
  border:1px solid var(--copper-line);
  border-radius:999px;
  vertical-align:middle;
}

/* ═══════════════ RECORD ═══════════════ */
.record-grid {
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}

/* Voice hint — centered with top accent strip */
.voice-hint {
  display:flex; align-items:center; justify-content:center;
  gap:0.85rem;
  padding:1rem 1rem 0.85rem;
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  border-radius:var(--r-sm);
  margin-bottom:1rem;
  position:relative; overflow:hidden;
}
.voice-hint::before {
  content:""; position:absolute; left:0; top:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent-bright), var(--copper));
}
.voice-hint-icon {
  width:18px; height:18px; color:var(--accent-bright); flex-shrink:0;
}
.voice-hint-body { display:flex; flex-direction:column; line-height:1.3; text-align:center; }
.voice-hint-say { font-size:0.92rem; color:var(--text); }
.voice-hint-say strong { color:var(--accent-bright); font-weight:800; white-space:nowrap; }
.voice-hint-sub { font-size:0.76rem; color:var(--text-3); }

.hotphrase-badge {
  display:inline-flex; align-items:center; gap:0.35rem;
  font-family:var(--mono); font-size:0.64rem; font-weight:500;
  color:var(--text-dim);
  padding:0.25rem 0.55rem; max-width:100%;
  background:rgba(0,0,0,0.35);
  border:1px solid var(--border);
  border-radius:999px; transition:all .2s;
}
.hp-dot { width:5px; height:5px; border-radius:50%; background:var(--text-dim); transition:all .2s; }
.hotphrase-badge.listening { color:var(--text-2); border-color:var(--border-2); }
.hotphrase-badge.listening .hp-dot { background:var(--accent); box-shadow:0 0 4px var(--accent-glow); animation:pulse 1.4s ease-in-out infinite; }
.hotphrase-badge.heard { color:var(--copper); border-color:var(--copper); background:var(--copper-soft); }
.hotphrase-badge.heard .hp-dot { background:var(--copper); }

/* waveform card */
.wave-card {
  background:var(--well);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  overflow:hidden; margin-bottom:1rem;
}
.wave-stage { position:relative; height:200px; }
#waveform { width:100%; height:100%; display:block; transition:opacity .2s; }
.wave-stage:not(.live) #waveform { opacity:0; }
.threshold-line {
  position:absolute; left:0; right:0; height:0;
  border-top:1px dashed rgba(212,168,83,0.35);
  opacity:.5; pointer-events:none; transition:top .1s;
  display:none;
}
.wave-stage.live .threshold-line { display:block; }
.wave-empty {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.55rem; text-align:center; padding:1.5rem; color:var(--text-dim);
}
.wave-empty .lucide { width:24px; height:24px; color:var(--text-2); opacity:.5; }
.wave-empty span { font-size:0.84rem; max-width:34ch; line-height:1.45; }
.wave-empty strong { color:var(--text); font-weight:700; }
.wave-stage.live .wave-empty { display:none; }

.meter-tray {
  display:flex; align-items:center; gap:0.6rem;
  padding:0.5rem 0.85rem;
  border-top:1px solid rgba(255,255,255,0.04);
  background:rgba(0,0,0,0.30);
}
.meter-label {
  font-family:var(--mono); font-size:0.6rem; font-weight:500;
  color:var(--text-dim); text-transform:uppercase; letter-spacing:0.12em;
}
.meter-bar { flex:1; height:3px; background:rgba(255,255,255,0.06); border-radius:2px; overflow:hidden; }
.meter-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--copper));
  border-radius:2px; transition:width .05s;
  box-shadow:0 0 5px var(--copper-glow);
}

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.45rem;
  padding:0.55rem 1rem;
  border-radius:999px; border:1px solid var(--border-strong);
  background:rgba(255,255,255,0.05);
  color:var(--text);
  font-family:var(--sans); font-size:0.84rem; font-weight:700;
  letter-spacing:0.01em;
  cursor:pointer; white-space:nowrap;
  transition:transform .15s, opacity .2s, background .2s, box-shadow .2s, border-color .2s;
}
.btn .lucide { width:15px; height:15px; stroke-width:2.1; }
.btn:hover:not(:disabled) {
  transform:translateY(-1px);
  background:rgba(255,255,255,0.08);
  box-shadow:0 6px 24px rgba(0,0,0,0.35);
  border-color:var(--border-strong);
}
.btn:active:not(:disabled) { transform:translateY(0) scale(.98); }
.btn:disabled { opacity:.3; cursor:not-allowed; }

.btn-primary {
  background:var(--text); color:var(--bg); border-color:transparent;
  box-shadow:0 4px 18px rgba(240,240,236,0.08);
}
.btn-primary:hover:not(:disabled) { opacity:.92; box-shadow:0 6px 26px rgba(240,240,236,0.12); }

.btn-accent {
  background:linear-gradient(135deg, var(--accent-dim), var(--accent));
  color:#fff; border-color:transparent;
  box-shadow:0 4px 18px var(--accent-glow);
}
.btn-accent:hover:not(:disabled) { opacity:.92; box-shadow:0 6px 24px var(--accent-glow); }

.btn-ghost { background:transparent; border-color:var(--border-2); color:var(--text-2); }
.btn-ghost:hover:not(:disabled) { background:var(--surface-2); color:var(--text); border-color:var(--border-strong); }

.btn-lg { padding:0.72rem 1.35rem; font-size:0.9rem; }

.record-actions { display:flex; gap:0.55rem; margin-bottom:1rem; }
.record-actions .btn { flex:1; }

/* ── Advanced ── */
.advanced { border-top:1px solid rgba(255,255,255,0.05); padding-top:0.4rem; }
.advanced summary {
  display:flex; align-items:center; justify-content:center; gap:0.45rem;
  padding:0.5rem 0.15rem; list-style:none; cursor:pointer;
  font-family:var(--mono); font-size:0.72rem; font-weight:500;
  color:var(--text-dim); text-transform:uppercase; letter-spacing:0.1em;
  transition:color .15s;
}
.advanced summary::-webkit-details-marker { display:none; }
.advanced summary:hover { color:var(--text-2); }
.advanced summary .lucide { width:14px; height:14px; }
.advanced-chev { margin-left:auto; transition:transform .2s; }
.advanced[open] .advanced-chev { transform:rotate(180deg); }
.advanced-body { display:flex; flex-direction:column; gap:0; padding:0.2rem 0; }

.setting {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0.7rem 0.2rem;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.setting:last-child { border-bottom:none; }
.setting-text { display:flex; flex-direction:column; min-width:0; }
.setting-label { font-size:0.85rem; font-weight:700; color:var(--text); }
.setting-help { font-size:0.74rem; color:var(--text-dim); }
.setting-range { display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }
.setting-value { font-family:var(--mono); font-size:0.74rem; font-weight:500; color:var(--text-2); min-width:34px; text-align:right; }

input[type="range"] { width:120px; accent-color:var(--accent); height:3px; cursor:pointer; }
select {
  background:rgba(255,255,255,0.05); color:var(--text);
  border:1px solid var(--border-2); border-radius:999px;
  padding:0.45rem 0.7rem; font-family:var(--mono); font-size:0.74rem;
  cursor:pointer; transition:border-color .15s;
}
select:hover { border-color:var(--border-strong); }
select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.toggle { position:relative; display:inline-block; width:40px; height:22px; cursor:pointer; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; position:absolute; }
.toggle-track {
  position:absolute; inset:0;
  background:rgba(255,255,255,0.08); border:1px solid var(--border-2);
  border-radius:999px; transition:all .2s;
}
.toggle-track::after {
  content:''; position:absolute; top:2px; left:2px; width:16px; height:16px;
  background:var(--text); border-radius:50%; transition:transform .2s;
  box-shadow:0 1px 3px rgba(0,0,0,0.5);
}
.toggle input:checked+.toggle-track { background:var(--accent); border-color:transparent; }
.toggle input:checked+.toggle-track::after { transform:translateX(18px); background:var(--bg); }
.toggle-track.sm { width:32px; height:18px; }
.toggle-track.sm::after { width:12px; height:12px; }
.toggle input:checked+.toggle-track.sm::after { transform:translateX(14px); }

/* ── Library ── */
.library-head { display:flex; align-items:center; justify-content:center; gap:0.6rem; }
.library-panel { min-height:0; }
.clips-list {
  display:flex; flex-direction:column; gap:0.6rem;
  max-height:min(600px, calc(100dvh - 12rem));
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:0.35rem;
  scrollbar-gutter:stable;
}

.empty-state {
  text-align:center; color:var(--text-dim); font-size:0.85rem;
  padding:2.5rem 1.25rem;
  border:1px dashed var(--border-2); border-radius:var(--r-sm);
  line-height:1.55;
}

.clip-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  overflow:hidden;
  min-height:116px;
  transition:background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.clip-card:hover {
  background:var(--surface-2);
  border-color:var(--border-2);
  transform:translateY(-1px);
  box-shadow:0 10px 32px rgba(0,0,0,0.45);
}
.clip-top { display:flex; align-items:center; justify-content:space-between; gap:0.6rem; padding:0.75rem 0.9rem; }
.clip-icon {
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-2);
  display:flex; align-items:center; justify-content:center;
}
.clip-icon .lucide { width:14px; height:14px; stroke-width:1.8; }
.clip-icon.trim { background:var(--copper-soft); border-color:var(--copper-line); color:var(--copper); }
.clip-info { flex:1; min-width:0; }
.clip-name-row { display:flex; align-items:center; gap:0.45rem; min-width:0; }
.clip-name { font-size:0.88rem; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.clip-meta { font-family:var(--mono); font-size:0.65rem; color:var(--text-dim); letter-spacing:0.04em; margin-top:0.05rem; }

.privacy-badge {
  flex-shrink:0;
  font-family:var(--mono); font-size:0.6rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em;
  color:var(--text-dim);
  border:1px solid var(--border); border-radius:999px;
  padding:0.1rem 0.4rem;
  background:rgba(0,0,0,0.3);
}
.privacy-badge.shared { color:var(--copper); border-color:var(--copper-line); background:var(--copper-soft); }

.clip-status {
  display:inline-flex; align-items:center; gap:0.35rem;
  font-family:var(--mono); font-size:0.65rem; font-weight:500;
  margin-top:0.25rem; color:var(--text-dim);
}
.clip-status .dot { width:5px; height:5px; border-radius:50%; background:var(--text-dim); }
.clip-status.working { color:var(--accent); }
.clip-status.working .dot { background:var(--accent); animation:pulse 1.2s ease-in-out infinite; }
.clip-status.ready .dot { background:var(--accent); }

.clip-actions { display:flex; gap:0.25rem; flex-shrink:0; }
.clip-btn {
  width:30px; height:30px; border-radius:8px;
  border:1px solid transparent; background:transparent;
  color:var(--text-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .12s;
}
.clip-btn .lucide { width:13px; height:13px; stroke-width:2; }
.clip-btn:hover { background:var(--surface-3); border-color:var(--border-2); color:var(--text); }
.clip-btn.danger:hover { background:var(--danger-soft); border-color:var(--danger); color:var(--danger); }
.clip-btn.playing { background:var(--accent); border-color:transparent; color:var(--bg); }

.load-more-clips {
  width:100%;
  min-height:42px;
  border:1px solid var(--border-2);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,0.04);
  color:var(--text-2);
  font-family:var(--mono);
  font-size:0.72rem;
  font-weight:500;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.load-more-clips:hover {
  background:var(--surface-2);
  border-color:var(--border-strong);
  color:var(--text);
}

.timeline-wave {
  height:34px; margin:0 0.9rem 0.55rem;
  border:1px solid rgba(255,255,255,0.04); border-radius:8px;
  background:var(--well); overflow:hidden;
}
.timeline-wave canvas { display:block; width:100%; height:100%; }

.clip-transcript {
  display:none; margin:0 0.9rem 0.6rem; padding:0.6rem 0.7rem;
  font-size:0.82rem; color:var(--text-2); line-height:1.5;
  background:rgba(0,0,0,0.30); border:1px solid rgba(255,255,255,0.04); border-radius:8px;
}
.clip-transcript .lbl {
  display:block; font-family:var(--mono); font-size:0.62rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.1em; color:var(--text-dim); margin-bottom:0.25rem;
}
.clip-audio { display:none; width:calc(100% - 1.8rem); margin:0 0.9rem 0.7rem; height:32px; }
.clip-card.expanded .clip-audio { display:block; }
.clip-card.expanded .clip-transcript { display:block; }

/* ═══════════════ TRIM ═══════════════ */
.trim-panel { max-width:880px; margin:0 auto; }

.step-rail {
  display:flex; flex-wrap:wrap; gap:0.5rem;
  list-style:none; margin-bottom:1.25rem;
  justify-content:center;
}
.step-rail li {
  display:flex; align-items:center; gap:0.45rem;
  flex:none; min-width:130px;
  padding:0.55rem 0.75rem;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  font-family:var(--mono); font-size:0.7rem; font-weight:500;
  color:var(--text-dim); text-transform:uppercase; letter-spacing:0.06em;
}
.step-num {
  width:18px; height:18px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-bright);
  font-size:0.64rem; font-weight:700;
}

.trim-source { display:flex; align-items:center; justify-content:center; gap:0.65rem; margin-bottom:1rem; }
.field-label { font-family:var(--mono); font-size:0.72rem; font-weight:500; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.1em; }
.trim-select { flex:1; }

.trim-card { margin-bottom:1rem; }
.trim-stage { position:relative; min-height:240px; display:flex; align-items:center; justify-content:center; }
.trim-wave-wrap { position:absolute; inset:0; cursor:ew-resize; touch-action:none; }
#trimWaveform { width:100%; height:100%; display:block; }
.trim-region { position:absolute; top:0; bottom:0; background:rgba(240,240,236,0.05); border-left:2px solid var(--text); border-right:2px solid var(--text); pointer-events:none; }
.trim-handle { position:absolute; top:0; bottom:0; width:16px; margin-left:-8px; cursor:ew-resize; z-index:3; }
.trim-handle::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:3px; height:32px; background:var(--text); border-radius:2px; box-shadow:0 0 6px rgba(0,0,0,0.5); }
.trim-playhead { position:absolute; top:0; bottom:0; width:2px; background:var(--accent); box-shadow:0 0 8px var(--accent-glow); pointer-events:none; display:none; }

.trim-readout { display:flex; gap:0.5rem; margin:0 auto 1rem; max-width:480px; }
.ro-cell {
  flex:1; padding:0.65rem; text-align:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm);
  font-size:0.95rem; font-weight:800; color:var(--text);
}
.ro-cell.ro-accent { border-color:var(--accent-line); color:var(--accent-bright); background:var(--accent-soft); }
.ro-label { display:block; font-family:var(--mono); font-size:0.6rem; font-weight:500; text-transform:uppercase; letter-spacing:0.12em; color:var(--text-dim); margin-bottom:0.15rem; }

.trim-actions { display:flex; gap:0.55rem; flex-wrap:wrap; max-width:640px; margin:0 auto; justify-content:center; }
.trim-actions .btn { flex:1; min-width:120px; }
.trim-actions .btn-accent { flex:1.4; }

/* ═══════════════ BOARD / PUBLIC ═══════════════ */
.board-head { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.85rem; text-align:center; }
.board-actions { display:flex; align-items:center; justify-content:center; gap:0.45rem; flex-wrap:wrap; }

.toggle-inline { display:inline-flex; align-items:center; gap:0.4rem; cursor:pointer; user-select:none; }
.toggle-inline input { opacity:0; width:0; height:0; position:absolute; }
.toggle-inline .toggle-track { position:relative; }
.toggle-inline-text { font-family:var(--mono); font-size:0.72rem; font-weight:500; color:var(--text-2); text-transform:uppercase; letter-spacing:0.08em; }

.add-local-select { max-width:155px; }
.file-input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }

.upload-progress { font-family:var(--mono); font-size:0.74rem; color:var(--copper); min-height:1.1em; margin-bottom:0.75rem; }
.upload-progress.hidden { display:none; }
.upload-progress.error { color:var(--danger); }

.soundboard-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:0.85rem;
}
.soundboard-grid .empty-state { grid-column:1 / -1; }

.pad {
  position:relative; aspect-ratio:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.4rem;
  padding:0.75rem; text-align:center;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-sm); cursor:pointer; overflow:hidden;
  transition:transform .15s, border-color .15s, background .15s, box-shadow .25s;
}
.pad:hover { border-color:var(--border-2); background:var(--surface-2); transform:translateY(-2px); box-shadow:0 10px 32px rgba(0,0,0,0.40); }
.pad:active { transform:scale(.96); }
.pad.assigned { border-color:var(--border-2); }
.pad.playing {
  background:var(--accent-soft); border-color:var(--accent-line);
  box-shadow:0 0 28px var(--accent-glow);
}
.pad.playing .pad-icon { color:var(--accent-bright); }
.pad-key { position:absolute; top:8px; left:10px; font-family:var(--mono); font-size:0.65rem; font-weight:700; color:var(--text-dim); }
.pad-icon { color:var(--text-dim); }
.pad-icon .lucide { width:22px; height:22px; stroke-width:1.5; }
.pad.assigned .pad-icon { color:var(--copper); }
.pad-label { font-family:var(--mono); font-size:0.68rem; font-weight:500; color:var(--text-dim); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pad.assigned .pad-label { color:var(--text); }
.pad-sub { font-family:var(--mono); font-size:0.6rem; color:var(--text-dim); }
.pad-clear {
  position:absolute; top:6px; right:6px; width:20px; height:20px;
  border:none; border-radius:6px; background:transparent;
  color:var(--text-dim); font-size:0.72rem; cursor:pointer;
  display:none; align-items:center; justify-content:center;
}
.pad.assigned:hover .pad-clear { display:flex; }
.pad-clear:hover { background:var(--danger-soft); color:var(--danger); }
.pad-del {
  position:absolute; bottom:6px; right:6px; width:22px; height:22px;
  border:none; border-radius:6px; background:transparent;
  color:var(--text-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s, background .15s;
}
.pad:hover .pad-del { opacity:1; }
.pad-del:hover { background:var(--danger-soft); color:var(--danger); }
.pad select { width:100%; }

/* ── Footer ── */
.footer { text-align:center; padding:1.5rem 0 0.5rem; width:100%; }
.foot-note { font-family:var(--mono); font-size:0.65rem; color:var(--text-dim); letter-spacing:0.06em; }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:640px) {
  body { padding:0.75rem; }
  .app-shell { gap:0.85rem; }
  .brand-tag { display:none; }
  .tab { padding:0.5rem 0.3rem; font-size:0.58rem; }
  .tab .tab-icon { width:14px; height:14px; }
  .panel { padding:1.25rem; border-radius:14px; }
  .voice-hint { flex-wrap:wrap; }
  .voice-hint-body { flex-basis:calc(100% - 2.5rem); }
  .hotphrase-badge { flex-basis:100%; }
  .record-actions { flex-wrap:wrap; }
  .record-actions .btn { flex:1 1 100%; }
  .clips-list { max-height:min(560px, calc(100dvh - 10rem)); padding-right:0; }
  .clip-top {
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    align-items:start;
  }
  .clip-actions {
    grid-column:1 / -1;
    justify-content:stretch;
    flex-wrap:wrap;
    gap:0.35rem;
  }
  .clip-btn {
    flex:1 1 38px;
    min-width:38px;
    height:38px;
  }
  .board-head { flex-direction:column; }
  .board-actions { width:100%; }
  .board-actions .btn, .board-actions .add-local-select { flex:1; }
  .trim-actions .btn { flex:1 1 100%; }
  .soundboard-grid { grid-template-columns:repeat(2, 1fr); gap:0.55rem; }
  .step-rail li { min-width:calc(50% - 0.5rem); flex:none; }
}