/* SaaS pages (landing, sign-in, account, admin) and the app's account / plan / Premium additions.
   Loaded after styles.css and reuses its tokens. */

/* ───────── site shell ───────── */
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 max(16px, calc((100vw - 1180px) / 2)); background: var(--topbar); border-bottom: 1px solid var(--border); backdrop-filter: blur(18px) saturate(140%); }
.site-brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 800; letter-spacing: -.01em; }
.site-brand small { display: block; color: var(--muted); font-size: 11px; font-weight: 600; }
.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav a { padding: 8px 12px; border-radius: 10px; color: var(--text-soft); font-size: 13px; font-weight: 650; text-decoration: none; }
.site-nav a:hover { background: var(--surface-hover); color: var(--text); }
.site-nav .primary-btn, .site-nav .secondary-btn { display: inline-flex; align-items: center; text-decoration: none; }
.site-nav .primary-btn { color: #04130e; }
.site-main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px 64px; }
.site-footer { padding: 26px 16px; border-top: 1px solid var(--border-soft); color: var(--muted); font-size: 12px; text-align: center; }
.site-footer p { max-width: 820px; margin: 6px auto; }
a { color: var(--accent); }
.btn-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.primary-btn.btn-link { color: #04130e; }
.secondary-btn.btn-link { color: var(--text-soft); }
.wide { width: 100%; }

/* ───────── landing ───────── */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 72px 0 40px; }
.hero h1 { margin: 10px 0 14px; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.05; letter-spacing: -.045em; }
.hero h1 span { background: linear-gradient(120deg, #a7f3d8, #1fbf8f 60%, #60a5fa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { max-width: 560px; color: var(--text-soft); font-size: 16px; line-height: 1.65; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-cta .primary-btn, .hero-cta .secondary-btn { min-height: 46px; padding: 0 22px; font-size: 14px; }
.hero-note { margin-top: 12px; color: var(--muted); font-size: 12.5px; }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hero-card { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--glass); box-shadow: var(--shadow-md), var(--highlight); }
.hero-card .mock-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 11px 12px; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.hero-card .mock-row:last-child { border-bottom: 0; }
.hero-card .mock-row b { font-weight: 750; }
.hero-card .mock-head { display: flex; justify-content: space-between; padding: 4px 12px 12px; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.pill { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 750; white-space: nowrap; background: var(--surface-2); color: var(--text-soft); }
.pill.up { background: var(--green-soft); color: var(--green); } .pill.down { background: var(--red-soft); color: var(--red); }
.pill.warn { background: var(--amber-soft); color: var(--amber); } .pill.info { background: var(--blue-soft); color: var(--blue); }
.pill.accent { background: var(--accent-soft); color: var(--accent); }
.section { padding: 46px 0 10px; }
.section-head { max-width: 680px; margin: 0 auto 26px; text-align: center; }
.section-head h2 { margin: 8px 0; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -.035em; }
.section-head p { color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.feature { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--glass); box-shadow: var(--highlight); }
.feature h3 { margin: 0 0 6px; font-size: 15px; }
.feature p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.feature .tier { float: right; }

/* ───────── pricing ───────── */
.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--glass); box-shadow: var(--highlight); }
.price-card.featured { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-border), var(--shadow-md); }
.price-card .badge-top { position: absolute; top: -11px; left: 24px; }
.price-card h3 { margin: 0; font-size: 18px; }
.price-card .price { font-size: 40px; font-weight: 800; letter-spacing: -.04em; }
.price-card .price small { color: var(--muted); font-size: 14px; font-weight: 600; letter-spacing: 0; }
.price-card p { margin: 0; color: var(--muted); font-size: 13px; }
.price-card ul { flex: 1; margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; align-content: start; }
.price-card li { position: relative; padding-left: 24px; color: var(--text-soft); font-size: 13px; }
.price-card li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.price-card .primary-btn, .price-card .secondary-btn { min-height: 44px; }
.price-card.current { border-color: var(--green); }
.trial-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; padding: 16px 20px; border: 1px solid var(--accent-border); border-radius: var(--radius-lg); background: var(--accent-soft); }
.trial-banner strong { font-size: 15px; }
.trial-banner p { margin: 2px 0 0; color: var(--text-soft); font-size: 13px; }
.faq { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; }
.faq details { padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.disclaimer { max-width: 820px; margin: 30px auto 0; color: var(--muted-2); font-size: 11.5px; line-height: 1.6; text-align: center; }

/* ───────── forms ───────── */
.auth-wrap { display: grid; place-items: center; min-height: calc(100vh - 140px); padding: 40px 0; }
.auth-card { width: min(440px, 100%); padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--glass-solid); box-shadow: var(--shadow-md), var(--highlight); }
.auth-card h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.03em; }
.auth-card > p { margin: 0 0 20px; color: var(--muted); font-size: 13.5px; }
.auth-alt { margin-top: 18px; color: var(--muted); font-size: 13px; text-align: center; }
.form { display: grid; gap: 14px; }
.form label, .input-label { display: grid; gap: 6px; color: var(--text-soft); font-size: 12.5px; font-weight: 650; }
.form label small, .hint { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.input, .form input:not([type=checkbox]):not([type=radio]), .form select, .form textarea, .admin-input {
  width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--input); color: var(--text); font: inherit; font-size: 14px;
  transition: border-color .14s, box-shadow .14s;
}
.form textarea, textarea.input { min-height: 110px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.input:focus, .form input:focus, .form select:focus, .form textarea:focus, .admin-input:focus { outline: none; border-color: var(--accent-border); box-shadow: var(--focus); }
.form .primary-btn { min-height: 44px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.form-error { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--red) 40%, transparent); border-radius: 10px; background: var(--red-soft); color: var(--red); font-size: 13px; }
.form-ok { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); border-radius: 10px; background: var(--green-soft); color: var(--green); font-size: 13px; }
.check { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: 9px !important; font-weight: 500 !important; color: var(--muted) !important; }
.check input { margin-top: 3px; accent-color: var(--accent-strong); }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 64px !important; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.toast.bad { border-color: color-mix(in srgb, var(--red) 50%, transparent); }

