/* Pulse dashboard — translated from the design canvas */
:root{
  /* Colours follow the Glonari Pulse theme every section shares: the accounts app's menu.js writes it as --gp-* on
     <html>. Each fallback is the original gold and bronze, which is also the theme's default. */
  --fg-rgb:var(--gp-text-rgb,242,237,231);
  --bg-rgb:var(--gp-bg-rgb,11,10,9);
  /* surfaces: glass over the shared background (panels, cards), and solid where something sits on top of a frame */
  --bg:var(--gp-bg,#0B0A09);
  --panel:rgba(var(--bg-rgb),.66); --panel2:rgba(var(--bg-rgb),.5); --card:rgba(var(--bg-rgb),.56);
  --panel-solid:color-mix(in srgb,var(--bg) 94%,var(--text)); --panel-hover:color-mix(in srgb,var(--bg) 88%,var(--text));
  /* lines & fills */
  --line:rgba(var(--fg-rgb),.07); --line2:rgba(var(--fg-rgb),.09); --line-faint:rgba(var(--fg-rgb),.045);
  --line-strong:rgba(var(--fg-rgb),.13); --line-xstrong:rgba(var(--fg-rgb),.2); --tint:rgba(var(--fg-rgb),.03);
  --topbar-bg:rgba(var(--bg-rgb),.82);
  /* text */
  --text:var(--gp-text,#F2EDE7); --text2:color-mix(in srgb,var(--text) 80%,var(--bg)); --text-soft:color-mix(in srgb,var(--text) 92%,var(--bg));
  --muted:var(--gp-muted,#A79D94); --dim:color-mix(in srgb,var(--muted) 86%,var(--bg)); --dim2:color-mix(in srgb,var(--muted) 68%,var(--bg)); --dim3:color-mix(in srgb,var(--muted) 58%,var(--bg));
  --tan:color-mix(in srgb,var(--gp-accent,#F2C14E) 85%,var(--muted)); --warn:#E0A29A; --icon-subtle:color-mix(in srgb,var(--muted) 45%,var(--bg));
  /* accent text */
  --amber-fg:var(--gp-accent,#F2C14E); --amber-hi-fg:var(--gp-accent2,#FFE18C); --green-hi:#8DAF80; --red-fg:#C4756B;
  --code-tag:#7E8F9E; --code-str:#8B7A5A; --chat-user-fg:color-mix(in srgb,var(--text) 85%,var(--gp-accent,#F2C14E));
  /* accent fills */
  --amber:var(--gp-accent,#F2C14E); --amber-hi:var(--gp-accent2,#FFE18C); --amber-dim:color-mix(in srgb,var(--amber) 80%,var(--bg));
  /* gold system: the theme's accent, used for gradient frames, glows and spills */
  --gold:var(--gp-accent,#F2C14E); --gold-hi:var(--gp-accent2,#FFE18C); --gold-pale:color-mix(in srgb,var(--gold-hi) 50%,var(--text));
  --gold-dim:color-mix(in srgb,var(--gold) 80%,var(--bg)); --gold-deep:color-mix(in srgb,var(--gold) 52%,var(--bg));
  --gold-rgb:var(--gp-accent-rgb,242,193,78); --gold-hi-rgb:var(--gp-accent2-rgb,255,225,140); --gold-dim-rgb:var(--gp-accent-rgb,201,154,46);
  --btn-text:var(--gp-btntext,#1A1408);
  --avatar-a:color-mix(in srgb,var(--gold) 22%,var(--bg)); --avatar-b:color-mix(in srgb,var(--gold) 8%,var(--bg));
  --green:#6FA05F; --red:#C4756B;
  /* Gia's fonts, in every section */
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Instrument Serif',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--amber-fg);text-decoration:none}a:hover{color:var(--amber-hi-fg)}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}::-webkit-scrollbar-track{background:transparent}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(var(--gold-rgb),.45)}70%{box-shadow:0 0 0 12px rgba(var(--gold-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--gold-rgb),0)}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

h1{margin:0;font-family:var(--display);font-size:40px;font-weight:400;letter-spacing:0;line-height:1.1}
h2{margin:0;font-family:var(--display);font-size:28px;font-weight:400}
h3{margin:0;font-family:var(--display);font-size:23px;font-weight:400}
.sub{margin:0;font-size:17px;color:var(--dim);max-width:60ch;text-wrap:pretty}
.mono{font-family:var(--mono)}
.k{font:500 12px var(--mono);letter-spacing:.18em;color:var(--dim2);text-transform:uppercase}
.meta{font:400 13.5px var(--mono);color:var(--dim)}

/* Top nav */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;padding:14px 28px;background:var(--topbar-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;padding-right:18px;border-right:1px solid var(--line2)}
.brand .logo{height:48px;width:auto;display:block;color:var(--text)}
.crumb{margin-left:auto;font:400 13px var(--mono);color:var(--dim2)}

/* Header ticker: broadcast messages scrolling left→right, sits just left of the crumb */
.ticker{position:relative;margin-left:auto;width:300px;height:26px;flex:none;overflow:hidden;border-radius:99px;border:1px solid rgba(var(--gold-rgb),.22);background:rgba(var(--gold-rgb),.05);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker span{position:absolute;left:0;top:6px;white-space:nowrap;font:400 13px var(--mono);color:var(--tan);will-change:transform}
.ticker:not([hidden]) ~ .crumb{margin-left:0}

/* Buttons & pills */
.btn{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:99px;border:1px solid var(--line-strong);background:none;color:var(--muted);font-family:var(--sans);font-size:16px;cursor:pointer;transition:all .15s}
.btn:hover{border-color:var(--line-xstrong);color:var(--text-soft)}
.btn.primary{border-color:rgba(var(--gold-rgb),.55);background:rgba(var(--gold-rgb),.14);color:var(--amber-hi-fg);font-weight:500}
.btn.primary:hover{background:rgba(var(--gold-rgb),.24);border-color:var(--amber)}
.btn.small{padding:8px 15px;font-size:15px}
.btn.danger{border-color:rgba(196,117,107,.5);background:rgba(196,117,107,.12);color:var(--red-fg);font-weight:500}
.btn.danger:hover{background:rgba(196,117,107,.22);border-color:var(--red);color:var(--red-fg)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{border:none;padding:0;background:none;color:var(--dim)}
.btn.ghost:hover{color:var(--amber-fg)}
.navbtn{padding:7px 15px;border-radius:99px;border:1px solid var(--line2);background:transparent;color:var(--dim);font-family:var(--sans);font-size:14px;white-space:nowrap;cursor:pointer}
.navbtn.on{border-color:rgba(var(--gold-rgb),.5);background:rgba(var(--gold-rgb),.12);color:var(--amber-hi-fg)}
.pill{display:inline-block;padding:4px 10px;border-radius:99px;font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pill.video{color:var(--amber-fg);background:rgba(var(--gold-rgb),.1);border:1px solid rgba(var(--gold-rgb),.35)}
.pill.agent{color:var(--dim);background:var(--tint);border:1px solid var(--line2)}
.pill.ok{color:var(--green-hi);background:rgba(111,160,95,.1);border:1px solid rgba(111,160,95,.28)}
.pill.work{color:var(--tan);background:rgba(var(--gold-rgb),.1);border:1px solid rgba(var(--gold-rgb),.3)}
.pill.idle{color:var(--dim);background:var(--tint);border:1px solid var(--line2)}
.pill.err{color:var(--red-fg);background:rgba(196,117,107,.1);border:1px solid rgba(196,117,107,.3)}

/* Inputs */
.hr{height:1px;background:var(--line);flex:none}
.field{display:flex;flex-direction:column;gap:9px}
.field[hidden]{display:none}
.field label{font:500 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim2)}
.field label .opt{color:var(--icon-subtle);letter-spacing:0;text-transform:none;font-family:var(--sans)}
.input{padding:14px 18px;border-radius:11px;border:1px solid var(--line2);background:var(--panel2);font-size:17px;color:var(--text);font-family:var(--sans);outline:none;transition:border-color .15s}
.input:focus{border-color:rgba(var(--gold-rgb),.4)}
.input::placeholder{color:var(--dim3)}
/* Read-only definition viewer — themed entirely via vars so it tracks light/dark. */
.input.readonly{background:var(--tint);border-color:var(--line-faint);color:var(--dim);cursor:default;font-family:ui-monospace,monospace;font-size:13px;line-height:1.55;resize:vertical;white-space:pre;overflow:auto}
.input.readonly:focus{border-color:var(--line)}
/* Edit Pulse → Tools panel: bordered rows for attached tools, a pulsing
   green dot on the live ones, and clickable pills for the available pool.
   Colors come from theme vars (+ the shared --green), so both themes work. */
.tool-row{display:flex;align-items:center;gap:11px;padding:11px 14px;border:1px solid var(--line2);border-radius:11px;cursor:pointer;transition:border-color .15s,background .15s}
.tool-row:hover{border-color:var(--line-strong);background:var(--tint)}
.tool-row.off{opacity:.65;border-style:dashed}
.tool-dot{width:8px;height:8px;flex:none;border-radius:99px;background:var(--green);animation:toolDotPulse 2.2s ease-out infinite}
.tool-dot.off{background:var(--dim3);animation:none}
@keyframes toolDotPulse{0%{box-shadow:0 0 0 0 rgba(111,160,95,.5)}70%{box-shadow:0 0 0 7px rgba(111,160,95,0)}100%{box-shadow:0 0 0 0 rgba(111,160,95,0)}}
.tool-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:99px;border:1px solid var(--line2);background:var(--tint);color:var(--dim);font-size:15px;cursor:pointer;transition:border-color .15s,color .15s}
.tool-pill:hover{border-color:rgba(var(--gold-rgb),.5);color:var(--text-soft)}
/* Tool build-in-progress: indeterminate sweep bar + rotating workshop word */
.buildbar{position:relative;height:6px;border-radius:99px;background:var(--tint);overflow:hidden}
.buildbar::after{content:'';position:absolute;top:0;bottom:0;width:38%;border-radius:99px;background:linear-gradient(90deg,var(--amber-dim),var(--amber-hi));animation:buildSweep 1.15s ease-in-out infinite}
@keyframes buildSweep{0%{left:-38%}100%{left:100%}}
.buildword{font-family:var(--display);font-size:28px;font-weight:400;color:var(--amber-fg);text-align:center;min-height:30px;animation:buildWordIn .35s ease}
@keyframes buildWordIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Reports: spoken recap card */
.report-card{padding:22px 24px;display:flex;gap:18px;align-items:center}
.report-card.muted{color:var(--dim)}
.report-card.generating{align-items:flex-start}
.report-card.ready{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
.report-face{width:56px;height:56px;font-size:17px}
.report-face-ring{flex:none;border-radius:99px;animation:pulseRing 2.4s ease-out infinite}
.report-steps{display:flex;gap:18px;font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim3)}
.report-steps span{display:flex;align-items:center;gap:6px}
.report-steps span::before{content:'';width:6px;height:6px;border-radius:99px;background:var(--line-strong)}
.report-steps span.now{color:var(--amber-fg)}
.report-steps span.now::before{background:var(--amber);animation:pulseRing 2.4s ease-out infinite}
.report-steps span.done{color:var(--green-hi)}
.report-steps span.done::before{background:var(--green)}
.report-video{display:block;width:100%;max-height:480px;background:#000;aspect-ratio:16/9}
.report-novideo{display:flex;gap:16px;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line-faint)}
.report-downloads{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:6px}
.report-downloads .btn{text-decoration:none;gap:7px}
.report-summary{display:flex;flex-direction:column;gap:12px;padding:18px 22px 20px;background:var(--card)}

/* Toggle switch */
.switch{position:relative;display:inline-block;width:38px;height:22px;flex:none;cursor:pointer}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch-track{position:absolute;inset:0;border-radius:99px;background:var(--line2);border:1px solid var(--line-strong);transition:background .15s,border-color .15s}
.switch-track::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--panel-solid);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.switch input:checked ~ .switch-track{background:rgba(var(--gold-rgb),.4);border-color:rgba(var(--gold-rgb),.6)}
.switch input:checked ~ .switch-track::after{transform:translateX(18px);background:var(--amber-hi)}
.switch input:disabled ~ .switch-track{opacity:.5;cursor:not-allowed}

/* Range slider (knowledge/AI balance) */
.range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:var(--line2);outline:none;cursor:pointer;margin:6px 0 0}
.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--amber-hi);border:1px solid var(--amber-dim);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .12s}
.range::-webkit-slider-thumb:hover{transform:scale(1.1)}
.range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--amber-hi);border:1px solid var(--amber-dim);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.range::-moz-range-track{height:6px;border-radius:99px;background:var(--line2)}
.range:focus-visible{box-shadow:0 0 0 3px rgba(var(--gold-rgb),.25);border-radius:99px}

/* Layout */
.shell{display:grid;grid-template-columns:262px 1fr;min-height:calc(100vh - 50px)}
.side{border-right:1px solid var(--line);padding:30px 20px;display:flex;flex-direction:column;gap:30px;position:sticky;top:50px;align-self:start;height:calc(100vh - 50px);overflow-y:auto}
.side-group{display:flex;flex-direction:column;gap:2px}
.side-title{font:500 11.5px var(--mono);letter-spacing:.18em;color:var(--dim2);text-transform:uppercase;padding:0 12px 12px}
.side-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;color:var(--dim);font-size:17px;cursor:pointer;border:1px solid transparent}
.side-item:hover{color:var(--text2)}
.side-item.on{background:rgba(var(--gold-rgb),.10);border-color:rgba(var(--gold-rgb),.28);color:var(--amber-hi-fg);font-weight:500}
.side-card{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:12px;border:1px solid var(--line);background:var(--card)}
.side-user{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);cursor:pointer;transition:border-color .15s,background .15s}
.side-user:hover{border-color:var(--line-strong);background:var(--tint)}
.main{padding:36px 44px 60px;display:flex;flex-direction:column;gap:30px;min-width:0}
.page{max-width:1180px;margin:0 auto;padding:40px 40px 80px;display:flex;flex-direction:column;gap:30px}

/* Avatar circles — always a dark badge with vivid amber initials, independent of page theme */
.avatar{flex:none;border-radius:99px;background:linear-gradient(150deg,var(--avatar-a),var(--avatar-b));border:1px solid rgba(var(--gold-rgb),.45);box-shadow:0 0 16px rgba(var(--gold-rgb),.18);display:grid;place-items:center;font:500 15px var(--mono);color:var(--amber);background-size:cover;background-position:center}

/* Pulse cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(370px,1fr));gap:24px}
.pcard{display:flex;flex-direction:column;border-radius:16px;border:1px solid var(--line2);background:var(--panel);overflow:hidden;cursor:pointer;transition:all .15s}
.pcard:hover{border-color:rgba(var(--gold-rgb),.34);background:var(--panel-hover)}
.pcard-top{display:flex;gap:16px;padding:22px 22px 18px}
.pcard-foot{display:flex;align-items:center;gap:16px;padding:14px 22px;border-top:1px solid var(--line-faint);background:var(--tint)}
.dot{width:6px;height:6px;border-radius:99px}
.dot.ok{background:var(--green)}
.dot.work{background:var(--amber);animation:pulseRing 2.4s ease-out infinite}
.dot.idle{background:var(--dim2)}
.dot.err{background:var(--red)}

/* Panels & lists */
.panel{border-radius:16px;border:1px solid var(--line2);background:var(--panel);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.panel-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.rowlist>div{display:flex;align-items:center;gap:15px;padding:16px 22px;border-bottom:1px solid var(--line-faint)}
.rowlist>div:last-child{border-bottom:none}
.doc-icon{width:30px;height:34px;border-radius:5px;border:1px solid var(--line-strong);display:grid;place-items:center;font:500 10.5px var(--mono);color:var(--dim);flex:none}
.bar{height:3px;border-radius:99px;background:var(--line);overflow:hidden}
.bar>div{height:100%;background:linear-gradient(90deg,var(--amber-dim),var(--amber));transition:width .4s}
.bar>div.done{background:#4E7A4A}

/* Create-flow steps */
.steps{display:flex;align-items:center}
.step{display:flex;align-items:center;gap:10px}
.step .n{width:28px;height:28px;flex:none;border-radius:99px;cursor:pointer;font:500 13.5px var(--mono);border:1px solid var(--line-strong);background:transparent;color:var(--dim2);display:grid;place-items:center}
.step.cur .n{border-color:rgba(var(--gold-rgb),.6);background:rgba(var(--gold-rgb),.16);color:var(--amber-fg)}
.step.done .n{border-color:rgba(var(--gold-rgb),.3);color:var(--amber-fg)}
.step .lbl{font-size:15px;white-space:nowrap;color:var(--dim2)}
.step.cur .lbl{color:var(--text)}
.step-line{flex:1;height:1px;margin:0 12px;background:var(--line2)}
.step-line.done{background:rgba(var(--gold-rgb),.28)}

/* Drop zone */
.dropzone{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:14px;border:1px dashed var(--line-strong);background:var(--tint);align-items:flex-start;transition:all .15s}
.dropzone.drag{border-color:rgba(var(--gold-rgb),.55);background:rgba(var(--gold-rgb),.05)}

/* Agent picker */
.agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.agent-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 18px;border-radius:14px;cursor:pointer;border:1px solid var(--line2);background:var(--panel2);transition:all .15s}
.agent-card.sel{border-color:rgba(var(--gold-rgb),.5);background:rgba(var(--gold-rgb),.06)}
.agent-card.off{opacity:.5;cursor:default}
.ava-connect{display:flex;flex-direction:column;gap:16px;max-width:560px}
.ava-key-row{display:flex;gap:8px;align-items:center}
.ava-key-row .input{flex:1;min-width:0}
.ava-org{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.ava-org>div{display:flex;flex-direction:column;gap:3px;font-size:15px;color:var(--text-soft)}
@media (max-width:520px){.ava-key-row{flex-direction:column;align-items:stretch}.ava-org{grid-template-columns:1fr}}

/* Code block */
.code{padding:14px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);font:400 13.5px/1.75 var(--mono);color:var(--dim3);overflow-x:auto;white-space:pre}
.code .tag{color:var(--code-tag)}.code .str{color:var(--code-str)}

/* Tables */
table.tbl{width:100%;border-collapse:collapse;font-size:16px}
table.tbl th{text-align:left;font:500 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);padding:12px 16px;border-bottom:1px solid var(--line)}
table.tbl td{padding:14px 16px;border-bottom:1px solid var(--line-faint);color:var(--text2);vertical-align:middle}

/* Modal */
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:100}
.modal{width:min(480px,92vw);border-radius:18px;border:1px solid var(--line2);background:var(--panel-solid);padding:28px;display:flex;flex-direction:column;gap:20px;max-height:86vh;overflow-y:auto}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(420px,92vw);display:flex;flex-direction:column;gap:24px;padding:40px 36px;border-radius:20px;border:1px solid var(--line2);background:var(--panel)}

/* Chat reader */
.chat-msg{max-width:76%;padding:10px 14px;border-radius:12px;font-size:15.5px;line-height:1.55}
.chat-msg.u{align-self:flex-end;background:rgba(var(--gold-rgb),.14);border:1px solid rgba(var(--gold-rgb),.24);color:var(--chat-user-fg);border-bottom-right-radius:4px}
.chat-msg.a{align-self:flex-start;background:var(--line-faint);border:1px solid var(--line);color:var(--text-soft);border-bottom-left-radius:4px}

/* Embed preview modal — deliberately a fixed dark stage, independent of page theme */
.preview-back{position:fixed;inset:0;background:rgba(var(--bg-rgb),.94);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:120;padding:32px}
.preview-frame{position:relative;width:min(1000px,94vw)}
.preview-close{position:fixed;top:20px;right:20px;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 13px;border-radius:99px;border:1px solid rgba(var(--gold-rgb),.55);background:rgba(var(--gold-rgb),.14);color:var(--amber-hi);font:500 15px var(--sans);cursor:pointer;transition:background .15s,border-color .15s}
.preview-close:hover{background:rgba(var(--gold-rgb),.26);border-color:var(--amber)}
.preview-tools{position:fixed;top:20px;left:20px;z-index:1;display:flex;gap:8px}
.preview-tools button{padding:8px 14px;border-radius:99px;border:1px solid rgba(var(--fg-rgb),.14);background:rgba(var(--fg-rgb),.06);color:var(--dim2);font:500 13.5px var(--sans);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.preview-tools button:hover{border-color:rgba(var(--gold-rgb),.5);color:var(--amber-hi)}
.preview-tools .preview-debug.on{border-color:rgba(224,82,66,.7);background:rgba(217,70,58,.18);color:#F3B6AE}

/* Toast — always a dark chip, independent of page theme */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 22px;border-radius:99px;background:var(--panel-solid);border:1px solid rgba(var(--gold-rgb),.4);color:var(--amber-hi);font-size:15.5px;z-index:200;box-shadow:0 12px 30px rgba(0,0,0,.5)}

/* Topic map */
.topic-bars{display:flex;height:8px;border-radius:99px;overflow:hidden;gap:2px}
.topic-row{display:flex;align-items:center;gap:14px;padding:10px 2px}

/* Usage chart (Usage tab: conversations per day/month) */
.usage-chart{display:flex;align-items:flex-end;gap:4px}
.usage-chart .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.usage-chart .bar-fill{width:100%;max-width:26px;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--amber),var(--amber-dim));min-height:2px;transition:height .3s}
.usage-chart .bar-label{font:400 11.5px var(--mono);color:var(--dim3);white-space:nowrap}

.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.search{margin-left:auto;display:flex;align-items:center;gap:10px;padding:10px 16px;min-width:260px;border-radius:99px;border:1px solid var(--line2);background:var(--card)}
.search input{background:none;border:none;outline:none;color:var(--text);font-size:15.5px;flex:1}
.search input::placeholder{color:var(--dim3)}
.empty{padding:60px 20px;text-align:center;color:var(--dim2);font-size:16px;border:1px dashed var(--line2);border-radius:16px}

/* Dropdown menu */
.menu-wrap{position:relative;display:inline-flex}
.menu{position:absolute;top:calc(100% + 6px);right:0;min-width:190px;background:var(--panel-solid);border:1px solid var(--line2);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column;gap:1px;z-index:40}
.menu[hidden]{display:none}
.menu-item{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;border:none;background:none;color:var(--text2);font-family:var(--sans);font-size:16px;cursor:pointer;white-space:nowrap}
.menu-item:hover{background:var(--tint);color:var(--text)}
.menu-item.danger{color:var(--red-fg)}
.menu-item.danger:hover{background:rgba(196,117,107,.1)}
/* Insert-variable menu (directive/greeting editors): opens left-aligned, grouped */
.tag-menu{left:0;right:auto;min-width:340px;max-height:min(60vh,520px);overflow:auto}
.menu-section{display:flex;align-items:baseline;gap:8px;padding:10px 12px 4px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.menu-section + .menu-section{margin-top:2px}
.menu-section:not(:first-child){border-top:1px solid var(--line-faint);margin-top:4px;padding-top:12px}
.menu-section-note{font-weight:400;letter-spacing:0;text-transform:none;font-size:13px;color:var(--dim2)}
.tag-item{display:flex;align-items:baseline;gap:12px;padding:7px 12px}
.tag-item code{font-family:var(--mono);font-size:13.5px;color:var(--text)}
.tag-ex{margin-left:auto;font-size:13px;color:var(--dim2);white-space:nowrap}
/* Small status chip that is also a control (document expiry) */
.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:13.5px;padding:4px 11px;border-radius:99px;border:1px solid var(--line-strong);color:var(--dim2);background:none;white-space:nowrap;cursor:pointer;transition:color .15s,border-color .15s}
.chip:hover{color:var(--text);border-color:var(--line-xstrong)}
.chip.on{border-color:rgba(var(--gold-rgb),.45);color:var(--amber-fg);background:rgba(var(--gold-rgb),.1)}
/* Date & time picker (expiry modals) */
.dp{display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--line2);border-radius:12px;background:var(--panel2)}
.dp-presets{display:flex;gap:6px;flex-wrap:wrap}
.dp-head{display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:500;color:var(--text)}
.dp-nav{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--line2);background:none;color:var(--dim);cursor:pointer}
.dp-nav:hover:not(:disabled){color:var(--text);background:var(--tint)}
.dp-nav:disabled{opacity:.35;cursor:default}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-dow{font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim2);text-align:center;padding:4px 0 6px}
.dp-day{height:36px;border-radius:8px;border:none;background:none;color:var(--text2);font-family:var(--sans);font-size:15px;cursor:pointer;transition:background .1s,color .1s}
.dp-day:hover:not(:disabled){background:var(--tint);color:var(--text)}
.dp-day.muted{color:var(--dim3)}
.dp-day.today{box-shadow:inset 0 0 0 1px var(--line-strong)}
.dp-day.sel,.dp-day.sel:hover{background:rgba(var(--gold-rgb),.18);color:var(--amber-hi-fg);font-weight:600;box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.55)}
.dp-day:disabled{color:var(--dim3);opacity:.4;cursor:default}
.dp-time{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--dim);flex-wrap:wrap}
.dp-time select{padding:7px 9px;border-radius:9px;border:1px solid var(--line2);background:var(--panel-solid);color:var(--text);font-family:var(--sans);font-size:15px;outline:none}
.dp-time select:focus{border-color:rgba(var(--gold-rgb),.4)}
.dp-summary{margin-left:auto;font-size:14px;color:var(--text-soft)}
/* Temporary directives list */
.dir-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.dir-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-faint)}
.dir-row:last-child{border-bottom:none}
.dir-snippet{font-size:16px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Responsive (additive only — desktop ≥1025px is untouched) ─────────
   Breakpoints: 1024 (page grids stack), 768 (sidebar becomes a drawer,
   tables scroll), 480 (compact type/paddings). The burger and backdrop
   exist in the DOM at every size but only display below 768px. */
.nav-burger{display:none}
.side-backdrop{display:none}

@media (max-width: 1024px){
  .main{padding:28px 24px 48px}
  .resp-cols-lg{display:flex !important;flex-direction:column !important}
}

@media (max-width: 768px){
  .nav-burger{display:grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid var(--line-strong);border-radius:9px;background:none;color:var(--muted);cursor:pointer}
  .shell{display:block}
  .side{position:fixed;top:0;left:0;bottom:0;height:auto;z-index:220;width:min(280px,82vw);background:var(--bg);transform:translateX(-105%);transition:transform .22s ease;overflow-y:auto;box-shadow:0 0 60px rgba(0,0,0,.35)}
  .shell.side-open .side{transform:none}
  .shell.side-open .side-backdrop{display:block;position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.45)}
  .resp-cols-md{display:flex !important;flex-direction:column !important}
  .main{padding:22px 16px 44px;gap:22px}
  .topbar{padding:12px 16px;gap:12px}
  .ticker{display:none}
  .tbl,.table{display:block;overflow-x:auto}
}

