/* ============================================================================
 * Asas — macOS native-app design system (per Apple HIG conventions: layered
 * hairline shadows, vibrancy/blur chrome, SF Pro type scale, 8px spacing
 * grid, system accent green). Light + dark, designed independently per mode
 * (not inverted). Same selectors as before — visual redesign only, the DOM
 * app.js generates is unchanged.
 * ==========================================================================*/
:root{
  /* window canvas vs. elevated surfaces — hierarchy through background, not borders */
  --background:#F5F5F7;                 /* window/page canvas */
  --foreground:#1D1D1F;                 /* text-primary */
  --surface:#FFFFFF;                    /* control surfaces — inputs, dropdown buttons */
  --card:#FFFFFF;                       /* cards / panels, sit on the canvas */
  --muted:#EDEDF1;                      /* tertiary fill — hover states, muted rows, badges */
  --muted-2:#6E6E73;                    /* text-secondary */
  --line:rgba(0,0,0,.08);               /* hairline border */
  --line-2:rgba(0,0,0,.05);             /* lighter internal divider */

  --primary:#34C759;                    /* macOS system accent — Green */
  --primary-2:#248A3D;                  /* pressed / hover */
  --primary-fg:#FFFFFF;
  --primary-tint:rgba(52,199,89,.12);
  --ring:var(--primary);
  /* one accent everywhere — success / info / links all resolve to it */
  --ok:var(--primary); --warn:var(--primary); --info:var(--primary);
  --ok-tint:var(--primary-tint); --warn-tint:var(--primary-tint); --info-tint:var(--primary-tint);
  /* the ONLY non-accent color: system red, only on delete/validation */
  --danger:#FF3B30;
  --danger-tint:rgba(255,59,48,.1);

  /* macOS corner-radius scale */
  --r-sm:6px;   /* buttons, inputs */
  --r-md:8px;   /* cards */
  --r-lg:10px;  /* larger panels / doc surfaces */
  --r-xl:12px;  /* modals, floating panels */
  --r-pill:999px;

  /* layered hairline shadows — the "0 0 0 .5px" edge IS the macOS look */
  --shadow-sm:0 0 0 .5px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.06);
  --shadow:0 0 0 .5px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.1);
  --shadow-lg:0 0 0 .5px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.08), 0 8px 30px rgba(0,0,0,.14), 0 24px 60px rgba(0,0,0,.08);

  --vibrancy:rgba(246,246,246,.72);     /* sidebars / top bars / popovers / toasts */

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",Menlo,Monaco,"Courier New",monospace;
  --ease:cubic-bezier(.25,.46,.45,.94);
}
.dark{
  --background:#1C1C1E;
  --foreground:#F5F5F7;
  --surface:#2C2C2E;
  --card:#2C2C2E;
  --muted:#3A3A3C;
  --muted-2:#98989D;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.06);

  --primary:#30D158;                    /* brighter green for dark backgrounds */
  --primary-2:#47DC6B;
  --primary-fg:#04210E;                 /* near-black text reads better on bright green than white */
  --primary-tint:rgba(48,209,88,.16);

  --danger:#FF453A;
  --danger-tint:rgba(255,69,58,.14);

  --shadow-sm:0 0 0 .5px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow:0 0 0 .5px rgba(0,0,0,.5), 0 4px 20px rgba(0,0,0,.35);
  --shadow-lg:0 0 0 .5px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.3), 0 16px 50px rgba(0,0,0,.4), 0 32px 80px rgba(0,0,0,.25);

  --vibrancy:rgba(30,30,30,.72);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--foreground);background:var(--background);line-height:1.47;-webkit-font-smoothing:antialiased;font-size:13px;letter-spacing:-.005em}
button{font-family:inherit}
a{color:inherit;text-decoration:none}
::selection{background:var(--primary);color:var(--primary-fg)}

/* animatable conic angle for the rings */
@property --p{syntax:'<number>';inherits:false;initial-value:0}

