/* ==========================================================================
   SMM Panel design system
   Tokens → base → layout (public / panel) → components → utilities
   Light + dark themes (auto via prefers-color-scheme, manual via data-theme)
   ========================================================================== */

:root {
  --bg: #f5f6fb;
  --surface: #ffffff;
  --surface-2: #f8f9fd;
  --surface-3: #eef0f7;
  --border: #e4e7f0;
  --border-strong: #d3d8e6;
  --text: #161a2b;
  --text-2: #3d4460;
  --muted: #6b7291;
  --primary: #5b4dff;
  --primary-600: #4a3cf0;
  --primary-50: #f0eeff;
  --primary-100: #e2dfff;
  --on-primary: #ffffff;
  --success: #12a150;
  --success-50: #e8f8ef;
  --warning: #c77a00;
  --warning-50: #fff5e0;
  --danger: #e03145;
  --danger-50: #fdecee;
  --info: #1f7ae0;
  --info-50: #e8f1fd;
  --orange: #e2620f;
  --orange-50: #fff0e6;
  --purple: #8a3ffc;
  --purple-50: #f3ebff;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 6px 16px rgba(16, 24, 40, .04);
  --shadow-lg: 0 12px 40px rgba(16, 24, 40, .12);
  --sidebar-w: 256px;
  --topbar-h: 64px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0f17; --surface: #151824; --surface-2: #1a1e2c; --surface-3: #222739; --border: #262b3d; --border-strong: #333a52;
    --text: #eceef7; --text-2: #c3c8dc; --muted: #8b92ad; --primary: #7c70ff; --primary-600: #8f85ff; --primary-50: #1f1d3d; --primary-100: #2a2754;
    --success-50: #0f2a1c; --warning-50: #2e2410; --danger-50: #321419; --info-50: #11223a; --orange-50: #2f1c10; --purple-50: #22163b;
    --success: #34c774; --warning: #f0a830; --danger: #ff5c6f; --info: #5aa2ff; --orange: #ff8a3d; --purple: #a978ff;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); --shadow-lg: 0 16px 48px rgba(0,0,0,.45);
    --series-1: #3987e5; --series-2: #d95926;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d0f17; --surface: #151824; --surface-2: #1a1e2c; --surface-3: #222739; --border: #262b3d; --border-strong: #333a52;
  --text: #eceef7; --text-2: #c3c8dc; --muted: #8b92ad; --primary: #7c70ff; --primary-600: #8f85ff; --primary-50: #1f1d3d; --primary-100: #2a2754;
  --success-50: #0f2a1c; --warning-50: #2e2410; --danger-50: #321419; --info-50: #11223a; --orange-50: #2f1c10; --purple-50: #22163b;
  --success: #34c774; --warning: #f0a830; --danger: #ff5c6f; --info: #5aa2ff; --orange: #ff8a3d; --purple: #a978ff;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); --shadow-lg: 0 16px 48px rgba(0,0,0,.45);
  --series-1: #3987e5; --series-2: #d95926;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
h1 { font-size: 1.75rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.1rem; } h4 { font-size: 1rem; }
p { margin: 0 0 1em; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-600); text-decoration: underline; text-underline-offset: 2px; }
img { max-width: 100%; height: auto; }
code, pre, kbd { font-family: var(--mono); font-size: .88em; }
code { background: var(--surface-3); padding: .12em .4em; border-radius: 6px; }
pre { background: #0f1222; color: #dfe3f5; padding: 16px; border-radius: var(--radius); overflow-x: auto; line-height: 1.5; }
pre code { background: none; padding: 0; color: inherit; }
hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }
.icon { flex-shrink: 0; vertical-align: middle; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--primary-100); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--primary); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 8px; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; white-space: nowrap; text-decoration: none !important; line-height: 1; user-select: none; }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 1px 2px rgba(91,77,255,.25); }
.btn-primary:hover { background: var(--primary-600); color: var(--on-primary); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); color: var(--text); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(.95); color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { filter: brightness(.95); color: #fff; }
.btn-soft { background: var(--primary-50); color: var(--primary); }
.btn-soft:hover { background: var(--primary-100); color: var(--primary); }
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-lg { min-height: 48px; padding: 0 22px; font-size: 15px; border-radius: 12px; }
.btn-block { width: 100%; }
.btn-icon { width: 40px; padding: 0; }
.btn-icon.btn-sm { width: 32px; }
.btn[disabled], .btn.is-loading { opacity: .6; pointer-events: none; }
.btn-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------------------------------------------------------------- forms */
.field { margin-bottom: 16px; }
.field > label, .label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; color: var(--text-2); }
/* Toggles and checkboxes are labels too: keep their control and text vertically centred. */
.field > label.switch, .field > label.check { display: inline-flex; align-items: center; margin-bottom: 0; color: var(--text); }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.input, .select, .textarea { width: 100%; min-height: 44px; padding: 10px 14px; font: inherit; font-size: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; transition: border-color .15s, box-shadow .15s; appearance: none; }
.textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.textarea.code { font-family: var(--mono); font-size: 13px; }
.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7291' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100); }
.input[readonly] { background: var(--surface-2); }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: 10px 0 0 10px; }
.input-group .btn { border-radius: 0 10px 10px 0; min-height: 44px; }
.input-prefix { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--border-strong); border-right: 0; border-radius: 10px 0 0 10px; background: var(--surface-2); color: var(--muted); font-weight: 600; }
.input-prefix + .input { border-radius: 0 10px 10px 0; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--primary); flex-shrink: 0; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.switch input { appearance: none; width: 40px; height: 22px; background: var(--border-strong); border-radius: 22px; position: relative; cursor: pointer; transition: background .2s; margin: 0; flex-shrink: 0; }
.switch input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked { background: var(--primary); }
.switch input:checked::after { transform: translateX(18px); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-grid .span-2 { grid-column: span 2; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin: 0 0 16px; }
legend { padding: 0 6px; font-weight: 700; font-size: 14px; }

/* ---------------------------------------------------------------- cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-body { padding: 20px; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.card-header h2, .card-header h3 { margin: 0; font-size: 1rem; }
.card-footer { padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.card + .card { margin-top: 20px; }
.card-title { font-size: 1rem; font-weight: 700; margin: 0 0 4px; }
.card-sub { color: var(--muted); font-size: 13.5px; margin: 0; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; display: flex; gap: 14px; align-items: flex-start; box-shadow: var(--shadow-sm); min-width: 0; }
.stat-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-50); color: var(--primary); flex-shrink: 0; }
.stat-icon.success { background: var(--success-50); color: var(--success); }
.stat-icon.warning { background: var(--warning-50); color: var(--warning); }
.stat-icon.info { background: var(--info-50); color: var(--info); }
.stat-icon.danger { background: var(--danger-50); color: var(--danger); }
.stat-label { font-size: 13px; color: var(--muted); font-weight: 500; }
.stat-value { font-size: 1.45rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
.stat-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

.balance-card { background: linear-gradient(135deg, var(--primary) 0%, #7a4dff 100%); color: #fff; border: 0; }
.balance-card .stat-label, .balance-card .stat-meta { color: rgba(255,255,255,.8); }
.balance-card .stat-icon { background: rgba(255,255,255,.18); color: #fff; }

/* ---------------------------------------------------------------- badges & alerts */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.badge-success { background: var(--success-50); color: var(--success); }
.badge-warning { background: var(--warning-50); color: var(--warning); }
.badge-danger { background: var(--danger-50); color: var(--danger); }
.badge-info { background: var(--info-50); color: var(--info); }
.badge-orange { background: var(--orange-50); color: var(--orange); }
.badge-purple { background: var(--purple-50); color: var(--purple); }
.badge-muted { background: var(--surface-3); color: var(--muted); }
.badge-primary { background: var(--primary-50); color: var(--primary); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.no-dot::before { display: none; }

.alert { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid; margin-bottom: 16px; font-size: 14px; align-items: flex-start; }
.alert .icon { margin-top: 1px; }
.alert p:last-child { margin-bottom: 0; }
.alert-success { background: var(--success-50); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: var(--text); }
.alert-success .icon { color: var(--success); }
.alert-error, .alert-danger { background: var(--danger-50); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--text); }
.alert-error .icon, .alert-danger .icon { color: var(--danger); }
.alert-warning { background: var(--warning-50); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: var(--text); }
.alert-warning .icon { color: var(--warning); }
.alert-info { background: var(--info-50); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--text); }
.alert-info .icon { color: var(--info); }
.alert-title { font-weight: 700; margin-bottom: 2px; }
.flash-stack { position: fixed; top: 16px; right: 16px; z-index: 90; width: min(420px, calc(100vw - 32px)); }
.flash-stack .alert { box-shadow: var(--shadow-lg); animation: slidein .25s ease-out; }
@keyframes slidein { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- tables */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.table td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .actions { text-align: right; white-space: nowrap; }
.table .link-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table .nowrap { white-space: nowrap; }
.cell-title { font-weight: 600; color: var(--text); }
.cell-sub { font-size: 12.5px; color: var(--muted); }
.mono { font-family: var(--mono); font-size: 13px; }
tr.row-attention td { background: var(--warning-50) !important; }

/* Responsive tables → stacked cards */
@media (max-width: 767px) {
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
  .table-cards tr { border-bottom: 1px solid var(--border); padding: 12px 16px; }
  .table-cards tbody tr:hover td { background: none; }
  .table-cards td { border: 0; padding: 5px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: right; min-width: 0; overflow-wrap: anywhere; }
  .table-cards td > * { min-width: 0; }
  .table-cards td::before { content: attr(data-label); font-size: 12.5px; color: var(--muted); font-weight: 600; text-align: left; flex-shrink: 0; }
  .table-cards td.cell-main { display: block; text-align: left; padding-bottom: 8px; }
  .table-cards td.cell-main::before { display: none; }
  .table-cards td.actions { justify-content: flex-end; padding-top: 10px; }
  .table-cards td.actions::before { display: none; }
  /* The row spans the full card; only the link text itself is truncated. */
  .table-cards td.link-cell { max-width: none; overflow: visible; white-space: normal; }
  .table-cards td.link-cell > a, .table-cards td.link-cell > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .table-cards td.actions { gap: 8px; flex-wrap: wrap; }
  .table-cards td.actions > .btn, .table-cards td.actions > .inline-form { flex: 1 1 120px; }
  .table-cards td.actions > .inline-form .btn { width: 100%; }
  .table-cards td.actions .btn-ghost { border-color: var(--border); }
}

/* ---------------------------------------------------------------- misc components */
.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty .icon { width: 44px; height: 44px; color: var(--border-strong); margin-bottom: 10px; }
.empty h3 { color: var(--text); margin-bottom: 4px; }

.pagination { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: center; padding: 16px; }
.pagination a, .pagination span { min-width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0 10px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--text-2); border: 1px solid var(--border); background: var(--surface); text-decoration: none; }
.pagination a:hover { border-color: var(--primary); color: var(--primary); }
.pagination .current { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination .disabled { opacity: .4; }
.pagination .gap { border: 0; background: none; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 10px 14px; font-weight: 600; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--primary); border-bottom-color: var(--primary); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; margin-bottom: 16px; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; text-decoration: none !important; }
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip .count { font-size: 12px; opacity: .75; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toolbar .input, .toolbar .select { min-height: 40px; width: auto; min-width: 160px; flex: 1 1 180px; max-width: 320px; }
.toolbar .spacer { flex: 1; }

.dl { display: grid; grid-template-columns: 170px 1fr; gap: 10px 16px; margin: 0; font-size: 14px; }
.dl dt { color: var(--muted); font-weight: 500; }
.dl dd { margin: 0; overflow-wrap: anywhere; }

.list-plain { list-style: none; margin: 0; padding: 0; }
.list-rows > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.list-rows > li:last-child { border-bottom: 0; }

.progress { height: 8px; background: var(--surface-3); border-radius: 8px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--primary); border-radius: 8px; }

