:root{
  --bg:#0f1117; --bg2:#151823; --card:#181c27; --line:#252b3b;
  --txt:#e6e8ee; --muted:#98a0b5; --accent:#7aa2f7; --accent2:#9d7cf7;
  --ok:#3fb27f; --warn:#e0a33e; --err:#e5556e;
  --radius:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
code{background:#11141d; border:1px solid var(--line); padding:.1rem .38rem; border-radius:5px; font-size:.88em; word-break:break-all}
h1{font-size:1.75rem; margin:1.6rem 0 .3rem; letter-spacing:-.02em}
h2{font-size:1.15rem; margin:0 0 .6rem; letter-spacing:-.01em}
h3{font-size:1rem; margin:1.6rem 0 .4rem; color:#c9d0e2}
h4{font-size:.92rem; margin:1rem 0 .3rem; color:#c9d0e2}
p{margin:.5rem 0}
.muted{color:var(--muted); font-size:.92rem}
.lede{color:var(--muted); margin-bottom:1.2rem}
.mt{margin-top:1rem}

/* ---------------------------------------------------------- topbar */
.topbar{
  display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;
  padding:.85rem 1.5rem; background:var(--bg2); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:.55rem; font-weight:700; letter-spacing:.06em; color:var(--txt)}
.brand:hover{text-decoration:none}
.brand-mark{
  width:16px; height:16px; border-radius:5px; flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
}
.topbar nav{display:flex; gap:.35rem; flex-wrap:wrap}
.topbar nav a{padding:.35rem .8rem; border-radius:8px; color:var(--muted); font-size:.94rem}
.topbar nav a:hover{background:#1e2331; color:var(--txt); text-decoration:none}
.topbar nav a.on{background:#232a3d; color:#fff}
.userbox{margin-left:auto; display:flex; align-items:center; gap:.7rem}
.who{color:var(--muted); font-size:.9rem}

main{max-width:1080px; margin:0 auto; padding:0 1.5rem 4rem}
.foot{max-width:1080px; margin:0 auto; padding:1.5rem; color:#5d667d; font-size:.82rem; border-top:1px solid var(--line)}

/* ---------------------------------------------------------- cards */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.25rem 1.4rem; margin:1.1rem 0;
}
.card-head{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.7rem}
.card-head h2{margin:0}
.filters{margin-left:auto; display:flex; gap:.35rem}

/* ---------------------------------------------------------- stats */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.7rem; margin:1.1rem 0}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:.9rem 1rem}
.stat b{display:block; font-size:1.4rem; line-height:1.2; letter-spacing:-.02em}
.stat span{color:var(--muted); font-size:.8rem}
.stat-bad b{color:var(--err)}

/* ---------------------------------------------------------- forms */
label{display:block; margin:.9rem 0 .3rem; font-weight:600; font-size:.9rem}
input[type=text],input[type=password],input[type=search],input[type=number],textarea{
  width:100%; padding:.6rem .75rem; background:#11141d; color:var(--txt);
  border:1px solid var(--line); border-radius:9px; font:inherit; font-size:.93rem;
}
input:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent}
textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem; resize:vertical}
.hint{color:var(--muted); font-size:.82rem; margin:.3rem 0 0}
.current{color:var(--muted); font-size:.85rem; margin:.2rem 0}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0 1.2rem}
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0 1.2rem}
.narrow{max-width:26rem}
.actions-bar{position:sticky; bottom:0; padding:.9rem 0; background:linear-gradient(transparent,var(--bg) 35%)}
.inline-forms{display:flex; gap:.6rem; flex-wrap:wrap}
.searchbar{display:flex; gap:.6rem; flex-wrap:wrap; margin:.7rem 0}
.searchbar input{flex:1; min-width:240px}
.warn-inline{color:var(--warn); font-size:.85rem; margin-top:.9rem}

