:root {
  --bg: #09090b; --surface: #111114; --surface2: #17171c; --line: #232329; --line2: #2e2e36;
  --text: #f4f4f5; --muted: #a1a1aa; --dim: #71717a;
  --accent: #7c8cff; --accent2: #22d3ee; --ok: #34d399; --warn: #fbbf24; --bad: #f87171;
  --font: "Inter", "Segoe UI", system-ui, sans-serif; --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; letter-spacing: -.025em; font-weight: 600; }
p { margin: 0; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.narrow { max-width: 1040px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(9,9,11,.75); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: 32px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.brand.small { font-weight: 400; color: var(--dim); font-size: 13px; }
.links { display: flex; gap: 26px; margin-left: auto; font-size: 14px; color: var(--muted); }
.links a:hover { color: var(--text); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 42px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line2); background: var(--surface); font: 500 14px var(--font); cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.btn:hover { background: var(--surface2); border-color: #3b3b45; }
.btn.sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn.primary { background: var(--text); color: #09090b; border-color: var(--text); }
.btn.primary:hover { background: #e4e4e7; }
.btn svg { width: 16px; height: 16px; }

/* hero */
.hero { text-align: center; padding-top: 88px; position: relative; }
.hero::before { content: ""; position: absolute; left: 50%; top: 40px; width: min(720px, 100vw); height: 380px; transform: translateX(-50%); z-index: -1;
  background: radial-gradient(closest-side, rgba(124,140,255,.18), transparent); filter: blur(10px); }
.tag { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--surface); font-size: 13px; color: var(--muted); }
.tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(52,211,153,.18); }
.hero h1 { font-size: clamp(36px, 5.6vw, 64px); line-height: 1.05; max-width: 820px; margin: 22px auto 0; font-weight: 700; }
.lead { color: var(--muted); font-size: 18px; max-width: 600px; margin: 20px auto 0; }
.cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.meta { margin-top: 14px; font-size: 13px; color: var(--dim); }

/* app screenshot (HTML, so it stays crisp) */
.shot { margin: 64px auto 0; max-width: 1000px; text-align: left; border-radius: 14px; border: 1px solid var(--line2); background: #0c0c0f; overflow: hidden;
  box-shadow: 0 50px 100px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02), 0 -20px 80px -40px rgba(124,140,255,.35); }
.shot-bar { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--dim); }
.dots { display: flex; gap: 6px; } .dots i { width: 10px; height: 10px; border-radius: 50%; background: #27272a; }
.shot-body { display: grid; grid-template-columns: 190px 1fr; min-height: 380px; font-size: 13px; }
.shot-side { border-right: 1px solid var(--line); padding: 14px 10px; display: grid; align-content: start; gap: 2px; color: var(--muted); }
.shot-brand { display: flex; align-items: center; gap: 8px; padding: 4px 10px 14px; color: var(--text); font-weight: 600; }
.shot-brand img { width: 18px; }
.shot-side span { padding: 7px 10px; border-radius: 7px; }
.shot-side .on { background: var(--surface2); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.shot-main { padding: 20px; display: grid; gap: 14px; align-content: start; }
.shot-head { display: flex; justify-content: space-between; align-items: center; }
.shot-head b { display: block; font-size: 16px; }
.shot-head small, .card small { color: var(--dim); }
.chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.chip.ok { background: rgba(52,211,153,.12); color: var(--ok); }
.shot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; }
.card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 14px; }
.card.status { display: flex; gap: 12px; align-items: center; }
.card.status svg { width: 34px; flex: none; fill: rgba(52,211,153,.08); stroke: var(--ok); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.card.status b, .card.stat b { display: block; }
.card.stat b { font-size: 20px; font-weight: 600; margin-top: 2px; }
.list { padding: 6px 0; }
.list-head { display: flex; justify-content: space-between; padding: 8px 14px 10px; font-weight: 500; }
.li { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line); }
.li span { margin-left: auto; color: var(--dim); }
.li i, .find i { width: 7px; height: 7px; border-radius: 50%; }
i.ok { background: var(--ok); } i.warn { background: var(--warn); }

/* blocks */
.block { padding-top: 104px; }
.block h2 { font-size: clamp(28px, 3.4vw, 40px); text-align: center; }
.sub { color: var(--muted); text-align: center; max-width: 560px; margin: 12px auto 0; font-size: 16px; }

/* tabs */
.tabs { display: flex; justify-content: center; gap: 6px; margin: 32px auto 0; padding: 5px; width: fit-content; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tab { height: 36px; padding: 0 18px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 500 14px var(--font); cursor: pointer; }
.tab.on { background: var(--surface2); color: var(--text); box-shadow: 0 0 0 1px var(--line2); }
.panes { margin-top: 40px; }
.pane { display: none; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; animation: fade .3s ease; }
.pane.on { display: grid; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pane h3 { font-size: 26px; line-height: 1.2; }
.pane p { color: var(--muted); margin-top: 14px; font-size: 16px; }
.demo { padding: 18px; }
.demo-head { display: flex; justify-content: space-between; align-items: center; font-weight: 500; margin-bottom: 14px; }
.find { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 8px; background: var(--surface2); border-left: 3px solid var(--warn); margin-top: 8px; }
.find.bad { border-left-color: var(--bad); }
.find div { flex: 1; min-width: 0; display: grid; }
.find code { font: 12px var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.find span { font-size: 12px; padding: 4px 10px; border-radius: 6px; background: rgba(248,113,113,.12); color: #fca5a5; }
.find.warn span { background: rgba(251,191,36,.12); color: #fcd34d; }
kbd { font: 11px var(--mono); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line2); background: var(--surface2); color: var(--muted); }
.verdict { font-size: 15px; }
.nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.nums div { padding: 10px; border-radius: 8px; background: var(--surface2); }
.nums small { display: block; font-size: 11px; }
.nums b { font: 500 16px var(--mono); }
.nums .w { color: var(--warn); }
.spark { width: 100%; height: 60px; margin-top: 12px; }
.spark path { fill: none; stroke: var(--accent2); stroke-width: 2; }
.peers { width: 100%; border-collapse: collapse; }
.peers td { padding: 10px 4px; border-top: 1px solid var(--line); }
.peers td:last-child { text-align: right; font-family: var(--mono); font-size: 13px; }
.peers td:nth-child(2) { color: var(--dim); }
.peers em { font: 500 11px var(--font); font-style: normal; margin-left: 6px; padding: 2px 6px; border-radius: 4px; background: rgba(124,140,255,.15); color: var(--accent); }

.whatsnew { margin-top: 88px; display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding-top: 28px; border-top: 1px solid var(--line); }
.whatsnew h3 { font-size: 15px; color: var(--muted); font-weight: 500; }
.whatsnew ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.whatsnew li { padding-left: 18px; position: relative; }
.whatsnew li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }

/* plans */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.plan { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 24px; display: grid; gap: 20px; align-content: start; }
.plan.pro { border-color: rgba(124,140,255,.45); background: linear-gradient(180deg, rgba(124,140,255,.07), var(--surface) 40%); }
.plan-top b { display: block; font-size: 15px; color: var(--muted); font-weight: 500; }
.price { font-size: 36px; font-weight: 700; letter-spacing: -.03em; margin-right: 8px; }
.plan-top small { color: var(--dim); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--muted); }
.ticks li { padding-left: 24px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 12px; height: 7px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }

/* discord */
.band { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; padding: 40px; border-radius: 16px; border: 1px solid var(--line); background: #101018; border-left: 3px solid #5865f2; }
.band h2 { text-align: left; font-size: 30px; }
.band p { color: var(--muted); margin-top: 12px; }
.invite { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 10px; background: #1e1f22; border: 1px solid #2b2d31; }
.invite-icon { width: 48px; height: 48px; border-radius: 14px; overflow: hidden; background: #2b2d31; flex: none; display: grid; place-items: center; }
.invite-icon img { width: 100%; height: 100%; object-fit: cover; }
.invite-who { display: grid; }
.invite-who > span { font-size: 13px; color: #b5bac1; }
.invite-who i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #23a55a; margin-right: 6px; }
.btn.join { margin-left: auto; height: 36px; background: #248046; border-color: #248046; border-radius: 6px; color: #fff; }
.btn.join:hover { background: #1a6334; }

/* faq */
.faq { margin-top: 36px; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font-weight: 500; font-size: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-top: 6px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(45deg); transition: transform .2s; }
details[open] summary::after { transform: rotate(-135deg); }
details p { color: var(--muted); padding-bottom: 20px; margin-top: -6px; }

.foot { display: flex; justify-content: space-between; align-items: center; margin-top: 120px; padding-top: 28px; padding-bottom: 48px; border-top: 1px solid var(--line); }
.foot nav { display: flex; gap: 22px; font-size: 13px; color: var(--dim); }
.foot nav a:hover { color: var(--text); }

/* owner-only bars */
.ownerbar { position: fixed; bottom: 20px; left: 20px; z-index: 40; display: flex; gap: 10px; align-items: center; padding: 8px 14px; border-radius: 10px; background: #1c0b0e; border: 1px solid #5c2027; font-size: 13px; }
.ownerbar b { color: #fda4af; } .ownerbar span { color: #d4b4b8; } .ownerbar a { text-decoration: underline; text-underline-offset: 3px; }
body.editing [data-k] { outline: 1px dashed rgba(124,140,255,.5); outline-offset: 4px; cursor: text; }
body.editing [data-k]:focus { outline: 2px solid var(--accent); }
.editbar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--line2); box-shadow: 0 16px 40px rgba(0,0,0,.5); font-size: 14px; }
.editbar span { color: var(--muted); }
.editbar button { height: 32px; padding: 0 14px; border-radius: 8px; border: 0; background: var(--text); color: #09090b; font: 600 13px var(--font); cursor: pointer; }
.editbar button.ghost { background: var(--line2); color: var(--text); }

@media (max-width: 860px) {
  .links { display: none; }
  .shot-body { grid-template-columns: 1fr; } .shot-side { display: none; }
  .shot-grid { grid-template-columns: 1fr 1fr; } .card.status { grid-column: 1 / -1; }
  .pane.on, .band, .plans, .whatsnew { grid-template-columns: 1fr; }
  .whatsnew ul { grid-template-columns: 1fr; }
  .nums { grid-template-columns: 1fr 1fr; }
  .foot { flex-direction: column; gap: 16px; }
  .ownerbar span, .editbar span { display: none; }
}

/* Plans with Monthly / Lifetime */
.billing { display: inline-flex; gap: 4px; padding: 4px; margin: 28px auto 0; border: 1px solid var(--line2); border-radius: 999px; background: var(--surface); position: relative; left: 50%; transform: translateX(-50%); }
.billing button { border: 0; background: transparent; color: var(--muted); font: 600 14px var(--font); padding: 8px 18px; border-radius: 999px; cursor: pointer; }
.billing button small { font-weight: 400; color: var(--dim); }
.billing button.on { background: var(--text); color: #09090b; }
.billing button.on small { color: #3f3f46; }
.plans-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 24px; }
.plans-foot { margin-top: 18px; font-size: 14px; }
.plans-foot a { color: var(--accent); }
@media (max-width: 1000px) { .plans-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .plans-4 { grid-template-columns: 1fr; } }

/* Ask Chroma helper */
.ask{position:fixed;right:16px;bottom:16px;z-index:50}
.ask-fab{width:56px;height:56px;border-radius:50%;border:0;font-size:24px;cursor:pointer;background:linear-gradient(135deg,#7c5cff,#3987e5);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.ask-panel{position:absolute;right:0;bottom:68px;width:min(360px,calc(100vw - 32px));height:min(480px,70vh);display:flex;flex-direction:column;background:#111114;border:1px solid #2e2e36;border-radius:16px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.ask-panel[hidden]{display:none}
.ask-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #2e2e36}
.ask-x{background:none;border:0;color:inherit;font-size:22px;cursor:pointer}
.ask-log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.ask-msg{max-width:85%;padding:8px 12px;border-radius:12px;font-size:14px;line-height:1.45;white-space:pre-wrap}
.ask-msg.user{align-self:flex-end;background:#3b3bd6;color:#fff}
.ask-msg.assistant{align-self:flex-start;background:#1d1d23}
.ask-form{display:flex;gap:8px;padding:10px;border-top:1px solid #2e2e36}
.ask-form input{flex:1;min-width:0;padding:10px;border-radius:10px;border:1px solid #2e2e36;background:#09090b;color:inherit}

/* ============ Chroma Guard AC section */
.ac { text-align: center; }
.ac-eyebrow { display: inline-block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(124,140,255,.35); border-radius: 999px; padding: 5px 12px; margin-bottom: 14px; }
.ac-grad { background: linear-gradient(90deg, #22d3ee, #3987e5 40%, #9085e9 70%, #e87ba4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ac-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.ac-badges span { font-size: 13px; color: var(--muted); border: 1px solid var(--line2); background: var(--surface); border-radius: 999px; padding: 6px 12px; }
.ac-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 36px; text-align: left; }
.ac-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 18px 20px; transition: border-color .2s, transform .2s; }
.ac-card:hover { border-color: rgba(124,140,255,.45); transform: translateY(-2px); }
.ac-card b { display: block; margin-bottom: 6px; }
.ac-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.ac-plans { max-width: 720px; margin-left: auto; margin-right: auto; text-align: left; }
.ac-dl { display: grid; grid-template-columns: 1fr minmax(0, 260px) auto; gap: 12px; align-items: center; max-width: 820px; margin: 36px auto 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; }
.ac-dl b { display: block; }
.ac-dl span { color: var(--muted); font-size: 14px; }
.ac-dl input { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line2); background: #09090b; color: var(--text); font: 14px Consolas, monospace; }
@media (max-width: 860px) {
  .ac-grid { grid-template-columns: 1fr 1fr; }
  .ac-dl { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .ac-grid, .ac-plans { grid-template-columns: 1fr; } }

/* ============ Multi-page layout */
.links a.on { color: var(--text); }
.links a.on::after { content: ""; display: block; height: 2px; margin-top: 4px; border-radius: 2px; background: linear-gradient(90deg, #22d3ee, #9085e9); }
.page-hero { text-align: center; padding: 88px 0 8px; }
.page-hero .eyebrow { display: inline-block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(124,140,255,.35); border-radius: 999px; padding: 5px 12px; margin-bottom: 16px; }
.page-hero h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: -.035em; margin: 0 0 14px; }
.page-hero .lead { max-width: 640px; margin: 0 auto; color: var(--muted); font-size: 18px; }
.block.flush { padding-top: 32px; }
.tiles3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile3 { display: grid; gap: 8px; align-content: start; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
.tile3:hover { border-color: rgba(124,140,255,.45); transform: translateY(-3px); }
.tile-ic { font-size: 24px; }
.tile3 b { font-size: 17px; }
.tile3 p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.tile3 em { font-style: normal; color: var(--accent); font-size: 14px; margin-top: 4px; }
.faq-more { margin-top: 12px; }
.site-foot { border-top: 1px solid var(--line); margin-top: 96px; padding: 48px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.foot-grid b { display: block; font-size: 13px; color: var(--text); margin-bottom: 12px; }
.foot-grid a { display: block; color: var(--muted); text-decoration: none; font-size: 14px; padding: 4px 0; }
.foot-grid a:hover { color: var(--text); }
.foot-brand p { color: var(--dim); font-size: 14px; max-width: 280px; margin: 12px 0 0; }
.foot-base { display: flex; justify-content: space-between; gap: 16px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; }
@media (max-width: 860px) {
  .tiles3 { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .links { overflow-x: auto; scrollbar-width: none; }
  .page-hero { padding-top: 56px; }
}
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } .foot-base { flex-direction: column; } }

/* Live helper bits in the chat */
.ask-tools { display: inline-flex; align-items: center; gap: 6px; }
.ask-human { border: 1px solid rgba(124,140,255,.45); background: rgba(124,140,255,.12); color: var(--text); font: 600 12px var(--font, inherit); border-radius: 999px; padding: 5px 10px; cursor: pointer; }
.ask-human:hover { background: rgba(124,140,255,.22); }
.ask-msg small { display: block; font-size: 11px; color: #8b8bff; margin-bottom: 2px; }
.ask-msg.system { align-self: center; max-width: 92%; background: transparent; border: 1px dashed #2e2e36; color: #a1a1aa; font-size: 13px; text-align: center; }
.ask-who { display: grid; gap: 8px; padding: 12px; border-top: 1px solid #2e2e36; }
.ask-who[hidden] { display: none; }
.ask-who span { color: #a1a1aa; font-size: 13px; }
.ask-who input { padding: 10px; border-radius: 10px; border: 1px solid #2e2e36; background: #09090b; color: inherit; }
.ask-row { display: flex; gap: 8px; }
.ask-form[hidden] { display: none; }

/* =====================================================================================================
   CHROMA THEME v2: less "template", more Chroma. Terminal labels, a faint grid, HUD corner brackets,
   the cyan to purple to pink brand gradient, tighter corners. Layout and behaviour are unchanged.
   ===================================================================================================== */
:root {
  --bg: #060709; --surface: #0c0e12; --surface2: #12151b; --line: #1b1f27; --line2: #262b36;
  --text: #eef1f6; --muted: #9aa3b2; --dim: #636b7a;
  --accent: #6ee7ff; --accent2: #a78bfa; --hot: #f472b6;
  --grad: linear-gradient(90deg, #22d3ee, #3987e5 35%, #9085e9 65%, #e87ba4);
  --font: "Manrope", "Segoe UI", system-ui, sans-serif;
  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}
body {
  background:
    radial-gradient(1100px 520px at 50% -140px, rgba(57,135,229,.16), transparent 70%),
    radial-gradient(700px 400px at 90% 10%, rgba(232,123,164,.07), transparent 70%),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--bg);
  background-attachment: fixed;
}
h1, h2, h3, .price, .brand { font-family: var(--display); }
h1 { letter-spacing: -.04em; }
::selection { background: rgba(110,231,255,.28); }

/* nav: mono links, gradient underline on the current page */
.nav { background: rgba(6,7,9,.72); border-bottom-color: var(--line); }
.links { font: 500 12.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; gap: 22px; }
.links a.on::after { background: var(--grad); height: 2px; }

/* buttons: hard-edged, gradient primary with a soft glow */
.btn { border-radius: 6px; font-family: var(--font); font-weight: 600; }
.btn.primary { background: var(--grad); color: #05060a; border: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 8px 28px -10px rgba(57,135,229,.7); }
.btn.primary:hover { background: var(--grad); filter: brightness(1.12); transform: translateY(-1px); }
.btn:not(.primary) { background: rgba(255,255,255,.02); }
.btn:not(.primary):hover { border-color: rgba(110,231,255,.5); }

/* terminal-style labels: // LIKE THIS */
.tag, .page-hero .eyebrow, .ac-eyebrow { font: 500 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; border-radius: 4px; background: rgba(110,231,255,.06); border: 1px solid rgba(110,231,255,.28); color: var(--accent); }
.page-hero .eyebrow::before, .ac-eyebrow::before { content: "// "; opacity: .6; }
.hero h1, .page-hero h1 { background: linear-gradient(180deg, #fff 30%, #b9c3d6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ac-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* HUD cards: sharp corners with glowing corner brackets that grow on hover */
.plan, .ac-card, .tile3, .card, .band, .ac-dl, .faq details, .whatsnew, .shot { border-radius: 8px; border-color: var(--line2); background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)), var(--surface); }
.plan, .ac-card, .tile3 { position: relative; }
.plan::before, .ac-card::before, .tile3::before, .plan::after, .ac-card::after, .tile3::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; transition: border-color .2s, width .2s, height .2s;
  border-color: rgba(110,231,255,.45); border-style: solid; }
.plan::before, .ac-card::before, .tile3::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-top-left-radius: 8px; }
.plan::after, .ac-card::after, .tile3::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-bottom-right-radius: 8px; }
.plan:hover::before, .ac-card:hover::before, .tile3:hover::before, .plan:hover::after, .ac-card:hover::after, .tile3:hover::after { width: 28px; height: 28px; border-color: var(--accent); }
.plan.pro { border-color: rgba(167,139,250,.45); background: linear-gradient(180deg, rgba(144,133,233,.10), rgba(144,133,233,0) 45%), var(--surface); }
.plan.pro::before, .plan.pro::after { border-color: var(--hot); }
.ac-card:hover, .tile3:hover { border-color: rgba(110,231,255,.35); }
.tile3 em, .plans-foot a, .ac-card code { color: var(--accent); }
.ac-badges span { font: 500 12px var(--mono); border-radius: 4px; letter-spacing: .02em; }
.billing { border-radius: 6px; }
.billing button { border-radius: 4px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; }
.billing button.on { background: var(--grad); color: #05060a; }
.faq summary { font-family: var(--display); font-weight: 600; }
.site-foot { border-top-color: var(--line); background: linear-gradient(180deg, transparent, rgba(57,135,229,.04)); }
.foot-grid b { font: 600 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

/* =====================================================================================================
   Chat launcher + panel v2: a real labelled button, and a start screen with clear choices.
   ===================================================================================================== */
.ask { right: 20px; bottom: 20px; }
.ask-fab { width: auto; height: 48px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font: 700 14px var(--font); color: #05060a; background: var(--grad); box-shadow: 0 10px 30px -8px rgba(57,135,229,.75), 0 0 0 1px rgba(255,255,255,.1) inset; transition: filter .15s, transform .15s; }
.ask-fab:hover { filter: brightness(1.1); transform: translateY(-1px); }
.ask-fab .dot { width: 9px; height: 9px; border-radius: 50%; background: #05060a; animation: askPulse 2s infinite; }
@keyframes askPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(5,6,10,.45); } 50% { box-shadow: 0 0 0 6px rgba(5,6,10,0); } }
.ask-panel { bottom: 62px; width: min(380px, calc(100vw - 32px)); height: min(560px, 74vh); border-radius: 12px; background: #0a0c10; border: 1px solid var(--line2); box-shadow: 0 24px 60px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(110,231,255,.06); }
.ask-head { padding: 14px 16px; background: linear-gradient(180deg, rgba(57,135,229,.10), transparent); }
.ask-head b { font: 600 15px var(--display); display: flex; align-items: center; gap: 8px; }
.ask-head b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.2); }
.ask-head small { display: block; font: 500 11px var(--mono); color: var(--dim); margin-top: 2px; letter-spacing: .04em; }
.ask-human { border-radius: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .03em; }
.ask-msg { border-radius: 10px; }
.ask-msg.user { background: var(--grad); color: #05060a; font-weight: 500; }
.ask-msg.assistant { background: #12151b; border: 1px solid var(--line); }
.ask-start { display: grid; gap: 10px; }
.ask-choice { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px; border-radius: 10px; border: 1px solid var(--line2); background: #0f1217; color: var(--text); cursor: pointer; font: inherit; transition: border-color .15s, transform .15s; }
.ask-choice:hover { border-color: rgba(110,231,255,.55); transform: translateY(-1px); }
.ask-choice .ic { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; font-size: 18px; background: rgba(110,231,255,.08); border: 1px solid rgba(110,231,255,.25); flex: none; }
.ask-choice.person .ic { background: rgba(244,114,182,.08); border-color: rgba(244,114,182,.3); }
.ask-choice b { display: block; font: 600 14px var(--display); }
.ask-choice small { color: var(--dim); font-size: 12.5px; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-chips button { border: 1px solid var(--line2); background: transparent; color: var(--muted); border-radius: 999px; padding: 6px 11px; font: 500 12px var(--font); cursor: pointer; }
.ask-chips button:hover { color: var(--text); border-color: rgba(110,231,255,.5); }
.ask-form { border-top: 1px solid var(--line); }
.ask-form input { border-radius: 8px; }
/* "Live Help Ticket has been Closed" popup inside the chat */
.ask-toast { position: absolute; left: 12px; right: 12px; top: 64px; z-index: 3; padding: 14px 16px; border-radius: 10px; text-align: center;
  background: #151821; border: 1px solid rgba(244,114,182,.45); box-shadow: 0 16px 40px -10px rgba(0,0,0,.7); animation: toastIn .25s ease-out; }
.ask-toast b { display: block; font: 600 15px var(--display); }
.ask-toast span { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.ask-toast button { margin-top: 10px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-6px); } }
.ask-panel { position: absolute; }
@media (max-width: 520px) { .ask-fab .lbl { display: none; } .ask-fab { padding: 0 15px; } }

/* ============ Header: links sit next to the logo, actions on the right (no big empty middle) */
.wrap { max-width: 1320px; }
.nav-in { gap: 36px; height: 64px; }
.links { margin-left: 0; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.btn.ghost { background: transparent; }

/* ============ Minecraft Plugins hub (SpigotMC-style resource list) */
.market { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.market-side { display: grid; gap: 14px; position: sticky; top: 84px; }
.side-box { border: 1px solid var(--line2); border-radius: 8px; background: var(--surface); padding: 16px 18px; }
.side-box > b { display: block; font: 600 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.side-box p { color: var(--muted); font-size: 14px; margin: 0 0 12px; line-height: 1.6; }
.pcats { display: grid; gap: 2px; }
.pcats button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: 500 14px var(--font); cursor: pointer; text-align: left; }
.pcats button em { font: 500 12px var(--mono); font-style: normal; color: var(--dim); background: rgba(255,255,255,.04); border-radius: 4px; padding: 1px 7px; }
.pcats button:hover { color: var(--text); background: rgba(255,255,255,.03); }
.pcats button.on { color: var(--text); background: rgba(110,231,255,.08); box-shadow: inset 2px 0 0 var(--accent); }
.market-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.market-bar input { flex: 1; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line2); background: var(--surface); color: var(--text); font: 14px var(--font); }
.market-bar input:focus { outline: none; border-color: rgba(110,231,255,.5); }
.pl-list { display: grid; gap: 10px; }
.pl-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px; border: 1px solid var(--line2); border-radius: 8px; background: var(--surface); transition: border-color .15s, transform .15s, background .15s; }
.pl-row:hover { border-color: rgba(110,231,255,.45); background: var(--surface2); transform: translateY(-1px); }
.pl-icon { width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; font-size: 30px; border: 1px solid var(--line2); }
.pl-icon.ac { background: linear-gradient(135deg, rgba(34,211,238,.25), rgba(144,133,233,.25)); border-color: rgba(110,231,255,.35); }
.pl-icon.bridge { background: linear-gradient(135deg, rgba(52,211,153,.22), rgba(34,197,94,.10)); border-color: rgba(52,211,153,.35); }
.pl-icon.big { width: 92px; height: 92px; font-size: 44px; border-radius: 16px; }
.pl-main { display: grid; gap: 5px; min-width: 0; }
.pl-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-title b { font: 600 18px var(--display); }
.pl-title small { font: 500 12px var(--mono); color: var(--dim); }
.pl-tag { color: var(--muted); font-size: 14px; }
.pl-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--dim); }
.pl-plats { display: inline-flex; gap: 5px; }
.pl-plats span { font: 500 11px var(--mono); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line2); color: var(--muted); }
.pl-side { display: grid; justify-items: end; gap: 8px; }
.pl-view { font: 600 13px var(--font); color: var(--accent); }
.pl-badge { display: inline-block; font: 600 11px var(--mono); letter-spacing: .04em; padding: 4px 9px; border-radius: 4px; white-space: nowrap; }
.pl-badge.prem { color: #05060a; background: var(--grad); }
.pl-badge.free { color: #34d399; border: 1px solid rgba(52,211,153,.45); background: rgba(52,211,153,.08); }
.pl-badge.soon { color: #fbbf24; border: 1px solid rgba(251,191,36,.4); background: rgba(251,191,36,.08); }
.pl-badge.feat { color: var(--accent); border: 1px solid rgba(110,231,255,.4); background: rgba(110,231,255,.07); }
.pl-empty { padding: 24px; text-align: center; }
.pl-crumbs { display: flex; gap: 10px; align-items: center; padding-top: 28px; font: 500 12.5px var(--mono); color: var(--dim); }
.pl-crumbs a { color: var(--muted); }
.pl-crumbs a:hover { color: var(--accent); }
.pl-crumbs b { color: var(--text); font-weight: 500; }
.pl-crumbs + .page-hero { padding-top: 40px; }
.pl-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; padding-top: 28px; padding-bottom: 8px; }
.pl-hero h1 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -.035em; }
.pl-hero .lead { color: var(--muted); margin: 8px 0 10px; }
.pl-hero-cta { display: grid; gap: 10px; justify-items: end; }
.pl-body { display: grid; gap: 14px; }
.pl-body .side-box p { font-size: 15px; }
.side-box.info dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: 14px; }
.side-box.info dt { color: var(--dim); }
.side-box.info dd { margin: 0; text-align: right; }
.btn[disabled] { opacity: .55; cursor: not-allowed; filter: grayscale(.3); }
@media (max-width: 900px) {
  .market { grid-template-columns: 1fr; }
  .market-side { position: static; }
  .pl-row { grid-template-columns: 48px minmax(0, 1fr); }
  .pl-icon { width: 48px; height: 48px; font-size: 22px; }
  .pl-side { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; justify-content: start; }
  .pl-hero { grid-template-columns: 1fr; }
  .pl-hero-cta { justify-items: start; }
  .nav-right .ghost { display: none; }
}

/* ============ Plugin safety report + owner panel */
.pl-badge.safe { color: #34d399; border: 1px solid rgba(52,211,153,.5); background: rgba(52,211,153,.10); }
.pl-icon.tool { background: linear-gradient(135deg, rgba(144,133,233,.22), rgba(57,135,229,.12)); border-color: rgba(144,133,233,.35); }
.safe-panel { border-radius: 8px; padding: 18px 20px; border: 1px solid; }
.safe-panel.ok { border-color: rgba(52,211,153,.45); background: linear-gradient(180deg, rgba(52,211,153,.08), rgba(52,211,153,.02)); }
.safe-panel.warn { border-color: rgba(251,191,36,.45); background: linear-gradient(180deg, rgba(251,191,36,.08), rgba(251,191,36,.02)); }
.safe-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.safe-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 20px var(--display); color: #05060a; background: #34d399; flex: none; }
.safe-panel.warn .safe-ic { background: #fbbf24; }
.safe-head b { display: block; font: 600 18px var(--display); }
.safe-head span { color: var(--muted); font-size: 13px; }
.safe-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.safe-list li { display: grid; grid-template-columns: 120px 1fr; gap: 10px; font-size: 14px; color: var(--muted); padding-top: 8px; border-top: 1px solid rgba(255,255,255,.05); }
.safe-list li b { color: var(--text); font-weight: 600; }
.safe-list li.ok b::before { content: "✓ "; color: #34d399; }
.safe-list li.warn b::before, .safe-list li.bad b::before { content: "! "; color: #fbbf24; }
.safe-list li.mono { font: 12px var(--mono); word-break: break-all; }
.safe-list a { color: var(--accent); }
.op-list { display: grid; gap: 8px; margin-bottom: 12px; }
.op-item { display: flex; gap: 12px; align-items: center; text-align: left; padding: 10px; border: 1px solid var(--line2); border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; font: inherit; }
.op-item:hover { border-color: rgba(110,231,255,.45); }
.op-item .pl-icon { width: 40px; height: 40px; font-size: 18px; }
.op-item small { display: block; color: var(--dim); font-size: 12px; }
.op-form { display: grid; gap: 10px; }
.op-form label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.op-form label.chk { display: flex; align-items: center; gap: 8px; }
.op-form input:not([type=checkbox]), .op-form textarea, .op-form select { padding: 9px 10px; border-radius: 6px; border: 1px solid var(--line2); background: #09090b; color: var(--text); font: 14px var(--font); }
.op-upload { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.op-scan { font-size: 13px; color: var(--muted); }
.btn.danger-lite { color: #f87171; border-color: rgba(248,113,113,.35); }
@media (max-width: 600px) { .safe-list li { grid-template-columns: 1fr; } }

/* Full-width header: logo hard left, buttons hard right (like YouTube); wider content on big screens */
.nav .nav-in { max-width: none; padding: 0 24px; }
.wrap { max-width: 1560px; }
.ac-proxy-title { margin: 56px 0 6px; font-size: clamp(22px, 2.4vw, 30px); text-align: center; }
.plans.plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .plans.plans-3 { grid-template-columns: 1fr; } }

/* Nav: clean readable links (no mono caps), soft pill hover + gradient underline on the current page */
.links { font: 500 15px 'Manrope', system-ui, sans-serif; letter-spacing: 0; text-transform: none; gap: 6px; }
.links a { padding: 8px 14px; border-radius: 999px; color: #a1a1aa; transition: color .15s, background .15s; position: relative; }
.links a:hover { color: #fafafa; background: rgba(255,255,255,.06); }
.links a.on { color: #fafafa; }
.links a.on::after { position: absolute; left: 14px; right: 14px; bottom: 2px; margin: 0; }
.brand { font: 700 17px 'Space Grotesk', system-ui, sans-serif; letter-spacing: -.01em; }

.chat-link { display:inline-block; padding:1px 9px; margin:2px 0; border-radius:999px; background:rgba(34,211,238,.12); color:#67e8f9; font-weight:600; text-decoration:none; white-space:nowrap; }
.chat-link:hover { background:rgba(34,211,238,.22); }

/* Live chat: the developer's replies stand out */
.ask-msg.dev > div { border: 1px solid rgba(232,121,166,.45); background: linear-gradient(135deg, rgba(34,211,238,.10), rgba(232,121,166,.12)); }
.dev-badge { display:inline-block; padding:1px 8px; margin-right:4px; border-radius:999px; background:linear-gradient(90deg,#22d3ee,#e879a6); color:#0a0b0e; font-weight:700; font-size:11px; letter-spacing:.02em; }

.ask-new { background:none; border:1px solid rgba(255,255,255,.14); color:#d4d4d8; border-radius:999px; padding:3px 10px; font:500 12px inherit; cursor:pointer; margin-right:6px; }
.ask-new:hover { color:#fff; border-color:rgba(255,255,255,.3); }

/* ============ accounts, cart, support page */
.nav-acct { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; color:#d4d4d8; font:500 14px 'Manrope', system-ui, sans-serif; position:relative; }
.nav-acct:hover { background:rgba(255,255,255,.06); color:#fff; }
.nav-acct em { font-style:normal; font-size:11px; font-weight:700; min-width:18px; height:18px; border-radius:9px; display:inline-grid; place-items:center; background:linear-gradient(90deg,#22d3ee,#e879a6); color:#0a0b0e; padding:0 5px; }
.cart-add { margin-top:8px; width:100%; }
.acct { padding:56px 0 80px; }
.acct-signin { display:grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap:28px; align-items:start; }
@media (max-width: 860px) { .acct-signin { grid-template-columns:1fr; } }
.acct-card, .acct-safe { background:var(--card, #111114); border:1px solid var(--line, #24242b); border-radius:18px; padding:28px; }
.acct-card h1 { margin:8px 0 6px; font-size:clamp(26px,3vw,34px); }
.acct-safe b { display:block; margin-bottom:10px; }
.acct-safe ul { margin:0; padding-left:18px; color:#a1a1aa; line-height:1.6; } .acct-safe li { margin:8px 0; } .acct-safe li b { display:inline; color:#e4e4e7; margin:0; }
.acct-form { display:grid; gap:12px; margin-top:18px; max-width:440px; }
.acct-form label { display:grid; gap:6px; font-size:13px; color:#a1a1aa; }
.acct-form input, .acct-form select, .acct-form textarea { background:#0b0c0f; color:#f4f4f5; border:1px solid #2a2a33; border-radius:10px; padding:11px 13px; font:15px inherit; }
.code-in { font:700 24px/1 'JetBrains Mono', monospace !important; letter-spacing:8px; text-align:center; }
.acct-msg { min-height:20px; font-size:14px; color:#a1a1aa; } .acct-msg.err { color:#f87171; }
.acct-top { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-end; margin-bottom:22px; }
.acct-top h1 { margin:6px 0 2px; font-size:clamp(22px,2.6vw,30px); word-break:break-all; }
.acct-top-btns { display:flex; gap:8px; flex-wrap:wrap; }
.acct-tabs { display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--line, #24242b); margin-bottom:18px; }
.acct-tabs button { background:none; border:0; color:#a1a1aa; font:500 15px 'Manrope', system-ui; padding:10px 14px; border-bottom:2px solid transparent; cursor:pointer; }
.acct-tabs button.on { color:#fff; border-image: linear-gradient(90deg,#22d3ee,#e879a6) 1; border-bottom:2px solid; }
.acct-tabs em { font-style:normal; font-size:12px; color:#67e8f9; margin-left:4px; }
.acct-row { display:flex; justify-content:space-between; gap:14px; align-items:center; padding:14px 16px; border:1px solid var(--line, #24242b); border-radius:14px; margin-bottom:10px; background:rgba(255,255,255,.015); color:inherit; text-decoration:none; width:100%; text-align:left; font:inherit; }
.acct-row.link { cursor:pointer; } .acct-row.link:hover, .acct-row.on { border-color:#3a3a46; background:rgba(255,255,255,.04); }
.acct-row-r { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.pill { font-size:12px; padding:3px 9px; border-radius:999px; background:#26262c; color:#a1a1aa; white-space:nowrap; }
.pill.ok { background:rgba(74,222,128,.12); color:#4ade80; } .pill.off { background:#26262c; color:#a1a1aa; } .pill.gift { background:rgba(232,121,166,.14); color:#f9a8d4; }
.support-page { display:grid; grid-template-columns: 300px minmax(0,1fr); gap:20px; padding:40px 0 70px; min-height: calc(100vh - 140px); }
@media (max-width: 860px) { .support-page { grid-template-columns:1fr; } }
.sup-side { background:var(--card, #111114); border:1px solid var(--line, #24242b); border-radius:18px; padding:16px; align-self:start; }
.sup-side-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.sup-list .acct-row { padding:10px 12px; }
.sup-hint { margin-top:12px; padding-top:12px; border-top:1px solid var(--line, #24242b); }
.sup-main { min-width:0; }
.sup-dock .ask-panel { position:static !important; width:100% !important; max-width:none !important; height:calc(100vh - 200px); min-height:520px; max-height:none !important; display:flex; flex-direction:column; border-radius:18px; box-shadow:none; }
.sup-dock .ask-log { flex:1; max-height:none !important; }
.ask.docked { position:static; }
.sup-view { background:var(--card, #111114); border:1px solid var(--line, #24242b); border-radius:18px; padding:16px; height:calc(100vh - 200px); min-height:520px; display:flex; flex-direction:column; }
.sup-view-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.sup-view-log { flex:1; overflow:auto; max-height:none !important; }

/* chat: role tag on top, name below */
.ask-msg small.who { display:flex; flex-direction:column; align-items:flex-start; gap:3px; margin-bottom:6px; }
.staff-badge { display:inline-block; padding:1px 8px; border-radius:999px; background:rgba(34,211,238,.14); color:#67e8f9; font-weight:700; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; }
.ask-msg .dev-badge { font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; margin:0; }
.who-name { color:#fafafa; font:700 14px 'Manrope', system-ui, sans-serif; letter-spacing:0; }

/* sign in / sign up */
.acct-switch { display:inline-flex; gap:4px; padding:4px; border:1px solid #2a2a33; border-radius:999px; margin:10px 0 2px; }
.acct-switch button { background:none; border:0; color:#a1a1aa; padding:7px 16px; border-radius:999px; font:600 14px 'Manrope', system-ui; cursor:pointer; }
.acct-switch button.on { background:linear-gradient(90deg,#22d3ee,#e879a6); color:#0a0b0e; }
.pw { position:relative; display:block; } .pw input { width:100%; padding-right:44px; }
.pw-eye { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:0; cursor:pointer; opacity:.6; font-size:16px; } .pw-eye:hover { opacity:1; }
.linkish { background:none; border:0; color:#67e8f9; font:500 13.5px inherit; cursor:pointer; padding:0; text-align:left; } .linkish:hover { text-decoration:underline; }
.pw-meter { height:5px; border-radius:3px; background:#1f1f25; overflow:hidden; } .pw-meter i { display:block; height:100%; width:0; transition:width .2s; background:#f87171; }
.pw-meter i[data-s="2"] { background:#fbbf24; } .pw-meter i[data-s="3"], .pw-meter i[data-s="4"] { background:#4ade80; }
.acct-setpw { display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; padding:16px 18px; border:1px dashed #3a3a46; border-radius:14px; margin-bottom:18px; }
.acct-inline { display:flex; gap:8px; } .acct-inline input { background:#0b0c0f; color:#f4f4f5; border:1px solid #2a2a33; border-radius:10px; padding:9px 12px; font:14px inherit; }
/* developer */
.dev-badge.big { font-size:13px; padding:4px 12px; }
.dev-hero { position:relative; padding:22px; margin-bottom:22px; border-radius:20px; border:1px solid transparent; background:linear-gradient(#0e0f13,#0e0f13) padding-box, linear-gradient(120deg,#22d3ee,#8b5cf6,#e879a6) border-box; box-shadow:0 0 60px -20px rgba(232,121,166,.45), 0 0 60px -25px rgba(34,211,238,.45); }
.dev-hero-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.dev-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:18px; }
.dev-tile { padding:14px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid #23232b; } .dev-tile b { display:block; font:700 24px 'Space Grotesk', system-ui; background:linear-gradient(90deg,#67e8f9,#f0abfc); -webkit-background-clip:text; background-clip:text; color:transparent; } .dev-tile span { color:#a1a1aa; font-size:12.5px; }
.dev-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; } @media (max-width:760px) { .dev-grid { grid-template-columns:1fr; } }
.dev-h { display:block; margin-bottom:8px; color:#e4e4e7; }
.dev-sale { display:grid; grid-template-columns:1fr auto auto; gap:10px; padding:7px 0; border-bottom:1px solid #1f1f25; font-size:14px; }
.dev-links { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.dev-name { background:linear-gradient(90deg,#67e8f9,#c4b5fd,#f0abfc); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav-acct.dev { background:linear-gradient(90deg,rgba(34,211,238,.16),rgba(232,121,166,.16)); color:#fff; font-weight:700; }

.tester-badge { display:inline-block; padding:4px 12px; border-radius:999px; font:700 13px 'Manrope', system-ui; letter-spacing:.04em; color:#0a0b0e; background:linear-gradient(90deg,#a78bfa,#34d399); box-shadow:0 0 24px -6px rgba(167,139,250,.7); }
.nav-acct.tester { background:linear-gradient(90deg,rgba(167,139,250,.18),rgba(52,211,153,.16)); color:#fff; font-weight:700; }

/* Developer / Tester Discord profile card */
@keyframes rc-spin { to { transform: rotate(360deg); } }
@keyframes rc-shine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.rolecard { display:inline-flex; align-items:center; gap:16px; }
.rc-ava { position:relative; width:72px; height:72px; border-radius:50%; padding:3px; flex:none; display:grid; place-items:center; overflow:hidden; }
.rc-ava::before { content:""; position:absolute; inset:-40%; animation: rc-spin 3.5s linear infinite; }
.rolecard.developer .rc-ava::before { background: conic-gradient(#22d3ee, #8b5cf6, #e879a6, #fbbf24, #22d3ee); }
.rolecard.tester .rc-ava::before { background: conic-gradient(#a78bfa, #34d399, #22d3ee, #a78bfa); }
.rc-ava img { position:relative; width:100%; height:100%; border-radius:50%; border:3px solid #0a0b0e; object-fit:cover; }
.rc-text { display:flex; flex-direction:column; gap:6px; }
.rc-plate { display:inline-flex; align-items:center; gap:10px; padding:6px 14px; border-radius:12px; font:700 clamp(18px,2.2vw,24px) 'Space Grotesk', system-ui; letter-spacing:.01em; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.rc-plate b { font-size:.62em; letter-spacing:.14em; padding:3px 9px; border-radius:7px; color:#0a0b0e; background-size:200% 100%; animation: rc-shine 4s linear infinite; }
.rolecard.developer .rc-plate b { background-image: linear-gradient(90deg,#22d3ee,#a78bfa,#e879a6,#22d3ee); }
.rolecard.tester .rc-plate b { background-image: linear-gradient(90deg,#a78bfa,#34d399,#a78bfa); }
.rc-plate i { font-style:normal; color:#52525b; font-weight:400; }
.rc-plate span { color:#fafafa; }
.rc-text small { color:#a1a1aa; font:500 13px 'Manrope', system-ui; }
/* menu chip */
.nav-acct.rolenav { padding:4px 12px 4px 4px; gap:8px; }
.nav-acct.rolenav .ic { width:26px; height:26px; border-radius:50%; overflow:hidden; display:inline-grid; place-items:center; padding:2px; }
.nav-acct.rolenav.developer .ic { background:conic-gradient(#22d3ee,#8b5cf6,#e879a6,#22d3ee); }
.nav-acct.rolenav.tester .ic { background:conic-gradient(#a78bfa,#34d399,#a78bfa); }
.nav-acct.rolenav .ic img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.nav-acct.rolenav b { font:800 11px 'Manrope', system-ui; letter-spacing:.12em; text-transform:uppercase; }
.nav-acct.rolenav.developer b { background:linear-gradient(90deg,#67e8f9,#f0abfc); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav-acct.rolenav.tester b { background:linear-gradient(90deg,#c4b5fd,#6ee7b7); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav-acct.rolenav i { font-style:normal; color:#52525b; margin:0 2px; }

/* account buttons: readable on the dark background */
.acct-top-btns .btn { color:#f4f4f5; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); font-weight:600; }
.acct-top-btns .btn:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); }
.acct-row-r .btn, .acct-panel .btn:not(.primary), .dev-links .btn, .acct-setpw .btn:not(.primary) { color:#f4f4f5; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); }
/* developer cash-out */
.dev-cash { display:grid; grid-template-columns: 220px 1fr; gap:6px 20px; align-items:center; padding:16px; border-radius:14px; background:rgba(74,222,128,.05); border:1px solid rgba(74,222,128,.22); margin-bottom:18px; }
@media (max-width:760px) { .dev-cash { grid-template-columns:1fr; } }
.dev-cash-bal b { display:block; font:700 30px 'Space Grotesk', system-ui; color:#4ade80; }
.dev-cash-form { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }
.dev-cash-form label { display:grid; gap:6px; font-size:13px; color:#a1a1aa; }
.cash-in { display:flex; align-items:center; background:#0b0c0f; border:1px solid #2a2a33; border-radius:10px; padding:0 10px; } .cash-in i { font-style:normal; color:#71717a; }
.cash-in input, .dev-cash-form .code-in { background:transparent; border:0; color:#f4f4f5; padding:9px 6px; font:600 16px inherit; width:130px; outline:none; }
.dev-cash-form .code-in { background:#0b0c0f; border:1px solid #2a2a33; border-radius:10px; width:170px; font-size:20px !important; }
#cashMsg, #cashHist { grid-column: 1 / -1; }

/* ============ Help centre */
.hc-hero { padding:64px 0 40px; text-align:center; background: radial-gradient(60% 120% at 50% 0%, rgba(34,211,238,.10), transparent 60%), radial-gradient(40% 80% at 80% 10%, rgba(232,121,166,.10), transparent 60%); border-bottom:1px solid var(--line, #1f1f25); }
.hc.compact .hc-hero { padding:28px 0 22px; } .hc.compact .hc-hero h1 { font-size:26px; margin:4px 0 14px; } .hc.compact .hc-meta { display:none; }
.hc-hero h1 { font:700 clamp(32px,4.4vw,52px) 'Space Grotesk', system-ui; margin:8px 0 22px; letter-spacing:-.02em; }
.hc-search { max-width:720px; margin:0 auto; display:flex; align-items:center; gap:10px; padding:8px 8px 8px 18px; border-radius:16px; background:#0d0e12; border:1px solid #2a2a33; box-shadow:0 20px 60px -30px rgba(34,211,238,.4); }
.hc-search:focus-within { border-color:#22d3ee; }
.hc-search input { flex:1; background:none; border:0; outline:none; color:#fafafa; font:500 17px 'Manrope', system-ui; padding:10px 0; min-width:0; }
.hc-results { max-width:720px; margin:12px auto 0; text-align:left; background:#0d0e12; border:1px solid #2a2a33; border-radius:16px; padding:14px; }
.hc-res-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; } .hc-x { background:none; border:0; color:#a1a1aa; font-size:20px; cursor:pointer; }
.hc-res-foot { margin-top:10px; color:#a1a1aa; font-size:14px; }
.hc-meta { display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:18px; color:#a1a1aa; font-size:13.5px; }
.hc-live i { display:inline-block; width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 4px rgba(74,222,128,.15); margin-right:6px; vertical-align:middle; }
.hc-body { padding:34px 0 80px; }
.hc-h { font:700 20px 'Space Grotesk', system-ui; margin:34px 0 14px; }
.hc-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } @media (max-width:900px) { .hc-actions { grid-template-columns:1fr 1fr; } }
.hc-act { text-align:left; display:flex; flex-direction:column; gap:6px; padding:18px; border-radius:16px; background:#111216; border:1px solid #23232b; color:inherit; text-decoration:none; font:inherit; cursor:pointer; transition:transform .15s, border-color .15s; }
.hc-act:hover { transform:translateY(-2px); border-color:#3a3a46; } .hc-act b { font-size:16px; } .hc-act span { color:#a1a1aa; font-size:13.5px; }
.hc-act.primary { background:linear-gradient(#111216,#111216) padding-box, linear-gradient(120deg,#22d3ee,#e879a6) border-box; border:1px solid transparent; }
.hc-cats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } @media (max-width:760px) { .hc-cats { grid-template-columns:1fr; } }
.hc-cat { display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto auto; column-gap:12px; text-align:left; padding:16px; border-radius:14px; background:#111216; border:1px solid #23232b; color:inherit; font:inherit; cursor:pointer; }
.hc-cat:hover { border-color:#3a3a46; } .hc-cat span { grid-row:1 / 3; font-size:24px; display:grid; place-items:center; background:rgba(255,255,255,.04); border-radius:12px; } .hc-cat small { color:#a1a1aa; }
.hc-arts { display:grid; gap:8px; }
.hc-art { border:1px solid #23232b; border-radius:12px; background:#0f1014; padding:0 14px; } .hc-art summary { cursor:pointer; padding:13px 0; font-weight:600; display:flex; gap:10px; list-style:none; } .hc-art summary::-webkit-details-marker { display:none; }
.hc-art p { color:#c4c4cc; margin:0 0 12px; line-height:1.6; } .hc-art-foot { font-size:13px; color:#a1a1aa !important; }
.hc-back { display:inline-block; color:#a1a1aa; margin-bottom:16px; font-size:14px; } .hc-back:hover { color:#fff; }
.hc-new, .hc-ticket { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start; } @media (max-width:900px) { .hc-new, .hc-ticket { grid-template-columns:1fr; } }
.hc-form, .hc-side, .hc-thread-wrap { background:#111216; border:1px solid #23232b; border-radius:18px; padding:22px; }
.hc-form h2 { margin:0 0 8px; font:700 24px 'Space Grotesk', system-ui; }
.hc-l { display:block; margin:16px 0 7px; font-size:13.5px; color:#a1a1aa; font-weight:600; }
.hc-form input:not([type=radio]), .hc-form textarea, .hc-reply textarea { width:100%; background:#0b0c0f; color:#f4f4f5; border:1px solid #2a2a33; border-radius:10px; padding:11px 13px; font:15px 'Manrope', system-ui; resize:vertical; }
.hc-form input:focus, .hc-form textarea:focus, .hc-reply textarea:focus { outline:none; border-color:#22d3ee; }
.hc-pick { display:flex; flex-wrap:wrap; gap:8px; } .hc-pick button { background:#0b0c0f; border:1px solid #2a2a33; color:#d4d4d8; border-radius:999px; padding:8px 13px; font:500 13.5px 'Manrope', system-ui; cursor:pointer; }
.hc-pick button.on { border-color:#22d3ee; color:#fff; background:rgba(34,211,238,.10); }
.hc-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media (max-width:600px) { .hc-row { grid-template-columns:1fr; } }
.hc-prio { display:flex; gap:8px; flex-wrap:wrap; } .hc-prio label { cursor:pointer; } .hc-prio input { display:none; }
.hc-prio span { display:inline-block; padding:8px 13px; border-radius:10px; border:1px solid #2a2a33; color:#d4d4d8; font-size:14px; } .hc-prio input:checked + span { border-color:#22d3ee; background:rgba(34,211,238,.10); color:#fff; }
.hc-form .btn.primary { margin-top:20px; }
.hc-msg { min-height:20px; margin-top:10px; color:#a1a1aa; } .hc-msg.err { color:#f87171; }
.hc-suggest { margin-top:12px; padding:12px; border-radius:12px; background:rgba(34,211,238,.05); border:1px solid rgba(34,211,238,.25); } .hc-suggest b { display:block; margin-bottom:8px; font-size:13.5px; } .hc-suggest .hc-art { margin-bottom:6px; }
.hc-steps { list-style:none; padding:0; margin:12px 0; display:grid; gap:12px; } .hc-steps li { display:flex; gap:10px; color:#c4c4cc; font-size:14px; line-height:1.5; }
.hc-steps span { flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font:700 12px 'Manrope'; color:#0a0b0e; background:linear-gradient(135deg,#22d3ee,#e879a6); }
.hc-list-head { display:flex; justify-content:space-between; align-items:center; } .hc-list-head h2 { font:700 26px 'Space Grotesk', system-ui; margin:0; }
.hc-filter { display:flex; gap:6px; margin:16px 0; } .hc-filter button { background:none; border:1px solid #2a2a33; color:#a1a1aa; border-radius:999px; padding:6px 14px; cursor:pointer; font:500 13.5px 'Manrope'; } .hc-filter button.on { color:#fff; border-color:#22d3ee; }
.hc-list { border:1px solid #23232b; border-radius:16px; overflow:hidden; background:#111216; }
.hc-trow { display:grid; grid-template-columns:minmax(0,1fr) 190px 110px; gap:12px; align-items:center; padding:14px 18px; border-top:1px solid #1d1d24; color:inherit; text-decoration:none; }
.hc-trow:first-child { border-top:0; } .hc-trow.head { color:#71717a; font-size:12px; text-transform:uppercase; letter-spacing:.08em; padding:10px 18px; background:#0e0f13; }
a.hc-trow:hover { background:#16171c; } .hc-trow b { display:block; } .hc-trow small { color:#a1a1aa; }
@media (max-width:640px) { .hc-trow { grid-template-columns:1fr; } .hc-trow.head { display:none; } }
.hc-empty { text-align:center; padding:40px 20px; }
.hc-status { display:inline-block; font-style:normal; font:700 12px 'Manrope', system-ui; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.hc-status.wait { background:rgba(251,191,36,.12); color:#fbbf24; } .hc-status.you { background:rgba(34,211,238,.14); color:#67e8f9; } .hc-status.done { background:rgba(74,222,128,.12); color:#4ade80; }
.hc-t-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding-bottom:14px; border-bottom:1px solid #1f1f25; } .hc-t-head h2 { margin:4px 0 0; font:700 22px 'Space Grotesk', system-ui; }
.hc-thread { display:flex; flex-direction:column; gap:14px; padding:18px 2px; max-height:62vh; overflow:auto; }
.hc-msg-b { max-width:82%; padding:12px 14px; border-radius:14px; background:#16171c; border:1px solid #23232b; }
.hc-msg-b.me { align-self:flex-end; background:linear-gradient(135deg,rgba(34,211,238,.14),rgba(232,121,166,.12)); border-color:rgba(34,211,238,.25); }
.hc-msg-b.dev { border-color:rgba(232,121,166,.45); background:linear-gradient(135deg,rgba(34,211,238,.08),rgba(232,121,166,.10)); }
.hc-who { display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; } .hc-who b { font:700 14px 'Manrope', system-ui; } .hc-who small { color:#71717a; }
.staff-badge.ai { background:rgba(167,139,250,.16); color:#c4b5fd; }
.hc-text { line-height:1.6; color:#e4e4e7; word-wrap:break-word; } .hc-text a { color:#67e8f9; }
.hc-sys { align-self:center; font-size:12.5px; color:#a1a1aa; padding:4px 12px; border-radius:999px; background:#16171c; }
.hc-reply { border-top:1px solid #1f1f25; padding-top:14px; } .hc-reply-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px; }
.hc-closed-note { padding:14px; border-radius:12px; background:rgba(74,222,128,.06); border:1px solid rgba(74,222,128,.2); color:#c4c4cc; }
.hc-dl { display:grid; grid-template-columns:auto 1fr; gap:10px 14px; margin:0 0 16px; font-size:14px; } .hc-dl dt { color:#71717a; } .hc-dl dd { margin:0; }
.hc-copy { background:none; border:1px solid #2a2a33; color:#a1a1aa; border-radius:8px; padding:2px 8px; font-size:12px; cursor:pointer; margin-left:6px; }
#tSolve { width:100%; color:#f4f4f5; background:rgba(74,222,128,.10); border:1px solid rgba(74,222,128,.35); }

/* ============ Readability pass: no dark text on dark backgrounds */
:root { --muted: #c3c9d4; --dim: #9aa2b1; }
.btn { color: var(--text); }
.btn:not(.primary) { color: #f1f3f7; border-color: rgba(255,255,255,.18); }
.btn:not(.primary):hover { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.07); }
.btn.ghost { color: #f1f3f7; background: rgba(255,255,255,.03); }
.btn[disabled] { opacity: .55; }
.muted, small.muted, .small.muted, p.muted { color: #b9bfcb !important; }
.links a { color: #c9ced8; }
.links a:hover, .links a.on { color: #ffffff; }
.nav-acct { color: #eef1f6; }
input::placeholder, textarea::placeholder { color: #7d8594; }
.acct-tabs button { color: #c3c9d4; }
.hc-trow.head, .hc-dl dt, .hc-who small, .hc-back { color: #a3aab8 !important; }
.hc-meta, .hc-act span, .hc-cat small, .hc-steps li, .hc-art p, .hc-res-foot, .hc-filter button { color: #c3c9d4; }
.plan-top small, .meta, .shot-bar, .li span, .find code, .peers td:nth-child(2) { color: #a3aab8; }
.site-foot, .site-foot a { color: #b9bfcb; }
.hc-body { padding-left: clamp(20px, 4vw, 48px) !important; padding-right: clamp(20px, 4vw, 48px) !important; max-width: 1240px; }
.hc-art summary { justify-content: flex-start; text-align: left; align-items: center; }
.hc-art summary::after { margin-left: auto; }

/* ticket closed card */
@keyframes cc-pop { from { transform: translateY(10px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.ask-toast.closed-card { text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 18px; border-radius:16px; border:1px solid rgba(74,222,128,.35);
  background:linear-gradient(160deg, rgba(74,222,128,.10), rgba(34,211,238,.08)), #0f1115; animation: cc-pop .35s ease-out; box-shadow:0 20px 50px -20px rgba(74,222,128,.45); }
.closed-card .cc-ic { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font:800 22px system-ui; color:#0a0b0e; background:linear-gradient(135deg,#4ade80,#22d3ee); }
.closed-card b { font:700 16px 'Manrope', system-ui; color:#fff; } .closed-card span { color:#c3c9d4; font-size:13.5px; line-height:1.5; } .closed-card a { color:#67e8f9; }
.closed-card .cc-sub { font-size:12.5px; color:#9aa2b1; }

/* ============ announcement banner */
.ann-wrap { padding:10px clamp(12px,3vw,24px) 0; }
.ann { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:#101217; color:#eef1f6; position:relative; }
.ann-glow { background:linear-gradient(#0f1116,#0f1116) padding-box, linear-gradient(110deg,#22d3ee,#8b5cf6,#e879a6) border-box; border:1px solid transparent; box-shadow:0 10px 40px -18px rgba(139,92,246,.6); }
.ann-info { border-color:rgba(34,211,238,.45); background:rgba(34,211,238,.07); } .ann-sale { border-color:rgba(232,121,166,.5); background:linear-gradient(90deg,rgba(232,121,166,.14),rgba(139,92,246,.10)); }
.ann-warning { border-color:rgba(245,158,11,.5); background:rgba(245,158,11,.08); } .ann-custom { padding:0; border:0; background:none; }
.ann-ic { font-size:20px; } .ann-body { flex:1; min-width:200px; } .ann-body > b { display:block; font:700 15px 'Manrope', system-ui; }
.ann-html { color:#d7dce5; font-size:14px; line-height:1.5; } .ann-html a { color:#67e8f9; } .ann-html img { max-width:100%; border-radius:8px; }
.ann-btn { display:inline-flex; align-items:center; padding:7px 14px; border-radius:999px; font:700 13px 'Manrope', system-ui; color:#0a0b0e; background:linear-gradient(90deg,#22d3ee,#e879a6); text-decoration:none; white-space:nowrap; }
.ann-btn.ghost { background:rgba(88,101,242,.18); color:#c7cbff; border:1px solid rgba(88,101,242,.45); }
.ann-x { background:none; border:0; color:#9aa2b1; font-size:20px; cursor:pointer; padding:0 4px; }
.ann-preview { border:1px dashed #2f2f3a; border-radius:14px; padding:10px; min-height:70px; }
/* comparison tables */
.cmp-h { text-align:center; font:700 clamp(22px,2.6vw,30px) 'Space Grotesk', system-ui; margin-bottom:18px; }
.cmp-scroll { overflow-x:auto; border:1px solid #23232b; border-radius:18px; background:#0f1014; }
.cmp { width:100%; border-collapse:collapse; min-width:640px; font-size:14.5px; }
.cmp th, .cmp td { padding:12px 16px; text-align:center; border-bottom:1px solid #1c1c23; color:#d7dce5; } .cmp td:first-child, .cmp th:first-child { text-align:left; color:#eef1f6; }
.cmp thead th { font:700 15px 'Space Grotesk', system-ui; color:#fff; background:#13141a; position:sticky; top:0; }
.cmp .hot { background:rgba(139,92,246,.08); } .cmp thead .hot { color:#f0abfc; }
.cmp tr.grp td { background:#121318; color:#9aa2b1 !important; font:700 11.5px 'Manrope', system-ui; letter-spacing:.1em; text-transform:uppercase; text-align:left; }
.cmp tbody tr:not(.grp):hover td { background:rgba(255,255,255,.025); }
/* vouches */
.stars { color:#fbbf24; letter-spacing:2px; } .stars i { font-style:normal; color:#3a3a46; }
.vlayout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:22px; align-items:start; } @media (max-width:900px) { .vlayout { grid-template-columns:1fr; } }
.vgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.vcard { padding:18px; border-radius:16px; background:#111216; border:1px solid #23232b; display:flex; flex-direction:column; gap:10px; }
.vcard.feat { border-color:rgba(251,191,36,.45); box-shadow:0 10px 40px -22px rgba(251,191,36,.5); }
.vcard p { margin:0; color:#e4e7ee; line-height:1.6; } .vtop { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.vver { font-size:12px; color:#4ade80; } .vby b { display:block; } .vreply { font-size:13.5px; color:#c3c9d4; padding:10px; border-radius:10px; background:rgba(255,255,255,.03); }
.vsum { margin-bottom:18px; font-size:16px; } .vsum .stars { font-size:20px; }
.vform-box { background:#111216; border:1px solid #23232b; border-radius:18px; padding:20px; position:sticky; top:84px; } .vform { display:grid; gap:12px; margin-top:10px; }
.vform label { display:grid; gap:6px; font-size:13px; color:#c3c9d4; } .vform input, .vform select, .vform textarea { background:#0b0c0f; color:#f4f4f5; border:1px solid #2a2a33; border-radius:10px; padding:10px 12px; font:14.5px 'Manrope', system-ui; }
.vrate { display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px; } .vrate input { display:none; }
.vrate label { font-size:30px; color:#3a3a46; cursor:pointer; transition:color .1s; } .vrate input:checked ~ label, .vrate label:hover, .vrate label:hover ~ label { color:#fbbf24; }
.vstrip-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:16px; } .vstrip-head h2 { margin:0; font:700 26px 'Space Grotesk', system-ui; }
/* changelog */
.clog-item { display:grid; grid-template-columns:160px 1fr; gap:20px; padding:20px 0; border-bottom:1px solid #1d1d24; } @media (max-width:640px) { .clog-item { grid-template-columns:1fr; } }
.clog-side { display:flex; flex-direction:column; gap:6px; align-items:flex-start; } .clog-ver { font:700 22px 'Space Grotesk', system-ui; }
.clog-new { font:700 11px 'Manrope'; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:999px; color:#0a0b0e; background:linear-gradient(90deg,#22d3ee,#e879a6); }
.clog-item ul { margin:0; padding-left:18px; color:#e4e7ee; line-height:1.7; }
/* status */
.stat { max-width:820px; } .stat-overall { display:flex; align-items:center; gap:12px; padding:18px 20px; border-radius:16px; margin-bottom:16px; background:#111216; border:1px solid #23232b; font-size:18px; }
.stat-overall.ok { border-color:rgba(74,222,128,.4); background:rgba(74,222,128,.06); } .stat-overall.bad { border-color:rgba(248,113,113,.45); background:rgba(248,113,113,.06); }
.stat-list { border:1px solid #23232b; border-radius:16px; overflow:hidden; background:#111216; }
.stat-row { display:grid; grid-template-columns:20px 1fr auto auto; gap:12px; align-items:center; padding:14px 18px; border-top:1px solid #1c1c23; } .stat-row:first-child { border-top:0; }
.stat-row em { font-style:normal; font:700 13px 'Manrope'; } .stat-row em.ok { color:#4ade80; } .stat-row em.bad { color:#f87171; }
.dot { width:10px; height:10px; border-radius:50%; background:#71717a; display:inline-block; } .dot.ok { background:#4ade80; box-shadow:0 0 0 4px rgba(74,222,128,.15); } .dot.bad { background:#f87171; box-shadow:0 0 0 4px rgba(248,113,113,.15); } .dot.wait { background:#fbbf24; }
/* news */
.news-item { margin-bottom:16px; } .news-item small { display:block; margin-bottom:6px; }
/* feedback modal */
.fb-modal { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); display:grid; place-items:center; padding:16px; }
.fb-card { position:relative; width:min(460px,100%); background:#111216; border:1px solid #2a2a33; border-radius:18px; padding:22px; display:grid; gap:12px; }
.fb-card h3 { margin:0; font:700 20px 'Space Grotesk', system-ui; } .fb-x { position:absolute; top:10px; right:12px; background:none; border:0; color:#9aa2b1; font-size:22px; cursor:pointer; }
.fb-card textarea { background:#0b0c0f; color:#f4f4f5; border:1px solid #2a2a33; border-radius:10px; padding:10px 12px; font:14.5px 'Manrope', system-ui; }
.fb-moods { display:flex; gap:8px; } .fb-moods input { display:none; } .fb-moods span { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; border:1px solid #2a2a33; font-size:22px; cursor:pointer; }
.fb-moods input:checked + span { border-color:#22d3ee; background:rgba(34,211,238,.1); }
/* developer tools */
.dev-tools { margin-bottom:18px; padding:14px; border-radius:14px; background:rgba(255,255,255,.02); border:1px solid #23232b; }
.dev-tabs { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; } .dev-tabs button { background:none; border:1px solid #2a2a33; color:#c3c9d4; border-radius:999px; padding:6px 14px; font:600 13.5px 'Manrope'; cursor:pointer; } .dev-tabs button.on { color:#fff; border-color:#e879a6; background:rgba(232,121,166,.1); }
.ann-form label { display:grid; gap:6px; font-size:13px; color:#c3c9d4; margin-bottom:10px; } .ann-form input:not([type=checkbox]), .ann-form select, .ann-form textarea { background:#0b0c0f; color:#f4f4f5; border:1px solid #2a2a33; border-radius:10px; padding:9px 11px; font:14px 'Manrope', system-ui; }
.ann-form textarea { font-family:'JetBrains Mono', monospace; font-size:13px; }
.ann-cols { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:18px; } @media (max-width:900px) { .ann-cols { grid-template-columns:1fr; } }
.ann-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .ann-checks { display:flex; flex-wrap:wrap; gap:14px; margin:4px 0 12px; } .ann-checks label { display:flex; gap:6px; align-items:center; margin:0; }
.dev-row { display:flex; gap:10px; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #1c1c23; flex-wrap:wrap; } .dev-row.done { opacity:.55; } .dev-row-btns { display:flex; gap:6px; flex-wrap:wrap; }

/* Glow style: full gradient banner */
.ann-glow { background:linear-gradient(100deg,#0891b2 0%,#7c3aed 50%,#db2777 100%) !important; border:0 !important; box-shadow:0 12px 40px -14px rgba(139,92,246,.7); }
.ann-glow .ann-body > b, .ann-glow .ann-html { color:#fff; } .ann-glow .ann-html a { color:#fff; text-decoration:underline; }
.ann-glow .ann-btn { background:#fff; color:#4c1d95; } .ann-glow .ann-btn.ghost { background:rgba(0,0,0,.22); color:#fff; border-color:rgba(255,255,255,.35); } .ann-glow .ann-x { color:rgba(255,255,255,.8); }
.ann-sale { background:linear-gradient(100deg,#db2777,#9333ea) !important; border:0 !important; } .ann-sale .ann-body > b, .ann-sale .ann-html { color:#fff; } .ann-sale .ann-btn { background:#fff; color:#831843; }

/* animated banner gradients (slow cycle) */
@keyframes ann-cycle { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.ann-glow { background: linear-gradient(100deg, #0891b2, #7c3aed, #db2777, #7c3aed, #0891b2) !important; background-size: 300% 100% !important; animation: ann-cycle 14s ease-in-out infinite; }
.ann-sale { background: linear-gradient(100deg, #db2777, #9333ea, #ea580c, #9333ea, #db2777) !important; background-size: 300% 100% !important; animation: ann-cycle 12s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ann-glow, .ann-sale { animation: none; } }

/* ============ Discord card editor */
.card-ed { margin-top:18px; padding:16px; border-radius:14px; border:1px solid #2a2a33; background:#0d0e12; }
.card-ed-head { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:12px; } .card-ed-head .btn { margin-left:auto; }
.card-ed-cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; } @media (max-width:1000px) { .card-ed-cols { grid-template-columns:1fr; } }
.card-ed-fields { display:grid; gap:12px; max-height:720px; overflow:auto; padding-right:6px; }
.ce-sec { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px; border-radius:12px; background:#111216; border:1px solid #23232b; } .ce-sec > b { grid-column:1 / -1; color:#fff; }
.ce-f { display:grid; gap:5px; font-size:12.5px; color:#b9bfcb; } .ce-f.wide { grid-column:1 / -1; }
.ce-sec input:not([type=checkbox]):not([type=color]), .ce-sec select, .ce-sec textarea { background:#0b0c0f; color:#f4f4f5; border:1px solid #2a2a33; border-radius:8px; padding:8px 10px; font:13.5px 'Manrope', system-ui; width:100%; }
.ce-sec textarea { font-family:'JetBrains Mono', monospace; font-size:12.5px; }
.ce-color { display:flex; gap:6px; } .ce-color input[type=color] { width:44px; height:36px; border:0; background:none; padding:0; }
.ce-inline { display:flex; align-items:center; gap:8px; }
.ce-btn { grid-column:1 / -1; display:grid; grid-template-columns:58px 1fr 1.6fr auto; gap:6px; }
/* Discord look-alike preview */
.dc-wrap { background:#313338; border-radius:12px; padding:16px 14px; font-family:'gg sans','Noto Sans','Segoe UI',system-ui,sans-serif; color:#dbdee1; }
.dc-msg { display:flex; gap:14px; } .dc-ava { width:40px; height:40px; border-radius:50%; flex:none; } .dc-main { min-width:0; flex:1; }
.dc-name { font-weight:600; color:#f2f3f5; margin-bottom:4px; font-size:15px; } .dc-app { background:#5865f2; color:#fff; font-size:10px; padding:1px 5px; border-radius:4px; vertical-align:middle; } .dc-time { color:#949ba4; font-size:12px; font-weight:400; }
.dc-card { background:#2b2d31; border:1px solid #232428; border-left:4px solid var(--acc); border-radius:8px; padding:14px; display:grid; gap:10px; max-width:560px; }
.dc-banner { width:100%; border-radius:6px; display:block; }
.dc-sec { display:flex; gap:12px; align-items:flex-start; } .dc-sec-text { flex:1; min-width:0; } .dc-side { flex:none; } .dc-thumb { width:72px; height:72px; border-radius:8px; object-fit:cover; }
.dc-h1 { font-size:24px; font-weight:700; color:#f2f3f5; line-height:1.2; } .dc-h2 { font-size:20px; font-weight:700; color:#f2f3f5; } .dc-h3 { font-size:16px; font-weight:700; color:#f2f3f5; }
.dc-sub { font-size:12px; color:#949ba4; } .dc-text { font-size:15px; line-height:1.4; } .dc-text b, .dc-sec b { color:#f2f3f5; } .dc-text a { color:#00a8fc; }
.dc-li { padding-left:16px; position:relative; } .dc-li::before { content:"•"; position:absolute; left:4px; }
.dc-quote { border-left:4px solid #4e5058; padding-left:10px; } .dc-gap { height:8px; }
.dc-ts { background:rgba(255,255,255,.06); border-radius:3px; padding:0 2px; }
.dc-hr { border:0; border-top:1px solid #3f4147; margin:2px 0; }
.dc-row { display:flex; flex-wrap:wrap; gap:8px; }
.dc-btn { display:inline-flex; align-items:center; gap:4px; background:#4e5058; color:#fff; border-radius:8px; padding:8px 14px; font-size:14px; font-weight:500; } .dc-btn i { font-style:normal; opacity:.7; font-size:12px; }
.dc-reacts { display:flex; gap:6px; margin-top:6px; } .dc-reacts span { background:#2b2d31; border:1px solid #3f4147; border-radius:8px; padding:2px 8px; font-size:13px; }

.news-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; } .news-top small { margin:0; }
.news-del { color:#fca5a5 !important; border-color:rgba(248,113,113,.4) !important; } .news-del:hover { background:rgba(248,113,113,.12) !important; }

.ce-presets { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; }
.ce-right { display:flex; flex-direction:column; gap:8px; } .ce-publish { margin-top:10px; display:grid; gap:10px; }
.ce-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ce-sub { grid-column:1 / -1; font-size:12px; color:#9aa2b1; text-transform:uppercase; letter-spacing:.08em; margin-top:4px; }
.ce-tools { grid-column:1 / -1; display:flex; gap:4px; flex-wrap:wrap; } .ce-tool { background:#0b0c0f; border:1px solid #2a2a33; color:#e4e7ee; border-radius:7px; padding:4px 10px; font:600 13px 'Manrope', system-ui; cursor:pointer; } .ce-tool:hover { border-color:#e879a6; }
.ce-quick { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; }
.dc-ping { display:inline-block; margin-bottom:6px; color:#c9cdfb; background:rgba(88,101,242,.3); border-radius:4px; padding:0 4px; font-weight:500; }
.card-ed-fields { max-height:none; }

/* developer ticket desk */
.desk { display:grid; grid-template-columns:340px minmax(0,1fr); gap:14px; min-height:520px; } @media (max-width:900px) { .desk { grid-template-columns:1fr; } }
.desk-list { border:1px solid #23232b; border-radius:14px; background:#0e0f13; overflow:hidden; display:flex; flex-direction:column; max-height:680px; }
.desk-bar { padding:10px; border-bottom:1px solid #1d1d24; display:grid; gap:8px; } .desk-bar input { background:#0b0c0f; color:#f4f4f5; border:1px solid #2a2a33; border-radius:8px; padding:8px 10px; font:13.5px 'Manrope', system-ui; }
.desk-f { display:flex; gap:6px; } .desk-f button { background:none; border:1px solid #2a2a33; color:#c3c9d4; border-radius:999px; padding:4px 12px; font:600 12.5px 'Manrope'; cursor:pointer; } .desk-f button.on { color:#fff; border-color:#22d3ee; }
#deskList { overflow:auto; }
.desk-row { display:grid; gap:4px; width:100%; text-align:left; padding:11px 12px; background:none; border:0; border-bottom:1px solid #1a1a21; color:inherit; font:inherit; cursor:pointer; }
.desk-row:hover { background:#14151a; } .desk-row.on { background:rgba(34,211,238,.07); box-shadow:inset 3px 0 0 #22d3ee; }
.desk-top { display:flex; justify-content:space-between; gap:8px; } .desk-top b { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .desk-top small, .desk-sub { color:#a3aab8; font-size:12px; }
.desk-row .hc-status { justify-self:start; font-size:11px; }
.desk-view { border:1px solid #23232b; border-radius:14px; background:#0e0f13; padding:16px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.desk-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding-bottom:10px; border-bottom:1px solid #1d1d24; flex-wrap:wrap; } .desk-head h3 { margin:4px 0; font:700 19px 'Space Grotesk', system-ui; }
.desk-actions { display:flex; gap:8px; align-items:center; } .desk-thread { max-height:440px; }
.staff-badge.cust { background:rgba(255,255,255,.08); color:#d7dce5; }

/* ============ developer dashboard */
.dev-shell { display:grid; grid-template-columns:230px minmax(0,1fr); gap:0; padding:0 !important; overflow:hidden; }
@media (max-width:900px) { .dev-shell { grid-template-columns:1fr; } }
.dev-side { background:linear-gradient(180deg, rgba(139,92,246,.10), rgba(34,211,238,.04)); border-right:1px solid #23232b; padding:18px 12px; display:flex; flex-direction:column; gap:14px; }
.dev-side-top { display:grid; gap:6px; padding:0 6px; }
.dev-nav { display:grid; gap:3px; } .dev-nav button { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:0; color:#c9ced8; font:600 14px 'Manrope', system-ui; padding:10px 12px; border-radius:10px; cursor:pointer; }
.dev-nav button span { width:20px; text-align:center; } .dev-nav button:hover { background:rgba(255,255,255,.05); color:#fff; }
.dev-nav button.on { background:linear-gradient(90deg, rgba(34,211,238,.16), rgba(232,121,166,.12)); color:#fff; box-shadow: inset 2px 0 0 #e879a6; }
.dev-nav em { margin-left:auto; font-style:normal; font:800 11px 'Manrope'; min-width:20px; height:20px; border-radius:10px; display:grid; place-items:center; padding:0 6px; color:#0a0b0e; background:linear-gradient(90deg,#22d3ee,#e879a6); }
.dev-side-foot { margin-top:auto; display:flex; align-items:center; gap:8px; padding:0 8px; }
@media (max-width:900px) { .dev-side { border-right:0; border-bottom:1px solid #23232b; } .dev-nav { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); } .dev-side-foot { display:none; } }
.dev-main { padding:22px; margin:0 !important; border:0 !important; background:none !important; border-radius:0 !important; min-width:0; }
.dev-pane-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:16px; } .dev-pane-head h2 { margin:0; font:700 24px 'Space Grotesk', system-ui; }
.dev-over { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px; } @media (max-width:900px) { .dev-over { grid-template-columns:1fr; } }
.dev-card { background:#0f1014; border:1px solid #23232b; border-radius:14px; padding:14px; } .dev-card-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.ov-row { display:grid; gap:2px; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid #1b1b22; padding:8px 0; color:inherit; font:inherit; cursor:pointer; } .ov-row:last-child { border-bottom:0; }
.ov-row b { font-size:14px; font-weight:600; } .ov-row small { color:#a3aab8; font-size:12px; } .ov-hot { color:#fbbf24; font-weight:700; }
.dev-quick { display:flex; flex-wrap:wrap; gap:8px; }
.nav-dev { padding:7px 12px; border-radius:999px; font:800 13px 'Manrope', system-ui; color:#0a0b0e; background:linear-gradient(90deg,#22d3ee,#e879a6); margin-right:6px; }

/* ============ Design pass: calmer, more hand-made. Fewer gradients, real type hierarchy, a bit of texture. */
.page-hero .eyebrow, .tag, .ac-eyebrow { font: 600 12px 'Manrope', system-ui !important; letter-spacing: .06em !important; text-transform: uppercase; background: none !important; border: 0 !important; padding: 0 !important; color: #67e8f9 !important; }
.page-hero .eyebrow::before, .ac-eyebrow::before { content: "" !important; display: inline-block; width: 18px; height: 2px; background: currentColor; vertical-align: middle; margin-right: 8px; opacity: .8; }
.hero h1, .page-hero h1 { background: none !important; color: #f5f7fb !important; -webkit-text-fill-color: currentColor; font-weight: 700; letter-spacing: -.045em; }
.page-hero { text-align: left !important; padding-top: 64px !important; } .page-hero .lead { margin-left: 0 !important; color: #b9c0cc; }
.page-hero h1 { max-width: 16ch; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .035; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
main, header, footer { position: relative; z-index: 1; }
.btn.primary { background: #f5f7fb !important; color: #0a0b0e !important; border-color: #f5f7fb !important; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 8px 24px -12px rgba(103,232,249,.6); }
.btn.primary:hover { background: #fff !important; transform: translateY(-1px); }
.nav .btn.primary, .plan.pro .btn.primary, .hc-act.primary { background: linear-gradient(90deg,#22d3ee,#e879a6) !important; color: #0a0b0e !important; border: 0 !important; }
h2 { letter-spacing: -.035em; }
.theme-btn { background: none; border: 1px solid rgba(255,255,255,.16); color: #e4e7ee; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 16px; margin-right: 6px; } .theme-btn:hover { border-color: rgba(255,255,255,.35); }

/* ============ Light mode */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="light"] body { background: #f6f7fb !important; color: #14161c !important; --text:#14161c; --muted:#4b5262; --dim:#6b7280; --line:#e3e6ee; --line2:#d7dbe5; --surface:#ffffff; --surface2:#f0f2f7; --bg:#f6f7fb; }
html[data-theme="light"] .nav { background: rgba(255,255,255,.85) !important; border-bottom-color: #e3e6ee !important; }
html[data-theme="light"] .links a, html[data-theme="light"] .nav-acct { color: #3b4150 !important; } html[data-theme="light"] .links a.on, html[data-theme="light"] .links a:hover { color: #0a0b0e !important; }
html[data-theme="light"] .hero h1, html[data-theme="light"] .page-hero h1, html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] b { color: #0d1017 !important; }
html[data-theme="light"] .muted, html[data-theme="light"] .lead, html[data-theme="light"] .sub, html[data-theme="light"] p { color: #4b5262 !important; }
html[data-theme="light"] .btn:not(.primary) { color: #14161c !important; background: #fff !important; border-color: #d7dbe5 !important; }
html[data-theme="light"] .btn.primary { background: #0d1017 !important; color: #fff !important; border-color: #0d1017 !important; }
html[data-theme="light"] .plan, html[data-theme="light"] .card, html[data-theme="light"] .hc-act, html[data-theme="light"] .hc-cat, html[data-theme="light"] .hc-art, html[data-theme="light"] .vcard, html[data-theme="light"] .acct-card, html[data-theme="light"] .acct-safe, html[data-theme="light"] .acct-row, html[data-theme="light"] .hc-form, html[data-theme="light"] .hc-side, html[data-theme="light"] .hc-thread-wrap, html[data-theme="light"] .hc-list, html[data-theme="light"] .cmp-scroll, html[data-theme="light"] .sec-card, html[data-theme="light"] .rm-col, html[data-theme="light"] .kc-card, html[data-theme="light"] .bty-form, html[data-theme="light"] .bty-side, html[data-theme="light"] .stat-list, html[data-theme="light"] .stat-overall, html[data-theme="light"] .clog-item, html[data-theme="light"] .vform-box, html[data-theme="light"] .side-box { background: #fff !important; border-color: #e3e6ee !important; color: #14161c; }
html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select { background: #fff !important; color: #14161c !important; border-color: #d7dbe5 !important; }
html[data-theme="light"] .cmp th, html[data-theme="light"] .cmp td { color: #2a2f3a !important; border-color: #eceef4 !important; } html[data-theme="light"] .cmp thead th { background: #f3f4f8 !important; color: #0d1017 !important; }
html[data-theme="light"] .site-foot, html[data-theme="light"] .site-foot a { color: #4b5262 !important; }
html[data-theme="light"] body::before { opacity: .02; }
html[data-theme="light"] .theme-btn { color: #14161c; border-color: #d7dbe5; }
html[data-theme="light"] .ask-panel { background: #fff !important; color: #14161c; } html[data-theme="light"] .ask-msg.assistant > div { background: #f0f2f7 !important; color: #14161c !important; }

/* ============ new pages */
.sec-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.sec-card { background:#111216; border:1px solid #23232b; border-radius:16px; padding:22px; } .sec-card h3 { margin:0 0 10px; font:700 18px 'Space Grotesk', system-ui; }
.sec-card ul { margin:0; padding-left:18px; color:#c9ced8; line-height:1.7; } .sec-card p { color:#c9ced8; line-height:1.6; margin:0; } .sec-card a { color:#67e8f9; }
.rm-top { margin-bottom:22px; } .rm-suggest { display:flex; gap:8px; flex-wrap:wrap; max-width:720px; }
.rm-suggest input, .rm-suggest select, .lu-form input, .lu-form select, .kc-form input { background:#0b0c0f; color:#f4f4f5; border:1px solid #2a2a33; border-radius:10px; padding:10px 12px; font:14.5px 'Manrope', system-ui; }
.rm-suggest input { flex:1; min-width:220px; }
.rm-cols { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } @media (max-width:1000px) { .rm-cols { grid-template-columns:1fr 1fr; } } @media (max-width:600px) { .rm-cols { grid-template-columns:1fr; } }
.rm-col { background:#0f1014; border:1px solid #23232b; border-radius:16px; padding:14px; } .rm-col h3 { margin:0 0 12px; font:700 15px 'Space Grotesk', system-ui; } .rm-col h3 small { color:#9aa2b1; font-weight:500; }
.rm-item { display:flex; gap:10px; align-items:flex-start; padding:10px; border-radius:12px; background:#15161b; margin-bottom:8px; } .rm-item b { display:block; font-size:14px; } .rm-item small { color:#9aa2b1; font-size:12px; }
.rm-vote { display:grid; place-items:center; min-width:42px; padding:4px 0; border-radius:10px; background:#0b0c0f; border:1px solid #2a2a33; color:#9aa2b1; cursor:pointer; font-size:11px; } .rm-vote b { color:#f4f4f5; font-size:14px; } .rm-vote:hover { border-color:#67e8f9; color:#67e8f9; }
.bty { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start; } @media (max-width:900px) { .bty { grid-template-columns:1fr; } }
.bty-form { display:grid; gap:12px; background:#111216; border:1px solid #23232b; border-radius:16px; padding:20px; } .bty-form label { display:grid; gap:6px; font-size:13px; color:#c3c9d4; }
.bty-form input, .bty-form textarea { background:#0b0c0f; color:#f4f4f5; border:1px solid #2a2a33; border-radius:10px; padding:10px 12px; font:14.5px 'Manrope', system-ui; }
.bty-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } @media (max-width:700px) { .bty-row { grid-template-columns:1fr; } }
.bty-side { background:#111216; border:1px solid #23232b; border-radius:16px; padding:20px; } .bty-side h3 { margin:0 0 8px; } .bty-side ul { padding-left:18px; color:#c9ced8; line-height:1.7; }
.kc-form { display:flex; gap:8px; max-width:640px; } .kc-form input { flex:1; font-family:'JetBrains Mono', monospace; letter-spacing:.04em; }
.kc-card { margin-top:18px; max-width:640px; background:#111216; border:1px solid #23232b; border-radius:16px; padding:18px; } .kc-card.ok { border-color:rgba(74,222,128,.4); } .kc-card.bad { border-color:rgba(248,113,113,.4); }
.kc-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; } .kc-card dl { display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:0; } .kc-card dt { color:#9aa2b1; } .kc-card dd { margin:0; }
.kc-bad { color:#f87171; margin-top:14px; }
.ticker { position:fixed; left:18px; bottom:18px; z-index:60; display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:12px; background:rgba(17,18,22,.92); border:1px solid #2a2a33; color:#e4e7ee; font:500 13.5px 'Manrope', system-ui; backdrop-filter:blur(10px); transform:translateY(20px); opacity:0; transition:.35s; pointer-events:none; }
.ticker.on { transform:none; opacity:1; } .tk-dot { width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 4px rgba(74,222,128,.15); }
@media (max-width:600px) { .ticker { left:10px; right:auto; bottom:80px; } }
.lu-form { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; } .lu-form input { flex:1; min-width:200px; }
.lu-sec { margin-bottom:16px; } .lu-sec h4 { margin:0 0 6px; font:700 14px 'Space Grotesk', system-ui; } .lu-sec h4 small { color:#9aa2b1; font-weight:500; }
.lu-row { display:grid; gap:3px; padding:10px 12px; border:1px solid #1f1f26; border-radius:10px; margin-bottom:6px; background:#0f1014; position:relative; } .lu-row b { font-size:14px; }
.lu-refund { position:absolute; right:10px; top:10px; color:#fca5a5 !important; border-color:rgba(248,113,113,.4) !important; }
.rm-adm { grid-template-columns:1fr auto auto; align-items:center; } .rm-adm .muted { grid-column:1; } .rm-adm select { grid-row:1 / 3; grid-column:2; } .rm-adm .btn { grid-row:1 / 3; grid-column:3; }
.page-hero { max-width: 1240px !important; margin-left: auto !important; margin-right: auto !important; padding-left: clamp(20px, 4vw, 48px) !important; padding-right: clamp(20px, 4vw, 48px) !important; box-sizing: border-box; }

/* ============ creator codes */
.cc-box { display:flex; justify-content:center; margin:0 auto 16px; }
.cc-form, .cc-on { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 10px 8px 16px; border-radius:999px; border:1px dashed rgba(255,255,255,.22); background:rgba(255,255,255,.02); color:#c9ced8; font-size:14px; }
.cc-form input { background:#0b0c0f; color:#f4f4f5; border:1px solid #2a2a33; border-radius:999px; padding:6px 12px; width:130px; font:700 13px 'JetBrains Mono', monospace; text-transform:uppercase; letter-spacing:.05em; }
.cc-msg { color:#f87171; } .cc-on { border-style:solid; border-color:rgba(74,222,128,.45); background:rgba(74,222,128,.07); }
.cc-tag, .cr-code { font:800 13px 'JetBrains Mono', monospace; letter-spacing:.08em; padding:3px 10px; border-radius:7px; color:#0a0b0e; background:linear-gradient(90deg,#22d3ee,#e879a6); }
.cr-code { font-size:.8em; vertical-align:middle; } .cr-code.sm { font-size:12px; margin-right:6px; }
.cr-hero { display:flex; justify-content:space-between; gap:18px; align-items:flex-end; flex-wrap:wrap; padding:18px; border-radius:16px; border:1px solid #23232b; background:linear-gradient(135deg, rgba(34,211,238,.07), rgba(232,121,166,.07)); margin-bottom:14px; }
.cr-hero h2 { margin:6px 0; font:700 24px 'Space Grotesk', system-ui; } .cr-link { display:flex; gap:6px; } .cr-link input { background:#0b0c0f; color:#e4e7ee; border:1px solid #2a2a33; border-radius:10px; padding:8px 10px; width:300px; font:13px 'JetBrains Mono', monospace; }
.cr-form { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:12px 0 16px; } .cr-form input { background:#0b0c0f; color:#f4f4f5; border:1px solid #2a2a33; border-radius:10px; padding:9px 12px; font:14px 'Manrope', system-ui; min-width:200px; }
.cr-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:14px; align-items:center; padding:12px 14px; border:1px solid #1f1f26; border-radius:12px; background:#0f1014; margin-bottom:8px; } .cr-row.off { opacity:.55; }
@media (max-width:900px) { .cr-row { grid-template-columns:1fr; } }
.cr-row-main { display:grid; gap:3px; min-width:0; } .cr-row-nums { display:flex; gap:14px; font-size:13px; color:#c3c9d4; } .cr-owed { color:#fbbf24; }
.cr-row-btns { display:flex; gap:6px; align-items:center; flex-wrap:wrap; } .cr-row-btns input { background:#0b0c0f; color:#f4f4f5; border:1px solid #2a2a33; border-radius:8px; padding:4px 6px; }

/* creators + live */
.crs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; }
.crs-card { background:#111216; border:1px solid #23232b; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.crs-card.live { border-color:rgba(239,68,68,.5); box-shadow:0 12px 40px -22px rgba(239,68,68,.6); }
.crs-thumb { position:relative; display:block; aspect-ratio:16/9; background:#000; } .crs-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.crs-live { display:inline-block; font:800 11px 'Manrope', system-ui; letter-spacing:.08em; color:#fff; background:#e11d48; padding:3px 8px; border-radius:6px; }
.crs-thumb .crs-live { position:absolute; left:10px; top:10px; } .crs-view { position:absolute; left:10px; bottom:10px; font:600 12px 'Manrope'; color:#fff; background:rgba(0,0,0,.65); padding:2px 8px; border-radius:6px; }
.crs-body { padding:14px 14px 6px; display:grid; gap:4px; } .crs-body b { font:700 16px 'Space Grotesk', system-ui; } .crs-title { margin:0; font-size:13.5px; color:#d7dce5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.crs-foot { display:flex; gap:8px; align-items:center; padding:10px 14px 14px; margin-top:auto; flex-wrap:wrap; }
.crs-code { background:rgba(34,211,238,.08); border:1px dashed rgba(34,211,238,.45); color:#cffafe; border-radius:10px; padding:7px 12px; font:500 13px 'Manrope', system-ui; cursor:pointer; } .crs-code b { font-family:'JetBrains Mono', monospace; letter-spacing:.05em; }
.live-strip .ls-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; } .live-strip h2 { margin:0; font:700 22px 'Space Grotesk', system-ui; display:flex; gap:10px; align-items:center; }
html[data-theme="light"] .crs-card { background:#fff !important; border-color:#e3e6ee !important; }

/* creator program */
.cc-link { background:none; border:0; color:#9aa2b1; font:500 13.5px 'Manrope', system-ui; cursor:pointer; text-decoration:underline; text-underline-offset:3px; } .cc-link:hover { color:#e4e7ee; }
.cp-perks { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:24px; } @media (max-width:900px) { .cp-perks { grid-template-columns:1fr 1fr; } }
.cp-perk { padding:18px; border-radius:16px; background:#111216; border:1px solid #23232b; display:grid; gap:4px; } .cp-perk b { font:800 30px 'Space Grotesk', system-ui; background:linear-gradient(90deg,#67e8f9,#f0abfc); -webkit-background-clip:text; background-clip:text; color:transparent; } .cp-perk span { color:#c3c9d4; font-size:14px; }
.cp-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; } @media (max-width:900px) { .cp-grid { grid-template-columns:1fr; } }
.cp-how, .cp-apply { background:#111216; border:1px solid #23232b; border-radius:18px; padding:22px; } .cp-how h2, .cp-apply h2 { margin:0 0 10px; font:700 22px 'Space Grotesk', system-ui; }
.cp-form { display:grid; gap:12px; } .cp-form label { display:grid; gap:6px; font-size:13px; color:#c3c9d4; } .cp-form textarea, .cp-form input { background:#0b0c0f; color:#f4f4f5; border:1px solid #2a2a33; border-radius:10px; padding:10px 12px; font:14.5px 'Manrope', system-ui; }
.cp-tw { background:#9146ff !important; border-color:#9146ff !important; color:#fff !important; display:inline-flex; gap:8px; align-items:center; justify-content:center; }
html[data-theme="light"] .cp-perk, html[data-theme="light"] .cp-how, html[data-theme="light"] .cp-apply { background:#fff !important; border-color:#e3e6ee !important; }

/* Path to Creator */
.cp-app { margin-top:6px; } .cp-card { background:#111216; border:1px solid #23232b; border-radius:18px; padding:24px; max-width:860px; } .cp-card h2 { margin:0 0 8px; font:700 22px 'Space Grotesk', system-ui; }
.cp-err { color:#fca5a5; background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.3); border-radius:10px; padding:10px 14px; max-width:860px; }
.pg-list { display:grid; gap:10px; margin:14px 0 18px; }
.pg { padding:12px 14px; border-radius:12px; background:#0d0e12; border:1px solid #23232b; } .pg.met { border-color:rgba(74,222,128,.35); } .pg.locked { opacity:.7; }
.pg-top { display:flex; align-items:center; gap:10px; } .pg-top b { font-size:14.5px; } .pg-num { margin-left:auto; color:#9aa2b1; font-size:13px; }
.pg-ic { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font:800 12px system-ui; background:#1d1d25; color:#0a0b0e; flex:none; } .pg.met .pg-ic { background:#4ade80; } .pg.locked .pg-ic { background:none; color:inherit; }
.pg-bar { height:7px; border-radius:4px; background:#1d1d25; margin-top:9px; overflow:hidden; } .pg-bar i { display:block; height:100%; background:linear-gradient(90deg,#9146ff,#e879a6); border-radius:4px; } .pg.met .pg-bar i { background:#4ade80; }
.cp-ch { display:flex; gap:12px; align-items:center; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid #1d1d24; } .cp-ch img { width:52px; height:52px; border-radius:50%; border:2px solid #9146ff; } .cp-ch b { display:block; font-size:17px; } .cp-ch .btn { margin-left:auto; }
.cp-wait { padding:14px; border-radius:12px; background:rgba(145,70,255,.08); border:1px solid rgba(145,70,255,.3); color:#d7d2ff; } .cp-wait small { display:block; color:#a79fd6; margin-top:4px; }
.cp-steps { list-style:none; padding:0; margin:0 0 16px; display:flex; gap:6px; flex-wrap:wrap; } .cp-steps li { display:flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:999px; background:#0d0e12; border:1px solid #23232b; color:#9aa2b1; font:600 13px 'Manrope', system-ui; }
.cp-steps li span { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:#1d1d25; font-size:12px; } .cp-steps li.on { color:#fff; border-color:#9146ff; } .cp-steps li.on span { background:#9146ff; color:#fff; } .cp-steps li.done span { background:#4ade80; color:#0a0b0e; }
.cp-form label { display:grid; gap:6px; margin-bottom:12px; } .chk-row { display:flex !important; align-items:center; gap:8px; color:#d7dce5 !important; font-size:14px !important; } .chk-row input { width:auto; }
.cp-nav { display:flex; justify-content:space-between; margin-top:10px; }
.cp-terms { padding:14px; border-radius:12px; background:#0d0e12; border:1px solid #23232b; margin-bottom:12px; } .cp-terms ul { margin:8px 0 0; padding-left:18px; color:#c3c9d4; line-height:1.7; font-size:14px; }
.cp-tl { list-style:none; padding:0; margin:16px 0 0; display:grid; gap:12px; } .cp-tl li { display:flex; gap:12px; align-items:center; color:#9aa2b1; } .cp-tl span { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#1d1d25; font-weight:800; }
.cp-tl li.done span { background:#4ade80; color:#0a0b0e; } .cp-tl li.on span { background:#9146ff; color:#fff; box-shadow:0 0 0 5px rgba(145,70,255,.2); } .cp-tl b { display:block; color:#eef1f6; } .cp-tl small { color:#9aa2b1; }
.cp-foot { margin-top:16px; } .cp-foot a { color:#67e8f9; }
html[data-theme="light"] .cp-card, html[data-theme="light"] .pg, html[data-theme="light"] .cp-terms { background:#fff !important; border-color:#e3e6ee !important; }

/* footer: brand + 5 even columns on one row */
.foot-grid { display:grid !important; grid-template-columns: minmax(200px,1.5fr) repeat(5, minmax(0,1fr)) !important; gap: 32px 28px !important; align-items:start; padding-top: 48px; padding-bottom: 36px; }
.foot-grid > div { display:flex; flex-direction:column; gap:10px; min-width:0; }
.foot-grid > div > b { margin-bottom:4px; font-size:11.5px; letter-spacing:.12em; }
.foot-grid > div > a { font-size:14px; line-height:1.3; }
.foot-brand p { margin:6px 0 0; max-width:240px; line-height:1.5; }
@media (max-width:1100px) { .foot-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width:600px) { .foot-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 28px 20px !important; } }
.foot-base { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:18px; padding-bottom:24px; border-top:1px solid rgba(255,255,255,.06); }

/* alignment pass: page headers line up with the content under them; empty states use the full width */
.page-hero { max-width: 1560px !important; }
.crs-grid > p, .vgrid > p, .rm-cols > p, .hc-list > p, .pl-list > p { grid-column: 1 / -1; max-width: 640px; }
main > section + section { margin-top: 0; }
.block { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(28px, 4vw, 48px); }
.page-hero { padding-bottom: 8px !important; }

/* crisp text: no grain overlay over the page; slightly heavier small text so it renders cleanly on Windows */
body::before { content: none !important; display: none !important; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; font-weight: 500; }
p, li, small, .muted, .lead, .sub, label, td, dd { font-weight: 500; }
h1, h2, h3, b, strong, .btn, .links a { font-weight: 700; }
.lead { font-weight: 500; }

/* Turnstile: hidden unless Cloudflare needs a click */
.ts-box { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:2147483000; display:none; padding:10px; border-radius:14px; background:#111216; border:1px solid #2a2a33; box-shadow:0 20px 50px rgba(0,0,0,.5); }
.ts-box.show { display:block; }

/* Creator program: Twitch / YouTube paths */
.cp-plats { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:14px; }
.cp-plat { border:1px solid var(--line,#2a2a33); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:10px; }
.cp-plat h3 { margin:0; display:flex; align-items:center; gap:8px; font-size:17px; }
.cp-dot { width:10px; height:10px; border-radius:50%; } .cp-dot.tw { background:#9146ff; } .cp-dot.yt { background:#ff0033; }
.btn.cp-yt { background:#ff0033; border-color:#ff0033; color:#fff; }
.cp-ytf { display:flex; gap:8px; flex-wrap:wrap; } .cp-ytf input { flex:1; min-width:180px; }
.cp-code { display:flex; gap:8px; align-items:center; } .cp-code code { font-size:20px; letter-spacing:2px; padding:8px 14px; border-radius:10px; background:rgba(255,0,51,.1); border:1px dashed #ff0033; }
.crs-yt { color:#ff4d6d; }

/* Plugin update badges */
.pl-badge.upd { background:rgba(124,247,176,.15); color:#7cf7b0; border:1px solid rgba(124,247,176,.5); animation:plUpd 2s ease-in-out infinite; }
.pl-badge.cur { background:rgba(255,255,255,.06); color:#9a9aab; }
.pl-badge.fresh { background:rgba(120,160,255,.14); color:#9db8ff; }
@keyframes plUpd { 50% { box-shadow:0 0 0 4px rgba(124,247,176,.12); } }
.pd-upd { margin:0 0 14px; padding:12px 14px; border-radius:12px; background:rgba(124,247,176,.08); border:1px solid rgba(124,247,176,.35); }
@media (prefers-reduced-motion:reduce) { .pl-badge.upd { animation:none; } }

/* Creator program tidy-up */
.cp { max-width:1000px; margin-inline:auto; }
.cp-perks { grid-template-columns:repeat(4,minmax(0,1fr)); }
.cp-card { max-width:none; }
.cp-plats { grid-template-columns:1fr; }
.cp-plat h3 { display:none; }
.cp-tabs { display:inline-flex; gap:4px; padding:4px; margin-bottom:18px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid #23232b; }
.cp-tab { display:flex; align-items:center; gap:8px; padding:8px 14px; border:0; border-radius:9px; background:none; color:#9a9aab; font:600 14px inherit; cursor:pointer; }
.cp-tab.on { background:#1c1d24; color:#fff; }
.cp-tab:hover:not(.on) { color:#d6d6e0; }
html[data-theme="light"] .cp-tabs { background:#f2f3f7; border-color:#e3e6ee; } html[data-theme="light"] .cp-tab.on { background:#fff; color:#111; }
.cp-ch { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .cp-ch > div { flex:1; min-width:180px; }
@media (max-width:700px) { .cp-perks { grid-template-columns:1fr 1fr; } }

/* Legal pages */
.legal-doc { max-width:760px; margin:0 auto; line-height:1.7; }
.legal-doc h2 { font:700 20px 'Space Grotesk', system-ui; margin:28px 0 8px; }
.legal-doc ul { padding-left:20px; } .legal-doc li { margin:4px 0; }
.legal-doc code { font-size:13px; padding:1px 6px; border-radius:6px; background:rgba(255,255,255,.07); }

/* Account: two-factor sign-in */
.acct-sec { margin:16px 0; padding:16px 18px; border-radius:14px; background:#111216; border:1px solid #23232b; }
.acct-sec-top { display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; } .acct-sec-top p { margin:4px 0 0; }
.sec-on { display:inline-block; padding:1px 8px; margin-right:6px; border-radius:99px; background:rgba(74,222,128,.15); color:#4ade80; font-weight:700; font-size:12px; }
#acSecBody { margin-top:14px; }
.sec-setup { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; margin-bottom:12px; }
.sec-qr { width:180px; height:180px; border-radius:12px; background:#fff; padding:8px; image-rendering:pixelated; }
.sec-steps { margin:0; padding-left:18px; flex:1; min-width:220px; line-height:1.7; }
.sec-key { display:inline-block; margin:4px 0; padding:6px 10px; border-radius:8px; background:rgba(255,255,255,.06); letter-spacing:1px; font-size:14px; word-break:break-all; }
.sec-codes { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; margin:10px 0 12px; }
.sec-codes code { padding:8px; border-radius:8px; text-align:center; background:rgba(255,255,255,.06); letter-spacing:1px; }
html[data-theme="light"] .acct-sec { background:#fff; border-color:#e3e6ee; }

/* Status: 30-day uptime bars */
.stat-svc { padding:4px 0 12px; border-bottom:1px solid rgba(255,255,255,.06); }
.stat-svc:last-child { border-bottom:0; }
.ubars { display:grid; grid-template-columns:repeat(30,1fr); gap:3px; margin:6px 0 4px; }
.ub { display:block; height:26px; border-radius:3px; background:#2a2b33; }
.ub.ok { background:#22c55e; } .ub.warn { background:#f59e0b; } .ub.bad { background:#ef4444; }
.ub:hover { filter:brightness(1.25); }
.ubar-foot { display:flex; justify-content:space-between; font-size:11px; color:#80808f; }
html[data-theme="light"] .ub.none { background:#e5e7eb; } html[data-theme="light"] .stat-svc { border-color:#eceef3; }

/* Plugin "Notify me" + policy notice form */
.pl-notify { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid #23232b; }
.pl-notify span { flex-basis:100%; font-size:14px; color:#c3c9d4; } .pl-notify input { flex:1; min-width:180px; } .pl-notify small { flex-basis:100%; color:#9a9aab; }
.pol-form { display:grid; gap:8px; } .pol-form textarea { resize:vertical; }
html[data-theme="light"] .pl-notify { background:#f6f7fa; border-color:#e3e6ee; }

/* Role badge in the nav: keep avatar, role and name on one centred line */
.nav-acct.rolenav { display:inline-flex; align-items:center; line-height:1; padding:4px 14px 4px 4px; }
.nav-acct.rolenav .ic { flex:none; }
.nav-acct.rolenav > :not(.ic) { display:inline-flex; align-items:center; gap:6px; line-height:1; }
.nav-acct.rolenav b, .nav-acct.rolenav i { line-height:1; display:inline-block; }
.nav-acct.rolenav b { padding-top:1px; }