/* page transitions — every route mount animates in */
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#app>*{animation:viewIn .3s var(--ease)}
.doc .body>*{animation:viewIn .2s ease}
@media(prefers-reduced-motion:reduce){#app>*,.doc .body>*{animation:none}}

/* ---------------- top bar (title bar + traffic lights, vibrancy) ---------------- */
.nav{position:sticky;top:0;z-index:30;background:var(--vibrancy);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--line)}
.nav .inner{max-width:1160px;margin:0 auto;padding:9px 18px;display:flex;align-items:center;gap:14px;min-height:50px}
.traffic{display:flex;align-items:center;gap:8px;margin-right:6px;flex:0 0 auto}
.traffic span{width:12px;height:12px;border-radius:50%;display:block;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15);transition:filter .15s var(--ease)}
.traffic .r{background:#FF5F57} .traffic .y{background:#FEBC2E} .traffic .g{background:#28C840}
.traffic:hover span{filter:brightness(1.08)}
.brand{display:flex;align-items:center;gap:9px;cursor:pointer}
.brand .mark{width:26px;height:26px;flex:0 0 auto}
.brand .mark svg{width:100%;height:100%;display:block}
.brand b{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.brand small{display:block;color:var(--muted-2);font-size:10.5px;font-weight:400;margin-top:-1px}
.nav .spacer{flex:1}
.navlink{color:var(--muted-2);font-size:12.5px;font-weight:500;padding:6px 11px;border-radius:var(--r-sm);cursor:pointer}
.navlink:hover{color:var(--foreground);background:var(--muted)}
.iconbtn{width:28px;height:28px;border-radius:var(--r-sm);border:.5px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--muted-2);font-size:13px}
.iconbtn:hover{color:var(--foreground);border-color:var(--muted-2)}
@media(max-width:560px){.brand small{display:none}.nav .inner{gap:6px;padding:8px 12px}.navlink{padding:6px 8px;font-size:12px}}

.page{max-width:1160px;margin:0 auto;padding:22px 20px 120px}

/* ---------------- buttons ---------------- */
.btn{border:.5px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:6px 12px;font-size:13px;font-weight:500;cursor:pointer;color:var(--foreground);display:inline-flex;align-items:center;gap:6px;transition:.12s var(--ease);white-space:nowrap;box-shadow:var(--shadow-sm)}
.btn:hover{border-color:var(--muted-2)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--foreground);color:var(--background);border-color:var(--foreground)}
.btn.primary:hover{opacity:.88}
.btn.accent{background:var(--primary);border-color:var(--primary);color:var(--primary-fg)}
.btn.accent:hover{background:var(--primary-2);border-color:var(--primary-2)}
.btn.danger{color:var(--muted-2);border-color:var(--line)}
.btn.danger:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-tint)}
.btn.sm{padding:4px 9px;font-size:12px;border-radius:var(--r-sm)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.ghost{background:none;border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--muted);border-color:transparent}
.ic{display:inline-block;flex:0 0 auto;vertical-align:-0.18em}
.btn .ic{margin-right:-1px}
.navlink{display:inline-flex;align-items:center;gap:6px}

/* ---------------- dashboard ---------------- */
.dash-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.dash-head h1{font-size:26px;margin:0 0 3px;letter-spacing:-.02em;font-weight:700;line-height:1.2}
.dash-head p{margin:0;color:var(--muted-2);font-size:13px}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.stat{background:var(--card);border:.5px solid var(--line);border-radius:var(--r-md);padding:18px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:16px;min-height:132px;justify-content:space-between}
.stat .ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--muted);color:var(--muted-2)}
.stat .ico.brand{background:var(--primary-tint);color:var(--primary)}
.stat .n{font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1}
.stat .l{color:var(--muted-2);font-size:12px;font-weight:500;margin-top:5px}
.stat .delta{font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill);align-self:flex-start}
.stat .delta.up{background:var(--ok-tint);color:var(--ok)}
.stat .delta.flat{background:var(--muted);color:var(--muted-2)}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}.stat .n{font-size:32px}}
@media(max-width:480px){.stats{grid-template-columns:1fr}}