@media (max-width: 480px){
  h1{font-size:27px}
  .main{padding:18px 12px 40px}
  .crumb{display:none}
  .modal{width:calc(100vw - 28px);padding:22px}
  .login-card{padding:28px 20px}
  .agent-grid{grid-template-columns:1fr !important}
}
/* Tags (marketplace) */
.tagrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;border:1px solid var(--line2);background:var(--tint);font-family:var(--sans);font-size:14px;color:var(--dim);white-space:nowrap;line-height:1.4}
.tag.on{border-color:rgba(var(--gold-rgb),.4);background:rgba(var(--gold-rgb),.1);color:var(--amber-fg)}
.tag.pick{cursor:pointer;background:none}
.tag.pick:hover{border-color:rgba(var(--gold-rgb),.45);color:var(--amber-fg)}
.tag button{background:none;border:none;color:inherit;cursor:pointer;padding:0 0 0 2px;font-size:16px;line-height:1;opacity:.7}
.tag button:hover{opacity:1}
/* Stat tiles (Reports, digests) */
.stat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat-tile{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:12px;border:1px solid var(--line);background:var(--card);min-width:0}
.stat-num{font-family:var(--display);font-size:34px;line-height:1.1}
.tbl tr.row-link{cursor:pointer}
.tbl tr.row-link:hover td{background:var(--tint)}
/* Marketplace cards are links */
.pcard.mkt{color:inherit;text-decoration:none}
.pcard.mkt:hover{color:inherit}

