*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#08090c; --s1:#0e1016; --s2:#13151e; --s3:#1a1d28; --s4:#212435;
  --b1:#252838; --b2:#2f3347; --b3:#3a3f56;
  --t1:#eef0f8; --t2:#9ba3c4; --t3:#5c6382; --t4:#363c56;
  --accent:#4f8dff; --accent2:#3a6fd4; --accent-s:rgba(79,141,255,0.10); --accent-b:rgba(79,141,255,0.22);
  --green:#3edfa8; --green-s:rgba(62,223,168,0.10); --green-b:rgba(62,223,168,0.20);
  --red:#ff5c6a; --red-s:rgba(255,92,106,0.10); --red-b:rgba(255,92,106,0.20);
  --amber:#f5a623; --amber-s:rgba(245,166,35,0.08); --amber-b:rgba(245,166,35,0.20);
  --purple:#a78bfa; --purple-s:rgba(167,139,250,0.12);
  --r:12px; --rs:8px; --rx:5px;
  --ff:'Instrument Sans',sans-serif; --fd:'Syne',sans-serif; --fm:'JetBrains Mono',monospace;
}
html,body{height:100%;}
body{font-family:var(--ff);background:var(--bg);color:var(--t1);min-height:100vh;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(var(--b1) 1px,transparent 1px),linear-gradient(90deg,var(--b1) 1px,transparent 1px);background-size:40px 40px;opacity:0.18;}

/* Step nav */
.step-nav{display:flex;align-items:center;justify-content:center;padding:2rem 1rem 0;position:relative;z-index:1;}
.step-item{display:flex;flex-direction:column;align-items:center;gap:6px;}
.step-circle{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--b2);background:var(--s2);display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:12px;color:var(--t3);transition:all 0.3s;}
.step-item span{font-size:11px;font-weight:500;color:var(--t3);letter-spacing:0.05em;text-transform:uppercase;transition:color 0.3s;}
.step-item.active .step-circle{border-color:var(--accent);background:var(--accent-s);color:var(--accent);box-shadow:0 0 16px rgba(79,141,255,0.25);}
.step-item.active span{color:var(--accent);}
.step-item.done .step-circle{border-color:var(--green);background:var(--green-s);color:var(--green);}
.step-item.done span{color:var(--green);}
.step-line{flex:1;max-width:80px;height:1px;background:var(--b2);margin:0 8px;margin-bottom:18px;transition:background 0.3s;}
.step-line.done{background:var(--green);}

/* Pages */
.page{min-height:calc(100vh - 90px);display:flex;align-items:flex-start;justify-content:center;padding:2.5rem 1rem 4rem;animation:fadeUp 0.35s ease both;}
.page.hidden{display:none;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.page-inner{width:100%;max-width:720px;}
.page-hdr{margin-bottom:1.5rem;}
.page-hdr h1{font-family:var(--fd);font-size:28px;font-weight:700;letter-spacing:-0.5px;color:var(--t1);line-height:1.2;}
.page-hdr p{font-size:14px;color:var(--t3);margin-top:6px;line-height:1.6;}

/* Drop zone */
.drop-zone{border:1.5px dashed var(--b2);border-radius:var(--r);padding:3rem 2rem;text-align:center;cursor:pointer;background:var(--s1);position:relative;overflow:hidden;transition:all 0.2s;}
.drop-zone::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,rgba(79,141,255,0.05) 0%,transparent 65%);}
.drop-zone:hover,.drop-zone.over{border-color:var(--accent);background:var(--s2);}
.drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.drop-icon{font-size:40px;margin-bottom:12px;display:block;}
.drop-text{display:flex;flex-direction:column;gap:4px;}
.drop-text strong{font-family:var(--fd);font-size:17px;font-weight:600;color:var(--t1);}
.drop-text span{font-size:13px;color:var(--t3);}
.fmt-pills{display:flex;gap:6px;justify-content:center;margin-top:14px;flex-wrap:wrap;}
.pill{font-family:var(--fm);font-size:10px;font-weight:500;padding:3px 10px;border-radius:20px;border:1px solid var(--b2);color:var(--t3);}