.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.search{flex:1;min-width:200px;position:relative}
.search input{width:100%;font:inherit;font-size:13px;padding:7px 12px 7px 32px;border:.5px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--foreground);outline:none;box-shadow:var(--shadow-sm)}
.search input:focus{border-color:var(--ring);box-shadow:0 0 0 3px var(--primary-tint)}
.search .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted-2);font-size:13px}
.filters{display:flex;gap:2px;background:var(--muted);border:.5px solid var(--line);border-radius:var(--r-sm);padding:2px}
.filters button{border:none;background:none;padding:5px 12px;border-radius:4px;font-size:12px;font-weight:500;color:var(--muted-2);cursor:pointer;transition:.12s var(--ease)}
.filters button.on{background:var(--card);color:var(--foreground);box-shadow:var(--shadow-sm)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.card{background:var(--card);border:.5px solid var(--line);border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow-sm);cursor:pointer;transition:.15s var(--ease);position:relative;overflow:hidden}
.card:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:var(--muted-2)}
.card .top{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.card .avatar{width:42px;height:42px;border-radius:var(--r-sm);border:.5px solid var(--line);background:var(--muted);display:grid;place-items:center;flex:0 0 auto;padding:7px;overflow:hidden}
.card .avatar svg,.card .avatar img{max-width:100%;max-height:100%}
.card .avatar .ph{color:var(--muted-2)}
.card .tt{min-width:0;flex:1}
.card .tt b{display:block;font-size:14.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.card .tt span{color:var(--muted-2);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.card .meta{display:flex;align-items:center;gap:6px;justify-content:space-between;margin-top:4px;flex-wrap:wrap}
.pill{font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);letter-spacing:.01em}
.pill.type{background:var(--muted);color:var(--foreground)}
.pill.status-draft{background:var(--muted);color:var(--muted-2)}
.pill.status-ready{background:var(--primary-tint);color:var(--primary)}
.pill.status-building{background:var(--primary-tint);color:var(--primary);border:1px dashed var(--primary)}
.pill.status-launched{background:var(--primary);color:var(--primary-fg)}
.ring{--p:0;width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:10px;font-weight:700;background:conic-gradient(var(--primary) calc(var(--p)*1%), var(--line) 0);transition:--p .8s var(--ease)}
.ring i{width:26px;height:26px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-style:normal;color:var(--foreground)}
.card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:.5px solid var(--line-2);color:var(--muted-2);font-size:11px}

.empty{background:var(--card);border:1px dashed var(--line);border-radius:var(--r-xl);padding:56px 24px;text-align:center}
.empty .big{color:var(--primary);opacity:.85}
.empty h3{margin:14px 0 6px;font-size:17px;font-weight:600}
.empty p{margin:0 0 18px;color:var(--muted-2);font-size:13px}

/* ---------------- type picker ---------------- */
.picker{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:820px}
.ptile{background:var(--card);border:.5px solid var(--line);border-radius:var(--r-xl);padding:24px;cursor:pointer;transition:.15s var(--ease);box-shadow:var(--shadow-sm)}
.ptile:hover{border-color:var(--primary);transform:translateY(-1px);box-shadow:var(--shadow)}
.ptile .ico{width:50px;height:50px;border-radius:50%;background:var(--primary-tint);color:var(--primary);display:grid;place-items:center}
.ptile h3{margin:14px 0 5px;font-size:17px;letter-spacing:-.01em;font-weight:600}
.ptile p{margin:0;color:var(--muted-2);font-size:12.5px}
.ptile ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.ptile li{font-size:11px;color:var(--foreground);background:var(--muted);border-radius:var(--r-pill);padding:4px 10px}
.ptile-ai{margin-top:13px;width:100%;border:1px dashed var(--primary);background:var(--primary-tint);color:var(--primary);border-radius:var(--r-pill);padding:7px 13px;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.12s var(--ease)}
.ptile-ai:hover{background:var(--primary);color:var(--primary-fg)}
.picker.three{grid-template-columns:repeat(3,1fr);max-width:1000px}
@media(max-width:860px){.picker.three{grid-template-columns:1fr}}
@media(max-width:640px){.picker{grid-template-columns:1fr}}
.presetrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.preset{border:.5px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:6px 13px;font-size:12px;font-weight:500;color:var(--foreground);cursor:pointer;box-shadow:var(--shadow-sm)}
.preset:hover{border-color:var(--primary);background:var(--primary-tint)}

/* ---------------- editor ---------------- */
.editor{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
@media(max-width:900px){.editor{grid-template-columns:1fr}.aside{position:static!important}}
.aside{position:sticky;top:72px;display:flex;flex-direction:column;gap:12px}
.panel-card{background:var(--card);border:.5px solid var(--line);border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow-sm)}
.panel-card h4{margin:0 0 12px;font-size:11px;letter-spacing:.03em;color:var(--muted-2);font-weight:600;text-transform:uppercase}
.strength{text-align:center}
.bigring{--p:0;width:114px;height:114px;border-radius:50%;margin:4px auto 10px;display:grid;place-items:center;background:conic-gradient(var(--primary) calc(var(--p)*1%), var(--line) 0);transition:--p .9s var(--ease)}
.bigring i{width:92px;height:92px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-style:normal}
.bigring .pct{font-size:28px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.checklist{list-style:none;margin:6px 0 0;padding:0;font-size:12.5px}
.checklist li{display:flex;align-items:center;gap:8px;padding:5px 0;color:var(--muted-2)}
.checklist li.done{color:var(--foreground)}
.checklist li .dot{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line);flex:0 0 auto;display:grid;place-items:center;font-size:9px}
.checklist li.done .dot{background:var(--primary);border-color:var(--primary);color:var(--primary-fg)}

.group{background:var(--card);border:.5px solid var(--line);border-radius:var(--r-md);padding:4px 18px 16px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.group > h2{font-size:11px;letter-spacing:.03em;color:var(--muted-2);margin:16px 0 3px;font-weight:600;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.group > h2 .cnt{margin-left:auto;font-size:10.5px;color:var(--muted-2);letter-spacing:0;font-weight:500;text-transform:none}
.field{padding:13px 0;border-top:.5px solid var(--line-2)}
.group h2 + .field{border-top:none}
.flabel{display:flex;align-items:baseline;gap:8px;justify-content:space-between;margin-bottom:6px}
.flabel .l{font-weight:500;font-size:13px}
.req{color:var(--danger);font-weight:600}
.opt{color:var(--muted-2);font-weight:500;font-size:11px}
.help{color:var(--muted-2);font-size:12px;margin:1px 0 8px}
input[type=text],input[type=email],input[type=url],input[type=date],textarea,select{
  width:100%;font:inherit;font-size:13px;color:var(--foreground);background:var(--surface);border:.5px solid var(--line);
  border-radius:var(--r-sm);padding:7px 11px;outline:none;transition:.12s var(--ease)}
textarea{min-height:80px;resize:vertical;line-height:1.5}
input:focus,textarea:focus,select:focus{border-color:var(--ring);box-shadow:0 0 0 3px var(--primary-tint)}
.field.invalid input,.field.invalid textarea,.field.invalid select,.field.invalid .rolebox,.field.invalid .svgdrop,.field.invalid .checks{border-color:var(--danger)!important;box-shadow:0 0 0 3px var(--danger-tint)}
.err{color:var(--danger);font-size:12px;margin-top:6px;display:none}
.field.invalid .err{display:block}
.counter{font-size:11px;color:var(--muted-2);margin-left:auto}
.counter.bad{color:var(--danger)}

.checks{display:flex;flex-wrap:wrap;gap:6px}
.chk{display:inline-flex;align-items:center;gap:5px;border:.5px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:6px 12px;font-size:12.5px;cursor:pointer;user-select:none;transition:.12s var(--ease)}
.chk:hover{border-color:var(--muted-2)}
.chk input{display:none}
.chk .tk{display:none;color:var(--primary);margin:-2px -3px -2px -2px}
.chk.on .tk{display:inline-flex}
.chk.on{border-color:var(--primary);background:var(--primary-tint);color:var(--primary);font-weight:500}

/* custom dropdown (replaces native select) — vibrancy popover */
.dropdown{position:relative}
.dd-btn{width:100%;font:inherit;font-size:13px;color:var(--foreground);background:var(--surface);border:.5px solid var(--line);border-radius:var(--r-sm);padding:7px 11px;text-align:left;cursor:pointer;display:flex;align-items:center;gap:8px;transition:.12s var(--ease)}
.dd-btn:hover{border-color:var(--muted-2)}
.dd-btn.open{border-color:var(--ring);box-shadow:0 0 0 3px var(--primary-tint)}
.dd-btn .lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-btn.ph .lbl{color:var(--muted-2)}
.dd-btn .chev{color:var(--muted-2);display:inline-flex;transition:transform .2s var(--ease)}
.dd-btn.open .chev{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:40;background:var(--vibrancy);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:.5px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);padding:5px;max-height:280px;overflow:auto;animation:ddIn .14s var(--ease)}
@keyframes ddIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dd-opt{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:4px;font-size:13px;cursor:pointer;color:var(--foreground)}
.dd-opt:hover{background:var(--muted)}
.dd-opt.sel{color:var(--primary);font-weight:500}
.dd-opt .tk{margin-left:auto;color:var(--primary);opacity:0;display:inline-flex}
.dd-opt.sel .tk{opacity:1}

/* reference link rows */
.linklist{display:flex;flex-direction:column;gap:6px}
.linkrow{display:flex;gap:6px;align-items:center}
.linkrow input{flex:1}
.addlink{border:1px dashed var(--line);background:none;border-radius:var(--r-sm);padding:9px;width:100%;cursor:pointer;font:inherit;font-size:12.5px;color:var(--muted-2);display:inline-flex;align-items:center;justify-content:center;gap:6px}
.addlink:hover{border-color:var(--primary);color:var(--foreground)}

/* extracted logo colours */
.swatches{margin-top:13px;padding-top:13px;border-top:.5px solid var(--line-2)}
.swatches .sw-lbl{font-size:11.5px;color:var(--muted-2);margin-bottom:7px}
.sw-row{display:flex;flex-wrap:wrap;gap:7px}
.swatch{width:30px;height:30px;border-radius:var(--r-sm);border:.5px solid var(--line);cursor:pointer;transition:.12s var(--ease);position:relative}
.swatch:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.swatch.set{box-shadow:0 0 0 2px var(--primary)}

.svgdrop{border:1px dashed var(--line);border-radius:var(--r-sm);padding:16px;text-align:center;background:var(--surface);cursor:pointer;color:var(--muted-2)}
.svgdrop:hover{border-color:var(--primary);color:var(--foreground)}
.svgdrop input{display:none}
.svgprev{display:none;align-items:center;gap:13px;text-align:left}
.svgprev.show{display:flex}
.svgprev .box{width:58px;height:58px;border:.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface);display:grid;place-items:center;padding:8px;flex:0 0 auto;overflow:hidden}
.svgprev .box svg,.svgprev .box img{max-width:100%;max-height:100%}
.svgprev .meta{font-size:12.5px}
.svgprev .meta b{display:block}
.linkbtn{background:none;border:none;color:var(--danger);font:inherit;font-size:12px;cursor:pointer;padding:0;text-decoration:underline}

.rolebox{border:.5px solid var(--line);border-radius:var(--r-sm);padding:5px;background:var(--surface)}
.role{background:var(--card);border:.5px solid var(--line);border-radius:var(--r-sm);padding:12px;margin:5px}
.role .rhead{display:flex;gap:9px;align-items:center}
.role .rhead input{flex:1}
.role .perms{margin-top:10px}
.role .plabel{font-size:11.5px;color:var(--muted-2);margin-bottom:6px}
.delrole{border:.5px solid var(--line);background:var(--card);border-radius:var(--r-sm);width:32px;height:36px;cursor:pointer;font-size:15px;color:var(--muted-2);flex:0 0 auto}
.delrole:hover{border-color:var(--danger);color:var(--danger)}
.addrole{margin:7px 5px 3px;border:1px dashed var(--line);background:none;border-radius:var(--r-sm);padding:9px;width:calc(100% - 10px);cursor:pointer;font:inherit;font-size:12.5px;color:var(--muted-2)}
.addrole:hover{border-color:var(--primary);color:var(--foreground)}
.custadd{margin-top:9px}

/* feature catalog — click-to-cycle MVP / Later chips */
.featbox{display:flex;flex-direction:column;gap:14px}
.feat-gl{font-size:11px;color:var(--muted-2);font-weight:600;letter-spacing:.03em;margin-bottom:7px;text-transform:uppercase}
.fchip{display:inline-flex;align-items:center;gap:5px;border:.5px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:6px 12px;font-size:12.5px;cursor:pointer;color:var(--foreground);transition:.12s var(--ease);font-family:inherit}
.fchip:hover{border-color:var(--muted-2)}
.fchip .tk{display:inline-flex;color:var(--primary);margin:-2px -2px -2px -3px}
.fchip.mvp{border-color:var(--primary);background:var(--primary);color:var(--primary-fg);font-weight:500}
.fchip.mvp .tk{color:var(--primary-fg)}
.fchip.later{border-color:var(--primary);background:var(--primary-tint);color:var(--primary);font-weight:500}
.fchip.later .tk{color:var(--primary)}
.ftag{font-size:9px;text-transform:uppercase;letter-spacing:.05em;opacity:.85;margin-left:1px}
.feat-sum{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-top:.5px solid var(--line-2);padding-top:11px}
.feat-hint{font-size:11.5px;color:var(--muted-2)}
.feat-count{font-size:11.5px;color:var(--primary);font-weight:600;white-space:nowrap}

/* workflow / journey builder */
.stepwrap{display:flex;flex-direction:column;gap:7px}
.steprow{display:flex;align-items:center;gap:7px}
.steprow input{flex:1}
.stepnum{width:20px;height:20px;flex:0 0 auto;border-radius:50%;background:var(--primary-tint);color:var(--primary);font-size:10px;font-weight:700;display:grid;place-items:center}
.delstep{border:.5px solid var(--line);background:var(--card);border-radius:var(--r-sm);width:32px;height:34px;cursor:pointer;color:var(--muted-2);flex:0 0 auto;display:grid;place-items:center}
.delstep:hover{border-color:var(--danger);color:var(--danger)}
.addstep{margin-top:8px;border:1px dashed var(--line);background:none;border-radius:var(--r-sm);padding:8px 11px;cursor:pointer;font:inherit;font-size:12px;color:var(--muted-2);display:inline-flex;align-items:center;gap:6px}
.addstep:hover{border-color:var(--primary);color:var(--foreground)}

/* per-field coaching (examples + good/weak) */
.fex{display:flex;flex-wrap:wrap;gap:5px 9px;align-items:center;margin:0 0 8px;font-size:11.5px}
.fex-ex{color:var(--muted-2);font-style:italic}
.fex-g,.fex-w{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-pill);font-weight:500;font-size:11px}
.fex-g{background:var(--primary-tint);color:var(--primary)}
.fex-w{background:var(--danger-tint);color:var(--danger)}