.copy-box { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: 10px; padding: 8px 8px 8px 14px; font-family: var(--mono); font-size: 13.5px; overflow: hidden; }
.copy-box span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 16px 22px; font-size: 13.5px; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.timeline li::after { content: ""; position: absolute; left: 7.5px; top: 18px; bottom: 0; width: 1px; background: var(--border); }
.timeline li:last-child::after { display: none; }

details.dropdown { position: relative; }
details.dropdown > summary { list-style: none; cursor: pointer; }
details.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; z-index: 60; }
.dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 8px; color: var(--text); font: inherit; font-size: 14px; background: none; border: 0; cursor: pointer; text-align: left; text-decoration: none; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--surface-3); }
.dropdown-menu .sep { height: 1px; background: var(--border); margin: 6px 0; }
.dropdown-head { padding: 10px 12px; font-size: 13px; color: var(--muted); }

dialog.modal { border: 0; border-radius: var(--radius-lg); padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
dialog.modal::backdrop { background: rgba(10, 12, 25, .55); backdrop-filter: blur(2px); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; }
.modal-body { padding: 20px; }

.notif-dot { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }

.announcement { border-left: 4px solid var(--info); }
.announcement.success { border-left-color: var(--success); }
.announcement.warning { border-left-color: var(--warning); }
.announcement.danger { border-left-color: var(--danger); }

.prose { font-size: 16px; line-height: 1.75; color: var(--text-2); }
.prose h2 { margin-top: 1.6em; font-size: 1.4rem; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .35em; }
.prose img { border-radius: var(--radius); }
.prose blockquote { margin: 1.2em 0; padding: 4px 18px; border-left: 3px solid var(--primary); color: var(--muted); }
.prose table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }

.ticket-msg { display: flex; gap: 12px; margin-bottom: 16px; }
.ticket-msg .avatar { flex-shrink: 0; }
.ticket-msg .bubble { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px 14px 14px 14px; padding: 12px 16px; max-width: 100%; min-width: 0; flex: 1; }
.ticket-msg.staff .bubble { background: var(--primary-50); border-color: var(--primary-100); }
.ticket-msg .meta { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ticket-msg .body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-100); color: var(--primary); font-weight: 700; font-size: 14px; text-transform: uppercase; }