/* ───────── account ───────── */
.account-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; padding-top: 28px; }
.card { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--glass); box-shadow: var(--highlight); }
.card + .card { margin-top: 16px; }
.card h2 { margin: 0 0 4px; font-size: 16px; letter-spacing: -.01em; }
.card > p.sub { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.plan-status { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.plan-status .big { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; color: var(--text-soft); text-align: right; overflow-wrap: anywhere; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.choice { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); cursor: pointer; text-align: left; transition: border-color .14s, background .14s; }
.choice:hover { border-color: var(--border-strong); }
.choice.active { border-color: var(--accent-border); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); }
.choice:disabled { cursor: not-allowed; }
.choice strong { font-size: 14px; } .choice span { color: var(--muted); font-size: 12px; } .choice b { font-size: 18px; }
.step-title { margin: 18px 0 8px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pay-box { display: grid; gap: 14px; margin-top: 4px; padding: 18px; border: 1px solid var(--accent-border); border-radius: var(--radius-lg); background: var(--accent-soft); }
.pay-amount { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.copy-field { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--input); font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.copy-field span { flex: 1; min-width: 0; }
.warn-box { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); border-radius: 11px; background: var(--amber-soft); color: var(--text-soft); font-size: 12.5px; line-height: 1.55; }
.warn-box b { color: var(--amber); }
.status-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.spinner { width: 14px; height: 14px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.table-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: 12px; }
.table-wrap .data-table td { height: 46px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.muted { color: var(--muted); }
.stack { display: grid; gap: 10px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ───────── admin ───────── */
.admin-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding-top: 22px; }
.admin-tabs { position: sticky; top: 86px; align-self: start; display: grid; gap: 4px; }
.admin-tabs button { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text-soft); font-size: 13px; font-weight: 650; text-align: left; cursor: pointer; }
.admin-tabs button:hover { background: var(--surface-hover); }
.admin-tabs button.active { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-border); }
.admin-tabs .count { min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; text-align: center; }
.admin-tabs .count:empty, .admin-tabs .count[data-n="0"] { display: none; }
.admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-head h1 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.admin-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--glass); box-shadow: var(--highlight); }
.stat span { display: block; color: var(--muted); font-size: 12px; font-weight: 650; }
.stat strong { display: block; margin-top: 4px; font-size: 24px; letter-spacing: -.03em; }
.stat small { color: var(--muted); font-size: 11.5px; }
.stat.alert { border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.toolbar .admin-input { width: auto; min-width: 220px; flex: 1; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(3, 5, 14, .55); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; width: min(620px, 100vw); overflow-y: auto; padding: 22px; background: var(--glass-solid); border-left: 1px solid var(--border); box-shadow: var(--shadow-md); backdrop-filter: blur(20px); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.drawer-head h2 { margin: 0; font-size: 20px; }
.thread { display: grid; gap: 10px; margin: 12px 0; }
.msg { max-width: 88%; padding: 10px 13px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.staff { justify-self: end; border-color: var(--accent-border); background: var(--accent-soft); }
.msg small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; }
.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.net-grid { display: grid; gap: 10px; }
.net-grid label { display: grid; grid-template-columns: 210px 1fr; align-items: center; gap: 10px; }

/* ───────── in the app: account menu, locks, Premium ───────── */
.user-menu-wrap { position: relative; }
.user-chip { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px 0 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; }
.user-chip .avatar { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(140deg, #3ee0b0, #16a37a); color: #fff; font-size: 12px; font-weight: 800; }
.user-chip .who { display: grid; text-align: left; line-height: 1.15; }
.user-chip .who strong { font-size: 12.5px; } .user-chip .who span { color: var(--muted); font-size: 10.5px; }
.user-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 250px; padding: 8px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--glass-solid); box-shadow: var(--shadow-md); backdrop-filter: blur(18px); }
.user-menu .menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border-soft); margin-bottom: 6px; font-size: 12px; color: var(--muted); }
.user-menu .menu-head strong { display: block; color: var(--text); font-size: 13px; }
.user-menu a, .user-menu button { display: flex; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text-soft); font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; }
.user-menu a:hover, .user-menu button:hover { background: var(--surface-hover); color: var(--text); }
.nav-item.locked .nav-text { opacity: .55; }
.nav-lock { margin-left: auto; color: var(--muted-2); font-size: 10px; font-weight: 800; letter-spacing: .04em; }
body.sidebar-collapsed .nav-lock { display: none; }
.plan-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--accent-border); border-radius: 12px; background: var(--accent-soft); font-size: 13px; }
.plan-banner.warn { border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: var(--amber-soft); }
.locked-card { max-width: 620px; margin: 40px auto; padding: 30px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--glass); text-align: center; box-shadow: var(--highlight); }
.locked-card h2 { margin: 8px 0; font-size: 22px; letter-spacing: -.03em; }
.locked-card p { color: var(--muted); }
.locked-card .row-actions { justify-content: center; margin-top: 16px; }
.lock-icon { width: 46px; height: 46px; margin: 0 auto; display: grid; place-items: center; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.trade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.trade-card { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--glass); box-shadow: var(--highlight); }
.trade-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trade-card header strong { font-size: 16px; }
.trade-card .levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 12px; }
.trade-card .levels div { padding: 8px; border-radius: 10px; background: var(--surface); }
.trade-card .levels span { display: block; color: var(--muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.trade-card .result { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.trade-card .updates { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 12px; color: var(--text-soft); }
.trade-card .updates time { color: var(--muted); margin-right: 6px; }
.tape-bar { display: flex; height: 10px; overflow: hidden; border-radius: 99px; background: var(--track); }
.tape-bar span:first-child { background: var(--green); } .tape-bar span:last-child { background: var(--red); }
.premium-page { display: grid; gap: 16px; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 40px; }
  .feature-grid, .pricing { grid-template-columns: 1fr; }
  .account-grid { grid-template-columns: 1fr; }
  .admin-shell { grid-template-columns: minmax(0, 1fr); }
  .account-grid > *, .admin-shell > * { min-width: 0; }
  .toolbar .admin-input { min-width: 0; width: 100%; flex-basis: 100%; }
  .toolbar .segmented { max-width: 100%; overflow-x: auto; }
  .admin-tabs { position: static; display: flex; overflow-x: auto; }
  .admin-tabs button { flex: 0 0 auto; }
  .net-grid label { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .site-nav a.hide-sm { display: none; }
  .site-nav { gap: 4px; }
  .site-nav a, .site-nav button { white-space: nowrap; }
  .site-nav .primary-btn, .site-nav .secondary-btn { min-height: 34px; padding: 0 10px; font-size: 12px; }
  .site-brand .brand-name { font-size: 13px; }
  .site-brand small { display: none; }
  .auth-card { padding: 22px; }
  .trial-banner { flex-direction: column; align-items: flex-start; }
  .user-chip .who { display: none; }
  .drawer { padding: 16px; }
}

/* ───────── members never see how the engine works (owner-only details are marked .sys or data-admin-only) ───────── */
body:not(.is-admin) .sys, body:not(.is-admin) [data-admin-only], body:not(.is-admin) .rsi-foot, body:not(.is-admin) #signalRulesBtn,
body:not(.is-admin) .rules-drawer, body:not(.is-admin) .forecast-form, body:not(.is-admin) .why-panel, body:not(.is-admin) .provider-health,
body:not(.is-admin) .notification-panel-head [data-jump="settings"] { display: none !important; }
.nav-social { display: flex; gap: 6px; padding: 6px 10px 2px; }
.nav-social:empty { display: none; }
.nav-social a, .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 10px; color: var(--text-soft); background: var(--surface); }
.nav-social a:hover, .social-links a:hover { color: var(--accent); border-color: var(--accent-border); }
.nav-social svg, .social-links svg { width: 16px; height: 16px; }
.social-links { display: inline-flex; gap: 8px; align-items: center; }
body.sidebar-collapsed .nav-social { flex-direction: column; align-items: center; }

/* ───────── market charts (smooth area, flows, donut) ───────── */
.mk-chart { display: block; width: 100%; height: auto; overflow: visible; }
.mk-line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mk-stop-a { stop-color: var(--accent); stop-opacity: .32; } .mk-stop-b { stop-color: var(--accent); stop-opacity: 0; }
.mk-vol { fill: var(--text); opacity: .13; }
.mk-grid { stroke: var(--border-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mk-hover { fill: transparent; } .mk-hover:hover { fill: var(--surface-2); }
.mk-in { fill: var(--green); } .mk-out { fill: var(--red); }
.mk-in:hover, .mk-out:hover { opacity: .75; }
.mk-trend { fill: none; stroke: var(--trend); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.mk-axis { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.mk-legend { display: flex; gap: 16px; margin-top: 8px; color: var(--muted); font-size: 11.5px; }
.mk-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.lg-in { background: var(--green); } .lg-out { background: var(--red); } .lg-trend { height: 3px !important; background: var(--trend); vertical-align: 2px !important; }
.chart-empty { display: grid; place-items: center; min-height: 140px; padding: 18px; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); font-size: 13px; text-align: center; }
.donut .dn { fill: none; } .dn-track { fill: none; stroke: var(--track); }
.dn-1 { stroke: var(--accent); background: var(--accent); } .dn-2 { stroke: #9ee8cf; background: #9ee8cf; } .dn-3 { stroke: var(--trend); background: var(--trend); } .dn-4 { stroke: #4d5a55; background: #4d5a55; }
.dn-center { fill: var(--text); font-size: 20px; font-weight: 800; } .dn-sub { fill: var(--muted); font-size: 11px; }
.mini-area { display: block; width: 100%; height: 54px; }
.mini-area .ma-line { fill: none; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.mini-area.up .ma-line { stroke: var(--green); } .mini-area.down .ma-line { stroke: var(--red); }
.mini-area.up .ma-a { stop-color: var(--green); stop-opacity: .25; } .mini-area.down .ma-a { stop-color: var(--red); stop-opacity: .22; }
.mini-area .ma-b { stop-color: var(--bg); stop-opacity: 0; }
.seg-sm button { padding: 4px 10px; font-size: 12px; }

/* ───────── Overview ───────── */
.ov-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.ov-main, .ov-rail { display: grid; gap: 16px; min-width: 0; }
.ov-two { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; }
.ov-card, .db-card { min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--glass); box-shadow: var(--highlight); }
.ov-card > header, .db-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ov-card h2, .db-card h2 { margin: 0; font-size: 14.5px; letter-spacing: -.01em; }
.ov-card header p, .db-card header p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.ov-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 12px; }
.ov-stats div { display: grid; gap: 2px; }
.ov-stats span { color: var(--muted); font-size: 11.5px; }
.ov-stats strong { font-size: 19px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ov-stats em { font-style: normal; font-size: 12px; font-weight: 700; }
.dom-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dom-legend { flex: 1; min-width: 160px; margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 12.5px; }
.dom-legend li { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; color: var(--text-soft); }
.dom-legend i { width: 10px; height: 10px; border-radius: 3px; }
.dom-legend li.muted { color: var(--muted); font-size: 11.5px; }
.flow-tiles { display: flex; flex-wrap: wrap; gap: 4px; }
.flow-tile { flex-basis: 70px; min-height: 64px; display: grid; align-content: space-between; padding: 8px 10px; border: 0; border-radius: 8px; color: var(--text); text-align: left; cursor: pointer; }
.flow-tile.up { background: rgba(52, 214, 164, calc(var(--a) * .38)); } .flow-tile.down { background: rgba(242, 85, 90, calc(var(--a) * .38)); }
.flow-tile b { font-size: 12.5px; } .flow-tile span { font-size: 12px; font-weight: 700; }
.flow-tile.up span { color: var(--green); } .flow-tile.down span { color: var(--red); }
.ov-verdict-text { margin: 0 0 12px; color: var(--text-soft); font-size: 13.5px; line-height: 1.6; }
.live-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.rail-row { width: 100%; display: grid; grid-template-columns: 1fr; gap: 2px; padding: 10px 12px; margin-top: 8px; border: 1px solid var(--border-soft); border-radius: 11px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.rail-row:hover { border-color: var(--accent-border); }
.rail-row span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.rail-row b { font-size: 14px; } .rail-row b.up { color: var(--green); } .rail-row b.down { color: var(--red); } .rail-row b.warn { color: var(--amber); }
.rail-row small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.cal-list, .feed-list { list-style: none; margin: 0; padding: 0; display: grid; }
.cal-list li { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; }
.cal-list li:last-child { border-bottom: 0; }
.cal-list b { display: block; font-size: 12.5px; } .cal-list small { color: var(--muted); font-size: 11.5px; } .cal-list time { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); } .cal-dot.tier-1 { background: var(--accent); }
.feed-list { margin-top: 10px; }
.feed-list li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.feed-list li:last-child { border-bottom: 0; } .feed-list li:hover { background: var(--surface-hover); }
.feed-list li.muted { display: block; cursor: default; color: var(--muted); font-size: 12.5px; }
.feed-list b { display: block; font-size: 13px; } .feed-list small { color: var(--muted); font-size: 11.5px; }
.feed-sym { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font-size: 9.5px; font-weight: 800; letter-spacing: -.02em; }
.feed-sym.up { background: var(--green-soft); color: var(--green); } .feed-sym.down { background: var(--red-soft); color: var(--red); }
.feed-right { display: grid; justify-items: end; gap: 3px; }
.compact-table td { height: 44px; }
.coin-cell { display: inline-flex; align-items: center; gap: 8px; }
.coin-cell img { border-radius: 50%; }
.coin-cell small { color: var(--muted); font-size: 11.5px; }

/* ───────── member dashboard ───────── */
.db-head { margin: 2px 0 18px; }
.db-head h1 { margin: 4px 0 0; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.035em; }
.db-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.db-wide { grid-column: 1 / -1; }
.db-plan h2 { margin: 4px 0 10px; font-size: 22px; }
.db-meter { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; } .db-meter i { display: block; height: 100%; background: var(--accent); }
.db-plan > p { margin: 8px 0 14px; color: var(--muted); font-size: 12.5px; }
.db-plan .kv { margin-bottom: 14px; }
.db-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.db-stat { padding: 12px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); display: grid; gap: 2px; }
.db-stat span { color: var(--muted); font-size: 11.5px; } .db-stat strong { font-size: 17px; font-variant-numeric: tabular-nums; } .db-stat em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.db-verdict { margin: 10px 0 0; color: var(--text-soft); font-size: 13px; }
.db-upsell { border-color: var(--accent-border); background: linear-gradient(160deg, var(--accent-soft), transparent 60%), var(--glass); }
.db-upsell h2 { margin: 6px 0 6px; font-size: 18px; } .db-upsell p { color: var(--text-soft); font-size: 13px; margin: 0 0 14px; }
.db-trade { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-soft); cursor: pointer; font-size: 13px; }
.db-card .row-actions { margin-top: 12px; }

/* ───────── Regime: market tab ───────── */
.dom-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px 20px 20px; }
.dom-card { padding: 12px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); display: grid; gap: 6px; min-width: 0; }
.dom-card-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dom-card-head span { flex: 1; color: var(--muted); font-size: 12px; font-weight: 650; } .dom-card-head b { font-size: 17px; } .dom-card-head em { font-style: normal; font-size: 11.5px; font-weight: 700; }
.dom-card small { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.etf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 16px 20px 20px; }
.etf-panel { min-width: 0; } .etf-head h3 { margin: 0 0 8px; font-size: 14px; }
.panel > .chart-empty { margin: 16px 20px 20px; }

/* ───────── Support in the app ───────── */
.support-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 18px; align-items: start; }
.section-title { margin: 6px 0 2px; font-size: 15px; }
.faq-col { display: grid; gap: 14px; }
.faq-group h3 { margin: 0 0 8px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.faq-item { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.faq-item + .faq-item { margin-top: 8px; }
.faq-item summary { cursor: pointer; font-size: 13.5px; font-weight: 700; }
.faq-item p { margin: 8px 0 0; color: var(--text-soft); font-size: 13px; line-height: 1.6; }

@media (max-width: 1280px) { .ov-grid { grid-template-columns: minmax(0, 1fr); } .ov-rail { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
@media (max-width: 900px) {
  .ov-two, .db-grid, .support-grid, .etf-grid { grid-template-columns: minmax(0, 1fr); }
  .dom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .db-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .dom-grid { grid-template-columns: minmax(0, 1fr); } .ov-stats strong { font-size: 17px; } }

/* ───────── public support page ───────── */
.support-hero { padding: 48px 0 24px; text-align: center; }
.support-hero h1 { margin: 8px 0; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.04em; }
.support-hero p { max-width: 620px; margin: 0 auto; color: var(--muted); font-size: 15px; }
.support-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.contact-card { position: sticky; top: 84px; }
.contact-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; color: var(--muted); font-size: 12.5px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 900px) { .support-page { grid-template-columns: minmax(0, 1fr); } .contact-card { position: static; } }
.price-card .price s.was { color: var(--muted-2); font-size: 22px; font-weight: 600; margin-right: 4px; }
.otp-input { font-size: 22px !important; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.was-sm { color: var(--muted-2); font-size: 13px; font-weight: 600; }
.pay-rows { display: grid; gap: 6px; }
.pay-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--input); font-size: 13px; }
.pay-row span { color: var(--muted); } .pay-row b { overflow-wrap: anywhere; }
.crypto-pay { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.qr-img { border-radius: 10px; background: #fff; padding: 6px; }
.totp-setup { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.totp-setup .qr svg { width: 170px; height: 170px; border-radius: 10px; background: #fff; }
.totp-setup > div:last-child { flex: 1; min-width: 220px; }
.backup-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 10px 0; font-size: 14px; }
.backup-codes span { padding: 6px 10px; border-radius: 8px; background: var(--input); text-align: center; }
@media (max-width: 640px) { .pay-row { grid-template-columns: minmax(0, 1fr) auto; } .pay-row span { grid-column: 1 / -1; } }


/* ───────── home page motion ───────── */
body[data-bg="hero"] .site-header { background: rgba(10, 13, 12, .62); }
.hero h1 span { background: linear-gradient(120deg, #c9fbe9, #34d6a4 45%, #1fbf8f 70%, #c9fbe9); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 7s ease-in-out infinite; }
@keyframes shine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero-copy > * { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.hero-copy > *:nth-child(2) { animation-delay: .08s; } .hero-copy > *:nth-child(3) { animation-delay: .16s; } .hero-copy > *:nth-child(4) { animation-delay: .24s; } .hero-copy > *:nth-child(5) { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-card { position: relative; animation: rise .9s .2s cubic-bezier(.2,.7,.2,1) both, float 7s 1.2s ease-in-out infinite; background: linear-gradient(180deg, rgba(18,23,21,.88), rgba(15,20,18,.82)); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hero-card::before { content: ''; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--spin, 0deg), transparent 0 70%, rgba(52,214,164,.7) 82%, transparent 92%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 6s linear infinite; }
@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spin { to { --spin: 360deg; } }
.hero-card .mock-row { animation: rowIn .6s cubic-bezier(.2,.7,.2,1) both; }
.hero-card .mock-row:nth-of-type(2) { animation-delay: .5s; } .hero-card .mock-row:nth-of-type(3) { animation-delay: .65s; } .hero-card .mock-row:nth-of-type(4) { animation-delay: .8s; } .hero-card .mock-row:nth-of-type(5) { animation-delay: .95s; } .hero-card .mock-row:nth-of-type(6) { animation-delay: 1.1s; }
@keyframes rowIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.hero-card .pill.up { color: var(--green); background: var(--green-soft); }
.hero-card .pill.down { color: var(--red); background: var(--red-soft); }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(52,214,164,.6); animation: ping 1.8s ease-out infinite; vertical-align: 1px; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(52,214,164,.55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(52,214,164,0); } }
.mock-spark { width: 100%; height: 54px; margin-top: 10px; }
.mock-spark path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: draw 2.4s 1.2s ease-out forwards; filter: drop-shadow(0 0 6px rgba(52,214,164,.5)); }
@keyframes draw { to { stroke-dashoffset: 0; } }

.ticker { position: relative; overflow: hidden; margin: 8px 0 6px; padding: 11px 0; border-block: 1px solid var(--border); background: rgba(10,13,12,.55); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; gap: 34px; width: max-content; animation: marquee 60s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.tick { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; }
.tick img { width: 16px; height: 16px; border-radius: 50%; }
.tick b { font-weight: 750; }
.tick span { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.tick em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.tick em.up { color: var(--green); } .tick em.down { color: var(--red); }

.stats-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 8px; }
.stat-tile { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgba(17,22,20,.72); }
.stat-tile b { display: block; font-size: 19px; letter-spacing: -.02em; color: var(--accent); }
.stat-tile span { color: var(--muted); font-size: 12.5px; }
.feature { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.feature:hover { transform: translateY(-3px); border-color: var(--accent-border); box-shadow: 0 14px 34px rgba(0,0,0,.35), 0 0 0 1px rgba(52,214,164,.12); }

html.js-motion .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
html.js-motion .reveal.in { opacity: 1; transform: none; }

@media (max-width: 900px) { .stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .hero h1 span, .hero-copy > *, .hero-card, .hero-card::before, .hero-card .mock-row, .live-dot, .mock-spark path, .ticker-track { animation: none !important; }
  .mock-spark path { stroke-dashoffset: 0; }
  html.js-motion .reveal { opacity: 1; transform: none; transition: none; }
}


/* ───────── dashboard: two independent columns, so no card leaves a hole ───────── */
.db-pulse { margin-bottom: 16px; }
.db-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.db-col { display: grid; gap: 16px; min-width: 0; }
.db-col .rail-row { text-align: left; background: var(--surface); cursor: pointer; }
.wl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wl-grid h3 { margin: 0 0 6px; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.wl-list { list-style: none; margin: 0; padding: 0; display: grid; }
.wl-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; cursor: pointer; }
.wl-list li:last-child { border-bottom: 0; }
.wl-list li:hover b { color: var(--accent); }
.wl-list span { color: var(--muted); font-variant-numeric: tabular-nums; }
.wl-list em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 58px; text-align: right; }
.wl-list em.positive { color: var(--green); } .wl-list em.negative { color: var(--red); }
@media (max-width: 1000px) { .db-cols { grid-template-columns: minmax(0, 1fr); } }

/* ───────── regime: rotation tab ───────── */
.rg-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-bottom: 16px; }
.rg-top .regime-card { margin: 0; }
.rg-hero-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rg-glance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rg-top + * { margin-top: 0; }
.rg-tf { display: grid; align-content: start; gap: 4px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--glass); text-align: left; cursor: pointer; transition: border-color .2s, transform .2s; }
.rg-tf:hover { border-color: var(--accent-border); transform: translateY(-1px); }
.rg-tf.active { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-border); }
.rg-tf span { color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .08em; }
.rg-tf b { font-size: 14px; line-height: 1.3; }
.rg-tf small { color: var(--muted); font-size: 11.5px; }
.rg-tf.side-long b { color: var(--green); } .rg-tf.side-short b { color: var(--red); }
.rg-tf.side-long { background: linear-gradient(180deg, rgba(52,214,164,.08), transparent 70%), var(--glass); }
.rg-tf.side-short { background: linear-gradient(180deg, rgba(242,85,90,.08), transparent 70%), var(--glass); }
#regimeRoot > .rg-glance { margin-bottom: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }

.rl-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0 20px 10px; }
.rl-key { display: inline-flex; align-items: center; gap: 7px; color: var(--text-soft); font-size: 12.5px; }
.rl-key i { width: 14px; height: 3px; border-radius: 2px; background: currentColor; }
.rl-key b { font-variant-numeric: tabular-nums; }
.rl-key.l-a i { background: var(--accent); } .rl-key.l-b i { background: #e9efed; } .rl-key.l-c i { background: var(--amber); } .rl-key.l-d i { background: #7c8783; }
.rl-chart { padding: 0 20px; height: 240px; width: 100%; box-sizing: border-box; }
.rl-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.rl-line.l-a { stroke: var(--accent); stroke-width: 2.6; } .rl-line.l-b { stroke: #e9efed; opacity: .85; } .rl-line.l-c { stroke: var(--amber); } .rl-line.l-d { stroke: #7c8783; stroke-dasharray: 5 4; }
.rl-dot.l-a { fill: var(--accent); } .rl-dot.l-b { fill: #e9efed; } .rl-dot.l-c { fill: var(--amber); } .rl-dot.l-d { fill: #7c8783; }
.mk-zero { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.panel .mk-axis { padding: 4px 20px 16px; }

.rg-mix { display: flex; flex-wrap: wrap; gap: 12px; }
.rb-key { display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: 12px; font-weight: 650; }
.rb-key i { width: 10px; height: 10px; border-radius: 3px; }
.rb-key.rb-long i, .ribbon .rb-long { background: var(--green); }
.rb-key.rb-short i, .ribbon .rb-short { background: var(--red); }
.rb-key.rb-wait i, .ribbon .rb-wait { background: #3a4541; }
.ribbon { display: flex; gap: 2px; height: 34px; padding: 0 20px; }
.ribbon i { flex: 1 1 0; min-width: 2px; border-radius: 3px; opacity: .85; transition: opacity .15s, transform .15s; }
.ribbon i:hover { opacity: 1; transform: scaleY(1.15); }
.ribbon i:last-child { box-shadow: 0 0 10px currentColor; }

.rg-moves { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rg-book { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 16px 20px 20px; }
.rg-state { position: relative; display: grid; gap: 4px; align-content: start; padding: 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); }
.rg-state b { font-size: 14px; }
.rg-state p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.rg-side { justify-self: start; padding: 1px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--surface-2); color: var(--muted); }
.rg-state.side-long .rg-side { background: var(--green-soft); color: var(--green); }
.rg-state.side-short .rg-side { background: var(--red-soft); color: var(--red); }
.rg-state.now { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-border), 0 10px 30px rgba(52,214,164,.08); }
.rg-state.now.side-short { border-color: rgba(242,85,90,.45); box-shadow: 0 0 0 1px rgba(242,85,90,.45), 0 10px 30px rgba(242,85,90,.08); }
.rg-state em { position: absolute; top: 12px; right: 12px; padding: 1px 8px; border-radius: 99px; background: var(--accent); color: #04130e; font-size: 10.5px; font-style: normal; font-weight: 800; }
.rg-state.side-short em { background: var(--red); color: #fff; }

@media (max-width: 1200px) { .rg-moves { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .rg-top { grid-template-columns: minmax(0, 1fr); }
  #regimeRoot > .rg-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-moves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-chart { height: 200px; }
}
@media (max-width: 520px) { .rg-moves { grid-template-columns: minmax(0, 1fr); } .ribbon { gap: 1px; padding: 0 12px; } }
.rg-move .dom-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 8px; }
.rg-move .dom-card-head span { grid-column: 1 / -1; }
.rg-move .dom-card-head b { font-size: 16px; font-variant-numeric: tabular-nums; }


/* ───────── legal pages ───────── */
.legal-page { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; max-width: 1080px; margin: 0 auto; padding: 40px 0 20px; }
.legal-nav { position: sticky; top: 84px; display: grid; gap: 4px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgba(17,22,20,.82); }
.legal-nav a { padding: 9px 12px; border-radius: 9px; color: var(--text-soft); font-size: 13px; font-weight: 650; text-decoration: none; }
.legal-nav a:hover { background: var(--surface-2); color: var(--text); }
.legal-nav a[aria-current] { background: var(--accent-soft); color: var(--accent); }
.legal-doc { padding: 30px 34px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: rgba(17,22,20,.88); min-width: 0; }
.legal-doc h1 { margin: 8px 0 4px; font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.03em; }
.legal-date { margin: 0 0 18px; color: var(--muted); font-size: 12.5px; }
.legal-intro { color: var(--text-soft); font-size: 15px; line-height: 1.7; }
.legal-doc section { padding-top: 6px; }
.legal-doc h2 { margin: 22px 0 8px; font-size: 16px; letter-spacing: -.01em; }
.legal-doc p { margin: 0 0 10px; color: var(--text-soft); font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.legal-todo { padding: 0 4px; border-radius: 4px; background: var(--amber-soft); color: var(--amber); }
.legal-mini { margin: 26px 0 0; text-align: center; color: var(--muted); font-size: 12px; }
.legal-mini a { color: var(--muted); }
.legal-mini a:hover { color: var(--accent); }
.legal-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; color: var(--text-soft); font-size: 12.5px; line-height: 1.55; }
.legal-check input { margin-top: 3px; accent-color: var(--accent); }
.legal-check a, .check a { color: var(--accent); }
.nav-legal { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 4px 12px 8px; }
.nav-legal a { color: var(--muted-2); font-size: 11px; text-decoration: none; }
.nav-legal a:hover { color: var(--accent); }
body.sidebar-collapsed .nav-legal { display: none; }
@media (max-width: 820px) {
  .legal-page { grid-template-columns: minmax(0, 1fr); padding-top: 20px; }
  .legal-nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal-doc { padding: 22px 18px; }
}

/* ───────── free plan: notes and locks ───────── */
.free-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--accent-border); border-radius: var(--radius-lg); background: linear-gradient(100deg, var(--accent-soft), transparent 80%); color: var(--text-soft); font-size: 13px; }
.free-note b { color: var(--text); }
.free-note .primary-btn { min-height: 34px; }
.seg button.is-locked { color: var(--muted); }
.seg-lock { display: inline-block; margin-left: 6px; vertical-align: -1px; opacity: .8; }
.rg-tf.is-locked { border-style: dashed; background: var(--glass); }
.rg-tf.is-locked b { color: var(--muted); }
.regime-lock { margin-top: 16px; }
.lock-list { display: grid; gap: 8px; max-width: 460px; margin: 14px auto; padding: 0; list-style: none; text-align: left; }
.lock-list li { position: relative; padding-left: 22px; color: var(--text-soft); font-size: 13.5px; }
.lock-list li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
.locked-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 6px 0; padding: 16px 18px; border: 1px dashed var(--accent-border); border-radius: var(--radius-lg); background: linear-gradient(100deg, var(--accent-soft), transparent 85%); color: var(--text-soft); font-size: 13px; line-height: 1.55; white-space: normal; }
.locked-inline b { color: var(--text); }
.locked-inline span { flex: 1 1 320px; max-width: 760px; }
.locked-inline .primary-btn { min-height: 34px; }
.ov-card .locked-inline { margin-top: 12px; }
#signalChips button.is-locked { color: var(--muted); }


/* ───────── referral programme and sign-up sources ───────── */
.ref-link { display: flex; gap: 8px; margin: 12px 0; }
.ref-link input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--input); color: var(--text); font: 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ref-link .primary-btn { flex: 0 0 auto; }
.ref-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 4px 0 16px; }
.ref-stats div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface); }
.ref-stats span { color: var(--muted); font-size: 11.5px; }
.ref-stats b { font-size: 16px; font-variant-numeric: tabular-nums; }
.db-invite .db-stats { margin-top: 4px; }
.invited-note { padding: 10px 12px; border: 1px solid var(--accent-border); border-radius: var(--radius-md); background: var(--accent-soft); color: var(--text); font-size: 13px; }
.source-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.mini-title { margin: 0 0 6px; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 900px) { .ref-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .source-grid { grid-template-columns: minmax(0, 1fr); } }