/* industry starter-pack bar */
.packbar{display:flex;align-items:center;gap:12px;background:var(--primary-tint);border:.5px solid color-mix(in srgb,var(--primary) 30%,var(--surface));border-radius:var(--r-md);padding:13px 15px;margin-bottom:14px;color:var(--primary)}
.packbar .pk-t{flex:1;font-size:12.5px;line-height:1.45;color:var(--foreground)}
.packbar .pk-t b{color:var(--primary)}

/* prompt format toggle (MD / XML) — segmented control */
.pfmt{display:inline-flex;gap:2px;background:var(--muted);border:.5px solid var(--line);border-radius:var(--r-sm);padding:2px}
.pfmt button{border:none;background:none;padding:5px 10px;border-radius:4px;font:inherit;font-size:11.5px;font-weight:500;color:var(--muted-2);cursor:pointer;transition:.12s var(--ease)}
.pfmt button.on{background:var(--card);color:var(--foreground);box-shadow:var(--shadow-sm)}

/* readiness review */
.ready-top{display:flex;align-items:baseline;gap:8px;margin-bottom:9px}
.ready-pct{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--muted-2);font-variant-numeric:tabular-nums}
.ready-pct.ok{color:var(--primary)}
.ready-lbl{font-size:12px;color:var(--muted-2)}
.readylist{list-style:none;margin:0;padding:0;font-size:12.5px}
.readylist li{display:flex;align-items:flex-start;gap:8px;padding:5px 0;color:var(--muted-2)}
.readylist li.ok{color:var(--foreground)}
.readylist li .rdot{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line);flex:0 0 auto;display:grid;place-items:center;font-size:9px;margin-top:1px}
.readylist li.ok .rdot{background:var(--primary);border-color:var(--primary);color:var(--primary-fg)}
.readylist li em{font-style:normal;color:var(--muted-2);font-size:11px}

