/* Sirius dashboard - minimalist silver glass: near-black, frosted panels, chrome accents. */
:root {
  --bg: #050507; --bg-2: #0a0b0e;
  --panel: rgba(18, 20, 24, .62); --panel-solid: #111317; --panel-2: rgba(255, 255, 255, .03); --panel-3: rgba(255, 255, 255, .055);
  --border: rgba(255, 255, 255, .08); --border-2: rgba(255, 255, 255, .14);
  --text: #eef1f5; --muted: #8f97a3; --dim: #5c636d;
  --accent: #b9c3cf; --accent-2: #e4eaf1; --accent-3: #9fb3cb; --glow: rgba(220, 230, 242, .22);
  --ok: #6fd6a4; --warn: #e9c46a; --danger: #ef6b78;
  --grad: linear-gradient(180deg, #ffffff 0%, #e3e8ee 38%, #9aa4b1 52%, #d9dfe6 70%, #ffffff 100%);
  --chrome: linear-gradient(180deg, #fbfcfd 0%, #dfe4ea 46%, #b3bcc7 54%, #e6eaef 100%);
  --edge: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.04) 40%, rgba(255,255,255,.1));
  --radius: 16px; --radius-sm: 10px;
  --shadow: 0 18px 50px -18px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05);
  --sidebar: 264px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-2); text-decoration: none; }
h1, h2, h3 { letter-spacing: -.02em; }
h1 { font-size: 30px; line-height: 1.15; margin: 0 0 6px; font-weight: 800; }
h2 { font-size: 17px; margin: 0; font-weight: 700; }
h3 { font-size: 16px; margin: 0 0 6px; }
code { font-family: var(--mono); font-size: .88em; background: var(--panel-3); padding: 1px 6px; border-radius: 6px; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); } .small { font-size: 13px; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }

/* --- backdrop: the glass star, very quiet, behind everything --- */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 70% -10%, #15171c 0%, var(--bg) 60%); }
.backdrop .star { position: absolute; top: -8vh; right: -12vw; width: min(1400px, 110vw); aspect-ratio: 1472 / 760;
  background: url("/assets/sirius_backdrop.jpg") center / cover no-repeat; opacity: .18; filter: saturate(.45) contrast(1.15) brightness(1.05);
  mask-image: radial-gradient(ellipse 55% 60% at 55% 42%, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 55% 42%, #000 20%, transparent 72%); animation: shimmer 18s ease-in-out infinite alternate; }
.orb { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .12; background: #cfd8e4; }
.o1 { width: 520px; height: 520px; bottom: -300px; left: -200px; }
.o2 { width: 420px; height: 420px; bottom: -260px; right: -160px; opacity: .07; }
.grain { position: absolute; inset: 0; opacity: .035; mix-blend-mode: overlay;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes shimmer { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-2vw, 1vh, 0) scale(1.04); opacity: .24; } }
@media (prefers-reduced-motion: reduce) { .backdrop .star { animation: none; } * { transition: none !important; } }

/* glass: frosted panels with a thin light edge on top */
.card, .stat, .feature, .side-card, .server-card, .cmd-row, .preview-card, .fn-group-head + .cmd-list .cmd-row {
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
.card, .stat, .feature, .side-card, .server-card, .preview-card { box-shadow: var(--shadow); }

/* --- buttons --- */
.button { display: inline-flex; align-items: center; gap: 8px; justify-content: center; border: 1px solid var(--border-2);
  background: var(--panel-3); color: var(--text); border-radius: 11px; padding: 9px 16px; font: inherit; font-weight: 600;
  font-size: 14px; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s, border-color .2s; white-space: nowrap; }
.button:hover { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.09); }
.button:active { transform: translateY(1px); }
.button.primary { background: var(--chrome); border-color: rgba(255,255,255,.55); color: #0c0d10;
  box-shadow: 0 8px 26px -10px rgba(230,238,248,.45), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.18); }
.button.primary:hover { box-shadow: 0 10px 34px -8px rgba(230,238,248,.6), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.18); transform: translateY(-1px); }
.button.ghost { background: transparent; }
.button.danger, .button.ghost.danger { color: #ff8f9b; }
.button.danger:hover { border-color: rgba(239, 91, 107, .5); background: rgba(239, 91, 107, .1); }
.button.small { padding: 6px 11px; font-size: 13px; border-radius: 9px; }
.button.lg { padding: 13px 22px; font-size: 16px; border-radius: 14px; }
.button .i { width: 16px; height: 16px; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--muted); cursor: pointer; transition: .15s; padding: 0; }
.icon-btn:hover { color: var(--text); background: var(--panel-3); border-color: var(--border); }
.icon-btn.danger:hover { color: var(--danger); background: rgba(239, 91, 107, .1); }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }

/* --- public top nav / landing --- */
.topnav { display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto; padding: 22px 24px; }
.public-main { max-width: 1180px; margin: 0 auto; padding: 0 24px 80px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); }
.brand img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(220,232,245,.35)); }
.brand strong { font-size: 15px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; display: block; line-height: 1.1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand small { display: block; color: var(--muted); font-size: 12px; }
.landing { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding: 56px 0 72px; }
.landing h1 { font-size: clamp(36px, 5.4vw, 62px); line-height: 1.04; letter-spacing: -.035em; margin: 18px 0; }
.lead { font-size: 18px; color: var(--muted); max-width: 540px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #dfe5ec; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); }
.cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 30px; }
.landing-demo { position: relative; }
.demo-glow { position: absolute; inset: 8% 4%; background: radial-gradient(circle, rgba(225,233,243,.5), transparent 70%); filter: blur(60px); opacity: .35; border-radius: 40px; }
.dc.demo { position: relative; border-radius: 18px; padding: 18px 16px 20px; border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); transform: perspective(1200px) rotateY(-8deg) rotateX(4deg); animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: perspective(1200px) rotateY(-6deg) rotateX(2deg) translateY(-10px); } }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; backdrop-filter: blur(14px);
  transition: transform .2s, border-color .2s; }
.feature:hover { transform: translateY(-3px); border-color: rgba(222, 230, 240, .35); }
.feature p { color: var(--muted); margin: 0; }
.f-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; margin-bottom: 14px; color: #0c0d10;
  background: var(--chrome); box-shadow: 0 6px 18px -8px rgba(230,238,248,.5), inset 0 1px 0 #fff; }
.f-icon .i { width: 22px; height: 22px; }

/* --- app shell --- */
.shell { display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; width: var(--sidebar); flex: none; display: flex; flex-direction: column;
  padding: 20px 14px 14px; background: rgba(7, 8, 10, .78); border-right: 1px solid var(--border); backdrop-filter: blur(18px); z-index: 40; }
.sidebar .brand { padding: 4px 8px 20px; }
.nav { flex: 1; overflow-y: auto; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; }
.nav-label { text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--dim); padding: 16px 10px 8px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 11px; color: var(--muted); font-weight: 500;
  font-size: 14px; position: relative; transition: .15s; }
