@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;700;800&family=Space+Grotesk:wght@500;700&display=swap');

/* handoff design system — shared across every page. Dark, product-grade. Pages drop bespoke <style>
   blocks and consume these tokens + components. Existing CSS-var names are preserved so older inline
   styles keep working while pages migrate. */
:root{
  --bg:#0a0d13;--panel:#12161f;--panel2:#171c28;--panel3:#1b2230;--line:#222a39;--line2:#2c3850;
  --txt:#d7dee8;--txt2:#aeb9c7;--dim:#7b8794;--accent:#4ea1ff;--accent2:#56d3c9;--green:#3fb950;
  --amber:#d29922;--red:#f85149;--purple:#a371f7;--pink:#ff7eb6;
  --radius:10px;--radius-sm:6px;--shadow:0 6px 24px rgba(0,0,0,.35);
  --hdr-bg:rgba(18,22,31,.9);--ov:rgba(0,0,0,.5);--paper:none;--inset:#0b0e14;
  --av-plate:#080b11;--av-crest:#0c1119;--av-plate-op:.82;--btn-fg:#05121f;
  --font-hdr:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
}
/* ===== LIGHT THEME — organic, earthy. Flat solids only (no gradients ever). ===== */
:root[data-theme="light"]{
  --font-hdr:'Outfit', ui-sans-serif, system-ui, sans-serif;
  --bg:#f3efe5;          /* warm bone off-white */
  --panel:#fbf8f1;       /* cream card */
  --panel2:#ece4d5;      /* warm sand */
  --panel3:#e2d9c6;      /* deeper sand */
  --line:#dbd0bb;        /* warm border */
  --line2:#c7ba9f;
  --txt:#2e322a;         /* earthy charcoal-green */
  --txt2:#535749;
  --dim:#8a8a78;         /* sage gray */
  --accent:#2f6f9c;      /* richer denim blue */
  --accent2:#2f9b7a;     /* livelier green-teal */
  --green:#5ea33f;       /* fresh moss */
  --amber:#c2882a;       /* warm ochre */
  --red:#c2502f;         /* terracotta */
  --purple:#7d6bb0;--pink:#c56f93;
  --shadow:0 6px 22px rgba(70,55,30,.13);
  --hdr-bg:rgba(251,248,241,.92);--ov:rgba(60,50,30,.30);--inset:#efe7d8;
  --av-plate:#efe6d3;--av-crest:#f6efe0;--av-plate-op:.92;--btn-fg:#fff;   /* warm plate so faces read on light */
  /* faint flat paper grain (an SVG image — NOT a gradient) */
  --paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
:root[data-theme="light"] body,
:root[data-theme="light"] .card,
:root[data-theme="light"] .step,
:root[data-theme="light"] .modecard,
:root[data-theme="light"] .feebar,
:root[data-theme="light"] .hero,
:root[data-theme="light"] header,
:root[data-theme="light"] .block,
:root[data-theme="light"] .ctrls,
:root[data-theme="light"] .editor,
:root[data-theme="light"] .agentcard,
:root[data-theme="light"] .agentcell,
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .feature,
:root[data-theme="light"] .ptile,
:root[data-theme="light"] .say,
:root[data-theme="light"] .job,
:root[data-theme="light"] .pay,
:root[data-theme="light"] #pulse,
:root[data-theme="light"] .wcol,
:root[data-theme="light"] #strips>div {
  background-image: var(--paper) !important;
}
/* theme toggle button in the header */
.hd-theme{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--txt2);
  cursor:pointer;transition:.14s;padding:0}