/* ---------------------------------------------------------------- panel layout (user + admin) */
.panel { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: 50; transition: transform .25s ease; }
.sidebar-brand { height: var(--topbar-h); display: flex; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid var(--border); font-weight: 800; font-size: 17px; color: var(--text); text-decoration: none !important; flex-shrink: 0; }
.sidebar-brand img { max-height: 32px; width: auto; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--primary), #8b5cff); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; flex-shrink: 0; }
.sidebar-nav { padding: 12px; overflow-y: auto; flex: 1; }
.nav-section { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 16px 12px 6px; }
.nav-link { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--text-2); font-weight: 550; font-size: 14.5px; text-decoration: none !important; margin-bottom: 2px; }
.nav-link:hover { background: var(--surface-3); color: var(--text); }
.nav-link.active { background: var(--primary-50); color: var(--primary); }
.nav-link .badge { margin-left: auto; }
.nav-link .count { margin-left: auto; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 7px; }
.sidebar-foot { padding: 12px; border-top: 1px solid var(--border); }
.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; padding: 0 24px; position: sticky; top: 0; z-index: 40; }
.topbar-title { font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .spacer { flex: 1; }
.topbar .icon-btn { position: relative; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--text-2); background: none; border: 0; cursor: pointer; }
.topbar .icon-btn:hover { background: var(--surface-3); color: var(--text); }
.balance-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 10px; background: var(--primary-50); color: var(--primary); font-weight: 700; font-size: 14px; text-decoration: none !important; }
.balance-chip:hover { background: var(--primary-100); }
.user-chip { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 12px; }
.user-chip:hover { background: var(--surface-3); }
.content { padding: 24px; width: 100%; max-width: 1400px; margin: 0 auto; flex: 1; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 1.5rem; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.breadcrumb { display: flex; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 6px; list-style: none; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--border-strong); }
.breadcrumb a { color: var(--muted); }
.menu-toggle, .topbar .menu-toggle { display: none; }
.backdrop { display: none; }
.bottom-nav { display: none; }
.panel-footer { padding: 16px 24px; font-size: 12.5px; color: var(--muted); text-align: center; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.grid-main-wide { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
.sticky-side { position: sticky; top: calc(var(--topbar-h) + 20px); }

/* ---------------------------------------------------------------- order form */
.svc-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 16px; }
.svc-summary div { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.svc-summary small { display: block; color: var(--muted); font-size: 12px; }
.svc-summary strong { font-size: 14.5px; }
.svc-desc { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; color: var(--text-2); white-space: pre-wrap; max-height: 220px; overflow-y: auto; }
.charge-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--primary-50); border: 1px solid var(--primary-100); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.charge-box .amount { font-size: 1.5rem; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
.svc-flags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.method-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: start; padding: 14px; margin: 0; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.method-card input { margin: 3px 0 0; accent-color: var(--primary); }
.method-card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.method-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100); }
.search-results { max-height: 280px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; margin-top: 6px; background: var(--surface); }
.search-results button { display: block; width: 100%; text-align: left; padding: 10px 14px; background: none; border: 0; border-bottom: 1px solid var(--border); font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
.search-results button:hover { background: var(--surface-3); }
.search-results button small { color: var(--muted); }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- public site */
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); }
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.container-sm { max-width: 820px; }
.site-nav { height: 68px; display: flex; align-items: center; gap: 24px; }
.site-nav .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--text); text-decoration: none !important; }
.site-nav .brand img { max-height: 34px; width: auto; }
.site-links { display: flex; gap: 4px; align-items: center; }
.site-links a { padding: 8px 12px; border-radius: 9px; color: var(--text-2); font-weight: 550; font-size: 14.5px; text-decoration: none; }
.site-links a:hover, .site-links a.active { color: var(--text); background: var(--surface-3); }
.site-nav .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.mobile-menu { display: none; }
.hero { padding: 88px 0 72px; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -40% -10% auto; height: 620px; background: radial-gradient(closest-side, var(--primary-100), transparent 70%); opacity: .8; z-index: -1; }
.hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 18px; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-50); }
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -.035em; line-height: 1.08; margin-bottom: 18px; }
.hero h1 .accent { color: var(--primary); }
.hero .lead { font-size: 1.15rem; color: var(--text-2); max-width: 560px; margin-bottom: 28px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px; color: var(--muted); font-size: 14px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust .icon { color: var(--success); }
.hero-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 22px; }
.mock-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; gap: 12px; }
.mock-row:last-child { border-bottom: 0; }
.section { padding: 72px 0; }
.section-alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em; }
.section-head p { color: var(--muted); font-size: 1.05rem; }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.section-alt .feature { background: var(--bg); }
.feature .stat-icon { margin-bottom: 14px; }
.feature h3 { font-size: 1.05rem; }
.feature p { color: var(--muted); margin: 0; font-size: 14.5px; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.step { position: relative; padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--primary); color: #fff; font-weight: 800; margin-bottom: 14px; }
.step h3 { font-size: 1rem; }
.step p { color: var(--muted); font-size: 14px; margin: 0; }
.cta-band { background: linear-gradient(135deg, var(--primary), #7c4dff); color: #fff; border-radius: 24px; padding: 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; margin: 0 0 6px; }
.cta-band p { color: rgba(255,255,255,.85); margin: 0; }
.cta-band .btn-secondary { background: #fff; color: var(--primary); border-color: #fff; }
.faq-list details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; }
.faq-list summary { cursor: pointer; padding: 16px 20px; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .icon { transition: transform .2s; color: var(--muted); }
.faq-list details[open] summary .icon { transform: rotate(180deg); }
.faq-list .answer { padding: 0 20px 18px; color: var(--text-2); }
.site-footer { border-top: 1px solid var(--border); background: var(--surface); padding: 48px 0 28px; margin-top: 40px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { color: var(--text-2); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--border); margin-top: 32px; padding-top: 20px; color: var(--muted); font-size: 13px; }
.page-hero { padding: 56px 0 28px; }
.page-hero h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); letter-spacing: -.02em; }
.page-hero p { color: var(--muted); font-size: 1.05rem; max-width: 640px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.post-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; color: var(--text); text-decoration: none !important; transition: box-shadow .2s, transform .2s; }
.post-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); color: var(--text); }
.post-card .thumb { aspect-ratio: 16 / 9; background: var(--surface-3); object-fit: cover; width: 100%; }
.post-card .body { padding: 18px; }
.post-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.post-card p { color: var(--muted); font-size: 14px; margin: 0; }
.meta-line { font-size: 13px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- auth pages */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-side { background: linear-gradient(150deg, #2b1f9e 0%, var(--primary) 55%, #8c5cff 100%); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.auth-side h2 { color: #fff; font-size: 2rem; letter-spacing: -.02em; max-width: 440px; }
.auth-side p, .auth-side li { color: rgba(255,255,255,.85); }
.auth-side ul { list-style: none; padding: 0; }
.auth-side li { display: flex; gap: 10px; margin-bottom: 12px; }
.auth-main { display: grid; place-items: center; padding: 32px 20px; }
.auth-box { width: 100%; max-width: 420px; }
.auth-box h1 { font-size: 1.6rem; }
.auth-box .sub { color: var(--muted); margin-bottom: 24px; }
.auth-foot { text-align: center; margin-top: 20px; color: var(--muted); font-size: 14px; }
.brand-row { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: inherit; text-decoration: none !important; }
.brand-row:hover { color: inherit; }

/* ---------------------------------------------------------------- utilities */
.text-muted { color: var(--muted) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-primary { color: var(--primary) !important; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.fw-bold { font-weight: 700; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .wrap { flex-wrap: wrap; }
.w-100 { width: 100%; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break { overflow-wrap: anywhere; }
.inline-form { display: inline; }
.hide-mobile { }
.show-mobile { display: none !important; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1199px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-main, .grid-main-wide { grid-template-columns: minmax(0, 1fr); }
  .sticky-side { position: static; }
}
@media (max-width: 1023px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .backdrop { display: block; position: fixed; inset: 0; background: rgba(10,12,25,.5); z-index: 45; }
  body.nav-open { overflow: hidden; }
  .main { margin-left: 0; }
  .menu-toggle, .topbar .menu-toggle { display: grid; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-card { display: none; }
  .features, .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .site-links { display: none; }
  .mobile-menu { display: block; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  body { font-size: 15px; }
  .content { padding: 16px 16px 96px; }
  .topbar { padding: 0 12px; gap: 6px; }
  .page-head h1 { font-size: 1.3rem; }
  .card-body { padding: 16px; }
  .card-header { padding: 14px 16px; }
  .stats { gap: 12px; }
  .stat { padding: 14px; flex-direction: column; gap: 10px; }
  .stat-value { font-size: 1.2rem; }
  .stats-3 { grid-template-columns: minmax(0, 1fr); }
  .stat-icon { width: 36px; height: 36px; }
  .grid-2, .grid-3, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span-2 { grid-column: auto; }
  .features, .blog-grid, .steps { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 48px 0; }
  .hero { padding: 48px 0 40px; }
  .cta-band { padding: 28px; }
  .dl { grid-template-columns: 1fr; gap: 2px; }
  .dl dd { margin-bottom: 10px; }
  .svc-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .svc-summary div { padding: 8px; }
  .toolbar .input, .toolbar .select { max-width: none; flex-basis: 100%; }
  .toolbar .btn { flex: 1; }
  .hide-mobile { display: none !important; }
  .show-mobile { display: initial !important; }
  .balance-chip .label { display: none; }
  .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--surface); border-top: 1px solid var(--border); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; }
  .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font-size: 11px; font-weight: 600; color: var(--muted); text-decoration: none; border-radius: 10px; }
  .bottom-nav a.active { color: var(--primary); }
  .bottom-nav a.primary-action .icon { background: var(--primary); color: #fff; border-radius: 12px; width: 40px; height: 32px; padding: 6px; margin-top: -2px; }
  .flash-stack { top: auto; bottom: 84px; right: 16px; }
  .site-nav .actions .btn-secondary { display: none; }
  .site-nav { gap: 10px; }
  .site-nav .actions { gap: 4px; }
  .site-nav .actions > [data-theme-toggle] { display: none; }
  .site-nav .brand { min-width: 0; font-size: 16px; }
  .site-nav .brand span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .site-nav .actions .btn-primary { padding: 0 12px; }
  .hide-xs { display: none !important; }
}
@media (max-width: 380px) {
  .svc-summary { grid-template-columns: 1fr 1fr; }
  .site-nav .actions .btn { padding: 0 12px; }
}
/* ---------------------------------------------------------------- order page: platforms, loading, confirm */
.platform-bar { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin-bottom: 12px; scrollbar-width: thin; }
.platform-chip { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.platform-chip:hover { border-color: var(--primary); color: var(--primary); }
.platform-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.platform-chip .icon { width: 18px; height: 18px; flex: 0 0 auto; }
.input-icon, .select-icon { position: relative; }
.input-icon-glyph, .select-icon-glyph { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--muted); pointer-events: none; }
.input-icon .input, .select-icon .select { padding-left: 42px; }
.select-icon-glyph { color: var(--primary); }
.search-results button { display: flex; align-items: flex-start; gap: 10px; }
.search-results .result-icon { display: inline-flex; flex: 0 0 auto; color: var(--primary); padding-top: 2px; }
.search-results .result-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.segmented label { margin: 0; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 10px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--text-2); text-align: center; line-height: 1.2; }
.segmented input:checked + span { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.segmented input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 1px; }
.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--primary-100); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; margin-left: 10px; }
.spinner-sm { width: 14px; height: 14px; margin: 0 6px 0 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.charge-box .amount { display: flex; align-items: center; }
.is-updating { opacity: .55; transition: opacity .15s; }
.btn.is-loading::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
dialog.modal-order { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.dl-confirm { grid-template-columns: 150px minmax(0, 1fr); margin-bottom: 14px; }
.dl-confirm dd { font-weight: 600; }
.confirm-notes { margin: 0 0 14px; padding-left: 18px; color: var(--text-2); }
.modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.modal-actions-center { justify-content: center; }
.done-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--success-50); color: var(--success); margin: 4px auto 10px; }
.done-icon .icon { width: 34px; height: 34px; }
.done-icon.is-error { background: var(--danger-50); color: var(--danger); }
.progress-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.progress-line .progress { flex: 1 1 60px; min-width: 60px; }
.stat-value.text-base, .text-base { font-size: 1rem; }
@media (max-width: 767px) {
  .dl-confirm { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dl-confirm dd { margin-bottom: 10px; }
  .modal-actions .btn { flex: 1 1 140px; }
  .segmented span { font-size: 13px; padding: 0 6px; }
}

.dropdown-form { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 4px; }
.select-sm { min-height: 34px; padding-top: 4px; padding-bottom: 4px; font-size: 13.5px; }

.heading-icon { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.heading-icon .platform-icon { flex: 0 0 auto; color: var(--primary); }

/* ---------------------------------------------------------------- homepage */
ul.hero-trust, ol.steps, .platform-grid { list-style: none; padding: 0; margin-left: 0; }
.hero-trust li { display: inline-flex; align-items: center; gap: 6px; }
.hero-visual { display: flex; justify-content: center; }
.hero-visual img { width: 100%; max-width: 480px; height: auto; }
.platform-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin: 0; }
.platform-card { display: flex; align-items: center; gap: 12px; height: 100%; padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none !important; transition: border-color .15s, box-shadow .15s, transform .15s; }
.platform-card:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-1px); }
.platform-card-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; background: var(--primary-50); color: var(--primary); }
.platform-card-icon .icon { width: 24px; height: 24px; }
.platform-card-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.platform-card-text small { color: var(--muted); font-size: 13px; }
.stat-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 32px auto 0; max-width: 720px; text-align: center; }
.stat-band > div { padding: 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.stat-band dt { color: var(--muted); font-size: 13px; font-weight: 600; }
.stat-band dd { margin: 4px 0 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
@media (max-width: 1023px) {
  .hero-visual img { max-width: 400px; }
}
@media (max-width: 767px) {
  .hero-visual img { max-width: 280px; }
  .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .platform-card { padding: 12px; gap: 10px; }
  .platform-card-icon { width: 38px; height: 38px; }
}

.toolbar .toolbar-search { flex: 2 1 280px; max-width: 440px; }
.link-line { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-line a { color: var(--primary); }
@media (max-width: 767px) { .link-line { max-width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .sidebar, .topbar, .bottom-nav, .btn { display: none !important; }
  .main { margin: 0; }
}

/* ---------------------------------------------------------------- charts */
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 11px; }
.chart .s1 { fill: var(--series-1); }
.chart .s2 { fill: var(--series-2); }
.chart .bar:hover { opacity: .8; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---------------------------------------------------------------- segmented PIN / OTP */
.code-boxes { display:flex; justify-content:center; gap:10px; width:100%; margin:10px 0; }
.code-box { width:52px; height:58px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); font-size:24px; font-weight:800; text-align:center; outline:none; transition:border-color .15s, box-shadow .15s, transform .15s; }
.code-box:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); transform:translateY(-1px); }
@media (max-width:480px) { .code-boxes { gap:6px; } .code-box { width:42px; height:52px; font-size:21px; border-radius:10px; } }

/* ------------------------------------------------------------ Homepage CMS hero carousel */
.hero-cms{position:relative;overflow:hidden;padding:0;background:var(--surface)}
.hero-slides{position:relative;min-height:620px}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .7s ease,transform .7s ease;background-size:cover;background-position:center;display:flex;align-items:center;min-height:620px}
.hero-slide.active{position:relative;opacity:1;visibility:visible;pointer-events:auto;z-index:2}
.hero-slide.motion-slide{transform:translateX(36px)}.hero-slide.motion-slide.active{transform:translateX(0)}
.hero-slide.motion-zoom{transform:scale(1.035)}.hero-slide.motion-zoom.active{transform:scale(1)}
.hero-slide .hero-inner{width:100%}
.hero-slide.align-center .hero-copy{text-align:center;margin-inline:auto}.hero-slide.align-center .hero-cta,.hero-slide.align-center .hero-trust{justify-content:center}
.hero-slide.align-right .hero-copy{text-align:right;margin-left:auto}.hero-slide.align-right .hero-cta,.hero-slide.align-right .hero-trust{justify-content:flex-end}
.hero-image-stack{position:relative;min-height:430px;display:flex;align-items:center;justify-content:center}
.hero-layer{max-width:88%;max-height:410px;object-fit:contain;filter:drop-shadow(0 24px 48px rgba(50,40,120,.12));transition:transform .8s ease,opacity .8s ease}
.hero-layer-2,.hero-layer-3{position:absolute;max-width:48%;max-height:240px}
.hero-layer-2{right:-2%;top:10%;animation:heroFloatA 5.5s ease-in-out infinite}.hero-layer-3{left:2%;bottom:5%;animation:heroFloatB 6.5s ease-in-out infinite}
.motion-float .hero-layer-1{animation:heroFloatMain 6s ease-in-out infinite}
.hero-arrow{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 90%,transparent);box-shadow:var(--shadow);font-size:28px;line-height:1;color:var(--text);cursor:pointer}.hero-prev{left:22px}.hero-next{right:22px}
.hero-dots{position:absolute;z-index:5;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:8px}.hero-dots button{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:var(--border-strong);cursor:pointer;transition:width .2s,background .2s}.hero-dots button.active{width:28px;background:var(--primary)}
@keyframes heroFloatA{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(1.5deg)}}
@keyframes heroFloatB{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(12px) rotate(-1.5deg)}}
@keyframes heroFloatMain{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:900px){.hero-slides,.hero-slide{min-height:auto}.hero-slide{position:absolute}.hero-slide.active{position:relative}.hero-image-stack{min-height:320px}.hero-arrow{display:none}.hero-layer-2,.hero-layer-3{max-width:42%}}

