/* VishGen — "Nova" design language (ported from the visdom repo):
   dark blue-tinted canvas, layered glass surfaces, hairline borders,
   iris/flare accents, quiet ambient light. Class names match app.js. */
:root{
  color-scheme:dark;
  --bg:#070a13;
  --surface:rgba(255,255,255,0.04);
  --surface-2:rgba(255,255,255,0.065);
  --bg2:rgba(255,255,255,0.03);
  --line-1:rgba(255,255,255,0.07);
  --line-2:rgba(255,255,255,0.12);
  --line-3:rgba(255,255,255,0.20);
  --line:rgba(255,255,255,0.10);
  --border:var(--line-1);
  --text:#e9edfd;
  --text-2:#9aa4cf;
  --muted:#7c86b2;
  --accent:#a97dfb;
  --accent-2:#f43f8e;
  --good:#4ceeb0;
  --warn:#ffc24d;
  --bad:#fb6bb0;
  --ring:rgba(169,125,251,0.55);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font:'Manrope','Catamaran',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Manrope','Catamaran',ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
html{scroll-padding-top:88px}
body{background:var(--bg);color:var(--text);font:14px/1.5 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-0.006em}
a{color:var(--accent);text-decoration:none;transition:color .15s}a:hover{color:#c9a8ff}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{letter-spacing:-0.02em;font-family:var(--display)}
::selection{background:rgba(139,85,247,0.34);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:8px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.18);background-clip:padding-box}

/* ambient canvas */
.aurora{position:fixed;inset:-10%;z-index:-2;pointer-events:none;background:radial-gradient(40% 34% at 16% -6%,rgba(139,85,247,0.16),transparent 62%),radial-gradient(36% 30% at 84% 2%,rgba(14,199,232,0.10),transparent 64%),radial-gradient(52% 40% at 50% 108%,rgba(244,63,142,0.08),transparent 68%);filter:saturate(1.05)}
.mesh{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5;background-image:linear-gradient(to right,rgba(255,255,255,0.028) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,0.028) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(120% 78% at 50% -8%,#000 0%,transparent 72%);mask-image:radial-gradient(120% 78% at 50% -8%,#000 0%,transparent 72%)}
.noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* header */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;padding:14px 24px;background:rgba(9,12,20,0.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line-1)}
.top .brand{font-family:var(--display);font-weight:700;font-size:17px;background:linear-gradient(120deg,#e9edfd,#a97dfb 60%,#f43f8e);-webkit-background-clip:text;background-clip:text;color:transparent}
.top .brand small{-webkit-text-fill-color:var(--muted);color:var(--muted);font-weight:500;font-size:11px;margin-left:8px;font-family:var(--font)}
.top .sp{flex:1}
.top>a{color:var(--text-2);font-weight:600;font-size:13px;padding:6px 10px;border-radius:9px;transition:all .15s}.top>a:hover{color:#fff;background:var(--surface-2)}
.main{padding:26px 24px 56px;max-width:1300px;margin:0 auto;animation:rise .5s cubic-bezier(0.16,1,0.3,1) both}

/* cards / panels */
.card{background:var(--surface);border:1px solid var(--line-1);border-radius:16px;padding:18px 20px;margin-bottom:16px;min-width:0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),inset 0 36px 52px -52px rgba(255,255,255,0.22),0 1px 2px rgba(2,4,12,0.5),0 24px 48px -32px rgba(2,4,12,0.9)}
.card h2{font-family:var(--display);font-size:15px;font-weight:600;margin:0 0 12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.card h3{font-size:13px;font-weight:600;margin:0 0 8px;color:var(--text)}
.card h2 .hint,.hint{color:var(--muted);font-weight:400;font-size:12px;font-family:var(--font);letter-spacing:0}
.page-head h1{font-family:var(--display);font-size:22px;margin:0 0 2px}.page-head .sub{color:var(--muted);font-size:13px}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}@media(max-width:1000px){.grid{grid-template-columns:1fr}}
.tbl-wrap{overflow-x:auto}

/* tables */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line-1);vertical-align:top}
th{color:var(--text-2);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.link{cursor:pointer;transition:background .15s}tr.link:hover td{background:var(--surface-2)}
tr.chgrow td{background:rgba(139,85,247,0.06)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line-2);background-image:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.035));color:var(--text);border-radius:11px;padding:8px 14px;font-weight:600;cursor:pointer;letter-spacing:-0.01em;transition:all .15s cubic-bezier(0.16,1,0.3,1);box-shadow:inset 0 1px 0 rgba(255,255,255,0.07)}
.btn:hover{border-color:var(--line-3);background-image:linear-gradient(180deg,rgba(255,255,255,0.13),rgba(255,255,255,0.06))}
.btn:active{transform:scale(0.97)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.release{color:#fff;border-color:transparent;background-image:linear-gradient(180deg,rgba(255,255,255,0.18),rgba(255,255,255,0) 46%),linear-gradient(135deg,#0f9f6e 0%,#14b8a6 55%,#0ea5c6 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.24),inset 0 0 0 1px rgba(255,255,255,0.08),0 8px 22px -10px rgba(20,184,166,0.7),0 1px 2px rgba(2,4,12,0.6)}
.btn.release:hover:not(:disabled){filter:brightness(1.08)}
.btn.primary{color:#fff;border-color:transparent;background-image:linear-gradient(180deg,rgba(255,255,255,0.18),rgba(255,255,255,0) 46%),linear-gradient(135deg,#7c4df0 0%,#9d5bf5 46%,#e14a99 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.24),inset 0 0 0 1px rgba(255,255,255,0.08),0 8px 22px -10px rgba(124,77,240,0.7),0 1px 2px rgba(2,4,12,0.6)}
.btn.primary:hover{filter:brightness(1.07) saturate(1.03);transform:translateY(-1px)}
.btn.primary:disabled{filter:none;transform:none}
.btn.sm{padding:5px 11px;font-size:12px;border-radius:9px}
.btn.danger{border-color:rgba(244,63,94,0.32);background-image:linear-gradient(180deg,rgba(244,63,94,0.18),rgba(244,63,94,0.08));color:#fda4af}
.btn.danger:hover{border-color:rgba(244,63,94,0.5);background-image:linear-gradient(180deg,rgba(244,63,94,0.28),rgba(244,63,94,0.14));color:#ffe4e6}

/* inputs */
.in,input.in,select.in,textarea.in{width:100%;border:1px solid var(--line-1);background:rgba(255,255,255,0.04);color:#fff;border-radius:11px;padding:9px 12px;min-width:0;outline:none;transition:border-color .15s,background-color .15s,box-shadow .15s;box-shadow:inset 0 1px 0 rgba(255,255,255,0.04)}
.in::placeholder{color:var(--muted)}
.in:hover:not(:focus){border-color:var(--line-2)}
.in:focus{border-color:rgba(169,125,251,0.45);background:rgba(255,255,255,0.06);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 0 0 3.5px rgba(139,85,247,0.14)}
select.in option{background:#0c101d;color:var(--text)}
select.in optgroup{background:#0c101d;color:var(--muted)}
label.f{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--text-2);font-weight:500}

/* badges / chips */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;border:1px solid var(--line-2);background:var(--surface-2);color:var(--text-2);white-space:nowrap}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted);box-shadow:0 0 8px currentColor}
.badge.running::before{background:var(--accent);color:var(--accent)}
.badge.succeeded::before,.badge.done::before,.badge.live::before{background:var(--good);color:var(--good)}
.badge.failed::before{background:var(--bad);color:var(--bad)}
.badge.asleep::before{background:var(--muted);color:var(--muted)}
.pv-pulse{animation:pvpulse 1.6s ease-in-out infinite}
@keyframes pvpulse{0%,100%{opacity:1}50%{opacity:.45}}
.badge.review::before,.badge.queued::before,.badge.cancelled::before,.badge.interrupted::before,.badge.deploying::before,.badge.awaiting_input::before,.badge.awaiting_approval::before,.badge.pending::before{background:var(--warn);color:var(--warn)}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.tile{background:var(--surface);border:1px solid var(--line-1);border-radius:14px;padding:12px 14px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06)}
.tile .l{color:var(--text-2);font-size:11px;text-transform:uppercase;letter-spacing:0.05em}
.tile .v{font-family:var(--display);font-size:22px;font-weight:650;margin-top:4px}
.tile .v.cr-ok{color:var(--good)}.tile .v.cr-low{color:var(--bad)}

/* log */
.log{font-family:var(--mono);font-size:12px;max-height:70vh;overflow:auto;background:var(--bg2);border:1px solid var(--line-1);border-radius:12px;padding:10px}
.ev{padding:2px 6px;border-left:3px solid transparent;white-space:pre-wrap;word-break:break-word}
.ev .t{color:var(--muted);margin-right:8px}.ev .a{color:var(--accent);font-weight:600;margin-right:8px}
.ev.warn{border-color:var(--warn)}.ev.error{border-color:var(--bad)}.ev.stage{font-weight:700;border-color:var(--good);margin-top:6px;color:#fff}
.ev details{display:inline}.ev summary{cursor:pointer;color:var(--text-2)}.ev pre{margin:4px 0 0 12px;color:var(--text-2);white-space:pre-wrap;max-height:240px;overflow:auto}

/* tabs (segmented) */
.tabs{display:inline-flex;gap:2px;border:1px solid var(--line-1);border-radius:12px;padding:4px;margin-bottom:12px;background:rgba(255,255,255,0.035)}
.tabs button{border:0;background:transparent;color:var(--text-2);padding:6px 14px;cursor:pointer;border-radius:8px;font-weight:600;font-size:13px;transition:all .15s}
.tabs button:hover{color:#fff;background:rgba(255,255,255,0.06)}
.tabs button.on{color:#fff;background-image:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.02)),linear-gradient(135deg,rgba(139,85,247,0.4),rgba(244,63,142,0.28));box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),0 4px 12px -6px rgba(139,85,247,0.6)}

.doc{white-space:pre-wrap;font-family:var(--mono);font-size:12px;max-height:70vh;overflow:auto;background:var(--bg2);border:1px solid var(--line-1);border-radius:12px;padding:12px}

/* utilities */
.muted{color:var(--muted)}.small{font-size:12px}.err{color:var(--bad)}.ok{color:var(--good)}.mono{font-family:var(--mono);font-size:12px}
.empty{color:var(--muted);padding:28px;text-align:center;border:1px dashed var(--line-2);border-radius:12px}
.stepper{background:var(--bg2)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}.login .card{width:360px}

/* conversation */
.chat{display:flex;flex-direction:column;gap:10px;max-height:50vh;overflow:auto;padding:4px}
.msg{border:1px solid var(--line-1);border-radius:12px;padding:9px 13px;max-width:85%;background:var(--surface)}
.msg.analyst{background:var(--surface-2)}
.msg.user{align-self:flex-end;border-color:rgba(169,125,251,0.4)}
.msg.system{align-self:center;color:var(--muted);font-size:12px}
.msg .who{font-size:11px;color:var(--text-2);margin-bottom:4px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em}
.msg .body{white-space:pre-wrap}

/* modal */
@keyframes mfade{from{opacity:0}to{opacity:1}}
@keyframes mpop{from{opacity:0;transform:scale(0.96) translateY(10px)}to{opacity:1;transform:none}}
.modal-bg{position:fixed;inset:0;z-index:100;background:rgba(4,6,12,0.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:start center;overflow:auto;padding:48px 16px;animation:mfade .2s ease-out}
.modal{width:min(960px,96vw);margin:0;animation:mpop .28s cubic-bezier(0.16,1,0.3,1);box-shadow:0 1px 2px rgba(2,4,12,0.6),0 40px 90px -30px rgba(2,4,12,0.95)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.modal-head h2{font-family:var(--display);font-size:18px}

/* create-project wizard */
.wizard{max-width:780px;margin:0 auto}
.wiz-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.wiz-head h1{font-family:var(--display);font-size:26px;margin:0}
.wiz-progress{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.wiz-pill{display:flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;border:1px solid var(--line-1);background:var(--surface);font-size:12px;color:var(--text-2);font-weight:600;transition:all .2s}
.wiz-pill .n{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--surface-2);font-size:11px}
.wiz-pill.done{color:var(--good);cursor:pointer}
.wiz-pill.on{color:#fff;border-color:transparent;background-image:linear-gradient(135deg,rgba(139,85,247,0.5),rgba(244,63,142,0.35));box-shadow:0 4px 14px -6px rgba(139,85,247,0.6)}
.wiz-pill.on .n{background:rgba(255,255,255,0.28)}
.wiz-step{animation:rise .4s cubic-bezier(0.16,1,0.3,1) both;min-height:170px}
.wiz-foot{display:flex;align-items:center;gap:12px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line-1)}
.wiz-foot .sp{flex:1}
.q-block .q-num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background-image:linear-gradient(135deg,#7c4df0,#e14a99);color:#fff;font-weight:700;font-size:13px;margin-bottom:12px;box-shadow:0 6px 16px -8px rgba(124,77,240,0.8)}
.q-block .q-title{font-family:var(--display);font-size:20px;font-weight:600;margin-bottom:5px}
.q-block .q-help{color:var(--muted);font-size:13px;margin-bottom:16px;max-width:60ch}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:640px){.choice-grid{grid-template-columns:1fr}}
.choice{display:flex;flex-direction:column;gap:12px;align-items:flex-start;text-align:left;padding:24px;border-radius:16px;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;transition:all .25s cubic-bezier(0.16,1,0.3,1);color:var(--text)}
.choice:hover{transform:translateY(-3px);border-color:var(--line-3);box-shadow:0 22px 44px -26px rgba(2,4,12,0.95),0 0 0 1px rgba(139,85,247,0.14)}
.choice .ch-ic{font-size:24px;width:54px;height:54px;display:grid;place-items:center;border-radius:14px;background-image:linear-gradient(135deg,rgba(139,85,247,0.22),rgba(244,63,142,0.16));border:1px solid var(--line-2)}
.choice .ch-t{font-family:var(--display);font-size:16px;font-weight:600}
.choice .ch-d{margin-top:2px;line-height:1.4}
.switch{position:relative;display:inline-flex;align-items:center;gap:11px;cursor:pointer;font-size:13px}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:44px;height:26px;flex:none;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-2);transition:all .2s;position:relative}
.switch .track::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:all .2s;box-shadow:0 1px 3px rgba(0,0,0,0.4)}
.switch input:checked+.track{background-image:linear-gradient(135deg,#7c4df0,#e14a99);border-color:transparent}
.switch input:checked+.track::after{left:20px}
.dropzone{display:flex;flex-direction:column;align-items:center;gap:6px;padding:30px;border:1.5px dashed var(--line-3);border-radius:14px;background:var(--bg2);text-align:center;cursor:pointer;transition:all .2s}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:rgba(139,85,247,0.07)}
.dropzone .dz-ic{font-size:28px}

/* project cards */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.proj-card{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line-1);border-radius:14px;background:var(--surface);cursor:pointer;transition:all .25s cubic-bezier(0.16,1,0.3,1);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05)}
.proj-card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 20px 40px -24px rgba(2,4,12,0.95),0 0 0 1px rgba(139,85,247,0.10)}
.proj-card .pc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.proj-card .pc-name{font-family:var(--display);font-weight:600;font-size:15px;line-height:1.25}
.proj-card .pc-id{color:var(--muted);font-size:11px;font-family:var(--mono);margin-top:3px}
.proj-card .pc-meta{display:flex;gap:8px 16px;flex-wrap:wrap;font-size:12px;color:var(--text-2)}
.proj-card .pc-meta b{color:var(--text);font-weight:600;font-family:var(--display);font-variant-numeric:tabular-nums}
.proj-card .pc-links{display:flex;gap:8px;align-items:center;margin-top:auto}

/* sub-levels editor — an editable list of rows, each removable */
.lvl-list{display:flex;flex-direction:column;gap:8px;max-width:520px}
.lvl-row{display:flex;align-items:center;gap:10px;padding:7px 9px;border:1px solid var(--line-1);border-radius:12px;background:var(--surface);transition:border-color .15s}
.lvl-row:focus-within{border-color:rgba(169,125,251,0.45);box-shadow:0 0 0 3.5px rgba(139,85,247,0.12)}
.lvl-row .in{border:0;background:transparent;box-shadow:none;padding:5px 2px}
.lvl-row .in:hover,.lvl-row .in:focus{border:0;background:transparent;box-shadow:none}
.lvl-idx{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:var(--surface-2);color:var(--text-2);font-size:12px;font-weight:700}
.lvl-dot{width:10px;height:10px;flex:none;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;margin:0 8px 0 4px}
.lvl-dot.lvl-0{color:#a97dfb}.lvl-dot.lvl-1{color:#38e1f8}.lvl-dot.lvl-2{color:#4ceeb0}.lvl-dot.lvl-3{color:#ffc24d}.lvl-dot.lvl-4{color:#fb6bb0}
.lvl-preview{margin:0;padding:12px 14px;border:1px solid var(--line-1);border-radius:12px;background:var(--bg2);color:var(--text-2);white-space:pre;overflow-x:auto;max-width:520px;line-height:1.7}
.lvl-empty{padding:14px;border:1px dashed var(--line-2);border-radius:12px}
.icon-btn-x{flex:none;width:28px;height:28px;border-radius:8px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;transition:all .15s}
.icon-btn-x:hover{background:rgba(244,63,94,0.16);color:#fda4af}

/* access-control matrix (roles × functionalities) */
table.mtx{min-width:520px;border-collapse:separate;border-spacing:0}
table.mtx th,table.mtx td{border-bottom:1px solid var(--line-1);padding:8px 14px}
table.mtx thead th{position:sticky;top:0;background:rgba(9,12,20,0.92);z-index:2;font-size:11px;text-transform:uppercase;letter-spacing:0.05em}
table.mtx .mtx-h{position:sticky;left:0;background:var(--bg);text-align:left;white-space:nowrap;z-index:1}
table.mtx thead th.mtx-h{z-index:3}
table.mtx tr.mtx-mod td{background:var(--surface-2)}
table.mtx tr.mtx-mod .mtx-h{background:var(--surface-2)}
table.mtx input[type=checkbox]{width:16px;height:16px;cursor:pointer}

/* multi-select role chips (toggle) */
.chip-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);font-weight:600;font-size:13px;cursor:pointer;transition:all .15s}
.chip-toggle:hover{color:#fff;border-color:var(--line-3)}
.chip-toggle.on{color:#fff;border-color:transparent;background-image:linear-gradient(135deg,rgba(139,85,247,0.45),rgba(244,63,142,0.3));box-shadow:inset 0 1px 0 rgba(255,255,255,0.14)}
.chip-toggle.on::before{content:'✓';font-size:11px}

/* settings console (ERP-style sidebar) */
.set-shell{display:grid;grid-template-columns:224px 1fr;gap:22px;align-items:start}@media(max-width:820px){.set-shell{grid-template-columns:1fr}}
.set-menu{position:sticky;top:84px;display:flex;flex-direction:column;gap:16px}
@media(max-width:820px){.set-menu{position:static}}
.set-group{display:flex;flex-direction:column;gap:2px}
.set-gtitle{font-size:10px;text-transform:uppercase;letter-spacing:0.09em;color:var(--muted);font-weight:700;padding:0 10px 5px}
.set-item{display:block;text-decoration:none;text-align:left;border:0;background:transparent;color:var(--text-2);padding:9px 12px;border-radius:10px;cursor:pointer;font-weight:600;font-size:14px;transition:all .15s}
.set-item:hover{color:#fff;background:var(--surface)}
.set-item.on{color:#fff;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.set-pane{min-width:0}

/* home: child-organization chips */
.org-chips{display:flex;flex-wrap:wrap;gap:8px}
.org-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);font-weight:600;font-size:13px;transition:all .18s cubic-bezier(0.16,1,0.3,1)}
a.org-chip{cursor:pointer}
a.org-chip:hover{transform:translateY(-2px);border-color:var(--line-3);color:#fff;box-shadow:0 12px 24px -16px rgba(2,4,12,0.95),0 0 0 1px rgba(139,85,247,0.14)}
.org-chip .oc-dot{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.oc-dot.lvl-0{color:#a97dfb}.oc-dot.lvl-1{color:#38e1f8}.oc-dot.lvl-2{color:#4ceeb0}.oc-dot.lvl-3{color:#ffc24d}.oc-dot.lvl-4{color:#fb6bb0}

/* org level chips */
.lvl-chip{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;border:1px solid var(--line-2);color:var(--text-2);background:var(--surface-2)}
.lvl-0{color:#c9a8ff;border-color:rgba(169,125,251,0.4);background:rgba(139,85,247,0.13)}
.lvl-1{color:#7df3ff;border-color:rgba(14,199,232,0.4);background:rgba(14,199,232,0.11)}
.lvl-2{color:#86f7cb;border-color:rgba(30,217,146,0.4);background:rgba(30,217,146,0.11)}
.lvl-3{color:#ffd98a;border-color:rgba(245,166,35,0.4);background:rgba(245,166,35,0.11)}
.lvl-4{color:#ffa3cf;border-color:rgba(244,63,142,0.4);background:rgba(244,63,142,0.11)}

/* org tree */
.tree{display:flex;flex-direction:column;gap:2px}
.tnode{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;transition:background .15s,box-shadow .15s}
.tnode:hover{background:var(--surface)}
.tnode.sel{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.tnode .tguide{color:var(--line-3);font-family:var(--mono);white-space:pre;user-select:none;font-size:13px}
.tnode .tname{font-weight:600}
.tnode-actions{margin-left:auto;display:flex;gap:6px;opacity:0;transition:opacity .15s}
.tnode:hover .tnode-actions,.tnode.sel .tnode-actions{opacity:1}
@media(hover:none){.tnode-actions{opacity:1}}

.convo-grid{display:grid;grid-template-columns:240px 1fr;gap:16px;align-items:start}@media(max-width:900px){.convo-grid{grid-template-columns:1fr}}
.avatar-box{position:sticky;top:80px}.avatar{width:240px;height:240px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line-1);display:block;margin:0 auto}

/* =========================================================================
   VishGen shell — layout + atoms ported from the visdom repo (SideRail,
   Header, dashboard parts, ProjectHub, LoginForm). Everything above stays
   valid; this section adds the app chrome and the screen structures.
   ========================================================================= */

/* ---- type ladder ---- */
.t-page{font-size:32px;line-height:1.05;letter-spacing:-0.03em;font-weight:700;font-family:var(--display)}
@media(min-width:640px){.t-page{font-size:40px}}@media(min-width:1280px){.t-page{font-size:46px}}
.t-metric{font-size:34px;line-height:1;letter-spacing:-0.02em;font-weight:700;font-family:var(--display)}
.t-hero{font-size:26px;line-height:1.15;letter-spacing:-0.022em;font-weight:700;font-family:var(--display)}
.t-display{font-size:22px;line-height:1.2;letter-spacing:-0.018em;font-weight:700;font-family:var(--display)}
.t-title{font-size:17px;line-height:1.35;letter-spacing:-0.012em;font-weight:650;font-family:var(--display)}
.t-body{font-size:15px;line-height:1.6;letter-spacing:-0.005em}
.t-ui{font-size:13.5px;line-height:1.45}
.t-meta{font-size:12px;line-height:1.4;letter-spacing:0.004em}
.t-micro{font-size:11px;line-height:1.35;letter-spacing:0.01em}
.caps{font-size:10px;font-weight:700;text-transform:uppercase;line-height:1.4;letter-spacing:0.14em;color:var(--text-2)}
.num{font-variant-numeric:tabular-nums;letter-spacing:-0.03em}
.b{font-weight:600}.block{display:block}.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.min0{min-width:0}.lh1{line-height:1}
.text-aurora{background-image:linear-gradient(112deg,#7df3ff 0%,#a97dfb 46%,#fb6bb0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.g-primary{background-image:linear-gradient(135deg,#7c4df0 0%,#e14a99 100%)}
.g-aurora{background-image:linear-gradient(140deg,#38e1f8 0%,#8b55f7 52%,#f43f8e 100%)}
.focus-ring:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:inherit}
.tx{transition:color .2s,background-color .2s,border-color .2s,box-shadow .2s,transform .2s,opacity .2s;transition-timing-function:cubic-bezier(0.16,1,0.3,1)}
.animate-rise{animation:rise .5s cubic-bezier(0.16,1,0.3,1) both}
@keyframes halo{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
.e-float{background-color:rgb(19 24 41/0.82);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);box-shadow:inset 0 1px 0 0 rgb(255 255 255/0.06),0 24px 60px -24px rgb(0 0 0/0.95),0 2px 8px -2px rgb(0 0 0/0.6);border:1px solid rgb(255 255 255/0.09)}
.e-1{background-color:rgb(19 24 41/0.72);box-shadow:inset 0 1px 0 0 rgb(255 255 255/0.04),0 1px 2px 0 rgb(0 0 0/0.4);border:1px solid rgb(255 255 255/0.06)}

/* ---- app shell: rail + header + body ---- */
.app-shell{display:flex;min-height:100dvh;align-items:flex-start}
.rail{position:sticky;top:12px;flex:none;width:80px;height:calc(100dvh - 24px);margin:12px 0 12px 12px;border-radius:22px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px 10px;z-index:45}
.rail-brand{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0 10px;border-radius:14px;color:var(--text)}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#fff;box-shadow:0 10px 30px -12px rgba(139,85,247,0.55),inset 0 0 0 1px rgba(255,255,255,0.2);transition:transform .3s cubic-bezier(0.16,1,0.3,1)}
.rail-brand:hover .brand-mark{transform:scale(1.05)}
.rail-nav{display:flex;flex-direction:column;gap:2px;width:100%;margin-top:4px}
.rail-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;padding:7px 0;border-radius:16px;color:var(--text-2)}
.rail-item::before{content:"";position:absolute;left:-9px;top:50%;height:0;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#38e1f8,#8b55f7);transform:translateY(-50%);transition:height .26s cubic-bezier(0.16,1,0.3,1),opacity .2s;opacity:0}
.rail-item[data-active="true"]::before{height:22px;opacity:1}
.rail-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--muted);transition:all .2s cubic-bezier(0.16,1,0.3,1)}
.rail-item:hover .rail-ic{background:rgba(255,255,255,0.07);color:var(--text);transform:translateY(-1px)}
.rail-item.on .rail-ic{background:rgba(139,85,247,0.18);color:#c9a8ff;box-shadow:inset 0 0 0 1px rgba(169,125,251,0.3)}
.rail-lbl{font-weight:600;color:var(--text-2);max-width:72px}.rail-item.on .rail-lbl{color:#c9a8ff}.rail-item:hover .rail-lbl{color:var(--text)}
.rail-foot{margin-top:auto;position:relative;width:100%;display:flex;justify-content:center}
.rail-id{display:flex;flex-direction:column;align-items:center;gap:5px;border:0;background:transparent;cursor:pointer;padding:6px 0;border-radius:14px;width:100%;color:var(--text-2)}
.rail-id:hover .rail-lbl{color:var(--text)}
.avatar-disc{display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,rgba(139,85,247,0.6),rgba(244,63,142,0.45));font-family:var(--display);font-weight:700;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2);flex:none}
.rail-menu{position:absolute;left:calc(100% + 10px);bottom:0;width:236px;padding:6px;border-radius:16px;background:rgba(12,16,29,0.96);border:1px solid var(--line-2);box-shadow:0 1px 2px rgba(2,4,12,0.6),0 28px 70px -24px rgba(2,4,12,0.95);animation:pop .2s cubic-bezier(0.16,1,0.3,1);z-index:60}
.rail-menu-id{display:flex;align-items:center;gap:10px;padding:8px 10px}
.rail-menu-sep{height:1px;background:var(--line-1);margin:4px 2px}
.rail-menu-item{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:var(--text);padding:9px 10px;border-radius:10px;cursor:pointer;text-align:left;font-weight:600;font-size:13px}
.rail-menu-item:hover{background:rgba(255,255,255,0.06)}.rail-menu-item.danger{color:#fda4af}.rail-menu-item.danger:hover{background:rgba(244,63,94,0.14)}
.app-body{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100dvh}
.app-head{position:sticky;top:0;z-index:40;height:64px;display:flex;align-items:center;gap:12px;padding:0 28px;border-bottom:1px solid var(--line-1);background:rgba(7,10,19,0.72);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.head-brand{display:none;align-items:center;gap:10px;color:var(--text);border-radius:12px}
.head-brand .brand-mark{width:34px;height:34px;border-radius:10px}
.head-crumbs{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.crumb{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:9px;color:var(--text-2);font-weight:600;font-size:12px;transition:all .15s}
.crumb:hover{background:rgba(255,255,255,0.06);color:#fff}
.crumb-sep{color:var(--line-3);user-select:none}
.head-title{font-family:var(--display);font-weight:700;color:var(--text)}
.head-actions{display:flex;align-items:center;gap:8px;flex:none}
.main{padding:26px 28px 64px;width:100%;max-width:1440px;margin:0 auto;animation:rise .5s cubic-bezier(0.16,1,0.3,1) both}
.main.wide{max-width:1800px}
.page-head{margin-bottom:18px}.page-head h1{margin:0}.page-head .sub{color:var(--muted);font-size:13px;margin-top:4px}
.top{display:none}
@media(max-width:1023px){
  .app-shell{flex-direction:column;align-items:stretch}
  .rail{position:sticky;top:0;width:auto;height:auto;margin:0;border-radius:0;flex-direction:row;padding:6px 10px;gap:2px;border-left:0;border-right:0;border-top:0}
  .rail-brand{flex-direction:row;padding:0 8px 0 0;gap:8px}.rail-brand .rail-lbl{display:none}
  .rail-nav{flex-direction:row;margin:0;width:auto;flex:1;justify-content:center}
  .rail-item{width:auto;padding:4px 10px;flex-direction:row;gap:8px}.rail-item::before{display:none}.rail-ic{width:34px;height:34px}
  .rail-foot{margin:0;width:auto}.rail-id{flex-direction:row;padding:4px 6px}.rail-id .rail-lbl{display:none}
  .rail-menu{left:auto;right:0;bottom:auto;top:calc(100% + 8px)}
  .rail{overflow-x:auto;overflow-y:visible;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}
  .rail-nav{justify-content:flex-start}
  .app-head{padding:0 16px;height:56px}.main{padding:18px 16px 48px}
  .app-body,.main,.hub-pane,.card{min-width:0;max-width:100%}
  html,body{overflow-x:hidden}
}
@media(max-width:640px){.head-crumbs .crumb span:not(.crumb-sep){display:none}}

/* ---- pills / chips ---- */
.pill{display:inline-flex;align-items:center;gap:7px;padding:3px 10px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;border:1px solid rgba(255,255,255,0.09);background:rgba(7,10,19,0.45);color:var(--text);backdrop-filter:blur(6px);white-space:nowrap}
.pill-dot{position:relative;display:inline-flex;width:6px;height:6px;border-radius:50%;background:var(--muted);flex:none}
.pill-dot.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:halo 1.6s ease-out infinite}
.pill-iris .pill-dot{background:#a97dfb}.pill-sol .pill-dot{background:#ffc24d}.pill-mint .pill-dot{background:#4ceeb0}.pill-rose .pill-dot{background:#fb7185}.pill-aqua .pill-dot{background:#38e1f8}
.gchips{gap:8px;margin-top:14px}
.gchip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.05);color:var(--text-2);font-size:12px;font-weight:500;backdrop-filter:blur(6px)}
.gchip svg{color:#c9a8ff;flex:none}
.dot-mint{display:inline-block;width:5px;height:5px;border-radius:50%;background:#4ceeb0}

/* ---- sigil / meter / plates ---- */
.sigil{display:grid;place-items:center;flex:none;font-family:var(--display);font-weight:700;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18);transition:transform .3s cubic-bezier(0.16,1,0.3,1)}
.sigil-sm{width:36px;height:36px;border-radius:10px;font-size:11px}.sigil-md{width:42px;height:42px;border-radius:12px;font-size:12.5px}.sigil-lg{width:64px;height:64px;border-radius:18px;font-size:19px}
.sigil.sigil-logo{background:#fff;font-size:0;overflow:hidden}.sigil-logo img{width:100%;height:100%;object-fit:contain;padding:10%;box-sizing:border-box;display:block}
.logo-dlg{display:flex;flex-direction:column;gap:10px}.logo-now{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.logo-cand{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg2);color:inherit;cursor:pointer;font:inherit;font-size:11.5px;min-width:0}
.logo-cand:hover{border-color:rgba(139,85,247,0.6)}.logo-cand img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:10px;padding:6px;box-sizing:border-box}
.logo-cand span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logo-cand .logo-where{color:var(--muted,#8b93b0);font-size:10.5px;margin-top:-4px}
.sigil-iris{background:linear-gradient(135deg,rgba(139,85,247,0.85),rgba(116,56,224,0.6))}.sigil-aqua{background:linear-gradient(135deg,rgba(14,199,232,0.85),rgba(10,160,194,0.6))}.sigil-mint{background:linear-gradient(135deg,rgba(30,217,146,0.8),rgba(18,180,120,0.55))}.sigil-flare{background:linear-gradient(135deg,rgba(244,63,142,0.85),rgba(217,38,114,0.6))}.sigil-sol{background:linear-gradient(135deg,rgba(245,166,35,0.8),rgba(232,89,12,0.6))}.sigil-blue{background:linear-gradient(135deg,rgba(59,130,246,0.8),rgba(37,99,235,0.6))}
.meter{height:6px;width:100%;overflow:hidden;border-radius:999px;background:rgba(139,85,247,0.15)}
.meter-fill{height:100%;border-radius:999px;background:#8b55f7;transition:width .7s cubic-bezier(0.16,1,0.3,1)}
.meter-aqua{background:rgba(10,160,194,0.2)}.meter-aqua .meter-fill{background:#0aa0c2}
.meter-mint{background:rgba(18,130,88,0.25)}.meter-mint .meter-fill{background:#128258}.meter-done{background:rgba(18,130,88,0.25)}.meter-done .meter-fill{background:#128258}
.meter-flare{background:rgba(244,63,142,0.15)}.meter-flare .meter-fill{background:#f43f8e}
.meter-sol{background:rgba(245,166,35,0.18)}.meter-sol .meter-fill{background:#e8590c}
.plate{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);transition:transform .3s cubic-bezier(0.16,1,0.3,1)}
.plate-iris{background:rgba(139,85,247,0.16);color:#c9a8ff}.plate-aqua{background:rgba(14,199,232,0.14);color:#7df3ff}.plate-mint{background:rgba(30,217,146,0.14);color:#86f7cb}.plate-sol{background:rgba(245,166,35,0.14);color:#ffd98a}.plate-flare{background:rgba(244,63,142,0.14);color:#ffa3cf}
.spotlight{position:relative}
.spotlight::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(169,125,251,0.13),transparent 62%);opacity:0;transition:opacity .4s ease;z-index:0}
.spotlight:hover::before{opacity:1}
.spotlight>*{position:relative;z-index:1}
.panel-hover{transition:all .3s cubic-bezier(0.16,1,0.3,1)}
.panel-hover:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 2px 4px rgba(2,4,12,0.5),0 32px 64px -28px rgba(2,4,12,0.95),0 0 0 1px rgba(139,85,247,0.09)}
.panel-hover:hover .plate,.panel-hover:hover .sigil{transform:scale(1.05)}

/* ---- dashboard ---- */
.dash-hero{position:relative;isolation:isolate;margin:-26px -28px 0;padding:44px 28px 40px;border-bottom:1px solid var(--line-1);overflow:hidden;background:
  radial-gradient(60% 80% at 8% 0%,rgba(139,85,247,0.22),transparent 60%),
  radial-gradient(40% 60% at 90% 10%,rgba(14,199,232,0.14),transparent 60%),
  radial-gradient(50% 50% at 60% 120%,rgba(244,63,142,0.12),transparent 60%),
  linear-gradient(180deg,#0b0718 0%,#12102a 55%,#0c101d 100%)}
.dash-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,0.08) 1px,transparent 1px);background-size:24px 24px;opacity:.35;-webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 80%);mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 80%)}
.dash-hero::after{content:"";position:absolute;inset-inline:0;bottom:0;height:90px;z-index:-1;background:linear-gradient(180deg,transparent,#070a13)}
.dash-hero-in{max-width:1440px;margin:0 auto;display:grid;gap:28px;align-items:end;grid-template-columns:minmax(0,1fr)}
@media(min-width:1024px){.dash-hero-in{grid-template-columns:minmax(0,1fr) 380px;gap:48px}}
.dash-hero .caps{display:flex;align-items:center;gap:8px}
.dash-hero h1{margin:14px 0 0;color:#fff;text-wrap:balance}
.dash-hero p{margin:14px 0 0;max-width:52ch;color:var(--text-2);font-size:15px;line-height:1.6}
.cta{position:relative;overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,0.16);padding:20px;box-shadow:0 1px 2px rgba(2,4,12,0.6),0 28px 70px -24px rgba(2,4,12,0.95)}
.cta::before{content:"";position:absolute;inset:0;background-image:linear-gradient(135deg,#7c4df0 0%,#e14a99 100%)}
.cta::after{content:"";position:absolute;right:-40px;top:-56px;width:176px;height:176px;border-radius:50%;background:rgba(255,255,255,0.2);filter:blur(28px)}
.cta>*{position:relative}
.cta-top{display:flex;align-items:flex-start;gap:12px}
.cta-ic{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;background:rgba(255,255,255,0.15);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.25);backdrop-filter:blur(6px)}
.cta .t-body{font-family:var(--display);font-weight:700;color:#fff;letter-spacing:-0.012em}
.cta .t-meta{color:rgba(255,255,255,0.9);margin-top:3px;line-height:1.5}
.btn.white{margin-top:16px;width:100%;height:44px;background:#fff;color:#070a13;border-color:transparent;box-shadow:0 10px 24px -12px rgba(0,0,0,0.6)}
.btn.white:hover{background:rgba(255,255,255,0.9);transform:none}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:26px 0 8px}
.stat{position:relative;overflow:hidden;padding:18px 20px;border-radius:16px;border:1px solid var(--line-1);background:rgba(255,255,255,0.04);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),inset 0 36px 52px -52px rgba(255,255,255,0.22),0 1px 2px rgba(2,4,12,0.5),0 24px 48px -32px rgba(2,4,12,0.9);animation:rise .5s cubic-bezier(0.16,1,0.3,1) both}
.stat.clickable{cursor:pointer}
.stat.on{border-color:rgba(169,125,251,0.4)}
.stat-top{display:flex;align-items:center;gap:10px}.stat-label{font-weight:600;color:var(--text-2)}
.stat-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:18px 0 12px}
.stat .t-metric{color:#fff}.stat-pct{font-weight:600;color:var(--text-2)}
.stat-sub{color:var(--text-2);margin-top:10px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:26px 0 16px}
.sec-head p{margin:6px 0 0;color:var(--text-2);font-size:13.5px}
.search{position:relative;min-width:240px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search .in{padding-left:36px;border-radius:999px;background:rgba(7,10,19,0.5)}
.proj-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.proj-card{padding:18px;border-radius:16px;gap:14px;animation:rise .5s cubic-bezier(0.16,1,0.3,1) both;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.proj-card .pc-top{align-items:center;gap:12px}
.proj-card .pc-id-row{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.proj-card .pc-name{font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-card .pc-id{margin-top:2px}
.pc-life{display:flex;align-items:center;gap:10px}.pc-life .meter{height:4px;flex:1}.pc-life .t-micro{font-weight:700;color:var(--text-2)}
.proj-card .pc-meta{font-size:12px;color:var(--text-2)}
.proj-card .pc-meta b{font-family:var(--display)}
.proj-card .pc-links{margin-top:2px}

/* ---- project hub ---- */
.hub-hero{position:relative;overflow:hidden;padding:26px 28px;border-radius:20px;border:1px solid var(--line-1);background:rgb(19 24 41/0.6);box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),0 1px 2px rgba(2,4,12,0.5),0 24px 48px -32px rgba(2,4,12,0.9);animation:rise .5s cubic-bezier(0.16,1,0.3,1) both}
.hub-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.08) 1px,transparent 1px);background-size:24px 24px;opacity:.4;pointer-events:none}
.hub-wash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 140% at 100% 0%,rgba(139,85,247,0.2) 0%,transparent 55%),radial-gradient(90% 90% at 85% 130%,rgba(244,63,142,0.12) 0%,transparent 55%)}
.hub-row{position:relative;display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap}
.hub-main{min-width:0;flex:1}
.hub-main h1{margin:0;color:#fff;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-title{display:flex;align-items:center;gap:14px;margin-top:10px;min-width:0}
.hub-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;flex:none}
.seg{display:inline-flex;align-items:center;gap:2px;border-radius:12px;border:1px solid var(--line-1);padding:4px;background:rgba(255,255,255,0.035);box-shadow:inset 0 1px 0 rgba(255,255,255,0.04)}
.seg-item{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;background:transparent;cursor:pointer;border-radius:9px;padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--text-2);transition:all .15s;white-space:nowrap}
.seg-item:hover{color:#fff;background:rgba(255,255,255,0.06)}
.seg-item-active{color:#fff;background-image:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.02)),linear-gradient(135deg,rgba(139,85,247,0.4),rgba(244,63,142,0.28));box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),0 4px 12px -6px rgba(139,85,247,0.6)}
.seg-item svg{color:var(--muted)}.seg-item-active svg,.seg-item:hover svg{color:#c9a8ff}
.seg-dot{width:7px;height:7px;border-radius:50%;background:#ffc24d;box-shadow:0 0 8px #ffc24d}
.hub-tabs{display:flex;flex-wrap:wrap;width:100%;margin:18px 0 16px;animation:rise .5s cubic-bezier(0.16,1,0.3,1) .06s both}
.hub-tabs .seg-item{flex:none}
.hub-pane{animation:rise .35s cubic-bezier(0.16,1,0.3,1) both}
.hub-tabs[hidden]+.hub-pane{margin-top:16px} /* no tab bar (clients, the build view): keep the header card off the next card */
.hub-pane .stat-grid{margin-top:0}
.convo-pane .convo-empty{display:none}.convo-pane .card[hidden]+.convo-empty{display:block}
.timeline{list-style:none;margin:0;padding:0;display:flex;gap:0;overflow-x:auto}
.tl-step{position:relative;flex:1;min-width:92px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 4px 2px}
.tl-step::before{content:"";position:absolute;top:19px;left:50%;right:-50%;height:2px;background:var(--line-2)}
.tl-step:last-child::before{display:none}
.tl-step.done::before{background:rgba(18,180,120,0.55)}
.tl-dot{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);background:#0c101d;color:var(--muted)}
.tl-step.done .tl-dot{background:rgba(18,180,120,0.2);border-color:rgba(30,217,146,0.5);color:#86f7cb}
.tl-step.current .tl-dot{background:rgba(139,85,247,0.25);border-color:rgba(169,125,251,0.7);color:#c9a8ff;box-shadow:0 0 0 4px rgba(139,85,247,0.15),0 0 18px rgba(139,85,247,0.5)}
.tl-step.failed .tl-dot{background:rgba(244,63,94,0.2);border-color:rgba(244,63,94,0.6);color:#fda4af}
.tl-label{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.tl-step.done .tl-label{color:var(--text-2)}.tl-step.current .tl-label{color:#fff}.tl-step.failed .tl-label{color:#fda4af}

/* ---- sign-in ---- */
.login-split{position:relative;isolation:isolate;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,440px);align-items:center;gap:48px;padding:48px clamp(24px,7vw,120px);overflow:hidden}
@media(max-width:900px){.login-split{grid-template-columns:1fr;gap:28px;padding:40px 20px}.login-pitch{display:none}}
.login-card{width:100%;padding:28px;border-radius:20px;border:1px solid var(--line-2);background:rgba(12,16,29,0.62);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),0 1px 2px rgba(2,4,12,0.6),0 40px 90px -30px rgba(2,4,12,0.95);animation:rise .5s cubic-bezier(0.16,1,0.3,1) .12s both;justify-self:end}
.login-card .brand-row{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.login-card h2{margin:0}
.auth-alt{margin-top:16px;text-align:center;font-size:13px;color:var(--muted)}.auth-alt a{color:var(--text,#fff);font-weight:600}.auth-alt a:hover{text-decoration:underline}
.linkish{background:none;border:0;padding:0;color:var(--text,#fff);font:inherit;font-weight:600;cursor:pointer}.linkish:hover{text-decoration:underline}
.login-card label.f{margin-top:12px}
.login-card .in{padding-left:38px}
.login-card .fld{position:relative;display:block}.login-card .fld svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.login-pitch{animation:rise .5s cubic-bezier(0.16,1,0.3,1) both;max-width:560px}
.pitch-chip{display:inline-flex;align-items:center;border-radius:999px;border:1px solid rgba(139,85,247,0.4);background:rgba(139,85,247,0.1);padding:6px 14px;font-family:var(--display);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.2em;color:#c9a8ff;backdrop-filter:blur(12px)}
.login-pitch h1{margin:24px 0 0;font-family:var(--display);font-size:40px;font-weight:700;line-height:1.06;letter-spacing:-0.03em;color:#fff}
@media(min-width:1280px){.login-pitch h1{font-size:46px}}
.login-pitch p{margin:20px 0 0;max-width:24rem;color:var(--text-2);font-size:15px;line-height:1.6}
.cap-list{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:24px 28px}
.cap-list li{width:5.6rem}
.cap-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px}
.cap-list .cap-top{display:block;margin-top:12px;font-size:12px;font-weight:600;color:var(--text);line-height:1.25}
.cap-list .cap-bottom{display:block;font-size:12px;color:var(--muted);line-height:1.25}
.promise{position:relative;margin-top:44px;max-width:19rem;padding:22px 20px 20px;border-radius:16px;border:1px solid var(--line-1);background:rgba(12,16,29,0.6);backdrop-filter:blur(16px)}
.promise .q{position:absolute;left:16px;top:4px;font-family:var(--display);font-size:30px;line-height:1;color:rgba(169,125,251,0.5)}
.promise blockquote{margin:0;padding-left:20px;font-size:13.5px;line-height:1.55;color:var(--text)}
.promise .stages{display:flex;align-items:center;gap:8px;margin:14px 0 0 20px;font-size:11px;font-weight:600;color:var(--text-2)}
.promise .stages i{display:inline-block;width:6px;height:6px;border-radius:50%}
/* sky (decorative) */
.sky-field{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;isolation:isolate}
.sky{position:absolute;inset:0;background:radial-gradient(96% 64% at 14% -14%,#1c2560 0%,#141c4c 20%,#0b1030 46%,#070a1c 72%,#04050e 100%),radial-gradient(46% 36% at 84% 2%,rgba(14,199,232,0.13),transparent 64%),radial-gradient(56% 42% at 46% 108%,rgba(244,63,142,0.12),transparent 66%)}
.sky-nebula{position:absolute;border-radius:50%;mix-blend-mode:screen}
.sky-nebula-1{left:-20%;top:-40%;width:64%;height:116%;background:radial-gradient(closest-side,rgba(124,77,240,0.42),rgba(124,77,240,0) 70%);filter:blur(76px);transform:scale(1.06)}
.sky-nebula-2{left:2%;top:26%;width:48%;height:92%;background:radial-gradient(closest-side,rgba(226,55,136,0.2),rgba(226,55,136,0) 68%);filter:blur(84px)}
.sky-nebula-3{left:26%;top:-32%;width:42%;height:78%;background:radial-gradient(closest-side,rgba(14,199,232,0.26),rgba(14,199,232,0) 66%);filter:blur(70px);transform:scale(1.05)}
.sky-curtains{position:absolute;left:0;top:-24%;width:56%;height:128%;-webkit-mask-image:linear-gradient(178deg,#000 0%,#000 44%,rgba(0,0,0,0.52) 64%,rgba(0,0,0,0.18) 79%,transparent 94%);mask-image:linear-gradient(178deg,#000 0%,#000 44%,rgba(0,0,0,0.52) 64%,rgba(0,0,0,0.18) 79%,transparent 94%)}
.sky-curtain{position:absolute;top:0;height:100%;border-radius:50%;transform-origin:50% 30%;will-change:transform;animation:curtain-sway 17s ease-in-out infinite alternate}
.sky-curtain-1{left:8%;width:10%;opacity:.58;filter:blur(30px);background:linear-gradient(180deg,rgba(56,225,248,0) 0%,rgba(125,243,255,0.46) 20%,rgba(169,125,251,0.62) 50%,rgba(244,63,142,0.2) 74%,transparent 100%);animation-duration:15s}
.sky-curtain-2{left:22%;width:7%;opacity:.72;filter:blur(22px);background:linear-gradient(180deg,rgba(56,225,248,0) 0%,rgba(125,243,255,0.6) 16%,rgba(201,168,255,0.85) 44%,rgba(251,107,176,0.3) 70%,transparent 96%);animation-duration:19s;animation-delay:-4s}
.sky-curtain-3{left:36%;width:12%;opacity:.95;filter:blur(26px);background:linear-gradient(180deg,rgba(56,225,248,0) 0%,rgba(160,247,255,0.7) 14%,rgba(206,176,255,1) 40%,rgba(251,107,176,0.42) 68%,transparent 94%);animation-duration:13s;animation-delay:-7s}
.sky-curtain-4{left:52%;width:8%;opacity:.85;filter:blur(18px);background:linear-gradient(180deg,rgba(56,225,248,0) 0%,rgba(180,246,255,0.75) 12%,rgba(201,160,255,0.95) 38%,rgba(244,63,142,0.34) 66%,transparent 92%);animation-duration:21s;animation-delay:-2s}
.sky-curtain-5{left:66%;width:6%;opacity:.6;filter:blur(24px);background:linear-gradient(180deg,rgba(56,225,248,0) 0%,rgba(125,243,255,0.5) 18%,rgba(169,125,251,0.68) 46%,rgba(244,63,142,0.24) 72%,transparent 96%);animation-duration:25s;animation-delay:-11s}
@keyframes curtain-sway{from{transform:skewX(-11deg) translateX(-3%) scale(0.92,0.95)}to{transform:skewX(-4deg) translateX(5%) scale(1.14,1.05)}}
.sky-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,5,12,0) 44%,rgba(4,5,12,0.5) 70%,rgba(4,5,12,0.78) 100%),radial-gradient(120% 98% at 46% 46%,rgba(4,5,12,0) 50%,rgba(4,5,12,0.7) 100%)}
.sky-stars{position:absolute;inset:0;background-repeat:repeat}
.sky-stars-near{background-image:radial-gradient(1.6px 1.6px at 22px 28px,#fff,transparent 100%),radial-gradient(1.2px 1.2px at 128px 74px,rgba(201,168,255,0.9),transparent 100%),radial-gradient(1.8px 1.8px at 196px 168px,rgba(255,255,255,0.85),transparent 100%),radial-gradient(1.2px 1.2px at 74px 208px,rgba(125,243,255,0.8),transparent 100%),radial-gradient(1.4px 1.4px at 254px 52px,rgba(255,255,255,0.72),transparent 100%);background-size:293px 251px;animation:sky-twinkle 6.5s ease-in-out infinite alternate}
.sky-stars-mid{background-image:radial-gradient(1.1px 1.1px at 46px 96px,rgba(255,255,255,0.7),transparent 100%),radial-gradient(1px 1px at 210px 34px,rgba(255,163,207,0.62),transparent 100%),radial-gradient(1.2px 1.2px at 158px 232px,rgba(255,255,255,0.55),transparent 100%),radial-gradient(1px 1px at 320px 148px,rgba(125,243,255,0.58),transparent 100%),radial-gradient(1px 1px at 268px 296px,rgba(201,168,255,0.5),transparent 100%);background-size:391px 337px;animation:sky-twinkle 9.5s ease-in-out infinite alternate-reverse}
.sky-stars-far{background-image:radial-gradient(1px 1px at 30px 54px,rgba(255,255,255,0.42),transparent 100%),radial-gradient(1px 1px at 112px 160px,rgba(201,168,255,0.34),transparent 100%),radial-gradient(1px 1px at 148px 24px,rgba(255,255,255,0.3),transparent 100%);background-size:173px 211px;animation:sky-twinkle 14s ease-in-out infinite alternate}
@keyframes sky-twinkle{from{opacity:.45}to{opacity:.95}}
.sky-flare{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 7px 2px rgba(201,168,255,0.8);animation:flare-pulse 5.5s ease-in-out infinite}
.sky-flare::before,.sky-flare::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.sky-flare::before{width:30px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.75),transparent)}
.sky-flare::after{width:1px;height:30px;background:linear-gradient(180deg,transparent,rgba(255,255,255,0.75),transparent)}
@keyframes flare-pulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.sky-meteor{position:absolute;width:2px;height:2px;border-radius:9999px;background:#fff;box-shadow:0 0 8px 2px rgba(125,243,255,0.85);opacity:0;animation:meteor-run 14s linear infinite}
.sky-meteor::before{content:"";position:absolute;top:50%;right:1px;width:130px;height:1px;transform:translateY(-50%);background:linear-gradient(270deg,rgba(255,255,255,0.9),rgba(169,125,251,0.32) 46%,transparent)}
.sky-meteor-1{left:74%;top:-2%;animation-duration:14s}.sky-meteor-2{left:96%;top:16%;animation-duration:19s;animation-delay:-7s}.sky-meteor-3{left:58%;top:-6%;animation-duration:26s;animation-delay:-15s}
@keyframes meteor-run{0%{opacity:0;transform:rotate(148deg) translateX(0)}4%{opacity:1}22%{opacity:0;transform:rotate(148deg) translateX(720px)}100%{opacity:0;transform:rotate(148deg) translateX(720px)}}
@media(prefers-reduced-motion:reduce){.sky-curtain,.sky-stars,.sky-flare,.sky-meteor,.pill-dot.pulse::after{animation:none!important}.panel-hover:hover{transform:none}}

/* settings sections read as VishGen "Section" panels */
.set-pane .card h2{font-size:15px}
.card h2 .hint{margin-left:8px}
.set-pane td .row{flex-wrap:nowrap}
.set-gtitle{letter-spacing:0.14em}
@media(max-width:560px){.rail-item .rail-lbl{display:none}.rail-item{padding:4px 6px}}

/* narrow screens: the hero bleeds to the .main gutter, which is 16px there */
@media(max-width:1023px){.dash-hero{margin:-18px -16px 0;padding:34px 16px 30px}.dash-hero-in{gap:20px}}

/* ---- Organization browser (type-first drill-down) ---- */
.ob-card{padding:20px 22px}
.ob-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:12px;color:var(--muted);margin-bottom:16px}
.ob-crumb-link{border:0;background:transparent;color:var(--text-2);padding:3px 7px;border-radius:7px;cursor:pointer;font-weight:600;font-size:12px}
.ob-crumb-link:hover{color:#fff;background:rgba(255,255,255,0.06)}
.ob-crumb-cur{color:#fff;font-weight:600;padding:3px 7px}
.ob-sep{display:inline-flex;color:var(--line-3);transform:rotate(-90deg)}
.ob-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.ob-name{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-0.02em;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.ob-tabs{margin-bottom:18px;max-width:100%;overflow-x:auto}
.ob-pane{min-width:0}
.type-grid,.org-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.type-card,.org-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:16px;border:1px solid var(--line-1);border-radius:16px;background:var(--surface);cursor:pointer;min-width:0;animation:rise .5s cubic-bezier(0.16,1,0.3,1) both;outline:none}
.type-card:focus-visible,.org-card:focus-visible{border-color:rgba(169,125,251,0.55);box-shadow:0 0 0 3.5px rgba(139,85,247,0.16)}
.tc-top,.oc-top{display:flex;align-items:center;gap:12px;min-width:0}
.tc-name,.oc-name{font-family:var(--display);font-weight:600;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-count,.oc-sub{font-size:12px;color:var(--text-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-count b{color:#fff;font-family:var(--display);font-variant-numeric:tabular-nums}
.tc-foot,.oc-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto}
.ob-open{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#c9a8ff}
.type-card:hover .ob-open{color:#fff}
.ob-list-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ob-list-title{font-size:13px;color:var(--text-2)}.ob-list-title b{color:#fff;font-family:var(--display)}
@media(max-width:560px){.ob-name{font-size:18px}.type-grid,.org-grid{grid-template-columns:1fr}}
@media(max-width:560px){.ob-tabs{flex-wrap:wrap;overflow:visible}}
/* plain-language organization browser */
.ob-sentence{font-size:13px;color:var(--text-2);line-height:1.5}.ob-sentence b{color:var(--text)}
.ob-intro{margin:-6px 0 16px;font-size:13px;color:var(--text-2);max-width:760px}
.ob-help{margin:0 0 16px;border:1px solid var(--line-1);border-radius:12px;background:var(--bg2);font-size:13px;color:var(--text-2)}
.ob-help summary{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;color:var(--text);font-weight:600;list-style:none}
.ob-help summary::-webkit-details-marker{display:none}.ob-help summary svg{color:#c9a8ff}
.ob-help ol{margin:0;padding:0 16px 12px 32px;display:flex;flex-direction:column;gap:6px}.ob-help b{color:var(--text)}
.ob-start{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:34px 20px;border:1px dashed var(--line-2);border-radius:14px}
.ob-start-t{font-family:var(--display);font-weight:600;font-size:16px;color:var(--text)}.ob-start-p{color:var(--text-2);font-size:13px;max-width:460px}
.type-card-add{border-style:dashed;background:transparent;text-align:left;flex-direction:row;align-items:center;color:inherit;font:inherit}
.type-card-add:hover{border-color:rgba(169,125,251,0.5);background:rgba(139,85,247,0.06)}
.ob-q{display:flex;align-items:flex-start;gap:12px;margin-top:12px}.ob-q label.f{flex:1;max-width:560px}.ob-q .hint{margin-top:2px}
.ob-qn{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:rgba(139,85,247,0.16);color:#c9a8ff;font-weight:700;font-size:12px;margin-top:22px}
.tc-foot{flex-wrap:wrap;row-gap:10px}.tc-foot .btn{white-space:nowrap}
.oc-sub{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* neat organization cards */
.org-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.org-card{gap:16px}
.oc-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
.oc-foot{flex-wrap:wrap;justify-content:flex-start;gap:6px}
.oc-foot .lvl-chip,.oc-foot .mult-chip{white-space:nowrap;flex:none;margin-left:0!important}
.oc-foot .lvl-chip svg{margin-right:4px}
.oc-actions{display:inline-flex;align-items:center;gap:6px;margin-left:auto;white-space:nowrap}
.oc-del{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;opacity:0;transition:opacity .15s,color .15s,border-color .15s,background .15s}
.org-card:hover .oc-del,.org-card:focus-within .oc-del{opacity:1}
.oc-del:hover{color:#ffa3cf;border-color:rgba(244,63,94,0.35);background:rgba(244,63,94,0.12)}
.org-card:hover .ob-open{color:#fff}
@media(hover:none){.oc-del{opacity:1}}
.tc-edit{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;opacity:0;transition:opacity .15s,color .15s,border-color .15s,background .15s}
.type-card:hover .tc-edit,.type-card:focus-within .tc-edit{opacity:1}.tc-edit:hover{color:#fff;border-color:var(--line-2);background:rgba(255,255,255,0.06)}
@media(hover:none){.tc-edit{opacity:1}}
.role-sys td{background:rgba(139,85,247,0.04)}
.role-perms{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px}.role-perms li{display:flex;align-items:center;gap:8px}.role-perms svg{color:var(--good)}
.ob-inline-edit{position:static;opacity:1;display:inline-grid;width:24px;height:24px;vertical-align:middle;margin-left:4px}
.wiz-for{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;color:var(--text-2)}.wiz-for b{color:var(--text)}.wiz-for svg{color:#c9a8ff}
.wiz-link{border:0;background:transparent;color:var(--accent);cursor:pointer;padding:0 2px;font-size:12px}.wiz-link:hover{text-decoration:underline}
/* disabled remove: stays visible so the hover tooltip can explain why */
.btn.danger:disabled,.oc-del:disabled{opacity:.45;cursor:not-allowed;transform:none}
.oc-del.btn{padding:0;border-color:transparent;background-image:none}.oc-del.btn:disabled{opacity:1;color:var(--muted)}
.org-card:hover .oc-del:disabled{opacity:1}
/* organization chooser (project wizard) */
.pick{display:flex;flex-direction:column;gap:12px}
.pick-search{max-width:100%}.pick-search .in{width:100%}
.pick-status{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--line-1);background:var(--bg2);font-size:13px}.pick-status svg{color:var(--good);flex:none}.pick-status b{color:var(--text)}
.pick-here{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.pick-list{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow:auto;padding-right:2px}
.pick-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line-1);border-radius:12px;background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s;outline:none}
.pick-row:hover{border-color:var(--line-2);background:var(--surface-2)}.pick-row:focus-visible{border-color:rgba(169,125,251,0.55);box-shadow:0 0 0 3.5px rgba(139,85,247,0.16)}
.pick-row.on{border-color:rgba(76,238,176,0.45);background:rgba(76,238,176,0.06)}
.pick-main{min-width:0;flex:1}.pick-name{font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.pick-sub{font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-acts{display:inline-flex;align-items:center;gap:8px;flex:none}.pick-hint{font-size:12px;color:var(--muted)}.pick-row:hover .pick-hint{color:#c9a8ff}
.pick-chosen{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--good)}
/* No backdrop blur on content cards: Chrome tiles large blurred layers and draws seams
   (vertical bands) and pulls the hero's bottom edge into the first card as a thin line. */
.card,.stat,.proj-card,.tile,.type-card,.org-card{backdrop-filter:none;-webkit-backdrop-filter:none}
.dash-hero{border-bottom:0}
.tc-edit{opacity:.55}.type-card:hover .tc-edit{opacity:1}
/* ---- styled dialogs (confirm / alert / prompt) ---- */
.dlg-bg{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;background:rgba(4,6,12,0.66);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:mfade .18s ease-out}
.dlg-bg.out{animation:dlgout .16s ease-in forwards}
@keyframes dlgout{to{opacity:0}}
.dlg{width:min(460px,100%);padding:22px 22px 18px;border-radius:18px;border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02)),#0e1220;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 2px 6px rgba(2,4,12,0.6),0 40px 90px -30px rgba(2,4,12,0.95);animation:mpop .26s cubic-bezier(0.16,1,0.3,1)}
.dlg-row{display:flex;gap:14px;align-items:flex-start}
.dlg-ic{width:44px;height:44px;border-radius:14px;flex:none}
.dlg-title{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-0.015em;color:#fff;line-height:1.3}
.dlg-body{margin-top:6px;font-size:13.5px;color:var(--text-2);line-height:1.55;white-space:pre-line}
.dlg-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.btn.primary.danger-solid{background-image:linear-gradient(180deg,rgba(255,255,255,0.16),rgba(255,255,255,0) 46%),linear-gradient(135deg,#f43f5e,#c2185b);box-shadow:0 10px 24px -12px rgba(244,63,94,0.7)}
.btn.primary.danger-solid:hover{filter:brightness(1.08)}
@media(max-width:560px){.dlg{padding:18px}.dlg-acts{flex-direction:column-reverse}.dlg-acts .btn{width:100%}}
/* filterable, sortable tables */
.tbl-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.tbl-tools .search{max-width:320px;flex:1 1 220px}.tbl-count{margin-left:auto;white-space:nowrap}
.seg-sm .seg-item{padding:4px 10px;font-size:12px}
.th-sort{cursor:pointer;user-select:none;white-space:nowrap}.th-sort:hover{color:#fff}.th-sort.on{color:#c9a8ff}
.th-dir{display:inline-block;margin-left:5px;font-size:9px;opacity:.55}.th-sort.on .th-dir{opacity:1}
.seg-count{display:inline-grid;place-items:center;min-width:20px;height:18px;padding:0 6px;border-radius:999px;font-size:10.5px;font-weight:700;background:rgba(255,255,255,0.08);color:var(--text-2);margin-left:2px}.seg-item-active .seg-count{background:rgba(255,255,255,0.16);color:#fff}
.sys-mark{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;color:#c9a8ff;background:rgba(139,85,247,0.14);box-shadow:inset 0 0 0 1px rgba(169,125,251,0.3);cursor:help;outline:none}
.sys-mark:hover,.sys-mark:focus-visible{background:rgba(139,85,247,0.28)}
/* projects page */
.pj-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}.pj-tools .search{flex:1 1 260px;max-width:420px}
.pj-orgs{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--line-1);border-radius:14px;background:var(--bg2);margin-bottom:6px}
.pj-chip-row{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}.pj-chip-kind{min-width:96px;padding-top:7px;color:var(--muted)}
.pj-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.pj-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 5px;border-radius:999px;border:1px solid var(--line-1);background:var(--surface);color:var(--text);font:inherit;font-size:12.5px;cursor:pointer;transition:border-color .15s,background .15s}
.pj-chip:hover{border-color:rgba(169,125,251,0.5);background:rgba(139,85,247,0.08)}.pj-chip.dim{opacity:.55}
.pj-chip .sigil-xs{width:20px;height:20px;border-radius:6px;font-size:8px}
.pj-chip-n{display:inline-grid;place-items:center;min-width:18px;height:17px;padding:0 5px;border-radius:999px;background:rgba(255,255,255,0.08);font-size:10.5px;font-weight:700;color:var(--text-2)}
.sigil-xs{width:20px;height:20px;border-radius:6px;font-size:8px}
/* dashboard: needs attention */
.attn{margin-top:16px}.attn-list{display:flex;flex-direction:column;gap:6px}
.attn-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;border:1px solid var(--line-1);background:var(--surface);color:inherit}.attn-row:hover{border-color:var(--line-2);background:var(--surface-2);color:inherit}
.attn-name{font-weight:600}
/* project card: aligned facts and footer */
.proj-card{justify-content:space-between}
.pc-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.pc-fact{display:flex;flex-direction:column;gap:1px;min-width:0}.pc-fact-wide{grid-column:1/-1}
.pc-k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pc-fact b{font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--text);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-card .pc-links{margin-top:2px;min-height:30px;align-items:center}
.proj-grid{margin-bottom:8px}
a.org-card{color:inherit;text-decoration:none}a.org-card:hover{color:inherit}
/* dashboard organization tiles: facts + credits */
.org-card-dash{gap:12px}
.oc-facts{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--text-2)}.oc-facts span{display:inline-flex;align-items:center;gap:5px}.oc-facts svg{color:var(--muted)}.oc-facts b{color:var(--text);font-family:var(--display)}
.oc-credits{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;border:1px solid var(--line-1);background:var(--bg2)}
.oc-cr-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.oc-cr-val{font-size:12.5px;color:var(--text-2)}.oc-cr-val b{font-family:var(--display);font-size:15px;color:#fff}
.oc-cr-sub{display:flex;gap:14px;font-size:11.5px;color:var(--muted)}.oc-cr-sub b{color:var(--text-2)}
.stat-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
/* danger buttons: quiet outline that only turns red on hover */
.btn.danger{color:#ff9fb8;border-color:rgba(244,63,94,0.28);background-image:none;background-color:transparent;box-shadow:none}
.btn.danger:hover{color:#fff;border-color:rgba(244,63,94,0.6);background-image:none;background-color:rgba(244,63,94,0.22)}
.btn.danger:disabled,.btn.danger:disabled:hover{color:var(--muted);border-color:var(--line-1);background-color:transparent;opacity:1;cursor:not-allowed}
.btn.primary.danger-solid{color:#fff;border-color:transparent;background-image:linear-gradient(180deg,rgba(255,255,255,0.16),rgba(255,255,255,0) 46%),linear-gradient(135deg,#f43f5e,#c2185b)}
/* the brand is the Home link: show the active rail indicator on it */
.rail-brand{position:relative}
.rail-brand::before{content:"";position:absolute;left:-9px;top:50%;height:0;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#38e1f8,#8b55f7);transform:translateY(-50%);transition:height .2s,opacity .2s;opacity:0}
.rail-brand.on::before{height:22px;opacity:1}
.rail-brand.on .rail-lbl{color:#c9a8ff}
.rail-brand.on .brand-mark{box-shadow:0 10px 30px -12px rgba(139,85,247,0.75),inset 0 0 0 1px rgba(255,255,255,0.35),0 0 0 3px rgba(139,85,247,0.22)}
/* header credits chip */
.head-credits{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);font-size:12.5px;white-space:nowrap;transition:border-color .15s,background .15s}
.head-credits:hover{border-color:rgba(169,125,251,0.5);background:rgba(139,85,247,0.1);color:var(--text)}
.head-credits svg{color:#86f7cb}.head-credits .hc-val{font-family:var(--display);font-weight:700;color:#fff}.head-credits .hc-lbl{color:var(--text-2)}
.head-credits.warn svg{color:#ffd98a}.head-credits.low{border-color:rgba(244,63,94,0.45)}.head-credits.low svg{color:#ffa3cf}.head-credits.low .hc-lbl{color:#ffa3cf}
@media(max-width:560px){.head-credits .hc-lbl{display:none}}
/* hosting connectors */
.host-card{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line-1);border-radius:16px;background:var(--surface);min-width:0}
.host-fields{margin-top:10px}
/* hosting connectors */
.host-card{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line-1);border-radius:16px;background:var(--surface);min-width:0}
.host-fields{margin-top:10px}
/* talk to the analyst */
.talk-card{padding:18px 20px}
.talk-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px;align-items:start}
.talk-avatar{display:flex;flex-direction:column;gap:6px}.talk-face{width:100%;aspect-ratio:1;border-radius:18px;background:#0b0e18;border:1px solid var(--line-1)}
.talk-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.talk-thread{display:flex;flex-direction:column;gap:10px;max-height:460px;overflow:auto;padding:4px 6px 4px 0}
.talk-msg,.talk-hello{max-width:92%;padding:10px 14px;border-radius:14px 14px 14px 4px;border:1px solid var(--line-1);background:var(--surface)}
.talk-msg.mine{align-self:flex-end;border-radius:14px 14px 4px 14px;background:rgba(139,85,247,0.12);border-color:rgba(169,125,251,0.3)}
.talk-who{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.talk-text{white-space:pre-wrap;line-height:1.5}
.talk-qs{margin-top:8px;display:flex;flex-direction:column;gap:8px}.talk-q-t{font-weight:600;font-size:13px}
.talk-proposal{margin-top:10px;padding:12px 14px;border-radius:12px;border:1px solid rgba(76,238,176,0.35);background:rgba(76,238,176,0.06)}.talk-proposal-t{font-family:var(--display);font-weight:700;font-size:15px;margin-top:4px}
.talk-speak{margin-top:8px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-1);background:transparent;color:var(--text-2);border-radius:999px;padding:3px 10px;font-size:11.5px;cursor:pointer}.talk-speak:hover{color:#fff;border-color:var(--line-2)}
.talk-composer{display:flex;gap:8px;align-items:flex-end}
.talk-mic{width:40px;height:40px;padding:0;border-radius:50%;flex:none;display:grid;place-items:center}.talk-mic.on{background-image:none;background-color:rgba(244,63,94,0.3);border-color:rgba(244,63,94,0.6);color:#fff;animation:halo-mic 1s ease-in-out infinite}
@keyframes halo-mic{0%,100%{box-shadow:0 0 0 0 rgba(244,63,94,0.5)}50%{box-shadow:0 0 0 8px rgba(244,63,94,0)}}
.talk-dots{letter-spacing:2px;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
@media(max-width:760px){.talk-grid{grid-template-columns:1fr}.talk-avatar{max-width:200px;margin:0 auto}}
.talk-msg.declined{border-color:rgba(255,194,77,0.35);background:rgba(255,194,77,0.06)}
.talk-policy{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:11px;font-weight:600;color:#ffd98a}
.talk-divider{height:1px;background:var(--line-1);margin:18px 0 14px}
.talk-h3{font-family:var(--display);font-size:14px;font-weight:600;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.talk-requests{min-width:0}
/* live preview beside the analyst */
.talk-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:16px;align-items:start}
.pv-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.pv-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.pv-sel{width:auto;max-width:200px}
.pv-addr{display:flex;align-items:center;gap:6px;flex:1 1 160px;min-width:140px}.pv-addr svg{color:var(--muted);flex:none}.pv-path{flex:1;font-family:var(--mono);font-size:12.5px}
.pv-body{min-height:520px;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:#fff}
.pv-frame{display:block;width:100%;height:560px;border:0;background:#fff}
.pv-empty{min-height:520px;justify-content:center;background:var(--bg2);border:0;border-radius:0}
.talk-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.talk-side-top{display:flex;flex-direction:column;gap:10px}
.talk-side .talk-avatar{max-width:150px}.talk-side .talk-avatar.is-3d{max-width:none;width:100%}.talk-side .talk-avatar.is-3d .talk-person{aspect-ratio:16/10}.talk-side .talk-thread{max-height:380px}
@media(max-width:1100px){.talk-layout{grid-template-columns:1fr}.pv-frame{height:420px}.pv-body,.pv-empty{min-height:420px}}
.pv-lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex:none}
.pv-body{background:var(--bg2)}.pv-body:has(.pv-frame){background:#fff}
.pv-empty .ob-start-t{color:var(--text)}

/* mobile app preview */
.pv-mobile{display:flex;flex-direction:column;gap:18px;padding:22px;height:100%;overflow:auto}
.pv-mob-head{display:flex;gap:12px;align-items:center}
.pv-mob-main{display:flex;flex-direction:column;gap:6px}
.pv-mob-grid{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}
.pv-qr-box{display:flex;flex-direction:column;gap:8px}
.pv-qr{width:196px;height:196px;border-radius:14px;background:#fff;padding:8px;display:block}
.pv-ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:13px;line-height:1.5}
.pv-ol code{color:var(--text);background:rgba(255,255,255,.06);padding:1px 6px;border-radius:6px;font-size:12px}
@media (max-width:720px){.pv-mob-grid{grid-template-columns:1fr}}

/* live phone */
.pv-phone-wrap{display:flex;flex-direction:column;align-items:center}
.pv-phone{width:324px;max-width:100%;aspect-ratio:9/20;transition:width .15s;border-radius:28px;padding:10px;background:#0b0d16;border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 40px rgba(0,0,0,.45);outline:none;touch-action:none;user-select:none}
.pv-phone:focus{border-color:rgba(139,92,246,.7)}
.pv-phone-screen{display:block;width:100%;height:100%;object-fit:fill;border-radius:20px;background:#000;cursor:pointer}
.pv-phone-wait{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 12px;text-align:center}
.pv-install{margin-top:16px}
.pv-install summary{cursor:pointer;color:var(--muted);font-size:13px}
/* full screen: phone in the middle, the analyst floating on the right */
.talk-pane:fullscreen,
.talk-pane.is-full{background:radial-gradient(1200px 800px at 30% 40%,#141a33,#05060c 70%);padding:0;overflow:hidden}
.talk-pane:fullscreen>:not(.talk-layout),.talk-pane:fullscreen .pv-mob-head,.talk-pane:fullscreen .pv-install,
.talk-pane.is-full>:not(.talk-layout),.talk-pane.is-full .pv-mob-head,.talk-pane.is-full .pv-install{display:none}
.talk-pane:fullscreen .talk-layout,
.talk-pane.is-full .talk-layout{display:block;height:100vh;position:relative}
.talk-pane:fullscreen .pv-col,
.talk-pane.is-full .pv-col{height:100vh;gap:0}
.talk-pane:fullscreen .pv-bar,
.talk-pane.is-full .pv-bar{position:absolute;top:14px;left:18px;right:440px;z-index:2}
.talk-pane:fullscreen .pv-body,
.talk-pane.is-full .pv-body{box-sizing:border-box;height:100vh;min-height:0;border:0;border-radius:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:64px 440px 0 0}
.talk-pane:fullscreen .pv-mobile,
.talk-pane.is-full .pv-mobile{padding:0;height:auto;overflow:visible}
.talk-pane:fullscreen .pv-mob-main,
.talk-pane.is-full .pv-mob-main{align-items:center}
.talk-pane:fullscreen .talk-side,
.talk-pane.is-full .talk-side{box-sizing:border-box;position:absolute;top:16px;right:16px;bottom:16px;width:400px;padding:16px;border-radius:20px;background:rgba(12,14,26,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 60px rgba(0,0,0,.45);overflow:visible;display:flex;flex-direction:column;z-index:3}
.talk-pane:fullscreen .talk-main,
.talk-pane.is-full .talk-main{overflow:hidden}
.talk-pane:fullscreen .talk-side-top,
.talk-pane.is-full .talk-side-top{flex:1;min-height:0;display:flex;flex-direction:column}
.talk-pane:fullscreen .talk-avatar,
.talk-pane.is-full .talk-avatar{flex-direction:row;align-items:center;gap:10px}
.talk-pane:fullscreen .talk-face,
.talk-pane.is-full .talk-face{width:72px;border-radius:14px}
.talk-pane:fullscreen .talk-main,
.talk-pane.is-full .talk-main{flex:1;min-height:0}
.talk-pane:fullscreen .talk-thread,
.talk-pane.is-full .talk-thread{flex:1;max-height:none;min-height:0}
.talk-pane:fullscreen .talk-msg,
.talk-pane.is-full .talk-msg{background:rgba(255,255,255,.06)}

/* the analyst as a person */
.talk-person{width:100%;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:radial-gradient(120% 90% at 50% 20%,#232a4d 0%,#0d1020 70%);border:1px solid var(--line-1);position:relative}
.talk-person canvas{display:block;width:100%!important;height:100%!important}
.talk-pane:fullscreen .talk-avatar,
.talk-pane.is-full .talk-avatar{position:absolute;right:calc(100% + 18px);bottom:0;top:0;width:380px;flex-direction:column;justify-content:flex-end;gap:0}
.talk-pane:fullscreen .talk-person,
.talk-pane.is-full .talk-person{width:100%;height:100%;aspect-ratio:auto;border-radius:0;border:0;background:transparent}
.talk-pane:fullscreen .talk-avatar .small,
.talk-pane.is-full .talk-avatar .small{display:none}

.talk-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;transition:opacity .35s ease}.talk-video-clip{z-index:2}.talk-avatar.is-video .talk-person{aspect-ratio:3/4;background:#1a1410}.talk-side .talk-avatar.is-3d.is-video .talk-person{aspect-ratio:4/5;max-height:460px}.talk-pane:fullscreen .talk-avatar.is-video .talk-person,
.talk-pane.is-full .talk-avatar.is-video .talk-person{aspect-ratio:auto}

/* the analyst as a full-figure presenter at the side of the screen (live video route) */
.presenter{position:fixed;right:18px;bottom:0;z-index:40;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.presenter-canvas{display:block;filter:drop-shadow(0 18px 40px rgba(0,0,0,0.55))}
.presenter-status{font-size:12px;color:var(--text-2);min-height:18px;text-align:center;padding:0 8px 10px}
.talk-avatar.is-overlay{display:none}
.talk-grid:has(.talk-avatar.is-overlay){grid-template-columns:1fr}
@media(min-width:1300px){body.has-presenter .main{padding-right:calc(var(--presenter-w,0px) + 12px)}}
@media(max-width:900px){.presenter:not(.is-head) .presenter-canvas{height:38vh!important;width:auto!important}}

/* development mode picker (Basic / Standard / Premium) */
.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:640px}@media(max-width:640px){.mode-grid{grid-template-columns:1fr}}
.mode-opt{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);cursor:pointer;transition:border-color .15s,background .15s}
.mode-opt:hover{border-color:var(--line-3)}
.mode-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mode-opt.on{border-color:var(--accent);background:rgba(139,85,247,0.10);box-shadow:0 0 0 1px rgba(169,125,251,0.45)}
.mode-opt .mode-t{font-weight:600}
.mode-opt .mode-d{font-size:12px;color:var(--muted);line-height:1.35}

/* project header in plain language */
.plain-status{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:15px;color:var(--text)}
.plain-status .pill-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--muted)}
.plain-status.tone-mint .pill-dot{background:var(--good)}.plain-status.tone-rose .pill-dot{background:var(--bad)}
.plain-status.tone-iris .pill-dot{background:var(--accent)}.plain-status.tone-sol .pill-dot{background:var(--warn)}
.plain-status.tone-rose{color:#ffc9e3}
.hub-facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:16px;color:var(--muted);font-size:13px}
.hub-facts .hub-link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:500}
.more-menu{position:relative}
.more-menu>summary{list-style:none;display:inline-flex;align-items:center;gap:6px}
.more-menu>summary::-webkit-details-marker{display:none}
.more-list{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:210px;padding:6px;border-radius:12px;border:1px solid var(--line-2);background:#0e1220;box-shadow:0 18px 40px -18px rgba(2,4,12,.9);display:flex;flex-direction:column}
.more-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.more-item:hover,.more-item:focus-visible{background:rgba(139,85,247,.12);outline:none}
.more-item.danger{color:#fda4af}
.hub-hero:has(.more-menu[open]){overflow:visible;z-index:20}
.hub-main{flex:1 1 320px}.hub-main .hub-title{margin-top:0}
@media(max-width:560px){.hub-actions{width:100%}.hub-actions>.btn{flex:1;justify-content:center}.more-list{right:0;left:auto}}

/* Versions tab */
.versions-tab{display:flex;flex-direction:column;gap:16px}
.versions-tab>.card{margin:0}
.stage-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:4px}
@media(max-width:900px){.stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.stage-grid{grid-template-columns:1fr}}
.stage-card{display:flex;flex-direction:column;gap:6px;min-height:132px;padding:14px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface)}
.stage-card.on{border-color:rgba(76,238,176,0.35)}
.stage-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.stage-ver{font-size:18px;font-weight:600;color:var(--text)}
.ver-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ver-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line-1);flex-wrap:wrap}
.ver-item:first-child{border-top:0}
.ver-main{min-width:0;flex:1 1 260px}
.ver-tag{font-size:15px}
.ver-stage{width:220px;max-width:100%}
.ver-item select.ver-stage{width:220px;max-width:100%;flex:none}
.build-back{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 12px}
.versions-tab[hidden],.hub-tabs[hidden]{display:none}

/* mode tag in the project header */
.mode-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--line-2);color:var(--text);background:rgba(255,255,255,0.05)}
.mode-tag.mode-basic{border-color:rgba(124,134,178,0.45);color:#c3c9e6}
.mode-tag.mode-standard{border-color:rgba(169,125,251,0.5);color:#d9c8ff;background:rgba(139,85,247,0.12)}
.mode-tag.mode-premium{border-color:rgba(255,194,77,0.55);color:#ffe2a6;background:rgba(255,194,77,0.10)}
.stat-grid[hidden]{display:none}
.hub-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.hub-stat{display:flex;flex-direction:column;gap:2px;min-width:120px;padding:10px 14px;border-radius:12px;border:1px solid var(--line-1);background:rgba(255,255,255,0.03)}
.hub-stat span{font-size:12px;color:var(--muted)}
.hub-stat b{font-size:18px;color:var(--text);font-variant-numeric:tabular-nums}

/* Make a change: the analyst on a stage with the conversation over her lower half (subtitles) */
.talk-layout.stage{grid-template-columns:1fr}
.talk-layout.stage>.pv-col{display:none}
.talk-layout.stage.with-app{grid-template-columns:minmax(0,1.15fr) minmax(380px,1fr)}
.talk-layout.stage.with-app>.pv-col{display:block}
.talk-stage{position:relative;height:calc(100vh - 230px);max-height:900px;min-height:480px;border-radius:20px;overflow:hidden;border:1px solid var(--line-1);background:radial-gradient(120% 90% at 50% 15%,#232a4d 0%,#0d1020 70%)}
.talk-stage>.talk-avatar{position:absolute;inset:0;max-width:none;width:100%}
.talk-stage>.talk-avatar.is-overlay{display:none}
.talk-stage>.talk-avatar .talk-person{width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;background:transparent}
.talk-stage>.talk-avatar>.small,.talk-stage>.talk-avatar .talk-status{position:absolute;top:12px;left:14px;z-index:3}
.talk-stage>.talk-avatar .talk-face{width:min(320px,70%);margin:24px auto 0;display:block}
.presenter.in-stage{position:absolute;left:50%;right:auto;bottom:0;transform:translateX(-50%);z-index:1}
.presenter.in-stage .presenter-status{position:absolute;top:12px;left:50%;transform:translateX(-50%);white-space:nowrap}
.talk-overlay{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;flex-direction:column;gap:10px;padding:56px 16px 16px;background:linear-gradient(to top,rgba(7,10,19,.94) 0%,rgba(7,10,19,.82) 55%,rgba(7,10,19,0) 100%)}
.talk-overlay .talk-thread{max-height:min(34vh,300px);overflow:auto;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28px);mask-image:linear-gradient(to bottom,transparent 0,#000 28px);padding-top:24px}
.talk-overlay .talk-msg,.talk-overlay .talk-hello{background:rgba(14,18,32,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:min(560px,92%)}
.talk-overlay .talk-msg.mine{background:rgba(139,85,247,.28)}
.talk-overlay .talk-composer .in{background:rgba(14,18,32,.8)}
@media(max-width:1100px){.talk-layout.stage.with-app{grid-template-columns:1fr}}
@media(max-width:640px){.talk-stage{height:72vh;min-height:460px}}
.talk-pane:fullscreen .talk-layout.stage>.pv-col,
.talk-pane.is-full .talk-layout.stage>.pv-col{display:block}
.talk-pane:fullscreen .talk-stage,
.talk-pane.is-full .talk-stage{position:absolute;top:16px;right:16px;bottom:16px;width:420px;height:auto;min-height:0}
.hub-hero[hidden]{display:none}
.build-back{margin-top:0}
.see-app{white-space:nowrap;flex:none}
@media(max-width:640px){.talk-pane>h2 .hint{display:none}.talk-overlay .talk-thread{max-height:24vh}.talk-overlay{padding:40px 10px 10px}}
.pv-stage[hidden]{display:none}

/* voice-only conversation: no bubbles or typing, just the mic (a reply being thought about, or a drafted change to accept, still shows) */
.talk-mic-hint{display:none}
.talk-stage.voice-only .talk-thread>*:not(.talk-busy):not(:has(.talk-proposal)){display:none}
.talk-stage.voice-only .talk-thread{-webkit-mask-image:none;mask-image:none;padding-top:0}
.talk-stage.voice-only .talk-overlay{background:linear-gradient(to top,rgba(7,10,19,.7) 0%,rgba(7,10,19,0) 100%);padding-top:24px}
.talk-stage.voice-only .talk-composer{justify-content:center;align-items:center;gap:12px}
.talk-stage.voice-only .talk-composer>textarea,.talk-stage.voice-only .talk-composer>.btn.primary{display:none}
.talk-stage.voice-only .talk-mic{width:72px;height:72px;border-radius:50%;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));border:0;color:#fff;box-shadow:0 12px 30px -10px rgba(169,125,251,.7)}
.talk-stage.voice-only .talk-mic svg{width:28px;height:28px}
.talk-stage.voice-only .talk-mic-hint{display:inline;color:var(--text-2);font-size:13px}
.see-app[aria-pressed="true"]{border-color:var(--accent);color:#fff}
.talk-stage.voice-only .talk-mic.on{background:rgba(244,63,94,.6);box-shadow:0 0 0 6px rgba(244,63,94,.18)}
.talk-stage.voice-only .talk-mic-hint{padding:6px 12px;border-radius:999px;background:rgba(7,10,19,.72);color:#fff}

/* Hosting: VishGen Managed options */
.mh-card{margin:0}
.mh-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:12px}
.mh-opt{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);cursor:pointer}
.mh-opt input{margin-top:3px}
.versions-tab>.card[hidden]{display:none}
.presenter.in-stage .presenter-status{top:38%;left:0;transform:translateX(-100%);white-space:nowrap;padding:6px 12px;border-radius:999px;background:rgba(7,10,19,.7);color:var(--text)}.presenter.in-stage .presenter-status:empty{display:none}
/* Analyst in head mode (FlashHead): a passport-size head and shoulders, cut out of the background, at the top of the stage */
.presenter.in-stage.is-head{top:16px;bottom:auto}
.presenter.is-head .presenter-canvas{filter:drop-shadow(0 14px 32px rgba(0,0,0,.5))}
/* Head-mode stage layout. Wide: like a video call — she stands in a column on the left, the conversation and the
   composer fill the right. Voice only: she is centred above the microphone. Narrow: a compact portrait on top,
   the chat below it (the portrait's height arrives as --head-h from avatarvideo.js). */
.talk-stage.head-stage .presenter.in-stage.is-head{top:0;bottom:0;left:0;width:42%;transform:none;justify-content:center;gap:10px;transition:width .25s ease}
.presenter.is-head .presenter-name{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text);letter-spacing:.01em}
.presenter.is-head .presenter-name::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted);transition:background .2s,box-shadow .2s}
.presenter.is-head.is-live .presenter-name::before{background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.18)}
.talk-stage.head-stage .presenter.in-stage .presenter-status{position:static;transform:none;min-height:0;padding:4px 12px;border-radius:999px;background:rgba(7,10,19,.6);font-size:12px}
.talk-stage.head-stage .talk-overlay{top:0;left:42%;padding:20px 20px 18px;background:rgba(9,12,24,.55);border-left:1px solid var(--line-1);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.talk-stage.head-stage .talk-overlay .talk-thread{flex:1;min-height:0;max-height:none;padding-top:28px}
.talk-stage.head-stage .talk-overlay .talk-msg,.talk-stage.head-stage .talk-overlay .talk-hello{max-width:92%}
.talk-stage.head-stage.voice-only .presenter.in-stage.is-head{width:100%;bottom:150px}
.talk-stage.head-stage.voice-only .talk-overlay{top:auto;left:0;border-left:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding-bottom:28px}
/* narrow stage (a phone, or half the page beside "See my app"): portrait on top, chat below */
.talk-stage.head-stage:not(.head-wide) .presenter.in-stage.is-head{width:100%;bottom:auto;padding-top:14px;gap:6px}
.talk-stage.head-stage:not(.head-wide) .talk-overlay{top:calc(var(--head-h,280px) + 18px);left:0;border-left:0;border-top:1px solid var(--line-1);padding:12px 10px 10px}
.talk-stage.head-stage:not(.head-wide) .talk-overlay .talk-thread{padding-top:8px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px);mask-image:linear-gradient(to bottom,transparent 0,#000 14px)}
.talk-stage.head-stage:not(.head-wide).voice-only .presenter.in-stage.is-head{bottom:150px;justify-content:center}
.talk-stage.head-stage:not(.head-wide).voice-only .talk-overlay{top:auto;border-top:0}
}
/* phone: the title and its buttons stack instead of squeezing into one row; the stage fills the screen so the
   composer and the microphone are never below the fold once it is scrolled into view */
@media(max-width:640px){
  .talk-stage.head-stage{height:calc(100svh - 84px);min-height:440px;max-height:none;scroll-margin-top:72px}
  .talk-pane>h2{flex-wrap:wrap;align-items:flex-start}
  .talk-pane>h2>.row{margin-left:0!important;width:100%;flex-wrap:wrap}
  .talk-pane>h2>.row>.row{margin-left:0!important}
}
/* narrow stage on a computer: she stands large in the centre, the conversation runs full width over her lower half
   in see-through bubbles (no blur) so she stays visible behind it; no name caption here. */
.talk-stage.head-stage.head-overlap .presenter.in-stage.is-head{left:0;right:0;top:0;bottom:auto;width:100%;transform:none;padding-top:18px}
.talk-stage.head-stage.head-overlap .presenter.is-head .presenter-name{display:none}
.talk-stage.head-stage.head-overlap .presenter.in-stage .presenter-status{position:absolute;top:52px;left:18px}
.talk-stage.head-stage.head-overlap .talk-overlay{top:var(--chat-top,40%);left:0;border:0;padding:0 16px 16px;background:linear-gradient(to bottom,rgba(7,10,19,0) 0,rgba(7,10,19,.25) 45%,rgba(7,10,19,.7) 100%);-webkit-backdrop-filter:none;backdrop-filter:none}
.talk-stage.head-stage.head-overlap .talk-overlay .talk-thread{padding-top:36px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 36px);mask-image:linear-gradient(to bottom,transparent 0,#000 36px)}
.talk-stage.head-stage.head-overlap .talk-overlay .talk-msg,.talk-stage.head-stage.head-overlap .talk-overlay .talk-hello{max-width:100%;background:rgba(10,13,26,.55);-webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:0 0 6px rgba(0,0,0,.95),0 1px 2px #000}
.talk-stage.head-stage.head-overlap .talk-overlay .talk-msg.mine{background:rgba(80,50,150,.55)}
.talk-stage.head-stage.head-overlap .talk-overlay .talk-composer .in{background:rgba(14,18,32,.9)}
/* beside "See my app": the analyst stage runs as tall as the app card on the left, not a fixed height */
@media(min-width:1101px){.talk-layout.stage.with-app{align-items:stretch}.talk-layout.stage.with-app>.talk-stage{height:auto;min-height:min(calc(100vh - 230px),900px);max-height:none}}
/* Question cards: tappable answers instead of grey buttons that paste text into the composer */
.qcard{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.qcard-q{padding:12px;border-radius:14px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);transition:border-color .2s,background .2s}
.qcard-q.answered{border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.06)}
.qcard-t{display:flex;align-items:baseline;gap:8px;font-weight:600;font-size:14px;line-height:1.4;margin-bottom:10px;text-shadow:none}
.qcard-n{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12px;background:rgba(169,125,251,.25);color:#e9ddff;transform:translateY(-1px)}
.qcard-q.answered .qcard-n{background:#34d399;color:#06281c}
.qcard-hint{font-weight:400;font-size:12px;color:var(--muted)}
.qcard-opts{display:flex;flex-wrap:wrap;gap:8px}
.qopt{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 14px 8px 10px;border-radius:12px;border:1px solid var(--line-2);background:rgba(14,18,32,.75);color:var(--text);font:inherit;font-size:13px;cursor:pointer;text-align:left;transition:transform .12s,border-color .15s,background .15s,box-shadow .15s}
.qopt:hover:not(:disabled){border-color:rgba(169,125,251,.7);background:rgba(169,125,251,.12)}
.qopt:active:not(:disabled){transform:scale(.97)}
.qopt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qopt-mark{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--muted);display:inline-grid;place-items:center;font-size:11px;line-height:1;transition:all .15s}
.qopt.multi .qopt-mark{border-radius:5px}
.qopt.on{border-color:var(--accent);background:linear-gradient(135deg,rgba(169,125,251,.32),rgba(236,72,153,.22));box-shadow:0 6px 18px -8px rgba(169,125,251,.8)}
.qopt.on .qopt-mark{border-color:transparent;background:#fff;color:#6d28d9}
.qopt.on .qopt-mark::after{content:"✓";font-weight:700}
.qopt:disabled{cursor:default;opacity:.55}.qopt.on:disabled{opacity:1}
.qcard.done .qopt:not(.on){display:none}
.qcard.done .qcard-q{padding:10px 12px}.qcard.done .qcard-t{margin-bottom:6px}
.qother{margin-top:10px;width:100%}
.qcard-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:2px}
.qcard-count{font-size:12px;color:var(--muted)}
.qcard-send:disabled{opacity:.5}
.qcard.ready .qcard-send{animation:qready 1.6s ease-in-out infinite}
@keyframes qready{0%,100%{box-shadow:0 0 0 0 rgba(169,125,251,.55)}50%{box-shadow:0 0 0 7px rgba(169,125,251,0)}}
@media(prefers-reduced-motion:reduce){.qcard.ready .qcard-send{animation:none}.qopt{transition:none}}
/* The reply being spoken: typing dots until her voice starts, then the words appear as she says them */
.talk-msg.typing{min-width:96px}
.talk-msg.typing .talk-text{display:flex;align-items:center;min-height:22px;padding-left:14px}
.talk-msg.typing .talk-text::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--text-2);box-shadow:13px 0 0 var(--text-2),26px 0 0 var(--text-2);animation:tdots 1.2s ease-in-out infinite}
@keyframes tdots{0%,100%{opacity:.35}50%{opacity:1}}
.talk-msg.revealing:not(.typing) .talk-text::after{content:"";display:inline-block;width:2px;height:1em;margin-left:3px;vertical-align:-2px;background:var(--accent);animation:tcaret 1s steps(2) infinite}
@keyframes tcaret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.talk-msg.typing .talk-text::before,.talk-msg.revealing .talk-text::after{animation:none}}
/* Full screen (the "Full screen" button on Make a change). The header shrinks to its buttons floating top-right;
   without the app the analyst stage fills the screen, with it the app keeps the left and the stage takes the right. */
.talk-pane:fullscreen,
.talk-pane.is-full{--fs-stage:clamp(420px,36vw,640px)}
.talk-pane.talk-pane:fullscreen>h2,
.talk-pane.talk-pane.is-full>h2{display:flex;position:absolute;top:14px;right:18px;z-index:30;margin:0} /* beats the older :not(.talk-layout) hide rule */
.talk-pane:fullscreen>h2>span:first-child,.talk-pane:fullscreen>h2>.row>.row,
.talk-pane.is-full>h2>span:first-child,.talk-pane.is-full>h2>.row>.row{display:none}
.talk-pane:fullscreen .talk-layout.stage>.talk-stage,
.talk-pane.is-full .talk-layout.stage>.talk-stage{position:absolute;top:64px;bottom:16px;right:16px;height:auto;min-height:0;max-height:none}
.talk-pane:fullscreen .talk-layout.stage:not(.with-app)>.pv-col,
.talk-pane.is-full .talk-layout.stage:not(.with-app)>.pv-col{display:none}
.talk-pane:fullscreen .talk-layout.stage:not(.with-app)>.talk-stage,
.talk-pane.is-full .talk-layout.stage:not(.with-app)>.talk-stage{left:16px;width:auto}
.talk-pane:fullscreen .talk-layout.stage.with-app>.talk-stage,
.talk-pane.is-full .talk-layout.stage.with-app>.talk-stage{left:auto;width:var(--fs-stage)}
.talk-pane:fullscreen .talk-layout.stage.with-app .pv-bar,
.talk-pane.is-full .talk-layout.stage.with-app .pv-bar{right:calc(var(--fs-stage) + 24px)}
.talk-pane:fullscreen .talk-layout.stage.with-app .pv-body,
.talk-pane.is-full .talk-layout.stage.with-app .pv-body{padding-right:calc(var(--fs-stage) + 24px)}
/* Drafted change: plain overview + "What you'll get" for clients, and a highlighted estimate panel */
.prop-body{margin-top:8px;display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.55}
.prop-intro{white-space:pre-wrap}
.prop-gets-t{font-weight:600;font-size:13px;margin-bottom:4px}
.prop-gets ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
.prop-gets li::marker{color:#34d399}
.prop-est{margin-top:12px;display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;padding:14px 16px;border-radius:14px;border:1px solid rgba(169,125,251,.45);background:linear-gradient(135deg,rgba(169,125,251,.18),rgba(236,72,153,.10))}
.prop-est-main{flex:1 1 160px}
.prop-est-side{flex:0 0 auto;padding-left:14px;border-left:1px solid rgba(255,255,255,.12)}
.prop-est-l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.prop-est-v{font-family:var(--display);font-size:26px;font-weight:700;line-height:1.15;margin-top:2px;background:linear-gradient(120deg,#fff,#e9ddff);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.prop-est-s{font-size:15px;font-weight:600;margin-top:4px}
.prop-est-note{flex-basis:100%;font-size:12px;color:var(--text-2)}
.prop-est-v{text-shadow:none}
/* over her (overlap layout): cards inside a bubble are see-through too, so she stays visible behind them */
.talk-stage.head-stage.head-overlap .talk-proposal{background:rgba(10,13,26,.35)}
.talk-stage.head-stage.head-overlap .prop-est{background:linear-gradient(135deg,rgba(169,125,251,.22),rgba(236,72,153,.12))}
.talk-stage.head-stage.head-overlap .qcard-q{background:rgba(10,13,26,.3)}
.modal.modal-wide{width:min(1100px,92vw);max-width:none;max-height:86vh;overflow:auto}
/* pop-ups and dialogs opened in full screen live inside the full-screen element; the older rule hides its other children */
.talk-pane.talk-pane:fullscreen>.modal-bg,.talk-pane.talk-pane:fullscreen>.dlg-bg,
.talk-pane.talk-pane.is-full>.modal-bg,.talk-pane.talk-pane.is-full>.dlg-bg{display:grid}
/* Build list: changes collected to be built together or one by one */
.build-list{margin:10px 0 14px;padding:14px 16px;border-radius:14px;border:1px solid rgba(169,125,251,.45);background:linear-gradient(135deg,rgba(169,125,251,.14),rgba(236,72,153,.07));display:flex;flex-direction:column;gap:10px}
.bl-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bl-t{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:15px}
.bl-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.bl-items li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(10,13,26,.45);font-size:13px}
.btn.sm.ghost{background:transparent;border-color:transparent;color:var(--text-2)}.btn.sm.ghost:hover{color:var(--text);border-color:var(--line-2)}
tr.ch-part td:first-child{padding-left:26px;position:relative}
tr.ch-part td:first-child::before{content:"";position:absolute;left:12px;top:14px;bottom:14px;width:2px;border-radius:2px;background:rgba(169,125,251,.5)}
.badge.listed::before{background:#a97dfb;color:#a97dfb}.badge.rejected::before{background:var(--muted);color:var(--muted)}
/* Requested changes table */
.talk-requests table{width:100%}
.talk-requests td,.talk-requests th{vertical-align:top}
.ch-cell{min-width:240px}
.ch-t{font-weight:600;line-height:1.35}
.ch-d{font-size:12px;color:var(--text-2);margin-top:3px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.talk-requests td.num{white-space:nowrap;font-variant-numeric:tabular-nums}
.ch-when{white-space:nowrap}
.ch-act{text-align:right;white-space:nowrap}
.ch-btns{display:inline-flex;gap:6px;justify-content:flex-end}
/* estimate in every mode: chips under the headline figure, and on each option of the mode dialog */
.prop-modes{flex-basis:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.prop-mode{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(10,13,26,.35)}
.prop-mode.on{border-color:var(--accent);background:rgba(169,125,251,.16)}
.prop-mode-l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.prop-mode-v{font-weight:600;font-variant-numeric:tabular-nums}
.mode-c{display:block;margin-top:6px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
/* App keys: the secure form in the chat and the Keys for your app list */
.key-card{margin-top:10px;display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:14px;border:1px solid rgba(169,125,251,.4);background:rgba(10,13,26,.45)}
.key-card.done{gap:6px;border-color:rgba(255,255,255,.08)}
.key-row{display:flex;flex-direction:column;gap:4px}
.key-card.done .key-row{flex-direction:row;justify-content:space-between;align-items:center;gap:10px;font-size:13px}
.key-l{font-weight:600;font-size:13px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.key-n{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--text-2)}
.key-h{font-size:12px;color:var(--text-2)}
.key-field{display:flex;gap:6px;align-items:center}
.key-field .in{flex:1;min-width:0;font-family:var(--mono)}
.key-note{display:flex;gap:6px;align-items:flex-start;font-size:12px;color:var(--text-2)}
.key-note svg{flex:none;margin-top:2px}
.key-ok{color:#34d399;font-size:12px;font-weight:600;white-space:nowrap}
.key-miss{color:var(--warn);font-size:12px;font-weight:600;white-space:nowrap}
.key-edit{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.key-edit .key-field{min-width:220px}
.key-add{margin-top:10px}.key-add .key-note{margin-top:8px}.key-add .key-field{min-width:240px}
/* the mode boxes on the estimate panel are a choice */
button.prop-mode{font:inherit;color:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
button.prop-mode:hover{border-color:rgba(169,125,251,.7)}
button.prop-mode:active{transform:scale(.98)}
button.prop-mode:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.prop-mode-d{font-size:11px;line-height:1.35;color:var(--text-2);margin-top:2px}
/* the analyst's charge meter, top-left of the stage next to her */
.talk-meter{position:absolute;top:12px;left:12px;z-index:6;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;max-width:min(260px,60%);padding:6px 12px;border-radius:999px;background:rgba(7,10,19,.62);border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:12px;pointer-events:auto}
.tm-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);align-self:center}
.tm-dot.on{background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.2);animation:tdots 1.2s ease-in-out infinite}
.tm-l{color:var(--text-2)}
.tm-v{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.tm-all{color:var(--text-2);font-size:11px}
.talk-pane:fullscreen .talk-meter,
.talk-pane.is-full .talk-meter{top:14px}

/* "See my app" / "Full screen": tinted outline so they read as live controls, not disabled grey */
.btn.see-app{background-image:none;background:rgba(169,125,251,.14);border-color:rgba(169,125,251,.5);color:#f1eaff}
.btn.see-app:hover{background:rgba(169,125,251,.26);border-color:rgba(169,125,251,.85)}
.btn.see-app svg{color:#c9b2ff}
/* analyst meter: label + two clear figures */
.talk-meter{flex-direction:column;align-items:stretch;gap:4px;border-radius:14px;padding:8px 12px;max-width:none;width:auto}
.tm-head{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.tm-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:12px;color:var(--text-2)}
.tm-row b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
/* pop-ups and dialogs over the analyst stage: solid, so nothing shows through the text */
.modal.modal-wide{background:#10142a;backdrop-filter:none;-webkit-backdrop-filter:none}
.talk-pane:fullscreen .modal-bg,.talk-pane:fullscreen .dlg-bg,
.talk-pane.is-full .modal-bg,.talk-pane.is-full .dlg-bg{background:rgba(3,4,10,.88)}
.talk-pane:fullscreen .modal,.talk-pane:fullscreen .dlg,
.talk-pane.is-full .modal,.talk-pane.is-full .dlg{background:#10142a;backdrop-filter:none;-webkit-backdrop-filter:none}
.modal.modal-wide .build-list{background:linear-gradient(135deg,#231a45,#1c1736)}
.modal.modal-wide .bl-items li{background:#161a33}

/* desktop app preview: the Electron window streamed from the VM (noVNC), 16:10 like the virtual screen */
.pv-desk-wrap{display:flex;flex-direction:column;gap:8px;width:100%;height:100%;min-height:0}
.pv-desk{position:relative;width:100%;aspect-ratio:16/10;max-height:calc(100% - 44px);background:#0b0d12;border-radius:10px;overflow:hidden;border:1px solid var(--line,rgba(255,255,255,.08))}
.pv-desk:fullscreen{aspect-ratio:auto;max-height:none;border-radius:0;border:0}
.pv-desk-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.pv-desk-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.pv-desk-bar .small{margin-right:auto}

/* the work used up its estimate: old vs used vs the new estimate to approve; and the empty-wallet pause */
.est-card{margin-top:8px;padding:12px 14px;border-radius:12px;background:var(--bg2,rgba(255,255,255,.04));border:1px solid var(--line,rgba(255,255,255,.1));display:flex;flex-direction:column;gap:6px;max-width:420px}
.est-head{display:flex;align-items:center;gap:6px;font-weight:700;margin-bottom:2px}
.est-row{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.est-row span{color:var(--muted,#9aa0aa)}
.est-row.est-new{padding-top:6px;border-top:1px dashed var(--line,rgba(255,255,255,.14));font-size:1.05em}
.est-row.est-new b{color:var(--sol,#f5b84a)}
.est-foot{margin-top:6px}
.est-wallet .est-head{color:var(--rose,#ff7a8a)}

/* the build journey (client view of a build in progress) */
.bj{display:flex;flex-direction:column;gap:22px}
.bj-top{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.bj-ring{position:relative;width:128px;height:128px;flex:none}
.bj-ring svg{display:block}
.bj-ring-arc{transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1)}
.bj-ring-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:1px;font-variant-numeric:tabular-nums}
.bj-ring-num b{font-size:34px;font-weight:800;letter-spacing:-0.03em}
.bj-ring-num span{font-size:14px;color:var(--text-2);margin-top:10px}
.bj-head{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.bj-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);font-weight:700}
.bj-now{font-size:20px;font-weight:700;display:flex;align-items:center;gap:10px;line-height:1.3}
.bj-pulse{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(169,125,251,.7);animation:bjpulse 1.6s infinite;flex:none}
@keyframes bjpulse{0%{box-shadow:0 0 0 0 rgba(169,125,251,.6)}70%{box-shadow:0 0 0 10px rgba(169,125,251,0)}100%{box-shadow:0 0 0 0 rgba(169,125,251,0)}}
.bj-facts{color:var(--text);font-variant-numeric:tabular-nums}
.bj-note{font-size:12.5px;color:var(--muted)}
.bj-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative}
.bj-step{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;position:relative;padding:0 4px}
.bj-step:not(:last-child)::after{content:'';position:absolute;top:21px;left:calc(50% + 24px);right:calc(-50% + 24px);height:2px;background:var(--line-2);border-radius:2px}
.bj-step.done:not(:last-child)::after{background:linear-gradient(90deg,var(--good),var(--accent))}
.bj-step-ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line-2);color:var(--muted)}
.bj-step.done .bj-step-ic{background:rgba(76,238,176,.12);border-color:rgba(76,238,176,.45);color:var(--good)}
.bj-step.current .bj-step-ic{background:rgba(169,125,251,.16);border-color:var(--accent);color:#fff;box-shadow:0 0 0 4px rgba(169,125,251,.14),0 0 24px rgba(169,125,251,.35);animation:bjglow 2.4s ease-in-out infinite}
@keyframes bjglow{50%{box-shadow:0 0 0 7px rgba(169,125,251,.08),0 0 30px rgba(169,125,251,.45)}}
.bj-step-l{font-size:12.5px;color:var(--text-2);line-height:1.25}
.bj-step.current .bj-step-l{color:var(--text);font-weight:700}
.bj-step.done .bj-step-l{color:var(--text)}
.bj-chs{display:flex;flex-direction:column;gap:8px}
.bj-ch{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,160px) auto;gap:14px;align-items:center;padding:10px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line-1)}
.bj-ch.waiting{opacity:.75}
.bj-ch-bar{height:6px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.bj-ch-bar span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--good));transition:width .9s cubic-bezier(.2,.8,.2,1)}
@media (max-width:560px){.bj-ch{grid-template-columns:minmax(0,1fr) auto}.bj-ch-bar{grid-column:1/-1;grid-row:2}}
.bj-sub{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);font-weight:700;margin-bottom:10px}
.bj-parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.bj-part{position:relative;overflow:hidden;display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line-1)}
.bj-part-ic{width:36px;height:36px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--muted)}
.bj-part-t{font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.bj-part-s{font-size:12px;color:var(--muted);margin-top:2px}
.bj-part.done .bj-part-ic{background:rgba(76,238,176,.12);color:var(--good)}
.bj-part.done .bj-part-s{color:var(--good)}
.bj-part.building,.bj-part.checking{border-color:rgba(169,125,251,.45);background:rgba(169,125,251,.07)}
.bj-part.building .bj-part-ic,.bj-part.checking .bj-part-ic{background:rgba(169,125,251,.18);color:#fff}
.bj-part.building .bj-part-s,.bj-part.checking .bj-part-s{color:#c9b2ff}
.bj-part.waiting{opacity:.62}
.bj-part.stuck{border-color:rgba(255,194,77,.45)}
.bj-bar{position:absolute;left:0;bottom:0;height:3px;width:40%;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:bjbar 1.8s ease-in-out infinite}
@keyframes bjbar{0%{left:-40%}100%{left:100%}}
@media (max-width:720px){.bj-steps{grid-template-columns:repeat(3,1fr);row-gap:16px}.bj-step:nth-child(3)::after{display:none}.bj-now{font-size:17px}}
@media (prefers-reduced-motion:reduce){.bj-pulse,.bj-step.current .bj-step-ic,.bj-bar{animation:none}.bj-ring-arc{transition:none}}

/* the journey on the analyst's screens: a compact card above the conversation */
.bj-card{margin-bottom:14px}
.bj-card .bj-ring{width:96px;height:96px}.bj-card .bj-ring svg{width:96px;height:96px}.bj-card .bj-ring-num b{font-size:26px}
.bj-card .bj-now{font-size:17px}
.bj-card .bj-parts{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}

/* the conversation grows from the bottom, next to the message box, like a chat app: a short one sits at the bottom,
   a long one scrolls (margin-top:auto rather than justify-content:flex-end, which would break scrolling up) */
.talk-thread>:first-child{margin-top:auto}

/* chat attachments: chips (with a thumbnail for pictures) above the message box and on sent messages */
.att-row{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.att-row.in-msg{margin:8px 0 2px}
.att-chip{display:inline-flex;align-items:center;gap:6px;max-width:240px;padding:4px 8px 4px 6px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line-2);font-size:12.5px;cursor:pointer;color:var(--text)}
.att-chip:hover{border-color:var(--ring)}
.att-chip.has-thumb{padding:3px 8px 3px 3px}
.att-thumb{width:34px;height:34px;object-fit:cover;border-radius:7px;background:var(--surface)}
.att-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.att-x{background:none;border:0;padding:0 0 0 2px;color:var(--muted);cursor:pointer;display:inline-flex}
.att-x:hover{color:var(--text)}
.talk-clip{padding:0 12px;align-self:stretch}

/* test logins (dev server accounts by role) */
.hub-btn{border:0;background:transparent;cursor:pointer;font:inherit}
.dl-tabs{flex-wrap:wrap;margin-bottom:14px}
.dl-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.dl-acct{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line-1)}
.dl-who{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dl-app{font-size:12px;color:var(--muted)}
.dl-field{display:grid;grid-template-columns:92px minmax(0,1fr) auto auto;gap:6px;align-items:center}
.dl-l{font-size:12px;color:var(--text-2)}
.dl-val{font-family:var(--mono,ui-monospace,monospace);font-size:13px;overflow-wrap:anywhere;background:var(--surface-2);padding:4px 8px;border-radius:8px}
@media (max-width:480px){.dl-list{grid-template-columns:1fr}.dl-field{grid-template-columns:minmax(0,1fr) auto auto}.dl-l{grid-column:1/-1}}

/* the project's apps on the dev server (home) */
.apps-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.app-list{display:flex;flex-direction:column;gap:8px}
.app-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line-1)}
.app-ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--accent)}
.app-name{font-weight:650;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.app-state{font-size:12px;font-weight:500;color:var(--muted)}
.app-url{font-size:12.5px;overflow-wrap:anywhere}
.app-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){.app-row{grid-template-columns:auto minmax(0,1fr)}.app-acts{grid-column:1/-1;justify-content:flex-start}}

/* releases: built changes wait in the next version until the client puts it on the dev server */
.rel-card{margin-top:8px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-1)}
.rel-card.done{display:flex;gap:8px;align-items:center;color:var(--good)}
.rel-v{display:flex;gap:6px;align-items:center;font-weight:650}
.rel-list{margin:6px 0 0;padding-left:18px;font-size:13px}
.rel-strip{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 12px;margin-bottom:10px;border-radius:12px;border:1px solid var(--accent);background:rgba(169,125,251,.08)}

/* compact project header: one row - name and status, the key facts, actions */
.hub-hero{padding:16px 20px}
.hub-row{align-items:center;gap:12px 24px}
.hub-row .hub-title{flex:1 1 260px;gap:12px}
.hub-name{margin:0;font-size:20px;line-height:1.2;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-row .plain-status{margin-top:2px;font-size:13px}
.hub-row .hub-facts{margin-top:0;gap:8px 18px;flex:0 1 auto}
.hub-fact{display:inline-flex;flex-direction:column;gap:0;line-height:1.2}
.hub-fact span{font-size:11.5px;color:var(--muted)}
.hub-fact b{font-size:15px;color:var(--text);font-variant-numeric:tabular-nums}
.bj-top{position:relative}
.bj-stop{margin-left:auto;align-self:flex-start}
@media (max-width:640px){.hub-row .hub-facts{flex-basis:100%}}

/* the DEV stage's apps: small icons */
.app-icons{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.app-ico{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid var(--line-1);background:var(--surface-2);color:var(--accent);cursor:pointer;padding:0}
.app-ico:hover{border-color:var(--accent);color:#fff}
.app-ico:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app-panel{display:flex;flex-direction:column;gap:12px}
.app-qr{display:flex;flex-direction:column;align-items:center;gap:6px}
.app-qr img{background:#fff;border-radius:12px;padding:8px}

.stage-pick{width:auto;max-width:100%;min-width:0}

/* DEV card: actions on one line, then test logins (left) and the apps (right) at the bottom */
.stage-line{flex-wrap:wrap !important}
.stage-line .btn{white-space:nowrap}
.stage-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-1)}
.stage-foot .app-icons{justify-content:flex-end}

/* version detail */
.ver-info{width:26px;height:26px}
.vd{display:flex;flex-direction:column;gap:16px}
.vd-sec h3{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2)}
.vd-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}
.vd-built{columns:2;column-gap:28px;display:block}.vd-built li{margin-bottom:6px;break-inside:avoid}
@media (max-width:560px){.vd-built{columns:1}}
.vd-mods{display:flex;flex-direction:column;gap:8px}
.vd-mod{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-1)}
.vd-mod-n{font-weight:650;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vd-tag{font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:999px;border:1px solid}
.vd-new{color:var(--good);border-color:rgba(76,238,176,.45)}
.vd-upd{color:var(--accent);border-color:rgba(169,125,251,.45)}
.vd-rem{color:#f87193;border-color:rgba(248,113,147,.45)}
.vd-files{white-space:pre;overflow-x:auto;max-height:240px;margin-top:6px;padding:8px;border-radius:8px;background:var(--surface)}

/* commit to new version */
.rel-form{display:flex;flex-direction:column;gap:14px}
.rel-field{display:flex;flex-direction:column;gap:6px}
.rel-field>span{font-weight:650}
.vd-notes{white-space:pre-wrap;line-height:1.5;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-1)}

/* modals are solid: the page behind does not show through */
.modal{background:#121629;backdrop-filter:none;-webkit-backdrop-filter:none}

/* a decided change: no mode choice, just how it was built */
.prop-est-done{padding:10px 14px;opacity:.95}
.prop-est-done .prop-est-s{font-size:15px}

/* project home: the building card sits one gap above Stages (no stacked card margins, no empty spacers) */
.ov-stack{display:flex;flex-direction:column;gap:16px}
.ov-stack>.card,.ov-stack>.stat-grid{margin:0}
.ov-stack>div:empty,.ov-stack>[hidden]{display:none}
.ov-stack:not(:has(>:not([hidden]):not(:empty))){display:none}

/* attach files over the full-screen view */
.att-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:200px;padding:24px;border:2px dashed var(--line-2);border-radius:16px;cursor:pointer;text-align:center;color:var(--text)}
.att-drop.on,.att-drop:hover{border-color:var(--accent);background:rgba(169,125,251,.08)}
.att-drop:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* loading skeletons */
.skel{display:block;border-radius:8px;background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.11) 37%,rgba(255,255,255,.05) 63%);background-size:400% 100%;animation:skel 1.3s ease infinite}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.skel-card{gap:10px}
.skel-row{display:flex;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line-1)}

/* the full-screen view kept filling the window while a system file picker is open (browsers leave full screen for it) */
.talk-pane.is-full{position:fixed;inset:0;z-index:1000;width:100vw;height:100vh;margin:0;border-radius:0}
.talk-pane.drop-on{outline:2px dashed #8b5cf6;outline-offset:-6px}

/* the analyst using the app */
.pv-phone{position:relative}
.pv-mark{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;pointer-events:none;z-index:3}
.pv-mark.tap{background:rgba(139,92,246,.45);border:2px solid #fff;box-shadow:0 0 0 4px rgba(139,92,246,.35);animation:vaTap 1s ease-out infinite}
.pv-mark.point{width:56px;height:56px;margin:-28px 0 0 -28px;border:3px solid #8b5cf6;box-shadow:0 0 0 3px #fff,0 0 24px rgba(139,92,246,.7);animation:vaRing 1.6s ease-in-out infinite}
@keyframes vaTap{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.6);opacity:.15}}
@keyframes vaRing{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.pv-mark-cap{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);max-width:88%;padding:6px 12px;border-radius:999px;background:rgba(16,20,42,.9);color:#fff;font-size:12px;line-height:1.35;text-align:center;pointer-events:none;z-index:3;box-shadow:0 6px 20px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.pv-mark{animation:none!important}}
.op-card{margin-top:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--line-2);background:rgba(139,92,246,.06)}
.op-head{display:flex;align-items:center;gap:8px}.op-head .btn{margin-left:auto}
.op-live{width:8px;height:8px;border-radius:50%;background:var(--muted,#888)}.op-card.live .op-live{background:#8b5cf6;box-shadow:0 0 0 0 rgba(139,92,246,.6);animation:vaPulse 1.2s infinite}
@keyframes vaPulse{70%{box-shadow:0 0 0 8px rgba(139,92,246,0)}100%{box-shadow:0 0 0 0 rgba(139,92,246,0)}}
.op-goal{font-size:12px;opacity:.75;margin-top:4px}
.op-steps{margin:6px 0 0;padding-left:20px;font-size:13px;display:flex;flex-direction:column;gap:2px}
.op-point{display:flex;gap:10px;align-items:flex-start;margin-top:8px}
.op-thumb{width:96px;border-radius:10px;border:1px solid var(--line-2);cursor:zoom-in}
.op-point-side{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.op-check{margin-top:8px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.op-verdict{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}
.op-verdict.pass{background:rgba(34,197,94,.15);color:#16a34a}.op-verdict.fail{background:rgba(239,68,68,.15);color:#dc2626}.op-verdict.unsure{background:rgba(234,179,8,.16);color:#b45309}
.op-shots{display:flex;gap:8px;overflow-x:auto;padding:6px 0;max-width:100%}
.op-shots figure{margin:0;flex:0 0 120px;display:flex;flex-direction:column;gap:4px}
.op-shots img{width:120px;border-radius:8px;border:1px solid var(--line-2)}
.op-shots figcaption{font-size:11px;opacity:.8}
.op-try{margin-top:8px}
.op-view{position:relative;margin-top:8px;aspect-ratio:16/10;border-radius:10px;overflow:hidden;border:1px solid var(--line-2);background:#000}
.op-view iframe{width:100%;height:100%;border:0;display:block}
.op-end{display:inline-block;margin-top:8px}.op-end img{max-width:220px;max-height:220px;border-radius:8px;border:1px solid var(--line-2)}
.op-card [hidden],.pv-mark[hidden],.pv-mark-cap[hidden],.op-point [hidden]{display:none!important}
.talk-msg.sending{opacity:.75}
.bj-spin{width:40px;height:40px;flex:0 0 40px;border-radius:50%;border:4px solid var(--line-2);border-top-color:#8b5cf6;animation:bjspin 1s linear infinite}
@keyframes bjspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bj-spin{animation:none}}
.pv-phone,.pv-desk{position:relative}
.sess-warn{position:absolute;inset:auto 12px 50% 12px;transform:translateY(50%);z-index:5;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;padding:14px 16px;border-radius:14px;background:rgba(16,20,42,.94);color:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.sess-warn[hidden]{display:none!important}
.sess-warn .small{opacity:.85;max-width:320px}
.sess-cost{text-align:center;margin-top:6px;font-variant-numeric:tabular-nums}
.pv-boot{position:absolute;inset:10px;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(120% 80% at 50% 35%,#1b2140,#07080f 70%);color:#fff;z-index:2;text-align:center;padding:16px}
.pv-boot[hidden]{display:none!important}
.pv-boot-phone{position:relative;width:64px;height:64px;display:grid;place-items:center;border-radius:20px;background:rgba(139,92,246,.18);animation:vaBoot 1.6s ease-in-out infinite}
.pv-boot-ring{position:absolute;inset:-12px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:#8b5cf6;animation:bjspin 1.1s linear infinite}
.pv-boot-t{font-weight:600;font-size:14px}
.pv-boot-s{font-size:12px;opacity:.7;font-variant-numeric:tabular-nums;min-height:1em}
@keyframes vaBoot{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.pv-boot-phone,.pv-boot-ring{animation:none}}
/* actions beside the phone and desktop previews: sign in as a test account, or say what to do in the app */
.aa-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;margin:8px auto 0;max-width:560px}
.aa-bar .aa-acc{width:auto;max-width:220px;padding:4px 8px;font-size:12px}
.aa-bar .aa-goal{flex:1 1 200px;min-width:0;padding:4px 8px;font-size:12px}
.aa-status{flex-basis:100%;display:flex;gap:8px;align-items:center;justify-content:center;min-height:18px}
.aa-stat{text-align:center;overflow-wrap:anywhere}
.aa-bar.live .aa-stat{color:var(--text)}
.pv-desk-wrap .aa-bar{max-width:none}
/* the phone with its controls in a panel on its right (below it when there is no room) */
.pv-phone-wrap.with-side{flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:16px}
.pv-side{display:flex;flex-direction:column;gap:14px;width:250px;max-width:100%}
.pv-side-sec{display:flex;flex-direction:column;gap:6px}
.pv-side-t{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pv-side-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pv-side-row .in{flex:1 1 120px;min-width:0;padding:5px 8px;font-size:12.5px}
.pv-side-row select.in{flex:0 1 auto;width:auto}
.pv-side .sess-cost{text-align:left;margin-top:0}
.aa-bar.aa-side{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:0;max-width:none}
.aa-bar.aa-side .aa-acc{max-width:none;width:100%;padding:5px 8px;font-size:12.5px}
.aa-bar.aa-side .aa-goal{flex:1 1 120px}
.aa-bar.aa-side .aa-status{justify-content:flex-start}
.aa-bar.aa-side .aa-stat{text-align:left}
/* the phone's own buttons under its screen: Back, Home, Recents */
.pv-phone-col{display:flex;flex-direction:column;align-items:stretch;gap:0;max-width:100%}
.pv-phone-col .pv-phone{border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:6px;border-bottom:0}
.pv-nav{display:flex;justify-content:space-around;align-items:center;height:40px;background:#0b0d16;border:1px solid rgba(255,255,255,.12);border-top:0;border-radius:0 0 28px 28px;box-shadow:0 14px 40px rgba(0,0,0,.45);padding:0 18px 4px}
.pv-nav-b{all:unset;box-sizing:border-box;width:52px;height:30px;display:grid;place-items:center;border-radius:15px;cursor:pointer}
.pv-nav-b:hover{background:rgba(255,255,255,.08)}
.pv-nav-b:active{background:rgba(255,255,255,.16)}
.pv-nav-b:focus-visible{outline:2px solid rgba(169,125,251,.7)}
.pv-nav-i{display:block;width:14px;height:14px;box-sizing:border-box;border:2px solid #d9dbe4}
.pv-nav-i.home{border-radius:50%}
.pv-nav-i.recents{border-radius:3px;width:13px;height:13px}
.pv-nav-i.back{border:0;width:13px;height:15px;background:#d9dbe4;clip-path:polygon(100% 0,0 50%,100% 100%,100% 82%,26% 50%,100% 18%)}
/* the running phone or desktop session: time and cost so far, highlighted, with Stop beside them */
.sess-card{display:flex;align-items:center;gap:10px;padding:9px 10px 9px 12px;border-radius:12px;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.4);font-variant-numeric:tabular-nums;text-align:left;margin-top:0}
.sess-card[data-state="stopped"]{background:var(--surface-2);border-color:var(--line-2)}
.sess-dot{width:9px;height:9px;border-radius:50%;flex:none;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:sessPulse 1.8s infinite}
.sess-card[data-state="starting"] .sess-dot{background:#f59e0b;box-shadow:none;animation:none}
.sess-card[data-state="stopped"] .sess-dot{background:var(--muted);box-shadow:none;animation:none}
@keyframes sessPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@media (prefers-reduced-motion:reduce){.sess-dot{animation:none}}
.sess-text{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.sess-what{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.sess-nums{display:flex;gap:6px;align-items:baseline;font-size:15px;color:var(--text)}
.sess-sep{color:var(--muted)}
.sess-stop{flex:none;border-color:rgba(239,68,68,.5);color:#f87171}
.sess-stop:hover{background:rgba(239,68,68,.12)}
.sess-stop.armed{background:#dc2626;border-color:#dc2626;color:#fff}
.pv-desk-bar .sess-card{margin-right:auto}
/* one purple outline around the whole phone, screen and buttons together, always shown */
.pv-phone-col{border:1px solid rgba(139,92,246,.7);border-radius:28px;background:#0b0d16;box-shadow:0 14px 40px rgba(0,0,0,.45);overflow:hidden}
.pv-phone-col .pv-phone,.pv-phone-col .pv-phone:focus{border:0;box-shadow:none;background:transparent}
.pv-phone-col .pv-nav{border:0;box-shadow:none;background:transparent}
/* a hidden element stays hidden whatever its class sets display to (buttons, panels) */
[hidden]{display:none!important}
/* instructions given before, as buttons under the "Do in the app" box */
.aa-hist{display:flex;flex-wrap:wrap;gap:6px}
.aa-hist[hidden]{display:none}
.aa-chip{all:unset;box-sizing:border-box;max-width:100%;padding:4px 10px;border-radius:999px;font-size:12px;line-height:1.35;background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aa-chip:hover{border-color:rgba(139,92,246,.6)}
.aa-chip:focus-visible{outline:2px solid rgba(169,125,251,.7)}
.aa-chip:disabled{opacity:.5;cursor:default}
/* the project's apps as tabs above the preview */
.pv-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);flex-wrap:wrap;max-width:100%}
.pv-tab{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:9px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.pv-tab:hover{color:var(--text);background:rgba(255,255,255,.05)}
.pv-tab.on{color:#fff;background:linear-gradient(135deg,rgba(139,92,246,.95),rgba(109,64,226,.95));box-shadow:0 4px 14px rgba(139,92,246,.35)}
.pv-tab:focus-visible{outline:2px solid rgba(169,125,251,.8);outline-offset:1px}
/* website: pick a test account, then copy its login and password into the site */
.pv-webacc{display:block}
.pv-webacc[hidden]{display:none}
.pv-webacc .pv-acc{width:auto;max-width:220px;padding:6px 8px;font-size:12.5px}
.pv-creds{display:flex;gap:6px;flex-wrap:wrap}
.pv-cred{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line-2);font-size:12.5px;cursor:pointer;max-width:240px}
.pv-cred:hover{border-color:rgba(139,92,246,.6)}
.pv-cred:focus-visible{outline:2px solid rgba(169,125,251,.7)}
.pv-cred-l{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pv-cred-v{font-family:var(--mono);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-cred.done{border-color:#22c55e}
.pv-cred.done .pv-cred-l::after{content:" · copied";color:#22c55e}
/* the changes page while the conversation loads */
.talk-loading{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--muted);font-size:14px}
.talk-loading-ring{width:42px;height:42px;border-radius:50%;border:3px solid rgba(139,92,246,.2);border-top-color:rgba(139,92,246,.9);animation:talkSpin .9s linear infinite}
@keyframes talkSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.talk-loading-ring{animation:none}}
/* the website's actions, under the app tabs */
.aa-bar.aa-web{display:flex;flex-direction:column;align-items:stretch;gap:8px;max-width:none;margin:0;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2)}
.aa-web-main{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.aa-web-main .aa-acc{max-width:260px;padding:5px 8px;font-size:12.5px}
.aa-web-do{flex:1 1 280px}
.aa-web-foot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.aa-web-foot .aa-status{flex-basis:auto;justify-content:flex-start;flex:1 1 200px}
.aa-web-foot .aa-stat{text-align:left}
.aa-web .aa-charges{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.aa-web .aa-charges .pv-side-t{margin:0}
/* what the app has cost since it was opened: running time and the AI behind the commands */
.aa-charges{display:flex;flex-direction:column;gap:4px;font-variant-numeric:tabular-nums}
.aa-ch-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--text-2)}
.aa-ch-row b{color:var(--text);font-weight:600}
.aa-ch-total{border-top:1px solid var(--line-2);padding-top:4px;margin-top:2px}
.aa-ch-total span,.aa-ch-total b{color:var(--text);font-weight:600}
.aa-web .aa-ch-total{border-top:0;padding-top:0;margin-top:0}
/* the website and the desktop app framed like the phone: the same purple outline, always shown */
.pv-frame{border:1px solid rgba(139,92,246,.7);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.45);box-sizing:border-box}
.pv-desk{border:1px solid rgba(139,92,246,.7);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.pv-body+.pv-webacc{margin-top:10px}
/* the website's actions: compact, charges on one line */
.aa-web .aa-charges{flex-direction:row;gap:14px;align-items:baseline}
.aa-web .aa-ch-row{gap:6px;justify-content:flex-start}
.aa-web .aa-ch-row b{font-weight:600}
.aa-web-foot{min-height:0}
.aa-web .aa-status:empty,.aa-web .aa-status:has(.aa-stat:empty):has(.sess-stop[hidden]){min-height:0}
.aa-bar.aa-web{gap:6px;padding:8px 10px}
.aa-web .pv-side-row{flex-wrap:nowrap}
.aa-web-main{flex-wrap:nowrap}
.aa-web-main>.pv-side-row:first-child{flex:none}
.aa-web-foot{flex-wrap:nowrap}
.aa-web-foot .aa-status{flex:1 1 auto;min-width:0}
.aa-web .aa-charges{flex:none;white-space:nowrap}
@media(max-width:900px){.aa-web-main,.aa-web-foot{flex-wrap:wrap}}
/* what the app shown has cost since it was opened, at the right of the app tabs */
.pv-cost{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--muted);cursor:default;white-space:nowrap}
.pv-cost[hidden]{display:none}
.pv-cost svg{color:#c9a8ff;flex:none}
.pv-cost-l{font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.pv-cost-v{font-size:15px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;padding-left:10px;border-left:1px solid var(--line-2)}
@media(max-width:700px){.pv-cost-l{display:none}.pv-cost-v{padding-left:0;border-left:0}}
/* full screen: the website, then its controls under it in the same column (never over it) */
.talk-pane:fullscreen .pv-col:has(>.pv-webacc:not([hidden])),
.talk-pane.is-full .pv-col:has(>.pv-webacc:not([hidden])){display:flex!important;flex-direction:column;height:100vh}
.talk-pane:fullscreen .pv-col:has(>.pv-webacc:not([hidden])) .pv-body,
.talk-pane.is-full .pv-col:has(>.pv-webacc:not([hidden])) .pv-body{flex:1 1 auto;height:auto;min-height:0;padding-bottom:10px}
.talk-pane:fullscreen .pv-frame,
.talk-pane.is-full .pv-frame{height:100%}
.talk-pane:fullscreen .pv-webacc,
.talk-pane.is-full .pv-webacc{flex:none;margin:0 440px 14px 18px}
.talk-pane:fullscreen .talk-layout.stage.with-app .pv-webacc,
.talk-pane.is-full .talk-layout.stage.with-app .pv-webacc{margin-right:calc(var(--fs-stage) + 24px)}
.talk-pane:fullscreen .pv-webacc .aa-bar.aa-web,
.talk-pane.is-full .pv-webacc .aa-bar.aa-web{background:rgba(16,20,42,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
/* website width: mobile, tablet or desktop */
.pv-vp{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line-2)}
.pv-vp[hidden]{display:none}
.pv-vp-b{all:unset;box-sizing:border-box;display:grid;place-items:center;width:32px;height:28px;border-radius:7px;color:var(--muted);cursor:pointer}
.pv-vp-b:hover{color:var(--text);background:rgba(255,255,255,.06)}
.pv-vp-b.on{color:#fff;background:rgba(139,92,246,.85)}
.pv-vp-b:focus-visible{outline:2px solid rgba(169,125,251,.8)}
.pv-body.vp-narrow{display:flex;justify-content:center;background:transparent}
.pv-frame.vp-narrow{max-width:100%;margin:0 auto}
/* a phone that is off: Start in the middle of it */
.pv-off{z-index:3;gap:12px}
.pv-off .pv-boot-s{max-width:220px;line-height:1.45}
.pv-start{margin-top:4px}
/* the phone's side panel: each part a quiet card, controls one height, inputs joined to their button */
.pv-side{width:280px;gap:10px}
.pv-side .aa-bar.aa-side{display:contents}
.pv-side-sec{gap:8px;padding:12px;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid var(--line-2)}
.pv-side-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pv-side-t{display:flex;align-items:center;gap:6px}
.pv-side-t svg{opacity:.8}
.pv-side-note:empty{display:none}
.pv-side .in,.pv-side .btn{height:34px;box-sizing:border-box}
.pv-side .btn:not(.primary):not(.sess-stop){background:transparent;border:1px solid var(--line-2);color:var(--text);box-shadow:none}
.pv-side .btn:not(.primary):not(.sess-stop):hover:not(:disabled){border-color:rgba(139,92,246,.6);background:rgba(139,92,246,.08)}
.pv-side .pv-side-row{flex-wrap:nowrap}
.pv-side .pv-side-row select.in{flex:1 1 auto;min-width:0;width:auto}
.pv-ig{display:flex;align-items:stretch;border:1px solid var(--line-2);border-radius:10px;background:rgba(0,0,0,.18);overflow:hidden}
.pv-ig:focus-within{border-color:rgba(169,125,251,.55);box-shadow:0 0 0 3px rgba(139,85,247,.12)}
.pv-ig .in{flex:1;min-width:0;border:0;border-radius:0;background:transparent;box-shadow:none;padding:0 10px;font-size:12.5px}
.pv-ig .in:focus{box-shadow:none;background:transparent}
.pv-side .pv-ig .btn,.pv-ig .btn{border:0!important;border-radius:0;border-left:1px solid var(--line-2)!important;height:34px;padding:0 14px}
.pv-ig .btn.primary{border-left:0!important}
.pv-side .aa-hist{gap:5px}
.pv-side .aa-chip{font-size:11.5px;padding:3px 9px}
.pv-side .aa-status:has(.aa-stat:empty):has(.btn[hidden]){display:none}
.pv-side .sess-card{margin:0}
/* the website's controls: the same cards as the phone's panel, side by side under the website */
.aa-bar.aa-web{display:grid;grid-template-columns:minmax(220px,300px) minmax(260px,1fr) auto;align-items:stretch;gap:10px;padding:0;margin:0;background:transparent;border:0;border-radius:0}
.aa-web .pv-side-sec{display:flex;flex-direction:column;min-width:0}
.aa-web .in,.aa-web .btn{height:34px;box-sizing:border-box}
.aa-web .btn:not(.primary){background:transparent;border:1px solid var(--line-2);color:var(--text);box-shadow:none}
.aa-web .btn:not(.primary):hover:not(:disabled){border-color:rgba(139,92,246,.6);background:rgba(139,92,246,.08)}
.aa-web .pv-side-row{flex-wrap:nowrap}
.aa-web .pv-side-row select.in{flex:1 1 auto;min-width:0;width:auto;max-width:none}
.aa-web .aa-status{justify-content:flex-start}
.aa-web .aa-status:has(.aa-stat:empty):has(.btn[hidden]){display:none}
.aa-web .aa-chip{font-size:11.5px;padding:3px 9px}
@media(max-width:1000px){.aa-bar.aa-web{grid-template-columns:1fr}}
.talk-pane:fullscreen .pv-webacc .aa-bar.aa-web,
.talk-pane.is-full .pv-webacc .aa-bar.aa-web{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.talk-pane:fullscreen .pv-webacc .pv-side-sec,
.talk-pane.is-full .pv-webacc .pv-side-sec{background:rgba(16,20,42,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.pv-two>.btn{flex:1 1 0;justify-content:center}
/* mark on the screen: draw on a picture of it, then add it to the message */
.mk-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:rgba(5,6,14,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:16px}
.mk-box{display:flex;flex-direction:column;gap:12px;max-width:min(1100px,100%);max-height:100%;padding:16px;border-radius:18px;background:var(--surface,#14172a);border:1px solid rgba(139,92,246,.45);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.mk-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mk-head .small{flex:1 1 200px}
.mk-tools{display:inline-flex;gap:4px;padding:3px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line-2)}
.mk-tool{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:7px;font-size:12.5px;color:var(--muted);cursor:pointer}
.mk-tool:hover{color:var(--text)}
.mk-tool.on{color:#fff;background:rgba(139,92,246,.85)}
.mk-tool:focus-visible{outline:2px solid rgba(169,125,251,.8)}
.mk-stage{min-height:0;overflow:auto;display:grid;place-items:center}
.mk-canvas{display:block;max-width:100%;max-height:calc(100vh - 190px);border-radius:10px;cursor:crosshair;touch-action:none;background:#000}
.mk-foot{display:flex;justify-content:flex-end;gap:8px}
/* the website's cards: Account and Show the analyst on top, Do in the site across the full width below */
.aa-bar.aa-web{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"acc cap" "do do"}
.aa-web .aw-acc{grid-area:acc}.aa-web .aw-cap{grid-area:cap}.aa-web .aw-do{grid-area:do}
.aa-web .btn,.pv-side .btn{white-space:nowrap;flex:none}
.pv-ig .in{min-width:120px}
.aa-web .aw-cap .pv-side-t{white-space:nowrap}
@media(max-width:1000px){.aa-bar.aa-web{grid-template-columns:1fr;grid-template-areas:"acc" "cap" "do"}}
/* drawing on the live screen while Mark on screen is on */
.mk-live{position:absolute;z-index:6;cursor:crosshair;touch-action:none;border-radius:inherit}
.pv-body{position:relative}
.btn.mk-toggle.on{border-color:#ff2d55!important;background:rgba(255,45,85,.14)!important;color:#fff!important;box-shadow:0 0 0 3px rgba(255,45,85,.15)}
.ch-mode-on{color:var(--text);font-weight:600}
/* a phone that is not ready yet: the same phone, its screen saying so */
.pv-phone-idle{cursor:default}
.pv-phone-idle .pv-boot{inset:10px}
.pv-phone-col .pv-nav-b[aria-hidden]{cursor:default;opacity:.55}
.ch-modes{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.ch-modes .ch-mode-on{color:var(--text);font-weight:600}
/* side sections stack vertically: the status line takes its own height, not 100% of the section (it squashed the input) */
.pv-side-sec .aa-status{flex-basis:auto}
.pv-side-sec>*{flex-shrink:0}
/* the shown app's toolbar in the preview's top bar: account · do in the app · show the analyst */
.pv-tools{flex:1 1 360px;min-width:0;display:flex}
.pv-tools:empty{display:none}
.aa-bar.aa-top{position:relative;display:flex;align-items:center;gap:6px;flex:1;min-width:0;max-width:none;margin:0;height:44px;box-sizing:border-box;padding:4px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2)}
.aa-accbtn{flex:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--muted);display:grid;place-items:center;cursor:pointer;font:inherit}
.aa-accbtn:hover:not(:disabled){color:var(--text);border-color:rgba(169,125,251,.55)}
.aa-accbtn:disabled{opacity:.5;cursor:default}
.aa-accbtn.on{background:linear-gradient(135deg,#8b5cf6,#ec4899);border-color:transparent;color:#fff}
.aa-acc-ini{font-size:12px;font-weight:700;letter-spacing:.02em}
.aa-do{position:relative;flex:1;min-width:0}
.aa-top .pv-ig{height:34px;border-radius:9px}
.aa-top .pv-ig .in{min-width:0}
.aa-top .pv-ig .btn{height:34px}
.aa-do-ic{display:grid;place-items:center;padding-left:10px;color:#c9a8ff;flex:none}
.aa-pop{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:30;flex-direction:column;gap:8px;padding:10px 12px;border-radius:12px;background:#12172a;border:1px solid var(--line-2);box-shadow:0 18px 40px -12px rgba(0,0,0,.75)}
.aa-do:focus-within .aa-pop:has(.aa-hist:not([hidden])),.aa-do.show .aa-pop{display:flex}
.aa-pop .aa-status{flex-basis:auto;justify-content:flex-start;min-height:0}
.aa-pop .aa-status:has(.aa-stat:empty):has(.btn[hidden]){display:none}
.aa-cap{display:flex;gap:4px;flex:none}
.aa-cap .btn{height:34px}
.aa-ic{width:34px;padding:0!important;display:inline-grid;place-items:center}
.aa-ic.mk-toggle.on{width:auto;padding:0 10px!important;display:inline-flex;gap:6px;align-items:center}
.aa-capmsg{position:absolute;right:4px;top:calc(100% + 10px);z-index:30;pointer-events:none}
.aa-capmsg .pv-side-note{display:block;padding:6px 10px;border-radius:10px;background:#12172a;border:1px solid var(--line-2);white-space:nowrap}
.aa-capmsg .pv-side-note:empty{display:none}
/* the accounts modal */
.acc-list{display:flex;flex-direction:column;gap:8px;width:min(440px,80vw)}
.acc-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--text);text-align:left;font:inherit;cursor:pointer}
.acc-row:hover:not(:disabled){border-color:rgba(169,125,251,.55);background:rgba(139,92,246,.08)}
.acc-row.on{border-color:rgba(139,92,246,.6);background:rgba(139,92,246,.12);cursor:default}
.acc-ini{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-weight:700;font-size:13px}
.acc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.acc-txt b{font-size:14px}
.acc-txt span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-go{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--muted)}
.acc-row:hover .acc-go{color:var(--text)}
.acc-now{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#86f7cb}
.acc-foot{display:flex;justify-content:flex-end;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2)}
.modal:has(.acc-list){width:auto;max-width:min(520px,92vw)}
.aa-cap .btn.aa-ic{background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--muted);border-radius:9px}
.aa-cap .btn.aa-ic:hover{color:var(--text);border-color:rgba(169,125,251,.55)}
.aa-cap .btn.aa-ic.on{background:rgba(139,92,246,.18);border-color:rgba(169,125,251,.7);color:var(--text)}
/* a narrow preview: the cost keeps only its amount so everything stays on one line */
.pv-col{container-type:inline-size}
.pv-tools{flex-basis:220px}
@container (max-width:900px){.pv-cost-l{display:none}.pv-cost-v{padding-left:0;border-left:0}.pv-cost{padding:0 12px}}
.aa-cap .btn:not(.aa-ic){background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--text);border-radius:9px}
/* the preview is one card: the tools bar is its header, the app fills the rest (full screen keeps its own layout) */
.talk-pane:not(.is-full):not(:fullscreen) .pv-col{gap:0;border:1px solid var(--line-2);border-radius:16px;background:var(--surface-2)}
.talk-pane:not(.is-full):not(:fullscreen) .pv-bar{padding:8px;border-bottom:1px solid var(--line-2)}
.talk-pane:not(.is-full):not(:fullscreen) .pv-body{border:0;border-radius:0 0 15px 15px}
.talk-pane:not(.is-full):not(:fullscreen) .pv-bar .pv-tabs,.talk-pane:not(.is-full):not(:fullscreen) .pv-bar .pv-vp,.talk-pane:not(.is-full):not(:fullscreen) .pv-bar .aa-bar.aa-top,.talk-pane:not(.is-full):not(:fullscreen) .pv-bar .pv-cost{background:rgba(255,255,255,.025)}

/* the project's domains */
.dom-list{display:flex;flex-direction:column;gap:10px}
.dom-row{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.02)}
.dom-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dom-name{font-weight:600;color:var(--text)}
.dom-st{font-size:12px;color:var(--muted)}.dom-st.live{color:#86f7cb}.dom-st.failed{color:#ff8fa3}
.dom-recs{display:flex;flex-direction:column;gap:6px;overflow-x:auto}
.dom-table{border-collapse:collapse;font-size:12.5px;min-width:520px}.dom-table th,.dom-table td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line-2);vertical-align:top}
.dom-table code{font-size:12px;user-select:all}

/* Organization → Providers: one panel per kind of provider */
.prov-page{display:flex;flex-direction:column;gap:18px}
.prov-sec{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:18px;border:1px solid var(--line-2);background:rgba(255,255,255,.015)}
.prov-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.prov-title{flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px}
.prov-title h3{margin:0;font-size:16px;display:flex;align-items:center;gap:8px}
.prov-count{font-size:11.5px;font-weight:600;min-width:22px;height:20px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;background:rgba(255,255,255,.06);color:var(--muted)}
.prov-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.prov-empty{padding:18px;border-radius:14px;border:1px dashed var(--line-2);text-align:center;font-size:13px;color:var(--muted)}
.prov-sec .mh-card{padding:0;border:0;background:none}
.prov-sec .mh-card>.row{display:none}.prov-sec .mh-card>.row:has(.lvl-chip,.btn){display:flex;margin-bottom:8px}
.prov-sec .mh-opts{margin-top:0}
.prov-sec .mh-opt{background:rgba(139,92,246,.07);border-color:rgba(169,125,251,.35)}
.prov-sec .org-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
@media(max-width:560px){.prov-actions{margin-left:0;width:100%}.prov-sec{padding:14px}}

/* a provider's how-to, in its form */
.prov-steps{margin:0 0 10px;padding:10px 12px;border-radius:12px;border:1px solid rgba(169,125,251,.3);background:rgba(139,92,246,.06);font-size:12.5px}
.prov-steps summary{cursor:pointer;font-weight:600;display:flex;align-items:center;gap:6px;list-style:none}
.prov-steps summary::-webkit-details-marker{display:none}
.prov-steps ol{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--text-2,var(--text));line-height:1.45}
.prov-link{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;font-weight:600;margin-left:6px}

/* Buy a domain */
.dom-modal{width:min(640px,94vw)}
.dom-q{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border-radius:14px;border:1px solid var(--line-2);background:rgba(0,0,0,.2)}
.dom-q:focus-within{border-color:rgba(169,125,251,.6);box-shadow:0 0 0 3px rgba(139,92,246,.14)}
.dom-q svg{color:var(--muted);flex:none}
.dom-q-in{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font:inherit;font-size:15px;padding:8px 0;outline:none}
.dom-q .btn{height:36px;padding:0 14px}
.dom-results{display:flex;flex-direction:column;gap:6px;margin-top:12px;max-height:min(52vh,460px);overflow:auto}
.dom-results:empty{display:none}
.dom-group{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:8px 2px 2px}
.dom-group:first-child{margin-top:0}
.dom-offer{display:grid;grid-template-columns:minmax(0,1fr) auto 64px;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.02)}
.dom-offer:hover{border-color:rgba(169,125,251,.45)}
.dom-offer.off{opacity:.55}.dom-offer.off:hover{border-color:var(--line-2)}
.dom-o-name{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dom-o-name span{color:var(--muted)}
.dom-o-price{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}.dom-o-price b{font-size:14px}.dom-o-price span{font-size:11.5px;color:var(--muted)}
.dom-o-why{font-size:12px!important}
.dom-offer .btn{justify-self:end}
.dom-wait{padding:16px;text-align:center;font-size:13px;color:var(--muted)}
@media(max-width:520px){.dom-offer{grid-template-columns:minmax(0,1fr) auto}.dom-offer .btn,.dom-o-gap{grid-column:1/-1;justify-self:stretch}}

/* provider form: fields left, what to do right */
.prov-modal{width:min(1040px,95vw)}
.prov-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start}
@media(max-width:860px){.prov-layout{grid-template-columns:1fr}}
.prov-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.prov-main .f{margin:0}
.prov-side{position:sticky;top:0}
.prov-side .prov-steps{margin:0}
.prov-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:6px}
.prov-tile{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--text);font:inherit;font-size:13px;cursor:pointer;text-align:left}
.prov-tile svg{color:var(--muted);flex:none}
.prov-tile:hover:not(:disabled){border-color:rgba(169,125,251,.5)}
.prov-tile.on{border-color:rgba(169,125,251,.8);background:rgba(139,92,246,.14)}.prov-tile.on svg{color:#c9a8ff}
.prov-tile:disabled{opacity:.4;cursor:default}
.prov-form{display:flex;flex-direction:column;gap:14px}
.prov-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.prov-grid .f{margin:0;min-width:0}.prov-grid .wide{grid-column:1/-1}
@media(max-width:560px){.prov-grid{grid-template-columns:1fr}}
.prov-cred{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;border:1px solid var(--line-2);background:rgba(0,0,0,.14)}
.prov-cred-t{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.prov-cred-t span{text-transform:none;letter-spacing:0;font-weight:400;margin-left:4px}
.prov-adv summary{cursor:pointer;font-size:12.5px;color:var(--muted)}.prov-adv[open] summary{margin-bottom:10px}
.prov-fixed{padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.04);font-weight:600}
.prov-share{display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding-top:4px}.prov-share input{margin-top:3px}
.prov-os{display:inline-flex;width:max-content;max-width:100%}
.in.mono{font-family:var(--mono);font-size:12px}
.prov-soon{margin-left:auto;font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:1px 6px}
.prov-tiles{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}

/* DNS records for a domain */
.dns-box{display:flex;flex-direction:column;gap:14px}
.dns-intro{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:rgba(139,92,246,.08);border:1px solid rgba(169,125,251,.28)}
.dns-intro-ic{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(139,92,246,.18);color:#d4c2ff;flex:none}
.dns-intro b{font-size:14.5px}
.dns-intro p{margin:4px 0 0;font-size:13px;line-height:1.55;color:var(--text-2,var(--text))}
.dns-recs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.dns-rec{display:flex;flex-direction:column;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid var(--line-2);background:rgba(255,255,255,.025)}
.dns-rec.opt{border-style:dashed;background:transparent}
.dns-rec-h{display:flex;align-items:center;gap:12px}
.dns-n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(45,212,191,.16);color:#7ee7d6;font-weight:700;font-size:12.5px;flex:none}
.dns-rec.opt .dns-n{background:rgba(255,255,255,.06);color:var(--muted)}
.dns-rec-t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.dns-rec-t b{font-size:14px}
.dns-rec-t span{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.dns-badge{font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted);white-space:nowrap}
.dns-badge.req{color:#7ee7d6;border-color:rgba(45,212,191,.4);background:rgba(45,212,191,.08)}
.dns-fields{display:grid;grid-template-columns:minmax(90px,.6fr) minmax(110px,.8fr) minmax(0,1.6fr);gap:10px}
.dns-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.dns-fl{font-size:11.5px;font-weight:600;color:var(--muted)}
.dns-fl em{font-style:normal;font-weight:400;margin-left:5px;opacity:.85}
.dns-fv{display:flex;align-items:center;gap:6px;justify-content:space-between;min-height:38px;padding:4px 4px 4px 12px;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid var(--line-2);min-width:0}
.dns-fv code{font-family:var(--mono);font-size:13.5px;color:var(--text);user-select:all;overflow-wrap:anywhere;padding:4px 0}
.dns-copy{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:8px;border:1px solid rgba(169,125,251,.4);background:rgba(139,92,246,.14);color:#e4d9ff;font:inherit;font-size:12px;font-weight:600;cursor:pointer;flex:none}
.dns-copy:hover{background:rgba(139,92,246,.26)}
.dns-copy.done{border-color:rgba(45,212,191,.5);background:rgba(45,212,191,.16);color:#a7f3e6}
.dns-note{display:flex;gap:7px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--muted)}
.dns-note svg{flex:none;margin-top:3px}
.dns-tips{list-style:none;margin:0;padding:12px 14px;border-radius:12px;background:rgba(255,184,107,.06);border:1px solid rgba(255,184,107,.22);display:flex;flex-direction:column;gap:7px;font-size:12.5px;line-height:1.5;color:#f3dcc0}
.dns-tips li{display:flex;gap:8px;align-items:flex-start}.dns-tips svg{flex:none;margin-top:3px;color:#ffc98a}
@media (max-width:620px){.dns-fields{grid-template-columns:1fr 1fr}.dns-fields .dns-f:last-child{grid-column:1/-1}}
.prov-single{width:min(760px,95vw)}.prov-single .prov-layout{grid-template-columns:1fr}.prov-single .prov-side{position:static}
/* buttons paint their own ground (the browser's grey button colour showed through and made them look disabled) */
.btn{background-color:rgba(24,29,48,.92)}
.btn:not(.primary):not(.release):hover:not(:disabled){background-color:rgba(36,42,66,.95);border-color:rgba(169,125,251,.45)}
.btn.danger{background-color:rgba(255,92,122,.06)}
.btn:disabled{opacity:.45}

/* a stage's data */
.data-modal{width:min(720px,94vw)}
.data-dlg{display:flex;flex-direction:column;gap:18px}
.data-run{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(139,92,246,.1);font-size:13px}
.data-undo{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,184,107,.08);border:1px solid rgba(255,184,107,.22);font-size:13px;color:#ffd6a8}
.data-undo span{flex:1;min-width:0}
.data-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.data-tile{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:14px;border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01))}
.data-tile-h{display:flex;align-items:center;gap:10px}
.data-tile-h b{font-size:15px}
.data-ic{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;flex:none}
.data-tile.violet .data-ic{background:rgba(139,92,246,.16);color:#c4b5fd}
.data-tile.teal .data-ic{background:rgba(45,212,191,.14);color:#7ee7d6}
.data-tile.amber .data-ic{background:rgba(255,184,107,.14);color:#ffcf99}
.data-tile p{margin:0;font-size:13px;line-height:1.5;color:var(--muted);flex:1}
.data-tile-a{display:flex;align-items:center;gap:8px;margin-top:4px}
.data-tile-a .btn{white-space:nowrap}
.data-tile-a select.in{flex:1;min-width:0;height:34px;padding-top:0;padding-bottom:0;font-size:14px}
.data-sec{display:flex;flex-direction:column;gap:10px}
.data-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.data-sec-h>span:first-child{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.data-list{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:14px;overflow:hidden}
.data-bk{display:flex;align-items:center;gap:12px;padding:12px 14px;flex-wrap:wrap}
.data-bk+.data-bk{border-top:1px solid var(--line-2)}
.data-bk:hover{background:rgba(255,255,255,.02)}
.data-bk-ic{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(139,92,246,.12);color:#c4b5fd;flex:none}
.data-bk-t{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.data-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.data-meta>span+span::before{content:'·';margin-right:8px;opacity:.6}
.data-meta .pill{text-transform:none;letter-spacing:0;font-size:11.5px;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);font-variant-numeric:tabular-nums}
.data-meta .pill+span::before{content:none}
.data-bk-a{display:flex;align-items:center;gap:6px;margin-left:auto}
.data-bk-a .btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.data-bk-a .btn.ghost-danger{background:transparent;box-shadow:none;border-color:transparent;color:#ff8fa3}
.data-bk-a .btn.ghost-danger:hover{background-color:rgba(255,143,163,.1);border-color:rgba(255,143,163,.3)}
.data-empty{padding:16px;border:1px dashed var(--line-2);border-radius:14px;text-align:center;font-size:13px;color:var(--muted)}
.data-tl{list-style:none;margin:0;padding:0 0 0 18px;position:relative}
.data-tl::before{content:'';position:absolute;left:5px;top:14px;bottom:22px;width:1px;background:var(--line-2)}
.data-tl li{position:relative;padding:6px 0 10px;font-size:13px}
.data-tl li::before{content:'';position:absolute;left:-17px;top:11px;width:9px;height:9px;border-radius:50%;background:#5eead4;box-shadow:0 0 0 3px #121629}
.data-tl li.running::before{background:#a78bfa}
.data-tl li.failed::before{background:#ff8fa3}
.data-tl li.failed b{color:#ff8fa3}
.data-tl-h{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.data-warn{color:#ffb86b;display:inline-flex;align-items:center;gap:4px}
.data-bk.doomed b{color:#ffb86b}
@media (max-width:560px){.data-bk-a{margin-left:46px}}

/* providers page: each section in its own colour, clear buttons */
.prov-sec{--tone:169,125,251}
.prov-sec.tone-mint{--tone:52,211,153}.prov-sec.tone-aqua{--tone:56,189,248}.prov-sec.tone-iris{--tone:169,125,251}
.prov-sec{background:linear-gradient(180deg,rgba(var(--tone),.07),rgba(var(--tone),0) 120px),rgba(255,255,255,.012);border-color:rgba(var(--tone),.22)}
.prov-sec .prov-count{background:rgba(var(--tone),.16);color:rgb(var(--tone))}
.prov-empty{display:flex;align-items:center;justify-content:center;gap:10px;border-color:rgba(var(--tone),.3);color:var(--text-2,var(--text))}
.prov-empty-ic{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(var(--tone),.12);color:rgb(var(--tone));flex:none}
.prov-sec .host-card{border-color:var(--line-2);gap:10px}
.prov-sec .host-card:hover{border-color:rgba(var(--tone),.4)}
.host-status{display:inline-flex;align-items:center;width:max-content;max-width:100%;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}
.host-status.ok{color:#7ee7d6;background:rgba(45,212,191,.1)}
.host-status.wait{color:#ffcf99;background:rgba(255,184,107,.1)}
.host-status.bad{color:#ff9fb8;background:rgba(244,63,94,.12)}
.host-status.info{color:#cbb8ff;background:rgba(139,92,246,.12)}
.host-acts{display:flex;align-items:center;gap:8px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line-1)}
.host-acts .icon-del{margin-left:auto}
.btn.icon-del{background:transparent;background-image:none;border-color:transparent;box-shadow:none;color:#ff9fb8;padding:5px 8px}
.btn.icon-del:hover:not(:disabled){background-color:rgba(244,63,94,.14);border-color:rgba(244,63,94,.4);color:#ffd1dc}
/* secondary buttons: clearly pressable, not greyed out */
.btn:not(.primary):not(.release):not(.danger):not(.icon-del):not(.ghost):not(.white):not(.see-app){background-color:rgba(139,92,246,.10);background-image:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0));border-color:rgba(169,125,251,.34);color:#efe9ff}
.btn:not(.primary):not(.release):not(.danger):not(.icon-del):not(.ghost):not(.white):not(.see-app):hover:not(:disabled){background-color:rgba(139,92,246,.2);border-color:rgba(169,125,251,.6);color:#fff}
.btn:disabled,.btn:disabled:hover{opacity:.4;background-color:transparent!important;background-image:none!important;border-color:var(--line-1)!important;color:var(--muted)!important;box-shadow:none!important;filter:none}

.dns-rec.ssl{border-color:rgba(52,211,153,.35);background:linear-gradient(180deg,rgba(52,211,153,.07),rgba(52,211,153,.015))}
.dns-rec.ssl .dns-n{background:rgba(52,211,153,.18);color:#86efc4}
.dns-rec.done .dns-n{background:rgba(52,211,153,.25);color:#a7f3d0}
.dns-badge.ok{color:#86efc4;border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.12)}
.dns-wait{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.2)}
.host-status svg{margin-right:4px}
.dns-rec.ssl .dns-fields{grid-template-columns:110px minmax(0,1fr)}.dns-rec.ssl .dns-fields .dns-f:last-child{grid-column:1/-1}

.dns-where{display:flex;flex-direction:column;gap:8px}
.dns-modes{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid var(--line-2);width:max-content;max-width:100%;flex-wrap:wrap}
.dns-mode{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.dns-mode:hover{color:var(--text)}
.dns-mode.on{background:rgba(139,92,246,.22);color:#f1eaff;box-shadow:inset 0 0 0 1px rgba(169,125,251,.5)}
.dns-check{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:10px;border-top:1px dashed var(--line-2)}
.dns-wait .btn{flex:none}

/* Where a stage runs (hosting engine) */
.he-modal{width:min(760px,95vw)}
.he{display:flex;flex-direction:column;gap:16px}
.he-lead{margin:0;font-size:15px;font-weight:600}
.he-places{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.he-place{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:14px;border-radius:14px;border:1px solid var(--line-2);background:rgba(255,255,255,.025);color:var(--text);font:inherit;cursor:pointer}
.he-place>span:nth-child(2){display:flex;flex-direction:column;gap:3px;min-width:0}
.he-place:hover:not(:disabled){border-color:rgba(169,125,251,.5)}
.he-place.on{border-color:rgba(169,125,251,.85);background:rgba(139,92,246,.14)}
.he-place:disabled{opacity:.45;cursor:default}
.he-place-ic{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(139,92,246,.16);color:#d4c2ff;flex:none}
.he-q{display:flex;flex-direction:column;gap:6px}
.he-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.he-chip{padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--text);font:inherit;font-size:13px;cursor:pointer}
.he-chip:hover{border-color:rgba(169,125,251,.5)}
.he-chip.on{border-color:rgba(169,125,251,.9);background:rgba(139,92,246,.22);color:#fff}
.he-rec{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:14px;background:rgba(139,92,246,.08);border:1px solid rgba(169,125,251,.3)}
.he-rec b{font-size:15px}
.he-rec-k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#cbb8ff}
.he-money{font-size:13px;color:#7ee7d6;font-weight:600}
.he-sec{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:14px;border:1px solid var(--line-2)}
.he-sec-t{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.he-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.he-row>div:first-child{flex:1;min-width:200px}
.he-seg{display:inline-flex;gap:3px;padding:3px;border-radius:10px;background:rgba(0,0,0,.25);border:1px solid var(--line-2);flex-wrap:wrap}
.he-seg button{padding:6px 11px;border-radius:8px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.he-seg button.on{background:rgba(139,92,246,.25);color:#fff}
.he-num{display:inline-flex;align-items:center;gap:10px}
.he-num button{width:30px;height:30px;border-radius:9px;border:1px solid rgba(169,125,251,.4);background:rgba(139,92,246,.12);color:#fff;font-size:16px;cursor:pointer}
.he-num button:disabled{opacity:.35;cursor:default}
.he-num b{min-width:18px;text-align:center;font-variant-numeric:tabular-nums}
.he-note{display:flex;gap:7px;align-items:center;font-size:12.5px;color:#cbb8ff}
.he-switch{display:inline-flex;align-items:center;gap:7px;font-size:13px}
.he-list{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;max-height:240px;overflow-y:auto}
.he-item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;cursor:pointer}
.he-item+.he-item{border-top:1px solid var(--line-2)}
.he-item>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.he-item.off{opacity:.6;cursor:default}
.he-cost{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:14px;background:rgba(45,212,191,.05);border:1px solid rgba(45,212,191,.22)}
.he-cost-l{display:flex;justify-content:space-between;gap:10px;font-size:13px;overflow-wrap:anywhere}
.he-cost-t{margin-top:4px;padding-top:8px;border-top:1px dashed var(--line-2);font-weight:700;color:#7ee7d6}
.he-adv{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:12px;background:rgba(255,184,107,.06);border:1px solid rgba(255,184,107,.25)}
.he-adv p{margin:0}
.he-foot{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}

.he-move{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:rgba(56,189,248,.07);border:1px solid rgba(56,189,248,.3)}
.he-steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.he-steps span{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted)}
.he-steps span.done{color:#7ee7d6;border-color:rgba(45,212,191,.4)}
.he-steps span.now{color:#fff;border-color:rgba(56,189,248,.7);background:rgba(56,189,248,.15)}
.he-left{border-color:rgba(255,184,107,.35);background:rgba(255,184,107,.04)}

/* stage cards: each stage in its own colour */
.stage-card{--st:169,125,251}
.stage-card.st-dev{--st:169,125,251}
.stage-card.st-sit{--st:56,189,248}
.stage-card.st-uat{--st:251,191,36}
.stage-card.st-prod{--st:52,211,153}
.stage-card{border-color:rgba(var(--st),.28);background:linear-gradient(180deg,rgba(var(--st),.10),rgba(var(--st),.02) 55%,rgba(255,255,255,.01))}
.stage-card.on{border-color:rgba(var(--st),.6)}
.stage-card .stage-top b{color:rgb(var(--st))}
.stage-card .app-ico{border-color:rgba(var(--st),.3)}
.stage-card .app-ico:hover{border-color:rgba(var(--st),.7);background:rgba(var(--st),.12)}
.stage-ver-row{display:flex;align-items:center;gap:8px}
.stage-ver-edit-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:8px;border:1px solid rgba(var(--st),.35);background:rgba(var(--st),.1);color:rgb(var(--st));font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.stage-ver-edit-btn:hover{background:rgba(var(--st),.2)}
.stage-ver-editing{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.stage-ver-editing select{width:auto;min-width:110px}
.stage-sub{display:flex;align-items:center;gap:4px}
.sw-modal{width:min(700px,95vw)}
.sw{display:flex;flex-direction:column;gap:14px}
.sw-addr{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 0}
.sw-addr+.sw-addr{border-top:1px solid var(--line-2)}
.sw-addr .min0{display:flex;flex-direction:column;gap:3px}
.sw-addr code{font-family:var(--mono);font-size:13px;color:var(--text-2,var(--text));overflow-wrap:anywhere}
.sw-form{display:flex;flex-direction:column;gap:8px;padding-top:6px;border-top:1px dashed var(--line-2)}
.sw-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.sw-form-row .f{margin:0}

.aws-connect{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:14px;border:1px solid rgba(251,191,36,.35);background:linear-gradient(180deg,rgba(251,191,36,.08),rgba(251,191,36,.02))}
.aws-connect-h{display:flex;gap:12px;align-items:flex-start}
.aws-connect-h b{font-size:15px}
.aws-wait{display:flex;flex-direction:column;gap:14px;padding:6px 2px}
.aws-wait-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.5}

.ap-modal{width:min(760px,95vw)}
.ap{display:flex;flex-direction:column;gap:14px}
.ap-android{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.ap-qr{padding:10px;border-radius:14px;background:#fff;line-height:0;flex:none}
.ap-qr img{width:168px;height:168px;image-rendering:pixelated}
.ap-android-t{display:flex;flex-direction:column;gap:4px;min-width:220px;flex:1}
.ap-desk{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.ap-desk-i{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:12px;border-radius:12px;border:1px solid var(--line-2)}
.ap-bundle{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:12px;border-top:1px dashed var(--line-2);flex-wrap:wrap}
.pub-form{display:flex;flex-direction:column;gap:12px}
.pub-stores{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.pub-store{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.02)}
.pub-store-h{display:flex;align-items:center;gap:8px}

.sc-modal{width:min(640px,94vw)}
.sc{display:flex;flex-direction:column;gap:14px}
.sc-lead{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.3)}
.sc-lead.warn{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.35)}
.sc-lead svg{flex:none;margin-top:2px}
.sc-lead p{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--text-2,var(--text))}
.sc-warn{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:#ffb86b}
.sc-list ul{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
.sc-list code{font-family:var(--mono);font-size:12.5px}
.sc-list.muted{opacity:.8}
.sc-restore{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;border:1px solid var(--line-2);cursor:pointer}
.sc-restore input{margin-top:3px}

/* dropdowns: one compact style everywhere */
select:not([multiple]),select.in:not([multiple]){-webkit-appearance:none;appearance:none;height:36px;padding:0 34px 0 12px;border-radius:10px;border:1px solid rgba(169,125,251,.28);background-color:rgba(139,92,246,.08);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9b2ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:14px;font-size:13.5px;font-weight:500;line-height:normal;color:#efe9ff;cursor:pointer;color-scheme:dark;box-shadow:none;text-overflow:ellipsis}
select:not([multiple]):hover:not(:disabled){border-color:rgba(169,125,251,.55);background-color:rgba(139,92,246,.14)}
select:not([multiple]):focus-visible{outline:none;border-color:rgba(169,125,251,.8);box-shadow:0 0 0 3px rgba(139,92,246,.25)}
select:not([multiple]):disabled{opacity:.5;cursor:not-allowed}
select.in.sm,.data-tile-a select.in{height:32px;font-size:13px}
/* provider cards: the bottom controls sit at the bottom of every card */
.prov-sec .org-grid{align-items:stretch}
.prov-sec .host-card{height:100%}
.host-acts{margin-top:auto}

.talk-era{display:inline-flex;align-items:center;gap:8px;font-weight:400}
.talk-era select.in{width:auto;min-width:200px;height:32px;font-size:13px}
.talk-era-empty{padding:14px;border:1px dashed var(--line-2);border-radius:12px;text-align:center;font-size:13px;color:var(--muted)}

.op-nothing{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);font-size:13px;color:var(--text-2,var(--text))}
.op-nothing svg{flex:none;margin-top:2px}

/* project cards: stages, and the ones that need the client */
.pc-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:4px}
.pc-stage{--st:169,125,251;display:flex;flex-direction:column;gap:2px;padding:7px 8px;border-radius:10px;border:1px solid rgba(var(--st),.18);background:rgba(var(--st),.04);opacity:.6;min-width:0}
.pc-stage.st-sit{--st:56,189,248}.pc-stage.st-uat{--st:251,191,36}.pc-stage.st-prod{--st:52,211,153}
.pc-stage.on{opacity:1;border-color:rgba(var(--st),.45);background:rgba(var(--st),.1)}
.pc-stage.busy{opacity:.85}
.pc-stage-k{font-size:10px;font-weight:700;letter-spacing:.08em;color:rgb(var(--st))}
.pc-stage b{font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-card.pc-attn{border-color:rgba(251,191,36,.55);box-shadow:0 0 0 1px rgba(251,191,36,.25),0 10px 30px -14px rgba(251,191,36,.5)}

.pc-created{font-family:var(--font, inherit);letter-spacing:0;opacity:.85}


.talk-first{overflow-y:auto}
.talk-first .convo-pane>.card{background:transparent;border:0;box-shadow:none;padding:0}

.pay-card{display:flex;flex-direction:column;gap:12px;margin-top:14px;padding:16px;border-radius:14px;border:1px solid rgba(52,211,153,.35);background:linear-gradient(180deg,rgba(52,211,153,.07),rgba(52,211,153,.01))}
.pay-h{display:flex;flex-direction:column;gap:3px}
.pay-h b{font-size:15px}
.pay-result{display:flex;gap:10px;align-items:center;margin:0 0 14px;padding:12px 14px;border-radius:12px;font-size:13.5px}
.pay-result.ok{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.4);color:#a7f3d0}
.pay-result.bad{background:rgba(244,63,94,.08);border:1px solid rgba(244,63,94,.35);color:#fecdd3}

.prov-own{padding:12px 16px;border-radius:14px;border:1px dashed var(--line-2);color:var(--muted)}
.prov-own summary{cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13px}

.mult-chip{margin-left:6px;align-self:center;white-space:nowrap;padding:2px 9px;border-radius:999px;border:1px dashed rgba(251,191,36,.45);background:transparent;color:#fcd34d;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums}
.mult-chip.own{border-style:solid;background:rgba(251,191,36,.12)}
.mult-chip:hover{background:rgba(251,191,36,.2)}
.oc-top .oc-del{align-self:flex-start;flex:none;margin:-6px -6px 0 0}
/* show/hide eye on every password field (wired in ui.js) */
.pw-wrap{position:relative;display:flex;align-items:center;width:100%;min-width:0;flex:1 1 auto}
.pw-wrap>input{flex:1;min-width:0;padding-right:40px!important}
.pw-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.pw-eye:hover{color:#fff;background:rgba(255,255,255,0.07)}
.pw-eye:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tile-tree{border-color:rgba(139,85,247,0.4);background:linear-gradient(180deg,rgba(139,85,247,0.12),var(--surface))}
/* wallet: open a sub-organization's wallet in place */
.wal-link{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--text);font:inherit;padding:2px 0;cursor:pointer;text-align:left}
.wal-link svg{color:var(--muted);transition:transform .15s,color .15s}
.wal-link:hover b{color:#fff;text-decoration:underline;text-underline-offset:3px}.wal-link:hover svg{color:#c9a8ff;transform:translateX(2px)}
.wal-inside{font-size:11px;font-weight:600;color:#c9a8ff;background:rgba(139,85,247,0.14);border-radius:999px;padding:1px 8px;white-space:nowrap}
/* header wallet + add money */
.head-wallet{display:inline-flex;align-items:center;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);transition:border-color .15s}
.head-wallet .head-credits{border:0;background:transparent}
.head-wallet:hover{border-color:rgba(169,125,251,0.5)}
.head-wallet.low{border-color:rgba(244,63,94,0.45)}
.hc-addpart{display:inline-flex;align-items:center;padding-right:4px}
.hc-div{width:1px;height:16px;background:var(--line-2)}
.hc-add{display:grid;place-items:center;width:24px;height:24px;margin-left:4px;border-radius:999px;border:0;background:transparent;color:#86f7cb;cursor:pointer;transition:background .15s,color .15s}
.hc-add:hover{background:rgba(16,185,129,0.18);color:#fff}
.hc-add:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.he-chip.on{border-color:rgba(169,125,251,0.7);background:rgba(139,85,247,0.18);color:#fff}
.tile-bal{display:flex;flex-direction:column}
.bal-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.bal-add{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:4px 10px;border-radius:999px;border:1px solid rgba(52,211,153,.45);background:rgba(52,211,153,.1);color:#a7f3d0;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.bal-add:hover{background:rgba(52,211,153,.22);color:#fff}
.bal-add:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* white button (New project on the home banner): stays light on hover — the generic secondary hover turned it dark */
.btn.btn.white.white:not(:disabled):hover,.btn.btn.white.white:not(:disabled):focus-visible{background-color:#f3edff;background-image:none;border-color:transparent;color:#2b1170;transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(20,6,60,0.7)}
.btn.btn.white.white:not(:disabled):active{transform:none;background-color:#e9e0ff}
/* logo: change it by hovering the logo itself */
.logo-edit{position:relative;display:inline-grid;flex:none;padding:0;border:0;background:transparent;cursor:pointer;border-radius:18px;line-height:0}
.logo-edit>*:first-child{transition:filter .15s}
.logo-edit-ov{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;background:rgba(8,10,20,0.55);color:#fff;opacity:0;transition:opacity .15s}
.logo-edit:hover .logo-edit-ov,.logo-edit:focus-visible .logo-edit-ov{opacity:1}
.logo-edit:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(hover:none){.logo-edit-ov{opacity:.0}.logo-edit:active .logo-edit-ov{opacity:1}}
.logo-edit:has(.sigil-md){border-radius:12px}.logo-edit:has(.sigil-sm){border-radius:10px}
.gcp-script{max-height:220px;overflow:auto;margin:8px 0 0;padding:12px;border-radius:10px;background:rgba(0,0,0,0.35);border:1px solid var(--line-1);font-family:var(--mono);font-size:11.5px;line-height:1.5;white-space:pre;color:var(--text-2)}