/* File preview */
.file-preview{display:none;margin-top:12px;background:var(--s1);border:1px solid var(--b1);border-radius:var(--rs);overflow:hidden;}
.file-preview.show{display:block;}
.file-preview-inner{display:flex;align-items:center;gap:12px;padding:12px 16px;}
.file-ico{font-size:24px;flex-shrink:0;}
.file-info{flex:1;min-width:0;}
.file-name{font-size:14px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.file-meta{font-size:12px;color:var(--t3);font-family:var(--fm);margin-top:2px;}
.file-rm{background:none;border:none;font-size:22px;color:var(--t4);cursor:pointer;padding:4px;line-height:1;transition:color 0.15s;flex-shrink:0;}
.file-rm:hover{color:var(--red);}
audio{width:100%;height:38px;display:block;padding:0 16px 12px;filter:invert(1) hue-rotate(200deg) brightness(0.75);}

/* Warn bar */
.warn-bar{display:none;padding:10px 14px;background:var(--amber-s);border:1px solid var(--amber-b);border-radius:var(--rs);margin-top:12px;font-size:13px;color:var(--amber);line-height:1.5;}
.warn-bar.show{display:block;}

/* Buttons */
.page-actions{display:flex;align-items:center;gap:10px;margin-top:24px;flex-wrap:wrap;}
.btn-primary{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 28px;border-radius:var(--rs);background:var(--accent);color:#fff;font-size:15px;font-weight:600;font-family:var(--fd);border:none;cursor:pointer;letter-spacing:0.02em;transition:all 0.15s;box-shadow:0 0 28px rgba(79,141,255,0.28);}
.btn-primary:hover{background:var(--accent2);box-shadow:0 0 36px rgba(79,141,255,0.4);}
.btn-primary:active{transform:scale(0.97);}
.btn-primary:disabled{background:var(--s4);color:var(--t4);cursor:not-allowed;box-shadow:none;transform:none;}
.btn-icon{font-size:16px;}
.btn-ghost{height:46px;padding:0 20px;border-radius:var(--rs);background:transparent;color:var(--t3);font-size:14px;font-family:var(--ff);border:1px solid var(--b1);cursor:pointer;transition:all 0.15s;}
.btn-ghost:hover{background:var(--s2);color:var(--t1);border-color:var(--b2);}

/* Progress/Status/Error */
.progress-wrap{display:none;margin-top:16px;}
.progress-wrap.show{display:block;}
.progress-label{font-size:12px;color:var(--t3);font-family:var(--fm);margin-bottom:7px;}
.progress-track{height:3px;background:var(--s3);border-radius:2px;overflow:hidden;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--purple));border-radius:2px;transition:width 0.4s ease;width:0%;}
.status-bar{display:none;align-items:center;gap:10px;padding:10px 14px;background:var(--accent-s);border:1px solid var(--accent-b);border-radius:var(--rs);margin-top:12px;font-size:13px;color:var(--accent);}
.status-bar.show{display:flex;}
.spinner{width:14px;height:14px;border:2px solid var(--accent-b);border-top-color:var(--accent);border-radius:50%;animation:spin 0.7s linear infinite;flex-shrink:0;}
@keyframes spin{to{transform:rotate(360deg)}}
.error-bar{display:none;padding:11px 14px;background:var(--red-s);border:1px solid var(--red-b);border-radius:var(--rs);margin-top:12px;font-size:13px;color:var(--red);line-height:1.5;}
.error-bar.show{display:block;}

/* Pills */
.lang-pill,.dur-pill{display:inline-flex;align-items:center;gap:4px;font-family:var(--fm);font-size:11px;color:var(--accent);background:var(--accent-s);border:1px solid var(--accent-b);border-radius:20px;padding:2px 8px;margin-left:4px;vertical-align:middle;}
.dur-pill{color:var(--green);background:var(--green-s);border-color:var(--green-b);}

/* Meta row */
.meta-row{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.meta-badge{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--rs);font-size:13px;font-weight:500;font-family:var(--fd);}
.meta-badge.outcome{background:var(--accent-s);border:1px solid var(--accent-b);color:var(--accent);}
.meta-badge.sentiment-positive{background:var(--green-s);border:1px solid var(--green-b);color:var(--green);}
.meta-badge.sentiment-negative{background:var(--red-s);border:1px solid var(--red-b);color:var(--red);}
.meta-badge.sentiment-neutral{background:var(--s2);border:1px solid var(--b2);color:var(--t2);}
.meta-badge .meta-score{font-family:var(--fm);font-size:11px;opacity:0.8;}

/* Summary blocks */
.sum-block{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);overflow:hidden;margin-bottom:12px;}
.sum-block-label{padding:11px 16px;border-bottom:1px solid var(--b1);font-family:var(--fm);font-size:11px;color:var(--t3);letter-spacing:0.07em;text-transform:uppercase;}
.sum-block-body{padding:16px;}
.overview-text{font-size:15px;line-height:1.8;color:var(--t2);}

