:root { color-scheme: dark; --background:#050b24; --panel:#111a38; --border:#32405f; --text:#f4f7ff; --muted:#b5c1d9; --cyan:#65e4ef; --gold:#f4d48a; font:16px/1.5 system-ui,sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; background:radial-gradient(ellipse at top right,#1d2454,transparent 65%),var(--background); color:var(--text); }
button,input,select,textarea { font:inherit; }
button,input,select,textarea { border:1px solid var(--border); border-radius:9px; padding:.65rem .8rem; }
input,select,textarea { width:100%; color:var(--text); background:#080f28; }
textarea { resize:vertical; min-height:100px; }
button { color:var(--text); background:#202c4d; cursor:pointer; min-height:44px; }
button:hover:not(:disabled) { border-color:var(--cyan); background:#293d5d; }
button:disabled { opacity:.5; cursor:not-allowed; }
:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.primary { color:#042430; background:var(--cyan); font-weight:700; }
label { display:block; font-weight:600; margin:.9rem 0 .35rem; }
form>button { margin-top:1rem; width:100%; }
h1,h2,h3,p { margin:0 0 .8rem; }
h1 { font-size:clamp(1.8rem,3.6vw,3.8rem); line-height:1.12; letter-spacing:-.035em; }
h1 span,em { color:var(--cyan); font-style:normal; }
h2 { font-size:1.2rem; }
h3 { font-size:1rem; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:1600px; margin:auto; padding:1.5rem 3%; border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:.8rem; color:inherit; text-decoration:none; }
.brand img { width:54px; height:54px; object-fit:contain; }
.brand strong { display:block; font-size:1.35rem; letter-spacing:.07em; }
.brand small { display:block; color:var(--muted); }
main { max-width:1600px; margin:auto; padding:2.5rem 3%; }
.badge { display:inline-block; padding:.35rem .7rem; border-radius:30px; border:1px solid #466578; color:var(--cyan); font-size:.8rem; }
.login-layout { display:grid; grid-template-columns:1.2fr 1fr; gap:7%; align-items:center; min-height:65vh; max-width:1100px; margin:auto; }
.intro>p { max-width:36rem; }
.eyebrow { color:var(--cyan); letter-spacing:.15em; font-size:.7rem; font-weight:800; }
.panel { background:linear-gradient(145deg,#141e40,#10172e); border:1px solid var(--border); border-radius:16px; padding:1.4rem; min-width:0; }
.login-card { padding:2rem; }
.muted,.provider-note { color:var(--muted); font-size:.85rem; }
.steps { display:flex; flex-wrap:wrap; gap:1rem; margin:1.5rem 0; color:var(--gold); font-size:.85rem; }
.provider-note { border-left:2px solid #856ccc; padding-left:1rem; }
.workspace-heading,.toolbar,.section-heading,.status-strip,.status-strip>div { display:flex; justify-content:space-between; align-items:center; gap:.8rem; flex-wrap:wrap; }
.workspace-heading h1 { font-size:2rem; }
.toolbar { justify-content:flex-end; }
.toolbar label { margin:0; }
.toolbar select { width:auto; }
.status-strip { margin:1.4rem 0; border-block:1px solid var(--border); padding:1rem 0; font-size:.85rem; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.5rem; }
.metrics>div { padding:1rem; border:1px solid var(--border); border-radius:12px; background:#101a35; }
.metrics span { display:block; color:var(--muted); font-size:.8rem; }
.metrics strong { font-size:1.8rem; }
.metrics .metric-label { font-size:1rem; color:var(--cyan); }
.work-grid { display:grid; grid-template-columns:minmax(220px,.85fr) minmax(250px,1fr) minmax(320px,1.3fr); align-items:start; gap:1rem; }
.item-list { margin-top:1.2rem; max-height:36rem; overflow-y:auto; scrollbar-gutter:stable; }
.item-card { padding:1rem 0; border-top:1px solid var(--border); }
.identifier { color:var(--muted); font-size:.72rem; overflow-wrap:anywhere; }
.actions { display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0; }
.actions button { font-size:.8rem; flex:1 1 auto; }
.message-choice { display:block; width:100%; margin-bottom:.65rem; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; max-height:10rem; overflow-y:auto; }
.message-choice[aria-pressed=true] { border-color:var(--cyan); background:#153444; }
.original-message { padding:.8rem; border-left:2px solid var(--cyan); background:#080f28; white-space:pre-wrap; overflow-wrap:anywhere; max-height:16rem; overflow:auto; }
#review-content>button { margin:.5rem .5rem .5rem 0; }
.gold { color:var(--gold); font-size:.8rem; }
.history { margin:1.5rem 0 1rem; }
.table-wrap { overflow:auto; max-height:24rem; }
table { width:100%; border-collapse:collapse; font-size:.8rem; text-align:left; }
th,td { padding:.7rem; border-bottom:1px solid var(--border); }
th { color:var(--muted); position:sticky; top:0; background:var(--panel); }
.notice { position:sticky; bottom:1rem; padding:1rem 1.3rem; border:1px solid var(--cyan); border-radius:12px; background:#0b2835; box-shadow:0 6px 30px #0007; margin-top:1rem; }
.notice.error { border-color:#f0afaf; background:#3f202c; }
footer { text-align:center; padding:1.5rem; color:var(--muted); font-size:.75rem; }
footer span { padding:0 .7rem; color:var(--cyan); }
@media (max-width:1100px) { .work-grid { grid-template-columns:1fr 1.2fr; } .review-panel { grid-column:1/-1; } .login-layout { gap:3%; } }
@media (max-width:650px) { .topbar { padding:1rem; } .topbar>.badge { display:none; } main { padding:1.5rem 1rem; } .login-layout,.work-grid { grid-template-columns:1fr; } .login-layout { gap:1.5rem; } .intro h1 { font-size:2.25rem; } .metrics { grid-template-columns:1fr 1fr; } .toolbar { justify-content:flex-start; width:100%; } .toolbar select { flex:1; } .panel { padding:1rem; } .workspace-heading h1 { font-size:1.6rem; } .item-list { max-height:22rem; } .notice { bottom:.5rem; font-size:.85rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; } }