/* ------------------------------------------------------------ Dynamic footer */
.footer-grid-dynamic{grid-template-columns:minmax(240px,1.4fr) repeat(auto-fit,minmax(150px,1fr));align-items:start}
.footer-socials{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.footer-social-icon{width:38px;height:38px;border:1px solid var(--border);border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-2);background:var(--surface-2);transition:transform .18s,border-color .18s,color .18s}.footer-social-icon:hover{transform:translateY(-2px);border-color:var(--primary);color:var(--primary)}.footer-social-icon svg{width:18px;height:18px}.footer-item-icon{display:inline-flex;vertical-align:middle;margin-right:7px}.footer-item-icon svg{width:14px;height:14px}.footer-social-text{display:flex;gap:14px;flex-wrap:wrap}

/* ------------------------------------------------------------ Local TOTP QR */
.totp-setup-grid{display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:center;margin:16px 0}.totp-qr-wrap{padding:12px;border:1px solid var(--border);border-radius:18px;background:#fff}.totp-qr{display:flex;align-items:center;justify-content:center;min-height:196px}.totp-qr svg{display:block;max-width:100%;height:auto}.totp-qr-error{color:var(--danger);font-size:13px;text-align:center;padding:18px}
@media(max-width:640px){.totp-setup-grid{grid-template-columns:1fr}.totp-qr-wrap{max-width:230px;margin-inline:auto}}

/* ------------------------------------------------------------ Homepage section backgrounds & scroll reveal */
.home-cms-section{position:relative;isolation:isolate;background:var(--section-bg,transparent);overflow:hidden}
.home-cms-section::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--section-bg-image,none);background-size:cover;background-position:center;background-repeat:no-repeat;opacity:var(--section-bg-opacity,0)}
.home-cms-section::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 3%,transparent),color-mix(in srgb,var(--surface) 8%,transparent))}
[data-scroll-reveal]{transition:opacity .72s cubic-bezier(.2,.7,.2,1),transform .72s cubic-bezier(.2,.7,.2,1),filter .72s ease;will-change:opacity,transform,filter}
[data-scroll-reveal].reveal-pending{opacity:0}
[data-scroll-reveal="fade-up"].reveal-pending{transform:translateY(42px)}
[data-scroll-reveal="fade-down"].reveal-pending{transform:translateY(-42px)}
[data-scroll-reveal="fade-left"].reveal-pending{transform:translateX(52px)}
[data-scroll-reveal="fade-right"].reveal-pending{transform:translateX(-52px)}
[data-scroll-reveal="zoom-in"].reveal-pending{transform:scale(.94)}
[data-scroll-reveal="zoom-out"].reveal-pending{transform:scale(1.06)}
[data-scroll-reveal="flip-up"].reveal-pending{transform:perspective(900px) rotateX(10deg) translateY(28px);transform-origin:50% 100%}
[data-scroll-reveal="blur-in"].reveal-pending{filter:blur(10px);transform:scale(.985)}
[data-scroll-reveal="rise"].reveal-pending{transform:translateY(65px) scale(.985)}
[data-scroll-reveal="none"].reveal-pending{opacity:1;transform:none;filter:none}
[data-scroll-reveal].revealed{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){[data-scroll-reveal],[data-scroll-reveal].reveal-pending{transition:none!important;opacity:1!important;transform:none!important;filter:none!important}}

