/* Sirius - near-black and silver: calm surfaces with hairline edges, chrome accents where it matters. */
:root {
  --bg: #08090b; --bg-2: #0b0c0f;
  --panel: #0d0e11; --panel-solid: #111215; --panel-2: rgba(255, 255, 255, .025); --panel-3: rgba(255, 255, 255, .05);
  --border: rgba(255, 255, 255, .08); --border-2: rgba(255, 255, 255, .14);
  --text: #eceff3; --muted: #8e959f; --dim: #5d646e;
  --accent: #b9c3cf; --accent-2: #e4eaf1; --accent-3: #9fb3cb; --glow: rgba(220, 230, 242, .16);
  --ok: #6fd6a4; --warn: #e9c46a; --danger: #ef6b78; --riven: #a58be8;
  --grad: linear-gradient(180deg, #ffffff, #dfe4ea);
  --chrome: #eceff3;
  --edge: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  --radius: 4px; --radius-sm: 3px;
  --shadow: none;
  --topbar: 56px;
  --gutter: 48px;
  --sans: Geist, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* mod rarities */
  --r-common: #b48c64; --r-uncommon: #c9ced6; --r-rare: #e2c27a; --r-legendary: #d9d6ea; --r-riven: #a58be8;
}
@font-face { font-family: Rajdhani; font-weight: 700; font-display: swap; src: url("/assets/fonts/Rajdhani-Bold.ttf") format("truetype"); }
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 15px/1.55 var(--sans);
  -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: 600; letter-spacing: -.03em; }
h2 { font-size: 17px; margin: 0; font-weight: 600; }
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: 4px; }
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 { display: none; 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: .1; 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; } }

/* surfaces: quiet, no frosted glass - a hairline edge and a faint top light */
.card, .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: 4px; 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,.35); color: #0c0d10;
  box-shadow: 0 4px 14px -8px rgba(230,238,248,.3), inset 0 1px 0 rgba(255,255,255,.75); }
.button.primary:hover { background: linear-gradient(180deg, #f6f8fa 0%, #e6eaef 55%, #d8dee5 100%);
  box-shadow: 0 6px 18px -8px rgba(230,238,248,.38), inset 0 1px 0 rgba(255,255,255,.8); }
.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: 4px; }
.button.lg { padding: 13px 22px; font-size: 16px; border-radius: 4px; }
.button .i { width: 16px; height: 16px; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 4px; 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; }

/* --- top bar (every page) --- */
.topbar { position: sticky; top: 0; z-index: 50; height: var(--topbar); background: rgba(5, 5, 7, .78);
   border-bottom: 1px solid var(--border); }
.topbar-in { max-width: 1240px; height: 100%; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); flex: none; }
.brand img { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(220,232,245,.35)); }
.brand strong { font-size: 14px; 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; }
.mainnav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.mainnav a { position: relative; padding: 8px 12px; border-radius: 4px; color: var(--muted); font-weight: 500; font-size: 14px; white-space: nowrap; transition: color .15s, background .15s; }
.mainnav a:hover { color: var(--text); background: var(--panel-2); }
.mainnav a.active { color: var(--text); }
.mainnav a.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -13px; height: 2px; border-radius: 2px; background: var(--grad); }
.topbar-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-toggle { display: none; }
.usermenu { position: relative; }
.usermenu summary { list-style: none; display: flex; align-items: center; gap: 9px; padding: 4px 8px 4px 4px; border-radius: 3px; cursor: pointer;
  border: 1px solid transparent; transition: .15s; }
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu summary:hover, .usermenu[open] summary { background: var(--panel-3); border-color: var(--border); }
.usermenu .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--panel-3); }
.um-name { font-size: 14px; font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-caret { width: 14px; height: 14px; color: var(--muted); transform: rotate(90deg); }
.um-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 6px; border-radius: 4px; background: #121418;
  border: 1px solid var(--border-2); box-shadow: 0 24px 60px -16px rgba(0,0,0,.9); animation: rise .14s ease both; }
.um-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; line-height: 1.3; }
.um-head strong { display: block; font-size: 14px; } .um-head small { color: var(--muted); font-size: 12px; }
.um-pop a, .um-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 4px; border: 0;
  background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.um-pop a:hover, .um-pop button:hover { background: var(--panel-3); }
.um-pop .i { width: 16px; height: 16px; color: var(--muted); }
.um-pop form { margin: 0; }
.landing { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding: 56px 0 72px; }
.landing h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.06; letter-spacing: -.035em; margin: 0 0 18px; max-width: 13em; }
.lead { font-size: 18px; color: var(--muted); max-width: 540px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 3px; 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: 4px; }
.dc.demo { position: relative; border-radius: 4px; 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: 36px; padding-top: 34px; border-top: 1px solid var(--border); }
.feature { padding: 0; }
.feature p { color: var(--muted); margin: 0; }
.f-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 4px; margin-bottom: 14px; color: #0c0d10;
  background: var(--chrome); box-shadow: inset 0 1px 0 #fff; }
.f-icon .i { width: 22px; height: 22px; }

/* --- page body --- */
.content { max-width: 1240px; margin: 0 auto; padding: 36px 28px 90px; animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .content, .um-pop { animation: 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;
   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: 3px;
  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: 3px;
  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: 4px; flex: none; object-fit: cover; }
.gicon.lg { width: 64px; height: 64px; border-radius: 4px; }
.gicon.xl { width: 84px; height: 84px; border-radius: 4px; 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: 600; 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: 4px; 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: 4px; 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: 4px; 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);  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: 3px; background: rgba(0,0,0,.35);  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: 4px; overflow: hidden; margin-bottom: 26px; border: 1px solid var(--border);
  background: #07080a; }
.hero-bg { position: absolute; inset: 0; background: url("/assets/sirius_backdrop.jpg") 62% 24% / cover no-repeat;
  filter: saturate(.3) contrast(1.05); opacity: .5; }
.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: .4; }
.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 0; margin: 4px 0 30px; }
.stat { position: relative; padding: 4px 20px; border-left: 1px solid var(--border); }
.stat:first-child { border-left: 0; padding-left: 4px; }
.stat strong { display: block; font-size: 30px; font-weight: 600; 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: 4px; 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: 4px; 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: 4px; 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: 4px; 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: 3px; 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: 4px; 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: 4px; 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: 4px; background: var(--panel);
  border: 1px solid var(--border);  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: 4px; }
.cmd-swatch { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 4px; 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: 3px;
  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); }
.tag.soft { background: transparent; color: var(--muted); border-color: var(--border); font-weight: 500; }
.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: 4px; background: var(--panel);
  border: 1px solid var(--border);  box-shadow: var(--shadow); }
.err-code { font-size: 96px; font-weight: 600; 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: 24px; display: grid; gap: 8px; z-index: 90; }
body:has(.restart-toast.in) .toasts { bottom: 120px; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 4px; 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, .editor-page .topbar-in { 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;
   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: 4px; 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: 4px;
  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: 4px; 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: 4px; 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: 4px; 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: 4px; 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: 4px; 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: 4px; 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: 4px;
  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: 4px; background: rgba(13, 14, 17, .88); border: 1px solid var(--border-2);
   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);  }
.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: 4px; 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: 4px; 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: 4px; 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: 4px;
  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); }
  .topbar-in { padding: 0 16px; gap: 12px; }
  .nav-toggle { display: inline-grid; }
  .um-name, .um-caret { display: none; }
  .mainnav { display: none; position: absolute; left: 0; right: 0; top: var(--topbar); flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 12px 14px; background: #08090b; border-bottom: 1px solid var(--border); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); }
  body.nav-open .mainnav { display: flex; }
  .mainnav a { padding: 12px; }
  .mainnav a.active { background: var(--panel-3); }
  .mainnav a.active::after { display: none; }
  .content { padding: 22px 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: 4px; }
  .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; }
  .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: 4px; 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: 3px; 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: 3px; 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: 4px; 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: 4px; 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: 4px;
  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: 4px; 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: 4px; 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: 4px; 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: 4px;
  padding: 7px 9px; font: inherit; font-size: 13px; outline: none; }
.cb-out { padding: 8px 10px; border-radius: 4px; 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: 4px; 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 .topbar-in { 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: 4px; 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: 4px; 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: 4px; 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: 4px; 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: 4px; 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: 4px; 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: 4px; 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: 4px; 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: 4px; background: var(--panel-3); border: 1px solid var(--border-2); border-bottom-width: 2px; }
.recipe { padding: 4px 18px 8px; margin: 14px 0; border-radius: 4px; 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: 4px; 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: 4px; 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: 4px; 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);  -webkit-
  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: 4px; 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: 3px; 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: 4px; 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: 600; 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: 4px; font-weight: 600; 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: 4px; font-size: 12.5px; font-weight: 600;
  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: 4px; 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: 4px; 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: 4px; 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: 3px;
  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: 4px; 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: 3px; 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.hl { outline: 2px solid rgba(236,242,250,.8); outline-offset: 1px; }
.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: 4px; 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: 4px; 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: 4px; 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: 4px; 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: 4px; 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; }
.grant.staff .grant-perms { display: grid; }
.grant.staff { border-color: rgba(222,230,240,.25); }
.staff-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.staff-av { width: 30px; height: 30px; border-radius: 50%; flex: none; object-fit: cover; }
.staff-av.initial { display: grid; place-items: center; background: var(--panel-3); font-weight: 700; font-size: 13px; }
.staff-row .mono { font-family: var(--mono); font-size: 11.5px; margin-left: 6px; }
.add-staff .grant-perms { display: grid; border: 0; padding: 4px 0 0; margin: 12px 0 4px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.add-staff .fld { max-width: 360px; }
.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: 4px; 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: 4px; 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: 4px; 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: 4px; 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: 4px; 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: 3px; 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: 4px; 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; }
.check-inline { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); padding-bottom: 11px; flex-wrap: wrap; }
.bpreview { padding: 12px; min-height: 90px; display: grid; place-items: center; transition: opacity .2s; }
.bpreview.loading { opacity: .55; }
.bpreview img { width: 100%; border-radius: 4px; 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; } .warn-text { color: #ffd58a; }
.ok-text { color: #7fe0b0; display: flex; align-items: center; gap: 6px; }
.ok-text .i { width: 15px; height: 15px; }
.toast.out { opacity: 0; transform: translateY(6px); transition: .4s; }
.cmd-swatch.item-img { background: rgba(0,0,0,.35); overflow: hidden; padding: 0; }
.cmd-swatch.item-img img { width: 100%; height: 100%; object-fit: contain; }

/* the board */
.build-page .content { padding-bottom: 0; }
.build-page .toasts { bottom: 330px; }
.bb { --mc-w: 100%; --mc-h: 104px; --r-common: #b48a5f; --r-uncommon: #c3cbd5; --r-rare: #e3c46d; --r-legendary: #ece9ff; --r-riven: #b48cff; }
.bb-head { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 18px; }
.bb-item-img { width: 76px; height: 76px; border-radius: 4px; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.12), rgba(0,0,0,.3) 70%);
  border: 1px solid var(--border-2); display: grid; place-items: center; overflow: hidden; }
.bb-item-img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.bb-item-ph { width: 30px; height: 30px; border-radius: 50%; border: 2px dashed var(--border-2); }
.bb-head-main { display: grid; gap: 6px; min-width: 0; }
.bb-head-row { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.bb-name { width: 100%; background: none; border: 0; border-bottom: 1px solid transparent; color: var(--text); font: inherit; font-size: 24px;
  font-weight: 600; letter-spacing: -.02em; padding: 2px 0; outline: none; }
.bb-name:hover:not([readonly]), .bb-name:focus { border-bottom-color: var(--border-2); }
.bb-item-pick { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.28); border: 1px solid var(--border-2); border-radius: 4px;
  padding: 0 10px; min-width: 0; flex: 0 1 320px; }
.bb-item-pick:focus-within { border-color: rgba(255,255,255,.35); box-shadow: 0 0 0 3px var(--glow); }
.bb-item-pick .i { width: 15px; height: 15px; color: var(--muted); }
.bb-item-pick input { background: none; border: 0; color: var(--text); font: inherit; font-size: 14px; padding: 7px 0; outline: none; width: 100%; min-width: 0; }
.bb[data-readonly] .bb-item-pick { background: none; border-color: transparent; padding: 0; }
.bb[data-readonly] .bb-item-pick .i { display: none; }
.bb-kind { display: flex; gap: 6px; flex-wrap: wrap; }
.bb-kind .tag { font-size: 11.5px; }
.bb-kind .off { opacity: .25; }
.bb-cost { gap: 8px; }
.bb-cost:empty { display: none; }
.cost-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: 3px; font-size: 12.5px; color: var(--muted);
  background: rgba(0,0,0,.28); border: 1px solid var(--border); }
.cost-chip b { color: var(--text); font-variant-numeric: tabular-nums; }
.ci { width: 15px; height: 15px; flex: none; background: center / contain no-repeat; }
.ci-forma { background-image: url("/assets/icon_forma.png"); }
.ci-endo { background-image: url("/assets/icon_endo.png"); }
.ci-credits { background-image: url("/assets/icon_credits.png"); }
.bb-head-actions { display: flex; align-items: center; gap: 6px; }