/* scope estimate */
.scope-row{margin-bottom:9px}
.scope-size{display:inline-block;font-size:11px;font-weight:600;padding:4px 11px;border-radius:var(--r-pill);background:var(--muted);color:var(--foreground)}
.scope-size.s-medium{background:var(--primary-tint);color:var(--primary)}
.scope-size.s-large{background:var(--primary);color:var(--primary-fg)}

/* version history */
.histrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:.5px solid var(--line-2)}
.histrow:first-child{border-top:none}

/* review & approval */
.rev-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);margin-bottom:8px}
.rev-badge.sub{background:var(--primary-tint);color:var(--primary)}
.rev-badge.ok{background:var(--primary);color:var(--primary-fg)}
.rev-badge.chg{background:var(--danger-tint);color:var(--danger)}
.rev-note{font-size:12px;color:var(--muted-2);margin:0 0 4px;line-height:1.5}
.rev-actor{margin:2px 0 0}
.cmt-lbl{font-size:10.5px;letter-spacing:.03em;color:var(--muted-2);font-weight:600;margin:13px 0 7px;text-transform:uppercase}
.cmt-list{display:flex;flex-direction:column;gap:7px;margin-bottom:9px}
.cmt{background:var(--muted);border-radius:var(--r-sm);padding:8px 10px;font-size:12.5px;line-height:1.5}
.cmt-h{display:flex;justify-content:space-between;gap:8px;margin-bottom:3px}
.cmt-h b{font-size:12px}
.cmt-h span{font-size:10.5px;color:var(--muted-2)}
.cmt-add{display:flex;flex-direction:column;gap:7px}
.cmt-add textarea{min-height:50px}
.pill.rev-sub{background:var(--primary-tint);color:var(--primary)}
.pill.rev-chg{background:var(--danger-tint);color:var(--danger)}
.pill.rev-ok{background:var(--primary);color:var(--primary-fg)}