/* ------------------------------------------------------------ Extended hero motion presets */
.hero-slide{isolation:isolate}
.hero-bg-media{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(1.02);transition:transform 1.2s ease,opacity .6s ease}
.hero-slide .hero-inner{position:relative;z-index:1}
.hero-slide.motion-slide-left{transform:translateX(-70px)}.hero-slide.motion-slide-left.active{transform:translateX(0)}
.hero-slide.motion-slide-right{transform:translateX(70px)}.hero-slide.motion-slide-right.active{transform:translateX(0)}
.hero-slide.motion-slide-up{transform:translateY(55px)}.hero-slide.motion-slide-up.active{transform:translateY(0)}
.hero-slide.motion-slide-down{transform:translateY(-55px)}.hero-slide.motion-slide-down.active{transform:translateY(0)}
.hero-slide.motion-zoom-out{transform:scale(.94)}.hero-slide.motion-zoom-out.active{transform:scale(1)}
.hero-slide.motion-blur{filter:blur(12px);transform:scale(1.015)}.hero-slide.motion-blur.active{filter:blur(0);transform:scale(1)}
.hero-slide.motion-rotate{transform:scale(.98) rotate(-.7deg)}.hero-slide.motion-rotate.active{transform:scale(1) rotate(0)}
.hero-slide.motion-parallax .hero-layer-1{transform:translateY(18px) scale(.98)}
.hero-slide.motion-parallax.active .hero-layer-1{transform:translateY(0) scale(1)}
.hero-slide.motion-parallax .hero-layer-2{animation:heroParallaxA 6s ease-in-out infinite}
.hero-slide.motion-parallax .hero-layer-3{animation:heroParallaxB 7s ease-in-out infinite}
.hero-slide.motion-kenburns.active .hero-bg-media{animation:heroKenBurns 9s ease-out both}
@keyframes heroParallaxA{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-10px,-18px,0)}}
@keyframes heroParallaxB{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(12px,14px,0)}}
@keyframes heroKenBurns{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.5%,1%,0)}}
.section.home-cms-section{background:var(--section-bg,var(--surface))}
.section-alt.home-cms-section{background:var(--section-bg,var(--surface-2))}

/* ====================================================================== notices / grouped menus / social auth / scroll top */
.nav-group{border:0;margin:2px 0 8px}.nav-group>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 12px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.nav-group>summary::-webkit-details-marker{display:none}.nav-group>summary .icon{width:14px;height:14px;transition:transform .2s}.nav-group:not([open])>summary .icon{transform:rotate(-90deg)}.nav-group-items{display:grid;gap:2px}
.notice-dialog{border:0;padding:0;background:transparent;max-width:min(680px,calc(100vw - 28px));width:100%;overflow:visible}.notice-dialog::backdrop{background:rgba(10,13,25,.62);backdrop-filter:blur(4px)}.notice-modal{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-lg);overflow:hidden}.notice-modal.notice-info{border-top:4px solid var(--info)}.notice-modal.notice-success{border-top:4px solid var(--success)}.notice-modal.notice-warning{border-top:4px solid var(--warning)}.notice-modal.notice-danger{border-top:4px solid var(--danger)}.notice-image{display:block;width:100%;max-height:420px;object-fit:contain;background:var(--surface-2)}.notice-copy{padding:24px 26px}.notice-copy h2{padding-right:34px}.notice-close{position:absolute;right:12px;top:12px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:26px;line-height:1;cursor:pointer;box-shadow:var(--shadow-sm)}
.social-auth{margin-top:20px}.auth-divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:16px 0}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--border);flex:1}.social-auth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.social-auth-btn{justify-content:center;min-height:44px}
.scroll-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:14px;border:1px solid var(--border);background:var(--primary);color:var(--on-primary);display:grid;place-items:center;box-shadow:var(--shadow-lg);z-index:80;opacity:0;visibility:hidden;transform:translateY(10px);transition:.22s;cursor:pointer}.scroll-top.show{opacity:1;visibility:visible;transform:none}.scroll-top:hover{background:var(--primary-600)}
@media(max-width:640px){.social-auth-grid{grid-template-columns:1fr}.notice-copy{padding:20px}.scroll-top{right:14px;bottom:76px}}