/* Sidebar sub-items (e.g. Surveys › Survey Questions) */
.side-item.sub{padding:8px 12px 8px 40px;font-size:15px}
/* Survey question rows: drag to reorder */
.sq-row{cursor:grab;transition:border-color .15s,opacity .15s}
.sq-row.dragging{opacity:.45;cursor:grabbing}
.sq-row.over{border-color:var(--amber-fg);box-shadow:0 0 0 1px var(--amber-fg) inset}
.sq-grip{color:var(--dim3);font-size:17px;letter-spacing:-3px;user-select:none;flex:none;cursor:grab}
.sq-row:hover .sq-grip{color:var(--amber-fg)}

/* ── Edit Pulse: tabbed editor ─────────────────────────────────────────
   Header with a large identity portrait, a tab bar that partitions the
   settings, full-width setting rows (title + description + control) and
   a save bar per tab. Type runs a notch larger than the rest of the app. */
.pulse-head{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.pulse-portrait{width:96px;height:96px;font-size:30px;box-shadow:0 0 0 4px var(--panel-solid),0 0 28px rgba(var(--gold-rgb),.22)}
.pulse-title{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 340px}
.pulse-title h1{font-size:34px;line-height:1.1;overflow-wrap:anywhere}
.pulse-status{display:flex;align-items:center;gap:9px;font-size:17px}
.pulse-actions{display:flex;gap:10px;flex-wrap:wrap;align-self:flex-start}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line2);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;flex:none;padding:13px 18px 14px;border:none;background:none;color:var(--dim);font-family:var(--sans);font-size:17px;font-weight:500;cursor:pointer;white-space:nowrap;border-radius:9px 9px 0 0;transition:color .15s,background .15s}
.tab:hover{color:var(--text-soft);background:var(--tint)}
.tab.on{color:var(--amber-hi-fg)}
.tab.on::after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--amber)}
.tab .tab-dot{display:inline-block;width:7px;height:7px;border-radius:99px;background:var(--amber);margin-left:8px;vertical-align:middle;box-shadow:0 0 0 3px rgba(var(--gold-rgb),.18)}
.tab .tab-dot[hidden]{display:none}
.tabpanel{display:flex;flex-direction:column;gap:22px}
.savebar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:14px;padding:14px 20px;margin-top:6px;border-radius:14px;border:1px solid var(--line2);background:var(--topbar-bg);backdrop-filter:blur(14px);box-shadow:0 -6px 30px rgba(0,0,0,.08)}
.savebar .savebar-note{font-size:15.5px;color:var(--dim)}
.savebar .savebar-note.dirty{color:var(--amber-fg);font-weight:500}
.savebar .btn{margin-left:auto}
/* Setting rows: a bordered stack; each row is title + description on the
   left, control on the right; nested rows indent under their parent. */