.nav a:hover { color: var(--text); background: var(--panel-2); }
.nav a.active { color: #fff; background: linear-gradient(90deg, rgba(255,255,255,.09), rgba(255,255,255,.015)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.nav a.active::before { content: ""; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--grad); }
.nav a.active .i { color: var(--accent-2); }
.server-link img, .server-link .initial { width: 24px; height: 24px; border-radius: 8px; flex: none; }
.server-link .initial { display: grid; place-items: center; background: var(--panel-3); font-size: 12px; font-weight: 700; color: var(--text); }
.server-link span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me { display: flex; align-items: center; gap: 10px; padding: 10px; margin-top: 10px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--border); }
.me .avatar { width: 34px; height: 34px; border-radius: 50%; }
.me-text { flex: 1; min-width: 0; line-height: 1.25; }
.me-text strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-text small { color: var(--muted); font-size: 12px; }
.me form { margin: 0; }
.main { flex: 1; min-width: 0; }
.content { max-width: 1240px; margin: 0 auto; padding: 30px 34px 90px; animation: rise .45s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.mobilebar { display: none; }
.scrim { display: none; }

/* --- page pieces --- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.crumbs { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; margin-bottom: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--text); }
.crumbs .i { width: 14px; height: 14px; opacity: .6; }
.section-title { display: flex; align-items: center; gap: 9px; margin: 34px 0 14px; }
.section-title .i { color: var(--accent-2); }
.card { min-width: 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 18px;
  backdrop-filter: blur(14px); box-shadow: var(--shadow); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-head h2 { display: flex; align-items: center; gap: 9px; }
.card-head h2 .i { color: var(--accent-2); }
.card-head p { margin: 6px 0 0; }
.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); padding: 3px 9px; border-radius: 99px;
  background: var(--panel-3); border: 1px solid var(--border); }
.chip .i { width: 14px; height: 14px; }
.badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px;
  background: var(--panel-3); color: var(--muted); border: 1px solid var(--border); }
.badge.owner { background: var(--chrome); color: #0c0d10; border-color: rgba(255,255,255,.5); }
.badge.admin { background: rgba(222,230,240,.14); color: #e6ecf3; border-color: rgba(222,230,240,.35); }
.badge.role { background: rgba(160,178,204,.14); color: #cfd8e3; border-color: rgba(160,178,204,.35); }
.gicon { width: 48px; height: 48px; border-radius: 16px; flex: none; object-fit: cover; }
.gicon.lg { width: 64px; height: 64px; border-radius: 20px; }
.gicon.xl { width: 84px; height: 84px; border-radius: 24px; box-shadow: 0 10px 30px -8px rgba(0,0,0,.7); border: 3px solid rgba(255,255,255,.08); }
.gicon.initial { display: grid; place-items: center; background: linear-gradient(135deg, #1d2026, #2a2e35); font-weight: 800; font-size: 26px; color: #e8edf2; }
.gicon.crown { display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.14), rgba(255,255,255,.02) 70%), #0b0c0f; color: #fff; }
.gicon.crown .i { width: 40px; height: 40px; }
.notice { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 12px 16px; margin-bottom: 18px;
  background: var(--panel-3); border: 1px solid var(--border-2); animation: rise .3s ease both; }
.notice ul { margin: 6px 0 0; padding-left: 18px; }
.notice.ok { background: rgba(62, 207, 142, .09); border-color: rgba(62, 207, 142, .35); color: #b7f3d6; }
.notice.ok .i { color: var(--ok); }
.notice.err { background: rgba(239, 91, 107, .09); border-color: rgba(239, 91, 107, .38); color: #ffd0d5; }
.notice.err .i { color: var(--danger); margin-top: 2px; }
.empty { text-align: center; padding: 48px 20px; border: 1px dashed var(--border-2); border-radius: var(--radius); background: var(--panel-2); color: var(--muted); }
.empty > .i, .empty-art .i { width: 34px; height: 34px; color: var(--accent-2); margin-bottom: 10px; }
.empty-art { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; margin-bottom: 8px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.empty-art .i { margin: 0; }
.empty h3 { color: var(--text); font-size: 19px; }
.empty p { max-width: 440px; margin: 0 auto 16px; }
.empty.small { padding: 26px 16px; }
.empty.small > .i { width: 24px; height: 24px; }

/* --- owner banner --- */
.owner-banner { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius); margin-bottom: 22px; color: var(--text);
  background: linear-gradient(120deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); border: 1px solid var(--border-2);
  transition: transform .2s, border-color .2s; position: relative; overflow: hidden; }
.owner-banner:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); }
.ob-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--chrome); color: #0c0d10; flex: none; }
.ob-icon .i { width: 24px; height: 24px; }
.ob-text { flex: 1; } .ob-text strong { display: block; font-size: 16px; } .ob-text small { color: var(--muted); }
.ob-arrow { color: var(--muted); transition: transform .2s; }
.owner-banner:hover .ob-arrow { transform: translateX(4px); color: var(--text); }

/* --- server cards --- */
.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.server-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; color: var(--text);
  background: var(--panel); border: 1px solid var(--border); backdrop-filter: blur(14px); transition: transform .22s, border-color .22s, box-shadow .22s; }
a.server-card:hover { transform: translateY(-4px); border-color: rgba(222,230,240,.45); box-shadow: 0 18px 40px -16px rgba(190,200,212,.55); }
.sc-banner { height: 74px; position: relative; overflow: hidden; background: #0c0d10 url("/assets/sirius_backdrop.jpg") center 40% / 260% auto; }
.sc-banner::before { content: ""; position: absolute; inset: 0; background: var(--hero-img) center / cover; filter: blur(18px) saturate(0) brightness(1.2);
  transform: scale(1.6); opacity: .18; mix-blend-mode: screen; }
.sc-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,7,0), rgba(8,9,11,.9)); }
.sc-body { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.server-card .sc-body .gicon { margin-top: -32px; position: relative; z-index: 1; border: 3px solid var(--panel-solid); }
.sc-name { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-go { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600;
  color: #fff; padding: 4px 8px 4px 11px; border-radius: 99px; background: rgba(0,0,0,.35); backdrop-filter: blur(6px); opacity: 0; transform: translateX(-6px); transition: .2s; }
.sc-go .i { width: 14px; height: 14px; }
a.server-card:hover .sc-go { opacity: 1; transform: none; }
.server-card.invite { border-style: dashed; background: var(--panel-2); }
.server-card.invite .sc-body { padding-top: 18px; }
.server-card.invite .gicon { margin-top: 0; opacity: .8; }
.server-card.invite .button { align-self: flex-start; }

/* --- server hero header + tabs --- */
.hero-head { position: relative; border-radius: 22px; overflow: hidden; margin-bottom: 22px; border: 1px solid var(--border-2);
  background: #08090b; box-shadow: var(--shadow); }
.hero-bg { position: absolute; inset: 0; background: url("/assets/sirius_backdrop.jpg") 62% 24% / cover no-repeat;
  filter: saturate(.4) contrast(1.1); opacity: .9; }
.hero-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,9,11,.94) 0%, rgba(8,9,11,.7) 40%, rgba(8,9,11,.12) 100%),
  linear-gradient(180deg, transparent 50%, rgba(8,9,11,.85)); }
.hero-head.owner .hero-bg { background-position: 60% 45%; opacity: .7; }
.hero-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 20px; padding: 28px 28px 18px; }
.hero-text { min-width: 0; }
.hero-text h1 { overflow: hidden; text-overflow: ellipsis; }
.tabs { position: relative; z-index: 1; display: flex; gap: 4px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
.tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px; color: var(--muted); font-weight: 600; font-size: 14px;
  border-bottom: 2px solid transparent; white-space: nowrap; transition: .15s; }
.tabs a:hover { color: var(--text); }
.tabs a.active { color: #fff; border-bottom: 2px solid #e8edf3; box-shadow: 0 6px 14px -8px rgba(255,255,255,.5); }
.tabs a.active .i { color: var(--accent-2); }

/* --- stats --- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat { position: relative; padding: 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border);
  backdrop-filter: blur(14px); overflow: hidden; }
.stat::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); }
.stat strong { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin-top: 10px; line-height: 1; }
.stat small { color: var(--muted); font-size: 13px; }
.s-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--accent-2);
  background: rgba(222,230,240,.1); border: 1px solid rgba(222,230,240,.22); }
.status-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: -4px 0 22px;
  padding: 10px 16px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); }
.status-strip .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--dim); }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); }
.live-dot.on { background: var(--ok); box-shadow: 0 0 0 0 rgba(62,207,142,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(62,207,142,0); } 100% { box-shadow: 0 0 0 0 rgba(62,207,142,0); } }

/* --- lists --- */
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li > a, .mini-list li > span { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text); }
.mini-list li > a:hover { background: var(--panel-2); }
.mini-list .muted { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.mini-list .uses { font-size: 12.5px; color: var(--muted); }
code.cmd { color: #e6ecf3; background: rgba(222,230,240,.1); border: 1px solid rgba(222,230,240,.2); white-space: nowrap; }
.quick { display: grid; gap: 8px; }
.quick a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border); transition: .15s; }
.quick a:hover { border-color: rgba(222,230,240,.4); transform: translateX(3px); }
.quick a > .i { color: var(--accent-2); width: 20px; height: 20px; }
.quick strong { display: block; font-size: 14px; } .quick small { color: var(--muted); font-size: 12.5px; }
details.fold summary { cursor: pointer; display: flex; align-items: center; gap: 9px; font-weight: 600; list-style: none; }
details.fold summary::-webkit-details-marker { display: none; }
details.fold[open] summary { margin-bottom: 12px; }
.count { font-size: 12px; padding: 1px 8px; border-radius: 99px; background: var(--panel-3); color: var(--muted); }

/* --- activity timeline --- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--border-2), transparent); }
.timeline li { display: flex; gap: 14px; padding: 8px 0; position: relative; }
.tl-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none; z-index: 1; color: var(--accent-2);
  background: var(--panel-solid); border: 1px solid var(--border-2); }
.tl-dot .i { width: 15px; height: 15px; }
.tl-delete .tl-dot { color: var(--danger); } .tl-create .tl-dot { color: var(--ok); } .tl-test .tl-dot { color: var(--accent-3); }
.tl-text { font-size: 14px; } .tl-meta { font-size: 12.5px; color: var(--muted); }
.tl-meta strong { color: var(--text); font-weight: 600; }

/* --- access roles --- */
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 18px; }
.role { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: var(--panel-2);
  border: 1px solid var(--border); cursor: pointer; transition: .15s; }
.role:hover { border-color: var(--border-2); }
.role input { position: absolute; opacity: 0; pointer-events: none; }
.role .swatch { width: 12px; height: 12px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 10px var(--rc); flex: none; }
.role-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.role .switch, .toggle { position: relative; width: 38px; height: 22px; border-radius: 99px; background: rgba(255,255,255,.12); flex: none;
  transition: background .2s; border: 0; padding: 0; cursor: pointer; }
