:root{
  --bg:#0f1420; --bg2:#151d2e; --card:#1a2336; --line:#28324a;
  --fg:#e7ecf5; --muted:#93a0b8; --brand:#4f8cff; --brand2:#7aa7ff;
  --ok:#2ec26b; --warn:#e0a63a; --danger:#e0555f; --shadow:0 6px 24px rgba(0,0,0,.28);
  --radius:14px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#eef2f8; --bg2:#e6ecf5; --card:#ffffff; --line:#dbe3ef;
    --fg:#1a2233; --muted:#5c6a83; --shadow:0 6px 20px rgba(30,50,90,.10); }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--fg); font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh; display:flex; flex-direction:column;
}
a{color:var(--brand2); text-decoration:none} a:hover{text-decoration:underline}
.container{width:100%; max-width:1040px; margin:0 auto; padding:24px 18px; flex:1}
.foot{text-align:center; color:var(--muted); font-size:12.5px; padding:18px}

/* Topbar */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 20px; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap}
.brand{font-weight:700; font-size:18px; letter-spacing:.2px}
.brand small{font-weight:500; color:var(--muted); font-size:12px; margin-left:6px}
.brand.big{font-size:30px}
.logo{color:var(--brand)}
.topbar nav{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.who{color:var(--muted); font-size:13px}
.inline{display:inline}

/* Cards & layout */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); margin-bottom:22px}
.grid{display:flex; flex-direction:column}
h1{font-size:24px; margin:.2em 0 .4em} h2{font-size:18px; margin:0 0 4px}
.hint,.sub{color:var(--muted); font-size:13.5px; margin:.2em 0 14px}
.muted{color:var(--muted)}

/* Buttons */
.btn{display:inline-block; background:var(--bg2); color:var(--fg); border:1px solid var(--line);
  padding:9px 16px; border-radius:10px; cursor:pointer; font-size:14px; font-weight:600}
.btn:hover{border-color:var(--brand)}
.btn.primary{background:linear-gradient(180deg,var(--brand),#3f78e6); border-color:transparent; color:#fff}
.btn.primary:hover{filter:brightness(1.06)}
.btn.block{width:100%; margin-top:6px}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.btn-link{background:none; border:none; color:var(--brand2); cursor:pointer; font-size:13.5px; padding:0; font-weight:600}
.btn-link.danger{color:var(--danger)}

/* Login */
.login-wrap{min-height:70vh; display:flex; align-items:center; justify-content:center}
.card.login{max-width:400px; width:100%; text-align:center}
.card.login form{text-align:left; margin-top:8px}
.card.login form button{margin-top:26px}
label{display:block; font-size:13px; font-weight:600; margin:12px 0 0; color:var(--muted)}
input[type=text],input[type=password],input[type=number],input[type=file],select{
  width:100%; margin-top:5px; padding:10px 12px; background:var(--bg); color:var(--fg);
  border:1px solid var(--line); border-radius:9px; font-size:14px; font-weight:500}
input:focus,select:focus{outline:2px solid var(--brand); outline-offset:0; border-color:var(--brand)}

.alert{padding:11px 14px; border-radius:10px; font-size:13.5px; margin:6px 0 12px}
.alert.error{background:rgba(224,85,95,.12); border:1px solid var(--danger); color:var(--danger)}

/* Dropzone */
.dropzone{border:2px dashed var(--line); border-radius:12px; padding:26px; text-align:center;
  color:var(--muted); transition:.15s; cursor:pointer}
.dropzone.drag{border-color:var(--brand); background:rgba(79,140,255,.06); color:var(--fg)}

/* Upload list */
.uploadlist{margin-top:14px; display:flex; flex-direction:column; gap:8px}
.up-row{display:grid; grid-template-columns:1fr 160px 130px; align-items:center; gap:12px;
  padding:9px 12px; background:var(--bg); border:1px solid var(--line); border-radius:10px; font-size:13px}
.up-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.up-bar{height:8px; background:var(--line); border-radius:6px; overflow:hidden}
.up-fill{height:100%; width:0; background:linear-gradient(90deg,var(--brand),var(--brand2)); transition:width .15s}
.up-pct{text-align:right; font-variant-numeric:tabular-nums; color:var(--muted)}
.up-row.done .up-pct{color:var(--ok)} .up-row.done .up-fill{background:var(--ok)}
.up-row.err{border-color:var(--danger)} .up-row.err .up-pct{color:var(--danger)}
.up-row.processing .up-fill{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}

/* Tables */
.table-wrap{overflow-x:auto}
.tbl{width:100%; border-collapse:collapse; font-size:13.5px; margin:6px 0}
.tbl th{text-align:left; color:var(--muted); font-weight:600; font-size:12px; padding:8px 10px; border-bottom:1px solid var(--line)}
.tbl td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl td.name{font-weight:600}
.tbl tr.empty td{color:var(--muted); text-align:center; padding:18px}
.pill{display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px; font-weight:700}
.pill.ok{background:rgba(46,194,107,.14); color:var(--ok)}
.pill.warn{background:rgba(224,166,58,.14); color:var(--warn)}

/* Checkbox */
.chk{display:inline-flex; align-items:center; gap:8px; cursor:pointer; margin:0; color:var(--fg); font-weight:500}
.chk input{position:absolute; opacity:0; width:0; height:0}
.chk span{width:18px; height:18px; border:1.5px solid var(--line); border-radius:5px; display:inline-block; position:relative; background:var(--bg)}
.chk input:checked + span{background:var(--brand); border-color:var(--brand)}
.chk input:checked + span::after{content:"✓"; color:#fff; font-size:12px; position:absolute; top:-1px; left:3px}
.chk input:disabled + span{opacity:.4}
.chk.inline{margin-top:18px}

/* Params */
.params{display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; margin:14px 0}
.params label{margin:0} .params .grow{flex:1; min-width:220px}
.params input[type=number]{width:110px}

/* Gen status */
.genstatus{margin-top:12px; font-size:13.5px}
.genstatus.busy{color:var(--brand2)} .genstatus.err{color:var(--danger)}
.spinner{display:inline-block; width:14px; height:14px; border:2px solid var(--line);
  border-top-color:var(--brand); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-2px; margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Generation view */
.gen-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap}
.gen-head .actions{display:flex; gap:10px}
.questions{margin-top:10px}
.questions ol,.questions ul{padding-left:22px}
.questions li{margin:10px 0}
.questions h3{margin:18px 0 6px; font-size:16px}
.questions p{margin:8px 0}