.settings{display:flex;flex-direction:column}
.set-row{display:flex;align-items:center;gap:22px;padding:18px 22px;border-top:1px solid var(--line-faint)}
.set-row:first-child{border-top:none}
.set-row.indent{padding-left:44px;background:var(--tint)}
.set-row.col{flex-direction:column;align-items:stretch;gap:12px}
.set-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.set-title{font-size:18px;color:var(--text);font-weight:500}
.set-desc{font-size:15.5px;line-height:1.55;color:var(--dim);font-family:var(--sans);text-wrap:pretty}
.set-desc a{font-weight:500}
.set-ctl{flex:none;display:flex;align-items:center;gap:8px}
.set-ctl .switch{width:44px;height:25px}
.set-ctl .switch-track::after{width:19px;height:19px}
.set-ctl .switch input:checked ~ .switch-track::after{transform:translateX(19px)}
/* Segmented choice (Dark/Light, Fill/Floating, …) */
.seg{display:inline-flex;padding:3px;border-radius:99px;border:1px solid var(--line2);background:var(--tint)}
.seg button{padding:8px 16px;border:none;border-radius:99px;background:none;color:var(--dim);font-family:var(--sans);font-size:15.5px;font-weight:500;cursor:pointer;transition:background .15s,color .15s}
.seg button.on{background:rgba(var(--gold-rgb),.18);color:var(--amber-hi-fg);box-shadow:0 0 0 1px rgba(var(--gold-rgb),.45) inset}
.seg button:hover:not(.on){color:var(--text-soft)}
/* Tool Library rows (Edit Pulse → Tools) */
.lib-row{display:flex;align-items:center;gap:16px;padding:14px 16px;border:1px solid var(--line2);border-radius:11px;cursor:pointer;transition:border-color .15s,background .15s}
.lib-row:hover{border-color:var(--line-strong);background:var(--tint)}
.lib-row[hidden]{display:none}
@media (max-width: 900px){.lib-row{flex-direction:column;align-items:stretch;gap:10px}}
/* Identity card on Main / Settings */
.identity-card{display:flex;align-items:center;gap:22px;padding:22px}
.identity-card .avatar{width:120px;height:120px;font-size:30px}
.identity-card .identity-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.identity-card .meta{overflow-wrap:anywhere}
.identity-card .btn{align-self:flex-start;margin-top:6px}
.identity-name{font-family:var(--display);font-size:30px;color:var(--text);line-height:1.2}
/* Editor textareas on Directive / Greeting read larger */
.editor{font-size:18px;line-height:1.6}
.panel.pad{padding:22px;display:flex;flex-direction:column;gap:18px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media (max-width: 1100px){
  .two-col{display:flex;flex-direction:column}
}
@media (max-width: 900px){
  .pulse-portrait{width:76px;height:76px;font-size:20px}
  .pulse-title h1{font-size:27px}
  .set-row{flex-direction:column;align-items:stretch;gap:12px;padding:16px 18px}
  .set-row.indent{padding-left:28px}
  .set-ctl{justify-content:flex-start}
  .identity-card{flex-direction:column;align-items:flex-start}
}

/* Ambient mesh behind the Edit Pulse page: fixed in the top-right corner,
   under everything (negative z-index sits above the page background but
   below every panel), bleeding off the edges and dissolving toward the
   page through a radial mask. Amber lines are drawn by startPulseMesh
   with a theme-specific tint; the opacity here sets the overall presence. */
.pulse-mesh{position:fixed;top:-160px;right:-220px;width:900px;height:900px;z-index:-1;pointer-events:none;opacity:.65;
  -webkit-mask-image:radial-gradient(circle at 64% 40%,#000 0%,rgba(0,0,0,.9) 24%,rgba(0,0,0,.35) 46%,transparent 66%);
  mask-image:radial-gradient(circle at 64% 40%,#000 0%,rgba(0,0,0,.9) 24%,rgba(0,0,0,.35) 46%,transparent 66%)}
:root .pulse-mesh{opacity:.5}
@media (max-width: 768px){.pulse-mesh{display:none}}

/* ══ Gold system ═══════════════════════════════════════════════════════
   Yellow-gold gradient frames on every box, drawn by a masked ::before
   ring. The surface is four stacked layers: a jittering film-grain
   texture (overlay), a slow low-frequency marbling that reads as liquid
   metal (soft-light), a streak of highlight veins, and the base gold
   flow. Motion runs through registered custom properties so the grain
   can jump in steps while the flow glides. Cards additionally carry a
   ::after "spill" — the same stack washed across the whole surface —
   that fades in on hover, together with a lighter-gold drop shadow.
   Everything degrades to a static textured border under
   prefers-reduced-motion. */
@property --gx{syntax:'<percentage>';inherits:false;initial-value:0%}
@property --grx{syntax:'<length>';inherits:false;initial-value:0px}
@property --gry{syntax:'<length>';inherits:false;initial-value:0px}
:root{
  --gold-flow:linear-gradient(115deg,
      var(--gold-deep) 0%, var(--gold-dim) 12%, var(--gold) 26%, var(--gold-hi) 38%, var(--gold-pale) 44%,
      var(--gold-hi) 50%, var(--gold) 62%, var(--gold-dim) 76%, var(--gold-deep) 88%, var(--gold) 100%);
  --gold-veins:linear-gradient(245deg,
      rgba(var(--gold-hi-rgb),0) 0%, rgba(var(--gold-hi-rgb),.85) 18%, rgba(var(--gold-hi-rgb),0) 30%,
      rgba(var(--gold-dim-rgb),.7) 52%, rgba(var(--gold-hi-rgb),0) 64%, rgba(var(--gold-hi-rgb),.9) 86%, rgba(var(--gold-hi-rgb),0) 100%);
  --gold-grain:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'140' height%3D'140'%3E%3Cfilter id%3D'g'%3E%3CfeTurbulence type%3D'fractalNoise' baseFrequency%3D'.92' numOctaves%3D'2' seed%3D'3' stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix type%3D'saturate' values%3D'0'%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR type%3D'linear' slope%3D'1.5' intercept%3D'-.25'%2F%3E%3CfeFuncG type%3D'linear' slope%3D'1.5' intercept%3D'-.25'%2F%3E%3CfeFuncB type%3D'linear' slope%3D'1.5' intercept%3D'-.25'%2F%3E%3CfeFuncA type%3D'linear' slope%3D'0' intercept%3D'.72'%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect width%3D'100%25' height%3D'100%25' filter%3D'url(%23g)'%2F%3E%3C%2Fsvg%3E");
  --gold-liquid:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'520' height%3D'520'%3E%3Cfilter id%3D'l'%3E%3CfeTurbulence type%3D'fractalNoise' baseFrequency%3D'.0055 .011' numOctaves%3D'3' seed%3D'11' stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix type%3D'saturate' values%3D'0'%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR type%3D'table' tableValues%3D'.05 .35 .95 .25 .8 .15 1'%2F%3E%3CfeFuncG type%3D'table' tableValues%3D'.05 .35 .95 .25 .8 .15 1'%2F%3E%3CfeFuncB type%3D'table' tableValues%3D'.05 .35 .95 .25 .8 .15 1'%2F%3E%3CfeFuncA type%3D'linear' slope%3D'0' intercept%3D'.9'%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect width%3D'100%25' height%3D'100%25' filter%3D'url(%23l)'%2F%3E%3C%2Fsvg%3E");
  /* the full stack, top layer first */
  --gold-stack:var(--gold-grain),var(--gold-liquid),var(--gold-veins),var(--gold-flow);
  --gold-stack-size:140px 140px,520px 520px,260% 260%,320% 320%;
  --gold-stack-pos:var(--grx) var(--gry),calc(var(--gx) * 1.4) calc(50% - var(--gx) * .5),calc(100% - var(--gx)) 0%,var(--gx) 50%;
  --gold-stack-blend:overlay,soft-light,normal,normal;
  --frame-opacity:.92;
  --spill-opacity:.4;
}
@keyframes goldFlow{0%{--gx:0%}50%{--gx:100%}100%{--gx:0%}}
@keyframes goldGrain{
  0%{--grx:0px;--gry:0px}8%{--grx:-41px;--gry:23px}16%{--grx:37px;--gry:-58px}24%{--grx:-19px;--gry:-31px}
  32%{--grx:62px;--gry:44px}40%{--grx:-73px;--gry:9px}48%{--grx:14px;--gry:67px}56%{--grx:-52px;--gry:-47px}
  64%{--grx:29px;--gry:-12px}72%{--grx:-8px;--gry:53px}80%{--grx:48px;--gry:-66px}88%{--grx:-64px;--gry:-25px}
  96%{--grx:21px;--gry:35px}100%{--grx:0px;--gry:0px}
}
.gold-anim,.pcard::before,.panel::before,.side-card::before,.stat-tile::before,.login-card::before,.modal::before,.agent-card::before,.lib-row::before,.dir-list::before,.dp::before,.report-card.ready::before,.search::before,.pcard::after,.btn.primary,.tab.on::after,.pcard-hero.blank span{
  animation:goldFlow 11s ease-in-out infinite,goldGrain 1.1s steps(1,end) infinite}
.pcard,.panel,.side-card,.stat-tile,.login-card,.modal,.agent-card,.lib-row,.dir-list,.dp,.report-card.ready,.search{position:relative;border-color:transparent}
.pcard::before,.panel::before,.side-card::before,.stat-tile::before,.login-card::before,.modal::before,.agent-card::before,.lib-row::before,.dir-list::before,.dp::before,.report-card.ready::before,.search::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:1;
  background:var(--gold-stack);background-size:var(--gold-stack-size);background-position:var(--gold-stack-pos);background-blend-mode:var(--gold-stack-blend);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:var(--frame-opacity);transition:opacity .35s}
.search::before{padding:1.5px}
.stat-tile::before,.side-card::before,.dp::before,.dir-list::before{opacity:.8}
.lib-row:hover::before,.agent-card:hover::before,.agent-card.sel::before,.search:focus-within::before{opacity:1}
.lib-row:hover,.agent-card:hover{border-color:transparent}
/* Sticky elements keep a static textured border (position:relative would break sticky). */
.savebar{border:2px solid transparent;background:linear-gradient(var(--topbar-bg),var(--topbar-bg)) padding-box,linear-gradient(var(--bg),var(--bg)) padding-box,var(--gold-liquid) border-box,var(--gold-flow) border-box;background-size:100% 100%,100% 100%,520px 520px,320% 320%;background-blend-mode:normal,normal,soft-light,normal}
.topbar{border-bottom:1px solid rgba(var(--gold-rgb),.5)}
.side{border-right:1px solid rgba(var(--gold-rgb),.35)}
/* Ambient gold glow behind every framed box */
.panel,.side-card,.stat-tile,.login-card,.modal{box-shadow:0 0 0 1px rgba(var(--gold-rgb),.08),0 12px 36px -20px rgba(var(--gold-dim-rgb),.6)}

/* Pulse cards: hover spills the gold across the surface, frame goes to full, card lifts. */
.pcard{isolation:isolate;transition:transform .25s ease,box-shadow .3s ease,background .3s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 36px -18px rgba(var(--gold-dim-rgb),.55)}
.pcard::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:var(--gold-stack);background-size:var(--gold-stack-size);background-position:var(--gold-stack-pos);background-blend-mode:var(--gold-stack-blend);
  opacity:0;transition:opacity .4s ease}
.pcard:hover{transform:translateY(-5px);background:var(--panel);
  box-shadow:0 28px 56px -14px rgba(var(--gold-hi-rgb),.75),0 12px 28px -10px rgba(var(--gold-rgb),.6),0 0 0 1px rgba(var(--gold-hi-rgb),.5),0 0 48px -8px rgba(var(--gold-rgb),.45)}
.pcard:hover::before{opacity:1;animation-duration:5s,.7s}
.pcard:hover::after{opacity:var(--spill-opacity)}
:root .pcard:hover{box-shadow:0 28px 56px -14px rgba(var(--gold-hi-rgb),.45),0 0 44px -6px rgba(var(--gold-rgb),.5),0 0 0 1px rgba(var(--gold-hi-rgb),.55)}
.pcard-name{font-family:var(--display);font-size:26px;font-weight:400;line-height:1.2;color:var(--text);overflow-wrap:anywhere}
.pcard-hint{font-size:15.5px;color:var(--dim);line-height:1.5}
.pcard-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 18px;min-width:0}
.pcard-cta{color:var(--amber-fg);font-weight:500;transition:color .2s}
.pcard:hover .pcard-cta{color:var(--amber-hi-fg)}
.pcard:hover .pcard-name{color:var(--amber-hi-fg)}

/* Marketplace: full-width portrait on top, then name, details and items. */
.cards.mkt-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:28px}
.pcard-hero{position:relative;width:100%;aspect-ratio:4/3;background:linear-gradient(150deg,var(--avatar-a),var(--avatar-b)) center/cover no-repeat;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);transform-origin:50% 60%}
.pcard-hero[data-bg]{background-size:cover;background-position:center 20%}
.pcard-hero::after{content:'';position:absolute;inset:auto 0 0 0;height:42%;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(var(--gold-dim-rgb),.14) 55%,var(--panel) 100%);pointer-events:none;transition:opacity .3s}
.pcard-hero.blank{display:grid;place-items:center}
.pcard-hero.blank span{font:500 54px var(--mono);letter-spacing:.06em;color:var(--gold);
  background:var(--gold-stack);background-size:var(--gold-stack-size);background-position:var(--gold-stack-pos);background-blend-mode:var(--gold-stack-blend);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pcard:hover .pcard-hero{transform:scale(1.045)}
.pcard.mkt .pcard-foot{background:transparent;border-top-color:rgba(var(--gold-rgb),.3)}

/* Gold-lit controls: the active nav item and primary actions glow like the reference. */
.side-item.on{background:linear-gradient(180deg,rgba(var(--gold-rgb),.2),rgba(var(--gold-rgb),.08));border-color:rgba(var(--gold-rgb),.7);
  box-shadow:0 0 26px -4px rgba(var(--gold-rgb),.6),inset 0 0 16px rgba(var(--gold-hi-rgb),.18),0 0 0 1px rgba(var(--gold-hi-rgb),.35)}
.side-item.on svg{color:var(--amber-fg)}
.btn.primary{border:2px solid transparent;color:var(--amber-hi-fg);font-weight:600;
  background:linear-gradient(180deg,rgba(var(--gold-rgb),.22),rgba(var(--gold-rgb),.12)) padding-box,linear-gradient(var(--panel-solid),var(--panel-solid)) padding-box,var(--gold-grain) border-box,var(--gold-liquid) border-box,var(--gold-flow) border-box;
  background-size:100% 100%,100% 100%,140px 140px,520px 520px,320% 320%;
  background-position:0 0,0 0,var(--grx) var(--gry),calc(var(--gx) * 1.4) 50%,var(--gx) 50%;
  background-blend-mode:normal,normal,overlay,soft-light,normal;
  box-shadow:0 0 22px -6px rgba(var(--gold-rgb),.7);transition:box-shadow .25s,transform .2s}
.btn.primary:hover{background-image:linear-gradient(180deg,rgba(var(--gold-rgb),.38),rgba(var(--gold-rgb),.2)),linear-gradient(var(--panel-solid),var(--panel-solid)),var(--gold-grain),var(--gold-liquid),var(--gold-flow);border-color:transparent;
  box-shadow:0 0 30px -4px rgba(var(--gold-hi-rgb),.85),0 8px 22px -10px rgba(var(--gold-rgb),.7);transform:translateY(-1px)}
.navbtn.on{box-shadow:0 0 16px -4px rgba(var(--gold-rgb),.6)}
.tab.on::after{background:var(--gold-liquid),var(--gold-flow);background-size:520px 520px,320% 100%;background-position:calc(var(--gx) * 1.4) 50%,var(--gx) 50%;background-blend-mode:soft-light,normal;height:3px}
.avatar{box-shadow:0 0 0 2px rgba(var(--gold-hi-rgb),.35),0 0 24px rgba(var(--gold-rgb),.3)}
.pulse-portrait{box-shadow:0 0 0 4px var(--panel-solid),0 0 0 6px rgba(var(--gold-rgb),.7),0 0 40px rgba(var(--gold-rgb),.45)}
.input:focus{border-color:rgba(var(--gold-rgb),.75);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.18)}
.ticker{border-color:rgba(var(--gold-rgb),.5)}
h1{background:linear-gradient(120deg,var(--text) 0%,var(--text) 55%,var(--amber-fg) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
::-webkit-scrollbar-thumb{background:rgba(var(--gold-rgb),.45)}

@media (prefers-reduced-motion: reduce){
  .gold-anim,.pcard::before,.panel::before,.side-card::before,.stat-tile::before,.login-card::before,.modal::before,.agent-card::before,.lib-row::before,.dir-list::before,.dp::before,.report-card.ready::before,.search::before,.pcard::after,.btn.primary,.tab.on::after,.pcard-hero.blank span{animation:none}
  .pcard,.pcard-hero{transition:none}
  .pcard:hover{transform:none}
}
@media (max-width: 768px){
  .cards,.cards.mkt-grid{grid-template-columns:1fr}
}
/* Wordmark: GLONARI reads in the theme-safe gold, PULSE in the text colour. */
svg.logo tspan{fill:var(--amber-fg)}
/* Hover legibility: the spill sits under dim text, so secondary copy lifts
   to bright while the card is hovered (both themes; dark gets gold-pale). */
.pcard:hover .pcard-hint,.pcard:hover .meta{color:var(--text-soft)}
.pcard:hover .tag{color:var(--text-soft);border-color:rgba(var(--gold-rgb),.55);background:rgba(var(--gold-rgb),.14)}
:root .pcard:hover .pcard-hint{color:var(--text)}
:root .pcard:hover .meta{color:var(--gold-pale)}
:root .pcard:hover .tag{color:var(--gold-pale);border-color:rgba(var(--gold-hi-rgb),.6);background:rgba(0,0,0,.28)}

@media (max-width: 768px){.brand .logo{height:38px}}

/* Top navigation: the member experience (Marketplace / Memories / My Pulse Account),
   present for every role so owners and admins can use the app the way a member does. */
.topnav{display:flex;align-items:center;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav-item{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:99px;border:1px solid transparent;color:var(--dim);font-size:15px;font-weight:500;white-space:nowrap;cursor:pointer;text-decoration:none;transition:color .15s,border-color .15s,background .15s,box-shadow .15s}
.topnav-item svg{width:16px;height:16px;flex:none}
.topnav-item:hover{color:var(--amber-fg);border-color:rgba(var(--gold-rgb),.35);background:rgba(var(--gold-rgb),.06)}
.topnav-item.on{color:var(--amber-hi-fg);background:linear-gradient(180deg,rgba(var(--gold-rgb),.2),rgba(var(--gold-rgb),.08));border-color:rgba(var(--gold-rgb),.7);
  box-shadow:0 0 22px -6px rgba(var(--gold-rgb),.6),inset 0 0 14px rgba(var(--gold-hi-rgb),.14)}
.topnav-item.on svg{color:var(--amber-fg)}
@media (max-width: 1024px){.topnav-item{padding:8px 12px;font-size:14px}}
@media (max-width: 768px){.topnav{gap:2px}.topnav-item{padding:8px 10px}.topnav-item span{display:none}.topnav-item svg{width:18px;height:18px}}

/* ── Swirling film grain ──────────────────────────────────────────────
   The hover spill and the highlighted nav items carry an oversized square
   layer (320% of the width, centred, so it covers even a wide pill at every angle) that slowly rotates
   and wanders while two grain tiles jump to new offsets nine times a
   second and the marbling drifts underneath. Rotation + jitter + drift
   read as grain swirling abstractly. The layer sits under the text
   (z-index −1 inside an isolated box) and only animates while visible. */
@keyframes goldSwirl{
  0%{transform:rotate(0deg) translate(0,0) scale(1)}
  25%{transform:rotate(90deg) translate(4%,-3%) scale(1.06)}
  50%{transform:rotate(180deg) translate(-3%,4%) scale(1)}
  75%{transform:rotate(270deg) translate(3%,3%) scale(1.06)}
  100%{transform:rotate(360deg) translate(0,0) scale(1)}
}
.pcard::after,.side-item.on::after,.topnav-item.on::after,.navbtn.on::after{
  content:'';position:absolute;inset:auto;left:50%;top:50%;width:320%;aspect-ratio:1;margin:-160% 0 0 -160%;z-index:-1;pointer-events:none;border-radius:0;
  background:var(--gold-grain),var(--gold-grain),var(--gold-liquid),var(--gold-flow);
  background-size:140px 140px,84px 84px,520px 520px,320% 320%;
  background-position:var(--grx) var(--gry),calc(-1 * var(--grx)) calc(-1 * var(--gry)),calc(var(--gx) * 1.4) 50%,var(--gx) 50%;
  background-blend-mode:overlay,overlay,soft-light,normal;
  animation:goldSwirl 36s linear infinite,goldGrain .9s steps(1,end) infinite,goldFlow 11s ease-in-out infinite;
  animation-play-state:paused;transition:opacity .4s ease}
.pcard::after{opacity:0}
.pcard:hover::after{opacity:var(--spill-opacity);animation-play-state:running}
/* Highlighted menu items: always swirling, quietly */
.side-item.on,.topnav-item.on,.navbtn.on{position:relative;overflow:hidden;isolation:isolate}
.side-item.on::after,.topnav-item.on::after,.navbtn.on::after{opacity:.26;animation-play-state:running}
:root .side-item.on::after,:root .topnav-item.on::after,:root .navbtn.on::after{opacity:.4}
.side-item.on,.topnav-item.on{color:var(--amber-hi-fg)}
:root .side-item.on,:root .topnav-item.on{color:var(--gold-pale)}
@media (prefers-reduced-motion: reduce){
  .pcard::after,.side-item.on::after,.topnav-item.on::after,.navbtn.on::after{animation:none}
}

/* ── Dark theme: keep the box dark, let the gold grain glow ────────────
   A bright gold layer at half opacity over a near-black panel averages
   to gray. Dark theme instead uses a deep-gold base with gold-tinted
   grain screened on top (only the speckle adds light), so highlighted
   items and hovered cards stay dark and the grain reads as gold dust. */
:root{--gold-grain-tint:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'140' height%3D'140'%3E%3Cfilter id%3D'g'%3E%3CfeTurbulence type%3D'fractalNoise' baseFrequency%3D'.92' numOctaves%3D'2' seed%3D'5' stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix type%3D'saturate' values%3D'0'%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR type%3D'linear' slope%3D'5' intercept%3D'-2.9'%2F%3E%3CfeFuncG type%3D'linear' slope%3D'4' intercept%3D'-2.4'%2F%3E%3CfeFuncB type%3D'linear' slope%3D'1.4' intercept%3D'-.95'%2F%3E%3CfeFuncA type%3D'linear' slope%3D'0' intercept%3D'1'%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect width%3D'100%25' height%3D'100%25' filter%3D'url(%23g)'%2F%3E%3C%2Fsvg%3E");
  --gold-flow-dark:linear-gradient(115deg,color-mix(in srgb,var(--gold) 3%,var(--bg)) 0%,color-mix(in srgb,var(--gold) 10%,var(--bg)) 18%,color-mix(in srgb,var(--gold) 22%,var(--bg)) 34%,color-mix(in srgb,var(--gold) 38%,var(--bg)) 44%,color-mix(in srgb,var(--gold) 14%,var(--bg)) 54%,color-mix(in srgb,var(--gold) 28%,var(--bg)) 70%,color-mix(in srgb,var(--gold) 6%,var(--bg)) 84%,color-mix(in srgb,var(--gold) 20%,var(--bg)) 100%)}
:root .pcard::after,:root .side-item.on::after,:root .topnav-item.on::after,:root .navbtn.on::after{
  background:var(--gold-grain-tint),var(--gold-grain-tint),var(--gold-liquid),var(--gold-flow-dark);
  background-size:140px 140px,84px 84px,520px 520px,320% 320%;
  background-blend-mode:screen,screen,soft-light,normal}
:root{--spill-opacity:.92}
:root .side-item.on::after,:root .topnav-item.on::after,:root .navbtn.on::after{opacity:.9}
:root .side-item.on,:root .topnav-item.on,:root .navbtn.on{background:color-mix(in srgb,var(--gold) 5%,var(--bg));color:var(--gold-hi)}
:root .pcard:hover{background:color-mix(in srgb,var(--gold) 5%,var(--bg))}

/* ── Live gold noise (JS-driven) ──────────────────────────────────────
   The rotating swirl layer is retired: highlighted items and hovered
   cards now carry a <canvas class="gold-noise"> painted from simplex
   noise by goldNoise in app.js. The ::after keeps only a static dark-gold
   (or light gold) base under the canvas; the canvas sits between that and
   the text. */
.pcard::after,.side-item.on::after,.topnav-item.on::after,.navbtn.on::after{
  animation:none;transform:none;inset:0;left:auto;top:auto;width:auto;aspect-ratio:auto;margin:0;z-index:-2;
  background:linear-gradient(135deg,rgba(var(--gold-rgb),.28),rgba(var(--gold-hi-rgb),.14) 45%,rgba(var(--gold-dim-rgb),.26));background-size:100% 100%;background-blend-mode:normal}
:root .pcard::after,:root .side-item.on::after,:root .topnav-item.on::after,:root .navbtn.on::after{
  background:color-mix(in srgb,var(--gold) 2%,var(--bg));background-size:100% 100%;background-blend-mode:normal}
.pcard::after{opacity:0}
.pcard:hover::after,.pcard.noise-on::after{opacity:1}
.side-item.on::after,.topnav-item.on::after,.navbtn.on::after,
:root .side-item.on::after,:root .topnav-item.on::after,:root .navbtn.on::after{opacity:1}
.gold-noise{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;border-radius:inherit;opacity:0;animation:goldNoiseIn .5s ease forwards}
@keyframes goldNoiseIn{to{opacity:1}}
.pcard .gold-noise{opacity:0;animation:goldNoiseIn .4s ease forwards}
@media (prefers-reduced-motion: reduce){.gold-noise{display:none}}
/* Hover: inactive items pick up a gold border, and any hovered host carries the grain (with the cursor bloom) */
.side-item:hover{border-color:rgba(var(--gold-rgb),.38)}
.navbtn:hover{border-color:rgba(var(--gold-rgb),.5);color:var(--amber-fg)}
.side-item.noise-on,.topnav-item.noise-on,.navbtn.noise-on,.btn.noise-on{position:relative;overflow:hidden;isolation:isolate}
.btn.noise-on .gold-noise,.side-item.noise-on:not(.on) .gold-noise,.topnav-item.noise-on:not(.on) .gold-noise,.navbtn.noise-on:not(.on) .gold-noise{opacity:.85}
/* Hover: icon and label ease to gold on every menu item and button */
.side-item,.topnav-item,.navbtn,.btn{transition:color .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease}
.side-item svg,.topnav-item svg,.navbtn svg,.btn svg{transition:color .25s ease}
.side-item:hover,.topnav-item:hover,.navbtn:hover,.btn:hover{color:var(--amber-fg)}
.side-item:hover svg,.topnav-item:hover svg,.navbtn:hover svg,.btn:hover svg{color:var(--amber-fg)}
:root .side-item:hover,:root .topnav-item:hover,:root .navbtn:hover,:root .btn:hover,:root .side-item:hover svg,:root .topnav-item:hover svg,:root .navbtn:hover svg,:root .btn:hover svg{color:var(--gold-hi)}
.btn.danger:hover,.btn.danger:hover svg{color:var(--red-fg)}

/* ── Top-bar user menu (replaces the sidebar user card, member links and sign-out) ── */
.user-menu-wrap{flex:none;margin-left:12px}
.ticker[hidden] ~ .user-menu-wrap{margin-left:auto}
.user-menu-btn{display:flex;align-items:center;gap:10px;padding:4px 10px 4px 4px;border-radius:99px;border:1px solid transparent;background:none;color:var(--text);cursor:pointer;font-family:var(--sans);transition:border-color .2s,background .2s,box-shadow .2s}
.user-menu-btn:hover,.user-menu-btn.open{border-color:rgba(var(--gold-rgb),.5);background:rgba(var(--gold-rgb),.06);box-shadow:0 0 18px -6px rgba(var(--gold-rgb),.5)}
.user-menu-name{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left;max-width:180px}
.user-menu-name>span:first-child{font-size:15px;font-weight:500;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.user-menu-name .meta{font-size:12px}
.user-menu-chev{color:var(--dim2);transition:transform .2s,color .2s}
.user-menu-btn.open .user-menu-chev{transform:rotate(180deg);color:var(--amber-fg)}
.user-menu{min-width:280px;right:0;top:calc(100% + 8px);padding:8px}
.user-menu-head{display:flex;flex-direction:column;gap:3px;padding:10px 12px 10px}
.user-menu-head strong{font-family:var(--display);font-size:20px;font-weight:400;color:var(--text)}
.user-menu .hr{margin:6px 4px}
.user-menu .menu-item{display:flex;align-items:center;gap:11px;padding:10px 12px;font-size:15px;transition:background .15s,color .15s}
.user-menu .menu-item svg{width:16px;height:16px;flex:none;color:var(--dim)}
.user-menu .menu-item:hover{background:rgba(var(--gold-rgb),.1);color:var(--amber-fg)}
.user-menu .menu-item:hover svg{color:var(--amber-fg)}
.user-menu .menu-item.danger:hover{background:rgba(196,117,107,.1);color:var(--red-fg)}
@media (max-width: 768px){.user-menu-name{display:none}.user-menu-btn{padding:3px}.user-menu-chev{display:none}}

/* ── Pulse kinds, voice identity, the orb ─────────────────────────── */
.pill.audio{color:var(--gold);background:rgba(var(--gold-rgb),.1);border:1px solid rgba(var(--gold-rgb),.4)}
/* The orb avatar is a transparent slot; app.js draws the widget's own
   noise-field body into it (see DashOrb). No disc, no outline, the page
   shows through the feather. */
.avatar.orb{--orb:#F2C14E;position:relative;overflow:visible;color:transparent;border:0;background:transparent;box-shadow:none;animation:none}
.avatar.orb::before,.avatar.orb::after{content:none}
.avatar.orb .orb-canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;display:block}
.pcard-hero.orb-hero{background:var(--panel2)}
.orb-color-row{display:flex;align-items:center;gap:12px}
.orb-color-row input[type=color]{width:44px;height:36px;padding:2px;border-radius:9px;border:1px solid var(--line2);background:var(--panel2);cursor:pointer}
.orb-swatch{width:36px;height:36px;flex:none}
.pcard-hero.orb-hero{display:grid;place-items:center}
.kind-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:640px){.kind-grid{grid-template-columns:1fr}}
.kind-card{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:14px;border:1px solid var(--line2);background:var(--panel2);cursor:pointer;transition:all .15s;text-align:left;color:var(--text);font:inherit}
.kind-card:hover:not(:disabled){border-color:rgba(var(--gold-rgb),.4)}
.kind-card.sel{border-color:rgba(var(--gold-rgb),.6);background:rgba(var(--gold-rgb),.08);box-shadow:0 0 0 1px rgba(var(--gold-rgb),.35) inset}
.kind-card.soon{opacity:.5;cursor:not-allowed}
.kind-card .kind-icon{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--amber);background:rgba(var(--gold-rgb),.12)}
.kind-card .kind-title{font-family:var(--display);font-size:20px;font-weight:400}
.kind-card .kind-desc{font-size:14px;color:var(--dim);line-height:1.45}
.voice-picker{display:flex;flex-direction:column;gap:14px}
.voice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;max-height:420px;overflow:auto;padding:2px}
.voice-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--panel2);cursor:pointer;transition:all .15s}
.voice-card:hover{border-color:rgba(var(--gold-rgb),.4)}
.voice-card.sel{border-color:rgba(var(--gold-rgb),.6);background:rgba(var(--gold-rgb),.08)}
.voice-card.off{display:none}
.voice-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.voice-name{font-size:15.5px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voice-play{width:34px;height:34px;flex:none;border-radius:99px;border:1px solid rgba(var(--gold-rgb),.45);background:transparent;color:var(--amber);display:grid;place-items:center;cursor:pointer;transition:all .15s}
.voice-play:hover:not(:disabled){background:rgba(var(--gold-rgb),.12)}
.voice-play.on{background:var(--amber);color:var(--btn-text)}
.voice-play:disabled{opacity:.3;cursor:default}
.report-audio{display:flex;align-items:center;gap:18px;padding:22px 24px;border-bottom:1px solid var(--line-faint)}
.report-audio audio{flex:1;min-width:0}
/* Glonari Pulse unified sign-in (html.gp-unified): the shared 60px <glonari-menu> sits above everything; this
   dashboard's own bar (section nav, ticker, Signature Personas menu) follows directly under it. */
.gp-unified body{padding-top:var(--gp-menu-h,60px)}
.gp-unified .topbar{top:var(--gp-menu-h,60px);padding-top:10px;padding-bottom:10px}
.gp-unified .shell{min-height:calc(100vh - 110px)}
.gp-unified .side{top:110px;height:calc(100vh - 110px)}
.gp-unified glonari-menu{z-index:60}
@media (max-width: 768px){.gp-unified .side{top:0;height:auto}}

/* ── Glonari Pulse: the shared background and light themes ───────────
   With unified sign-in, <glonari-backdrop> (the same aurora, dust and vignette as Gia) sits behind the dashboard,
   and the colours above follow the account's theme, light or dark. */
.gp-unified body{background:transparent}
.gp-unified #app{position:relative;z-index:1}
html[data-gp-mode=light]{color-scheme:light}
html[data-gp-mode=light] .panel,html[data-gp-mode=light] .side-card,html[data-gp-mode=light] .stat-tile,html[data-gp-mode=light] .login-card,html[data-gp-mode=light] .modal{box-shadow:0 0 0 1px rgba(var(--gold-rgb),.12),0 12px 30px -20px rgba(0,0,0,.18)}
html[data-gp-mode=light] .pcard{box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 30px -20px rgba(0,0,0,.2)}
html[data-gp-mode=light] .pcard:hover{box-shadow:0 22px 40px -18px rgba(0,0,0,.25),0 0 0 1px rgba(var(--gold-rgb),.45)}
html[data-gp-mode=light] h1{background:none;-webkit-text-fill-color:currentColor;color:var(--text)}
/* Persona theme picker (Settings → Layout): the Glonari Pulse themes, or custom colours, with a live preview */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-width:760px}
.theme-tile{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:9px 10px;border-radius:12px;border:1px solid var(--line2);background:var(--panel2);color:var(--text2);font:500 13.5px var(--sans);cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.theme-tile:hover{border-color:rgba(var(--gold-rgb),.5)}
.theme-tile.on{border-color:var(--gold);background:rgba(var(--gold-rgb),.1);color:var(--text)}
.theme-tile .sw{display:flex;width:100%;height:16px;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(127,127,127,.25)}
.theme-tile .sw i{flex:1}
.theme-custom{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px}
.theme-color{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--dim)}
.theme-color-pair{display:flex;gap:8px;align-items:center}
.theme-color input[type=color]{width:44px;height:38px;padding:2px;border-radius:9px;border:1px solid var(--line2);background:var(--panel2);cursor:pointer}
.theme-color .input{width:110px;padding:9px 12px;font-size:14px}
.theme-color .input.bad{border-color:var(--red)}
.theme-preview{display:flex;flex-direction:column;gap:6px;max-width:360px;margin-top:8px;padding:16px 18px;border-radius:14px;background:var(--tp-bg);color:var(--tp-text);border:1px solid color-mix(in srgb,var(--tp-accent) 35%,transparent);box-shadow:0 10px 30px -18px rgba(0,0,0,.5)}
.theme-preview .tp-title{font:400 22px var(--display)}
.theme-preview .tp-msg{font-size:14px;opacity:.75}
.theme-preview .tp-btn{align-self:flex-start;margin-top:4px;padding:6px 14px;border-radius:99px;border:1px solid var(--tp-accent);color:var(--tp-accent);font-size:13px;font-weight:600}