.btn-warning{background:var(--warning);color:#fff}.btn-warning:hover{filter:brightness(.95);color:#fff}.btn-info{background:var(--info);color:#fff}.btn-info:hover{filter:brightness(.95);color:#fff}


/* Notice viewport safety */
.notice-modal{max-height:600px;display:flex;flex-direction:column}.notice-modal .notice-image{flex:0 0 auto}.notice-modal .notice-copy{overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.notice-dialog{max-height:min(680px,calc(100vh - 28px))}

/* Global page loader */
.page-loader{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;background:var(--surface);transition:opacity .3s ease,visibility .3s ease}.page-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.page-loader-ring{width:46px;height:46px;border:4px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:page-spin .75s linear infinite}.page-loader-brand{display:grid;gap:14px;justify-items:center;font-weight:700;color:var(--text)}@keyframes page-spin{to{transform:rotate(360deg)}}

/* Notification opt-in + toast stack */
.browser-notify-prompt{position:fixed;right:18px;bottom:18px;z-index:12000;width:min(390px,calc(100vw - 36px));padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg)}.browser-notify-prompt .actions{display:flex;gap:8px;margin-top:12px}.notify-toast-stack{position:fixed;right:18px;bottom:18px;z-index:11900;width:min(390px,calc(100vw - 36px));display:grid;gap:10px}.notify-toast{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:14px;box-shadow:var(--shadow-lg);padding:14px 42px 14px 16px;position:relative;animation:toast-in .25s ease}.notify-toast h4{margin:0 0 4px;font-size:15px}.notify-toast p{margin:0;color:var(--muted);font-size:13px}.notify-toast a{position:absolute;inset:0;z-index:0}.notify-toast button{position:absolute;right:8px;top:8px;z-index:2;border:0;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}@keyframes toast-in{from{transform:translateY(12px);opacity:0}}


/* Premium login motion */
.auth-motion-page { overflow-x:hidden; }
.auth-motion-page .auth-wrap { position:relative; overflow:hidden; isolation:isolate; }
.auth-motion-bg { position:fixed; inset:0; pointer-events:none; z-index:-1; overflow:hidden; }
.auth-orb { position:absolute; border-radius:999px; filter:blur(8px); opacity:.38; will-change:transform; }
.auth-orb.orb-a { width:360px; height:360px; left:-100px; top:-80px; background:color-mix(in srgb, var(--primary) 72%, transparent); animation:authFloatA 12s ease-in-out infinite alternate; }
.auth-orb.orb-b { width:280px; height:280px; right:8%; top:15%; background:rgba(140,92,255,.30); animation:authFloatB 15s ease-in-out infinite alternate; }
.auth-orb.orb-c { width:240px; height:240px; right:-80px; bottom:-60px; background:rgba(52,211,153,.18); animation:authFloatA 17s ease-in-out infinite alternate-reverse; }
.auth-grid-glow { position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(90deg,#000,transparent 75%); animation:authGridDrift 24s linear infinite; }
.auth-side-motion { position:relative; overflow:hidden; box-shadow:inset -1px 0 rgba(255,255,255,.08); }
.auth-side-motion::before,.auth-side-motion::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.16); border-radius:50%; pointer-events:none; }
.auth-side-motion::before { width:360px; height:360px; right:-145px; top:10%; animation:authRing 18s linear infinite; }
.auth-side-motion::after { width:220px; height:220px; right:16%; bottom:-100px; animation:authRing 13s linear infinite reverse; }
.auth-side-motion .brand-row { animation:authFadeDown .7s cubic-bezier(.2,.7,.2,1) both; }
.auth-side-motion .auth-side-copy { animation:authFadeUp .8s .08s cubic-bezier(.2,.7,.2,1) both; }
.auth-side-motion li { opacity:0; transform:translateX(-14px); animation:authListIn .55s cubic-bezier(.2,.7,.2,1) forwards; }
.auth-side-motion li:nth-child(1){animation-delay:.22s}.auth-side-motion li:nth-child(2){animation-delay:.31s}.auth-side-motion li:nth-child(3){animation-delay:.40s}.auth-side-motion li:nth-child(4){animation-delay:.49s}
.auth-box-motion { position:relative; padding:28px; border-radius:24px; background:color-mix(in srgb,var(--surface) 86%,transparent); border:1px solid color-mix(in srgb,var(--border) 74%,transparent); box-shadow:0 26px 70px rgba(15,23,42,.12); backdrop-filter:blur(18px); animation:authCardIn .72s cubic-bezier(.16,1,.3,1) both; }
.auth-box-motion::before { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 45%,transparent),transparent 42%,rgba(140,92,255,.22)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.auth-box-motion .field { animation:authFieldIn .48s ease both; }
.auth-box-motion .field:nth-of-type(1){animation-delay:.10s}.auth-box-motion .field:nth-of-type(2){animation-delay:.16s}.auth-box-motion .field:nth-of-type(3){animation-delay:.22s}.auth-box-motion .field:nth-of-type(4){animation-delay:.28s}.auth-box-motion .field:nth-of-type(5){animation-delay:.34s}.auth-box-motion .field:nth-of-type(6){animation-delay:.40s}.auth-box-motion .field:nth-of-type(7){animation-delay:.46s}.auth-box-motion .field:nth-of-type(8){animation-delay:.52s}
.auth-box-motion .btn-primary { transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; }
.auth-box-motion .btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 30px color-mix(in srgb,var(--primary) 30%,transparent); filter:saturate(1.08); }
.auth-box-motion .input:focus,.auth-box-motion .select:focus { transform:translateY(-1px); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.trust-device-field { margin-top:18px; padding:14px; border-radius:14px; border:1px solid var(--border); background:var(--surface-2); }
@keyframes authFloatA { from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(70px,50px,0) scale(1.08)} }
@keyframes authFloatB { from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-80px,70px,0) scale(.92)} }
@keyframes authGridDrift { from{transform:translateX(0)} to{transform:translateX(44px)} }
@keyframes authRing { to{transform:rotate(360deg)} }
@keyframes authCardIn { from{opacity:0;transform:translateY(26px) scale(.975)} to{opacity:1;transform:none} }
@keyframes authFadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
@keyframes authFadeDown { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:none} }
@keyframes authListIn { to{opacity:1;transform:none} }
@keyframes authFieldIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

.auth-box-motion .social-auth { animation:authFadeUp .58s .36s cubic-bezier(.2,.7,.2,1) both; }
.auth-box-motion .auth-foot { animation:authFadeUp .58s .44s cubic-bezier(.2,.7,.2,1) both; }
.auth-box-motion form > .hint,.auth-box-motion form > .alert { animation:authFieldIn .48s .30s ease both; }
@media (max-width:700px){ .auth-box-motion{padding:22px;border-radius:20px} .auth-orb.orb-a{width:260px;height:260px}.auth-orb.orb-b{width:210px;height:210px} }
@media (prefers-reduced-motion:reduce){ .auth-motion-page *,.auth-motion-page *::before,.auth-motion-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} }

/* Footer CMS background controls */
.site-footer.footer-cms { position: relative; isolation: isolate; overflow: hidden; background: var(--footer-bg-base, var(--surface)); }
.site-footer.footer-cms::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--footer-bg-image, none); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: var(--footer-bg-image-opacity, 0); }
.site-footer.footer-cms > .container { position: relative; z-index: 1; }