.color-row{display:flex;align-items:center;gap:9px}
input[type=color]{width:42px;height:36px;border:.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding:3px;cursor:pointer}
.color-row input[type=text]{max-width:140px;text-transform:uppercase}

.editor-head{display:flex;align-items:center;gap:13px;margin-bottom:18px;flex-wrap:wrap}
.editor-head .badge-ico{width:44px;height:44px;border-radius:var(--r-md);border:.5px solid var(--line);background:var(--primary-tint);color:var(--primary);display:grid;place-items:center;flex:0 0 auto}
.editor-head .ttl{flex:1;min-width:200px}
.editor-head .ttl h1{margin:0;font-size:20px;letter-spacing:-.01em;font-weight:600}
.editor-head .ttl span{color:var(--muted-2);font-size:12px}
.savebar{position:sticky;bottom:14px;margin-top:6px;z-index:20}
.savebar .in{background:var(--vibrancy);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:.5px solid var(--line);border-radius:var(--r-xl);padding:11px 14px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:12px}
.savebar .msg{flex:1;font-size:12px;color:var(--muted-2)}
.savebar .msg.bad{color:var(--danger)}
.savebar .msg.good{color:var(--ok)}

/* ---------------- project view ---------------- */
.view-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.view-head .avatar{width:56px;height:56px;border-radius:var(--r-md);border:.5px solid var(--line);background:var(--muted);display:grid;place-items:center;padding:10px;flex:0 0 auto;overflow:hidden}
.view-head .avatar svg,.view-head .avatar img{max-width:100%;max-height:100%}
.view-head .avatar .ph{color:var(--muted-2)}
.view-head h1{margin:0;font-size:22px;letter-spacing:-.01em;font-weight:600}
.view-head .sub{color:var(--muted-2);font-size:12.5px;margin-top:3px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.view-head .sub a{color:var(--info)}
.view-grid{display:grid;grid-template-columns:1fr 310px;gap:18px;align-items:start}
@media(max-width:920px){.view-grid{grid-template-columns:1fr}}
.doc{background:var(--card);border:.5px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.doc .tabs{display:flex;gap:3px;padding:10px 12px;border-bottom:.5px solid var(--line);flex-wrap:wrap;align-items:center}
.doc .tab{border:none;background:none;padding:7px 12px;border-radius:var(--r-sm);font-size:12.5px;font-weight:500;color:var(--muted-2);cursor:pointer}
.doc .tab.on{background:var(--foreground);color:var(--background)}
.doc .tab .spacer{flex:1}
.doc .body{padding:20px 24px;max-height:72vh;overflow:auto}
.md h1{font-size:20px;letter-spacing:-.01em;margin:0 0 13px;font-weight:600}
.md h2{font-size:11px;letter-spacing:.03em;color:var(--muted-2);margin:24px 0 9px;border-top:.5px solid var(--line-2);padding-top:16px;font-weight:600;text-transform:uppercase}
.md h2:first-child{border-top:none;margin-top:0;padding-top:0}
.md h3{font-size:15px;margin:18px 0 7px;font-weight:600}
.md p{margin:0 0 11px}
.md ul,.md ol{margin:0 0 12px;padding-left:20px}
.md li{margin:4px 0}
.md blockquote{margin:0 0 13px;padding:10px 14px;background:var(--muted);border-radius:var(--r-sm);color:var(--muted-2);font-size:12.5px}
.md code{font-family:var(--mono);font-size:12px;background:var(--muted);padding:2px 6px;border-radius:4px}
.md pre{background:#1C1C1E;color:#F5F5F7;padding:16px;border-radius:var(--r-sm);overflow:auto;font-size:11.5px}
.md pre code{background:none;padding:0;color:inherit}
.md table{border-collapse:collapse;width:100%;font-size:12.5px;margin:0 0 13px}
.md th,.md td{border:.5px solid var(--line);padding:8px 11px;text-align:left}
.md th{background:var(--muted)}
.md strong{font-weight:600}
.rawout{font-family:var(--mono);font-size:12px;white-space:pre-wrap;word-break:break-word;line-height:1.6;margin:0}

.side-card{background:var(--card);border:.5px solid var(--line);border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow-sm);margin-bottom:12px}
.side-card h4{margin:0 0 12px;font-size:11px;letter-spacing:.03em;color:var(--muted-2);font-weight:600;text-transform:uppercase}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:12.5px;border-top:.5px solid var(--line-2)}
.kv:first-of-type{border-top:none}
.kv .k{color:var(--muted-2)}
.kv .v{font-weight:500;text-align:right}
.statusrow{display:flex;gap:5px;flex-wrap:wrap}
.statusrow button{flex:1;border:.5px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:8px 6px;font-size:11.5px;font-weight:500;color:var(--muted-2);cursor:pointer;min-width:60px}
.statusrow button.on{border-color:var(--primary);color:var(--foreground);background:var(--primary-tint)}
.gemwrap{display:flex;flex-direction:column;gap:7px}
.gemwrap .row{display:flex;gap:7px}
.gemwrap input{flex:1;font:inherit;font-size:12.5px;padding:8px 10px;border:.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--foreground)}
.cmd{background:var(--muted);border:.5px solid var(--line);border-radius:4px;padding:7px 9px;font-family:var(--mono);font-size:10.5px;color:var(--foreground);cursor:pointer;word-break:break-all;transition:.12s var(--ease)}
.cmd:hover{border-color:var(--primary);color:var(--primary)}

