:root {
  --bg: #101216; --panel: #191c22; --panel-raised: #20242c; --line: #2a2f39;
  --ink: #eef0f4; --ink-dim: #8991a1; --accent: #2dd9c4; --accent-ink: #06211d;
  --good: #57d98a; --notable: #ffcf4d; --issue: #ff5f6e;
  --radius-lg: 22px; --radius-md: 14px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

.app { max-width: 480px; margin: 0 auto; padding: 18px 16px 32px; display: flex; flex-direction: column; gap: 14px; min-height: 100vh; }

.topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.wordmark { font-weight: 800; font-size: 15px; letter-spacing: 0.12em; }
.wordmark-dot { color: var(--accent); }

.preset-toggle { display: flex; background: var(--panel); border-radius: 999px; padding: 3px; gap: 2px; overflow-x: auto; max-width: 100%; }
.preset-btn { border: 0; background: transparent; color: var(--ink-dim); font-size: 11px; font-weight: 800;
  letter-spacing: 0.03em; padding: 8px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.preset-btn.is-active { background: var(--accent); color: var(--accent-ink); }

.custom-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; }
.custom-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.custom-row label { display: flex; flex-direction: column; gap: 4px; font-size: 9px; font-weight: 800; color: var(--ink-dim); letter-spacing: 0.06em; }
.custom-row input { background: var(--panel-raised); border: 1px solid var(--line); color: var(--ink); font-size: 15px;
  font-weight: 700; padding: 10px; border-radius: 10px; text-align: center; }
.custom-row input:focus { outline: none; border-color: var(--accent); }

/* ---------- drop state ---------- */
.drop-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 1; justify-content: center; }
.drop-zone {
  width: 100%; min-height: 280px; border: 2px dashed var(--line); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; background: radial-gradient(120% 100% at 50% 0%, #1a1e25 0%, #14161b 70%); transition: border-color 0.2s, background 0.2s;
}
.drop-zone.is-dragover { border-color: var(--accent); background: radial-gradient(120% 100% at 50% 0%, #16302c 0%, #14161b 70%); }
.drop-icon { font-size: 40px; color: var(--accent); }
.drop-title { font-size: 22px; font-weight: 900; letter-spacing: 0.06em; }
.drop-sub { font-size: 12px; color: var(--ink-dim); }
.privacy-note { font-size: 11px; color: var(--ink-dim); text-align: center; margin: 0; }

/* ---------- analyzing state ---------- */
.analyzing-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.pulse-ring { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--accent); animation: pulseRing 1.1s ease-out infinite; }
@keyframes pulseRing {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
.analyzing-label { font-size: 16px; font-weight: 800; letter-spacing: 0.1em; }
.analyzing-file { font-size: 12px; color: var(--ink-dim); }

/* ---------- error state ---------- */
.error-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 0 12px; }
.error-icon { font-size: 34px; color: var(--issue); font-weight: 900; }
.error-title { font-size: 20px; font-weight: 900; letter-spacing: 0.05em; }
.error-detail { font-size: 13px; color: var(--ink-dim); }

/* ---------- result state ---------- */
.result-stage { display: flex; flex-direction: column; gap: 14px; }

.result-hero { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.result-hero[data-status="READY"] .result-status { color: var(--good); }
.result-hero[data-status="CHECK"] .result-status { color: var(--issue); }
.result-status { font-size: 42px; font-weight: 900; line-height: 1.05; letter-spacing: 0.01em; }
.result-sub { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; color: var(--ink-dim); }
.result-file { font-size: 11px; color: var(--ink-dim); margin-top: 6px; opacity: 0.7; word-break: break-all; }

.waveform-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px; overflow: hidden; }
.waveform-canvas { width: 100%; height: 90px; display: block; }

.cards { display: flex; flex-direction: column; gap: 8px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: default; transition: box-shadow 0.2s, border-color 0.2s; }
.card.is-clickable { cursor: pointer; }
.card.is-highlight { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(45,217,196,0.25); }
.card-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-label { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; color: var(--ink-dim); }
.card-value { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.card-note { font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
.card-icon { font-size: 18px; font-weight: 900; flex-shrink: 0; }
.card[data-verdict="good"] .card-icon { color: var(--good); }
.card[data-verdict="notable"] .card-icon { color: var(--notable); }
.card[data-verdict="issue"] .card-icon { color: var(--issue); }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.action-btn { border: none; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 14px;
  padding: 15px; border-radius: var(--radius-md); cursor: pointer; }
.action-btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-dim); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--panel-raised);
  border: 1px solid var(--line); color: var(--ink); padding: 10px 18px; border-radius: 999px; font-size: 13px;
  font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 20; }

@media (min-width: 520px) {
  .app {
    width: min(92vw, 820px);
    max-width: 820px;
    padding: 28px 24px 40px;
    gap: 18px;
  }

  .drop-zone {
    min-height: 420px;
  }

  .result-status {
    font-size: 50px;
  }
}

/* ---------- license / entitlement ---------- */
.license-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 11px 12px; display: grid; gap: 9px;
}
.license-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.license-title-row { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.license-title { font-size:11px; font-weight:900; letter-spacing:.08em; }
.tier-badge { font-size:10px; line-height:1; font-weight:900; letter-spacing:.08em; padding:5px 7px; border-radius:999px; background:var(--panel-raised); color:var(--ink-dim); border:1px solid var(--line); }
.tier-badge.is-pro { color:var(--accent-ink, #111); background:var(--accent); border-color:var(--accent); }
.license-copy { font-size:11px; line-height:1.35; color:var(--ink-dim); }
.license-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
.license-input { min-width:0; background:var(--panel-raised); border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:9px 10px; font-size:12px; }
.license-input:focus { outline:none; border-color:var(--accent); }
.license-button { border:0; border-radius:10px; background:var(--accent); color:var(--accent-ink, #111); font-weight:900; padding:9px 12px; cursor:pointer; }
.license-button:disabled { opacity:.5; cursor:wait; }
.license-foot { min-height:18px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.license-message { font-size:10px; color:var(--ink-dim); flex:1; }
.license-link, .license-forget { font:inherit; font-size:10px; font-weight:800; color:var(--accent); background:none; border:0; padding:0; cursor:pointer; text-decoration:none; }
.license-panel.is-nudge { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); }
.pro-locked-note { width:100%; border:1px dashed var(--line); background:transparent; color:var(--ink-dim); border-radius:10px; padding:9px 11px; font-size:11px; font-weight:800; cursor:pointer; }
\n.preset-btn.is-locked { opacity:.58; position:relative; }\n.preset-btn.is-locked::after { content:"·PRO"; font-size:7px; margin-left:2px; color:var(--accent); }\n.card[data-verdict="locked"] { border-style:dashed; cursor:pointer; }\n.card[data-verdict="locked"] .card-icon, .card[data-verdict="locked"] .card-value { color:var(--accent); }\n