/* Key points */
.kp-list{display:flex;flex-direction:column;gap:8px;padding:14px 16px;}
.kp-item{display:flex;gap:12px;align-items:flex-start;}
.kp-num{width:22px;height:22px;border-radius:50%;background:var(--accent-s);border:1px solid var(--accent-b);font-family:var(--fm);font-size:11px;color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.kp-text{font-size:14px;color:var(--t2);line-height:1.6;}

/* Customer Questions */
.qn-list{display:flex;flex-direction:column;gap:8px;padding:14px 16px;}
.qn-item{background:var(--s2);border:1px solid var(--b1);border-radius:var(--rs);padding:11px 14px;}
.qn-q{font-size:14px;color:var(--t1);line-height:1.6;}

/* Speakers */
.sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px;}
@media(max-width:520px){.sp-grid{grid-template-columns:1fr;}}
.sp-card{background:var(--s2);border:1px solid var(--b1);border-radius:var(--rs);padding:14px;}
.sp-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.sp-avatar{width:34px;height:34px;border-radius:50%;background:var(--purple-s);border:1px solid rgba(167,139,250,0.3);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:12px;font-weight:700;color:var(--purple);flex-shrink:0;}
.sp-name{font-family:var(--fd);font-size:14px;font-weight:600;color:var(--t1);}
.sp-role{font-size:11px;color:var(--t3);}
.sp-text{font-size:13px;color:var(--t2);line-height:1.6;}

/* Action items */
.ac-list{display:flex;flex-direction:column;gap:8px;padding:14px 16px;}
.ac-item{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;background:var(--green-s);border:1px solid var(--green-b);border-radius:var(--rs);}
.ac-check{font-size:15px;flex-shrink:0;margin-top:1px;}
.ac-body{flex:1;}
.ac-task{font-size:14px;color:var(--t2);line-height:1.6;}
.ac-meta{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap;}
.ac-owner{font-size:11px;color:var(--green);font-family:var(--fm);}
.ac-priority{font-size:10px;font-family:var(--fm);padding:1px 7px;border-radius:20px;font-weight:500;}
.ac-priority.high{background:var(--red-s);color:var(--red);border:1px solid var(--red-b);}
.ac-priority.medium{background:var(--amber-s);color:var(--amber);border:1px solid var(--amber-b);}
.ac-priority.low{background:var(--green-s);color:var(--green);border:1px solid var(--green-b);}

/* Follow up */
.followup-body{font-size:14px;color:var(--t2);line-height:1.7;}
.followup-body strong{color:var(--t1);}

/* Download */
.download-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:20px;}
.dl-btns{display:flex;gap:8px;flex-wrap:wrap;}
.btn-download{height:42px;padding:0 18px;border-radius:var(--rs);background:var(--s2);color:var(--t2);font-size:13px;font-weight:500;font-family:var(--ff);border:1px solid var(--b2);cursor:pointer;transition:all 0.15s;display:inline-flex;align-items:center;gap:6px;}
.btn-download:hover{background:var(--s3);color:var(--t1);border-color:var(--b3);}
.btn-download.accent{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 20px rgba(79,141,255,0.2);}
.btn-download.accent:hover{background:var(--accent2);box-shadow:0 0 28px rgba(79,141,255,0.35);}
.btn-restart{display:block;margin:24px auto 0;height:38px;padding:0 20px;border-radius:var(--rs);background:transparent;color:var(--t3);font-size:13px;font-family:var(--ff);border:1px solid var(--b1);cursor:pointer;transition:all 0.15s;}
.btn-restart:hover{background:var(--s2);color:var(--t1);}
.checklist-list { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.cl-item { border-radius: var(--rs); padding: 12px 14px; background: var(--s2); border: 1px solid var(--b1); }
.cl-item.covered { border-left: 4px solid var(--green); background: var(--green-s); }
.cl-item.missed { border-left: 4px solid var(--red); background: var(--red-s); opacity: 0.8; }
.cl-head { display: flex; align-items: center; gap: 10px; }
.cl-icon { font-size: 16px; flex-shrink: 0; }
.cl-point { font-size: 14px; font-weight: 600; color: var(--t1); }
.cl-evidence { font-size: 12px; color: var(--t3); margin-top: 6px; padding-left: 26px; font-style: italic; line-height: 1.5; }
.cl-item.covered .cl-evidence { color: var(--green); opacity: 0.9; }
.cl-item.missed .cl-evidence { color: var(--red); opacity: 0.9; }

::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px;}