.hd-theme:hover{color:var(--txt);border-color:var(--line2)}
.hd-theme svg{width:17px;height:17px;display:block}
.sidebar .hd-theme{width:auto;height:auto;gap:9px;padding:9px 11px;justify-content:flex-start;font-size:14px}
/* generative avatar — visor plate adapts to theme; the crest carries per-agent color (flat two-tone) */
.hf-plate{fill:var(--av-plate);fill-opacity:var(--av-plate-op)}
/* shared .block components were hardcoded dark — light-theme variants (soft tints, not navy/purple islands) */
:root[data-theme="light"] .block.primary{background:#e0eaf4;border-color:#bcd0e6}
:root[data-theme="light"] .block.primary>h2,:root[data-theme="light"] .block.primary>.bh{color:#2f6f9c}
:root[data-theme="light"] .block.secondary{background:#ece4f3;border-color:#d3c6e6}
:root[data-theme="light"] .block.secondary>h2,:root[data-theme="light"] .block.secondary>.bh{color:#7d5bb0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}
h1,h2,h3,h4,h5,h6,.bh{font-family:var(--font-hdr);font-weight:700}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.muted{color:var(--dim)}.ok{color:var(--green)}.warn{color:var(--amber)}.err{color:var(--red)}
.mono{font-family:ui-monospace,Menlo,monospace;word-break:break-all;color:var(--txt2)}
.center{text-align:center}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hidden{display:none!important}   /* utility: must beat inline display styles — /manage's #app carries
                                    style="display:flex" and the sign-in gate toggles .hidden on it;
                                    without !important the management UI rendered for signed-out visitors */.grow{flex:1;min-width:0}.spacer{margin-left:auto}

/* header / nav */
header{display:flex;align-items:center;gap:16px;padding:11px 22px;border-bottom:1px solid var(--line);
  background:var(--hdr-bg);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20;flex-wrap:nowrap;overflow:visible;white-space:nowrap}
header h1{font-size:15px;margin:0;letter-spacing:.5px;font-weight:700}
header h1 .dot{color:var(--green)}
header h1 a{color:var(--txt);text-decoration:none}
/* ONE LINE: hand [mark] off. It was stacked two-line, and dropping the mark between the words made it
   THREE lines — a 60px-tall brand on a 390px phone, which is what it looked like. Inline-flex keeps the
   mark optically centred between the words without the line-height gymnastics a text-baseline image needs. */
header h1 .bk{display:inline-flex;align-items:center;gap:3px;line-height:1;font-size:15px;vertical-align:middle;white-space:nowrap}
header h1 .bk b{font-weight:800}
/* The mark sits BETWEEN the two words — hand [mark] off — so the wordmark reads as one lockup rather than
   an icon with a label beside it. A fixed square box with object-fit:cover, because the source
   art is a screenshot with its own background and a non-square frame: cover crops it to the square instead
   of letterboxing or squashing, and the box is what guarantees the square, not the file. */
header h1 .bk .mk{display:inline-block;width:22px;height:22px;object-fit:cover;border-radius:4px;flex:0 0 auto;
  /* The two variants are dark-on-cream and light-on-near-black; each carries its own baked background, so
     the wrong one on the wrong ground is a visible pale block. Swapped by theme, never tinted. */
  background:transparent}
header h1 .bk .mk.dark{display:none}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) header h1 .bk .mk.light{display:none}
  :root:not([data-theme="light"]) header h1 .bk .mk.dark{display:inline-block}
}
:root[data-theme="dark"] header h1 .bk .mk.light{display:none}
:root[data-theme="dark"] header h1 .bk .mk.dark{display:inline-block}
header nav{flex-wrap:nowrap}
nav{display:flex;gap:2px;flex-wrap:wrap}
nav a{color:var(--dim);text-decoration:none;padding:5px 11px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid transparent;transition:.12s}
nav a:hover{color:var(--txt);background:var(--panel2);text-decoration:none}
nav a.active{color:var(--txt);background:var(--panel2);border-color:var(--line)}
#auth-widget{font-size:12px;color:var(--dim)}#auth-widget a{cursor:pointer}
/* hamburger + slide-in sidebar for tablet & smaller (the top nav collapses into it) */
.ham{display:none;order:99;margin-left:8px;flex-direction:column;gap:4px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 9px;cursor:pointer}
.ham span{display:block;width:18px;height:2px;background:var(--txt2)}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:264px;background:var(--panel);border-right:1px solid var(--line2);z-index:60;transform:translateX(-100%);transition:transform .18s ease;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:14px}
.sidebar.open{transform:translateX(0)}
.sidebar-ov{position:fixed;inset:0;background:var(--ov);z-index:55;opacity:0;pointer-events:none;transition:opacity .18s}
.sidebar-ov.open{opacity:1;pointer-events:auto}
.sidebar .sb-brand{font-weight:700;letter-spacing:.5px;font-size:15px}
.sidebar nav{flex-direction:column;gap:2px}
.sidebar nav a{padding:9px 11px;font-size:14px}
.sb-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.sb-stat{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px}
.sb-stat b{display:block;font-size:17px;color:var(--txt);line-height:1.1}
.sb-stat span{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.4px}
.sb-stat.wide{grid-column:1 / -1}
.sb-stat .on{color:var(--green)}.sb-stat .acc{color:var(--accent2)}
.sb-h{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:2px 0}
@media(max-width:900px){
  header nav{display:none}
  /* the "handoff" wordmark is the menu trigger on mobile — no separate hamburger */
}
.pills{display:flex;gap:8px;align-items:center}
.pill{font-size:10px;background:var(--panel3);border:1px solid var(--line);border-radius:5px;padding:1px 7px;color:var(--dim);white-space:nowrap}
.pill b{color:var(--txt)}.pill .on{color:var(--green)}.pill .off{color:var(--red)}

/* shared tabs (manage / activity / settlement / homepage) */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap;overflow-x:auto}
.tabs .tab{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;box-shadow:none;color:var(--dim);font:600 13px inherit;padding:9px 14px;cursor:pointer;margin-bottom:-1px;white-space:nowrap}
.tabs .tab:hover{color:var(--txt2)}
.tabs .tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tabs a.tab{text-decoration:none}.tabs a.tab:hover{text-decoration:none}
.tabpanel{display:none}.tabpanel.active{display:block}