/* guided-interview toggle on intake link creation */
.ilint-row{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border:.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer;font-size:12px;line-height:1.55;color:var(--muted-2)}
.ilint-row input{margin-top:3px;flex:0 0 auto}
.ilint-row b{color:var(--foreground)}

/* ---------------- live prompt preview ---------------- */
.promptcard{background:var(--card);border:.5px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-sm);margin-top:18px;overflow:hidden}
.promptcard .ph{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:.5px solid var(--line);flex-wrap:wrap}
.promptcard .ph .t{font-weight:600;font-size:13.5px}
.promptcard .ph .t small{display:block;color:var(--muted-2);font-weight:500;font-size:11px;margin-top:1px}
.promptcard .ph .sp{flex:1}
.promptcard .pbody{max-height:440px;overflow:auto;padding:18px 20px;background:var(--surface)}
.promptcard pre{margin:0;white-space:pre-wrap;word-break:break-word;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--foreground)}
.promptcard .mask{color:var(--muted-2);background:var(--muted);border-radius:4px;padding:0 4px}

/* ---------------- misc ---------------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);background:color-mix(in srgb,var(--foreground) 92%,transparent);color:var(--background);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);padding:10px 20px;border-radius:var(--r-pill);font-size:12.5px;font-weight:500;opacity:0;transition:.22s var(--ease);pointer-events:none;z-index:80;box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:color-mix(in srgb,var(--danger) 92%,transparent);color:#fff}
.spin{display:inline-block;width:12px;height:12px;border:2px solid color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
.hide{display:none!important}
/* modal scrim: solid dark overlay, deliberately NOT blurred (blur is for floating panels, not backdrops) */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);display:grid;place-items:center;z-index:70;padding:20px}
.dark .modal-bg{background:rgba(0,0,0,.6)}
.modal{background:var(--card);border-radius:var(--r-xl);padding:22px;max-width:420px;width:100%;box-shadow:var(--shadow-lg);border:.5px solid var(--line)}
.modal h3{margin:0 0 7px;font-size:16px;font-weight:600}
.modal p{margin:0 0 16px;color:var(--muted-2);font-size:13px}
.modal .actions{display:flex;gap:8px;justify-content:flex-end}
.crumb{color:var(--muted-2);font-size:12px;margin-bottom:14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.crumb:hover{color:var(--foreground)}

/* ---------------- print / PDF ---------------- */
#print-root{display:none}
#print-root .phead{display:flex;align-items:center;gap:16px;border-bottom:2px solid #111;padding-bottom:14px;margin-bottom:20px}
#print-root .plogo{width:56px;height:56px;flex:0 0 auto}
#print-root .plogo svg{max-width:100%;max-height:100%}
#print-root .phead h1{margin:0;font-size:22px}
#print-root .psub{color:#555;font-size:13px;margin-top:2px}
#print-root .pfoot{margin-top:26px;padding-top:12px;border-top:1px solid #ccc;color:#888;font-size:11px}
@media print{
  .nav,#app,#modal-root,.toast{display:none !important}
  #print-root{display:block !important;color:#111}
  #print-root .md pre{background:#f2f2ee;color:#111;border:1px solid #ddd}
  #print-root .md h2{color:#333}
  @page{margin:16mm}
}