/* ---------------------------------------------------------- buttons */
.btn{
  display:inline-block; padding:.55rem 1rem; border-radius:9px; border:1px solid var(--line);
  background:#1e2331; color:var(--txt); font:inherit; font-size:.9rem; cursor:pointer; line-height:1.3;
}
.btn:hover{background:#252c3e; text-decoration:none}
.btn:disabled{opacity:.6; cursor:progress}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#0f1117; font-weight:600}
.btn-primary:hover{background:#8fb3ff}
.btn-danger{background:transparent; border-color:#4a2733; color:#f08099}
.btn-danger:hover{background:#2a1620}
.btn-ghost{background:transparent}
.btn-sm{padding:.28rem .6rem; font-size:.8rem}
.btn-block{width:100%; margin-top:1.2rem}

/* ---------------------------------------------------------- alerts */
.alert{padding:.75rem 1rem; border-radius:10px; margin:1rem 0; font-size:.92rem; border:1px solid}
.alert-ok{background:#12251d; border-color:#1e4635; color:#7ee0b0}
.alert-error{background:#2a151c; border-color:#4d2431; color:#f4a0b3}
.alert-warn{background:#2a2313; border-color:#4e4222; color:#e9c680}
.note{background:#141a2b; border-left:3px solid var(--accent); padding:.75rem 1rem; border-radius:0 8px 8px 0; margin:1rem 0; font-size:.9rem}

/* ---------------------------------------------------------- tables */
.table-wrap{overflow-x:auto; margin:.6rem -.4rem}
table{width:100%; border-collapse:collapse; font-size:.9rem}
th,td{text-align:left; padding:.6rem .5rem; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--muted); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em}
tbody tr:hover{background:#1b2030}
.row-actions{display:flex; gap:.35rem; white-space:nowrap}
.err{color:#f4a0b3; font-size:.8rem; margin-top:.25rem; max-width:38rem}

/* ---------------------------------------------------------- chips */
.chip{
  display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.75rem;
  background:#1e2331; border:1px solid var(--line); color:var(--muted);
}
a.chip:hover{background:#252c3e; text-decoration:none}
.chip.on{background:var(--accent); color:#0f1117; border-color:var(--accent); font-weight:600}
.chip-audio{background:#231a33; border-color:#3a2b52; color:#c0a5f5}
.chip-text{background:#152430; border-color:#223d4f; color:#8fc9e8}
.badge{display:inline-block; padding:.12rem .5rem; border-radius:6px; font-size:.74rem; font-weight:600}
.badge-done{background:#12251d; color:#7ee0b0}
.badge-error{background:#2a151c; color:#f4a0b3}
.badge-pending,.badge-processing{background:#2a2313; color:#e9c680}
.badge-warn{background:#2a2313; color:#e9c680}

/* ---------------------------------------------------------- results */
.results{list-style:none; padding:0; margin:.8rem 0; display:flex; flex-direction:column; gap:.7rem}
.results li{background:#11141d; border:1px solid var(--line); border-radius:10px; padding:.8rem 1rem}
.result-head{display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; margin-bottom:.35rem}
.score{
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#0f1117;
  font-weight:700; font-size:.78rem; padding:.12rem .5rem; border-radius:6px;
}
.snippet{margin:0; color:#c3cadb; font-size:.9rem; white-space:pre-wrap; word-break:break-word}

/* ---------------------------------------------------------- misc */
.pre{
  background:#11141d; border:1px solid var(--line); border-radius:9px; padding:.9rem 1rem;
  overflow-x:auto; white-space:pre-wrap; word-break:break-word; font-size:.82rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; max-height:32rem; overflow-y:auto;
}
.hl{background:#3a3357; color:#e9dcff; padding:.05rem .2rem; border-radius:3px}
.codebox{display:flex; align-items:center; gap:.6rem; background:#11141d; border:1px solid var(--line);
  border-radius:9px; padding:.6rem .8rem; margin:.6rem 0; overflow-x:auto}
.codebox code{background:none; border:none; padding:0; white-space:nowrap}
.kv{display:grid; grid-template-columns:minmax(140px,auto) 1fr; gap:.45rem 1.1rem; margin:.7rem 0; font-size:.9rem}
.kv dt{color:var(--muted)}
.kv dd{margin:0; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.steps{padding-left:1.3rem; margin:.6rem 0}
.steps li{margin:.45rem 0}
.bullets{padding-left:1.3rem; margin:.6rem 0}
.bullets li{margin:.35rem 0}
.faq dt{font-weight:600; margin-top:.9rem; color:#c9d0e2}
.faq dd{margin:.2rem 0 0; color:var(--muted); font-size:.9rem}
.toc{display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0}
.toc a{padding:.3rem .7rem; background:var(--card); border:1px solid var(--line); border-radius:999px; font-size:.85rem}
.toc a:hover{background:#252c3e; text-decoration:none}
details{margin-top:1rem}
summary{cursor:pointer; color:var(--accent); font-size:.9rem}
.pager{display:flex; gap:.3rem; margin-top:.9rem; flex-wrap:wrap}
.back{color:var(--muted); font-size:.88rem}
section[id]{scroll-margin-top:4.5rem}

/* ---------------------------------------------------------- login */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1.5rem}
.login-card{
  width:100%; max-width:22rem; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:2rem;
}
.login-brand{display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.08em; font-size:1.1rem}
.login-sub{color:var(--muted); font-size:.85rem; margin:.2rem 0 1.2rem}