/* ------------------------------------------------------------ Screenshot-style two-tier footer */
.site-footer.footer-cms{
  padding:0;
  margin-top:40px;
  border-top:1px solid var(--border);
  background:transparent;
  overflow:hidden;
}
.site-footer.footer-cms::before{display:none}
.footer-main{
  position:relative;
  isolation:isolate;
  background:var(--footer-bg-base,var(--surface));
  padding:54px 0 50px;
  overflow:hidden;
}
.footer-main::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:var(--footer-bg-image,none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:var(--footer-bg-image-opacity,0);
}
.footer-main .footer-grid-dynamic{
  grid-template-columns:minmax(260px,1.35fr) repeat(3,minmax(150px,.75fr));
  gap:clamp(34px,6vw,88px);
  align-items:start;
}
.footer-brand-col{max-width:340px}
.footer-brand{display:inline-flex;margin-bottom:18px}
.footer-brand img{width:auto;height:auto;max-width:180px;max-height:104px;object-fit:contain}
.footer-description{max-width:320px;margin:0;color:var(--muted);font-size:15px;line-height:1.65}
.footer-socials-main{margin-top:18px}
.footer-link-group h4{
  margin:0 0 14px;
  font-size:12px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.footer-link-group ul{list-style:none;margin:0;padding:0}
.footer-link-group li{margin:0 0 10px}
.footer-link-group a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--text-2);
  font-size:14px;
  text-decoration:none;
  transition:color .18s ease,transform .18s ease;
}
.footer-link-group a:hover{color:var(--primary);transform:translateX(2px)}
.footer-link-group a>svg,.footer-link-group .footer-item-icon svg{width:14px;height:14px;flex:0 0 auto}
.footer-item-icon{margin-right:0}
.footer-social-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  background:color-mix(in srgb,var(--surface) 90%,#fff 10%);
  box-shadow:0 1px 3px rgba(15,23,42,.05);
}
.footer-bottom-bar{
  width:100%;
  background:#050505;
  color:#fff;
}
.footer-bottom-inner{
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:12px;
  padding-bottom:12px;
}
.footer-copyright{font-size:13px;color:rgba(255,255,255,.92)}
.footer-socials-bottom{margin:0;gap:10px;justify-content:flex-end}
.footer-bottom-social-icon{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:0;
  border:1px solid rgba(255,255,255,.16);
  background:#fff;
  color:#5d6882;
  transition:transform .18s ease,background .18s ease,color .18s ease;
}
.footer-bottom-social-icon:hover{transform:translateY(-2px);background:var(--primary);color:#fff}
.footer-bottom-social-icon svg{width:17px;height:17px}
@media(max-width:980px){
  .footer-main .footer-grid-dynamic{grid-template-columns:minmax(240px,1.2fr) repeat(2,minmax(150px,1fr));gap:34px 46px}
}
@media(max-width:720px){
  .footer-main{padding:42px 0 34px}
  .footer-main .footer-grid-dynamic{grid-template-columns:1fr 1fr;gap:32px 24px}
  .footer-brand-col{grid-column:1/-1;max-width:none}
  .footer-description{max-width:440px}
  .footer-bottom-inner{min-height:72px;align-items:flex-start;flex-direction:column;justify-content:center}
  .footer-socials-bottom{justify-content:flex-start}
}
@media(max-width:460px){
  .footer-main .footer-grid-dynamic{grid-template-columns:1fr}
  .footer-brand-col{grid-column:auto}
  .footer-bottom-social-icon{width:36px;height:36px}
}

/* Footer advanced appearance controls */
.footer-main{color:var(--footer-text-color,var(--text-2))}
.footer-description,.footer-link-group a{color:var(--footer-text-color,var(--text-2))}
.footer-link-group h4{color:var(--footer-heading-color,var(--muted))}
.footer-link-group .footer-item-icon{
  width:26px;height:26px;display:inline-flex;align-items:center;justify-content:var(--footer-item-icon-align,center);
  padding:5px;border-radius:var(--footer-item-icon-radius,8px);background:var(--footer-item-icon-bg,transparent);
  color:var(--footer-icon-color,currentColor);flex:0 0 26px;
}
.footer-link-group .footer-item-icon svg{color:inherit}
.footer-link-group a>svg{color:var(--footer-icon-color,currentColor)}
.footer-social-icon{color:var(--footer-icon-color,currentColor)}
.footer-bottom-bar{background:var(--footer-bottom-bg,#050505);color:var(--footer-bottom-text,#fff)}
.footer-copyright{color:var(--footer-bottom-text,rgba(255,255,255,.92))}
.footer-bottom-social-icon{background:var(--footer-bottom-icon-bg,#fff);color:var(--footer-bottom-icon-color,#5d6882);border-radius:var(--footer-bottom-icon-radius,0)}

/* ---------------------------------------------------------------- public service catalog + level pages */
.service-browser-page{padding-bottom:64px}
.service-browser-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;padding:26px 30px 18px;border:1px solid var(--border);border-radius:24px 24px 0 0;background:var(--surface)}
.service-browser-toolbar label,.service-filter-label{display:block;margin-bottom:10px;font-weight:700;color:var(--text)}
.service-search-input{height:56px;display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:0 16px;transition:border-color .18s,box-shadow .18s}
.service-search-input:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent)}
.service-search-input .icon{width:20px;height:20px;color:var(--muted)}
.service-search-input input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font:inherit}
.service-sort-field .select{height:56px;border-radius:14px}
.service-platform-filter{padding:10px 30px 26px;border:1px solid var(--border);border-top:0;border-radius:0 0 24px 24px;background:var(--surface);margin-bottom:34px}
.platform-chips{display:flex;flex-wrap:wrap;gap:10px}
.platform-chip{min-height:52px;display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 9px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);text-decoration:none!important;transition:.16s ease}
.platform-chip:hover{border-color:var(--primary);transform:translateY(-1px)}
.platform-chip.active{border-color:var(--primary);background:var(--primary-50);color:var(--primary)}
.platform-chip-icon{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--surface) 86%,var(--primary) 14%);border:1px solid var(--border)}
.platform-chip-icon .icon{width:21px;height:21px}
.platform-chip>span:last-child:not(.platform-chip-icon){color:var(--muted);font-size:12px;margin-left:2px}
.service-results-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px}
.service-results-head a{font-size:14px}
.service-list-card{border:1px solid var(--border);border-radius:22px;background:var(--surface);overflow:hidden}
.service-list-row{display:grid;grid-template-columns:54px minmax(0,1fr) minmax(130px,190px) minmax(120px,170px) auto;align-items:center;gap:18px;padding:23px 28px;border-bottom:1px solid var(--border);min-height:118px}
.service-list-row:last-child{border-bottom:0}
.service-platform-logo{width:46px;height:46px;border:1px solid var(--border);border-radius:13px;display:grid;place-items:center;color:var(--primary);background:var(--surface);text-decoration:none!important}
.service-platform-logo .icon{width:27px;height:27px}
.service-list-main{min-width:0}
.service-list-kicker{font-size:12px;color:var(--muted);margin-bottom:5px}
.service-list-kicker a{color:var(--muted);text-decoration:none}
.service-list-main h2,.service-list-main h3{font-size:17px;line-height:1.35;margin:0 0 8px;color:var(--text)}
.service-list-main h2 a,.service-list-main h3 a{color:inherit;text-decoration:none}
.service-list-main h2 a:hover,.service-list-main h3 a:hover{color:var(--primary)}
.service-list-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted)}
.service-list-meta span{display:inline-flex;align-items:center;gap:5px}.service-list-meta .icon{width:14px;height:14px}.service-list-meta .meta-accent{color:var(--primary)}
.service-list-limits,.service-list-price{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}.service-list-limits strong{font-size:15px}.service-list-limits small,.service-list-price small{color:var(--muted);font-size:12px}.service-list-price strong{color:var(--primary);font-size:20px;letter-spacing:-.02em}
.service-list-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end}.service-list-actions .btn{white-space:nowrap}
.service-pagination{display:flex;justify-content:center;align-items:center;gap:18px;margin:28px 0 0}.service-pagination span{color:var(--muted);font-size:14px}
.home-service-toolbar{border-radius:22px;margin-bottom:14px}.home-platform-chips{margin:0 0 16px}.home-service-list{margin-top:6px}

