@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Instrument+Sans:wght@400;500;600;700&display=swap");
/* Shared workspace tokens. Component files consume these values. */
:root{
  --font-ui:"Instrument Sans",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --font-mono:"DM Mono",ui-monospace,SFMono-Regular,monospace;
  --text-body:16px;--text-label:14px;--text-title:clamp(28px,2.5vw,34px);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;
  --ink:#edf1ef;--muted:#b0b9b6;--line:#24292a;--line-soft:#1c2223;
  --paper:#090b0c;--card:#111415;--surface-input:#0f1314;--surface-hover:#151b1c;
  --mint:#d7ff7a;--green:#c8ed73;--orange:#ffb26c;
  --ok:#a9d86b;--warn:#e8c46a;--bad:#e08a72;
  --r-sm:6px;--r-md:8px;--r-lg:12px;
  --ctl:40px;--ctl-sm:32px;--pad:var(--space-5);
  --shadow:0 12px 36px rgba(0,0,0,.2);
}
@media(max-width:900px){:root{--ctl:44px;--ctl-sm:36px;--pad:var(--space-4)}}
@media(max-width:600px){:root{--ctl-sm:44px}}
/* Base structure. responsive.css handles layout; service.css handles shared
   controls and workspace components; ai.css handles analysis and creation views. */
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-ui);font-size:var(--text-body);line-height:1.65;letter-spacing:normal;background:var(--paper)}
button{font:inherit;cursor:pointer;border:0}
.app{display:flex}
.side{color:#dce9e2;display:flex;flex-direction:column}
.brand{font-weight:800;padding:0 13px 35px}
.nav{display:grid}
.nav button{background:transparent;text-align:left}
.main{flex:1}
.top{display:flex;justify-content:space-between;align-items:center}
.eyebrow{font-family:var(--font-mono);text-transform:uppercase}
.title{margin:7px 0 0}
.actions{display:flex;align-items:center}
.avatar{height:38px;width:38px;border-radius:50%;display:grid;place-items:center;font-weight:800}
.grid{display:grid}
.metric .num{margin:12px 0 3px}
.delta{font-weight:700}
.section{display:grid}
.panelhead{display:flex;justify-content:space-between}
.panel h2{margin:0}
.sub{font-size:14px}
.bar{flex:1;position:relative}
.bar span{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);font:14px "DM Mono";color:var(--muted)}
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;border-bottom:1px solid var(--line)}
.table td{border-bottom:1px solid #edf1ed}
.creator{display:flex;align-items:center;gap:10px;font-weight:700}
.pill{padding:5px 8px}
.rank{font-family:var(--font-mono);color:var(--muted)}
.alert{display:flex;align-items:flex-start;border-bottom:1px solid #edf1ed}
.dot{width:8px;height:8px;background:var(--orange);border-radius:50%;margin-top:6px}
.alert b{font-size:15px}
.alert p{font-size:14px;color:var(--muted);margin:4px 0 0;line-height:1.5}
.modal{padding:28px}
.modalhead{display:flex;justify-content:space-between;align-items:center}
.close{background:none;font-size:24px}
.plan{border:1px solid var(--line);padding:18px}
.plan h3{margin:0;font-size:17px}
.price{font-size:27px;font-weight:800;margin:13px 0}
.price small{font-size:14px;color:var(--muted);font-weight:500}
.plan ul{padding-left:17px;color:var(--muted);font-size:14px;line-height:2}
.plan .btn{width:100%;margin-top:8px}
.toast{position:fixed;padding:13px 17px;display:none}
.toast.show{display:block}
select,input{font:inherit}
.field{display:grid;gap:7px;margin:14px 0}
.field label{font-size:14px;color:var(--muted)}
.field input,.field select{padding:12px;border:1px solid var(--line)}
.hint{font-size:14px;color:var(--muted);line-height:1.5}
.auth-status{display:flex;gap:8px;align-items:center;border-radius:9px;padding:11px;font-size:14px;color:var(--green);margin:15px 0}
.auth-dot{width:8px;height:8px;border-radius:50%;background:#2aae72}
body{color:var(--ink)}
.side{position:fixed;z-index:3;left:18px;top:18px;bottom:18px;border:1px solid #294038;padding:24px 14px}
.brand{color:#e7f0eb;padding-bottom:25px}
.main{max-width:none}
.title{color:#f3fbf7}
.metric,.panel{backdrop-filter:blur(10px)}
.metric .label,.sub{color:#91a49b}
.metric .num{color:#f1fbf5}
.creator{color:#e7f0eb}
.modal{color:#e7f0eb}
pre{background:#08100d !important}
.close{color:#91a49b}