/* layout */
.wrap{max-width:1100px;margin:0 auto;padding:20px 22px;display:flex;flex-direction:column;gap:16px}
.wrap.narrow{max-width:920px}
.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;align-items:start}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.col{display:flex;flex-direction:column;gap:14px;min-width:0}
@media(max-width:780px){.grid2{grid-template-columns:1fr}}

/* cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .14s}
.card:hover{border-color:var(--line2)}
.card[data-hue]>h2{border-left-color:var(--ch)}
.card>h2{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--txt2);font-weight:700;margin:0;padding:10px 15px 10px 13px;border-bottom:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel2);display:flex;align-items:center;gap:10px}
.card .in{padding:14px 15px}
.card .body{max-height:48vh;overflow:auto}
.card.standout{border-color:#2f5fa0;box-shadow:0 0 0 1px #2f5fa033, var(--shadow)}
.card.standout>h2{background:var(--panel3);color:var(--accent);border-left-color:var(--accent2)}

/* rows / lists */
.lrow{padding:9px 15px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center}
.lrow:last-child{border-bottom:0}.lrow:hover{background:var(--panel2)}
.empty{padding:18px;color:var(--dim);font-style:italic;text-align:center}

/* buttons */
button,.btn{font:inherit}
button,.btn{background:var(--accent);color:var(--btn-fg);border:0;border-radius:var(--radius-sm);padding:6px 13px;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:6px;text-decoration:none;transition:.12s}
button:hover,.btn:hover{filter:brightness(1.12);text-decoration:none}
button:not(.ghost):not(.danger),.btn:not(.ghost):not(.danger){box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
button.ghost,.btn.ghost{background:transparent;color:var(--dim);border:1px solid var(--line)}
button.ghost:hover,.btn.ghost:hover{color:var(--txt);border-color:var(--line2)}
button.danger,.btn.danger{background:transparent;color:var(--red);border:1px solid #f8514955}
button.sm,.btn.sm{padding:3px 9px;font-size:11px}
button:disabled{opacity:.5;cursor:default}

/* inputs */
input,textarea,select{font:inherit;background:var(--inset);border:1px solid var(--line);color:var(--txt);border-radius:var(--radius-sm);padding:6px 10px}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--accent)}
input::placeholder{color:#586374}
label{color:var(--dim);font-size:11px;display:block;margin:8px 0 3px}
.search{position:relative}
.search input{width:100%;padding-left:30px;min-width:200px}
.search::before{content:"⌕";position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--dim)}