.service-detail-page{padding:58px 0 72px}.service-detail-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.78fr);gap:48px;align-items:start}.service-detail-platform{width:52px;height:52px;border-radius:15px;border:1px solid var(--border);display:grid;place-items:center;color:var(--primary);margin-bottom:18px}.service-detail-platform .icon{width:30px;height:30px}.service-detail-content h1{font-size:clamp(2rem,4vw,3rem);line-height:1.14;letter-spacing:-.035em;margin:0 0 18px}.service-id-line{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;margin-bottom:28px}.copy-inline{border:0;background:transparent;color:var(--muted);padding:4px;cursor:pointer}.copy-inline .icon{width:17px;height:17px}.copy-inline.copied{color:var(--success)}
.service-detail-card{border:1px solid var(--border);border-radius:24px;background:var(--surface);padding:30px}.service-detail-card h2{font-size:18px;margin:0 0 24px}.service-spec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 30px}.service-spec-grid>div{display:flex;flex-direction:column;gap:6px}.service-spec-grid span{color:var(--muted);font-size:13px}.service-spec-grid strong{font-size:18px}.service-spec-grid small{color:var(--primary);font-size:11px}.accent-price{color:var(--primary)}.service-description{margin-top:28px;padding-top:24px;border-top:1px solid var(--border)}.service-description h3{font-size:15px;margin:0 0 12px}.service-description p{margin:0;line-height:1.7;color:var(--text-2)}.service-completed-note{margin-top:18px;color:var(--muted);font-size:14px}
.service-order-preview{position:sticky;top:100px;border:1px solid var(--border);border-radius:24px;background:var(--surface);padding:30px;box-shadow:var(--shadow-sm)}.order-preview-eyebrow{display:flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--primary);font-weight:800;font-size:11px}.order-preview-eyebrow span{width:7px;height:7px;border-radius:50%;background:var(--primary)}.service-order-preview h2{font-size:23px;margin:16px 0 24px}.quantity-presets{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}.quantity-presets button{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:11px 17px;cursor:pointer;font:inherit}.quantity-presets button:hover{border-color:var(--primary);color:var(--primary)}.service-order-preview label{font-size:14px;font-weight:700;margin-bottom:8px;display:block}.quantity-input{height:56px;font-size:18px}.input-help{color:var(--muted);font-size:12px;margin-top:7px}.order-estimate-box{display:grid;grid-template-columns:1fr 1.4fr;align-items:end;gap:20px;padding:22px;margin-top:28px;border-radius:18px;background:var(--surface-2)}.order-estimate-box>div{display:flex;flex-direction:column;gap:5px}.order-estimate-box span{color:var(--muted);font-size:12px}.order-estimate-box strong{font-size:17px}.estimate-total{text-align:right}.estimate-total strong{font-size:29px;color:var(--primary);line-height:1}.estimate-total small{color:var(--muted);font-size:11px}.service-order-cta{width:100%;justify-content:center;margin-top:24px}.order-preview-note{text-align:center;color:var(--muted);font-size:12px;line-height:1.5;margin:14px 0 0}

.levels-page{padding-bottom:70px}.level-current-card{display:grid;grid-template-columns:1.2fr .8fr;border:1px solid var(--border);border-radius:26px;background:var(--surface);overflow:hidden;margin-bottom:54px;box-shadow:var(--shadow-sm)}.level-current-main{padding:34px}.level-overline{text-transform:uppercase;letter-spacing:.14em;color:var(--primary);font-weight:800;font-size:11px;margin-bottom:16px}.level-current-title{display:flex;align-items:center;gap:16px}.level-current-title h2{font-size:30px;margin:0 0 3px}.level-current-title p{margin:0;color:var(--muted)}.level-medallion{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:var(--primary-50);color:var(--primary)}.level-medallion .icon{width:30px;height:30px}.level-summary-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}.level-summary-stats>div{padding:16px;border-radius:16px;background:var(--surface-2);display:flex;flex-direction:column;gap:5px}.level-summary-stats span{font-size:12px;color:var(--muted)}.level-summary-stats strong{font-size:16px}.level-progress-panel{padding:34px;background:linear-gradient(145deg,var(--primary-50),var(--surface));border-left:1px solid var(--border);display:flex;flex-direction:column;justify-content:center}.level-progress-head{display:flex;justify-content:space-between;gap:15px;font-weight:700}.level-progress-track{height:10px;background:color-mix(in srgb,var(--border) 70%,transparent);border-radius:999px;margin:13px 0 16px;overflow:hidden}.level-progress-track span{display:block;height:100%;background:var(--primary);border-radius:inherit}.level-progress-panel p{color:var(--text-2);line-height:1.6}.level-progress-panel .btn{align-self:flex-start}.level-top-reached{display:flex;gap:14px;align-items:flex-start}.level-top-reached>.icon{width:30px;height:30px;color:var(--success)}.level-top-reached strong{font-size:18px}.level-top-reached p{margin:4px 0 0}.levels-guest-callout{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 32px;border:1px solid var(--border);border-radius:22px;background:var(--surface);margin-bottom:50px}.levels-guest-callout h2{margin:0 0 6px}.levels-guest-callout p{margin:0;color:var(--muted)}.levels-section-head{margin-bottom:28px}.level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.level-card{border:1px solid var(--border);border-radius:22px;background:var(--surface);padding:26px;position:relative;transition:.18s ease}.level-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}.level-card.current{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 12%,transparent)}.level-card-top{display:flex;justify-content:space-between;align-items:center}.level-number{font-size:12px;color:var(--muted);font-weight:800;letter-spacing:.12em}.level-card h3{font-size:20px;margin:20px 0 12px}.level-discount{display:flex;align-items:baseline;gap:8px;margin-bottom:15px}.level-discount strong{font-size:34px;color:var(--primary);letter-spacing:-.04em}.level-discount span{font-size:12px;color:var(--muted)}.level-card>p{color:var(--text-2);min-height:44px;line-height:1.5}.level-requirements{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--border)}.level-requirements>div{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:10px}.level-requirements dt{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}.level-requirements dt .icon{width:15px;height:15px}.level-requirements dd{margin:0;font-size:13px;font-weight:700;text-align:right}.level-how-it-works{margin-top:54px;padding:34px;border-radius:24px;background:var(--surface-2)}.level-how-it-works>h2{text-align:center;margin:0 0 28px}.level-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.level-info-grid>div{text-align:center}.level-info-grid>div>.icon{width:30px;height:30px;color:var(--primary)}.level-info-grid h3{font-size:16px;margin:12px 0 6px}.level-info-grid p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}

@media(max-width:1050px){.service-list-row{grid-template-columns:50px minmax(0,1fr) 140px 130px}.service-list-actions{grid-column:2/-1}.service-detail-grid{grid-template-columns:1fr}.service-order-preview{position:static}.level-current-card{grid-template-columns:1fr}.level-progress-panel{border-left:0;border-top:1px solid var(--border)}.level-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.service-browser-toolbar{grid-template-columns:1fr;padding:20px;border-radius:18px 18px 0 0}.service-platform-filter{padding:8px 20px 20px}.platform-chips{flex-wrap:nowrap;overflow:auto;padding-bottom:5px}.platform-chip{flex:0 0 auto}.service-results-head{align-items:flex-start;flex-direction:column}.service-list-row{grid-template-columns:44px minmax(0,1fr);gap:12px;padding:19px}.service-platform-logo{width:42px;height:42px}.service-list-limits,.service-list-price{grid-column:2;align-items:flex-start;text-align:left}.service-list-actions{grid-column:2;justify-content:flex-start;flex-wrap:wrap}.service-detail-card{padding:22px}.service-spec-grid{grid-template-columns:repeat(2,1fr)}.service-order-preview{padding:22px}.level-summary-stats{grid-template-columns:1fr}.level-grid,.level-info-grid{grid-template-columns:1fr}.levels-guest-callout{align-items:flex-start;flex-direction:column}}
@media(max-width:480px){.service-list-actions .btn{flex:1;justify-content:center}.service-spec-grid{grid-template-columns:1fr}.order-estimate-box{grid-template-columns:1fr}.estimate-total{text-align:left}.level-current-main,.level-progress-panel{padding:24px}.level-card{padding:22px}}

/* Related services + signed-in levels page */
.related-services-section{padding:18px 0 64px}.related-services-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:18px}.related-services-head h2{margin:.2rem 0}.related-services-head p{margin:0;color:var(--muted)}.section-kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--primary);font-weight:700}.related-service-list .service-list-row{min-height:102px}.user-levels-page{max-width:1280px;margin:0 auto}.user-levels-page .level-current-card{margin-top:8px}.user-levels-page .levels-section-head{margin-top:34px}@media(max-width:760px){.related-services-head{align-items:flex-start;flex-direction:column}.related-services-head .btn{width:100%;justify-content:center}}