.bb-main { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 18px; align-items: start; }
.bb-side { display: grid; gap: 14px; position: sticky; top: 18px; }
.bb-cap { display: grid; gap: 10px; }
.bb-toggle { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; user-select: none; }
.bb-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.bb-toggle .bb-sw { position: relative; display: block; width: 38px; height: 22px; border-radius: 99px; background: rgba(255,255,255,.12); flex: none; transition: background .2s; }
.bb-toggle .bb-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.bb-toggle input:checked + .bb-sw { background: var(--chrome); }
.bb-toggle input:checked + .bb-sw::after { transform: translateX(16px); background: #0c0d10; box-shadow: none; }
.bb-toggle input:disabled + .bb-sw { opacity: .7; }
.bb-toggle input:focus-visible + .bb-sw { box-shadow: 0 0 0 3px var(--glow); }
.bb-cap-num { display: flex; align-items: baseline; gap: 8px; }
.bb-cap-num span { font-size: 40px; font-weight: 600; letter-spacing: -.04em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bb-cap-num small { color: var(--muted); font-size: 13px; }
.bb-cap-num.over span { background: none; color: var(--danger); }
.bb-cap-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.bb-cap-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--chrome); transition: width .25s; }
.bb-cap-bar span.over { background: linear-gradient(90deg, #ef6b78, #ff9aa5); }
.bb-cap-meta { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bb-arrange { justify-self: start; }
.bb-stat-rows { display: grid; gap: 1px; margin: 0 -8px; }
.bb-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; padding: 4px 8px; border: 0; border-radius: 4px;
  background: none; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.bb-stat:hover, .bb-stat:focus-visible { background: rgba(255,255,255,.05); outline: none; }
.bb-stat > span:first-child { color: var(--muted); }
.bb-stat .v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-stat s { color: var(--dim); text-decoration-thickness: 1px; margin-right: 6px; font-size: 12px; }
.bb-stat.up b { color: #9fe3c0; } .bb-stat.down b { color: #ff9aa5; }
.bb-stat.total { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; margin: 2px 0; padding: 6px 8px; }
.bb-stat.total > span:first-child { color: var(--text); font-weight: 600; }
.bd-pop { min-width: 260px; }
.bd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px; }
.bd-list li { display: flex; justify-content: space-between; gap: 14px; }
.bd-list li span { color: var(--muted); } .bd-list b { font-variant-numeric: tabular-nums; }
.bd-list b.pos { color: #9fe3c0; } .bd-list b.neg { color: #ff9aa5; }
.bd-list .bd-base { padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--border); }
.bd-list .bd-base b { color: var(--text); }
.bd-formula { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.bd-note { margin: 8px 0 0; font-size: 12px; color: var(--dim); }
.bd-total { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-2); font-weight: 700; }
.bb-dmg-bar { display: flex; height: 6px; border-radius: 99px; overflow: hidden; margin: 14px 0 8px; background: rgba(255,255,255,.06); }
.bb-dmg-bar span { display: block; height: 100%; }
.bb-dmg { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.bb-dmg li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.bb-dmg i { width: 8px; height: 8px; border-radius: 2px; }
.bb-dmg span { color: var(--muted); } .bb-dmg b { font-variant-numeric: tabular-nums; }
.bb-bonus-el { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.bb-bonus-el label { margin-right: auto; }
.bb-bonus-el select, .bb-bonus-el input { background: rgba(0,0,0,.35); border: 1px solid var(--border-2); border-radius: 4px; color: var(--text); font: inherit; font-size: 12.5px; padding: 4px 6px; }
.bb-bonus-el input { width: 42px; text-align: center; }
.bb-stat-note { margin: 12px 0 0; font-size: 11.5px; color: var(--dim); line-height: 1.4; }
.bb-more { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.bb-more summary { cursor: pointer; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.bb-bonus { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px; }
.bb-bonus li { display: flex; justify-content: space-between; gap: 10px; }
.bb-bonus li span { color: var(--muted); }
.bb-bonus b { font-variant-numeric: tabular-nums; }
.bb-bonus b.pos { color: #dfe7f0; } .bb-bonus b.neg { color: #ff9aa5; }

.bb-board { padding: 18px; display: grid; gap: 14px; margin-bottom: 0; }
.bb-row { display: grid; gap: 12px; }
.bb-toprow { grid-template-columns: repeat(2, minmax(0, 190px)); justify-content: center; }
.bb-mods.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bb-mods.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bb-lower { grid-template-columns: repeat(auto-fit, minmax(0, 190px)); justify-content: center; padding-top: 4px; }
.bb-row-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding-right: 6px; }
.bb-extra { margin: 0; }
.bb-noitem { display: grid; gap: 4px; text-align: center; padding: 6px 10px 12px; }
.bb-board.noitem .bb-row { opacity: .45; pointer-events: none; }

/* a slot */
.sl { position: relative; min-width: 0; height: calc(var(--mc-h) + 22px); border-radius: 4px; outline: none; }
.sl-label { position: absolute; top: 0; left: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.sl-pol { position: absolute; top: -3px; right: 2px; z-index: 1; display: grid; place-items: center; width: 22px; height: 20px; padding: 0; border: 0; background: none;
  color: var(--muted); cursor: pointer; border-radius: 4px; }
.sl-pol:hover:not(:disabled) { color: var(--text); background: var(--panel-3); }
.sl-pol:disabled { cursor: default; }
.sl-in { position: absolute; top: 20px; left: 0; right: 0; height: var(--mc-h); border-radius: 4px; border: 1px dashed rgba(255,255,255,.13);
  background: rgba(255,255,255,.015); display: grid; transition: border-color .15s, background .15s, box-shadow .15s; }
.sl.full .sl-in { border-color: transparent; background: none; }
.sl-empty { display: grid; place-items: center; font-size: 12px; color: var(--dim); padding: 6px; text-align: center; }
.bb:not([data-readonly]) .sl { cursor: pointer; }
.bb:not([data-readonly]) .sl:not(.full):hover .sl-in { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.03); }
.sl.sel .sl-in { border-color: rgba(236,242,250,.75); border-style: solid; box-shadow: 0 0 0 3px var(--glow), 0 0 24px -6px rgba(230,238,248,.4); }
.sl.sel .sl-label { color: var(--accent-2); }
.sl.drop-ok .sl-in { border-color: #9fe3c0; border-style: solid; background: rgba(111,214,164,.07); box-shadow: 0 0 0 3px rgba(111,214,164,.2); }
.sl.drop-no .sl-in { border-color: rgba(239,107,120,.5); }
.bb.dragging .sl:not(.drop-ok):not(.drop-no) .sl-in { border-color: rgba(255,255,255,.2); }

/* the abilities (Helminth) + archon shards card (side panel) */
.bb-loadout { display: grid; gap: 10px; }
.lo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lo-head .side-title { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lo-head + .lo-row { margin-top: -2px; }
.lo-row + .lo-head, .lo-cap + .lo-head { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.lo-note { font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.lo-row { display: grid; gap: 8px; max-width: 320px; }
.ab-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sh-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tile { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border-radius: 4px; outline: none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); border: 1px solid var(--border-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: border-color .15s, background .15s, box-shadow .15s, transform .15s; }
.tile img { width: 64%; height: 64%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
.bb:not([data-readonly]) .tile { cursor: pointer; }
.bb:not([data-readonly]) .tile:hover { border-color: rgba(255,255,255,.32); background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); }
.tile.sel { border-color: rgba(236,242,250,.8); box-shadow: 0 0 0 3px var(--glow); }
.ab-ph { font-size: 17px; font-weight: 600; color: var(--dim); }
.ab-n { position: absolute; left: 5px; top: 3px; font-style: normal; font-size: 10px; font-weight: 700; color: var(--dim); }
.tile.ab.hsub { border-color: rgba(239,94,110,.75); background: linear-gradient(180deg, rgba(226,60,80,.32), rgba(120,20,34,.22));
  box-shadow: inset 0 0 18px -4px rgba(255,90,110,.55), 0 0 18px -8px rgba(239,94,110,.9); }
.tile.ab.hsub .ab-n { color: #ffb3bc; }
.tile.ab.hsub.sel { box-shadow: 0 0 0 3px rgba(239,94,110,.35), inset 0 0 18px -4px rgba(255,90,110,.55); }
.tile.sh { border-radius: 4px; }
.tile.sh:not(.full) { background: rgba(255,255,255,.015); border-style: dashed; border-color: rgba(255,255,255,.14); box-shadow: none; }
.tile.sh img { width: 86%; height: 86%; }
.sh-plus { font-size: 18px; line-height: 1; color: var(--dim); }
.lo-cap { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 8px; border-radius: 4px; font-size: 12.5px; color: var(--muted);
  background: rgba(226,60,80,.08); border: 1px solid rgba(239,94,110,.22); }
.lo-cap b { color: var(--text); }
.lo-cap > span { min-width: 0; flex: 1; }
.lo-mini { width: 20px; height: 20px; object-fit: contain; flex: none; }
.lo-x { border: 0; background: none; color: #ffb3bc; font: inherit; font-size: 12px; font-weight: 600; padding: 2px 4px; border-radius: 4px; cursor: pointer; }
.lo-x:hover { background: rgba(239,94,110,.16); color: #fff; }
.lo-shards { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.lo-shards li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lo-shards li > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo-shards img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.lo-shards b { color: var(--text); font-variant-numeric: tabular-nums; }

/* polarity glyphs */
.pol { display: inline-block; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--pi) center / contain no-repeat; mask: var(--pi) center / contain no-repeat; }
.pol-madurai { --pi: url("/assets/pol_madurai.png"); } .pol-vazarin { --pi: url("/assets/pol_vazarin.png"); }
.pol-naramon { --pi: url("/assets/pol_naramon.png"); } .pol-zenurik { --pi: url("/assets/pol_zenurik.png"); }
.pol-unairu { --pi: url("/assets/pol_unairu.png"); } .pol-penjaga { --pi: url("/assets/pol_penjaga.png"); }
.pol-umbra { --pi: url("/assets/pol_umbra.png"); } .pol-any { --pi: url("/assets/pol_any.png"); }
.pol.none { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.18); background: none; -webkit-mask: none; mask: none; }

/* a mod card */
.mc { position: absolute; inset: 0 0 auto 0; height: var(--mc-h); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1c1f25 0%, #121418 100%); border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rc) 60%, transparent), 0 10px 26px -14px rgba(0,0,0,.9);
  transition: height .18s ease, box-shadow .18s, transform .12s; z-index: 1; --rc: var(--r-common); user-select: none; }
.mc.r-common { --rc: var(--r-common); } .mc.r-uncommon { --rc: var(--r-uncommon); } .mc.r-rare { --rc: var(--r-rare); }
.mc.r-legendary { --rc: var(--r-legendary); } .mc.r-riven { --rc: var(--r-riven); background: linear-gradient(180deg, #221a33 0%, #131019 100%); }
.mc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, rgba(255,255,255,.07) 0%, transparent 30%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), inset 0 0 0 2px color-mix(in srgb, var(--rc) 18%, transparent); }
/* the frame: corner brackets in the rarity colour, a crest on the top edge, a plate under the rank */
.mc::before { content: ""; position: absolute; inset: 4px; border-radius: 4px; pointer-events: none; z-index: 3; opacity: .9;
  --c: color-mix(in srgb, var(--rc) 85%, #fff); --l: 11px; --w: 1.5px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l) no-repeat; }
.mc.r-legendary::before, .mc.r-riven::before { --l: 16px; filter: drop-shadow(0 0 3px var(--rc)); }
.mc-top::after { content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; transform: rotate(45deg); z-index: 3;
  background: color-mix(in srgb, var(--rc) 90%, #fff); box-shadow: 0 0 8px color-mix(in srgb, var(--rc) 80%, transparent); border: 1px solid rgba(0,0,0,.6); }
.mc.r-legendary { background: linear-gradient(180deg, #23232b 0%, #121318 100%); }
.mc.r-legendary .mc-top::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.14) 45%, transparent 60%); background-size: 250% 100%;
  animation: mc-shine 5s ease-in-out infinite; }
@keyframes mc-shine { 0%, 60% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.mc.r-riven { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rc) 60%, transparent), 0 0 18px -6px rgba(180,140,255,.55), 0 10px 26px -14px rgba(0,0,0,.9); }
.mc-top { position: relative; height: 54px; flex: none; overflow: hidden;
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 70%); }
.mc-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: .9;
  mask-image: linear-gradient(180deg, #000 45%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent); }
.mc-art.none { display: grid; place-items: center; color: var(--dim); font-weight: 600; font-size: 20px; mask-image: none; -webkit-mask-image: none; }
.riven-art { background: url("/assets/riven_bg.jpg") center 48% / cover no-repeat; opacity: .95; }
.mc-drain { position: absolute; top: 7px; right: 8px; display: flex; align-items: center; gap: 3px; padding: 1px 6px 1px 7px; border-radius: 3px;
  background: rgba(8,9,12,.72); border: 1px solid rgba(255,255,255,.12); font-size: 12px; z-index: 5; color: #e6ebf1; }
.mc-drain b { font-variant-numeric: tabular-nums; }
.mc-drain .pol { width: 13px; height: 13px; }
.mc-drain.good { color: #9fe3c0; border-color: rgba(111,214,164,.45); }
.mc-drain.bad { color: #ff9aa5; border-color: rgba(239,107,120,.45); }
.mc-body { padding: 0 9px; margin-top: -6px; position: relative; z-index: 1; min-height: 0; flex: 1; display: flex; flex-direction: column; }
.mc-name { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.2; text-align: center; color: #f2f5f9;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.mc-more { display: none; flex-direction: column; gap: 6px; padding: 7px 0 4px; }
.mc-stats { display: grid; gap: 3px; font-size: 11.5px; line-height: 1.35; color: #c9d1db; text-align: center; }
.mc-type { align-self: center; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--rc) 80%, #fff);
  padding: 1px 8px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent); }
.mc-pips { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 3px; z-index: 4; }
.mc-pips::before { content: ""; position: absolute; left: 18%; right: 18%; top: -5px; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rc) 55%, transparent), transparent); }
.mc-pips i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.14); }
.mc-pips i.on { background: var(--rc); box-shadow: 0 0 5px color-mix(in srgb, var(--rc) 70%, transparent); }
.mc-pips.dense { gap: 2px; } .mc-pips.dense i { width: 4px; height: 4px; }
.mc-pips i[data-rank] { cursor: pointer; position: relative; }
.mc-pips i[data-rank]::before { content: ""; position: absolute; inset: -5px -2px; }
.mc-pips i[data-rank] { transition: transform .12s ease, background-color .12s ease, opacity .12s ease; }
.mc-pips i[data-rank]:hover { transform: scale(1.5); }
.mc.previewing .mc-pips i.on:not(.rk-pv) { opacity: .3; }
.mc.previewing .mc-pips i.rk-pv:not(.on) { background: color-mix(in srgb, var(--rc) 60%, transparent); }
.mc.previewing .mc-drain b, .mc.previewing .ac-rank { color: var(--hi); }
.bb-head-side .bb-copy { margin: 0; }
.bb-own-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.bb-own-actions:empty { display: none; }
.bb-byline { font-size: 13.5px; color: var(--muted); }
.bb-byline:empty { display: none; }
.bb-author { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); text-decoration: none; }
.bb-author img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.bb-author span { color: var(--text); font-weight: 600; }
.bb-author:hover span { text-decoration: underline; text-underline-offset: 3px; }
.bb-author .me-name.tester { animation: gold-shine 7s linear infinite; filter: drop-shadow(0 0 5px rgba(250,220,130,.3)); }
.bb-author.official .i { width: 16px; height: 16px; color: var(--hi); }
.bb-idline { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.bb-id, .bb-cmd { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--panel-2, rgba(255,255,255,.03)); color: var(--muted); font-size: 12px; cursor: pointer; font-family: inherit;
  transition: border-color .15s, color .15s; }
.bb-id b { color: var(--text); font-family: var(--mono, ui-monospace, monospace); font-weight: 600; letter-spacing: .02em; }
.bb-id .i { width: 13px; height: 13px; opacity: .7; }
.bb-cmd .i { width: 14px; height: 14px; }
.bb-cmd code { background: none; padding: 0; font-size: 12px; color: var(--text); }
.bb-id:hover, .bb-cmd:hover, .bb-id.copied, .bb-cmd.copied { border-color: rgba(255,255,255,.3); color: var(--text); }
@media (max-width: 720px) { .bb-own-actions, .bb-idline { justify-content: flex-start; } }
.mc-x, .mc-edit { position: absolute; top: 7px; left: 8px; z-index: 5; width: 20px; height: 20px; padding: 0; border-radius: 4px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,9,12,.75); color: #cfd6de; font-size: 14px; line-height: 1; cursor: pointer; display: none; place-items: center; }
.mc-edit { left: 30px; font-size: 11px; }
.mc-x:hover { color: #fff; background: rgba(239,107,120,.5); }
.mc-edit:hover { color: #fff; background: rgba(180,140,255,.45); }
.mc.unknown { --rc: #ef6b78; }
/* expanded: hover (mouse) or press and hold (touch) */

.mc.expanded { height: auto; min-height: var(--mc-h); z-index: 20; box-shadow: 0 22px 50px -12px rgba(0,0,0,.95); }
.mc.expanded .mc-more { display: flex; } .mc.expanded .mc-pips { position: static; padding: 2px 0 8px; }
.sl .mc.expanded .mc-x, .sl .mc.expanded .mc-edit { display: grid; }
.sl.sel .mc .mc-edit { display: grid; }
.mc.lifted { opacity: .4; }
/* arcanes */
.mc.arc .mc-top { height: 50px; display: grid; place-items: center; }
.ac-art { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--rc) 45%, transparent)); }
.ac-art.none { border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.2); }
.mc.arc .mc-body { margin-top: 2px; }

/* the mod list at the bottom */
.bb-details { margin-top: 18px; }
.bb-details-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 22px; align-items: start; }
.bb-details .fld { margin-bottom: 14px; }
.bb-details .row { margin-bottom: 0; }
.bb-share { display: flex; align-items: center; gap: 6px; word-break: break-all; margin: 0; }
.bb-danger { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.bb-dock { position: sticky; bottom: 0; z-index: 30; margin: 18px -6px 0; border-radius: 4px 4px 0 0; border: 1px solid var(--border-2); border-bottom: 0;
  background: rgba(12,13,16,.95);  
  box-shadow: 0 -20px 50px -20px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); }
.bb-dock-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.bb-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 4px; background: rgba(0,0,0,.35); border: 1px solid var(--border); }
.bb-tabs button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 4px; cursor: pointer; }
.bb-tabs button.on { background: var(--chrome); color: #0c0d10; }
.bb-search { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; max-width: 360px; background: rgba(0,0,0,.35); border: 1px solid var(--border-2);
  border-radius: 4px; padding: 0 8px 0 10px; }
.bb-search:focus-within { border-color: rgba(255,255,255,.35); box-shadow: 0 0 0 3px var(--glow); }
.bb-search .i { width: 15px; height: 15px; color: var(--muted); }
.bb-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: inherit; font-size: 14px; padding: 7px 0; }
.bb-search input::-webkit-search-cancel-button { display: none; }
.bb-count { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-dock-bar select { background: rgba(0,0,0,.35); border: 1px solid var(--border-2); border-radius: 4px; color: var(--text); font: inherit; font-size: 13px; padding: 6px 8px; }
#bb-dock-toggle { margin-left: auto; }
#bb-dock-toggle .i { transform: rotate(90deg); transition: transform .2s; }
.bb-dock.folded #bb-dock-toggle .i { transform: rotate(-90deg); }
.bb-dock.folded .bb-dock-list { display: none; }
.bb-dock-list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, var(--mc-h)); grid-auto-columns: 148px; gap: 10px;
  overflow-x: auto; overflow-y: visible; padding: 12px 14px 14px; scrollbar-width: thin; scroll-padding: 14px; }
.bb-dock-list > .mc { position: relative; inset: auto; cursor: grab; }
.bb-dock-list > .mc:active { cursor: grabbing; }
.bb-dock-list > .mc .mc-more { display: none !important; }
@media (hover: hover) { .bb-dock-list > .mc:hover { height: var(--mc-h); transform: translateY(-2px); z-index: 2;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.9), 0 0 0 1px color-mix(in srgb, var(--rc) 60%, transparent); }
  .bb-dock-list > .mc:hover .mc-name { -webkit-line-clamp: 2; } .bb-dock-list > .mc:hover .mc-pips { position: absolute; padding: 0; } }
.bb-peek { position: fixed; z-index: 110; width: 250px; padding: 12px 14px; border-radius: 4px; background: #15171c; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--rc, #888) 55%, transparent); box-shadow: 0 24px 60px -16px rgba(0,0,0,.95), inset 0 1px 0 color-mix(in srgb, var(--rc, #888) 50%, transparent);
  display: grid; gap: 7px; animation: rise .12s ease both; }
.bb-peek[hidden] { display: none; }
.bb-peek-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bb-peek-head strong { font-size: 14px; }
.bb-peek .mc-drain { position: static; }
.bb-peek .mc-stats { text-align: left; font-size: 12.5px; }
.bb-peek .mc-type { justify-self: start; }
.bb-peek .peek-note { font-size: 11.5px; color: var(--muted); }
.bb-dock-list > .mc.used { opacity: .32; filter: grayscale(.7); }
.bb-dock-list > .mc.hi { outline: 2px solid rgba(236,242,250,.85); outline-offset: 2px; }
.bb-list-empty { grid-row: 1 / -1; align-self: center; padding: 0 6px; margin: 0; }
.add-riven .mc-name { color: #d9c6ff; }
.bb-keys { position: sticky; bottom: 0; z-index: 31; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; padding: 8px 12px; margin: 0 -6px;
  background: rgba(8,9,12,.92); border: 1px solid var(--border-2); border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.bb-keys span { display: inline-flex; align-items: center; gap: 4px; }
.bb-keys kbd { font-size: 11px; padding: 0 5px; }
.bb-dock + .bb-keys { margin-top: 0; }
.bb-dock { bottom: 37px; }

/* popovers */
.bb-pop { position: fixed; z-index: 120; min-width: 230px; max-width: min(420px, calc(100vw - 20px)); padding: 14px; border-radius: 4px; background: #15171b;
  border: 1px solid var(--border-2); box-shadow: 0 30px 70px -20px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06); animation: rise .16s ease both; }
.bb-pop.centered { left: 50%; top: 50%; transform: translate(-50%, -50%); animation: none; width: min(460px, calc(100vw - 24px)); max-width: none;
  max-height: calc(100vh - 40px); overflow-y: auto; }
.pop-title { font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.pop-foot { margin: 10px 0 8px; }
.pop-actions { display: flex; gap: 8px; margin-top: 12px; }
.pol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pol-grid button { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 4px; border: 1px solid transparent; background: none; color: var(--text);
  font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.pol-grid button:hover { background: var(--panel-3); }
.pol-grid button.on { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.07); }
.riven-pop .fld, .ab-pop .fld { margin-bottom: 10px; }
.rv-grid { display: grid; grid-template-columns: 1.2fr 1fr .7fr; gap: 8px; }
.rv-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 84px; gap: 8px; align-items: center; margin-top: 6px; }
.rv-row select, .rv-row input { background: rgba(0,0,0,.3); border: 1px solid var(--border-2); border-radius: 4px; color: var(--text); font: inherit; font-size: 13.5px; padding: 6px 8px; min-width: 0; }
.rv-sign { font-weight: 600; text-align: center; } .rv-sign.pos { color: #9fe3c0; } .rv-sign.neg { color: #ff9aa5; }
.shard-pop { width: 320px; }
.shard-colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 12px; }
.shard-colors button { display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px 5px; border-radius: 4px; border: 1px solid transparent; background: none;
  color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.shard-colors button:hover { background: var(--panel-3); }
.shard-colors button.on { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.07); }
.shard-colors img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.sp-tau { margin-bottom: 10px; font-size: 13px; }
.sp-tau small { font-weight: 500; }
.sp-effects { display: grid; gap: 3px; }
.sp-effects button { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 7px 9px; border-radius: 4px; border: 1px solid transparent;
  background: none; color: var(--muted); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.sp-effects button b { color: var(--text); font-variant-numeric: tabular-nums; }
.sp-effects button:hover, .sp-effects button:focus-visible { background: var(--panel-3); color: var(--text); outline: none; }
.sp-effects button.on { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.07); color: var(--text); }
.sp-hint { margin: 2px 0; }
.ab-pop { width: 340px; }
.ab-pop .inp .i { align-self: center; margin-left: 10px; width: 15px; height: 15px; color: var(--dim); flex: none; }
.ap-cur { display: flex; align-items: center; gap: 10px; padding: 8px; margin-bottom: 12px; border-radius: 4px; background: rgba(226,60,80,.08); border: 1px solid rgba(239,94,110,.22); }
.ap-cur > span:nth-child(2) { display: grid; line-height: 1.25; flex: 1; min-width: 0; }
.ap-cur small, .ap-list small { color: var(--muted); font-size: 11.5px; }
.ap-list { display: grid; gap: 2px; max-height: 286px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; }
.ap-list button { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 4px; border: 1px solid transparent; background: none; color: var(--text);
  font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.ap-list button > span:last-child { display: grid; line-height: 1.25; min-width: 0; }
.ap-list button:hover, .ap-list button.hi { background: rgba(236,242,250,.08); }
.ap-list button.hi { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.ap-list button.on b { color: #ffb3bc; }
.ap-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 4px; flex: none; background: rgba(255,255,255,.05); border: 1px solid var(--border); }
.ap-ic img { width: 76%; height: 76%; object-fit: contain; }
.ap-ic .ab-ph { font-size: 13px; }
.ap-ic.hsub { border-color: rgba(239,94,110,.7); background: rgba(226,60,80,.25); }
dl.keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
dl.keys dt { font-family: var(--mono); font-size: 12px; color: var(--accent-2); white-space: nowrap; }
dl.keys dd { margin: 0; color: var(--muted); }

/* suggestion lists (combo.js) */
.combo-list { position: fixed; z-index: 130; max-height: 320px; overflow-y: auto; padding: 5px; border-radius: 4px; background: #15171b;
  border: 1px solid var(--border-2); box-shadow: 0 24px 60px -16px rgba(0,0,0,.95); scrollbar-width: thin; }
.combo-row { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 4px; cursor: pointer; font-size: 14px; }
.combo-row.on { background: rgba(236,242,250,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.combo-row img { width: 30px; height: 30px; object-fit: contain; border-radius: 4px; background: rgba(0,0,0,.3); flex: none; }
.combo-text { display: grid; line-height: 1.25; min-width: 0; }
.combo-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-text small { color: var(--muted); font-size: 12px; }

/* the public page */
.build-public .bb { margin-top: 6px; }
.bb-notes .bb-notes-text { white-space: pre-wrap; color: #d5dbe3; }
.bb-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.bb-made { display: flex; align-items: center; justify-content: center; gap: 6px 8px; margin: 26px 0 0; flex-wrap: wrap; text-align: center; }
.bb-made img { width: 20px; height: 20px; }
.build-public .bb-notes { margin-top: 18px; }

@media (max-height: 1080px) and (min-width: 721px) { .bb-dock-list { grid-template-rows: var(--mc-h); } .build-page .toasts { bottom: 220px; } }
@media (max-width: 1100px) {
  .bb-main { grid-template-columns: minmax(0, 1fr); }
  .bb-side { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .bb-details-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .bb { --mc-h: 96px; }
  .bb-head { grid-template-columns: 56px minmax(0, 1fr); }
  .bb-item-img { width: 56px; height: 56px; }
  .bb-head-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .bb-name { font-size: 20px; }
  .bb-mods.cols-4, .bb-mods.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-toprow, .bb-lower { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-row-label { grid-column: 1 / -1; }
  .bb-keys { display: none; }
  .bb-dock { bottom: 0; }
  .bb-dock-list { grid-template-rows: var(--mc-h); grid-auto-columns: 132px; padding: 10px; }
  .bb-dock-bar { gap: 8px; padding: 8px 10px; flex-wrap: nowrap; }
  .bb-dock-bar select, .bb-count, .bb-search kbd { display: none; }
  .bb-search { flex: 1 1 auto; min-width: 0; }
  .bb-tabs button { padding: 5px 9px; }
  .build-page .toasts { bottom: 180px; }
}

/* --- 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; }
.perm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; margin: 4px 0 10px; }
@media (max-width: 980px) { .perm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- owner: power controls + restart suggestion ------------------------------------------- */
.power-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.power-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.power-title small { display: block; margin-top: 3px; font-size: 13px; }
.power-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--dim); }
.power-dot.online { background: var(--ok); box-shadow: 0 0 0 0 rgba(111,214,164,.6); animation: pulse 2s infinite; }
.power-dot.connecting, .power-dot.restarting { background: var(--warn); }
.power-dot.offline, .power-dot.stopping { background: var(--danger); }
.power-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.power-changed { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: 4px; font-size: 13.5px;
  background: rgba(233,196,106,.07); border: 1px solid rgba(233,196,106,.25); color: #f1dca6; }
.power-changed .i { color: var(--warn); margin-top: 2px; }
.power-changed .muted { display: block; margin-top: 3px; overflow-wrap: anywhere; }
.restart-toast { position: fixed; right: 20px; bottom: 20px; z-index: 95; width: min(400px, calc(100vw - 32px));
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 14px 14px 14px 16px;
  border-radius: 4px; background: rgba(18,20,24,.82); border: 1px solid var(--border-2);
   
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(24px); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.restart-toast.in { transform: none; opacity: 1; }
.rt-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 4px; background: var(--chrome); color: #0c0d10; }
.rt-text strong { display: block; font-size: 14px; }
.rt-text small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.power-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(5,5,7,.78);
   }
.power-overlay[hidden] { display: none; }
.po-box { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 30px 34px; border-radius: 4px;
  background: rgba(18,20,24,.8); border: 1px solid var(--border-2); max-width: 360px; }
.po-box img { width: 64px; height: 64px; animation: po-spin 2.4s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(220,232,245,.4)); }
.po-box small { color: var(--muted); }
@keyframes po-spin { 50% { transform: rotate(180deg) scale(.92); opacity: .7; } }
@media (max-width: 640px) { .restart-toast { right: 16px; bottom: 16px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .restart-toast form { grid-column: 2; } }


/* ======================= platform: home, profiles, settings, rivens ======================= */
.me-hero { display: flex; align-items: center; gap: 20px; margin: 4px 0 34px; flex-wrap: wrap; }
.me-avatar { width: 76px; height: 76px; border-radius: 50%; flex: none; object-fit: cover; background: var(--panel-3);
  box-shadow: 0 0 0 1px var(--border-2), 0 0 32px -8px rgba(220,232,245,.35); }
.me-avatar.initial { display: grid; place-items: center; font-size: 30px; font-weight: 600; color: var(--muted); }
.me-hero-text { flex: 1; min-width: 220px; }
.me-hero-text h1 { margin: 0 0 6px; font-size: 32px; }
.me-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; color: var(--muted); font-size: 14px; }
.me-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.code-chip { display: inline-block; font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: var(--accent-2);
  padding: 2px 8px; border-radius: 4px; background: var(--panel-3); border: 1px solid var(--border); }

.block { margin-bottom: 44px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.block-head h2 { font-size: 19px; }
.block-head a { font-size: 14px; color: var(--muted); } .block-head a:hover { color: var(--text); }
.empty-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--muted); padding: 6px 0; }
.empty-line p { margin: 0; max-width: 70ch; }

.build-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.build-tile { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 4px; color: var(--text);
  border: 1px solid var(--border); background: var(--panel); transition: border-color .15s, background .15s; }
.build-tile:hover { border-color: var(--border-2); background: rgba(255,255,255,.04); }
.bt-pic { width: 58px; height: 58px; border-radius: 4px; flex: none; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, rgba(220,230,242,.1), transparent 70%), #0b0c0f; }
.bt-pic img { width: 100%; height: 100%; object-fit: contain; }
.bt-text { display: grid; min-width: 0; line-height: 1.3; }
.bt-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-text > .muted { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 12px; color: var(--dim); }
.vis { color: var(--muted); } .vis-public { color: #9fe3c0; } .vis-private { color: #ffb3bc; }
.tag.vis-public { color: #9fe3c0; } .tag.vis-private { color: #ffb3bc; }

.server-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 12px; }
.server-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 4px; color: var(--text); transition: background .15s; }
.server-row:hover { background: var(--panel-3); }
.server-row .gicon { width: 34px; height: 34px; border-radius: 4px; }
.sr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

/* grades: the tier colours of the grade pictures */
.g-S { --g: #ffde66; } .g-Ap { --g: #6ef5aa; } .g-A { --g: #60e89e; } .g-Am { --g: #56d696; }
.g-Bp { --g: #6ed6ff; } .g-B { --g: #60c4f5; } .g-Bm { --g: #58b2e8; }
.g-Cp { --g: #ffbe6e; } .g-C { --g: #ffac60; } .g-Cm { --g: #ff9858; } .g-F { --g: #ff7684; }
.grade-plate { display: inline-grid; place-items: center; min-width: 38px; height: 32px; padding: 0 8px; border-radius: 4px;
  font: 600 21px/1 var(--mono); color: var(--g, var(--text)); background: rgba(8,9,12,.78);
  border: 1px solid color-mix(in srgb, var(--g, #fff) 40%, transparent); }
.grade-plate.inline { height: 26px; min-width: 32px; font-size: 17px; }

.riven-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.riven-tile { display: flex; flex-direction: column; border-radius: 4px; overflow: hidden; color: var(--text); border: 1px solid var(--border);
  background: #14161b; transition: border-color .15s, transform .15s; }
.riven-tile:hover { border-color: rgba(190,170,255,.4); }
.rt-pic { position: relative; aspect-ratio: 4 / 4.6; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(150,120,230,.16), transparent 70%), #0d0e12; }
.rt-pic img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.rt-art { position: absolute; inset: 0; background: url("/assets/riven_bg.jpg") center / cover; opacity: .55; }
.rt-pic .grade-plate { position: absolute; left: 10px; top: 10px; }
.rt-id { position: absolute; right: 10px; top: 12px; font-size: 12px; font-weight: 700; color: var(--muted); padding: 3px 8px;
  border-radius: 3px; background: rgba(8,9,12,.75); border: 1px solid var(--border); }
.trade-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 3px; font-size: 13px; font-weight: 700;
  color: #d6dce4; background: rgba(10,11,14,.6); border: 1px solid rgba(255,255,255,.22); }
.trade-tag .i { width: 14px; height: 14px; color: #b9c3cf; }
.rt-pic .trade-tag { position: absolute; left: 10px; bottom: 10px; }
.trade-tag.big { font-size: 15px; padding: 6px 13px; }
.rt-text { display: grid; gap: 2px; padding: 10px 12px 14px; }
.rt-text > strong { font-size: 15px; }
.rt-name { font-size: 13px; color: #a8b8cc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-stats { display: grid; gap: 3px; margin-top: 8px; }
.rt-stat { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 6px; align-items: baseline; font-size: 12.5px; }
.rt-stat b { font: 600 14px/1 var(--mono); color: var(--g, var(--text)); }
.rt-stat span { color: #ced4dc; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-stat small { color: var(--muted); font-variant-numeric: tabular-nums; }
.rt-stat.curse { margin-top: 3px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.07); }
.rt-stat.curse span { color: #f0a0ab; } .rt-stat.curse small { color: #ff6378; }

.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.subtabs a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subtabs a:hover { color: var(--text); }
.subtabs a.active { color: var(--text); border-bottom-color: #e8edf3; }
.subtabs-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

.settings-form, .settings-block { max-width: 760px; }
.settings-form h2, .settings-block h2 { font-size: 19px; margin-bottom: 14px; }
.choice-group { border: 0; padding: 0; margin: 0 0 22px; }
.choice-group legend { font-weight: 700; margin-bottom: 8px; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 4px; border: 1px solid var(--border); cursor: pointer;
  transition: border-color .15s, background .15s; }
.choice:hover { border-color: var(--border-2); }
.choice:has(input:checked) { border-color: rgba(236,242,250,.6); background: rgba(255,255,255,.04); }
.choice input { margin-top: 3px; accent-color: #e4eaf1; }
.choice span { display: grid; gap: 2px; } .choice small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.form-actions { margin: 4px 0 40px; }
.settings-block { padding-top: 26px; margin-bottom: 30px; border-top: 1px solid var(--border); }
.danger-zone h2 { color: #ffb3bc; }
.delete-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.delete-form .fld { margin: 0; min-width: 220px; }

.riven-page { display: grid; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); gap: 40px; align-items: start; }
.rp-pic { border-radius: 4px; overflow: hidden; border: 1px solid var(--border); position: relative; min-height: 300px;
  background: radial-gradient(circle at 50% 40%, rgba(150,120,230,.18), transparent 70%), #0d0e12; display: grid; place-items: center; }
.rp-pic img { width: 100%; display: block; }
.rp-id { margin: 0 0 4px; color: var(--muted); font-weight: 600; font-family: var(--mono); font-size: 13px; }
.riven-page h1 { font-size: 34px; margin-bottom: 10px; }
.rp-name { color: #a8b8cc; font-weight: 700; }
.rp-stats { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 8px; }
.rp-stats li { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(140px, 220px); gap: 14px; align-items: center;
  padding: 12px 14px; border-radius: 4px; border: 1px solid var(--border); background: var(--panel); }
.rp-stats li.curse { border-color: rgba(255,99,120,.22); }
.rp-grade { font: 600 24px/1 var(--mono); color: var(--g); text-align: center; }
.rp-stat strong { color: #50e3a8; } .curse .rp-stat strong { color: #ff6378; }
.rp-range { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 0; font-size: 11.5px; color: var(--dim); }
.rp-range small:last-child { text-align: right; }
.rp-bar { grid-column: 1 / -1; position: relative; height: 6px; border-radius: 99px; background: linear-gradient(90deg, #ff6378, #ffcc66, #50e3a8); }
.rp-bar i { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; transform: translate(-50%, -50%);
  background: #0a0e14; border: 2.5px solid var(--text); }
.rp-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0 0 16px; }
.rp-facts dt { color: var(--muted); } .rp-facts dd { margin: 0; }
.rp-foot { margin-top: 26px; }
/* managing your riven, selling it, its trades */
.rp-manage, .rp-history { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 22px; }
.rp-manage h2, .rp-history h2 { font-size: 17px; margin: 0 0 12px; }
.rp-manage > p { margin: -4px 0 12px; }
.rp-form { display: grid; gap: 14px; }
.rp-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.rp-row .bb-toggle { min-height: 42px; }
.rp-row .grow { flex: 1 1 240px; }
.rp-price { flex: 0 1 220px; }
.rp-price .inp .suffix { font-family: inherit; font-weight: 500; font-size: 13px; color: var(--dim); }
.rp-row > .button { margin-left: auto; min-height: 42px; }
.rp-remove { margin-top: 16px; }
.rp-offer { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.rp-remove summary { cursor: pointer; color: var(--muted); font-size: 13.5px; width: max-content; }
.rp-remove summary:hover { color: #ffb3bc; }
.rp-remove form { padding-top: 10px; }
.trade-offer { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px;
  margin: 18px 0; border-radius: 4px; border: 1px solid rgba(190,170,255,.32); background: rgba(150,130,255,.06); }
.trade-offer p { margin: 0; max-width: 60ch; }
.to-actions, .tl-actions { display: flex; gap: 8px; }
.trade-list { list-style: none; margin: 0; padding: 0; }
.trade-list li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.trade-list li:last-child { border-bottom: 0; }
.trade-list.open li { padding: 12px 0; }
.tl-when { color: var(--dim); font-variant-numeric: tabular-nums; min-width: 92px; font-size: 13px; }
.tl-riven { font-weight: 700; color: var(--text); }
.tl-arrow { color: var(--dim); padding: 0 2px; }
.tl-price { display: inline-flex; align-items: center; gap: 5px; color: #c6ced8; font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-price .i { width: 13px; height: 13px; color: #b9c3cf; }
.tl-status { font-size: 12px; color: var(--muted); padding: 2px 8px; border-radius: 3px; border: 1px solid var(--border-2); text-transform: capitalize; }
.tl-actions { margin-left: auto; }
.subtabs .count.hot { background: #e8edf3; color: #0c0d10; }

.bb-publish { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.bb-publish > div { display: grid; flex: 1; min-width: 220px; line-height: 1.35; }
.bb-publish select { background: rgba(0,0,0,.3); border: 1px solid var(--border-2); border-radius: 4px; color: var(--text); font: inherit;
  font-size: 13.5px; padding: 6px 8px; }

@media (max-width: 980px) {
  .riven-page { grid-template-columns: 1fr; gap: 24px; }
  .rp-pic { max-width: 360px; }
}
@media (max-width: 640px) {
  .me-hero { gap: 14px; } .me-avatar { width: 60px; height: 60px; } .me-hero-text h1 { font-size: 26px; }
  .rp-stats li { grid-template-columns: 36px 1fr; } .rp-range { grid-column: 1 / -1; }
  .riven-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ============================================================================================
   The website and the dashboard, split (2026-10): top bar, footer, home, browse pages, dashboard
   ============================================================================================ */
.display { font-family: var(--sans); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; }
.only-phone { display: none !important; }
.i.flip { transform: rotate(180deg); }

/* --- top bar: Dashboard | you (profile) ▾ --- */
.tb-dash { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 4px; color: var(--muted);
  font-size: 14px; font-weight: 500; transition: color .15s, background .15s; }
.tb-dash .i { width: 16px; height: 16px; }
.tb-dash:hover { color: var(--text); background: var(--panel-2); }
.tb-dash.active { color: var(--text); background: var(--panel-3); }
.tb-div { width: 1px; height: 22px; background: var(--border-2); margin: 0 6px; }
.account { display: flex; align-items: center; border-radius: 3px; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.account:hover, .account:has(.usermenu[open]) { background: var(--panel-2); border-color: var(--border); }
.acc-me { display: flex; align-items: center; gap: 9px; padding: 3px 6px 3px 3px; border-radius: 3px; color: var(--text); }
.acc-av { position: relative; display: block; }
.acc-av .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--panel-3); display: block; }
.acc-dot { position: absolute; right: -1px; top: -1px; width: 10px; height: 10px; border-radius: 50%; background: #e8edf3;
  box-shadow: 0 0 0 2px #08090b, 0 0 10px rgba(232,237,243,.7); }
.account .usermenu summary { padding: 7px 9px 7px 3px; border: 0; background: none; border-radius: 0 3px 3px 0; }
.account .usermenu summary:hover, .account .usermenu[open] summary { background: none; color: var(--text); }
.account .um-caret { transition: transform .2s; }
.account .usermenu[open] .um-caret { transform: rotate(-90deg); }
.um-count { margin-left: auto; font-size: 11.5px; font-weight: 700; color: #0c0d10; background: #e8edf3; border-radius: 3px; padding: 0 7px; line-height: 18px; }

/* --- footer --- */
.site-foot { border-top: 1px solid var(--border); margin-top: 40px; padding: 40px 28px 28px; color: var(--muted); }
.sf-in { max-width: 1184px; margin: 0 auto; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.sf-brand p { margin: 12px 0 0; font-size: 14px; max-width: 34ch; }
.sf-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.sf-cols div { display: grid; gap: 8px; align-content: start; }
.sf-cols h4 { margin: 0 0 4px; font-size: 13px; color: var(--text); font-weight: 600; }
.sf-cols a { color: var(--muted); font-size: 14px; } .sf-cols a:hover { color: var(--text); }
.sf-fine { max-width: 1184px; margin: 32px auto 0; font-size: 12.5px; color: var(--dim); }

/* --- home --- */
.home .content { padding-top: 26px; }
.home-note { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 18px; border-radius: 4px; color: var(--text);
  border: 1px solid rgba(232,237,243,.22); background: rgba(232,237,243,.05); }
.home-note span { flex: 1; } .home-note .i:last-child { color: var(--muted); }
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: center; min-height: 520px; padding: 28px 0 56px; }
.hero-title { font-size: clamp(44px, 5.4vw, 80px); margin: 0 0 22px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-title span { display: block; white-space: nowrap; }
.hero-lead { font-size: 18px; line-height: 1.6; color: #c2c9d2; max-width: 52ch; margin: 0 0 30px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 0; margin: 34px 0 0; color: var(--muted); font-size: 14px; }
.hero-facts li { padding-left: 12px; border-left: 1px solid var(--border-2); }
.hero-facts strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* the hand of riven cards: dealt in once on load, fanned from the bottom, a card lifts under the pointer */
.hero-art { display: grid; justify-items: center; gap: 18px; }
.fan { position: relative; width: min(100%, 480px); height: 470px; }
.fan-card { --mid: calc((var(--n) - 1) / 2); --off: calc(var(--i) - var(--mid));
  position: absolute; left: 50%; bottom: 10px; width: 236px; aspect-ratio: 340 / 460; margin-left: -118px; border-radius: 4px; overflow: hidden;
  background: #120f1c url("/assets/riven_bg.jpg") center / cover; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.4);
  transform-origin: 50% 120%; transform: translateX(calc(var(--off) * 62px)) rotate(calc(var(--off) * 9deg));
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; animation: deal .8s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--i) * 90ms); z-index: calc(10 - var(--i)); }
.fan-card:nth-child(2) { z-index: 11; } .fan-card:nth-child(3) { z-index: 12; }
.fan-card > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fan-card .grade-plate { position: absolute; left: 10px; top: 10px; }
.fan-card .trade-tag { position: absolute; left: 10px; bottom: 10px; }
.fan-card.blank { opacity: .55; }
.fan-card:hover, .fan-card:focus-visible { transform: translateX(calc(var(--off) * 62px)) translateY(-26px) rotate(calc(var(--off) * 9deg)); z-index: 20;
  box-shadow: 0 40px 70px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(190,170,255,.55), 0 0 40px -10px rgba(170,140,255,.5); }
@keyframes deal { from { transform: translateY(40px) rotate(0deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fan-card { animation: none; } }
.fan-caption { color: var(--muted); font-size: 13.5px; } .fan-caption:hover { color: var(--text); }

.home-sec { padding: 46px 0 6px; border-top: 1px solid var(--border); }
.hs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.hs-head h2 { font-size: 34px; }
.hs-head a { color: var(--muted); font-size: 14px; } .hs-head a:hover { color: var(--text); }
.trade-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: s; }
.trade-steps li { position: relative; padding: 0 30px 10px 0; }
.trade-steps li + li { padding-left: 30px; border-left: 1px solid var(--border); }
.step-n { display: block; font: 600 64px/1 var(--mono); color: transparent; -webkit-text-stroke: 1px rgba(232,237,243,.5); margin-bottom: 14px; }
.trade-steps h3 { font-size: 18px; margin: 0 0 8px; }
.trade-steps p { color: #b9c1cb; margin: 0; max-width: 34ch; }
.discord-sec { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; padding-bottom: 20px; }
.ds-copy h2 { font-size: 34px; margin-bottom: 12px; }
.ds-copy p { max-width: 44ch; margin-bottom: 22px; }
.dc-cmds { margin: 0; display: grid; }
.dc-cmds > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.dc-cmds > div:first-child { border-top: 1px solid var(--border); }
.dc-cmds dt { font-weight: 600; } .dc-cmds dd { margin: 0; color: #b9c1cb; }

/* --- browse pages (/builds, /rivens): filters on the left, results on the right --- */
.browse-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 6px 0 28px; }
.browse-head h1 { font-size: 52px; margin: 0 0 8px; }
.browse-head p { margin: 0; }
.bh-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.browse { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px; align-items: start; }
.filters { position: sticky; top: calc(var(--topbar) + 20px); z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.filters fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.filters legend { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 9px; padding: 0; }
.fsearch { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--border-2); background: rgba(0,0,0,.25); }
.fsearch:focus-within { border-color: rgba(222,230,240,.6); }
.fsearch .i { color: var(--muted); width: 16px; height: 16px; }
.fsearch input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; padding: 10px 0; outline: none; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip input, .fseg input { position: absolute; opacity: 0; pointer-events: none; }
.fchip span { display: inline-block; padding: 5px 11px; border-radius: 3px; border: 1px solid var(--border); color: var(--muted); font-size: 13px;
  cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.fchip span:hover { color: var(--text); border-color: var(--border-2); }
.fchip input:checked + span { color: #0c0d10; background: #e8edf3; border-color: #e8edf3; font-weight: 600; }
.fchip[class*="g-"] input:checked + span { background: var(--g); border-color: var(--g); }
.fchip input:focus-visible + span, .fseg input:focus-visible + span { box-shadow: 0 0 0 3px var(--glow); }
.fseg { display: flex; padding: 3px; border-radius: 4px; background: rgba(0,0,0,.3); border: 1px solid var(--border); }
.fseg label { flex: 1; }
.fseg span { display: block; text-align: center; padding: 6px 6px; border-radius: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.fseg input:checked + span { background: var(--panel-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-2); }
.frange { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 10px; }
.frange .inp input { padding: 8px 10px; font-size: 14px; }
.frange-to { color: var(--dim); font-size: 13px; }
.frange-unit { grid-column: 1 / -1; color: var(--dim); font-size: 12px; }
.filters select { width: 100%; }
.f-actions { display: flex; gap: 8px; }
.filters[data-js] .f-actions .button:not(.ghost) { display: none; }
.results-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.rsort { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.rsort .inp select { padding: 7px 34px 7px 10px; font-size: 13.5px; }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 26px; }
.pager > :last-child { justify-self: end; }
.rt-by, .bt-by { color: var(--dim); font-size: 12px; }
.rt-by { margin-top: 2px; }
.vis-official { color: #e8edf3; font-weight: 600; }

/* --- the dashboard: sidebar + page --- */
.dash { display: grid; grid-template-columns: 252px minmax(0, 1fr); max-width: 1560px; margin: 0 auto; min-height: calc(100vh - var(--topbar)); }
.dash-side { position: sticky; top: var(--topbar); align-self: start; height: calc(100vh - var(--topbar)); overflow-y: auto; scrollbar-width: thin;
  padding: 22px 14px 40px; border-right: 1px solid var(--border); }
.ds-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; }
.ds-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin-top: 22px; min-width: 0; }
.ds-label { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 6px; font-size: 12px; font-weight: 600; color: var(--dim); }
.ds-count { font-variant-numeric: tabular-nums; }
.ds-link, .ds-server { display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 4px; color: var(--muted); font-size: 14px;
  font-weight: 500; transition: color .12s, background .12s; min-width: 0; }
.ds-link .i { width: 16px; height: 16px; }
.ds-link:hover, .ds-server:hover { color: var(--text); background: var(--panel-2); }
.ds-link.on { color: var(--text); background: var(--panel-3); box-shadow: inset 2px 0 0 #e8edf3; }
.ds-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-gicon { width: 22px; height: 22px; border-radius: 4px; flex: none; object-fit: cover; }
.ds-gicon.initial { display: grid; place-items: center; background: linear-gradient(135deg, #1d2026, #2a2e35); font-size: 11px; font-weight: 600; color: #e8edf2; }
.ds-server.here { color: var(--text); }
.ds-sub { display: grid; gap: 1px; margin: 2px 0 6px 21px; padding-left: 10px; border-left: 1px solid var(--border); }
.ds-sub .ds-link { padding: 6px 10px; font-size: 13.5px; }
.ds-empty { color: var(--dim); font-size: 13px; padding: 2px 10px 6px; margin: 0; }
.ds-docs { margin: 4px 0 0 10px; padding-left: 10px; border-left: 1px solid var(--border); min-width: 0; }
.ds-docs .search { width: 100%; max-width: none; }
.ds-docs .search input { min-width: 0; width: 100%; }
.ds-docs nav a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-dash .topbar-in { max-width: 1560px; padding: 0 24px; }
.ds-docs .small-search { margin: 4px 0 8px; }
.ds-docs nav { display: grid; gap: 1px; }
.ds-docs nav a { color: var(--muted); font-size: 13px; padding: 5px 10px; border-radius: 4px; }
.ds-docs nav a:hover { color: var(--text); background: var(--panel-2); }
.ds-docs nav a.active { color: #fff; background: rgba(222,230,240,.1); }
.ds-docs .toc-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--dim); padding: 10px 10px 4px; }
.dash-main { min-width: 0; padding: 32px 40px 90px; animation: rise .35s ease both; }
.dash-menu { display: none; margin-bottom: 16px; }
.dash-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.dash-head .gicon.lg { width: 56px; height: 56px; border-radius: 4px; }
.dash-head .gicon.crown .i { width: 28px; height: 28px; }
.dh-text { flex: 1; min-width: 200px; }
.dh-text .crumbs { margin-bottom: 4px; }
.dh-text h1 { margin: 0; font-size: 28px; }
.dh-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-title { margin-bottom: 26px; }
.dash-title h1 { margin-bottom: 4px; }
.dash-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start; }
.srv-list { display: grid; border-top: 1px solid var(--border); }
.srv-row { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-bottom: 1px solid var(--border); color: var(--text); }
a.srv-row:hover { background: var(--panel-2); }
.srv-row .gicon { width: 40px; height: 40px; border-radius: 4px; }
.srv-row .gicon.initial { font-size: 17px; }
.srv-text { flex: 1; display: grid; min-width: 0; line-height: 1.35; }
.srv-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-text small { color: var(--muted); font-size: 12.5px; }
.srv-text .sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--dim); margin: 0 8px; vertical-align: middle; }
.srv-go { color: var(--dim); width: 16px; height: 16px; }
.dash-aside { display: grid; gap: 14px; position: sticky; top: calc(var(--topbar) + 24px); }
.side-box { padding: 18px; border-radius: 4px; border: 1px solid var(--border); background: var(--panel); }
.side-box h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0 0 6px; }
.side-box h3 .i { width: 16px; height: 16px; color: var(--accent-2); }
.side-links { display: grid; margin-top: 10px; }
.side-links a { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--border); color: var(--text); font-size: 14px; }
.side-links a .i { width: 14px; height: 14px; color: var(--dim); }
.side-links a:hover .i { color: var(--text); }
/* the docs live in the dashboard: their contents are in the sidebar */
.docs { display: block; }
.docs-body { max-width: 880px; }
/* editors need the room: on wide screens the sidebar folds to icons */
@media (min-width: 981px) {
  .editor-page .dash, .build-page .dash { grid-template-columns: 64px minmax(0, 1fr); max-width: none; }
  .editor-page .dash-side, .build-page .dash-side { padding: 18px 10px; }
  .editor-page .ds-text, .build-page .ds-text, .editor-page .ds-label, .build-page .ds-label,
  .editor-page .ds-sub, .build-page .ds-sub, .editor-page .ds-docs, .build-page .ds-docs { display: none; }
  .editor-page .ds-link, .build-page .ds-link, .editor-page .ds-server, .build-page .ds-server { justify-content: center; padding: 9px 0; }
  .editor-page .ds-group, .build-page .ds-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
  .editor-page .dash-main { padding: 26px 30px 90px; } .build-page .dash-main { padding: 26px 30px 0; }
}

@media (max-width: 1100px) {
  .dash-cols { grid-template-columns: minmax(0, 1fr); }
  .dash-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 20px; padding-bottom: 40px; }
  .fan { height: 380px; }
}
@media (max-width: 980px) {
  .only-phone { display: block !important; }
  .tb-dash, .tb-div { display: none; }
  .account .um-name { display: none; }
  .account .usermenu summary { display: flex; }
  .account .um-caret { display: block; }
  .browse { grid-template-columns: 1fr; }
  .filters { position: static; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 22px; }
  .dash { grid-template-columns: 1fr; }
  .dash-side { display: none; position: fixed; z-index: 45; left: 0; top: var(--topbar); width: min(300px, 86vw); background: #08090b;
    box-shadow: 30px 0 60px -20px rgba(0,0,0,.9); }
  body.dash-open .dash-side { display: block; }
  .dash-menu { display: inline-flex; }
  .dash-main, .editor-page .dash-main, .build-page .dash-main { padding: 20px 16px 90px; }
  .discord-sec { grid-template-columns: 1fr; gap: 26px; }
  .trade-steps { grid-template-columns: 1fr; gap: 26px; }
  .trade-steps li + li { padding-left: 0; border-left: 0; padding-top: 26px; border-top: 1px solid var(--border); }
  .site-foot { padding: 32px 16px 24px; }
}
@media (max-width: 640px) {
  .hero-title { font-size: 44px; }
  .hero-title span { white-space: normal; }
  .fan { height: 250px; }
  .fan-card { width: 150px; margin-left: -75px; transform: translateX(calc(var(--off) * 40px)) rotate(calc(var(--off) * 8deg)); }
  .fan-card:hover { transform: translateX(calc(var(--off) * 40px)) translateY(-16px) rotate(calc(var(--off) * 8deg)); }
  .browse-head h1 { font-size: 40px; }
  .dc-cmds > div { grid-template-columns: 1fr; gap: 4px; }
  .hs-head h2, .ds-copy h2 { font-size: 28px; }
  .sf-cols { gap: 30px; }
}

/* --- search suggestions (browse pages): the box widens over the results while it lists suggestions --- */
.fsearch { position: relative; transition: width .18s ease, border-radius .18s; width: 100%; }
.fsearch.open { width: min(430px, calc(100vw - 32px)); z-index: 40; background: #0d0e12; border-color: var(--border-2);
  border-radius: 4px 4px 0 0; box-shadow: 0 24px 60px -18px rgba(0,0,0,.95); }
.suggest { position: absolute; left: -1px; right: -1px; top: 100%; margin: 0; padding: 6px; list-style: none; background: #0d0e12;
  border: 1px solid var(--border-2); border-top-color: var(--border); border-radius: 0 0 4px 4px;
  box-shadow: 0 30px 60px -18px rgba(0,0,0,.95); max-height: 420px; overflow-y: auto; }
.sg-item { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 4px; cursor: pointer; }
.sg-item.on { background: var(--panel-3); }
.sg-pic { width: 40px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 4px; background: rgba(255,255,255,.03); overflow: hidden; }
.sg-pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sg-text { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.sg-text strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-text small { font-size: 12px; color: var(--muted); }
.sg-kind { font-size: 11.5px; color: var(--dim); }
.sg-item.on .sg-kind { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .fsearch { transition: none; } }

/* --- riven stat filters: picked stats, each with a lowest grade --- */
.fstats { display: grid; gap: 8px; }
.fstats legend { margin-bottom: 9px; }
.fstat { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 6px 6px 6px 10px;
  border-radius: 4px; border: 1px solid var(--border-2); background: rgba(255,255,255,.03); }
.fs-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inp.mini select { padding: 4px 26px 4px 8px; font-size: 12.5px; background-position: right 8px center; }
.fstat .icon-btn.tiny { margin-left: 0; }
.fstats .fseg { margin-top: 2px; }

/* --- prices: the game's platinum icon and a number, no pills --- */
img.plat { width: 1.05em; height: 1.05em; object-fit: contain; vertical-align: -.18em; margin-right: .3em; }
.rt-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.rt-top strong { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price { flex: none; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.price.offers { font-weight: 500; font-size: 12.5px; color: var(--muted); }
.rt-id { background: none; border: 0; padding: 0; color: rgba(255,255,255,.75); text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.rp-letter { font: 600 22px/1 var(--mono); color: var(--g); margin-right: 2px; }
.rp-ask { display: grid; gap: 2px; margin: 18px 0 6px; }
.rp-ask .lbl { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.rp-ask strong { font-size: 26px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rp-ask strong small { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.tl-status { border: 0; padding: 0; color: var(--dim); }
.fchip span { border-radius: 4px; }
/* the home's hand of rivens: the price on a dark band at the bottom of the card */
.fan-price { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; font-weight: 700; font-size: 15px;
  color: #fff; background: linear-gradient(180deg, transparent, rgba(6,6,10,.92) 55%); font-variant-numeric: tabular-nums; }
.fan-name { position: absolute; inset: auto 12px 52px; display: grid; gap: 2px; text-align: center; font: 700 22px/1.05 Rajdhani, Inter, sans-serif;
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.9); }
.fan-name small { font: 600 13px/1.3 Inter, sans-serif; color: #d6cdf5; }
.fan-card.blank { opacity: 1; filter: saturate(.55) brightness(.5); box-shadow: 0 30px 60px -24px rgba(0,0,0,.95); }

/* --- "Add riven": a card the size of a riven tile, then a dialog: the drop area, "Or add it manually",
   and the editor opening downwards --- */
.riven-add-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 320px; padding: 20px;
  border-radius: 4px; border: 1px dashed var(--border-2); background: transparent; color: var(--text); font: inherit; cursor: pointer;
  transition: border-color .2s, background .2s; }
.riven-add-card:hover, .riven-add-card.drag { border-color: rgba(232,237,243,.45); background: rgba(255,255,255,.025); }
.riven-add-card.drag { border-style: solid; }
.riven-add-card:focus-visible { box-shadow: 0 0 0 3px var(--glow); outline: none; }
.riven-add-card strong { font-size: 16px; }
.riven-add-card small { color: var(--muted); font-size: 13px; }
.ra-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 4px; background: var(--panel-3); color: var(--accent-2); }
dialog.ra-modal { width: min(560px, calc(100vw - 32px)); transition: width .3s cubic-bezier(.2,.8,.2,1); }
dialog.ra-modal.open { width: min(880px, calc(100vw - 32px)); }
.ra-drop { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 190px; padding: 22px; border-radius: 4px;
  border: 1.5px dashed var(--border-2); background: rgba(255,255,255,.015); cursor: pointer; outline: none; text-align: left;
  transition: min-height .3s cubic-bezier(.2,.8,.2,1), border-color .2s, background .2s; }
.ra-drop:hover { border-color: rgba(232,237,243,.4); }
.ra-drop:focus-visible { box-shadow: 0 0 0 3px var(--glow); }
.ra-modal.drag .ra-drop, .ra-drop.drag { border-color: #e8edf3; border-style: solid; background: rgba(232,237,243,.06); }
.ra-drop-text { display: grid; gap: 3px; }
.ra-drop-text strong { font-size: 15.5px; }
.ra-hint { color: var(--muted); font-size: 13px; }
.ra-busy { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text); }
.ra-busy[hidden] { display: none; }
.ra-modal.busy .ra-drop-text, .ra-modal.busy .ra-drop .ra-icon { display: none; }
.ra-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); border-top-color: #e8edf3; animation: raspin .8s linear infinite; }
@keyframes raspin { to { transform: rotate(360deg); } }
.ra-modal.open .ra-drop { min-height: 64px; padding: 12px 16px; justify-content: flex-start; }
.ra-modal.open .ra-drop .ra-icon { width: 34px; height: 34px; border-radius: 4px; }
.ra-manual { display: inline-flex; align-items: center; gap: 4px; margin: 12px auto 0; border: 0; background: none; color: var(--muted);
  font: inherit; font-size: 14px; cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.ra-modal .ra-manual { display: flex; }
.ra-manual:hover { color: var(--text); }
.ra-caret { width: 15px; height: 15px; transform: rotate(90deg); transition: transform .25s; }
.ra-manual[aria-expanded="true"] .ra-caret { transform: rotate(-90deg); }
.ra-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.2,.8,.2,1); }
.ra-modal.open .ra-wrap { grid-template-rows: 1fr; }
.ra-editor { min-height: 0; overflow: hidden; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; }
.ra-modal.open .ra-editor { padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--border); overflow: visible; }
.ra-pic { position: relative; align-self: start; aspect-ratio: 340 / 460; border-radius: 4px; overflow: hidden; display: grid; place-items: center;
  background: #120f1c url("/assets/riven_bg.jpg") center / cover; border: 1px solid var(--border); }
.ra-pic img { width: 100%; height: 100%; object-fit: contain; display: none; background: #0b0a10; }
.ra-modal.has-pic .ra-pic img { display: block; }
.ra-modal.has-pic .ra-noimg { display: none; }
.ra-noimg { color: rgba(255,255,255,.75); font-size: 13px; text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.ra-form { min-width: 0; display: grid; align-content: start; gap: 12px; }
.ra-top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) 84px 72px; gap: 12px; align-items: end; }
.ra-weapon { position: relative; }
.ra-weapon .suggest { top: calc(100% + 4px); border-radius: 4px; border-top-color: var(--border-2); z-index: 30; }
.ra-wicon { width: 30px; height: 24px; object-fit: contain; align-self: center; margin-left: 9px; }
.ra-wicon[hidden] { display: none; }
.ra-overall { display: grid; justify-items: center; }
.ra-overall strong { font: 600 34px/1 var(--mono); color: var(--g, var(--muted)); padding-top: 2px; }
.ra-class { margin: -4px 0 4px; min-height: 18px; }
.ra-stats { display: grid; gap: 8px; }
.ra-row { display: grid; grid-template-columns: 128px minmax(0, 1fr) 36px 26px; gap: 8px; align-items: center; }
.ra-val input { font-variant-numeric: tabular-nums; font-weight: 600; }
.ra-row.curse .ra-val input { color: #ff8f9b; }
.ra-g { font: 600 20px/1 var(--mono); text-align: center; color: var(--g, var(--dim)); }
.ra-add { justify-self: start; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--muted); font: inherit;
  font-size: 13.5px; padding: 4px 0; cursor: pointer; }
.ra-add:hover { color: var(--text); }
.ra-add .i { width: 15px; height: 15px; }
.ra-add[hidden] { display: none; }
.ra-neg { display: grid; gap: 8px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--border); }
.ra-neg > .lbl { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ra-more { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--border); }
.ra-more .fld { width: 110px; }
.ra-more .ra-price { width: 190px; }
.ra-price .inp .suffix { font-family: inherit; font-weight: 500; font-size: 13px; color: var(--dim); }
.ra-trade { min-height: 42px; }
.ra-msg { min-height: 20px; margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.ra-msg.warn { color: #e9c46a; } .ra-msg.err { color: #ff8f9b; }
.ra-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ra-first { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .ra-wrap, dialog.ra-modal, .ra-drop { transition: none; } .ra-spin { animation-duration: 2s; } }
@media (max-width: 760px) {
  .ra-editor { grid-template-columns: 1fr; gap: 18px; }
  .ra-pic { width: min(220px, 60vw); justify-self: center; }
  .ra-top { grid-template-columns: 1fr 1fr; }
  .ra-row { grid-template-columns: 96px minmax(0, 1fr) 30px 26px; }
}

/* --- profile: banner, picture with an edit button, the Tester badge --- */
.me-hero.v2 { display: block; margin: 0 0 30px; width: 100%; max-width: none; container-type: inline-size; }
.me-banner { height: 150px; border-radius: 4px; border: 1px solid var(--border); background: center / cover no-repeat,
  radial-gradient(ellipse at 75% 0%, rgba(200,210,225,.10), transparent 60%), linear-gradient(180deg, #121419, #0b0c0f); }
.me-hero.v2.has-banner .me-banner { height: min(28cqw, 340px); }   /* the stored banner's shape (1500 x 420), up to 340px tall */
.me-row { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding: 0 22px; margin-top: -46px; }
.me-av-wrap { position: relative; flex: none; }
.me-hero.v2 .me-avatar { width: 104px; height: 104px; border: 4px solid var(--bg); box-shadow: 0 10px 30px -10px rgba(0,0,0,.8); }
.me-edit { position: absolute; right: 2px; bottom: 2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 3px solid var(--bg); background: #e8edf3; color: #0c0d10; cursor: pointer; transition: transform .15s; }
.me-edit .i { width: 14px; height: 14px; }
.me-edit:hover { transform: scale(1.08); }
.me-edit:focus-visible { box-shadow: 0 0 0 3px var(--glow); }
.me-hero.v2 .me-hero-text { padding-bottom: 6px; }
.me-hero.v2 .me-hero-text h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.me-hero.v2 .me-hero-actions { padding-bottom: 10px; }
/* a Tester: the name in shining gold and a small four-point star ("Tester Status" on hover) */
.me-name.tester { position: relative; background: linear-gradient(100deg, #d9ae4a 0%, #f7dd8f 18%, #fff8e1 30%, #fbe3a0 40%, #e6bd5c 58%,
    #f9e39d 76%, #fffaea 86%, #d9ae4a 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: gold-shine 7s linear infinite, gold-glow 3.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 6px rgba(250,220,130,.35)) drop-shadow(0 0 18px rgba(240,200,100,.22)); }
@keyframes gold-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes gold-glow {
  from { filter: drop-shadow(0 0 5px rgba(250,220,130,.28)) drop-shadow(0 0 14px rgba(240,200,100,.16)); }
  to { filter: drop-shadow(0 0 8px rgba(255,232,150,.5)) drop-shadow(0 0 24px rgba(245,205,110,.3)); } }
.tester-star { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: -4px; cursor: default;
  outline: none; }
.tester-star svg { width: 22px; height: 22px; filter: drop-shadow(0 0 6px rgba(250,220,130,.6)); transition: transform .25s ease; }
.tester-star:hover svg, .tester-star:focus-visible svg { transform: scale(1.18); filter: drop-shadow(0 0 10px rgba(244,201,93,.8)); }
.tester-star::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 4px);
  white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #f4c95d; padding: 5px 9px; border-radius: 4px;
  background: #121317; border: 1px solid rgba(244,201,93,.35); box-shadow: 0 8px 24px -8px rgba(0,0,0,.8);
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.tester-star:hover::after, .tester-star:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.button .i.tester-ic { fill: #f4d77e; stroke: none; filter: drop-shadow(0 0 4px rgba(250,220,130,.5)); }
@media (prefers-reduced-motion: reduce) { .me-name.tester { animation: none; } .tester-star svg { transition: none; } }
.build-rows .build-add-card { margin-bottom: 0; text-decoration: none; color: inherit; }
@media (max-width: 640px) { .me-row { padding: 0 8px; margin-top: -38px; } .me-hero.v2 .me-avatar { width: 84px; height: 84px; }
  .me-banner { height: 120px; } .me-hero.v2 .me-hero-text { flex-basis: 100%; min-width: 0; } }

/* --- dialogs --- */
dialog.modal { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 26px 26px 24px; border-radius: 4px;
  border: 1px solid var(--border-2); background: #0f1014; color: var(--text); box-shadow: 0 40px 100px -20px rgba(0,0,0,.95); overflow: auto; }
dialog.modal::backdrop { background: rgba(3,3,5,.72); }
dialog.modal[open] { animation: rise .22s ease both; }
dialog.modal h2 { font-size: 19px; margin: 0 0 18px; padding-right: 40px; }
.modal-x { position: absolute; right: 14px; top: 14px; margin: 0; }
.pe-body { display: grid; gap: 20px; }
.pe-part { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; }
.pe-part + .pe-part { padding-top: 20px; border-top: 1px solid var(--border); }
.pe-preview { border-radius: 4px; background: var(--panel-3) center / cover no-repeat; border: 1px solid var(--border); overflow: hidden; }
.pe-preview.avatar { width: 96px; height: 96px; border-radius: 50%; justify-self: center; }
.pe-preview.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-preview.banner { width: 150px; height: auto; aspect-ratio: 1500 / 420; }
.pe-text { display: grid; gap: 4px; }
.pe-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pe-msg { min-height: 18px; margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.pe-msg.err { color: #ff8f9b; }
@media (max-width: 520px) { .pe-part { grid-template-columns: 1fr; } }

/* --- builds: hashtags and votes in the head, hearts / stars on the tiles --- */
.bb-head-side { display: grid; justify-items: end; align-content: space-between; gap: 12px; align-self: stretch; }
.bb-hashtags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 12px; max-width: 340px; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.bb-votes { display: flex; gap: 8px; }
.vote { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 4px; border: 1px solid var(--border-2);
  background: rgba(255,255,255,.03); color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s; }
.vote .i { width: 17px; height: 17px; }
.vote:hover { color: var(--text); border-color: rgba(255,255,255,.28); }
.vote.heart.on { color: #ff7d93; border-color: rgba(255,125,147,.45); background: rgba(255,125,147,.08); }
.vote.heart.on .i { fill: currentColor; }
.vote.star.on { color: #f4c95d; border-color: rgba(244,201,93,.45); background: rgba(244,201,93,.08); }
.vote.star.on .i { fill: currentColor; }
.vote[aria-disabled="true"] { cursor: default; }
.vote[aria-disabled="true"]:hover { color: var(--muted); border-color: var(--border-2); }
.bb-stargazers { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 18px 0 0; color: var(--muted); font-size: 13.5px; }
.bb-stargazers .i { width: 15px; height: 15px; color: #f4c95d; fill: currentColor; }
.bb[data-readonly] .bb-item-pick { flex: 0 1 auto; }
.bb[data-readonly] .bb-item-pick input { width: auto; field-sizing: content; }
.bt-line2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 3px; font-size: 12px; min-height: 16px; }
.bt-votes { display: inline-flex; gap: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bt-votes span { display: inline-flex; align-items: center; gap: 3px; }
.bt-votes .i { width: 13px; height: 13px; }
.bt-stars { color: #f4c95d; } .bt-stars .i { fill: currentColor; }
@media (max-width: 720px) { .bb-head-side { grid-column: 1 / -1; justify-items: start; } .bb-hashtags { justify-content: flex-start; } }

/* --- apps (builder phase 2): the apps grid, an app's page --------------------------------------------------- */
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.app-card { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: var(--radius); color: var(--text);
  background: var(--panel); border: 1px solid var(--border); transition: border-color .15s, background .15s; min-width: 0; }
.app-card:hover { border-color: var(--border-2); background: var(--panel-2); }
.app-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.app-card.off { opacity: .62; }
.ac-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ac-mark, .ah-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 4px; 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), inset 0 -2px 0 color-mix(in srgb, var(--c, #3a4654) 70%, transparent); }
.ac-name { flex: 1; min-width: 0; font-weight: 700; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-state { font-size: 12px; font-weight: 600; color: var(--dim); display: inline-flex; align-items: center; gap: 6px; }
.ac-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.ac-state.on { color: var(--muted); } .ac-state.on::before { background: var(--ok); box-shadow: 0 0 8px rgba(111,214,164,.5); }
.ac-desc { color: var(--muted); font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.ac-kinds { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.ac-kind { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); padding: 3px 8px 3px 6px;
  border-radius: 4px; background: var(--panel-3); }
.ac-kind .i { width: 13px; height: 13px; color: var(--accent-2); }
.ac-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--dim); padding-top: 10px; border-top: 1px solid var(--border); }
.ac-failed { color: #ff8f9b; display: inline-flex; align-items: center; gap: 4px; } .ac-failed .i { width: 12px; height: 12px; }
.app-new { width: 320px; padding: 14px; gap: 12px; }
.app-new .button { justify-self: start; }

.app-head { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.ah-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ah-mark { width: 52px; height: 52px; border-radius: 4px; }
.ah-mark .i { width: 24px; height: 24px; }
.ah-text { flex: 1; min-width: 220px; }
.ah-text h1 { margin: 0 0 4px; }
.ah-text p { margin: 0; max-width: 70ch; }
.ah-actions { display: flex; align-items: center; gap: 12px; }
.subtabs-tools .grow { flex: 1; }
.subtabs-tools .search { min-width: 220px; }

.run-table-card { padding: 0; overflow-x: auto; }
.run-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.run-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--dim); padding: 12px 16px; border-bottom: 1px solid var(--border); }
.run-table td { padding: 10px 16px; border-bottom: 1px solid var(--border); vertical-align: top; white-space: nowrap; }
.run-table tr:last-child td { border-bottom: 0; }
.run-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.run-table .rt-text { white-space: normal; color: var(--muted); min-width: 240px; }
.run-table tr.bad .rt-text { color: #ffc2c9; }
.rt-ok, .rt-bad { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.rt-ok { color: var(--ok); } .rt-bad { color: var(--danger); }
.rt-ok .i, .rt-bad .i { width: 13px; height: 13px; }
.app-settings h2 { margin-bottom: 14px; }
.app-settings .stack, form.stack { display: grid; gap: 14px; max-width: 560px; margin-bottom: 12px; }
.danger-zone { border-color: rgba(239, 91, 107, .25); }
@media (max-width: 720px) { .app-new { width: min(320px, calc(100vw - 32px)); } .ah-actions { width: 100%; } }

/* --- the flow studio (builder phase 3): canvas + list view, node palette, inspector, preview dock ---------------- */
:root { --side-w: 500px; --pal-w: 248px; --t-data: #7fd6c8; --t-trigger: #e4eaf1; --t-check: #e9c46a; --t-logic: #8fb4e6; --t-action: #c9d1db; --t-flow: #8f97a3; }
.studio-page .dash-main { padding: 0 !important; animation: none; }
.studio-page .dash-menu { display: none; }
.studio-wrap { height: calc(100vh - var(--topbar)); display: flex; flex-direction: column; min-width: 0; }
.studio-notes { padding: 0 16px; }
.studio-notes:not(:empty) .notice { margin: 10px 0 0; }
.studio-notes .notice:last-child { margin-bottom: 10px; }
.studio { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--pal-w) minmax(0, 1fr) var(--side-w);
  grid-template-rows: auto minmax(0, 1fr); border-top: 1px solid var(--border); }

.st-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-bottom: 1px solid var(--border);
  background: rgba(9, 10, 13, .92); min-width: 0; }
.st-title { min-width: 0; flex: 0 1 auto; }
.st-title .crumbs { margin: 0 0 1px; font-size: 12px; }
.st-title h1 { font-size: 17px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch; }
.st-mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.st-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.st-actions .save-state { margin-right: 6px; font-size: 12.5px; }
.st-actions .sb-toggle { max-width: 220px; overflow: hidden; transition: max-width .3s ease, padding .3s ease, opacity .2s, margin .3s; }
.st-actions .sb-toggle.gone { max-width: 0; padding-left: 0; padding-right: 0; border-width: 0; opacity: 0; margin-left: -6px; pointer-events: none; }
.seg { display: inline-flex; padding: 3px; border-radius: 4px; background: rgba(255,255,255,.04); border: 1px solid var(--border); }
.seg-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px;
  font-weight: 600; padding: 5px 11px; border-radius: 4px; cursor: pointer; }
.seg-btn .i { width: 15px; height: 15px; }
.seg-btn.on { background: rgba(255,255,255,.1); color: var(--text); }
.st-valid-wrap { position: relative; }
.st-valid { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: none; color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 3px; cursor: pointer; }
.st-valid .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px rgba(111,214,164,.6); }
.st-valid.bad { color: #ffc2c9; border-color: rgba(239,107,120,.35); }
.st-valid.bad .dot { background: var(--danger); box-shadow: 0 0 8px rgba(239,107,120,.6); }
.st-issues { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 80; width: 340px; max-height: 360px;
  overflow-y: auto; padding: 6px; border-radius: 4px; background: #111317; border: 1px solid var(--border-2); box-shadow: 0 24px 60px -16px rgba(0,0,0,.9); }
.st-issues[hidden] { display: none; }
.iss { display: flex; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 4px; background: none; color: var(--text); font: inherit; }
button.iss { cursor: pointer; } button.iss:hover { background: var(--panel-3); }
.iss .i { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--danger); }
.iss.ok .i { color: var(--ok); }
.iss strong { display: block; font-size: 13px; } .iss small { display: block; color: var(--muted); font-size: 12.5px; }

/* node palette (left) */
.st-palette { border-right: 1px solid var(--border); overflow-y: auto; padding: 12px 10px 18px; scrollbar-width: thin; background: rgba(8,9,11,.6); }
.np-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 4px; border: 1px solid var(--border-2); background: rgba(0,0,0,.25); }
.np-search .i { width: 15px; height: 15px; color: var(--dim); }
.np-search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: inherit; font-size: 13.5px; padding: 8px 0; outline: none; }
.np-search:focus-within { border-color: rgba(222,230,240,.5); }
.np-group { margin-top: 14px; display: grid; gap: 2px; }
.np-label { font-size: 12px; font-weight: 600; color: var(--dim); padding: 0 8px 4px; }
.np-item, .np-pick { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; padding: 7px 8px; border-radius: 4px;
  border: 1px solid transparent; background: none; color: var(--text); font: inherit; cursor: grab; }
.np-item:hover { background: var(--panel-3); border-color: var(--border); }
.np-item:disabled { opacity: .4; cursor: not-allowed; }
.np-item .i, .np-pick .i { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--accent-2); }
.np-item strong, .np-pick strong { display: block; font-size: 13px; font-weight: 600; }
.np-item small, .np-pick small { display: block; font-size: 11.5px; color: var(--dim); line-height: 1.35; margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.np-hint { font-size: 11.5px; padding: 14px 8px 0; }
.node-picker { width: 320px; max-height: 420px; }
.node-picker .np-pick { cursor: pointer; justify-content: flex-start; }
.node-picker .np-pick span { text-align: left; color: inherit; font-size: inherit; }

/* the canvas */
.st-stage { position: relative; min-width: 0; min-height: 0; }
.fc { position: absolute; inset: 0; overflow: hidden; outline: none; cursor: grab; touch-action: none; user-select: none;
  background-color: #060709; background-image: radial-gradient(circle, rgba(255,255,255,.075) 1px, transparent 1.3px); }
.fc[hidden] { display: none; }
.fc.panning { cursor: grabbing; }
.fc-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.fc-wires { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.fc-wire { fill: none; stroke: rgba(205,214,226,.42); stroke-width: 2; }
.fc-wire.minor { stroke-dasharray: 5 5; stroke: rgba(205,214,226,.3); }
.fc-wire.ran { stroke: rgba(111,214,164,.8); stroke-dasharray: none; }
.fc-wire.sel { stroke: #fff; stroke-width: 2.5; }
.fc-wire.temp { stroke: #e8edf3; stroke-dasharray: 6 5; }
.fc-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.fc-cut { position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--border-2); background: #16181c; color: var(--text); cursor: pointer; z-index: 5; padding: 0; }
.fc-cut .i { width: 12px; height: 12px; }
.fc-cut:hover { background: rgba(239,107,120,.2); color: #fff; }
.fc-cut[hidden] { display: none; }
.fc-box { position: absolute; border: 1px solid rgba(232,237,243,.6); background: rgba(232,237,243,.06); border-radius: 4px; pointer-events: none; z-index: 6; }
.fc-box[hidden] { display: none; }
.fc-node { --tone: var(--t-action); position: absolute; left: 0; top: 0; width: 232px; border-radius: 4px; background: #121418;
  border: 1px solid rgba(255,255,255,.1); box-shadow: 0 10px 28px -14px rgba(0,0,0,.9); cursor: default; outline: none; }
.fc-node.tone-trigger { --tone: var(--t-trigger); } .fc-node.tone-check { --tone: var(--t-check); } .fc-node.tone-logic { --tone: var(--t-logic); }
.fc-node.tone-flow { --tone: var(--t-flow); }
.fc-node:hover { border-color: rgba(255,255,255,.2); }
.fc-node.sel { border-color: rgba(232,237,243,.85); box-shadow: 0 0 0 3px rgba(232,237,243,.12), 0 14px 34px -14px rgba(0,0,0,.9); }
.fc-node.drop { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(111,214,164,.2); }
.fc-node.unreached { opacity: .55; }
.fc-node.stopped { border-color: rgba(239,107,120,.7); }
.fc-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px 4px; cursor: move; }
.fc-ico { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 4px; color: var(--tone);
  background: color-mix(in srgb, var(--tone) 13%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 28%, transparent); }
.fc-ico .i { width: 14px; height: 14px; }
.fc-title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-badge { font-family: var(--mono); font-size: 10.5px; color: var(--dim); max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-warn { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(239,107,120,.18); color: var(--danger); flex: none; }
.fc-warn .i { width: 10px; height: 10px; }
.fc-node.ran .fc-head::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px rgba(111,214,164,.7); flex: none; }
.fc-sub { padding: 0 12px 10px 47px; font-size: 12px; color: var(--muted); line-height: 1.35; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.fc-outs { border-top: 1px solid rgba(255,255,255,.06); padding: 5px 0; }
.fc-out { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 8px; height: 24px; padding-right: 12px; }
.fc-plabel { font-size: 11.5px; color: var(--muted); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-out.minor .fc-plabel { color: var(--dim); }
.fc-dot { position: absolute; right: -7px; top: 5px; width: 14px; height: 14px; border-radius: 50%; padding: 0; cursor: crosshair;
  border: 2px solid rgba(205,214,226,.55); background: #121418; transition: transform .12s, background .12s; }
.fc-out.wired .fc-dot { background: #cdd6e2; border-color: #cdd6e2; }
.fc-out.minor .fc-dot { border-color: rgba(205,214,226,.35); }
.fc-dot:hover { transform: scale(1.3); background: #fff; border-color: #fff; }
.fc-in { position: absolute; left: -6px; top: 17px; width: 11px; height: 11px; border-radius: 50%; background: #121418; border: 2px solid rgba(205,214,226,.45); }
.fc-ui { position: absolute; z-index: 10; }
.fc-zoom { right: 14px; top: 14px; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 4px; background: rgba(17,19,23,.9);
  border: 1px solid var(--border); }
.fc-zoom .icon-btn { width: 30px; height: 30px; font-size: 17px; }
.fc-zoom .icon-btn .i { width: 15px; height: 15px; }
.fc-zoom span { min-width: 44px; text-align: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fc-mini { right: 14px; bottom: 14px; width: 180px; height: 110px; border-radius: 4px; background: rgba(17,19,23,.88); border: 1px solid var(--border); cursor: pointer; }
.fc-help { left: 14px; bottom: 10px; font-size: 11.5px; margin: 0; pointer-events: none; }

/* the list view */
.fl { position: absolute; inset: 0; overflow-y: auto; padding: 22px 26px 60px; }
.fl[hidden] { display: none; }
.fl-flow { max-width: 660px; margin: 0 auto; display: grid; gap: 8px; }
.fl-node { --tone: var(--t-action); display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 4px; background: #121418;
  border: 1px solid rgba(255,255,255,.1); cursor: pointer; }
.fl-node.tone-trigger { --tone: var(--t-trigger); } .fl-node.tone-check { --tone: var(--t-check); } .fl-node.tone-logic { --tone: var(--t-logic); }
.fl-node.tone-flow { --tone: var(--t-flow); }
.fl-node:hover { border-color: rgba(255,255,255,.2); }
.fl-node.sel { border-color: rgba(232,237,243,.85); }
.fl-node.ran { box-shadow: inset 3px 0 0 var(--ok); }
.fl-node:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.fl-ico { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 4px; color: var(--tone);
  background: color-mix(in srgb, var(--tone) 13%, transparent); }
.fl-ico .i { width: 15px; height: 15px; }
.fl-text { flex: 1; min-width: 0; } .fl-text strong { display: block; font-size: 14px; } .fl-text small { display: block; color: var(--muted); font-size: 12.5px; }
.fl-branch { margin-left: 22px; padding-left: 16px; border-left: 1px dashed rgba(255,255,255,.14); display: grid; gap: 8px; }
.fl-blabel { font-size: 12px; font-weight: 600; color: var(--dim); display: flex; align-items: center; gap: 6px; padding-top: 2px; }
.fl-blabel .i { width: 13px; height: 13px; }
.fl-also { display: grid; gap: 8px; }
.fl-add { justify-self: start; display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--border-2); background: none; color: var(--muted);
  font: inherit; font-size: 12.5px; padding: 6px 11px; border-radius: 4px; cursor: pointer; }
.fl-add:hover { color: var(--text); border-color: rgba(255,255,255,.3); }
.fl-add .i { width: 13px; height: 13px; }
.fl-jump { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; padding: 4px 0; }
.fl-jump .i { width: 12px; height: 12px; }
.fl-loose { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); display: grid; gap: 8px; }

/* the right side: tabs, the inspector, the preview dock */
.st-side { position: relative; border-left: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; min-width: 0; background: rgba(8,9,11,.6); }
.st-resize { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 20; }
.st-resize:hover { background: linear-gradient(90deg, transparent 3px, rgba(232,237,243,.25) 3px, rgba(232,237,243,.25) 5px, transparent 5px); }
.st-tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--border); flex: none; }
.st-tab { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; padding: 11px 10px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.st-tab:hover { color: var(--text); }
.st-tab.on { color: var(--text); border-bottom-color: #e8edf3; }
.st-back { display: none; }
.st-panes { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.st-pane { display: none; padding: 14px; }
.st-pane.on { display: grid; gap: 12px; align-content: start; }
.inspector .ed-card { margin-bottom: 12px; }
.inspector .ed-body { padding: 16px; }
.inspector .row { gap: 10px; }
.ins-head { display: flex; align-items: flex-start; gap: 12px; padding: 2px 2px 14px; }
.ins-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 4px; color: var(--accent-2);
  background: rgba(255,255,255,.06); border: 1px solid var(--border-2); }
.ins-ico .i { width: 17px; height: 17px; }
.ins-text { flex: 1; min-width: 0; }
.ins-text h2 { font-size: 16px; margin: 1px 0 2px; }
.ins-text p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.ins-tools { display: flex; gap: 2px; }
.ins-empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 50px 20px; color: var(--muted); }
.ins-empty > .i { width: 26px; height: 26px; color: var(--dim); }
.ins-multi { display: flex; gap: 8px; flex-wrap: wrap; }
.wired-note { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; }
.wired-note .i { width: 14px; height: 14px; flex: none; }
.case-row { display: grid; grid-template-columns: 22px minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; margin-bottom: 8px; }
.case-row .fld { margin-bottom: 0; }
.case-n { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; padding-bottom: 12px; text-align: center; }
.case-tools { display: flex; padding-bottom: 3px; }
.studio-readonly .fc-dot { cursor: default; }

@media (max-width: 1280px) { .st-actions .save-state { display: none; } }
@media (max-width: 1100px) and (min-width: 901px) { .studio { --pal-w: 0px; } .st-palette, .st-pal-btn { display: none; } .fc-help { display: none; } }
@media (max-width: 900px) {
  .studio-wrap { height: calc(100dvh - var(--topbar)); }
  .studio { grid-template-columns: minmax(0, 1fr); }
  .st-bar { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .st-title .crumbs { display: none; }
  .st-mid { order: 3; flex-basis: 100%; justify-content: space-between; }
  .st-actions { margin-left: auto; }
  .st-actions .button { padding: 8px 10px; font-size: 13px; }
  .st-side { position: fixed; left: 0; right: 0; bottom: 0; top: var(--topbar); z-index: 70; transform: translateX(100%); transition: transform .25s ease; background: #0a0b0e; }
  .sheet-open .st-side { transform: none; }
  .st-back { display: grid; place-items: center; border: 0; background: none; color: var(--text); padding: 0 6px; cursor: pointer; }
  .st-back .i { transform: rotate(180deg); width: 16px; height: 16px; }
  .st-resize { display: none; }
  .fl { padding: 16px 12px 60px; }
  .fc-mini { display: none; }
}

/* scroll bars: thin and quiet everywhere */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.13); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.26); }

/* studio panels: resize, hide, wide */
.st-palette { position: relative; }
.np-resize { position: absolute; right: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 20; }
.np-resize:hover, .st-resize:hover { background: linear-gradient(90deg, transparent 3px, rgba(232,237,243,.25) 3px, rgba(232,237,243,.25) 5px, transparent 5px); }
.studio.pal-hidden { --pal-w: 0px; }
.studio.pal-hidden .st-palette { display: none; }
.studio.side-hidden { --side-w: 0px; }
.studio.side-hidden .st-side { display: none; }
.studio.side-wide { --side-w: min(820px, 58vw); }
.studio.resizing, .studio.resizing * { cursor: col-resize !important; user-select: none; }
.st-pal-btn[aria-pressed="false"], .st-side-btn[aria-pressed="false"] { color: var(--dim); }
.st-wide { margin-left: auto; align-self: center; width: 30px; height: 30px; }
.st-wide .i { width: 15px; height: 15px; }
.st-wide[aria-pressed="true"] { color: var(--text); background: var(--panel-3); }
/* narrow settings panel: one field per line */
.st-panes { container-type: inline-size; }
@container (max-width: 560px) {
  .inspector .row, .inspector .row.three { grid-template-columns: minmax(0, 1fr); }
  .inspector .perm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inspector .case-row { grid-template-columns: 22px minmax(0, .9fr) minmax(0, 1fr) auto; row-gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
  .inspector .case-row .fld:nth-of-type(3) { grid-column: 2 / 4; grid-row: 2; }
  .inspector .case-row .case-tools { grid-column: 4; grid-row: 1; }
}

/* the live preview: a window on the canvas, top left */
.pv { position: absolute; left: 14px; top: 14px; z-index: 12; max-width: calc(100% - 28px); border-radius: 4px; overflow: hidden;
  background: #1a1b1e; border: 1px solid var(--border-2); box-shadow: 0 18px 50px -18px rgba(0,0,0,.9); }
.pv .pv-head { padding: 6px 10px 6px 6px; gap: 12px; }
.pv-toggle { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; color: #dbdee1; font: inherit; font-size: 13px;
  font-weight: 600; padding: 4px 6px; border-radius: 4px; cursor: pointer; }
.pv-toggle:hover { background: rgba(255,255,255,.06); }
.pv-toggle .i { width: 15px; height: 15px; color: var(--accent-2); }
.pv-toggle .pv-chev { width: 13px; height: 13px; color: #b5bac1; transform: rotate(90deg); transition: transform .2s; }
.pv.open .pv-chev { transform: rotate(-90deg); }
.pv .mini-switch { display: none; }
.pv.open .mini-switch { display: inline-flex; }
.pv-body { display: none; width: 400px; height: min(460px, 55vh); min-width: 300px; min-height: 160px; max-width: 100%; max-height: 80vh;
  overflow: auto; resize: both; border-top: 1px solid rgba(255,255,255,.06); }
.pv.open .pv-body { display: block; }
@media (max-width: 900px) {
  .pv { position: fixed; left: auto; right: 12px; top: auto; bottom: 12px; z-index: 80; }
  .pv.open { left: 12px; }
  .pv-body { width: auto !important; height: 55vh !important; resize: none; }
}
.studio.side-wide .fc-help { display: none; }

/* --- app data (builder phase 4): tables list, the table page, variables --------------------------------------- */
.dt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 18px; }
.dt-card { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); color: var(--text); }
.dt-card:hover { border-color: var(--border-2); background: var(--panel-2); }
.dt-card-top { display: flex; align-items: center; gap: 10px; }
.dt-card-top strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-card .ac-mark { width: 32px; height: 32px; }
.dt-cols { display: flex; flex-wrap: wrap; gap: 5px; }
.dt-col { font-family: var(--mono); font-size: 11.5px; padding: 2px 7px; border-radius: 4px; background: var(--panel-3); color: var(--muted); }
.dt-col small { font-family: inherit; color: var(--dim); }
.dt-new summary, .card.fold > summary { cursor: pointer; }
.col-rows { display: grid; gap: 6px; }
.col-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }

.dt { --dt-grid: 72px repeat(var(--cols), minmax(150px, 1fr)); overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); margin-bottom: 16px; }
.dt-head, .dt-row > summary { display: grid; grid-template-columns: var(--dt-grid); min-width: calc(72px + var(--cols) * 150px); }
.dt-head { position: sticky; top: 0; background: #101216; border-bottom: 1px solid var(--border); z-index: 1; }
.dt-h { padding: 10px 12px; font-size: 12px; font-weight: 650; color: var(--muted); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-h:hover { color: var(--text); }
.dt-h.on { color: var(--text); }
.dt-dir { margin-left: 5px; color: var(--accent-2); }
.dt-row { border-bottom: 1px solid rgba(255,255,255,.05); }
.dt-row:last-child { border-bottom: 0; }
.dt-row > summary { list-style: none; cursor: pointer; }
.dt-row > summary::-webkit-details-marker { display: none; }
.dt-row > summary:hover, .dt-row[open] > summary { background: rgba(255,255,255,.035); }
.dt-row.hl > summary { box-shadow: inset 3px 0 0 var(--ok); }
.dt-c { padding: 9px 12px; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dt-id { font-family: var(--mono); font-size: 12px; color: var(--dim); display: flex; align-items: center; }
.dt-id .i { width: 14px; height: 14px; color: var(--accent-2); }
.dt-add > summary { color: var(--muted); }
.dt-addtext { grid-column: 2 / -1; font-weight: 600; }
.dt-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 12px; padding: 12px 14px 14px 84px;
  background: rgba(0,0,0,.18); border-top: 1px solid rgba(255,255,255,.05); }
.dt-field { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted); }
.dt-field > span { font-family: var(--mono); font-weight: 600; }
.dt-field > span small { font-family: inherit; font-weight: 500; }
.dt-form-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.dt-form-actions .muted { margin-right: auto; }
.dt-io .io-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dt-del { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; }

.var-list { display: grid; gap: 8px; margin-top: 12px; }
.var-row { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.var-row.var-new { grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) auto; padding-top: 8px; border-top: 1px dashed var(--border); }
.var-key { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thing-list { display: grid; gap: 4px; margin-top: 10px; }
.thing-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.05); }
.thing-row strong { min-width: 190px; font-size: 14px; }
.thing-row .muted { flex: 1; }
@media (max-width: 720px) {
  .dt-form { padding-left: 14px; }
  .var-row, .var-row.var-new { grid-template-columns: minmax(0, 1fr) auto; }
  .var-row .var-key, .var-row.var-new .inp:first-of-type { grid-column: 1 / -1; }
  .thing-row { flex-wrap: wrap; } .thing-row strong { min-width: 0; }
}
.fc-node.tone-data, .fl-node.tone-data { --tone: var(--t-data); }
.flt-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 8px; align-items: end; margin-bottom: 8px; }
@container (max-width: 560px) { .inspector .flt-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } .inspector .flt-row > .fld:nth-of-type(3) { grid-column: 1 / 3; } }

/* builder phases 5-7: form questions, values passed to flows */
.form-field { padding: 12px; border-radius: 4px; background: rgba(255,255,255,.02); border: 1px solid var(--border); margin-bottom: 10px; display: grid; gap: 4px; }
.ff-switches { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ff-switches .icon-btn { margin-left: auto; }
.vals-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: end; margin-bottom: 8px; }
@container (max-width: 560px) { .inspector .vals-row { grid-template-columns: minmax(0, 1fr) auto; } .inspector .vals-row > .fld:nth-of-type(2) { grid-column: 1; } }
.app-new-form { display: grid; gap: 12px; }
.app-tpls { display: grid; gap: 4px; border-top: 1px solid var(--border); padding-top: 10px; }
.app-tpl { all: unset; box-sizing: border-box; width: 100%; display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 4px; cursor: pointer; color: var(--text); }
.app-tpl:hover, .app-tpl:focus-visible { background: var(--panel-3); }
.app-tpl:focus-visible { outline: 2px solid var(--accent-2); }
.app-tpl .i { color: var(--accent-2); margin-top: 2px; flex: none; }
.choice-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 70px auto; gap: 8px; align-items: end; margin-bottom: 8px; }
@container (max-width: 560px) { .inspector .choice-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } .inspector .choice-row > .fld:nth-of-type(3) { grid-column: 1 / 3; } }

/* section 16: the app's flows as tabs, the Triggers / Nodes palette, trigger nodes you can wire into */
.studio { grid-template-rows: auto auto minmax(0, 1fr); }
.st-flows { grid-column: 1 / -1; display: flex; align-items: stretch; gap: 2px; padding: 0 10px; min-height: 0; overflow-x: auto;
  scrollbar-width: none; border-bottom: 1px solid var(--border); background: rgba(6,7,9,.95); }
.st-flows::-webkit-scrollbar { display: none; }
.st-tab-flow { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px 7px; font-size: 13px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; white-space: nowrap; max-width: 220px; }
.st-tab-flow .tf-name { overflow: hidden; text-overflow: ellipsis; }
.st-tab-flow .i { width: 14px; height: 14px; flex: none; opacity: .7; }
.st-tab-flow:hover { color: var(--text); background: rgba(255,255,255,.03); }
.st-tab-flow.on { color: var(--text); border-bottom-color: var(--accent-2); background: rgba(255,255,255,.035); }
.st-tab-flow.tf-draft { font-style: italic; }
.st-tab-new { display: inline-flex; align-items: center; justify-content: center; width: 34px; color: var(--muted); }
.st-tab-new:hover { color: var(--text); background: rgba(255,255,255,.04); }
.st-tab-new .i { width: 15px; height: 15px; }
.np-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; margin-bottom: 10px; border-radius: 4px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border); }
.np-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: none; color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 600; padding: 6px 8px; border-radius: 4px; cursor: pointer; }
.np-tab .i { width: 14px; height: 14px; }
.np-tab.on { background: rgba(255,255,255,.1); color: var(--text); }
.np-tab:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.np-tip { padding: 12px 8px 0; font-size: 11.5px; line-height: 1.45; }
.fc-in.soft { opacity: .35; border-style: dashed; }
.fc-node:hover .fc-in.soft, .fc.wiring .fc-in.soft { opacity: .9; }
.trig-chip { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; padding: 9px 10px; margin-bottom: 6px; border-radius: 4px;
  border: 1px solid var(--border); background: rgba(255,255,255,.02); color: var(--text); font: inherit; cursor: pointer; }
.trig-chip:hover { background: var(--panel-3); }
.trig-chip .i { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--accent-2); }
.trig-chip strong { display: block; font-size: 13px; } .trig-chip small { display: block; font-size: 12px; color: var(--muted); }
.fl-sep { height: 1px; margin: 18px 0; background: var(--border); }
.app-new > .app-tpls:first-child { border-top: 0; padding-top: 0; }
.np-head { position: sticky; top: -12px; z-index: 3; margin: -12px -10px 0; padding: 12px 10px 8px; background: #0a0b0d; }
.fc-empty { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, 80%); display: grid; justify-items: center; gap: 6px;
  text-align: center; color: var(--muted); font-size: 13px; line-height: 1.5; pointer-events: none; }
.fc-empty[hidden] { display: none; }
.fc-empty strong { color: var(--text); font-size: 15px; }
.fc-empty-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px dashed rgba(205,214,226,.35); margin-bottom: 4px; }
.fc-empty-ico .i { width: 18px; height: 18px; color: var(--accent-2); }
.vd-list { display: grid; gap: 6px; margin-top: 10px; }
.vd-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(130px, .9fr) 90px minmax(140px, 1.4fr) auto; gap: 8px; align-items: center; }
.vd-head { font-size: 12px; color: var(--dim); font-weight: 600; padding: 0 2px; }
.vd-tools { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.vd-new { padding-top: 8px; border-top: 1px solid var(--border); }
@media (max-width: 760px) { .vd-row { grid-template-columns: 1fr 1fr; } .vd-head { display: none; } }
.np-tabs { grid-template-columns: repeat(3, 1fr); }
.np-tab { font-size: 12.5px; padding: 6px 4px; gap: 4px; }
.np-var { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px; align-items: start; border-radius: 4px; }
.np-var.open { background: rgba(255,255,255,.03); border: 1px solid var(--border); }
.np-var-main { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 7px 8px; border: 0; border-radius: 4px; background: none;
  color: var(--text); font: inherit; cursor: pointer; min-width: 0; }
.np-var-main:hover { background: var(--panel-3); }
.np-var-main .i { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--accent-2); }
.np-var-main strong { display: block; font-size: 12.5px; font-family: var(--mono, ui-monospace, monospace); font-weight: 600; word-break: break-all; }
.np-var-main small { display: block; font-size: 11.5px; color: var(--dim); }
.np-var-edit { width: 28px; height: 28px; margin-top: 4px; }
.np-var-form, .np-var-new { grid-column: 1 / -1; display: grid; gap: 6px; padding: 4px 8px 10px; }
.np-var-new { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.np-var-form .inp input, .np-var-form select, .np-var-new input, .np-var-new select { font-size: 13px; }
.np-var-tools { display: flex; gap: 6px; }
.bind-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); background: none; color: var(--muted);
  font: inherit; font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 3px; cursor: pointer; }
.bind-btn .i { width: 12px; height: 12px; }
.bind-btn:hover { color: var(--text); border-color: var(--border-2); }
.bind-btn.on { color: var(--accent-2); border-color: rgba(205,214,226,.35); }
.fld > .lbl { display: flex; align-items: center; gap: 6px; }
.pick-top .bind-btn { margin-left: 8px; }
.bindable.on { display: grid; gap: 6px; padding: 10px; border-radius: 4px; border: 1px dashed rgba(205,214,226,.25); background: rgba(255,255,255,.015); }
.bind-top { display: flex; align-items: center; gap: 6px; }
.bind-top .lbl { font-size: 13px; font-weight: 600; }
.bind-vars { gap: 4px; }

/* --- data wires (builder section 17): a value one node gives, used by another. Faint; full for the selected / hovered node. */
.fc-data { fill: none; stroke: var(--t-data); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .28; transition: opacity .15s; }
.fc-data.hot { opacity: .95; stroke-width: 2; }
.fc-data.temp { opacity: .9; }
.fc-data-end { fill: var(--t-data); opacity: .28; }
.fc-data-end.hot { opacity: 1; }
.fc-data-label { fill: var(--t-data); font: 600 11px var(--mono); text-anchor: middle; opacity: 0; transition: opacity .15s; paint-order: stroke; stroke: #0b0d10; stroke-width: 4px; }
.fc-data-label.hot { opacity: 1; }
.fc-dout { position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; padding: 0; border-radius: 3px; transform: rotate(45deg);
  border: 1.5px solid var(--t-data); background: #121418; cursor: crosshair; opacity: 0; transition: opacity .12s; }
.fc-node:hover .fc-dout, .fc-node.sel .fc-dout, .fc-dout:focus-visible { opacity: 1; }
.fc-dout:hover { background: var(--t-data); }
.fc-reads { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 10px 47px; margin-top: -4px; }
.fc-reads span { font: 500 10.5px var(--mono); color: var(--t-data); border: 1px dashed color-mix(in srgb, var(--t-data) 45%, transparent); border-radius: 4px; padding: 1px 5px; }
.data-pop { width: 320px; max-height: 380px; display: flex; flex-direction: column; }
.data-pop[hidden] { display: none; }
.dp-head { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 6px; border-bottom: 1px solid var(--border); }
.dp-head b { font-size: 13px; } .dp-head code { color: var(--t-data); }
.dp-head small { color: var(--muted); font-size: 12px; }
.data-pop .pop-item code { color: var(--t-data); }
.data-pop .dp-f { color: var(--text); font-size: 13px; text-align: left; }
body.data-pending .st-side textarea,
body.data-pending .st-side input[type=text]:not([data-num]):not([data-kind="sid"]):not([data-kind="pname"]):not([data-kind="col"]):not([data-kind="vkey"]):not([data-kind="cname"]):not([data-kind="ev"]),
body.data-pending .st-side input[data-vnum] { outline: 1px dashed var(--t-data); outline-offset: 1px; }

/* --- Discord things as values (builder section 18): drill into a value's insides */
.pop-row { display: flex; align-items: stretch; gap: 2px; }
.pop-row .pop-item { flex: 1; min-width: 0; }
.pop-drill { flex: none; width: 30px; display: grid; place-items: center; border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; }
.pop-drill:hover, .pop-drill:focus-visible { background: rgba(222,230,240,.12); color: var(--text); }
.pop-drill .i, .pop-back .i, .chip-drill .i { width: 14px; height: 14px; }
.pop-crumb { display: flex; align-items: center; gap: 4px; font-family: var(--mono); text-transform: none; letter-spacing: 0; }
.pop-back { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: pointer; padding: 0; vertical-align: middle; }
.pop-back:hover { background: rgba(222,230,240,.12); color: var(--text); }
.ph-chip.typed { padding-right: 3px; }
.chip-drill { display: inline-grid; place-items: center; margin-left: 3px; width: 18px; height: 18px; border-radius: 4px; color: var(--muted); }
.chip-drill:hover { background: rgba(222,230,240,.16); color: var(--text); }
.pop-row .pop-item code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pop-row .pop-item span { flex: none; max-width: 55%; }
.pop-crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- section 19 */
.inp-row { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 8px; align-items: start; }
.inp-row .fld { margin-bottom: 6px; }
.inp-req { white-space: nowrap; padding-top: 10px; }
.warn-hint { margin: 2px 0 12px; border-color: rgba(233,196,106,.35); background: rgba(233,196,106,.06); }
.warn-hint .i { color: #e9c46a; }
.linkish { border: 0; background: none; padding: 0; color: var(--accent-2); text-decoration: underline; cursor: pointer; font: inherit; }
.inp-row { align-items: center; }
.inp-row .lbl:empty { display: none; }
.inp-row .fld { margin: 0 0 6px; }
.inp-head { margin-bottom: 4px; }
.inp-head .lbl { margin: 0; }
.inp-req { padding-top: 0; }
.sub-note { margin: -4px 0 10px; }

/* conditions: rows of value · comparison · value */
.cb2 { margin: 0 0 14px; }
.cb2-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cb2-head .lbl { margin: 0; }
.cb2-matchline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.cb2-modebtn { margin-left: auto; font-size: 12px; }
.cb2-items { display: flex; flex-direction: column; gap: 8px; }
.cb2-row { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(118px, auto) minmax(0, 1fr) 28px; gap: 6px; align-items: center; }
.cb2-row.no-right { grid-template-columns: minmax(0, 1.15fr) minmax(118px, auto) 28px; }
.cb2-row .inp { margin: 0; }
.cb2-row input { font-family: var(--mono); font-size: 13px; }
.cb2-row select, .cb2-match { height: 38px; border-radius: 4px; border: 1px solid var(--border-2); background: var(--panel-2, #15181d); color: var(--text); padding: 0 10px; font: inherit; font-size: 13px; }
.cb2-match { height: 30px; padding: 0 6px; }
.cb2-type { grid-column: 1; margin: -4px 0 0 4px; font-size: 11px; color: var(--t-data); }
.cb2-del { width: 28px; height: 28px; }
.cb2-group { border: 1px solid var(--border-2); border-left: 3px solid var(--t-logic); border-radius: 4px; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 8px; background: rgba(143,180,230,.04); }
.cb2-ghead { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.cb2-ghead .cb2-del { margin-left: auto; }
.cb2-adds { display: flex; gap: 8px; margin-top: 8px; }
.cb2-mini { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 4px; border: 1px dashed var(--border-2); background: none; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; align-self: flex-start; }
.cb2-mini:hover { color: var(--text); border-color: rgba(222,230,240,.4); }
.cb2-mini .i { width: 14px; height: 14px; }
.cb2.cb2-none .cb2-start { width: 100%; justify-content: center; }
.cb2.written .cb2-head { margin-bottom: 6px; }
@media (max-width: 560px) {
  .cb2-row, .cb2-row.no-right { grid-template-columns: 1fr 28px; }
  .cb2-row > .cb2-op, .cb2-row > .cb2-right { grid-column: 1; }
}
.cb2-row, .cb2-row.no-right { grid-template-columns: minmax(130px, .8fr) minmax(0, 1fr) 28px; grid-template-areas: "left left del" "op right ." "type type type"; row-gap: 6px;
  padding: 8px; border-radius: 4px; background: rgba(255,255,255,.025); border: 1px solid var(--border); }
.cb2-row.no-right { grid-template-areas: "left left del" "op op ." "type type type"; }
.cb2-row > .cb2-left { grid-area: left; }
.cb2-row > .cb2-op { grid-area: op; width: 100%; }
.cb2-row > .cb2-right { grid-area: right; }
.cb2-row > .cb2-del { grid-area: del; }
.cb2-row > .cb2-type { grid-area: type; margin: -2px 0 0 4px; }
.cb2-group .cb2-row { background: rgba(255,255,255,.03); }
@media (max-width: 560px) { .cb2-row, .cb2-row.no-right { grid-template-columns: 1fr 28px; grid-template-areas: "left del" "op ." "right ." "type type"; } }

/* --- dropdowns and checkboxes, everywhere (section 19). The open list is styled where the browser allows it
   (Chromium: appearance: base-select); elsewhere the closed select keeps this look and the list stays native. */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]) { appearance: base-select; display: inline-flex; align-items: center; gap: 8px; }
  select:not([multiple]):not([size])::picker-icon { margin-left: auto; }
  select:not([multiple]):not([size]) > button { display: contents; }
  select:not([multiple]):not([size])::picker(select) {
    appearance: base-select; background: #14171c; color: var(--text); border: 1px solid var(--border-2); border-radius: 4px;
    padding: 5px; margin-top: 4px; box-shadow: 0 20px 44px -14px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.4); max-height: min(360px, 60vh);
    scrollbar-width: thin; scrollbar-color: rgba(222,230,240,.2) transparent;
  }
  select:not([multiple]):not([size]) option {
    padding: 7px 10px; border-radius: 4px; color: var(--text); background: none; font-size: 13.5px; line-height: 1.3;
    display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;
  }
  select:not([multiple]):not([size]) option:hover, select:not([multiple]):not([size]) option:focus-visible { background: rgba(222,230,240,.09); outline: none; }
  select:not([multiple]):not([size]) option:checked { background: rgba(222,230,240,.14); font-weight: 600; }
  select:not([multiple]):not([size]) option::checkmark { order: 1; margin-left: auto; content: "✓"; color: var(--accent-2); font-weight: 700; }
  select:not([multiple]):not([size]) option:disabled { color: var(--dim); cursor: default; }
  select:not([multiple]):not([size])::picker-icon { color: var(--muted); transition: rotate .15s; }
  select:not([multiple]):not([size]):open::picker-icon { rotate: 180deg; }
  .inp select::picker-icon { display: none; }          /* these draw their own arrow */
  select:not([multiple]):not([size]):open { border-color: rgba(222,230,240,.45); }
  .inp:has(select:open) { border-color: rgba(222,230,240,.45); }
}
:where(input[type="checkbox"]) {
  appearance: none; -webkit-appearance: none; width: 16px; height: 16px; flex: none; margin: 0; border-radius: 4px;
  border: 1.5px solid rgba(222,230,240,.35); background: rgba(0,0,0,.25); cursor: pointer; display: inline-grid; place-content: center;
  transition: background .12s, border-color .12s;
}
:where(input[type="checkbox"])::after {
  content: ""; width: 9px; height: 5px; border: 2px solid #0b0d10; border-top: 0; border-right: 0; rotate: -45deg; translate: 0 -1px; opacity: 0;
}
:where(input[type="checkbox"]):checked { background: var(--accent-2); border-color: var(--accent-2); }
:where(input[type="checkbox"]):checked::after { opacity: 1; }
:where(input[type="checkbox"]):hover { border-color: rgba(222,230,240,.6); }
:where(input[type="checkbox"]):focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
:where(input[type="checkbox"]):disabled { opacity: .45; cursor: default; }
#ph-popover.ac > input { display: none; }
#ph-popover.ac { max-height: 300px; }

/* guided typing */
.ac-lint { display: block; margin: 4px 2px 0; color: #e9c46a; font-size: 12px; }
.ac-lint::before { content: "⚠ "; }

/* --- structure while typing (builder section 21): coloured placeholders / logic, an outline of the blocks --- */
.hl-ov { position: absolute; z-index: 0; margin: 0; overflow: hidden; pointer-events: none; box-sizing: border-box;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; color: var(--text); }
.hl-ov.one { white-space: pre; overflow-wrap: normal; }
.inp .hl-on { position: relative; z-index: 1; color: transparent; caret-color: var(--text); background: transparent; }
.inp .hl-on::selection { color: transparent; background: rgba(140, 175, 230, .34); }
.inp .hl-on::placeholder { color: var(--dim); }
.hl-tag { border-radius: 4px; }
.hl-val { color: #6fdccb; background: rgba(103, 216, 200, .09); box-shadow: inset 0 0 0 1px rgba(103, 216, 200, .26); }
.hl-fil { color: var(--warn); }
.hl-if { color: #c4abff; background: rgba(183, 156, 255, .13); box-shadow: inset 0 0 0 1px rgba(183, 156, 255, .36); }
.hl-if .hl-cond { color: #e9e0ff; }
.hl-each { color: #8ec2ff; background: rgba(124, 183, 255, .13); box-shadow: inset 0 0 0 1px rgba(124, 183, 255, .36); }
.hl-each .hl-path { color: #6fdccb; }
.hl-empty { outline: 1px dashed rgba(233, 196, 106, .8); outline-offset: -1px; }
.hl-bad, .hl-bad .hl-cond, .hl-bad .hl-path { color: var(--danger); background: rgba(239, 107, 120, .14); box-shadow: inset 0 0 0 1px rgba(239, 107, 120, .55);
  text-decoration: underline wavy rgba(239, 107, 120, .8); }
.hl-band { border-radius: 3px; }
.hl-b-if { background: rgba(183, 156, 255, .07); }
.hl-b-each { background: rgba(124, 183, 255, .07); }
.hl-b-else { background: rgba(255, 255, 255, .045); }

.ac-outline { display: grid; gap: 4px; margin: 6px 0 2px; font-size: 12.5px; }
.ol-blk { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-left: calc(var(--d, 0) * 16px); padding: 5px 8px;
  border-radius: 4px; border-left: 2px solid var(--fam); background: var(--panel-2); --fam: #b79cff; }
.ol-each { --fam: #7cb7ff; }
.ol-head { display: inline-flex; align-items: center; gap: 5px; margin-right: 2px; }
.ol-kw { font-family: var(--mono); font-weight: 700; font-size: 12px; color: var(--fam); }
.ol-head code { background: rgba(0, 0, 0, .25); }
.ol-cond, .ol-slot, .ol-add { font: inherit; cursor: pointer; border-radius: 4px; }
.ol-cond { padding: 0; border: 0; background: none; color: var(--text); }
.ol-cond:hover code { box-shadow: inset 0 0 0 1px var(--fam); }
.ol-slot { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%; padding: 3px 9px; border: 1px solid var(--border-2);
  background: rgba(0, 0, 0, .22); color: var(--muted); text-align: left; }
.ol-slot b { font-weight: 600; color: var(--text); white-space: nowrap; }
.ol-slot.yes b::before { content: "✓ "; color: var(--ok); }
.ol-slot.alt b::before { content: "↳ "; color: var(--fam); }
.ol-slot.no b::before { content: "✗ "; color: var(--danger); }
.ol-each .ol-slot.yes b::before { content: "↻ "; color: var(--fam); }
.ol-slot.empty { border-style: dashed; border-color: rgba(233, 196, 106, .55); }
.ol-slot.empty i { color: var(--warn); font-style: normal; opacity: .85; }
.ol-slot:hover, .ol-add:hover { border-color: var(--fam); color: var(--text); }
.ol-add { padding: 3px 9px; border: 1px dashed var(--border-2); background: none; color: var(--dim); }
.ol-miss { color: var(--danger); }

/* Discord formatting bar over selected text */
.fmt-bar { position: fixed; z-index: 90; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 4px;
  background: #111317; border: 1px solid var(--border-2); box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
.fmt-bar[hidden] { display: none; }
.fmt-bar button { min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: 4px; background: transparent; color: var(--muted);
  font-family: inherit; font-weight: 600; font-size: 13.5px; line-height: 1; cursor: pointer; }
.fmt-bar button:hover { background: var(--panel-3); color: var(--text); }
.fmt-bar button.on { background: rgba(222, 230, 240, .15); color: var(--accent-2); }
.fmt-bar button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.fmt-bold { font-weight: 600 !important; }
.fmt-italic { font-style: italic; font-family: Georgia, "Times New Roman", serif !important; }
.fmt-underline { text-decoration: underline; }
.fmt-strike { text-decoration: line-through; }
.fmt-spoiler { letter-spacing: -1px; }
.fmt-code, .fmt-block { font-family: var(--mono) !important; font-size: 11.5px !important; }
.fmt-sep { width: 1px; height: 18px; margin: 0 3px; background: var(--border-2); }

/* builder section 22: a {value} written inside a tag; a call input's description under its row */
.hl-tag .hl-in { box-shadow: inset 0 0 0 1px rgba(103, 216, 200, .45); }
.inp-desc { margin: -2px 0 10px; }
.inp-desc .fld { margin: 0; }
.inp-desc input { font-size: 13px; }

/* builder section 23: table filters with any / all and groups; Change rows per column */
.flt-match { max-width: 260px; margin-bottom: 4px; }
.flt-match .fld { margin: 0; }
.flt-group { margin: 6px 0 4px; padding: 10px 10px 4px; border-left: 2px solid rgba(183, 156, 255, .55); border-radius: 4px; background: rgba(255, 255, 255, .02); }
.flt-adds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.flt-adds .add-btn { flex: 1 1 160px; }
.flt-ungroup { display: inline-block; margin: 0 0 8px 2px; font-size: 12.5px; color: var(--dim); }
.chg-row { display: grid; grid-template-columns: minmax(150px, 1fr) 2fr; gap: 10px; align-items: end; }
.chg-none { padding: 0 0 14px; }
@media (max-width: 640px) { .chg-row { grid-template-columns: 1fr; } }

/* where it runs (builder section 24): a bot-wide command's places, the Where node's inspector, the preview's place */
.place-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.place-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; text-align: left; font: inherit; color: var(--muted); cursor: pointer;
  background: transparent; border: 1px solid var(--border); border-radius: 4px; transition: border-color .15s, background .15s, color .15s; }
.place-opt:hover { border-color: rgba(255,255,255,.28); }
.place-opt b { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.place-opt small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--dim); }
.place-box { display: grid; place-items: center; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 4px; border: 1px solid var(--border-2); }
.place-box .i { width: 11px; height: 11px; opacity: 0; }
.place-opt.on { border-color: rgba(236,242,250,.45); background: rgba(255,255,255,.035); color: var(--text); }
.place-opt.on .place-box { background: var(--chrome); border-color: var(--chrome); color: #0c0d10; }
.place-opt.on .place-box .i { opacity: 1; }
.where-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; }
.where-list li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--border); }
.where-list li:last-child { border-bottom: 0; }
.where-list b { display: block; font-size: 13px; font-weight: 600; }
.where-list small { display: block; font-size: 12px; color: var(--dim); line-height: 1.4; }
.where-list span:nth-child(2) { flex: 1; min-width: 0; }
.where-list em { font-style: normal; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.where-list li.on em { color: #9fe3c0; }
.where-dot { flex: none; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--border-2); }
.where-list li.on .where-dot { background: #6fd6a4; box-shadow: 0 0 8px rgba(111,214,164,.6); }
.pv-place { margin-left: auto; max-width: 200px; padding: 3px 8px; font: inherit; font-size: 12px; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; }
.pv-place + .mini-switch { margin-left: 10px; }

/* Sirius as an app: reach + where each bot-wide command works (the bot-wide apps page) */
.botapp { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 0; margin: 0 0 22px;
  border: 1px solid var(--border); border-radius: 4px; background: var(--panel); overflow: hidden; }
.botapp-reach { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px; border-right: 1px solid var(--border); }
.botapp .eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.botapp-title p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.botapp-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 22px; margin: 0; }
.botapp-stats dt { font-size: 11px; color: var(--dim); }
.botapp-stats dd { margin: 2px 0 0; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.botapp-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.botapp-table { min-width: 0; overflow-x: auto; }
.bat-row { display: grid; grid-template-columns: minmax(170px, 1.4fr) repeat(4, minmax(84px, 1fr)); align-items: center; gap: 8px;
  padding: 9px 18px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.bat-row:last-child { border-bottom: 0; }
a.bat-row:hover { background: rgba(255,255,255,.025); }
.bat-row.off { opacity: .55; }
.bat-head { position: sticky; top: 0; padding-top: 12px; padding-bottom: 10px; background: var(--panel); font-size: 11px; color: var(--dim); letter-spacing: .02em; }
.bat-head span:not(:first-child) { text-align: center; line-height: 1.25; }
.bat-cmd { display: grid; min-width: 0; }
.bat-cmd code { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bat-cmd small { font-size: 11.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bat-dot { justify-self: center; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--border-2); }
.bat-dot.on { background: #6fd6a4; border-color: #6fd6a4; box-shadow: 0 0 8px rgba(111,214,164,.45); }
.bat-empty { padding: 16px 18px; margin: 0; }
@media (max-width: 860px) { .botapp { grid-template-columns: 1fr; } .botapp-reach { border-right: 0; border-bottom: 1px solid var(--border); } }
.pv-place[hidden] { display: none; }

/* =============================================================================================
   Redesign (2026-10, docs/REDESIGN_PLAN.md): flat, full width, 4px, Geist + Geist Mono
   ============================================================================================= */
.eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #7d848e; }
.mono { font-family: var(--mono); }
.live { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px rgba(111,214,164,.7); flex: none; }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.cmd-chip { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 12px; color: #c9ced6; border: 1px solid rgba(255,255,255,.1);
  padding: 2px 7px; border-radius: 3px; background: none; white-space: nowrap; }

/* buttons: flat, 4px */
.button { font-weight: 500; padding: 0 16px; height: 38px; background: transparent; border-color: rgba(255,255,255,.14); }
.button:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.3); }
.button.small { height: 32px; padding: 0 12px; font-size: 13px; }
.button.lg { height: 44px; padding: 0 20px; font-size: 15px; }
.button.primary { background: #eceff3; border-color: #eceff3; color: #0a0b0d; box-shadow: none; }
.button.primary:hover { background: #fff; border-color: #fff; color: #0a0b0d; }
.button.ghost { background: transparent; }

/* top bar: full width, slim */
.topbar { height: var(--topbar); background: rgba(8, 9, 11, .92); border-bottom: 1px solid var(--border); }
.topbar-in { max-width: none; padding: 0 var(--gutter); gap: 32px; }
.editor-page .topbar-in, .docs-page .topbar-in { max-width: none; }
.brand img { width: 22px; height: 22px; filter: none; }
.brand strong { font-size: 12.5px; letter-spacing: .34em; background: none; color: var(--text); }
.mainnav { gap: 4px; }
.mainnav a { padding: 6px 10px; font-size: 14px; color: #9aa1ab; }
.mainnav a:hover { background: none; color: var(--text); }
.mainnav a.active::after { left: 10px; right: 10px; bottom: -16px; height: 1px; border-radius: 0; background: var(--text); }
.tb-dash { height: 34px; padding: 0 12px; border: 1px solid rgba(255,255,255,.12); }
.tb-dash.active { background: rgba(255,255,255,.05); }
.um-pop { background: #0f1013; }

/* page body: the whole width */
.content { max-width: 1760px; padding: 40px var(--gutter) 96px; animation: none; }
.editor-page .content { max-width: none; }

/* footer */
.site-foot { margin-top: 0; padding: 48px var(--gutter) 32px; }
.sf-in { max-width: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; }
.sf-brand { grid-column: 1 / span 5; }
.sf-brand p { font-size: 13px; }
.sf-col { grid-column: span 2; display: grid; gap: 8px; align-content: start; }
.sf-col:nth-of-type(1) { grid-column: 7 / span 2; }
.sf-col .eyebrow { margin-bottom: 4px; }
.sf-col a { color: var(--muted); font-size: 13px; } .sf-col a:hover { color: var(--text); }
.sf-fine { max-width: none; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 12px; }

/* surfaces: flat panels, hairlines */
.card, .side-card, .ed-card { background: var(--panel); }
.notice { border-radius: 4px; }

@media (max-width: 900px) {
  :root { --gutter: 16px; }
  .g12 { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .g12 > * { grid-column: 1 / -1 !important; }
  .sf-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-brand { grid-column: 1 / -1; }
  .sf-col, .sf-col:nth-of-type(1) { grid-column: span 1; }
}

/* --- a mod card, in the game's shape (wide, 5:2) ----------------------------------------------------------- */
.mcard { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; aspect-ratio: 5 / 2; min-width: 0;
  padding: 8px 10px 7px; border-radius: 3px; overflow: hidden; color: var(--text); --rc: var(--r-common);
  background: linear-gradient(180deg, #17191d, #101114); border: 1px solid rgba(255,255,255,.07); }
.mcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--rc); z-index: 2; }
.mcard.r-uncommon { --rc: var(--r-uncommon); } .mcard.r-rare { --rc: var(--r-rare); } .mcard.r-legendary { --rc: var(--r-legendary); }
.mcard.r-riven { --rc: var(--r-riven); background: linear-gradient(180deg, #1d1729, #110e17); }
.mcard.empty { background: transparent; border: 1px dashed rgba(255,255,255,.1); }
.mcard.empty::before { display: none; }
.mcard-art { position: absolute; right: 0; top: 0; height: 100%; width: 62%; object-fit: cover; opacity: .32;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); pointer-events: none; }
.mcard-name { position: relative; z-index: 1; font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard-drain { position: absolute; z-index: 1; top: 7px; right: 8px; display: flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 11px; color: #b9c0ca; }
.mcard-drain .pol { width: 11px; height: 11px; color: #b9c0ca; }
.mcard-pips { position: relative; z-index: 1; display: flex; gap: 2px; }
.mcard-pips i { width: 5px; height: 2px; background: rgba(255,255,255,.6); }
.mcard-label { position: relative; z-index: 1; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #7d848e; }

/* --- home ------------------------------------------------------------------------------------------------------ */
.home-main { overflow-x: clip; }
.home-pad, .home .home-note { margin: 20px var(--gutter) 0; }
.hx { padding: 88px var(--gutter) 80px; align-items: start; }
.hx-copy { grid-column: 1 / span 5; padding-top: 24px; }
.hx-title { margin: 22px 0 0; font-size: clamp(44px, 4.4vw, 68px); line-height: 1.02; font-weight: 600; letter-spacing: -.04em; }
.hx-title span { color: #6b727c; }
.hx-lead { margin: 26px 0 0; font-size: 17px; line-height: 1.6; color: #9aa1ab; max-width: 44ch; }
.hx-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.hx-cta .i { width: 16px; height: 16px; }
.hx-facts { display: flex; flex-wrap: wrap; margin-top: 44px; font-size: 12px; color: #7d848e; }
.hx-facts > span { display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; border-left: 1px solid rgba(255,255,255,.1); }
.hx-facts > span:first-child { padding-left: 0; border-left: 0; }
.hx-facts b { color: var(--text); font-weight: 500; }
.hx-board { grid-column: 7 / span 6; margin-right: calc(-1 * var(--gutter)); min-width: 0; }
.hb { display: block; color: inherit; border: 1px solid rgba(255,255,255,.1); border-right: 0; border-radius: 4px 0 0 4px; background: #0c0d10; overflow: hidden; }
.hb:hover { border-color: rgba(255,255,255,.2); }
.hb-empty { padding: 60px 24px; }
.hb-head { display: flex; align-items: center; gap: 16px; padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 11.5px; color: #7d848e; white-space: nowrap; }
.hb-head img { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; }
.hb-title { color: var(--text); letter-spacing: .1em; }
.hb-dim { overflow: hidden; text-overflow: ellipsis; }
.hb-fill { flex: 1; }
.hb-cap { color: var(--text); } .hb-cap.over { color: var(--danger); }
.hb-body { display: grid; grid-template-columns: minmax(0, 1fr) 210px; }
.hb-mods { display: flex; flex-direction: column; gap: 10px; padding: 20px; min-width: 0; border-right: 1px solid rgba(255,255,255,.08); }
.hb-top { display: flex; justify-content: center; gap: 8px; }
.hb-top .mcard { width: calc((100% - 24px) / 4); }
.hb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hb-arc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hb-stats { display: flex; flex-direction: column; padding: 16px 20px; min-width: 0; }
.hb-stats .eyebrow { padding-bottom: 8px; }
.hb-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 13px; color: #9aa1ab; }
.hb-stat:last-child { border-bottom: 0; }
.hb-stat b { font-family: var(--mono); font-weight: 500; color: var(--text); }
.hx-recent { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; margin-top: 28px; padding-right: var(--gutter); }
.hx-recent .eyebrow { padding-top: 3px; }
.hx-recent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 13px; }
.hx-recent a { display: flex; gap: 16px; color: var(--text); }
.hx-recent a:hover { color: #fff; }
.hx-recent .k { width: 96px; flex: none; color: #5d646e; }
.hx-recent .k.riven { color: var(--riven); }

.nowstrip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #0a0b0e; }
.ns-in { display: grid; grid-template-columns: 200px repeat(auto-fit, minmax(180px, 1fr)); padding: 0 var(--gutter); }
.ns-lead { display: flex; flex-direction: column; gap: 8px; padding: 22px 0; font-size: 13px; color: #7d848e; line-height: 1.5; }
.ns-lead .eyebrow { display: flex; align-items: center; gap: 8px; }
.ns-cell { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-left: 1px solid var(--border); min-width: 0; }
.ns-cell strong { font-size: 16px; font-weight: 500; }
.ns-cell > span:not(.eyebrow):not(.cmd-chip) { font-size: 13px; color: var(--muted); }
.ns-cell .cmd-chip { align-self: flex-start; margin-top: 2px; }

.fx { padding: 96px var(--gutter) 0; }
.fx-head { align-items: end; padding-bottom: 36px; }
.fx-head .eyebrow { grid-column: 1 / span 3; }
.fx-head h2 { grid-column: 4 / span 7; font-size: clamp(30px, 3vw, 42px); line-height: 1.1; font-weight: 600; letter-spacing: -.03em; }
.fx-head h2 span { color: #6b727c; }
.fx-row { padding: 44px 0; border-top: 1px solid var(--border); align-items: center; }
.fx-row.last { border-bottom: 1px solid var(--border); }
.fx-n { grid-column: 1 / span 3; align-self: start; padding-top: 8px; }
.fx-text { grid-column: 4 / span 4; }
.fx-demo { grid-column: 9 / span 4; min-width: 0; }
.fx-row.flip .fx-demo { grid-column: 4 / span 5; grid-row: 1; }
.fx-row.flip .fx-text { grid-column: 9 / span 4; grid-row: 1; }
.fx-text h3 { margin: 0 0 10px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.fx-text p { margin: 0; font-size: 15px; line-height: 1.6; color: #9aa1ab; max-width: 46ch; }
.fx-cmds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fx-mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fx-nums { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.fx-nums b { color: var(--text); font-weight: 500; }
.fx-riven { display: flex; gap: 18px; align-items: center; }
.fx-rpic { flex: none; display: block; width: 180px; height: 100px; border-radius: 4px; border: 1px solid rgba(255,255,255,.1); overflow: hidden; }
.fx-rpic img, img.fx-rpic { width: 180px; height: 100px; object-fit: cover; display: block; }
.fx-rstats { display: grid; gap: 4px; flex: 1; min-width: 0; }
.fx-scale { display: flex; flex-wrap: wrap; gap: 4px; }
.fx-scale b { display: grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 3px;
  font-weight: 500; font-size: 12px; color: var(--g); }
.fx-steps { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.fx-steps li { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.fx-steps li:last-child { border-bottom: 0; }
.fx-steps span { width: 22px; color: #5d646e; flex: none; }
.fx-steps em { margin-left: auto; font-style: normal; color: #7d848e; }
.fx-steps i.ok { font-style: normal; color: var(--ok); }
.fx-flow { display: flex; align-items: center; }
.fx-node { border: 1px solid rgba(255,255,255,.12); background: #111215; border-radius: 4px; padding: 10px 12px; min-width: 0; white-space: nowrap; }
.fx-node.on { border-color: rgba(111,214,164,.45); }
.fx-node small { display: block; font-family: var(--mono); font-size: 10.5px; color: #7d848e; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.fx-node b { font-size: 13px; font-weight: 500; }
.fx-wire { height: 1px; flex: 1; min-width: 18px; background: linear-gradient(90deg, rgba(111,214,164,.2), rgba(111,214,164,.8)); }
.fx-alerts { display: grid; gap: 8px; }
.fx-alerts > span { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; color: #c9ced6; }
.fx-alerts em { margin-left: auto; font-style: normal; font-size: 11.5px; color: #7d848e; }
.fx-profile { position: relative; height: 128px; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; background: #0d0e11; }
.fx-banner { position: absolute; inset: 0 0 auto; height: 64px; background: url("/assets/sirius_backdrop.jpg") center / cover; opacity: .35; }
.fx-av { position: absolute; left: 18px; top: 40px; width: 48px; height: 48px; border-radius: 4px; background: #1a1c21; border: 2px solid #0d0e11; overflow: hidden; display: grid; place-items: center; }
.fx-av img { width: 100%; height: 100%; object-fit: cover; }
.fx-who { position: absolute; left: 80px; top: 74px; display: flex; gap: 14px; align-items: baseline; }
.fx-who b { font-size: 15px; font-weight: 600; } .fx-who span { font-size: 11.5px; color: #7d848e; }
.fx-places { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.fx-places li { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.fx-places li:last-child { border-bottom: 0; }

.cx { padding: 96px var(--gutter) 0; }
.cx-lead { grid-column: 1 / span 3; }
.cx-lead p { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 26ch; }
.cx-lead b { color: var(--text); }
.cx-grid { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.cx-row { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); min-width: 0; }
.cx-row code { background: none; padding: 0; font-size: 13px; color: var(--text); min-width: 112px; }
.cx-row span { font-size: 13px; color: var(--muted); line-height: 1.45; }

.lx { padding: 112px var(--gutter) 112px; align-items: start; }
.lx-builds { grid-column: 1 / span 7; min-width: 0; }
.lx-market { grid-column: 9 / span 4; min-width: 0; }
.lx-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 18px; }
.lx-head a { font-size: 12px; color: var(--muted); } .lx-head a:hover { color: var(--text); }
.lx-put { margin-top: 8px; padding: 18px 16px; border: 1px dashed rgba(255,255,255,.12); border-radius: 4px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.lx-put b { color: var(--text); font-weight: 500; }
.lx-rivens .rrow { grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "pic text end" "pic stats stats"; }

/* --- build rows: the build's mod layout fades in behind it -------------------------------------------------- */
.build-rows { display: flex; flex-direction: column; gap: 8px; }
.brow { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 20px; align-items: center; min-height: 104px;
  padding: 0 22px; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; background: #0d0e11; color: var(--text); }
.brow:hover { border-color: rgba(255,255,255,.22); }
.brow-bg { position: absolute; inset: 0 0 0 28%; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; padding: 16px 16px 16px 0;
  opacity: .2; transition: opacity .2s; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.brow:hover .brow-bg { opacity: .34; }
.brow-mod { position: relative; border-radius: 3px; overflow: hidden; background: linear-gradient(180deg, #22252b, #15171a); border-top: 2px solid var(--r-common); }
.brow-mod.r-uncommon { border-top-color: var(--r-uncommon); } .brow-mod.r-rare { border-top-color: var(--r-rare); }
.brow-mod.r-legendary { border-top-color: var(--r-legendary); } .brow-mod.r-riven { border-top-color: var(--r-riven); }
.brow-mod img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.brow-item { position: relative; width: 72px; height: 72px; border-radius: 4px; border: 1px solid rgba(255,255,255,.1); background: #121317; overflow: hidden; }
.brow-item img { width: 100%; height: 100%; object-fit: contain; }
.brow-text { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brow-text strong { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow-sub { font-size: 13px; color: var(--muted); }
.brow-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font-family: var(--mono); font-size: 11.5px; color: #7d848e; }
.brow-tags .vis { font-family: var(--sans); }
.brow-meta { position: relative; display: flex; gap: 22px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-align: right; }
.brow-meta b { display: block; color: var(--text); font-weight: 500; font-size: 13px; }
.brow-meta .bt-votes { display: flex; gap: 10px; align-items: center; color: var(--text); font-size: 13px; }
.brow-meta .bt-votes .i { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }

/* --- riven rows ------------------------------------------------------------------------------------------------- */
.riven-rows { display: flex; flex-direction: column; gap: 8px; }
.rrow { display: grid; grid-template-columns: 84px minmax(160px, 1fr) minmax(0, 2fr) auto; grid-template-areas: "pic text stats end"; gap: 18px;
  align-items: center; padding: 12px 16px 12px 12px; border: 1px solid var(--border); border-radius: 4px; background: #0d0e11; color: var(--text); }
.rrow:hover { border-color: rgba(255,255,255,.22); }
.rrow-pic { grid-area: pic; position: relative; display: block; width: 84px; height: 100px; border-radius: 3px; overflow: hidden; background: #15121c; }
.rrow-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.rrow-text { grid-area: text; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rrow-head { display: flex; align-items: baseline; gap: 8px; }
.rrow-head strong { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrow-id { font-family: var(--mono); font-size: 11px; color: #5d646e; }
.rrow-name { font-family: var(--mono); font-size: 11.5px; color: var(--riven); }
.rrow-by { font-size: 12px; color: #7d848e; }
.rrow-stats { grid-area: stats; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; min-width: 0; }
.rrow-end { grid-area: end; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 10px; align-self: stretch; }
.rrow-grade { font-family: var(--mono); font-size: 26px; font-weight: 500; line-height: 1; color: var(--g, var(--text)); }
.rrow-add { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px dashed rgba(255,255,255,.16); border-radius: 4px; background: none;
  color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rrow-add:hover { border-color: rgba(255,255,255,.32); }
.rrow-add strong { display: block; font-size: 14px; } .rrow-add small { color: var(--muted); font-size: 12.5px; }
.rt-stat { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: 12.5px; min-width: 0; }
.rt-stat b { font: 500 12px/1 var(--mono); color: var(--g, var(--text)); }
.rt-stat span { color: #c9ced6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-stat small { font-family: var(--mono); font-size: 12px; color: var(--text); }
.rt-stat.curse span, .rt-stat.curse small { color: #ef8f99; }

@media (max-width: 1100px) {
  .rrow { grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "pic text end" "pic stats stats"; }
  .hb-body { grid-template-columns: minmax(0, 1fr); } .hb-stats { display: none; }
}
@media (max-width: 900px) {
  .hx { padding-top: 48px; padding-bottom: 48px; }
  .hx-board { margin-right: 0; }
  .hb { border-right: 1px solid rgba(255,255,255,.1); border-radius: 4px; }
  .hb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-top .mcard { width: calc((100% - 8px) / 2); }
  .hx-recent { grid-template-columns: 1fr; gap: 10px; padding-right: 0; }
  .ns-in { grid-template-columns: minmax(0, 1fr); }
  .ns-cell { border-left: 0; border-top: 1px solid var(--border); padding: 18px 0; }
  .fx-row.flip .fx-demo, .fx-row.flip .fx-text { grid-row: auto; }
  .cx-grid { grid-template-columns: minmax(0, 1fr); }
  .fx-flow { flex-wrap: wrap; row-gap: 8px; }
  .brow { grid-template-columns: 56px minmax(0, 1fr); padding: 14px; min-height: 0; }
  .brow-item { width: 56px; height: 56px; }
  .brow-meta { display: none; }
  .hide-m { display: none !important; }
  .rrow-stats { grid-template-columns: minmax(0, 1fr); }
}

/* --- browse pages: the filters are a bar across the top, the results get the whole width ----------------------- */
.browse-head { align-items: flex-end; margin: 8px 0 28px; }
.browse-head .eyebrow { display: block; margin-bottom: 12px; }
.browse-head h1 { font-size: clamp(36px, 3.4vw, 52px); margin: 0 0 8px; letter-spacing: -.04em; }
.browse.wide { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.browse.wide .filters { position: static; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 28px; padding: 0 0 20px;
  border-bottom: 1px solid var(--border); }
.browse.wide .filters legend { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #7d848e; }
.browse.wide .fsearch { flex: 1 1 280px; max-width: 420px; height: 38px; align-self: flex-end; background: none; border-color: rgba(255,255,255,.12); }
.browse.wide .fsearch input { padding: 0; }
.browse.wide .fsort { margin-left: auto; }
.browse.wide .fsort select { width: auto; min-width: 150px; }
.browse.wide .fchip span { padding: 4px 10px; font-size: 12.5px; }
.browse.wide .fchip input:checked + span { background: #eceff3; border-color: #eceff3; color: #0a0b0d; }
.browse.wide .fseg { background: none; padding: 2px; }
.browse.wide .fseg span { padding: 5px 12px; border-radius: 3px; }
.browse.wide .bb-toggle { height: 30px; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.browse.wide .f-actions { align-self: flex-end; }
.fmore { flex: 1 0 100%; }
.fmore > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--muted); }
.fmore > summary::-webkit-details-marker { display: none; }
.fmore > summary .i { width: 14px; height: 14px; }
.fmore > summary:hover, .fmore[open] > summary { color: var(--text); }
.fmore-in { display: flex; flex-wrap: wrap; gap: 18px 32px; padding-top: 16px; }
.fmore-in fieldset { min-width: 220px; }
.fmore-in .fstats { flex: 1 1 360px; }
.results-bar { margin-bottom: 12px; }
.results-bar .muted { font-family: var(--mono); font-size: 12px; }
@media (max-width: 900px) {
  .browse.wide .fsearch { max-width: none; flex-basis: 100%; }
  .browse.wide .fsort { margin-left: 0; }
}
/* the build's mods behind its row: the arsenal's 2 x 4, in the game's card shape */
.brow-bg { inset: auto; top: 50%; right: 300px; transform: translateY(-50%); width: 400px; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto; gap: 5px; padding: 0; opacity: .3;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000 85%, transparent); }
.brow-mod { aspect-ratio: 5 / 2; }
.brow:hover .brow-bg { opacity: .5; }
.browse.wide .fsort .inp select { padding: 6px 32px 6px 10px; font-size: 13px; min-height: 32px; }
@media (max-width: 1100px) { .brow-bg { right: 24px; width: 46%; } }
.rrow { grid-template-columns: 84px minmax(180px, 300px) minmax(0, 600px) minmax(0, 1fr); grid-template-areas: "pic text stats end"; }
.rrow-end { justify-self: end; }
.rrow-stats { column-gap: 28px; }
.rt-stat.curse { border-top: 0; padding-top: 0; }
@media (max-width: 1100px) { .rrow { grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "pic text end" "pic stats stats"; } }
.lx-rivens .rrow { grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "pic text end" "pic stats stats"; }

/* the planner: mod cards keep the game's wide shape at any board width (height follows the column width) */
.bb-board { container-type: inline-size; --mc-h: clamp(62px, calc((100cqi - 60px) / 4 / 2.6), 112px); }
.bb-dock { --mc-h: 76px; }
.bb-dock-list { grid-auto-columns: 190px; }
@media (max-width: 720px) { .bb-board { --mc-h: clamp(56px, calc((100cqi - 12px) / 2 / 2.6), 96px); } .bb-dock-list { grid-auto-columns: 170px; } }

/* --- dashboard (R4): the studio's feel everywhere - full width, slim rows, hairlines, mono labels ------------------ */
.dash { max-width: none; grid-template-columns: 232px minmax(0, 1fr); }
.in-dash .topbar-in { max-width: none; padding: 0 24px; }
.dash-side { padding: 18px 12px 40px; background: #0a0b0d; }
.ds-label { padding: 0 10px 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #6b727c; }
.ds-group { margin-top: 20px; }
.ds-link, .ds-server { min-height: 30px; padding: 5px 10px; font-size: 13.5px; border-radius: 3px; }
.ds-link.on { background: rgba(255,255,255,.05); box-shadow: inset 1px 0 0 var(--text); }
.ds-link:hover, .ds-server:hover { background: rgba(255,255,255,.03); }
.ds-gicon { width: 20px; height: 20px; border-radius: 3px; }
.ds-sub .ds-link { min-height: 28px; padding: 4px 10px; font-size: 13px; }
.dash-main { padding: 26px 40px 90px; animation: none; }
.dash-head { gap: 14px; margin-bottom: 22px; padding-bottom: 18px; }
.dash-head .gicon.lg { width: 36px; height: 36px; font-size: 15px; }
.dash-head .gicon.crown .i { width: 18px; height: 18px; }
.dh-text h1 { font-size: 22px; letter-spacing: -.02em; }
.dh-text .crumbs { font-family: var(--mono); font-size: 11.5px; margin-bottom: 2px; }
.crumbs { font-size: 12.5px; }
.card { padding: 18px 20px; margin-bottom: 14px; }
.card-head { margin-bottom: 12px; }
.card-head h2 { font-size: 15px; font-weight: 600; }
.card-head h2 .i { width: 15px; height: 15px; color: var(--muted); }
.two-col { gap: 14px; }
.stat-grid { margin: 0 0 22px; gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stat { padding: 16px 20px; }
.stat:first-child { padding-left: 0; }
.stat .s-icon { display: none; }
.stat strong { margin: 0 0 4px; font-size: 26px; font-family: var(--mono); font-weight: 500; letter-spacing: -.02em; }
.stat small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #7d848e; }
.mini-list li > a, .mini-list li > span { padding: 9px 4px; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.mini-list li:last-child > a { border-bottom: 0; }
.mini-list li > a:hover { background: rgba(255,255,255,.02); }
.mini-list .uses { font-family: var(--mono); font-size: 11.5px; }
code.cmd { background: none; border-color: rgba(255,255,255,.12); }
.quick { gap: 0; }
.quick a { padding: 11px 4px; border-radius: 0; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.quick a:last-child { border-bottom: 0; }
.quick a:hover { transform: none; background: rgba(255,255,255,.02); }
.quick a > .i { width: 16px; height: 16px; color: var(--muted); }
.empty { background: none; border-color: rgba(255,255,255,.1); padding: 36px 20px; }
.empty > .i, .empty-art .i { width: 24px; height: 24px; color: var(--muted); }
.empty-art { width: 48px; height: 48px; background: none; box-shadow: none; border-color: rgba(255,255,255,.12); }
.badge { font-family: var(--mono); font-size: 11px; font-weight: 500; padding: 2px 8px; }
.badge.owner { background: #eceff3; color: #0a0b0d; border-color: #eceff3; }
.chip { background: none; font-size: 12px; }
.tabs a.active { border-bottom: 1px solid var(--text); box-shadow: none; }

/* notices: one slim line; toasts: bottom right, a status bar on the left, no blur */
.notice { padding: 10px 14px; font-size: 13.5px; background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.1); animation: none; }
.notice.ok { background: rgba(111,214,164,.05); border-color: rgba(111,214,164,.25); color: #c4ecd8; }
.notice.err { background: rgba(239,107,120,.05); border-color: rgba(239,107,120,.3); color: #f6c9ce; }
.notice .i { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.toast { position: relative; padding: 11px 14px 11px 16px; border-radius: 4px; background: #111215; border: 1px solid rgba(255,255,255,.12);
  font-size: 13.5px; box-shadow: 0 16px 40px -18px rgba(0,0,0,.9); overflow: hidden; }
.toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--muted); }
.toast.ok::before { background: var(--ok); } .toast.err::before { background: var(--danger); }
.toast .i { width: 16px; height: 16px; }

/* apps grid -> slimmer cards */
.app-card { border-radius: 4px; }
@media (max-width: 980px) { .dash { grid-template-columns: minmax(0, 1fr); } .dash-main { padding: 20px 16px 90px; } }
@media (max-width: 900px) { .brow-bg { display: none; } .fx-who span { display: none; } .fx-who b { overflow: hidden; text-overflow: ellipsis; max-width: 220px; white-space: nowrap; } }

/* build rows: the build's mods as small game cards, names readable */
.brow-bg { width: 440px; right: 290px; gap: 4px 6px; opacity: .62;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
.brow:hover .brow-bg { opacity: .95; }
.brow-bg .mc { pointer-events: none; }
@media (max-width: 1250px) { .brow-bg { right: 24px; width: 46%; opacity: .35; } }

/* --- home, round 2: more contrast, one accent (a greyish violet), real pictures ----------------------------- */
:root { --hi: #aaa0d6; --hi-dim: rgba(170,160,214,.14); --muted: #a3aab4; }
.home-main { color: #d9dde3; }
.home-main .eyebrow { color: #ada7c8; }
.hx { position: relative; }
.hx::before { content: ""; position: absolute; left: 30%; top: -40px; width: 760px; height: 760px; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(170,160,214,.16), rgba(170,160,214,.04) 40%, transparent 68%); }
.hx-copy, .hx-board { position: relative; z-index: 2; }
.hx-art { position: absolute; z-index: 1; left: calc(36% - 40px); top: 24px; height: min(640px, 92%); width: auto; max-width: 44%;
  object-fit: contain; pointer-events: none; filter: drop-shadow(0 30px 60px rgba(0,0,0,.8));
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.hx-title { font-size: clamp(48px, 4.8vw, 76px); }
.hx-title span { color: #7a828d; }
.hx-title em { font-style: normal; color: var(--hi); }
.hx-lead { color: #b9c0c9; font-size: 18px; }
.hx-facts { color: #9aa1ab; } .hx-facts b { color: #fff; }
.hb { background: rgba(12,13,16,.92); box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); }
.hb-head { color: #9aa1ab; }
.hb-stat { color: #b4bbc5; }
.hx-recent .k { color: #7d848e; }
.nowstrip { background: linear-gradient(90deg, rgba(170,160,214,.07), rgba(170,160,214,.02) 40%, transparent), #0b0c0f;
  border-color: rgba(170,160,214,.18); }
.ns-cell strong { color: #fff; font-size: 17px; }
.ns-cell > span:not(.eyebrow):not(.cmd-chip) { color: #b4bbc5; }
.ns-lead { color: #b4bbc5; }
.fx-head h2 { color: #fff; } .fx-head h2 span { color: #7a828d; }
.fx-row { position: relative; }
.fx-row:nth-of-type(even)::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--gutter)); background: #0c0d10; z-index: -1; }
.fx { position: relative; z-index: 0; }
.fx-n { display: flex; flex-direction: column; gap: 10px; }
.fx-n b { font-family: var(--mono); font-size: 44px; font-weight: 400; line-height: 1; color: var(--hi); letter-spacing: -.04em; }
.fx-n .eyebrow { color: #c3c9d1; }
.fx-text h3 { color: #fff; font-size: 26px; }
.fx-text p { color: #b4bbc5; font-size: 16px; }
.fx-steps li, .fx-places li, .fx-alerts > span { color: #d9dde3; }
.fx-node b { color: #fff; }
.cmd-chip { color: #eeebfa; border-color: rgba(170,160,214,.35); background: rgba(170,160,214,.06); }
.cx-row code { color: var(--hi); }
.cx-row span { color: #b4bbc5; }
.lx-head a, .hx-recent a:hover { color: var(--hi); }
.mainnav a.active::after { background: var(--hi); }
.button:focus-visible, a:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px; }
@media (max-width: 900px) { .hx-art { position: static; display: block; max-width: 70%; height: auto; margin: -10px auto -40px; } .hx::before { left: -20%; } }
/* build rows: the mods fit the room the row has (two rows of four when wide, one row when narrower, none on phones) */
.build-rows { container-type: inline-size; }
@container (max-width: 1100px) {
  .brow-bg { width: 44cqw; right: 210px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .brow-bg .mslot:nth-child(n+5) { display: none; }
}
@container (max-width: 640px) { .brow-bg { display: none; } }
.hx-recent { position: relative; z-index: 3; margin-left: -24px; padding: 18px 24px; background: linear-gradient(90deg, rgba(8,9,11,.92), rgba(8,9,11,.75)); }
.hx-recent { margin-left: -120px; padding: 18px 24px 18px 120px; background: linear-gradient(90deg, transparent, rgba(8,9,11,.92) 120px); }

/* =============================================================================================
   Mod cards as the game draws them (measured off Arsenyx's planner, which copies the arsenal):
   a 184 x 96 card - top frame, the art darkened under a rarity tint, the name in the rarity's colour with a black
   outline, the drain on its backer, rank dots (sky blue) on the bottom frame and the rank-complete line when maxed.
   Hover (or .expanded, for touch) opens the full 184 x 285 card over it: the whole art, the name, stats and type tab
   on the rarity background. Pieces: assets/modframes (the wiki's Mod/Assets, trimmed to their drawn area).
   ============================================================================================= */
.mc { --tc: #c79989; --rc: #c79989;
  --ftop: url("/assets/modframes/BronzeFrameTop.png"); --fbot: url("/assets/modframes/BronzeFrameBottom.png");
  --fbg: url("/assets/modframes/BronzeBackground.png"); --fback: url("/assets/modframes/BronzeTopRightBacker.png");
  --ftab: url("/assets/modframes/BronzeLowerTab.png"); }
.mc.r-uncommon { --tc: #bec0c2; --rc: #bec0c2;
  --ftop: url("/assets/modframes/SilverFrameTop.png"); --fbot: url("/assets/modframes/SilverFrameBottom.png");
  --fbg: url("/assets/modframes/SilverBackground.png"); --fback: url("/assets/modframes/SilverTopRightBacker.png");
  --ftab: url("/assets/modframes/SilverLowerTab.png"); }
.mc.r-rare { --tc: #fbecc4; --rc: #fbecc4;
  --ftop: url("/assets/modframes/GoldFrameTop.png"); --fbot: url("/assets/modframes/GoldFrameBottom.png");
  --fbg: url("/assets/modframes/GoldBackground.png"); --fback: url("/assets/modframes/GoldTopRightBacker.png");
  --ftab: url("/assets/modframes/GoldLowerTab.png"); }
.mc.r-legendary { --tc: #dfdfdf; --rc: #dfdfdf;
  --ftop: url("/assets/modframes/LegendaryFrameTop.png"); --fbot: url("/assets/modframes/LegendaryFrameBottom.png");
  --fbg: url("/assets/modframes/LegendaryBackground.png"); --fback: url("/assets/modframes/LegendaryTopRightBacker.png");
  --ftab: url("/assets/modframes/LegendaryLowerTab.png"); }
.mc.r-riven { --tc: #d9a8ff; --rc: #d9a8ff;
  --ftop: url("/assets/modframes/RivenFrameTop.png"); --fbot: url("/assets/modframes/RivenFrameBottom.png");
  --fbg: url("/assets/modframes/SilverBackground.png"); --fback: url("/assets/modframes/RivenTopRightBacker.png");
  --ftab: url("/assets/modframes/RivenLowerTab.png"); }
.mc.unknown { --tc: #f87171; --rc: #f87171; }

/* the compact card */
.mc { position: absolute; inset: 0 auto auto 50%; width: 184px; height: 96px; min-height: 0; margin: 0 0 0 -92px; padding: 0;
  display: block; overflow: visible; isolation: isolate; border: 0; border-radius: 0; background: none; box-shadow: none; filter: none;
  font-family: Roboto, var(--sans); transform: none; transition: transform .12s; }
.mc::before, .mc::after { content: ""; display: block; position: absolute; left: 0; right: auto; width: 100%; z-index: 3; pointer-events: none;
  border-radius: 0; opacity: 1; filter: none; box-shadow: none; -webkit-mask: none; mask: none; }
.mc::before { top: 0; bottom: auto; height: 31px; background: var(--ftop) center top / 100% auto no-repeat; }
.mc::after { top: auto; bottom: 0; height: 82px; background: var(--fbot) center bottom / 100% auto no-repeat; }
.mc.r-riven::before { left: -5%; width: 110%; top: -8px; height: 84px; }
.mc.r-riven::after { left: -5%; width: 110%; height: 84px; }
.mc-bg { display: none; }
.mc-top { position: absolute; inset: 4px 3px auto 3px; height: 76px; margin: 0; padding: 0; z-index: 1; overflow: hidden;
  border-radius: 0 0 5px 5px; background: #08090b; display: block; }
.mc-top::before { display: none !important; }
.mc-top::after { content: ""; display: block; position: absolute; inset: 0; width: auto; height: auto; margin: 0; transform: none; border: 0;
  box-shadow: none; background: var(--tc); mix-blend-mode: hard-light; opacity: .15; z-index: 1; }
.mc-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 1;
  filter: grayscale(.7) brightness(.35); -webkit-mask-image: none; mask-image: none; }
.mc-art.none { display: grid; place-items: center; font: 600 22px/1 var(--sans); color: rgba(255,255,255,.35); filter: none; }
.mc .riven-art { opacity: 1; }
.mc-drain { position: absolute; inset: 7px 2px auto auto; width: 36px; height: 18px; min-width: 0; aspect-ratio: auto; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 1px; padding: .5px 0 0 3px; margin: 0;
  background: var(--fback) center / 100% 100% no-repeat; border: 0; border-radius: 0; box-shadow: none;
  font: 700 12px/1 Roboto, var(--sans); letter-spacing: -.05em; color: var(--tc); text-shadow: none; }
.mc-drain b { font-weight: 700; }
.mc-drain .pol { width: 13px; height: 13px; color: inherit; }
.mc-drain .pol.none { width: 7px; height: 7px; border-width: 1px; border-color: currentColor; opacity: .6; }
.mc-drain.good { color: #4ade80; text-shadow: 0 0 8px rgba(74,222,128,.45); border: 0; }
.mc-drain.bad { color: #f87171; text-shadow: 0 0 8px rgba(248,113,113,.45); border: 0; }
.mc-drain.good .pol, .mc-drain.bad .pol { color: inherit; }
.mc-body { position: absolute; inset: 45px 7px auto 7px; transform: translateY(-50%); z-index: 5; margin: 0; padding: 0;
  display: block; min-height: 0; background: none; }
.mc-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0;
  font: 400 16px/1.25 Roboto, var(--sans); letter-spacing: 0; text-align: center; color: var(--tc);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 6px #000, 0 0 12px #000; }
.mc-more { display: none; }
.mc-line { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 6px; z-index: 4; pointer-events: none;
  background: url("/assets/modframes/RankCompleteLine.png") center / 100% 100% no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent, #fff 50%, transparent) center / 0 100% no-repeat;
  mask: linear-gradient(90deg, transparent, #fff 50%, transparent) center / 0 100% no-repeat; animation: mc-rank .4s ease-out forwards; }
@keyframes mc-rank { to { -webkit-mask-size: 200% 100%; mask-size: 200% 100%; } }
.mc-pips { position: absolute; inset: auto auto 5px 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 2px; padding: 0; margin: 0; }
.mc-pips::before { display: none; }
.mc-pips i, .mc-pips.dense i { width: 5px; height: 5px; border-radius: 50%; background: rgba(82,82,91,.6); opacity: 1; filter: none; box-shadow: none; }
.mc-pips i.on { background: #7dd3fc; box-shadow: 0 0 2px .5px rgba(120,180,255,.6); }
.mc-pips.dense { gap: 1px; } .mc-pips.dense i { width: 4px; height: 4px; }
.mc-x, .mc-edit { z-index: 6; top: 9px; }

/* the full card, opened over the compact one (centred on it, like Arsenyx): on the board when its middle is hovered
   (.peek, builds.js), elsewhere on hover */
@media (hover: hover) {
  .sl .mc.peek:not(.arc), .mslot .mc:hover { top: -94px; height: 285px; z-index: 40; filter: drop-shadow(0 0 20px rgba(0,0,0,.8));
  }
  .sl .mc.peek:not(.arc) .mc-bg, .mslot .mc:hover .mc-bg { display: block; }
  .sl .mc.peek:not(.arc) .mc-top, .mslot .mc:hover .mc-top { inset: 4px 3px; height: auto; border-radius: 0; background: none; }
  .sl .mc.peek:not(.arc) .mc-top::after, .mslot .mc:hover .mc-top::after { display: none; }
  .sl .mc.peek:not(.arc) .mc-art, .mslot .mc:hover .mc-art { object-fit: contain; filter: none; }
  .sl .mc.peek:not(.arc) .mc-body, .mslot .mc:hover .mc-body { inset: auto 3px 20px 3px; transform: none; padding: 6px 8px 8px;
    display: flex; flex-direction: column; align-items: center; background: var(--fbg) center bottom / cover no-repeat; }
  .sl .mc.peek:not(.arc) .mc-name, .mslot .mc:hover .mc-name { font: 500 14px/1.25 Roboto, var(--sans); text-shadow: none; -webkit-line-clamp: 3; }
  .sl .mc.peek:not(.arc) .mc-more, .mslot .mc:hover .mc-more { display: flex; }
  .sl .mc.peek:not(.arc) .mc-pips, .mslot .mc:hover .mc-pips { position: absolute; bottom: 4px; padding: 0; }
  .sl:has(.mc.peek) { z-index: 30; }
}
.mc.expanded:not(.arc) { top: -94px; height: 285px; z-index: 40; filter: drop-shadow(0 0 20px rgba(0,0,0,.8)); }
.mc.expanded:not(.arc) .mc-bg { display: block; }
.mc.expanded:not(.arc) .mc-top { inset: 4px 3px; height: auto; border-radius: 0; background: none; }
.mc.expanded:not(.arc) .mc-top::after { display: none; }
.mc.expanded:not(.arc) .mc-art { object-fit: contain; filter: none; }
.mc.expanded:not(.arc) .mc-body { inset: auto 3px 20px 3px; transform: none; padding: 6px 8px 8px; display: flex; flex-direction: column;
  align-items: center; background: var(--fbg) center bottom / cover no-repeat; }
.mc.expanded:not(.arc) .mc-name { font: 500 14px/1.25 Roboto, var(--sans); text-shadow: none; -webkit-line-clamp: 3; }
.mc.expanded:not(.arc) .mc-more { display: flex; }
.mc.expanded:not(.arc) .mc-pips { position: absolute; bottom: 4px; padding: 0; }
.sl:has(.mc.expanded) { z-index: 30; }
.mc-bg { position: absolute; inset: 4px 3px; z-index: 0; border-radius: 0 0 20px 20px; background: var(--fbg) center bottom / cover no-repeat; }
.mc-more { flex-direction: column; align-items: center; gap: 4px; width: 100%; margin: 4px 0 0; padding: 0; }
.mc-stats { display: flex; flex-direction: column; gap: 0; padding: 0 4px; font: 400 12px/1.375 Roboto, var(--sans); color: #d1d5db; text-align: center; }
.mc-type { display: flex; align-items: center; justify-content: center; align-self: center; width: 80%; min-width: 0; height: 22px; margin: 0; padding: 0 10px;
  background: var(--ftab) center / contain no-repeat; border: 0; border-radius: 0; box-shadow: none;
  font: 400 9px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; }

/* the planner board: Arsenyx's spacing (184px cards, 16px apart, 24px between rows) */
.bb-board { --mc-h: 96px; }
.bb-mods, .bb-toprow { row-gap: 18px; }
.bb-mods.cols-4 { grid-template-columns: repeat(4, 184px); justify-content: center; column-gap: 16px; }
.bb-mods.cols-5 { grid-template-columns: repeat(5, 184px); justify-content: center; column-gap: 16px; }
.bb-toprow { grid-template-columns: repeat(2, 184px); justify-content: center; column-gap: 16px; }
.sl-in { overflow: visible; }
.sl.full .sl-in { border-color: transparent; background: none; box-shadow: none; }
@media (max-width: 980px) { .bb-mods.cols-4, .bb-mods.cols-5, .bb-toprow { grid-template-columns: repeat(2, 184px); } }
@media (max-width: 440px) { .bb-board { zoom: .86; } }

/* the mod list under the board: the same compact cards, no opening (the peek panel shows the details) */
.bb-dock { --mc-h: 96px; }
.bb-dock-list { grid-template-rows: repeat(2, 96px); grid-auto-columns: 184px; gap: 12px 16px; }
.bb-dock-list > .mc { position: relative; inset: auto; margin: 0; }
@media (hover: hover) { .bb-dock-list > .mc:hover { height: 96px; transform: translateY(-2px); box-shadow: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.8)); } }

/* arcanes: no frame - the arcane's wiki picture (in its own frame), its name and rank (Arsenyx: 140 x 100) */
.mc.arc { width: 140px; height: 100px; margin-left: -70px; display: flex; flex-direction: column; align-items: center;
  border-radius: 6px; background: rgba(20,21,24,.8); }
.mc.arc::before, .mc.arc::after, .mc.arc .mc-bg, .mc.arc .mc-line { display: none; }
.mc.arc .mc-top { position: relative; inset: auto; flex: none; width: 79px; height: 64px; margin: 6px 0 0;
  border-radius: 4px; background: none; overflow: hidden; display: block; }
.mc.arc .mc-top::after { display: none; }
.mc.arc .ac-art { width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: none; }
.mc.arc .ac-art.none { display: block; border: 1.5px dashed rgba(255,255,255,.2); border-radius: 50%; }
.mc.arc .mc-body { position: static; inset: auto; transform: none; width: 100%; padding: 0 4px 6px; text-align: center; }
.mc.arc .mc-name { -webkit-line-clamp: 1; margin-top: 4px; font: 500 10px/1.25 var(--sans); color: #fafafa; text-shadow: none; }
.ac-rank { display: block; margin-top: 2px; font: 500 9px/1.25 var(--sans); letter-spacing: 0; text-transform: uppercase; color: #a1a1aa; }
.mc:not(.arc) .ac-rank { display: none; }
.mc.arc .mc-pips { display: none; }
.bb-lower { grid-template-columns: repeat(auto-fit, 140px); justify-content: center; column-gap: 16px; }
.bb-lower .sl { height: calc(100px + 22px); }
.bb-lower .sl .sl-in { height: 100px; width: 140px; left: 50%; margin-left: -70px; }
.sl.arcane .sl-in, .bb-lower .sl .sl-in { border-style: dashed; }
/* hover: the arcane's stats in a panel under it (and the rank dots, to change its rank, when editing) */
@media (hover: hover) {
  .sl .mc.arc.peek { height: auto; min-height: 100px; width: 200px; margin-left: -100px; z-index: 40; background: #141518;
    outline: 1px solid rgba(255,255,255,.1); filter: drop-shadow(0 12px 24px rgba(0,0,0,.8)); }
  .sl .mc.arc.peek .mc-name { -webkit-line-clamp: 2; font-size: 12px; }
  .sl .mc.arc.peek .mc-more { display: flex; }
  .sl .mc.arc.peek .mc-stats { font-size: 11.5px; }
  .sl .mc.arc.peek .mc-type { background: none; height: auto; color: #a1a1aa; }
  .sl .mc.arc.peek .mc-pips { display: flex; position: static; transform: none; margin: 0 0 8px; }
}
.mc.arc.expanded { height: auto; width: 200px; margin-left: -100px; z-index: 40; background: #141518; outline: 1px solid rgba(255,255,255,.1); }
.mc.arc.expanded .mc-more { display: flex; } .mc.arc.expanded .mc-type { background: none; height: auto; color: #a1a1aa; }
.mc.arc.expanded .mc-pips { display: flex; position: static; transform: none; margin: 0 0 8px; }

/* the site's cards (home board, build rows): the same card at a set scale */
.mslot { position: relative; display: block; flex: none; --z: 1; width: calc(184px * var(--z)); height: calc(96px * var(--z));
  aspect-ratio: auto; min-width: 0; container-type: normal; }
.mslot > .mc { inset: 0 auto auto 0; margin: 0; zoom: var(--z); }
.mslot.empty { border: 1px dashed rgba(255,255,255,.1); border-radius: 3px; }
/* the site's card spots: home board (4 across), feature row (3), build rows (2 rows of 4 behind the text) */
.hb { overflow: visible; }
.hb-grid { grid-template-columns: repeat(4, max-content); justify-content: center; gap: 6px; }
.hb-top { gap: 6px; }
.hb .mslot { --z: .74; }
.fx-mods { grid-template-columns: repeat(3, max-content); gap: 8px; }
.fx-mods .mslot { --z: .8; }
.brow-bg { width: auto; grid-template-columns: repeat(4, max-content); gap: 0 4px; align-content: center; }
.brow-bg .mslot { --z: .52; }
.brow-bg .mc-name { font-size: 21px; }
.brow-bg .mc-drain { display: none; }
@container (max-width: 1100px) { .brow-bg { width: auto; grid-template-columns: repeat(4, max-content); } }

/* the expanded card has no outline (the old card's ring) */
@media (hover: hover) { .sl .mc:hover, .mslot .mc:hover { box-shadow: none; outline: 0; } }
.mc.expanded { box-shadow: none; outline: 0; }
/* the "Add riven" row in your rivens: a row like the rivens under it */
.riven-add-card.rrow-add { flex-direction: row; justify-content: flex-start; align-items: center; min-height: 0; gap: 18px; padding: 12px 16px; text-align: left; width: 100%; }
.riven-add-card.rrow-add .ra-icon { width: 84px; height: 56px; flex: none; }
.riven-add-card.rrow-add > span:last-child { display: grid; gap: 3px; }
/* home: the build preview sits inside the page's margins */
.hx-board { grid-column: 6 / -1; margin-right: 0; }
.hb { border-right: 1px solid rgba(255,255,255,.1); border-radius: 4px; }
.hx-recent { padding-right: 0; }

/* =============================================================================================
   Components (builder section 26): the message kind switch, the layout's blocks, pickers, and the V2 preview
   ============================================================================================= */
.mode-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 4px; background: rgba(0,0,0,.3); border: 1px solid var(--border); justify-self: start; }
.mode-switch button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px;
  font-weight: 600; padding: 6px 12px; border-radius: 3px; cursor: pointer; }
.mode-switch button .i { width: 14px; height: 14px; }
.mode-switch button.on { background: var(--chrome); color: #0c0d10; }
.sub-title .count.bad { color: #ff9aa5; }
.sub-title .count + .count { margin-left: 4px; }
.row.row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lb-list { display: grid; gap: 8px; }
.lb-card { border: 1px solid var(--border); border-radius: 4px; background: rgba(255,255,255,.02); }
.lb-card.inner { background: rgba(0,0,0,.2); }
.lb-card > .lb-head { list-style: none; cursor: pointer; }
.lb-card > .lb-head::-webkit-details-marker { display: none; }
.lb-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 12px; min-width: 0; font-size: 13.5px; }
.lb-head > .i { width: 15px; height: 15px; color: var(--dim); flex: none; }
.lb-head b { font-weight: 600; white-space: nowrap; }
.lb-head .tag { font-size: 10.5px; padding: 1px 6px; }
.lb-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.lb-tools { display: inline-flex; gap: 2px; margin-left: auto; flex: none; }
.lb-tools .icon-btn { width: 26px; height: 26px; }
.lb-head.mini { padding: 0 0 4px; }
.lb-card[open] > .lb-head { border-bottom: 1px solid var(--border); }
.lb-body { display: grid; gap: 10px; padding: 12px; }
.lb-card .btn-item { grid-template-columns: minmax(0, 1fr); }
.lb-box { display: grid; gap: 8px; padding: 10px 10px 10px 12px; border-left: 3px solid var(--c, #4a4f58); border-radius: 3px; background: rgba(0,0,0,.18); }
.lb-add { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-add .add-btn.small { width: auto; flex: 1 1 auto; padding: 8px 10px; font-size: 12.5px; gap: 6px; }
.lb-add .add-btn.small .i { width: 14px; height: 14px; }
.lb-pic { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto; gap: 8px; align-items: end; }
.lb-spoil { align-self: end; padding-bottom: 10px; }
@media (max-width: 640px) { .lb-pic, .row.row-3 { grid-template-columns: 1fr; } .lb-sum { display: none; } }

/* the V2 preview: Discord's look for laid-out messages */
.v2-msg { display: grid; gap: 8px; max-width: 540px; margin-top: 4px; }
.v2-text { white-space: pre-wrap; color: #dbdee1; font-size: 15px; line-height: 1.375; }
.v2-text h1, .v2-text h2, .v2-text h3 { margin: 4px 0 2px; }
.v2-section { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.v2-section .v2-text { flex: 1; min-width: 0; }
.v2-thumb { width: 85px; height: 85px; flex: none; border-radius: 8px; object-fit: cover; background: #2b2d31; }
.v2-thumb.ph, .v2-gallery .ph { display: grid; place-items: center; color: #6d6f78; }
.v2-gallery { display: grid; gap: 4px; border-radius: 8px; overflow: hidden; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-gallery.n1 { grid-template-columns: 1fr; }
.v2-gallery.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v2-gallery img, .v2-gallery .ph { width: 100%; height: 100%; max-height: 300px; aspect-ratio: 16 / 10; object-fit: cover; background: #2b2d31; }
.v2-gallery.n1 img { aspect-ratio: auto; max-height: 340px; }
.v2-sep { height: 1px; background: rgba(255,255,255,.1); margin: 2px 0; }
.v2-sep.big { margin: 10px 0; }
.v2-sep.blank { background: none; }
.v2-box { display: grid; gap: 8px; padding: 14px 16px; border-radius: 8px; background: #393a41; border: 1px solid rgba(255,255,255,.04); }
.v2-box.edge { border-left: 4px solid var(--c); padding-left: 14px; }
.v2-row { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: #fff; background: #4e5058; padding: 6px 16px; border-radius: 8px;
  white-space: nowrap; flex: none; }
.v2-btn.primary { background: #5865f2; } .v2-btn.success { background: #248046; } .v2-btn.danger { background: #da373c; }
.v2-btn .i { width: 13px; height: 13px; }
.v2-select { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 8px; background: #1e1f22;
  border: 1px solid #1e1f22; color: #949ba4; font-size: 14px; max-width: 480px; }
.v2-select .i { width: 16px; height: 16px; }
.lb-sub, .lb-list, .lb-box { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.lb-card, .lb-body { min-width: 0; }
.lb-pic { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "url url url" "desc spoil del"; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.lb-pic > .fld:first-child { grid-area: url; } .lb-pic > .fld:nth-child(2) { grid-area: desc; }
.lb-pic > .inline-check { grid-area: spoil; padding-bottom: 10px; } .lb-pic > .icon-btn { grid-area: del; margin-bottom: 4px; }
.lb-opt { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) auto; gap: 8px; align-items: end; }
.lb-opt > .icon-btn { margin-bottom: 6px; }

/* the planner's Incarnon panel: on / off, normal or Incarnon-form stats, one evolution per tier */
.bb-incarnon .lo-head { display: flex; align-items: center; justify-content: space-between; }
.inc-toggle { margin: 0; }
.inc-off { margin: 8px 0 0; }
.inc-view { display: flex; gap: 2px; padding: 3px; margin: 10px 0 4px; border-radius: 4px; background: rgba(0,0,0,.3); border: 1px solid var(--border); }
.inc-view button { flex: 1; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 8px; border-radius: 3px; cursor: pointer; }
.inc-view button.on { background: var(--chrome); color: #0c0d10; }
.inc-tiers { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.inc-tier { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 8px; align-items: start; }
.inc-n { grid-row: span 2; font-family: var(--mono); font-size: 11px; color: var(--dim); padding-top: 6px; text-align: center;
  border-right: 1px solid var(--border); height: 100%; }
.inc-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.inc-opt { border: 1px solid var(--border-2); background: rgba(255,255,255,.02); color: var(--muted); font: inherit; font-size: 12px; font-weight: 500;
  padding: 4px 9px; border-radius: 3px; cursor: pointer; text-align: left; }
.inc-opt:hover:not(:disabled) { color: var(--text); border-color: rgba(255,255,255,.3); }
.inc-opt.on { color: #f3eeff; border-color: rgba(170,160,214,.7); background: rgba(170,160,214,.16); }
.inc-opt:disabled { cursor: default; }
.inc-text { grid-column: 2; margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.inc-calc { font-size: 10.5px; padding: 0 5px; border-radius: 3px; color: #9fe3c0; border: 1px solid rgba(111,214,164,.35); white-space: nowrap; }
.side-card[hidden] { display: none; }

/* build from a screenshot */
#bb-import.busy { opacity: .6; pointer-events: none; }
.bb-import-note { position: relative; margin: 0 0 14px; padding: 12px 40px 12px 14px; border-radius: 4px; font-size: 13px; line-height: 1.5;
  border: 1px solid rgba(170,160,214,.35); background: rgba(170,160,214,.07); color: var(--text); }
.bb-import-note ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); columns: 2; column-gap: 24px; }
.bb-import-note .icon-btn { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; }
.imp-pop .imp-filter { width: 100%; margin: 6px 0; padding: 7px 9px; border-radius: 4px; border: 1px solid var(--border-2); background: rgba(0,0,0,.3); color: var(--text); font: inherit; }
.imp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; max-height: 280px; overflow: auto; }
.imp-list button { text-align: left; border: 1px solid var(--border); background: rgba(255,255,255,.02); color: var(--text); font: inherit; font-size: 13px;
  padding: 6px 8px; border-radius: 3px; cursor: pointer; }
.imp-list button:hover { border-color: rgba(255,255,255,.3); }
@media (max-width: 640px) { .bb-import-note ul { columns: 1; } }
.bb-board-col { min-width: 0; }

/* the board: the middle of a card opens it; the selected slot glows; "take it out" sits by the slot's label */
.mc-peek { position: absolute; left: 26%; right: 26%; top: 24px; height: 44px; z-index: 8; cursor: zoom-in; }
.mc.arc .mc-peek { left: 22%; right: 22%; top: 8px; height: 62px; }
.mc.peek .mc-peek { display: none; }
.sl.sel .mc { filter: drop-shadow(0 0 1px rgba(236,242,250,.95)) drop-shadow(0 0 10px color-mix(in srgb, var(--hi) 75%, transparent)); }
.sl.sel .mc.peek { filter: drop-shadow(0 0 20px rgba(0,0,0,.8)) drop-shadow(0 0 1px rgba(236,242,250,.9)); }
.sl-rm { display: none; position: absolute; top: 0; right: 24px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px;
  background: none; color: var(--muted); cursor: pointer; place-items: center; }
.sl-rm .i { width: 13px; height: 13px; }
.sl-rm:hover { color: #fff; background: rgba(239,107,120,.55); }
.sl.sel .sl-rm, .sl:focus-within .sl-rm { display: grid; }
@media (hover: hover) { .sl:hover .sl-rm { display: grid; } }

/* the planner's "before saving" check */
dialog.modal.bb-savecheck { width: min(520px, calc(100vw - 32px)); }
.bb-savecheck h2 { margin: 0 0 12px; font-size: 18px; }
.sc-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.sc-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.sc-list.warn li { color: #f0c674; font-size: 13.5px; }
.sc-vis { display: grid; gap: 8px; margin: 4px 0 16px; }
.sc-vis-opt { display: grid; gap: 2px; text-align: left; padding: 11px 14px; border-radius: 4px; border: 1px solid var(--border);
  background: rgba(255,255,255,.02); color: var(--text); cursor: pointer; font: inherit; transition: border-color .15s, background .15s; }
.sc-vis-opt:hover, .sc-vis-opt:focus-visible { border-color: var(--hi); background: rgba(170,160,214,.08); outline: none; }
.sc-vis-opt strong { font-size: 14px; } .sc-vis-opt strong small { color: var(--hi); font-weight: 600; margin-left: 6px; font-size: 11.5px; }
.sc-vis-opt span { color: var(--muted); font-size: 12.5px; }
.sc-actions { display: flex; gap: 8px; justify-content: flex-end; }
.bb-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bb-share-copy { padding: 3px 9px; }

/* damage types: the wiki's icons; each type's share of status procs */
.bb-dmg-head { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 6px; }
.bb-dmg li { grid-template-columns: 16px minmax(0, 1fr) auto 46px; }
.bb-dmg span { color: color-mix(in srgb, var(--dc) 70%, #e5e7eb); }
.bb-dmg em { font-style: normal; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.dmg-ic { width: 16px; height: 16px; object-fit: contain; }
.dmg-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--dc); justify-self: center; }
/* the progenitor bonus element */
.bb-progenitor .side-title .i { color: #f4c95d; }
.prog-els { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.prog-el { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px 5px 6px; border-radius: 4px; border: 1px solid var(--border);
  background: rgba(255,255,255,.02); color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.prog-el.none { padding: 5px 10px; }
.prog-el:hover { color: var(--text); border-color: rgba(255,255,255,.25); }
.prog-el.on { color: #fff; border-color: var(--dc, var(--hi)); background: color-mix(in srgb, var(--dc, #aaa0d6) 16%, transparent);
  box-shadow: 0 0 12px -4px var(--dc, transparent); }
.prog-el .dmg-ic { width: 15px; height: 15px; }
.prog-pct { display: grid; grid-template-columns: auto minmax(0, 1fr) 38px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.prog-pct[hidden] { display: none; }
.prog-pct input { accent-color: #f4c95d; }
.prog-pct b { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.prog-read { display: flex; align-items: center; gap: 7px; margin: 2px 0 8px; font-size: 13.5px; color: var(--muted); }
.prog-read b { color: color-mix(in srgb, var(--dc) 70%, #fff); }

/* builds listing: votes on every row, Tester-starred ("tested") rows in gold, the Tested toggle, tabs, server groups */
.brow-meta .bt-votes .bt-hearts { color: var(--muted); }
.brow-meta .bt-votes .bt-stars { color: var(--dim); }
.brow-meta .bt-votes .bt-stars .i { fill: none; }
.brow-meta .bt-votes .bt-stars.on { color: #f4d77e; }
.brow-meta .bt-votes .bt-stars.on .i { fill: currentColor; filter: drop-shadow(0 0 4px rgba(250,220,130,.55)); }
.brow.tested { border-color: rgba(244,201,93,.32); background: linear-gradient(100deg, rgba(244,201,93,.07), rgba(244,201,93,0) 40%), #0d0e11;
  box-shadow: inset 2px 0 0 #e9c46a, 0 0 22px -12px rgba(244,201,93,.6); }
.brow.tested:hover { border-color: rgba(244,201,93,.55); }
.brow.tested .brow-text strong { color: #fbe7b0; }
.vis-tested { display: inline-flex; align-items: center; gap: 4px; color: #f4d77e; font-weight: 600; }
.vis-tested .i { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.gold-text { background: linear-gradient(100deg, #d9ae4a 0%, #f7dd8f 20%, #fff8e1 32%, #fbe3a0 44%, #e6bd5c 62%, #f9e39d 80%, #d9ae4a 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: gold-shine 7s linear infinite; font-weight: 700; filter: drop-shadow(0 0 5px rgba(250,220,130,.35)); }
@media (prefers-reduced-motion: reduce) { .gold-text { animation: none; } }
.tested-toggle { display: flex; align-items: center; gap: 8px; }
.tested-toggle .i.tester-ic { width: 15px; height: 15px; fill: #f4d77e; stroke: none; filter: drop-shadow(0 0 4px rgba(250,220,130,.5)); }
.build-tabs { margin: 0 0 14px; }
.server-builds { margin: 0 0 26px; }
.sb-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 16px; }
.sb-head img, .sb-ph { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.sb-ph { display: grid; place-items: center; background: var(--panel-3); color: var(--muted); font-size: 13px; }
.sb-head .muted { font-weight: 400; }

/* the dock's arcanes: their own 140 x 100 tiles (not the board slot's centring, which pushed the first column out) */
.bb-dock-list:has(> .mc.arc) { grid-template-rows: repeat(2, 100px); grid-auto-columns: 140px; gap: 12px 14px; }
.bb-dock-list > .mc.arc { margin: 0; width: 140px; height: 100px; inset: auto; }
@media (hover: hover) { .bb-dock-list > .mc.arc:hover { height: 100px; } }
@media (max-height: 1080px) and (min-width: 721px) { .bb-dock-list:has(> .mc.arc) { grid-template-rows: 100px; } }

/* toggles everywhere: slim and quiet - an outlined track with a grey knob, the accent (soft violet) when on */
.bb-toggle .bb-sw, .role .switch, .toggle, .mini-switch span {
  width: 30px; height: 16px; border-radius: 99px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.18);
  box-shadow: none; transition: background .2s, border-color .2s; }
.bb-toggle .bb-sw::after, .role .switch::after, .toggle span, .mini-switch span::after {
  top: 2px; left: 2px; width: 10px; height: 10px; background: #8b909a; box-shadow: none; transition: transform .2s, background .2s; }
.bb-toggle input:checked + .bb-sw, .role input:checked ~ .switch, .toggle.on, .mini-switch input:checked + span {
  background: color-mix(in srgb, var(--hi) 22%, transparent); border-color: color-mix(in srgb, var(--hi) 70%, transparent); }
.bb-toggle input:checked + .bb-sw::after, .role input:checked ~ .switch::after, .toggle.on span, .mini-switch input:checked + span::after {
  transform: translateX(14px); background: #f1effa; box-shadow: 0 0 6px color-mix(in srgb, var(--hi) 60%, transparent); }
.bb-toggle input:focus-visible + .bb-sw { box-shadow: 0 0 0 3px var(--glow); }

/* a riven's "Want it?" row: the offer box as tall as the buttons beside it */
.rp-row { align-items: flex-end; }
.rp-row .button.small { height: 34px; }
.rp-price { flex: 0 1 190px; }
.rp-price .inp { height: 34px; }
.rp-price .inp input { padding-top: 0; padding-bottom: 0; font-size: 13.5px; }
.rp-price .inp .suffix { display: flex; align-items: center; }

/* the bonus element's strength: a slim slider in the element's colour */
.prog-pct input[type=range] { -webkit-appearance: none; appearance: none; height: 16px; background: none; accent-color: var(--dc); cursor: pointer; }
.prog-pct input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 99px;
  background: linear-gradient(90deg, var(--dc) var(--p, 100%), rgba(255,255,255,.12) var(--p, 100%)); }
.prog-pct input[type=range]::-moz-range-track { height: 3px; border-radius: 99px; background: rgba(255,255,255,.12); }
.prog-pct input[type=range]::-moz-range-progress { height: 3px; border-radius: 99px; background: var(--dc); }
.prog-pct input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -4px; border-radius: 50%;
  background: #fff; border: 2px solid var(--dc); box-shadow: 0 0 8px color-mix(in srgb, var(--dc) 70%, transparent); }
.prog-pct input[type=range]::-moz-range-thumb { width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--dc);
  box-shadow: 0 0 8px color-mix(in srgb, var(--dc) 70%, transparent); }
.prog-pct b { color: color-mix(in srgb, var(--dc) 65%, #fff); }

/* Control Panel: Users */
.users-search { min-width: 280px; }
.users-search .inp { align-items: center; padding-left: 10px; }
.users-search .inp .i { width: 15px; height: 15px; color: var(--muted); }
.users-table { display: grid; }
.ut-row { display: grid; grid-template-columns: minmax(220px, 2fr) 1fr 0.8fr 64px 64px minmax(150px, 1.2fr) 200px; gap: 14px; align-items: center;
  padding: 10px 4px; border-top: 1px solid var(--border); font-size: 13.5px; }
.ut-head { border-top: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ut-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ut-user img, .ut-ph { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.ut-ph { display: grid; place-items: center; background: var(--panel-3); color: var(--muted); font-weight: 700; }
.ut-user > span { display: grid; min-width: 0; }
.ut-user strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ut-user small, .ut-vis small { color: var(--muted); font-size: 11.5px; }
.ut-vis { display: grid; }
.ut-actions { display: flex; gap: 6px; justify-content: flex-end; }
@media (max-width: 1100px) { .ut-row { grid-template-columns: minmax(0, 1fr) 200px; } .ut-row > :not(.ut-user):not(.ut-actions) { display: none; } }
.user-card { padding: 0; overflow: hidden; }
.uc-banner { height: 120px; background: center / cover no-repeat; }
.uc-row { display: flex; align-items: center; gap: 18px; padding: 18px 20px; flex-wrap: wrap; }
.uc-av { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; font-size: 26px; }
.uc-text { flex: 1; min-width: 220px; } .uc-text h2 { margin: 2px 0 4px; font-size: 22px; }
.uc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.user-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.user-prefs { display: grid; gap: 10px; }
.user-prefs .button { justify-self: start; }
.user-pics { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.user-list { list-style: none; margin: 0; padding: 0; display: grid; }
.user-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.user-list li:first-child { border-top: 0; }
.user-list a { flex: 1; min-width: 0; display: grid; color: var(--text); text-decoration: none; }
.user-list a strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-list a small { color: var(--muted); font-size: 12px; }
.user-list a:hover strong { text-decoration: underline; }
.notice.staff-view { margin: 0 0 18px; }

/* an author's name in a listing row: opens their profile */
.by-link { color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255,255,255,.2);
  text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; position: relative; z-index: 2; }
.by-link:hover, .by-link:focus-visible { color: var(--text); text-decoration-color: currentColor; outline: none; }

/* the planner's riven recommendation: the riven's violet */
.bb-rivenrec { --rv: #c4a2ff; --rv-2: #8f6ad8; margin-top: 16px; padding: 18px 20px; position: relative; overflow: hidden;
  border-color: color-mix(in srgb, var(--rv) 28%, var(--border));
  background: radial-gradient(ellipse at 0% 0%, rgba(160,110,255,.12), transparent 55%), linear-gradient(180deg, #141019, #0e0d12); }
.bb-rivenrec[hidden] { display: none; }
.rr-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.rr-head h3 { margin: 0 0 3px; font-size: 16px; color: #efe6ff; }
.rr-head p { margin: 0; }
.rr-head code { background: rgba(196,162,255,.12); color: #e3d4ff; }
.rr-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 8px;
  background: linear-gradient(160deg, rgba(196,162,255,.28), rgba(110,70,200,.18)); border: 1px solid rgba(196,162,255,.4);
  box-shadow: 0 0 18px -6px rgba(180,140,255,.8); color: var(--rv); }
.rr-icon .i { width: 20px; height: 20px; }
.rr-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid rgba(196,162,255,.12); }
.rr-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #a993cf; padding-top: 7px; }
.rr-row.neg .rr-label { color: #d58a96; }
.rr-edit { display: grid; gap: 8px; }
.rr-edit input, .rr-note { width: 100%; height: 34px; padding: 0 10px; border-radius: 4px; border: 1px solid rgba(196,162,255,.25); background: rgba(0,0,0,.3);
  color: var(--text); font: inherit; font-size: 13.5px; font-family: var(--mono, ui-monospace, monospace); }
.rr-note { font-family: inherit; }
.rr-edit input:focus, .rr-note:focus { outline: none; border-color: var(--rv); box-shadow: 0 0 0 3px rgba(196,162,255,.15); }
.rr-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 26px; }
.rr-tier { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rr-gt { color: #8f7ab5; font-size: 18px; line-height: 1; padding: 0 8px; }
.rr-or { color: #6f5f8f; font-size: 12px; }
.rr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border-radius: 4px; font-size: 12.5px; color: #e9ddff;
  background: rgba(196,162,255,.1); border: 1px solid rgba(196,162,255,.3); }
.rr-chip b { font-size: 10.5px; letter-spacing: .04em; padding: 1px 5px; border-radius: 3px; background: rgba(196,162,255,.22); color: #fff; }
.rr-chip.neg { color: #ffd3da; background: rgba(239,107,120,.09); border-color: rgba(239,107,120,.32); }
.rr-chip.neg b { background: rgba(239,107,120,.25); }
.rr-unknown { font-size: 12px; color: #f0a5ae; margin-left: 4px; }
.rr-combos { display: grid; gap: 8px; }
.rr-combo { display: grid; grid-template-columns: 24px repeat(3, minmax(0, 1fr)) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.rr-combo select { height: 32px; min-width: 0; padding: 0 8px; border-radius: 4px; border: 1px solid rgba(196,162,255,.22); background: rgba(0,0,0,.3);
  color: var(--text); font: inherit; font-size: 12.5px; }
.rr-combo select[data-rr-kind="neg"] { border-color: rgba(239,107,120,.3); }
.rr-add { justify-self: start; }
.rr-combo-read { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rr-minus { color: #d58a96; font-weight: 700; padding: 0 2px; }
@media (max-width: 720px) { .rr-row { grid-template-columns: 1fr; gap: 6px; } .rr-label { padding-top: 0; }
  .rr-combo { grid-template-columns: 24px repeat(2, minmax(0, 1fr)); } }

/* combinations: a numbered list, then (after some room) the + / − orders */
.rr-num { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 5px; font-size: 12px; font-weight: 700;
  color: #efe6ff; background: rgba(196,162,255,.18); border: 1px solid rgba(196,162,255,.38); font-variant-numeric: tabular-nums; }
.rr-combo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rr-combo-read .rr-num { margin-right: 4px; }
.rr-row.rr-orders { margin-top: 14px; padding-top: 16px; border-top-color: rgba(196,162,255,.22); }
.rr-icon img { width: 26px; height: auto; image-rendering: auto; filter: drop-shadow(0 0 6px rgba(196,162,255,.7)); }

/* the planner's riven popup: a screenshot fills it in */
.rv-drop { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 12px; border-radius: 6px; cursor: default;
  border: 1px dashed rgba(196,162,255,.4); background: rgba(160,110,255,.06); transition: border-color .15s, background .15s; }
.rv-drop img { width: 30px; height: auto; filter: drop-shadow(0 0 6px rgba(196,162,255,.6)); }
.rv-drop strong { display: block; font-size: 13.5px; color: #efe6ff; }
.rv-drop small { color: var(--muted); font-size: 12px; }
.rv-drop.drag, .rv-drop:focus-visible { border-color: #c4a2ff; border-style: solid; background: rgba(160,110,255,.14); outline: none; }
.rv-scan-note { margin: -4px 0 12px; font-size: 12.5px; color: var(--muted); }
.rv-scan-note.ok { color: #d9ccf5; } .rv-scan-note.err { color: #f0a5ae; } .rv-scan-note .warn { color: #f0c674; }
.rv-scan-note.busy::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%;
  border: 2px solid rgba(196,162,255,.3); border-top-color: #c4a2ff; animation: spin .8s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.rv-keep { margin: 12px 0 2px; font-weight: 500; font-size: 13px; }
.rv-keep[hidden] { display: none; }
.rv-keep a { color: #c4a2ff; }
.rv-keep input:disabled ~ span:last-child { color: var(--muted); }

/* --- top bar search (all public things) + New build --------------------------------------------- */
.mainnav { flex: 0 0 auto; }
.gsearch { position: relative; flex: 0 1 380px; margin-left: auto; display: flex; align-items: center; gap: 8px; height: 34px;
  padding: 0 8px 0 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 4px; background: rgba(255,255,255,.02);
  transition: border-color .15s, background .15s, flex-basis .18s ease; }
.gsearch:hover { border-color: rgba(255,255,255,.2); }
.gsearch:focus-within { flex-basis: 460px; border-color: rgba(222,230,240,.5); background: #0d0e12; }
.gsearch > .i { width: 15px; height: 15px; color: var(--muted); }
.gsearch input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); font: inherit; font-size: 13.5px; outline: none; }
.gsearch input::placeholder { color: var(--dim); }
.gsearch input::-webkit-search-cancel-button { display: none; }
.gs-key { font: 500 11px/1 var(--mono); color: var(--dim); padding: 3px 6px; border: 1px solid var(--border-2); border-radius: 3px; }
.gsearch:focus-within .gs-key { display: none; }
.gs-list { position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #0d0e12;
  border: 1px solid var(--border-2); border-radius: 4px; box-shadow: 0 30px 60px -18px rgba(0,0,0,.95); max-height: min(520px, 70vh);
  overflow-y: auto; z-index: 60; }
.gs-group { padding: 10px 8px 4px; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.gs-group:first-child { padding-top: 4px; }
.gs-list .sg-pic.round { width: 32px; border-radius: 50%; }
.gs-list .sg-pic.round img { width: 100%; height: 100%; object-fit: cover; max-width: none; max-height: none; }
.gs-all { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 6px; }
.gs-empty { padding: 10px 8px; font-size: 13px; color: var(--muted); }
.gs-open { display: none; }
.tb-new { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 4px; font-size: 14px; font-weight: 500;
  color: #0a0b0d; background: #eceff3; border: 1px solid #eceff3; transition: background .15s; white-space: nowrap; }
.tb-new .i { width: 15px; height: 15px; stroke-width: 2.2; }
.tb-new:hover { background: #fff; border-color: #fff; color: #0a0b0d; }
body.public .tb-new { color: var(--text); background: transparent; border-color: rgba(255,255,255,.12); }
body.public .tb-new:hover { background: rgba(255,255,255,.05); color: var(--text); }
@media (max-width: 1180px) {
  .topbar-in { gap: 18px; }
  .gsearch { flex-basis: 260px; }
  .gsearch:focus-within { flex-basis: 340px; }
}
@media (max-width: 980px) {
  .tb-new { display: none; }
  .gs-open { display: inline-grid; margin-left: auto; }
  .gsearch { display: none; position: absolute; left: 12px; right: 12px; top: calc(var(--topbar) + 8px); height: 44px; margin: 0;
    background: #0d0e12; border-color: var(--border-2); box-shadow: 0 30px 60px -18px rgba(0,0,0,.95); }
  body.search-open .gsearch { display: flex; }
  .gsearch input { font-size: 16px; }   /* no zoom on iOS */
  .gs-key { display: none; }
  .gsearch:focus-within { flex-basis: auto; }
}
@media (prefers-reduced-motion: reduce) { .gsearch { transition: none; } }
.gs-list .sg-pic .i { width: 16px; height: 16px; color: var(--muted); }