/* Sellora design system — tokens, layout, components. Hand-written, no build step. */
:root{
  --bg:#f4f6fa;--surface:#ffffff;--surface-2:#f8fafc;--line:#e4e8ef;--line-2:#d3d9e3;
  --ink:#0f172a;--ink-2:#334155;--muted:#64748b;--muted-2:#94a3b8;
  --brand:#2f4ec9;--brand-2:#1f3a9e;--brand-soft:#e8edfb;--accent:#f97316;--accent-soft:#fff1e7;
  --green:#16a34a;--green-soft:#e8f7ed;--red:#dc2626;--red-soft:#fdecec;--amber:#d97706;--amber-soft:#fff5e0;--blue:#2563eb;--blue-soft:#e8effd;--indigo:#4f46e5;--indigo-soft:#ecebfd;--gray:#64748b;--gray-soft:#eef1f5;
  --radius:12px;--radius-sm:8px;--shadow:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.06);--shadow-lg:0 12px 40px rgba(15,23,42,.14);
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--font-h:'Plus Jakarta Sans','Inter',sans-serif;
  --sidebar:252px;
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-h);margin:0 0 .4em;line-height:1.25;color:var(--ink);letter-spacing:-.01em}
h1{font-size:24px;font-weight:700}h2{font-size:18px;font-weight:700}h3{font-size:15px;font-weight:600}h4{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
p{margin:0 0 .8em}code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
pre{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;overflow:auto;white-space:pre-wrap}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}
small,.small{font-size:12px;color:var(--muted)}.muted{color:var(--muted)}.strong{font-weight:600}.mono{font-family:ui-monospace,Menlo,monospace}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Inline SVG icons: sane default size everywhere; larger only in deliberate spots */
svg{width:18px;height:18px;flex:none;vertical-align:-3px}
.flash svg{margin-top:1px;color:inherit}
.card-h svg{color:var(--muted)}
.empty svg{width:40px;height:40px}
.dropzone svg,.card>svg:first-child,.card>div>svg:first-child{width:32px;height:32px;color:var(--brand)}
.stat svg{width:20px;height:20px;color:var(--muted)}
/* ---- App shell ---- */
.shell{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);background:#0f172a;color:#cbd5e1;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:40;transition:transform .2s}
.sidebar .logo{display:flex;align-items:center;gap:10px;padding:18px 18px 10px;color:#fff;font-family:var(--font-h);font-weight:800;font-size:19px;letter-spacing:-.02em}
.sidebar .logo i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#7c3aed);display:inline-block}
.sidebar .orgsw{margin:8px 12px 12px;background:#1e293b;border-radius:10px;padding:10px 12px;cursor:pointer;position:relative}
.sidebar .orgsw b{display:block;color:#fff;font-size:13px}.sidebar .orgsw span{font-size:11px;color:#94a3b8}
.sidebar .orgsw .menu{display:none;position:absolute;left:0;right:0;top:100%;margin-top:6px;background:#1e293b;border:1px solid #334155;border-radius:10px;padding:6px;z-index:50;max-height:320px;overflow:auto;box-shadow:var(--shadow-lg)}
.sidebar .orgsw.open .menu{display:block}
.sidebar .orgsw .menu button{display:block;width:100%;text-align:left;background:none;border:0;color:#e2e8f0;padding:7px 10px;border-radius:7px;cursor:pointer;font-size:13px}
.sidebar .orgsw .menu button:hover{background:#334155}.sidebar .orgsw .menu button.active{color:#fff;background:var(--brand)}
.sidebar .orgsw .menu .d1{padding-left:22px}.sidebar .orgsw .menu .d2{padding-left:34px}.sidebar .orgsw .menu .d3{padding-left:46px}
.sidebar nav{flex:1;overflow:auto;padding:4px 10px}
.sidebar nav h4{color:#64748b;margin:14px 10px 6px;font-size:10.5px}
.sidebar nav a{display:flex;align-items:center;gap:10px;color:#cbd5e1;padding:8px 10px;border-radius:8px;font-size:13.5px;font-weight:500}
.sidebar nav a:hover{background:#1e293b;color:#fff;text-decoration:none}
.sidebar nav a.active{background:var(--brand);color:#fff}
.sidebar nav a svg{width:17px;height:17px;flex:none;opacity:.85}
.sidebar nav a .pill{margin-left:auto;background:var(--accent);color:#fff;font-size:10.5px;padding:1px 7px;border-radius:99px;font-weight:600}
.sidebar .user{padding:12px 14px;border-top:1px solid #1e293b;display:flex;align-items:center;gap:10px;font-size:13px}
.sidebar .user .av{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.sidebar .user b{display:block;color:#fff}.sidebar .user span{color:#94a3b8;font-size:11px}
.sidebar .user form{margin-left:auto}.sidebar .user button{background:none;border:0;color:#94a3b8;cursor:pointer;padding:4px}
.main{flex:1;margin-left:var(--sidebar);min-width:0}
.topbar{height:56px;display:flex;align-items:center;gap:14px;padding:0 24px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.topbar .burger{display:none;background:none;border:0;font-size:22px;cursor:pointer}
.topbar h1{font-size:17px;margin:0}
.topbar .right{margin-left:auto;display:flex;gap:10px;align-items:center}
.ai-dot{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.ai-dot i{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block}.ai-dot.off i{background:var(--red)}
.content{padding:24px;max-width:1440px}
/* ---- Components ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px}
.card.tight{padding:0}.card.tight .card-h{padding:14px 18px}.card.tight .card-b{padding:0 18px 16px}
.card-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}.card-h h2,.card-h h3{margin:0}.card-h .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.grid{display:grid;gap:18px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
.cols{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.stat .l{font-size:12px;color:var(--muted);font-weight:500}.stat .v{font-family:var(--font-h);font-size:26px;font-weight:700;margin-top:2px}.stat .s{font-size:12px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);padding:8px 14px;border-radius:var(--radius-sm);font-weight:500;font-size:13.5px;cursor:pointer;line-height:1.2;white-space:nowrap;transition:background .12s,border-color .12s}
.btn:hover{background:var(--surface-2);text-decoration:none}.btn svg{width:15px;height:15px}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}.btn-accent:hover{filter:brightness(.95)}
.btn-danger{color:var(--red);border-color:#f3c5c5}.btn-danger:hover{background:var(--red-soft)}
.btn-ghost{border-color:transparent;background:transparent}.btn-ghost:hover{background:var(--gray-soft)}
.btn-sm{padding:5px 10px;font-size:12.5px}.btn-lg{padding:11px 20px;font-size:15px}
.btn[disabled],.btn.loading{opacity:.6;pointer-events:none}
.btn-group{display:inline-flex;gap:6px;flex-wrap:wrap}
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;line-height:1.6;white-space:nowrap}
.badge-gray{background:var(--gray-soft);color:var(--gray)}.badge-green{background:var(--green-soft);color:var(--green)}.badge-red{background:var(--red-soft);color:var(--red)}.badge-amber{background:var(--amber-soft);color:var(--amber)}.badge-blue{background:var(--blue-soft);color:var(--blue)}.badge-indigo{background:var(--indigo-soft);color:var(--indigo)}.badge-brand{background:var(--brand-soft);color:var(--brand)}.badge-accent{background:var(--accent-soft);color:var(--accent)}
.chip{display:inline-block;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:2px 10px;font-size:12px;margin:2px 4px 2px 0;color:var(--ink-2)}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}.table tr:hover td{background:#fafbfd}
.table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums}
.table .actions{text-align:right;white-space:nowrap}
.empty{text-align:center;padding:40px 20px;color:var(--muted)}.empty h3{color:var(--ink);margin-bottom:6px}.empty svg{width:40px;height:40px;color:var(--muted-2);margin-bottom:10px}
/* forms */
label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.field{margin-bottom:14px}.field .help{font-size:12px;color:var(--muted);margin-top:4px}.field .err{color:var(--red);font-size:12px;margin-top:4px}
.input,select,textarea,input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=date],input[type=search]{width:100%;border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:9px 12px;font:inherit;font-size:13.5px;background:#fff;color:var(--ink);outline:none;transition:border-color .12s,box-shadow .12s}
.input:focus,select:focus,textarea:focus,input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
textarea{min-height:96px;resize:vertical;line-height:1.5}
input[type=color]{width:44px;height:36px;padding:2px;border:1px solid var(--line-2);border-radius:6px;background:#fff}
input[type=checkbox],input[type=radio]{width:15px;height:15px;accent-color:var(--brand);vertical-align:-2px;margin-right:6px}
.check{display:flex;align-items:center;gap:6px;font-weight:500;font-size:13.5px;cursor:pointer}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.row>*{margin:0}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 18px}.form-grid .span2{grid-column:span 2}
.inline-form{display:inline}
.search{position:relative}.search input{padding-left:34px}.search svg{position:absolute;left:11px;top:10px;width:16px;height:16px;color:var(--muted)}
/* flash */
.flash{padding:11px 14px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:13.5px;display:flex;gap:10px;align-items:flex-start;border:1px solid}
.flash-success{background:var(--green-soft);color:#14532d;border-color:#bfe8cc}.flash-error{background:var(--red-soft);color:#7f1d1d;border-color:#f3c5c5}.flash-info{background:var(--blue-soft);color:#1e3a8a;border-color:#c7d7fb}.flash-warning{background:var(--amber-soft);color:#7c2d12;border-color:#f6dca4}
.flash button{margin-left:auto;background:none;border:0;cursor:pointer;color:inherit;opacity:.6}
/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow:auto}
.tabs a,.tabs button{padding:9px 14px;border:0;background:none;color:var(--muted);font-weight:500;font-size:13.5px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a.active,.tabs button.active{color:var(--brand);border-bottom-color:var(--brand)}.tabs a:hover{text-decoration:none;color:var(--ink)}
.tab-pane{display:none}.tab-pane.active{display:block}
/* modal */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.5);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal.open{display:flex}.modal .box{background:#fff;border-radius:14px;width:100%;max-width:640px;max-height:92vh;overflow:auto;box-shadow:var(--shadow-lg)}
.modal .box.wide{max-width:900px}.modal .mh{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}.modal .mh h3{margin:0}.modal .mh button{margin-left:auto;background:none;border:0;font-size:20px;cursor:pointer;color:var(--muted)}
.modal .mb{padding:18px 20px}.modal .mf{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
/* misc */
.kv{display:grid;grid-template-columns:140px 1fr;gap:6px 12px;font-size:13.5px}.kv dt{color:var(--muted)}.kv dd{margin:0}
.progress{height:6px;background:var(--gray-soft);border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;background:var(--brand)}
.score{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;font-family:var(--font-h);font-weight:800;font-size:18px;color:#fff}
.score.g{background:var(--green)}.score.a{background:var(--amber)}.score.r{background:var(--red)}
.toast{position:fixed;bottom:20px;right:20px;background:#0f172a;color:#fff;padding:11px 16px;border-radius:10px;font-size:13.5px;box-shadow:var(--shadow-lg);z-index:200;opacity:0;transform:translateY(8px);transition:.2s}.toast.show{opacity:1;transform:none}
.copy{position:relative}.copy textarea,.copy pre{font-family:var(--font);font-size:13.5px;line-height:1.55;white-space:pre-wrap}
.wa{background:#e7f8e5;border-radius:14px;padding:12px 14px;font-size:13.5px;white-space:pre-wrap;position:relative;border:1px solid #cfe9cb;line-height:1.5}
.wa:after{content:'';position:absolute;left:-8px;top:12px;border:8px solid transparent;border-right-color:#e7f8e5;border-left:0}
.email{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:13.5px;white-space:pre-wrap;line-height:1.55}
.email .subj{font-weight:600;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:10px}
.steps{display:flex;gap:0;margin-bottom:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.steps div{flex:1;padding:12px 16px;font-size:13px;color:var(--muted);border-right:1px solid var(--line);display:flex;gap:10px;align-items:center}
.steps div:last-child{border-right:0}.steps div b{width:24px;height:24px;border-radius:50%;background:var(--gray-soft);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.steps div.done{color:var(--green)}.steps div.done b{background:var(--green);color:#fff}.steps div.cur{color:var(--brand);font-weight:600;background:var(--brand-soft)}.steps div.cur b{background:var(--brand);color:#fff}
.dropzone{border:2px dashed var(--line-2);border-radius:var(--radius);padding:30px;text-align:center;color:var(--muted);background:var(--surface-2);cursor:pointer;transition:.12s}
.dropzone.over,.dropzone:hover{border-color:var(--brand);background:var(--brand-soft)}
.timeline-ev{list-style:none;padding:0;margin:0}.timeline-ev li{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}.timeline-ev li:last-child{border:0}.timeline-ev time{color:var(--muted);font-size:12px;white-space:nowrap;min-width:70px}
.check-list{list-style:none;padding:0;margin:0}.check-list li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}.check-list li:last-child{border:0}
.check-list .ic{width:20px;height:20px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff}
.ic.ok{background:var(--green)}.ic.warn{background:var(--amber)}.ic.fail{background:var(--red)}
.tree ul{list-style:none;padding-left:18px;margin:0}.tree>ul{padding-left:0}.tree li{padding:4px 0}
.json-view{font-size:12.5px;background:var(--surface-2);border-radius:8px;padding:10px 12px;border:1px solid var(--line);max-height:300px;overflow:auto}
.tag-cloud span{display:inline-block;background:var(--brand-soft);color:var(--brand);padding:2px 9px;border-radius:99px;font-size:12px;margin:2px}
.plan-card{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fff}.plan-card b{display:block;font-size:14px}.plan-card .price{font-family:var(--font-h);font-size:18px;font-weight:700;color:var(--brand)}
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}.cols{grid-template-columns:1fr}}
@media (max-width:860px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:none}.main{margin-left:0}.topbar .burger{display:block}.content{padding:16px}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .span2{grid-column:auto}.steps{flex-direction:column}.steps div{border-right:0;border-bottom:1px solid var(--line)}}