/* Twisted Studio website — one stylesheet for the public site, the account area and admin. */
:root {
  --bg: #0c0d16; --bg2: #11121e; --card: #151726; --card2: #1a1c2e; --line: #262940; --text: #e9eaf4; --dim: #9a9db8;
  --acc: #5b8cff; --acc2: #8b5bff; --ok: #3ccf8e; --warn: #f2b84b; --bad: #ff5c7a;
  --grad: linear-gradient(135deg, var(--acc), var(--acc2));
  --r: 14px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #9db7ff; text-decoration: none; } a:hover { text-decoration: underline; }
h1 { font-size: clamp(26px, 4vw, 34px); line-height: 1.2; margin: .2em 0 .5em; }
h2 { font-size: 19px; margin: 0 0 .6em; } h3 { font-size: 16px; margin: 1.2em 0 .5em; }
p { margin: .5em 0 1em; }
code, .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.dim { color: var(--dim); } .small { font-size: 13px; } .center { text-align: center; } .nowrap { white-space: nowrap; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.page { padding-top: 28px; padding-bottom: 60px; min-height: 60vh; }
.narrow { max-width: 440px; margin: 20px auto; }
.narrow-text { max-width: 760px; }
.prose { max-width: 820px; } .prose h2 { margin-top: 1.6em; }
.row { display: flex; align-items: center; } .row.between { justify-content: space-between; gap: 12px; flex-wrap: wrap; } .row.gap { gap: 10px; flex-wrap: wrap; }
.inline { display: inline; margin: 0; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* header / footer */
header.top { position: sticky; top: 0; z-index: 10; background: rgba(12, 13, 22, .85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topin { display: flex; align-items: center; gap: 16px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; font-size: 18px; }
.brand:hover { text-decoration: none; } .brand b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mainnav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.mainnav a { color: var(--dim); font-weight: 500; } .mainnav a.on, .mainnav a:hover { color: var(--text); text-decoration: none; }
.mainnav .btn { color: #fff; }
.linkish { background: none; border: 0; color: var(--dim); font: inherit; font-weight: 500; cursor: pointer; padding: 0; } .linkish:hover { color: var(--text); }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 4px 10px; font-size: 18px; cursor: pointer; }
@media (max-width: 760px) {
  .menu-btn { display: block; }
  .mainnav { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--bg2); border-bottom: 1px solid var(--line); padding: 8px 16px 14px; }
  .mainnav.open { display: flex; } .mainnav > * { padding: 9px 0; }
}
.adminbar { background: var(--bg2); border-bottom: 1px solid var(--line); }
.adminbar .wrap { display: flex; gap: 6px; overflow-x: auto; padding-top: 8px; padding-bottom: 8px; }
.adminbar a { color: var(--dim); padding: 5px 12px; border-radius: 8px; white-space: nowrap; font-size: 14px; }
.adminbar a.on { background: var(--card2); color: var(--text); } .adminbar a:hover { text-decoration: none; color: var(--text); }
footer.foot { border-top: 1px solid var(--line); background: var(--bg2); margin-top: 40px; }
.footin { padding-top: 28px; padding-bottom: 28px; display: grid; gap: 14px; }
.footin nav { display: flex; flex-wrap: wrap; gap: 6px 18px; } .footin nav a { color: var(--dim); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 10px; padding: 10px 18px; font: 600 15px system-ui, sans-serif; color: #fff; cursor: pointer; background: var(--grad); box-shadow: 0 4px 18px rgba(91, 140, 255, .18); text-decoration: none; }
.btn:hover { text-decoration: none; filter: brightness(1.1); }
.btn.small { padding: 6px 12px; font-size: 13px; border-radius: 8px; box-shadow: none; }
.btn.big { padding: 14px 24px; font-size: 16px; }
.btn.wide { width: 100%; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--text); box-shadow: none; } .btn.ghost:hover { border-color: var(--acc); }
.btn.danger { color: var(--bad); } .btn.danger:hover { border-color: var(--bad); }
.btn.paypal { background: #ffc439; color: #111; box-shadow: none; }
.btn[disabled] { opacity: .45; cursor: default; filter: none; }

/* cards, grids */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; margin-bottom: 18px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; }
.grid2 > .card { margin-bottom: 0; } .grid2 + .card, .grid2 + .grid2 { margin-top: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.hero-card { border-color: rgba(139, 91, 255, .5); background: linear-gradient(180deg, rgba(139, 91, 255, .12), var(--card)); }

/* flashes and pills */
.flash { border-radius: 10px; padding: 11px 14px; margin: 0 0 16px; border: 1px solid; }
.flash.ok { background: rgba(60, 207, 142, .1); border-color: rgba(60, 207, 142, .4); }
.flash.warn { background: rgba(242, 184, 75, .1); border-color: rgba(242, 184, 75, .4); }
.flash.bad { background: rgba(255, 92, 122, .1); border-color: rgba(255, 92, 122, .45); }
.pill { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; border: 1px solid; white-space: nowrap; }
.pill.ok { color: var(--ok); border-color: rgba(60, 207, 142, .45); } .pill.warn { color: var(--warn); border-color: rgba(242, 184, 75, .45); }
.pill.bad { color: var(--bad); border-color: rgba(255, 92, 122, .45); } .pill.off { color: var(--dim); border-color: var(--line); }

/* forms */
.form { display: grid; gap: 14px; } .form.tight { margin-top: 14px; gap: 8px; }
.form label { display: grid; gap: 6px; font-weight: 500; font-size: 14px; }
.form label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
input, select, textarea { background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; font: inherit; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(91, 140, 255, .45); border-color: var(--acc); }
input[type=checkbox] { width: auto; }
.row input, .row select { width: auto; flex: 1 1 160px; }
.inline-form { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; }
.searchbar { margin-bottom: 16px; } .searchbar input { flex: 3 1 260px; }

/* tables */
.tablewrap { overflow-x: auto; margin: 0 -4px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { text-align: left; color: var(--dim); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
td, th { border-bottom: 1px solid var(--line); padding: 9px 8px; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tr.faded td { opacity: .5; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
pre.code { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; overflow: auto; font-size: 12px; max-height: 520px; }
details summary { cursor: pointer; }

/* facts lists */
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 16px; }
dl.facts dt { color: var(--dim); } dl.facts dd { margin: 0; overflow-wrap: anywhere; }
ul.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
ul.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
ul.checklist li.ok b { color: var(--ok); } ul.checklist li.no b { color: var(--bad); }
ol.steps { padding-left: 20px; } ol.steps li { margin: 6px 0; }

/* tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tabs a { padding: 9px 14px; color: var(--dim); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.on { color: var(--text); border-bottom-color: var(--acc); } .tabs a:hover { text-decoration: none; color: var(--text); }

/* license key */
.keybox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.key { font: 700 18px ui-monospace, Consolas, monospace; letter-spacing: .05em; padding: 10px 14px; border-radius: 10px; background: var(--bg2); border: 1px dashed var(--acc2); }

/* home page */
.home .section { padding-top: 40px; padding-bottom: 20px; }
.hero { padding: 80px 0 50px; text-align: center; background: radial-gradient(900px 400px at 50% -10%, rgba(139, 91, 255, .25), transparent 70%), radial-gradient(600px 300px at 80% 10%, rgba(91, 140, 255, .18), transparent 70%); }
.hero h1 { font-size: clamp(32px, 6vw, 56px); max-width: 860px; margin: 0 auto .3em; letter-spacing: -.02em; }
.hero .lead { max-width: 680px; margin: 0 auto 28px; }
.hero .row { justify-content: center; }
.eyebrow { color: var(--acc); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
.lead { font-size: 18px; color: var(--dim); }
.ticks { list-style: none; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; color: var(--dim); font-size: 14px; }
.ticks li::before { content: "✓ "; color: var(--ok); }
.section-title { font-size: 26px; text-align: center; margin-bottom: 22px; }
.product h3, .product h2 { font-size: 22px; margin: .2em 0; }
.ptag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--acc); background: rgba(91, 140, 255, .12); border-radius: 99px; padding: 3px 10px; }
ul.checks { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 8px; }
ul.checks li { padding-left: 24px; position: relative; } ul.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.feature .ico { font-size: 28px; } .feature h3 { margin: .4em 0 .2em; }
details { border-bottom: 1px solid var(--line); padding: 12px 0; } details summary { font-weight: 600; }

/* plans */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; margin: 10px 0 20px; }
.plan-mini { display: grid; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; color: var(--text); }
.plan-mini:hover { border-color: var(--acc); text-decoration: none; }
.price { font-size: 34px; font-weight: 800; margin: 6px 0; } .price small { font-size: 14px; color: var(--dim); font-weight: 500; }
.plan { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; }
.plan ul.checks { flex: 1; }
.plan.featured { border-color: var(--acc2); box-shadow: 0 10px 40px rgba(139, 91, 255, .2); }
.plan.picked { outline: 2px solid var(--acc); }
.plan.mine { border-color: var(--ok); }
.plan h2 { font-size: 22px; margin: 0; }
.ribbon { position: absolute; top: -12px; right: 18px; background: var(--grad); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 99px; }
.plans-mini { display: grid; gap: 10px; }
.pm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.pm b { min-width: 52px; } .pm span { color: var(--dim); flex: 1; font-size: 14px; } .pm.on { border-color: var(--ok); } .pm em { color: var(--ok); font-style: normal; font-size: 13px; }

/* admin */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: grid; gap: 2px; }
.kpi span { color: var(--dim); font-size: 13px; } .kpi b { font-size: 26px; } .kpi em { color: var(--dim); font-style: normal; font-size: 13px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 10px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.bar i { display: block; width: 100%; min-height: 2px; background: var(--grad); border-radius: 5px 5px 2px 2px; }
.bar span { font-size: 11px; color: var(--dim); }
.wrapr { margin-top: 6px; }

/* support threads */
.thread { display: grid; gap: 12px; margin: 14px 0 18px; }
.msg { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg2); max-width: 760px; }
.msg.staff { border-color: rgba(91, 140, 255, .45); background: rgba(91, 140, 255, .07); margin-left: auto; }
.msg-head { margin-bottom: 6px; } .msg-body { white-space: normal; overflow-wrap: anywhere; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inline-details { display: inline-block; vertical-align: top; } .inline-details summary { color: #9db7ff; }
.inline-details form { min-width: 240px; margin-top: 6px; }
.cancelbox { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; } .cancelbox summary { color: var(--bad); }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin: 10px 0; }
.codes code { background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; text-align: center; }
.setupkey { background: var(--bg2); padding: 2px 6px; border-radius: 6px; letter-spacing: .08em; }
.refundbox { border: 1px solid rgba(242, 184, 75, .45); border-radius: 12px; padding: 14px; margin: 12px 0; }
/* receipts */
.receipt { max-width: 760px; margin: 0 auto; }
.receipt h1 { margin-top: 18px; }
.receipt .brand span { color: var(--text); font-weight: 800; }
table.lines { margin: 18px 0; } table.lines .num { text-align: right; white-space: nowrap; } table.lines tr.total td { font-weight: 800; font-size: 16px; border-top: 2px solid var(--line); }
@media print {
  header.top, footer.foot, .adminbar, .noprint, .flash { display: none !important; }
  body { background: #fff; color: #000; } .card { border: 0; background: #fff; }
  .dim, dl.facts dt { color: #555; } td, th { border-color: #ccc; } a { color: #000; }
}
.reason { display: grid; grid-template-columns: minmax(150px, 260px) 1fr 40px; align-items: center; gap: 10px; margin: 6px 0; font-size: 14px; }
.reason i { display: block; height: 10px; border-radius: 5px; background: var(--grad); min-width: 4px; } .reason b { text-align: right; }

/* ── light theme: follows the computer unless chosen (footer ◐, theme.js) ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --bg: #f5f6fb; --bg2: #eceef6; --card: #ffffff; --card2: #f1f2f8; --line: #dcdfeb; --text: #191b29; --dim: #5d6178; }
  :root:not([data-theme="dark"]) header.top { background: rgba(245, 246, 251, .88); }
  :root:not([data-theme="dark"]) a:not(.btn) { color: #3b62d6; }
}
:root[data-theme="light"] { --bg: #f5f6fb; --bg2: #eceef6; --card: #ffffff; --card2: #f1f2f8; --line: #dcdfeb; --text: #191b29; --dim: #5d6178; }
:root[data-theme="light"] header.top { background: rgba(245, 246, 251, .88); }
:root[data-theme="light"] a:not(.btn) { color: #3b62d6; }

/* ── accessibility ── */
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--card); color: var(--text); padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ── site notice + admin search ── */
.announce { background: rgba(91, 140, 255, .14); border-bottom: 1px solid rgba(91, 140, 255, .35); font-size: 14px; padding: 8px 0; }
.announce.warn { background: rgba(242, 184, 75, .16); border-color: rgba(242, 184, 75, .45); }
.announce.bad { background: rgba(255, 92, 122, .14); border-color: rgba(255, 92, 122, .45); }
.adminsearch { margin-left: auto; } .adminsearch input { padding: 5px 10px; font-size: 13px; min-width: 230px; }

/* ── forms / small bits ── */
.pwmeter { margin-top: 4px; min-height: 18px; color: var(--dim); } .pwmeter[data-s="0"], .pwmeter[data-s="1"] { color: var(--bad); }
.pwmeter[data-s="2"] { color: var(--warn); } .pwmeter[data-s="3"], .pwmeter[data-s="4"], .pwmeter[data-s="5"] { color: var(--ok); }
.chip { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 99px; background: var(--card2); border: 1px solid var(--line); margin-right: 4px; }
.checklist2 { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.checklist2 li { display: flex; gap: 10px; align-items: center; } .checklist2 li b { width: 22px; text-align: center; }
.checklist2 li.done { color: var(--dim); text-decoration: line-through; } .checklist2 li.done b { color: var(--ok); }
.progress { height: 8px; border-radius: 99px; background: var(--bg2); overflow: hidden; margin: 8px 0 4px; } .progress i { display: block; height: 100%; background: var(--grad); }

/* ── home: how it works + trust ── */
.steps3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; counter-reset: s; }
.steps3 > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; position: relative; }
.steps3 > div::before { counter-increment: s; content: counter(s); position: absolute; top: -12px; left: 18px; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; display: grid; place-items: center; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; color: var(--dim); font-size: 14px; margin: 18px 0 0; }

/* ── pricing: monthly / yearly + comparison ── */
.billing-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; padding: 3px; gap: 3px; margin: 6px 0 4px; }
.billing-switch button { border: 0; background: none; color: var(--dim); padding: 6px 14px; border-radius: 99px; font: inherit; cursor: pointer; }
.billing-switch button[aria-pressed="true"] { background: var(--grad); color: #fff; }
.yr-only { display: none; } body[data-billing="year"] .yr-only { display: block; } body[data-billing="year"] .mo-only { display: none; }
.save { color: var(--ok); font-weight: 700; font-size: 13px; }
table.compare th, table.compare td { text-align: center; } table.compare th:first-child, table.compare td:first-child { text-align: left; }
table.compare td.y { color: var(--ok); font-weight: 700; } table.compare td.n { color: var(--dim); }

/* ── news + status ── */
.post { border-bottom: 1px solid var(--line); padding: 16px 0; } .post:last-child { border-bottom: 0; }
.post h3 { margin: 0 0 4px; } .post .meta { color: var(--dim); font-size: 13px; margin-bottom: 8px; }
.post ul { margin: 6px 0; padding-left: 20px; }
.statusrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.statusrow:last-child { border-bottom: 0; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; background: var(--ok); } .dot.bad { background: var(--bad); } .dot.warn { background: var(--warn); }
.mono.wrapall { overflow-wrap: anywhere; word-break: break-all; }
a.feature { display: block; color: var(--text); } a.feature:hover { text-decoration: none; border-color: var(--acc); }
details > summary { list-style-position: inside; }

/* ── v4 additions ── */
.b { font-weight: 700; } .wrapall { overflow-wrap: anywhere; word-break: break-word; }
.attach { display: inline-block; margin-top: 8px; } .attach img { max-width: min(100%, 420px); max-height: 320px; border-radius: 10px; border: 1px solid var(--line); display: block; }
.product.for-you { border-color: rgba(91, 140, 255, .6); } .ptag.foryou { color: var(--ok); }
/* plan quiz */
.quiz { max-width: 760px; margin: 0 auto; }
.quiz fieldset { border: 0; padding: 0; margin: 0 0 14px; } .quiz legend { font-weight: 600; margin-bottom: 6px; }
.quiz label { display: inline-flex; align-items: center; gap: 6px; margin: 0 14px 6px 0; cursor: pointer; } .quiz input[type=radio] { width: auto; accent-color: var(--acc); }
.quiz-out { font-size: 17px; padding: 12px 14px; border-radius: 10px; background: rgba(91, 140, 255, .12); border: 1px solid rgba(91, 140, 255, .35); }
.plan.picked { outline: 2px solid var(--acc); outline-offset: 2px; }
/* testimonials */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 24px 0; }
.quote { margin: 0; } .quote blockquote { margin: 6px 0 10px; font-size: 15px; } .stars { color: var(--warn); letter-spacing: 2px; }
/* footer: social + newsletter */
.social { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; } .social a { color: var(--dim); font-size: 13px; }
.footnews { margin-top: 12px; max-width: 340px; } .footnews .row { gap: 8px; } .footnews input { padding: 7px 10px; }
/* status history */
.uptime { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; height: 34px; margin: 6px 0; }
.uptime i { border-radius: 3px; background: var(--ok); } .uptime i.warn { background: var(--warn); } .uptime i.bad { background: var(--bad); } .uptime i.none { background: var(--line); }
/* help centre */
.helpsearch { display: flex; gap: 10px; margin: 0 0 18px; max-width: 640px; } .helpsearch input { flex: 1; }
ul.helplist { list-style: none; padding: 0; margin: 0 0 14px; } ul.helplist li { padding: 9px 0; border-bottom: 1px solid var(--line); } ul.helplist li:last-child { border-bottom: 0; }
/* idea board */
.idea { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); } .idea:last-child { border-bottom: 0; } .idea p { margin: 6px 0; }
.votebtn { display: flex; flex-direction: column; align-items: center; min-width: 50px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); color: var(--dim); font: 600 13px system-ui, sans-serif; cursor: pointer; }
.votebtn b { color: var(--text); font-size: 16px; } .votebtn.on { border-color: var(--acc); color: var(--acc); background: rgba(91, 140, 255, .12); } .votebtn:disabled { opacity: .5; cursor: default; }
.idea .reply { border-left: 3px solid var(--acc2); padding-left: 10px; color: var(--text); }
/* admin: activity feed, cohorts, notes */
ul.feed { list-style: none; padding: 0; margin: 0; } ul.feed li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
ul.feed li:last-child { border-bottom: 0; } ul.feed .ico { text-align: center; }
table.cohort td.heat { background: linear-gradient(90deg, rgba(60, 207, 142, .28) var(--p), transparent var(--p)); }
ul.notes { margin: 6px 0 0; } ul.notes li { padding: 3px 0; }
@media (max-width: 640px) { .helpsearch { flex-direction: column; } .uptime { height: 26px; gap: 2px; } .idea { gap: 10px; } }

/* ── v5: PC / phone markers, features page, help, admin extras ── */
.where { display: inline-block; white-space: nowrap; font-size: 12px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); vertical-align: middle; }
.where.pc { color: var(--warn); border-color: rgba(242, 184, 75, .45); } .where.phone { color: var(--acc); border-color: rgba(91, 140, 255, .45); }
.where.both { border-color: transparent; padding: 0 2px; } .where.yes { color: var(--text); border-color: transparent; padding: 0 4px; } .where.no { color: var(--bad); border-color: transparent; padding: 0 4px; }
.pill.plan-plus { color: var(--acc); border-color: rgba(91, 140, 255, .45); } .pill.plan-pro { color: var(--acc2); border-color: rgba(139, 91, 255, .5); }
table.compare tr.group th { text-align: left; padding-top: 18px; color: var(--text); font-size: 13px; text-transform: none; letter-spacing: 0; }
table.compare td:last-child { text-align: left; }
.featlist .feat { display: grid; grid-template-columns: 1fr auto minmax(180px, 34%); gap: 6px 16px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.featlist .feat:last-child { border-bottom: 0; } .feat-where { line-height: 1.9; }
.planincl ul { margin: 8px 0; } .planincl li { padding: 2px 0; }
.plans-mini ul.gain, .plans-mini ul.lose { margin: 6px 0 8px; text-align: left; } ul.gain li { color: var(--ok); } ul.lose li { color: var(--bad); }
.picked-plan { padding: 10px 12px; border-radius: 10px; background: rgba(91, 140, 255, .1); border: 1px solid rgba(91, 140, 255, .3); margin-bottom: 12px; }
.offer { padding: 8px 10px; border-radius: 9px; background: rgba(60, 207, 142, .08); border: 1px solid rgba(60, 207, 142, .3); }
.quiz-note { display: block; margin-top: 6px; color: var(--dim); }
.syscheck { padding: 8px 12px; border-radius: 9px; background: var(--card); border: 1px solid var(--line); }
.crumbs { color: var(--dim); margin-bottom: 10px; } .crumbs a { color: var(--dim); }
.helpful { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.helpgrid { align-items: start; } .helpsuggest { padding: 8px 10px; border-radius: 9px; border: 1px dashed var(--acc); }
.pwshow { margin: -4px 0 4px auto; display: block; }
.totop { position: fixed; right: 18px; bottom: 18px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--card2); color: var(--text); font-size: 18px; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .3); z-index: 20; }
.today { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 14px; margin-bottom: 14px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.bulkbar { margin: 0 0 10px; } .bulkbar input[name=tag] { width: 160px; }
.shotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; }
.shot { margin: 0; } .shot img { width: 100%; border-radius: 10px; border: 1px solid var(--line); display: block; aspect-ratio: 16 / 10; object-fit: cover; background: var(--bg2); }
.incident.open { border-color: rgba(242, 184, 75, .55); } .admin .incident { padding: 10px 0; border-bottom: 1px solid var(--line); }
.msg.internal { border-style: dashed; opacity: .85; background: rgba(242, 184, 75, .06); }
.mrrbars { height: 120px; gap: 2px; } .mrrbars .bar span { display: none; }
.emailbody { white-space: pre-wrap; max-height: 420px; } .emailframe { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 10px; background: #fff; margin-top: 8px; }
@media (max-width: 720px) { .featlist .feat { grid-template-columns: 1fr; } .feat-plan { order: -1; } }
/* calmer for people who asked their system for less motion */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ── v6 ── */
.navsearch { font-size: 15px; text-decoration: none !important; }
.nps { border: 0; padding: 0; margin: 0 0 8px; } .nps legend { font-weight: 600; margin-bottom: 8px; }
.npsrow { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.npsrow label { display: block; cursor: pointer; } .npsrow input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.npsrow span { display: block; text-align: center; padding: 8px 0; border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); font-weight: 600; }
.npsrow input:checked + span { background: var(--grad); color: #fff; border-color: transparent; } .npsrow input:focus-visible + span { outline: 2px solid var(--acc); }
.roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .rm-item { padding: 9px 0; border-bottom: 1px solid var(--line); } .rm-item:last-child { border-bottom: 0; }
.goalbar .progress { margin-top: 8px; }
.capswarn { color: var(--warn); margin: -2px 0 4px; }
.reviewask { border-color: rgba(242, 184, 75, .45); }
.safety ul { margin: 6px 0 0; }
.missing { margin-top: 10px; }
@media (max-width: 760px) { .roadmap { grid-template-columns: 1fr; } .npsrow { grid-template-columns: repeat(6, 1fr); } }