.role .switch::after, .toggle span { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .2s; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.role input:checked ~ .switch, .toggle.on { background: var(--chrome); }
.role input:checked ~ .switch::after, .toggle.on span { transform: translateX(16px); }
.role input:focus-visible ~ .switch { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.role:has(input:checked) { border-color: rgba(222,230,240,.4); background: rgba(222,230,240,.07); }
.role.locked { cursor: default; opacity: .75; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* --- command list --- */
.toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .search { flex: 1; min-width: 220px; }
.search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); }
.search:focus-within { border-color: rgba(222,230,240,.5); box-shadow: 0 0 0 3px rgba(222,230,240,.12); }
.search .i { color: var(--muted); }
.search input { flex: 1; background: none; border: 0; color: var(--text); font: inherit; padding: 10px 0; outline: none; }
.hint { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: -4px 0 16px; }
.hint .i { color: var(--accent-2); flex-shrink: 0; }
.cmd-list { display: grid; gap: 10px; }
.cmd-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 14px; background: var(--panel);
  border: 1px solid var(--border); backdrop-filter: blur(14px); transition: border-color .2s, transform .2s; animation: rise .35s ease both; }
.cmd-row:hover { border-color: var(--border-2); }
.cmd-row.off { opacity: .6; }
.cmd-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 8px; color: var(--text); border-radius: 10px; }
.cmd-swatch { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex: none; color: var(--accent-2);
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.025)); border: 1px solid var(--border-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 16px -10px rgba(0,0,0,.8); }
.cmd-text { flex: 1; min-width: 0; }
.cmd-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cmd-desc { display: block; color: var(--muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-meta { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.cmd-actions { display: flex; align-items: center; gap: 4px; }
.cmd-actions form { margin: 0; display: flex; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px;
  background: var(--panel-3); color: var(--muted); border: 1px solid var(--border); }
.tag .i { width: 12px; height: 12px; }
.tag.zap { color: #ffd58a; background: rgba(245,184,74,.12); border-color: rgba(245,184,74,.3); }
.muted-tag { color: #ff9aa5; background: rgba(239,91,107,.1); border-color: rgba(239,91,107,.3); }

/* --- error --- */
.error-card { max-width: 520px; margin: 10vh auto; text-align: center; padding: 44px 32px; border-radius: 24px; background: var(--panel);
  border: 1px solid var(--border); backdrop-filter: blur(14px); box-shadow: var(--shadow); }
.err-code { font-size: 96px; font-weight: 800; letter-spacing: -.05em; line-height: 1; margin-bottom: 14px; }
.error-card p { color: var(--muted); font-size: 16px; margin-bottom: 22px; }
.error-card .button .i { transform: rotate(180deg); }

/* --- toasts --- */
.toasts { position: fixed; right: 20px; bottom: 90px; display: grid; gap: 8px; z-index: 90; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: #16181c; border: 1px solid var(--border-2);
  box-shadow: var(--shadow); animation: rise .25s ease both; font-size: 14px; max-width: 360px; }
.toast.ok .i { color: var(--ok); } .toast.err .i { color: var(--danger); }

/* ======================= command editor ======================= */
.editor-page .content { max-width: 1480px; }
.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); gap: 22px; align-items: start; }
.editor-side { position: sticky; top: 18px; max-height: calc(100vh - 110px); overflow-y: auto; display: grid; gap: 14px; scrollbar-width: thin;
  padding-bottom: 4px; }
.ed-card { min-width: 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px;
  backdrop-filter: blur(14px); box-shadow: var(--shadow); }
.ed-card > .ed-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.ed-head h2 { flex: 1; display: flex; align-items: center; gap: 9px; font-size: 15.5px; }
.ed-head h2 .i { color: var(--accent-2); }
.ed-body { padding: 18px 20px 20px; display: grid; gap: 16px; }
.row { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fld { display: grid; gap: 6px; min-width: 0; }
.fld > label, .lbl { min-height: 19px; font-size: 12.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.lbl .cnt { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--dim); }
.lbl .cnt.over { color: var(--danger); }
.inp { position: relative; display: flex; align-items: stretch; background: rgba(0,0,0,.25); border: 1px solid var(--border-2);
  border-radius: 11px; transition: border-color .15s, box-shadow .15s; }
.inp:focus-within { border-color: rgba(222,230,240,.6); box-shadow: 0 0 0 3px rgba(222,230,240,.14); }
.inp.bad { border-color: rgba(239,91,107,.6); }
.inp input, .inp textarea, .inp select { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: inherit; font-size: 14.5px;
  padding: 10px 12px; outline: none; resize: vertical; width: 100%; }
.inp textarea { min-height: 88px; line-height: 1.5; }
.inp textarea.big { min-height: 150px; }
.inp .prefix { display: grid; place-items: center; padding: 0 0 0 12px; color: var(--accent-2); font-family: var(--mono); font-weight: 600; font-size: 14px; white-space: nowrap; }
.inp .prefix + input { padding-left: 4px; font-family: var(--mono); }
.ph-btn { align-self: flex-start; margin: 5px 5px 0 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  border: 0; background: transparent; color: var(--dim); cursor: pointer; flex: none; }
.ph-btn:hover { color: var(--accent-2); background: rgba(222,230,240,.1); }
.ph-btn .i { width: 16px; height: 16px; }
.switch-row { display: flex; flex-wrap: wrap; gap: 10px; }
.sw { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border);
  cursor: pointer; flex: 1 1 220px; position: relative; transition: .15s; }
.sw:hover { border-color: var(--border-2); }
.sw input { position: absolute; opacity: 0; pointer-events: none; }
.sw .knob { position: relative; width: 38px; height: 22px; border-radius: 99px; background: rgba(255,255,255,.12); flex: none; transition: .2s; }
.sw .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .2s; }
.sw input:checked + .knob { background: var(--chrome); }
.sw input:checked + .knob::after { transform: translateX(16px); }
.sw input:focus-visible + .knob { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.sw-text strong { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.sw-text small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.sw.gold input:checked + .knob { background: linear-gradient(135deg, #f5b84a, #ef7a4a); }
.sw.locked { cursor: not-allowed; opacity: .72; }
.sw.locked .knob { opacity: .5; }
.sw .lock { color: var(--warn); width: 14px; height: 14px; }
.colors { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.col-dot { width: 28px; height: 28px; border-radius: 9px; border: 2px solid transparent; cursor: pointer; background: var(--c); padding: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); transition: transform .12s; }
.col-dot:hover { transform: scale(1.1); }
.col-dot.sel { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.15); }
.col-dot.none { background: repeating-linear-gradient(45deg, #2b2e33 0 5px, #1c1e22 5px 10px); }
.col-pick { display: flex; align-items: center; gap: 6px; padding: 3px 4px 3px 3px; border-radius: 10px; background: rgba(0,0,0,.25); border: 1px solid var(--border-2); }
.col-pick input[type=color] { width: 28px; height: 28px; border: 0; padding: 0; background: none; border-radius: 7px; cursor: pointer; }
.col-pick input[type=text] { width: 78px; background: none; border: 0; color: var(--text); font-family: var(--mono); font-size: 13px; outline: none; }
.embed-card > summary { list-style: none; cursor: pointer; }
.embed-card > summary::-webkit-details-marker { display: none; }
.embed-card .ed-head .edot { width: 12px; height: 12px; border-radius: 4px; background: var(--c, #3a3e45); flex: none; }
.embed-card .ed-head .etitle { color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.embed-card .chev { transition: transform .2s; color: var(--muted); }
.embed-card[open] .chev { transform: rotate(90deg); }
.embed-card:not([open]) > .ed-head { border-bottom-color: transparent; }
.sub { display: grid; gap: 12px; padding: 14px; border-radius: 13px; background: var(--panel-2); border: 1px solid var(--border); }
.sub-title { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.sub-title .i { width: 14px; height: 14px; }
.field-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(0,0,0,.18);
  border: 1px solid var(--border); }
.field-item .fi-inputs { display: grid; gap: 8px; min-width: 0; }
.field-item .fi-tools { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.inline-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
.inline-check input { accent-color: var(--accent-2); width: 15px; height: 15px; }
.add-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; border-radius: 12px;
  border: 1px dashed var(--border-2); background: transparent; color: var(--muted); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: .15s; }
.add-btn:hover:not(:disabled) { color: var(--accent-2); border-color: rgba(222,230,240,.5); background: rgba(222,230,240,.05); }
.add-btn:disabled { opacity: .4; cursor: not-allowed; }
.add-btn.big { padding: 18px; border-radius: var(--radius); margin-bottom: 16px; }
.savebar { position: sticky; bottom: 14px; z-index: 30; display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap;
  margin-top: 8px; padding: 12px 14px 12px 20px; border-radius: 16px; background: rgba(13, 14, 17, .88); border: 1px solid var(--border-2);
  backdrop-filter: blur(18px); box-shadow: 0 18px 50px -12px rgba(0,0,0,.8); }
.savebar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.save-state { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--muted); }
.save-state .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); }
.save-state.dirty { color: #ffd58a; } .save-state.dirty .dot { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.preview-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-2); box-shadow: 0 20px 60px -20px rgba(0,0,0,.9); }
.preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: #1e1f22;
  border-bottom: 1px solid #111214; font-size: 13px; }
.ph-title { display: flex; align-items: center; gap: 7px; font-weight: 600; color: #dbdee1; }
.ph-title .i { color: var(--accent-2); width: 16px; height: 16px; }
.mini-switch { display: inline-flex; align-items: center; gap: 8px; color: #b5bac1; cursor: pointer; font-size: 12.5px; user-select: none; }
.mini-switch input { position: absolute; opacity: 0; }
.mini-switch span { width: 30px; height: 18px; border-radius: 99px; background: #4e5058; position: relative; transition: .2s; }
.mini-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .2s; }
.mini-switch input:checked + span { background: var(--chrome); }
.mini-switch input:checked + span::after { background: #0c0d10; }
.mini-switch input:checked + span::after { transform: translateX(12px); }
.side-card { padding: 14px 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); backdrop-filter: blur(14px); }
.side-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.side-title .i { color: var(--accent-2); width: 16px; height: 16px; }
.side-title small { font-weight: 500; margin-left: auto; }
.test-row { display: flex; gap: 8px; margin-bottom: 6px; }
.test-row select { flex: 1; min-width: 0; background: rgba(0,0,0,.25); color: var(--text); border: 1px solid var(--border-2); border-radius: 9px; padding: 6px 8px; font: inherit; font-size: 13.5px; }
.palette { display: grid; gap: 10px; }
.pal-group > span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.pal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-chip { font-family: var(--mono); font-size: 12px; padding: 4px 8px; border-radius: 8px; border: 1px solid rgba(222,230,240,.22); background: rgba(222,230,240,.07);
  color: #e6ecf3; cursor: pointer; transition: .12s; }
.ph-chip:hover { background: rgba(222,230,240,.18); border-color: rgba(222,230,240,.5); transform: translateY(-1px); }
.popover { position: fixed; z-index: 100; width: 320px; max-height: 360px; display: flex; flex-direction: column; border-radius: 14px; background: #111317;
  border: 1px solid var(--border-2); box-shadow: 0 24px 60px -10px rgba(0,0,0,.85); overflow: hidden; animation: rise .15s ease both; }
.popover[hidden] { display: none; }
.popover input { background: rgba(0,0,0,.3); border: 0; border-bottom: 1px solid var(--border); color: var(--text); font: inherit; padding: 11px 14px; outline: none; }
.pop-list { overflow-y: auto; padding: 6px; }
.pop-group { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); padding: 8px 8px 4px; }
.pop-item { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 7px 8px; border: 0; border-radius: 8px;
  background: none; color: var(--text); cursor: pointer; font: inherit; font-size: 13px; }
.pop-item:hover, .pop-item.hl { background: rgba(222,230,240,.12); }
.pop-item code { background: none; padding: 0; color: #e6ecf3; }
.pop-item span { color: var(--muted); font-size: 12px; text-align: right; }
.fab { display: none; }

/* ======================= Discord look (preview) ======================= */
.dc { background: #313338; color: #dbdee1; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 1.375; padding: 14px 14px 16px 0; overflow-wrap: anywhere; }
.dc a { color: #00a8fc; } .dc a:hover { text-decoration: underline; }
.dc-used { display: flex; align-items: center; gap: 5px; margin-left: 72px; margin-bottom: 3px; font-size: 13.5px; color: #b5bac1; position: relative; }
.dc-used img { width: 16px; height: 16px; border-radius: 50%; }
.dc-used b { color: #e3e5e8; font-weight: 500; }
.dc-used-line { position: absolute; left: -38px; top: 9px; width: 33px; height: 12px; border-left: 2px solid #4e5058; border-top: 2px solid #4e5058; border-top-left-radius: 6px; }
.dc-cmd { color: #00a8fc; }
.dc-msg { display: flex; gap: 16px; padding-left: 16px; }
.dc-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; margin-top: 2px; }
.dc-body { min-width: 0; flex: 1; }
.dc-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dc-name { color: #f2f3f5; font-weight: 500; font-size: 16px; }
.dc-app { display: inline-flex; align-items: center; background: #5865f2; color: #fff; font-size: 10px; font-weight: 600; padding: 0 5px; height: 15px;
  border-radius: 4px; line-height: 15px; position: relative; top: -1px; }
.dc-time { color: #949ba4; font-size: 12px; }
.dc-content { white-space: pre-wrap; margin-top: 2px; }
.dc-content:empty { display: none; }
.dc-embed { display: flex; max-width: 520px; margin-top: 6px; border-radius: 4px; background: #2b2d31; border-left: 4px solid var(--c, #1e1f22); }
.dc-e-main { flex: 1; min-width: 0; padding: 8px 16px 16px 12px; display: grid; gap: 0; }
.dc-e-main > * { margin-top: 8px; }
.dc-e-thumb { flex: none; width: 80px; height: 80px; margin: 16px 16px 0 0; border-radius: 4px; object-fit: cover; }
.dc-e-author { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #f2f3f5; }
.dc-e-author img { width: 24px; height: 24px; border-radius: 50%; }
.dc-e-author a { color: #f2f3f5; }
.dc-e-title { font-weight: 600; font-size: 16px; color: #f2f3f5; }
.dc-e-title a { color: #00a8fc; }
.dc-e-desc { font-size: 14px; white-space: pre-wrap; }
.dc-e-fields { display: grid; gap: 8px; }
.dc-frow { display: grid; gap: 8px; }
.dc-f-name { font-size: 14px; font-weight: 600; color: #f2f3f5; margin-bottom: 2px; }
.dc-f-val { font-size: 14px; white-space: pre-wrap; }
.dc-e-image { max-width: 100%; max-height: 300px; border-radius: 4px; object-fit: contain; justify-self: start; }
.dc-e-footer { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #dbdee1; }
.dc-e-footer img { width: 20px; height: 20px; border-radius: 50%; }
.dc-ephemeral { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: #949ba4; }
.dc-ephemeral .i { width: 14px; height: 14px; }
.dc-ephemeral a { color: #00a8fc; }
.dc .mention { background: rgba(88,101,242,.3); color: #d8dfe7; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.dc .ts { background: rgba(255,255,255,.06); border-radius: 3px; padding: 0 2px; }
.dc .dcode { font-family: Consolas, "Andale Mono WT", monospace; font-size: 85%; background: #1e1f22; border: 1px solid #1e1f22; border-radius: 4px; padding: 0 3px; }
.dc pre { background: #2b2d31; border: 1px solid #1e1f22; border-radius: 4px; padding: 7px; margin: 4px 0; font-family: Consolas, monospace; font-size: 13px; white-space: pre-wrap; }
.dc-embed pre { background: #1e1f22; }
.dc .spoiler { background: #1e1f22; color: transparent; border-radius: 3px; cursor: pointer; }
.dc .spoiler:hover { background: #2e3035; color: inherit; }
.dc blockquote { margin: 0; padding-left: 12px; border-left: 4px solid #4e5058; }
.dc h1, .dc h2, .dc h3 { margin: 6px 0 2px; color: #f2f3f5; letter-spacing: 0; }
.dc h1 { font-size: 22px; } .dc h2 { font-size: 19px; } .dc h3 { font-size: 16px; }
.dc .subtext { font-size: 12px; color: #949ba4; display: block; }
.dc ul { margin: 2px 0; padding-left: 22px; }
.dc img.emoji { width: 22px; height: 22px; vertical-align: -5px; object-fit: contain; }
.dc .jumbo img.emoji { width: 48px; height: 48px; }
.dc .ph-raw { color: #e6ecf3; background: rgba(222,230,240,.12); border-radius: 3px; font-family: var(--mono); font-size: 90%; }
.dc .ph-miss { color: #ffb3bb; background: rgba(239,91,107,.14); border-radius: 3px; font-family: var(--mono); font-size: 90%; }
.dc-empty { color: #949ba4; font-style: italic; }

/* ======================= responsive ======================= */
@media (max-width: 1180px) {
  .editor { grid-template-columns: minmax(0, 1fr); }
  .editor-side { position: static; max-height: none; overflow: visible; }
  .fab { display: grid; place-items: center; position: fixed; right: 18px; bottom: 96px; z-index: 35; width: 52px; height: 52px; border-radius: 50%;
    border: 0; color: #0c0d10; background: var(--chrome); box-shadow: 0 10px 30px -6px var(--glow); cursor: pointer; }
}
@media (max-width: 980px) {
  .landing { grid-template-columns: 1fr; gap: 40px; padding-top: 20px; }
  .features { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-102%); transition: transform .25s ease; box-shadow: 20px 0 60px rgba(0,0,0,.6); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 39; }
  .mobilebar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; position: sticky; top: 0; z-index: 30;
    background: rgba(7,8,10,.85); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
  .brand.small img { width: 28px; height: 28px; }
  .content { padding: 20px 16px 90px; }
  .cmd-meta { display: none; }
}
@media (max-width: 640px) {
  h1 { font-size: 24px; }
  .hero-row { padding: 20px 18px 14px; gap: 14px; }
  .gicon.xl { width: 60px; height: 60px; border-radius: 18px; }
  .tabs { padding: 0 8px; }
  .row, .row.three { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat strong { font-size: 24px; }
  .savebar { padding: 10px; bottom: 8px; }
  .save-state { width: 100%; justify-content: center; }
  .save-state:not(.dirty) { display: none; }
  .savebar-actions { width: 100%; flex-wrap: nowrap; }
  .savebar-actions .button { flex: 1 1 auto; min-width: 0; padding: 9px 8px; font-size: 13px; }
  .dc-embed { flex-direction: column-reverse; }
  .dc-e-thumb { margin: 12px 0 0 12px; }
  .dc-used { margin-left: 56px; }
  .dc-msg { gap: 12px; padding-left: 10px; }
  .topnav { padding: 16px; } .public-main { padding: 0 16px 60px; }
  .cmd-row { flex-wrap: wrap; }
  .cmd-actions { margin-left: auto; }
  .dc.demo { transform: none; animation: none; }
}

/* Gradients start under the border too; otherwise the gradient tiles again in the
   transparent 1px border and leaves a thin line of its first colour on the right/bottom edge. */
.button.primary, .f-icon, .ob-icon, .gicon, .cmd-swatch, .empty-art, .owner-banner, .badge, .toggle, .role .switch,
.sw .knob, .fab, .pill, .demo-glow { background-origin: border-box; }

/* --- parameters (editor) --- */
.ed-sub-text { margin: 0; padding: 12px 20px 0; color: var(--muted); font-size: 13.5px; }
.ed-head .count { margin-left: auto; }
.param-card { border-radius: 13px; background: var(--panel-2); border: 1px solid var(--border); transition: border-color .15s; }
.param-card[open] { border-color: rgba(222,230,240,.3); }
.param-card > summary { list-style: none; cursor: pointer; }
.param-card > summary::-webkit-details-marker { display: none; }
.param-head { display: flex; align-items: center; gap: 9px; padding: 9px 10px 9px 12px; min-width: 0; }
.param-head .chev { color: var(--muted); transition: transform .2s; flex: none; }
.param-card[open] .param-head .chev { transform: rotate(90deg); }
.ptype { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #cfd8e3; padding: 3px 9px;
  border-radius: 99px; background: rgba(160,178,204,.12); border: 1px solid rgba(160,178,204,.3); white-space: nowrap; flex: none; }
.ptype .i { width: 13px; height: 13px; }
.pname { color: #e6ecf3; background: rgba(222,230,240,.1); border: 1px solid rgba(222,230,240,.2); flex: none; }
.pdesc { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag.req { color: #ffd58a; background: rgba(245,184,74,.12); border-color: rgba(245,184,74,.3); }
.param-body { display: grid; gap: 14px; padding: 4px 14px 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.inp select { appearance: none; cursor: pointer; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a9aab' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; padding-right: 32px; }
.inp select option { background: #111317; }
.inp .suffix { padding: 0 12px 0 0; }
.inp .prefix + input { padding-left: 2px; }
.sw.small { flex-basis: 200px; padding: 10px 12px; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-chip { font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--border-2); background: transparent;
  color: var(--muted); cursor: pointer; transition: .12s; }
.cat-chip:hover { color: var(--text); }
.cat-chip.on { color: #fff; background: rgba(222,230,240,.18); border-color: rgba(222,230,240,.55); }
.cols { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.col-name { display: inline-flex; align-items: center; border-radius: 10px; background: rgba(0,0,0,.25); border: 1px solid var(--border-2); padding-left: 10px; }
.col-name input { width: 110px; background: none; border: 0; color: var(--text); font-family: var(--mono); font-size: 13px; outline: none; padding: 6px 0; }
.col-name .icon-btn { width: 28px; height: 28px; }
.opt-row { display: grid; gap: 8px; align-items: center; }
.opt-row input { min-width: 0; width: 100%; background: rgba(0,0,0,.25); border: 1px solid var(--border-2); border-radius: 9px; color: var(--text);
  font: inherit; font-size: 13.5px; padding: 8px 10px; outline: none; }
.opt-row input:focus { border-color: rgba(222,230,240,.6); }
.opt-head span { font-size: 11.5px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.small-notice { margin: 0; font-size: 13.5px; }
.pal-group.mine > span { color: #cfd8e3; }
.pal-group.mine .ph-chip { color: #dde3ea; background: rgba(160,178,204,.1); border-color: rgba(160,178,204,.3); }
.filters-help { font-size: 13px; }
.filters-help summary { cursor: pointer; display: flex; align-items: center; gap: 7px; color: var(--muted); font-weight: 600; }
.filters-help summary .i { width: 15px; height: 15px; color: var(--accent-2); }
.filters-help p { margin: 8px 0; }
.filters-help ul { margin: 0; padding-left: 18px; color: var(--muted); }
.filters-help li { margin: 2px 0; }
.test-values { display: grid; gap: 10px; }
.test-row2 { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted); }
.test-row2 input, .test-row2 select { width: 100%; background: rgba(0,0,0,.25); color: var(--text); border: 1px solid var(--border-2); border-radius: 9px;
  padding: 7px 9px; font: inherit; font-size: 13.5px; outline: none; }
.test-row2 input:focus, .test-row2 select:focus { border-color: rgba(222,230,240,.6); }
.test-row2 code { color: #dde3ea; background: rgba(160,178,204,.1); }
.preview-notes { background: #2b2d31; display: grid; }
.preview-notes:empty { display: none; }
.pn { display: flex; gap: 8px; align-items: flex-start; padding: 8px 14px; font-size: 12.5px; color: #b5bac1; border-top: 1px solid #1e1f22; }
.pn .i { width: 14px; height: 14px; flex: none; margin-top: 2px; color: #949ba4; }
.pn.warn { color: #ffd58a; } .pn.warn .i { color: var(--warn); }
.pn.err { color: #ffb3bb; } .pn.err .i { color: var(--danger); }
.dc.loading { opacity: .75; transition: opacity .2s; }
@media (max-width: 640px) {
  .param-head .pdesc { display: none; }
  .opt-row { grid-template-columns: 1fr 1fr 34px !important; }
  .opt-head { display: none; }
}
.ed-body > *, .param-card, .param-body > * { min-width: 0; }
@media (max-width: 640px) {
  .param-head { gap: 6px; padding-left: 8px; }
  .param-head .tag { display: none; }
  .param-head .icon-btn { width: 30px; height: 30px; }
  .param-head .ptype { font-size: 0; gap: 0; padding: 5px 7px; }
  .param-head .ptype .i { width: 14px; height: 14px; }
  .param-head .pname { overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
}

/* --- situations / templates / repeats (editor) --- */
.sit-card .ed-head { border-bottom: 0; padding-bottom: 6px; }
.sit-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 20px 14px; border-bottom: 1px solid var(--border); }
.sit-tab { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 12px;
  border-radius: 10px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--muted); cursor: pointer; transition: .15s; }
.sit-tab .i { width: 15px; height: 15px; }
.sit-tab:hover { color: var(--text); border-color: rgba(255,255,255,.25); }
.sit-tab.on { color: #fff; background: linear-gradient(135deg, rgba(222,230,240,.25), rgba(160,178,204,.2)); border-color: rgba(222,230,240,.55); }
.sit-tab.add { border-style: dashed; background: transparent; }
.sit-tab:disabled { opacity: .4; cursor: not-allowed; }
.sit-help { padding-bottom: 16px; }
.sit-body { padding-top: 16px; }
.sit-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tpl-card { border-color: rgba(160,178,204,.35); background: linear-gradient(135deg, rgba(160,178,204,.08), rgba(222,230,240,.06)), var(--panel); }
.tpl-card .ed-head h2 .i { color: #cfd8e3; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; padding: 14px 20px 18px; }
.tpl { text-align: left; font: inherit; color: var(--text); padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--panel-2); cursor: pointer; transition: .15s; display: grid; gap: 3px; }
.tpl:hover { border-color: rgba(160,178,204,.55); transform: translateY(-2px); }
.tpl strong { font-size: 14px; } .tpl small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.field-more { font-size: 13px; }
.field-more summary { cursor: pointer; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-weight: 600; list-style: none; }
.field-more summary::-webkit-details-marker { display: none; }
.field-more summary .i { width: 14px; height: 14px; color: var(--accent-2); }
.field-more[open] summary { margin-bottom: 10px; }
.ph-chip.list { color: #ffd58a; background: rgba(245,184,74,.08); border-color: rgba(245,184,74,.3); display: inline-flex; align-items: center; gap: 5px; }
.ph-chip.list .i { width: 12px; height: 12px; }
.pn.ok { color: #b7f3d6; } .pn.ok .i { color: var(--ok); }
.pn a { color: #00a8fc; }
[data-help] code { font-size: 11.5px; }
.fm-stack { display: grid; gap: 10px; }
.paste-rows { font-size: 13px; }
.paste-rows summary { cursor: pointer; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-weight: 600; list-style: none; }
.paste-rows summary::-webkit-details-marker { display: none; }
.paste-rows summary .i { width: 14px; height: 14px; color: var(--accent-2); }
.paste-rows[open] { display: grid; gap: 8px; }
.paste-box { width: 100%; background: rgba(0,0,0,.25); border: 1px solid var(--border-2); border-radius: 10px; color: var(--text);
  font-family: var(--mono); font-size: 12.5px; padding: 10px; resize: vertical; outline: none; }
.paste-box:focus { border-color: rgba(222,230,240,.6); }
.cond-builder { width: 360px; max-height: none; padding: 14px; gap: 10px; display: grid; }
.cond-builder[hidden] { display: none; }
.cb-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.cb-title .i { color: var(--accent-2); width: 16px; height: 16px; }
.cb-row { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.cb-row[hidden] { display: none; }
.cb-row select, .cb-row input { width: 100%; background: rgba(0,0,0,.3); color: var(--text); border: 1px solid var(--border-2); border-radius: 9px;
  padding: 7px 9px; font: inherit; font-size: 13px; outline: none; }
.cb-out { padding: 8px 10px; border-radius: 9px; background: rgba(222,230,240,.08); border: 1px solid rgba(222,230,240,.25); }
.cb-out code { background: none; padding: 0; color: #e6ecf3; white-space: pre-wrap; }
.cb-btn { color: #cfd8e3; }
.drafts { margin-bottom: 18px; }
.drafts-title { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 10px; }
.drafts-title .i { color: var(--warn); }
.draft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.draft { display: grid; gap: 4px; padding: 12px 14px; border-radius: 13px; color: var(--text); background: rgba(245,184,74,.06);
  border: 1px dashed rgba(245,184,74,.4); transition: .15s; }
.draft:hover { border-style: solid; transform: translateY(-2px); }
.draft small { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-tag { color: #ffd58a; background: rgba(245,184,74,.1); border-color: rgba(245,184,74,.3); }
.draft-note { background: rgba(245,184,74,.08); border-color: rgba(245,184,74,.35); color: #ffe3ad; align-items: center; }
.draft-note > div { flex: 1; }
.draft-note > .i { color: var(--warn); }
.draft-note form { margin: 0; }
.save-state.drafted { color: #b7f3d6; } .save-state.drafted .dot { background: var(--ok); }

/* ======================= docs ======================= */
.topnav-links { display: flex; gap: 8px; }
.docs-page .content, .docs-page .public-main { max-width: 1320px; }
.docs { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 40px; align-items: start; }
.docs-toc { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 20px; }
.docs-toc nav { display: grid; gap: 1px; margin-top: 12px; }
.docs-toc a { color: var(--muted); font-size: 14px; padding: 6px 12px; border-radius: 9px; border-left: 2px solid transparent; }
.docs-toc a:hover { color: var(--text); background: var(--panel-2); }
.docs-toc a.active { color: #fff; background: rgba(222,230,240,.1); border-left-color: var(--accent-2); }
.toc-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding: 14px 12px 6px; }
.small-search input { padding: 8px 0; font-size: 14px; }
.docs-body { min-width: 0; max-width: 860px; }
.docs-hero { padding: 6px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.docs-hero h1 { font-size: 40px; margin: 14px 0 8px; }
.docs-body section { padding: 26px 0 10px; scroll-margin-top: 16px; }
.docs-body section + section { border-top: 1px solid var(--border); }
.docs-body h2 { font-size: 24px; margin: 0 0 12px; }
.docs-body h3 { font-size: 16.5px; margin: 22px 0 10px; }
.docs-body p, .docs-body li, .docs-body dd { color: #d3d9e0; }
.docs-body a { color: var(--accent-2); }
.bullets { padding-left: 20px; } .bullets li { margin: 6px 0; }
.steps { padding-left: 0; list-style: none; counter-reset: step; display: grid; gap: 8px; }
.steps li { counter-increment: step; position: relative; padding: 10px 14px 10px 50px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); }
.steps li::before { content: counter(step); position: absolute; left: 12px; top: 9px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #0c0d10; background: var(--chrome); }
.dtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; margin: 8px 0 14px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.dtable th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); background: var(--panel-2); padding: 9px 12px; }
.dtable td { padding: 9px 12px; border-top: 1px solid var(--border); vertical-align: top; color: #d3d9e0; }
.dtable tr:first-child td { border-top: 0; }
.dtable thead + tbody tr:first-child td { border-top: 1px solid var(--border); }
.dtable td:first-child { white-space: nowrap; }
.dtable.types td:last-child code { display: inline-block; margin: 2px 2px 2px 0; }
.dtable code, .docs-body code { color: #e6ecf3; background: rgba(222,230,240,.08); }
code.soft { color: var(--muted); background: var(--panel-3); white-space: normal; }
pre.code, .ex pre { margin: 10px 0 14px; padding: 14px 16px; border-radius: 12px; background: #0a0b0e; border: 1px solid var(--border); overflow-x: auto; }
pre.code code, .ex pre code { background: none; padding: 0; color: #e0e5eb; font-size: 13px; line-height: 1.6; white-space: pre; }
.ex { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 12px 0 16px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.ex pre { margin: 0; border: 0; border-radius: 0; height: 100%; }
.ex-src { background: #0a0b0e; } .ex-out { background: #313338; border-left: 1px solid var(--border); }
.ex-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); padding: 10px 16px 0; }
.ex-result { padding: 10px 16px 14px; white-space: pre-wrap; color: #dbdee1; font-family: "gg sans", "Noto Sans", Helvetica, Arial, sans-serif; font-size: 14.5px; }
.callout { display: flex; gap: 12px; padding: 12px 16px; border-radius: 12px; margin: 12px 0; background: rgba(222,230,240,.07); border: 1px solid rgba(222,230,240,.28); color: #e8edf2; font-size: 14px; }
.callout > .i { color: var(--accent-2); margin-top: 2px; }
.callout.warn { background: rgba(245,184,74,.07); border-color: rgba(245,184,74,.3); color: #ffe3ad; }
.callout.warn > .i { color: var(--warn); }
.cards2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 10px 0 12px; }
.dcard { padding: 14px 16px; border-radius: 13px; background: var(--panel); border: 1px solid var(--border); }
.dcard h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14.5px; }
.dcard h4 .i { color: var(--accent-2); }
.dcard p { margin: 0; font-size: 13.5px; }
.kbdish { display: inline-grid; place-items: center; width: 24px; height: 22px; border-radius: 6px; background: var(--panel-3); border: 1px solid var(--border-2); vertical-align: -5px; }
.kbdish .i { width: 13px; height: 13px; color: var(--accent-2); }
kbd { font-family: var(--mono); font-size: 12px; padding: 1px 6px; border-radius: 6px; background: var(--panel-3); border: 1px solid var(--border-2); border-bottom-width: 2px; }
.recipe { padding: 4px 18px 8px; margin: 14px 0; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); }
.recipe h3 { margin-top: 14px; }
.faq dt { font-weight: 700; margin-top: 16px; } .faq dd { margin: 6px 0 0; }
.tpl-list { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 980px) {
  .docs { grid-template-columns: 1fr; gap: 10px; }
  .docs-toc { position: static; max-height: none; }
  .docs-toc nav { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .toc-label { grid-column: 1 / -1; }
  .ex { grid-template-columns: 1fr; } .ex-out { border-left: 0; border-top: 1px solid var(--border); }
  .dtable td:first-child { white-space: normal; }
  .docs-hero h1 { font-size: 30px; }
}
.ex { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ex pre code { white-space: pre-wrap; word-break: break-word; }
@media (max-width: 980px) {
  .ex { grid-template-columns: minmax(0, 1fr); }
  .docs-body section { scroll-margin-top: 70px; }
}
.rows-help { font-size: 13px; color: var(--muted); padding: 10px 12px; border-radius: 10px; background: rgba(222,230,240,.05); border: 1px solid rgba(222,230,240,.18); }
.rows-help p { margin: 0 0 6px; } .rows-help b { color: var(--text); }
.rows-help ul { margin: 0; padding-left: 18px; } .rows-help li { margin: 3px 0; }
.rows-help code { font-size: 12px; }
.rows-empty { font-size: 13px; color: var(--muted); padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--border-2); }
.kicker { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2);
  margin-bottom: 6px; }
.docs-body h3[id] { scroll-margin-top: 16px; }
.type-card { padding: 14px 18px 4px; margin: 12px 0; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); scroll-margin-top: 16px; }
.type-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.type-head h3 { margin: 0; }
.type-dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px; margin: 12px 0 6px; font-size: 14px; }
.type-dl dt { color: var(--dim); font-weight: 600; font-size: 12.5px; padding-top: 2px; }
.type-dl dd { margin: 0; color: #d3d9e0; }
.ph-doc { display: inline-flex; gap: 6px; align-items: baseline; margin: 0 14px 4px 0; font-size: 13px; color: var(--muted); }
.dtable.which td:nth-child(2) { white-space: nowrap; color: var(--text); }
@media (max-width: 640px) { .type-dl { grid-template-columns: 1fr; gap: 2px; } .type-dl dd { margin-bottom: 8px; } }

/* --- savebar: acrylic, and Save draft / Publish slide in only when there's something to save --- */
.savebar { background: rgba(14, 15, 18, .5); backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7);
  border: 1px solid rgba(255,255,255,.1); box-shadow: 0 18px 50px -12px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.07); }
.savebar-actions { flex-wrap: nowrap; }
.savebar-actions .button { transition: max-width .38s cubic-bezier(.2,.8,.2,1), padding .38s cubic-bezier(.2,.8,.2,1),
  margin .38s cubic-bezier(.2,.8,.2,1), opacity .25s ease, transform .38s cubic-bezier(.2,.8,.2,1), border-width .38s, flex-basis .38s,
  box-shadow .2s, background .2s, border-color .2s; }
.savebar-actions .sb-toggle { max-width: 220px; overflow: hidden; }
.savebar-actions .sb-toggle.gone { max-width: 0; padding-left: 0; padding-right: 0; margin-left: -8px; border-width: 0; opacity: 0;
  transform: scale(.85); pointer-events: none; box-shadow: none; }
.save-state .txt { transition: color .2s; }
@media (max-width: 640px) {
  .savebar-actions .sb-toggle.gone { flex: 0 0 0 !important; }
}
.linked { display: grid; gap: 10px; padding: 12px; border-radius: 13px; border: 1px dashed var(--border-2); }
.linked.on { border-style: solid; border-color: rgba(222,230,240,.35); background: rgba(222,230,240,.04); }
.linked .sw { flex: none; background: transparent; border: 0; padding: 0; }

/* ======================= functions ======================= */
/* list */
.fn-intro { flex-wrap: nowrap; align-items: flex-start; }
.fn-intro > .i { margin-top: 2px; }
.fn-intro b { color: var(--text); }
.group-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 18px; }
.group-chips a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; font-size: 13.5px; font-weight: 600;
  color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); }
.group-chips a:hover { color: var(--text); border-color: var(--border-2); }
.group-chips .i { width: 15px; height: 15px; color: var(--accent-2); }
.fn-group { margin-bottom: 26px; scroll-margin-top: 16px; }
.fn-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fn-group-head h2 { display: flex; align-items: center; gap: 8px; }
.fn-group-head small { display: block; font-size: 13px; }
.fg-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; flex: none; color: #e6ecf3;
  background: linear-gradient(135deg, rgba(222,230,240,.22), rgba(160,178,204,.18)); border: 1px solid rgba(222,230,240,.3); }
.fg-stats { margin-left: auto; white-space: nowrap; }
.err-tag { color: #ffb3bb; background: rgba(239,91,107,.12); border-color: rgba(239,91,107,.35); }

/* editor: the When / Only if / Do flow */
.flow-label { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; position: relative; }
.flow-label:first-child, .tpl-card + .flow-label { margin-top: 4px; }
.flow-label strong { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.flow-label small { color: var(--muted); font-size: 13px; }
.flow-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; font-weight: 800; font-size: 14px; color: #fff; flex: none;
  background: var(--chrome); color: #0c0d10; box-shadow: 0 6px 18px -6px var(--glow); }
.step-card > summary { list-style: none; cursor: pointer; }
.step-card > summary::-webkit-details-marker { display: none; }
.step-card .chev { transition: transform .2s; color: var(--muted); }
.step-card[open] .chev { transform: rotate(90deg); }
.step-card:not([open]) > .ed-head { border-bottom-color: transparent; }
.step-card.open-step { border-color: rgba(222,230,240,.38); box-shadow: 0 14px 40px -22px rgba(222,230,240,.5); }
.step-head { gap: 8px; }
.step-head h2 { min-width: 0; }
.step-head .etitle { color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.step-num { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 8px; font-size: 12.5px; font-weight: 800;
  color: #e6ecf3; background: rgba(222,230,240,.12); border: 1px solid rgba(222,230,240,.3); flex: none; }
.step-id { font-size: 11.5px; color: #dde3ea; background: rgba(160,178,204,.1); white-space: nowrap; }
.step-body .ed-card { background: rgba(255,255,255,.02); margin-bottom: 0; }
.step-body .embed-card > .ed-head { padding: 12px 16px; }
.step-body .embed-card .ed-body { padding: 14px 16px 16px; }
.sub.sit-card .sit-tabs { padding: 0 0 4px; border-bottom: 0; }
.sub.sit-card .sit-help { padding: 0; }
.sub.sit-card .sit-body { padding-top: 4px; display: grid; gap: 12px; }
.add-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 18px; }
.add-step { display: flex; align-items: flex-start; gap: 10px; text-align: left; font: inherit; color: var(--text); padding: 11px 12px;
  border-radius: 12px; border: 1px dashed var(--border-2); background: transparent; cursor: pointer; transition: .15s; }
.add-step:hover:not(:disabled) { border-style: solid; border-color: rgba(222,230,240,.5); background: rgba(222,230,240,.05); transform: translateY(-1px); }
.add-step:disabled { opacity: .4; cursor: not-allowed; }
.add-step > .i { color: var(--accent-2); margin-top: 2px; }
.add-step strong { display: block; font-size: 13.5px; }
.add-step small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
.empty-steps { margin: 0 0 12px; }

/* editor: checks */
.checks-card .ed-body { gap: 12px; }
.no-checks { margin: 0; }
.check-item { border-radius: 13px; background: var(--panel-2); border: 1px solid var(--border); }
.chk-head { display: flex; align-items: center; gap: 9px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--border); }
.chk-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #e6ecf3; background: rgba(222,230,240,.1); flex: none; }
.chk-icon .i { width: 15px; height: 15px; }
.chk-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chk-tools { display: flex; gap: 2px; margin-left: auto; }
.chk-tools .icon-btn { width: 30px; height: 30px; }
.chk-body { display: grid; gap: 12px; padding: 12px 14px 14px; }
.otherwise { padding-top: 12px; border-top: 1px dashed var(--border); }
.add-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.add-row > .muted { margin-right: 4px; }
.add-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 11px; border-radius: 99px;
  color: var(--muted); background: transparent; border: 1px dashed var(--border-2); cursor: pointer; transition: .15s; }
.add-chip .i { width: 14px; height: 14px; color: var(--accent-2); }
.add-chip:hover:not(:disabled) { color: var(--text); border-style: solid; border-color: rgba(222,230,240,.5); }
.add-chip:disabled { opacity: .4; cursor: not-allowed; }
.pick { display: grid; gap: 8px; }
.pick-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pick-top > span { flex: 1; min-width: 160px; }
.pick-top b { color: var(--text); font-weight: 600; }
.pick-filter { width: 170px; background: rgba(0,0,0,.25); color: var(--text); border: 1px solid var(--border-2); border-radius: 9px; padding: 6px 9px; font: inherit; font-size: 13px; outline: none; }
.pick-filter:focus { border-color: rgba(222,230,240,.6); }
.pick-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 176px; overflow-y: auto; scrollbar-width: thin; padding: 2px; }
.pchip { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 99px; cursor: pointer;
  color: var(--c, var(--muted)); background: rgba(255,255,255,.03); border: 1px solid var(--border-2); transition: .12s; }
.pchip .i { width: 13px; height: 13px; }
.pchip:hover { border-color: rgba(255,255,255,.3); }
.pchip.on { color: #fff; background: rgba(222,230,240,.2); border-color: rgba(222,230,240,.6); box-shadow: inset 0 0 0 1px rgba(222,230,240,.3); }
.pchip.cat { font-weight: 600; }
.pchip[hidden] { display: none; }
.quick-row { display: flex; flex-wrap: wrap; gap: 6px; }
.qbtn { font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 9px; cursor: pointer; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--border-2); transition: .12s; }
.qbtn:hover { color: var(--text); }
.qbtn.on { color: #fff; border-color: rgba(222,230,240,.6); background: rgba(222,230,240,.18); }
.qbtn.emo { font-size: 16px; padding: 3px 9px; }

/* editor: preview of a whole run */
.dc-item { position: relative; border-radius: 6px; cursor: pointer; padding: 2px 0 4px; transition: background .15s; }
.dc-item:hover { background: rgba(255,255,255,.02); }
.dc-item.focus { background: rgba(222,230,240,.06); box-shadow: inset 3px 0 0 #dfe6ee; }
.dc-where { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #6d7580; padding: 4px 16px 2px 72px; }
.dc-where .i { width: 12px; height: 12px; }
.dc-msg.cont { padding-left: 72px; }
.dc-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.dc-buttons span { font-size: 13.5px; font-weight: 500; color: #dbdee1; background: #4e5058; padding: 5px 14px; border-radius: 4px; }
.dc-action { display: flex; align-items: center; gap: 8px; margin: 6px 16px 6px 72px; padding: 7px 10px; border-radius: 6px; font-size: 13px;
  color: #b5bac1; background: #2b2d31; border: 1px dashed #4e5058; cursor: pointer; }
.dc-action.focus { border-color: #dfe6ee; }
.dc-action .i { width: 14px; height: 14px; color: #f0b232; flex: none; }
.dc-action span:first-of-type { flex: 1; }
.dc-step { font-size: 11px; color: #6d7580; }
.dc-stop { display: flex; align-items: center; gap: 8px; margin: 8px 16px 4px 72px; padding: 8px 10px; border-radius: 6px; font-size: 13px;
  color: #ffd58a; background: rgba(245,184,74,.08); border: 1px solid rgba(245,184,74,.3); }
.dc-stop .i { width: 15px; height: 15px; flex: none; }

/* editor: run log */
.icon-btn.tiny { width: 26px; height: 26px; margin-left: 4px; }
.icon-btn.tiny .i { width: 14px; height: 14px; }
.runs { display: grid; gap: 2px; max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
.run { display: flex; gap: 9px; align-items: flex-start; padding: 7px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.run:last-child { border-bottom: 0; }
.run-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--ok); box-shadow: 0 0 8px rgba(62,207,142,.5); }
.run.bad .run-dot { background: var(--danger); box-shadow: 0 0 8px rgba(239,91,107,.5); }
.run.bad .run-text > span { color: #ffb3bb; }
.run-text { min-width: 0; display: grid; }
.run-text > span { overflow-wrap: anywhere; }
.run-text small { font-size: 11.5px; }
@media (max-width: 640px) {
  .step-head .etitle, .step-id, .chk-desc { display: none; }
  .step-head .icon-btn { width: 30px; height: 30px; }
  .dc-where, .dc-msg.cont { padding-left: 16px; }
  .dc-action, .dc-stop { margin-left: 16px; }
  .fg-stats { display: none; }
  .add-steps { grid-template-columns: 1fr 1fr; }
}
.step-head h2 { white-space: nowrap; overflow: hidden; }
.step-head h2 { flex: 1 1 0; min-width: 0; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .step-head { padding: 12px 10px 12px 12px; gap: 4px; }
  .step-head > .tag { display: none; }
  .step-head .icon-btn { width: 28px; height: 28px; }
  .step-head h2 { font-size: 14.5px; }
}
.embed-card .ed-head h2 { min-width: 0; white-space: nowrap; overflow: hidden; }
.embed-card .ed-head .etitle { min-width: 0; }
.embed-card .ed-head .icon-btn { flex: none; }
@media (max-width: 640px) { .step-body .embed-card .etitle { display: none; } .step-body { padding: 14px 12px 16px; } }

/* --- access: permissions per role --- */
.grant-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin-bottom: 18px; align-items: start; }
.grant { border-radius: 13px; background: var(--panel-2); border: 1px solid var(--border); overflow: hidden; }
.grant .role { background: transparent; border: 0; border-radius: 0; }
.grant-perms { display: none; grid-template-columns: 1fr 1fr; gap: 4px 10px; padding: 10px 12px 12px; border-top: 1px solid var(--border); }
.grant:has(input[name="role"]:checked) { border-color: rgba(222,230,240,.35); }
.grant:has(input[name="role"]:checked) .grant-perms { display: grid; }
.pbox { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer; padding: 3px 0; }
.pbox input { accent-color: #dfe6ee; width: 15px; height: 15px; }
.pbox input:checked + span, .pbox input:checked + input + span { color: var(--text); }
.pbox.wide { grid-column: 1 / -1; padding-top: 6px; border-top: 1px dashed var(--border); margin-top: 4px; }
.perm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.perm-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); }
.perm-list li.off { opacity: .55; }
.perm-list li .i { margin-top: 2px; color: var(--ok); }
.perm-list li.off .i { color: var(--danger); }
.perm-list strong { display: block; font-size: 14px; } .perm-list small { color: var(--muted); font-size: 12.5px; }
.locked-note { display: flex; gap: 10px; align-items: center; }
@media (max-width: 640px) { .grant-list { grid-template-columns: 1fr; } }
.lockbar { background: rgba(245,184,74,.08); border-color: rgba(245,184,74,.35); color: #ffe3ad; align-items: center; }
.lockbar > .i { color: var(--warn); }
.readonly .add-btn, .readonly .add-steps, .readonly .add-row, .readonly .tpl-card { display: none; }
.dc-trigger { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed #3f4147; }
.dc-attach { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 12px; border-radius: 6px; background: #2b2d31;
  font-size: 13px; color: #b5bac1; }
.dc-attach .i { width: 15px; height: 15px; }
.new-menu { position: relative; }
.new-menu > summary { list-style: none; }
.new-menu > summary::-webkit-details-marker { display: none; }
.new-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 300px; display: grid; gap: 4px; padding: 8px;
  border-radius: 14px; background: var(--panel-solid); border: 1px solid var(--border-2); box-shadow: var(--shadow); }
.new-menu-list a { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; color: var(--text); }
.new-menu-list a:hover { background: var(--panel-3); }
.new-menu-list a .i { color: var(--accent-2); margin-top: 2px; }
.new-menu-list strong { display: block; font-size: 14px; } .new-menu-list small { display: block; color: var(--muted); font-size: 12.5px; }
.lockbar[hidden] { display: none; }
.settings-form { display: grid; gap: 14px; max-width: 420px; }
.dc-info { margin: 2px 16px 8px 72px; padding: 7px 10px; border-radius: 6px; font-size: 13px; color: #b5bac1; background: #2b2d31; }
.step-body .field-more { display: grid; gap: 8px; }
.when-chip { display: inline-block; font-size: 12px; font-weight: 600; color: #e6ecf3; background: rgba(222,230,240,.1); border: 1px solid rgba(222,230,240,.25);
  padding: 0 7px; border-radius: 99px; margin-right: 4px; }
.cmd-meta .i { width: 13px; height: 13px; vertical-align: -2px; }
.btn-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.02);
  border: 1px solid var(--border); }
.btn-item > .row { grid-column: 1; }
.btn-item > .fi-tools { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 2px; }
.btn-item .fi-tools .icon-btn { width: 30px; height: 30px; }
@media (max-width: 640px) { .btn-item { grid-template-columns: 1fr; } .btn-item > .fi-tools { grid-column: 1; grid-row: auto; flex-direction: row; } }

/* --- builds ------------------------------------------------------------------------------ */
fieldset.bform { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.bform[disabled] .inp { opacity: .85; }
.bslot { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 8px; min-width: 0; }
.bmods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.bshards { display: grid; gap: 10px; margin-top: 14px; }
.bshard { display: grid; grid-template-columns: 160px auto minmax(0, 1fr); gap: 12px; align-items: end; }
.check-inline { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); padding-bottom: 11px; white-space: nowrap; }
.bpreview { padding: 12px; min-height: 90px; display: grid; place-items: center; transition: opacity .2s; }
.bpreview.loading { opacity: .55; }
.bpreview img { width: 100%; border-radius: 10px; display: block; }
.bwarn { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; color: #ffd58a; }
.err-text { color: #ff8f9b; }
.ok-text { color: #7fe0b0; display: flex; align-items: center; gap: 6px; }
.ok-text .i { width: 15px; height: 15px; }
@media (max-width: 640px) {
  .bmods { grid-template-columns: minmax(0, 1fr); }
  .bshard { grid-template-columns: minmax(0, 1fr) auto; }
  .bshard .fld:last-child { grid-column: 1 / -1; }
}
.bform .card > .row, .bform .card > .fld { margin-bottom: 14px; }
.bform .card > :last-child { margin-bottom: 0; }

/* --- history, export / import ---------------------------------------------------------------- */
.version { align-items: center; }
.version .run-text { flex: 1; }
.vnum { flex: none; min-width: 34px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--accent-2); }
.version .button.small { padding: 4px 9px; font-size: 12.5px; }
.io-list { width: 340px; }
.io-import { display: grid; gap: 8px; padding: 9px 10px; border-top: 1px solid var(--border); }
.io-import > span { display: flex; gap: 10px; align-items: flex-start; }
.io-import > span .i { color: var(--accent-2); margin-top: 2px; }
.io-row { display: flex; gap: 8px; align-items: center; min-width: 0; }
.io-row input[type=file] { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) { .io-list { width: min(340px, calc(100vw - 32px)); } }
body.public .backdrop .star { opacity: .5; top: -4vh; right: -18vw; animation: none; }
.server-grid { margin-bottom: 26px; }