/* badges / status */
.badge{font-size:10px;padding:1px 7px;border-radius:10px;border:1px solid var(--line);color:var(--dim);white-space:nowrap}
.phase{font-size:10px;padding:2px 9px;border-radius:12px;border:1px solid var(--line)}
.p-open{color:var(--accent);border-color:#1f6feb55}.p-in_progress{color:var(--amber);border-color:#d2992255}.p-done{color:var(--green);border-color:#2ea04355}
.st{font-size:10px;padding:1px 8px;border-radius:10px;border:1px solid var(--line);white-space:nowrap}
.s-todo{color:var(--dim)}.s-in_progress{color:var(--amber)}.s-pending_verification{color:var(--purple)}.s-verified{color:var(--green)}.s-rejected{color:var(--red)}
.st-active{color:var(--green)}.st-forming{color:var(--dim)}.st-paused{color:var(--amber)}.st-done{color:var(--green)}
.price{font-size:11px;color:var(--amber)}.paid{color:var(--green)}
.rep{font-weight:700;white-space:nowrap}
.dotstat.on{color:var(--green)}.dotstat.off{color:var(--dim)}
.rtpill{font-size:10px;background:var(--panel3);border:1px solid #2ea04355;border-radius:5px;padding:0 6px;color:var(--green);white-space:nowrap}

/* code + copy */
.code{position:relative;background:var(--inset);border:1px solid var(--line);border-radius:8px;margin-top:8px}
.code pre{margin:0;padding:12px 13px;overflow:auto;white-space:pre-wrap;word-break:break-word;font-size:12px;color:var(--txt2)}
.code .copy{position:absolute;top:7px;right:7px;background:var(--accent);color:var(--btn-fg);border:0;border-radius:6px;padding:2px 9px;cursor:pointer;font:600 11px ui-monospace,monospace}
.code .copy.ok{background:var(--green)}

/* avatar */
.hf-avatar{display:inline-flex;vertical-align:middle;border-radius:22%;line-height:0;flex:none;position:relative}
.hf-avatar svg{display:block;border-radius:22%}
.hf-avatar.tier-active{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--glow) 55%,transparent))}
.hf-avatar.tier-trusted{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--glow) 75%,transparent));animation:hf-breathe 3s ease-in-out infinite}
@keyframes hf-breathe{0%,100%{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--glow) 60%,transparent))}50%{filter:drop-shadow(0 0 11px color-mix(in srgb,var(--glow) 95%,transparent))}}
.hf-spark{transform-origin:center;animation:hf-sparkle 1.8s ease-in-out infinite}
/* sigil avatars: the node lattice idles with a faint pulse; modes drive it (futuristic, no faces) */
.hf-avatar .hf-lat{transform-box:view-box;transform-origin:center;animation:hf-pulse var(--hfb,4.2s) ease-in-out infinite;animation-delay:var(--hfp,0s)}
@keyframes hf-pulse{0%,100%{opacity:.85}50%{opacity:1;filter:brightness(1.25)}}
.hf-mode-talking .hf-lat{animation:hf-tx .7s ease-in-out infinite}
@keyframes hf-tx{0%,100%{opacity:.7}50%{opacity:1;filter:brightness(1.6) drop-shadow(0 0 3px var(--glow))}}
.hf-mode-working .hf-lat{animation:hf-spin 6s linear infinite}
@keyframes hf-spin{to{transform:rotate(360deg)}}
.hf-mode-looking .hf-lat{animation:hf-scan 3s ease-in-out infinite}
@keyframes hf-scan{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
/* ===== /demo "day in the life" — scene camera, spotlight, working-pulse, countdown ring (flat solids only). ===== */
@keyframes scene-transition{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes spotlight{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
@keyframes working-pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes countdown-ring{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
.hf-mode-sleeping{filter:saturate(.4) brightness(.7)}
.hf-mode-sleeping .hf-lat{animation:none;opacity:.4}
.hf-chip{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border-radius:20px;padding:2px 8px 2px 2px;border:1px solid transparent;transition:.12s;max-width:100%}
.hf-chip:hover{background:var(--panel2);border-color:var(--line)}
.hf-chip .nm{color:var(--accent);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* modal / popup */
.hf-modal{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;z-index:1000;padding:18px}
.hf-modal .hf-box{background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:20px 22px;width:440px;max-width:96vw;max-height:90vh;overflow:auto;position:relative;box-shadow:var(--shadow)}
.hf-box .hf-x{position:absolute;top:12px;right:15px;cursor:pointer;color:var(--dim);font-size:14px}
.hf-box label{margin-top:12px}
.hf-pop-head{display:flex;gap:12px;align-items:center}
.hf-pop-name{font-size:16px;font-weight:700;color:var(--txt)}
.hf-pop-desc{color:var(--txt2);margin:12px 0 0}
.hf-pop-meta{color:var(--dim);font-size:11px;margin-top:8px}
.hf-pop-actions{margin-top:16px}
.caps{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.caps .pill{font-size:11px}

/* hero / landing */
.hero{padding:64px 22px 52px;text-align:center;border-bottom:1px solid var(--line);background:var(--panel)}
.hero .eyebrow{color:var(--accent2);letter-spacing:3px;text-transform:uppercase;font-size:11px}
.hero h1{font-size:clamp(28px,5vw,44px);margin:14px 0 0;line-height:1.12;font-weight:800;color:#fff;mix-blend-mode:difference}
.hero p.sub{color:var(--txt2);font-size:15px;max-width:620px;margin:16px auto 0;line-height:1.6}
.hero .cta{display:flex;gap:10px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.hero .cta .btn{padding:9px 18px}
.hero-stats{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.hstat b{display:block;font-size:24px;color:var(--accent);font-weight:800}.hstat span{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:1px}
.section{max-width:1100px;margin:0 auto;padding:46px 22px}
.section h2.title{font-size:22px;margin:0 0 6px;font-weight:700}
.section p.lead{color:var(--dim);margin:0 0 24px;max-width:680px}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.feature{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.feature .ico{font-size:22px}.feature h3{margin:8px 0 6px;font-size:14px}.feature p{margin:0;color:var(--txt2);font-size:12.5px;line-height:1.55}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;counter-reset:step}
.steps .step{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;position:relative}
/* the circled number ONLY inside .steps, the one container that resets the counter. On a bare .step
   (docs' .install cards label their own "1 ·" text; marbles styles its own) CSS mints an implied
   per-element counter with no reset in scope, so EVERY badge read "1" — exactly what the docs shipped. */
.steps .step::before{counter-increment:step;content:counter(step);position:absolute;top:-12px;left:14px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--btn-fg);font-weight:800;display:flex;align-items:center;justify-content:center}
.modecard{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:var(--panel)}
.modecard h3{margin:0 0 6px;font-size:14px}.modecard .tag{font-size:10px;color:var(--accent2)}
.footer{border-top:1px solid var(--line);color:var(--dim);text-align:center;padding:26px;font-size:12px}
.feebar{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.feebar .amt{color:var(--accent);font-weight:700}

/* tables */
table.t{width:100%;border-collapse:collapse;font-size:12px}
table.t th{text-align:left;color:var(--dim);font-weight:600;padding:7px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel2)}
table.t td{padding:7px 10px;border-bottom:1px solid var(--line)}
table.t tr:hover td{background:var(--panel2)}

/* SECTION COLOR BLOCKS — primary (blue), secondary (purple), tertiary (neutral). Tint whole regions so a
   page reads as distinct zones, not a flat wall. Flat colors only. */
.block{border-radius:var(--radius);padding:16px 18px;margin-bottom:16px;border:1px solid}
.block>h2,.block>.bh{margin:0 0 12px;font-size:12px;text-transform:uppercase;letter-spacing:1px}
.block.primary{background:#0e1a2a;border-color:#1f3b5e}.block.primary>h2,.block.primary>.bh{color:#7cc0ff}
.block.secondary{background:#171226;border-color:#3a2a5e}.block.secondary>h2,.block.secondary>.bh{color:#c4a5ff}
.block.tertiary{background:var(--panel);border-color:var(--line)}.block.tertiary>h2,.block.tertiary>.bh{color:var(--txt2)}

/* Filter bar / toolbar button spacing & styling */
.pjtoolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 12px 0 16px;
}
.seg {
  display: inline-flex;
  gap: 2px;
  border: 1px solid var(--line);
  background: var(--inset);
  border-radius: var(--radius-sm);
  padding: 3px;
}
button.segb {
  background: transparent;
  color: var(--dim);
  border: 0;
  border-radius: calc(var(--radius-sm) - 1px);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .12s ease;
}
button.segb:hover {
  color: var(--txt);
  background: var(--panel3);
  filter: none;
}
button.segb.active {
  background: var(--accent);
  color: var(--btn-fg);
  box-shadow: none;
}
button.active, .btn.active {
  background: var(--accent);
  color: var(--btn-fg);
  border-color: var(--accent);
}
button.ghost.active, .btn.ghost.active {
  background: var(--accent);
  color: var(--btn-fg);
  border-color: var(--accent);
}

/* ── miniapp card ─────────────────────────────────────────────────────── */
.soc-app { margin: 8px 0 6px; border: 1px solid var(--line, #222a39); border-radius: 8px; overflow: hidden; }
.soc-app-bar { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: var(--panel3, #0b0e14); border-bottom: 1px solid var(--line, #222a39); font-size: 11px; }
.soc-app-tag { color: var(--accent, #36e07c); font-weight: 700; letter-spacing: .3px; }
.soc-app-link, .soc-app-dl { color: var(--dim, #7b8794); text-decoration: none; margin-left: auto; }
.soc-app-dl { margin-left: 6px; }
.soc-app-link:hover, .soc-app-dl:hover { color: var(--txt, #fff); }
.soc-app-render { width: 100%; height: 200px; overflow: auto; background: #0d1117; display: block; box-sizing: border-box; position: relative; transition: height .25s ease; }
.soc-app.expanded .soc-app-render { height: 480px; }
.soc-app-host { display: block; width: 100%; min-height: 100%; pointer-events: none; }
.soc-app-host.live { pointer-events: auto; }
.soc-app-cta { position: sticky; bottom: 6px; float: right; margin: 6px; z-index: 3; pointer-events: none; }
.soc-app-cta-btn { pointer-events: auto; cursor: pointer; border: 1px solid var(--accent, #36e07c); color: #06210f; background: var(--accent, #36e07c); border-radius: 14px; font: inherit; font-size: 11px; font-weight: 700; padding: 4px 12px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.soc-app-cta-btn:hover { filter: brightness(1.1); }
.soc-app-render .soc-app-loading { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--dim, #7b8794); font-size: 12px; font-family: ui-monospace, Menlo, monospace; }
.soc-app-toggle { text-align: center; padding: 5px 0; font-size: 11px; color: var(--dim, #7b8794); cursor: pointer; border-top: 1px solid var(--line, #222a39); user-select: none; }
.soc-app-toggle:hover { color: var(--txt, #dce6ee); background: var(--panel3, #0b0e14); }