:root {
    --bg: #09111f;
    --bg-2: #101a2d;
    --surface: rgba(14, 23, 41, 0.78);
    --surface-2: rgba(255, 255, 255, 0.04);
    --surface-3: rgba(255, 255, 255, 0.06);
    --card: #0f1729;
    --card-soft: rgba(15, 23, 41, 0.78);
    --border: rgba(148, 163, 184, 0.18);
    --border-strong: rgba(148, 163, 184, 0.28);
    --text-1: #f8fafc;
    --text-2: #cbd5e1;
    --text-3: #94a3b8;
    --text-4: #64748b;
    --primary: #7c3aed;
    --primary-2: #4f46e5;
    --primary-soft: rgba(124, 58, 237, 0.18);
    --cyan: #22d3ee;
    --cyan-soft: rgba(34, 211, 238, 0.16);
    --green: #34d399;
    --green-soft: rgba(52, 211, 153, 0.18);
    --amber: #fbbf24;
    --amber-soft: rgba(251, 191, 36, 0.18);
    --red: #fb7185;
    --red-soft: rgba(251, 113, 133, 0.18);
    --shopee: #fb923c;
    --shopee-soft: rgba(251, 146, 60, 0.16);
    --tiktok: #22d3ee;
    --tiktok-soft: rgba(34, 211, 238, 0.16);
    --radius-xl: 28px;
    --radius-lg: 20px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --shadow-lg: 0 24px 70px rgba(2, 6, 23, 0.38);
    --shadow-md: 0 16px 40px rgba(2, 6, 23, 0.28);
    --shadow-sm: 0 8px 20px rgba(2, 6, 23, 0.18);
    --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    color: var(--text-1);
    background:
        radial-gradient(circle at top left, rgba(124, 58, 237, 0.30), transparent 28%),
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.20), transparent 26%),
        linear-gradient(180deg, #0a1222 0%, #09111f 52%, #0b1323 100%);
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page-shell {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 18%, rgba(255, 255, 255, 0.08), transparent 15%),
        radial-gradient(circle at 82% 12%, rgba(99, 102, 241, 0.14), transparent 22%),
        radial-gradient(circle at 78% 78%, rgba(45, 212, 191, 0.10), transparent 18%);
}

.navbar,
.ticker,
.panel,
.modal-box,
.toast {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(9, 17, 31, 0.74);
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
}

.nav-inner,
.ticker-inner,
.wrap {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
}

.nav-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.nav-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

.logo {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.logo-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--cyan));
    box-shadow: 0 14px 30px rgba(91, 33, 182, 0.28);
}

.logo-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.logo-name {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.logo-desc {
    font-size: 0.77rem;
    color: var(--text-3);
}

.nav-meta {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: nowrap;
}

.nav-rates {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    flex-wrap: nowrap;
}

.meta-chip,
.panel-tag,
.pill,
.rgroup-cmp,
.plat-badge,
.eyebrow,
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.meta-chip {
    padding: 7px 10px;
}

.meta-chip.subtle {
    color: var(--text-3);
}

.nav-btns {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-2);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}

.nav-btn:hover {
    transform: translateY(-1px);
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.08);
}

.nav-btn.sm {
    width: 34px;
    height: 34px;
    border-radius: 12px;
}

.ticker {
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
    background: rgba(9, 17, 31, 0.55);
}

.ticker-inner {
    padding: 18px 0 20px;
    display: grid;
    grid-template-columns: 1.3fr 1.4fr auto;
    gap: 20px;
    align-items: center;
}

.ticker-copy,
.panel-head-copy,
.hero-copy,
.hero-metric,
.quick-card,
.rstat,
.rgroup-hd,
.modal-top > div {
    min-width: 0;
}

.ticker-kicker,
.hero-kicker,
.eyebrow {
    padding: 7px 12px;
    color: #d8d4fe;
    background: rgba(124, 58, 237, 0.16);
    border-color: rgba(167, 139, 250, 0.24);
    width: fit-content;
    margin-bottom: 8px;
}

.ticker-note,
.panel-subtitle,
.field-help,
.sales-hints,
.modal-sub,
.modal-hint,
.empty-sub,
.quick-card p {
    color: var(--text-3);
}

.ticker-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.ticker-board-nav {
    min-width: 0;
    grid-template-columns: repeat(3, minmax(128px, 1fr));
    flex: 1;
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.ticker-flag {
    font-size: 1.15rem;
}

.ticker-code {
    font-size: 0.75rem;
    color: var(--text-3);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.ticker-val {
    margin-left: auto;
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ticker-input {
    margin-left: auto;
    width: 88px;
    height: 36px;
    border-radius: 12px !important;
    border: 1px solid rgba(99, 102, 241, 0.36) !important;
    background: rgba(99, 102, 241, 0.12) !important;
    color: #e0e7ff !important;
    text-align: center;
    font-weight: 700;
}

.ticker-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ticker-actions-nav {
    flex-shrink: 0;
    white-space: nowrap;
}

.ticker-switch {
    display: inline-flex;
    padding: 3px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
}

.ticker-btn {
    border: none;
    background: transparent;
    color: var(--text-3);
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}

.ticker-btn.active {
    color: white;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.24);
}

.ticker-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border-radius: 14px;
    background: rgba(52, 211, 153, 0.12);
    color: #a7f3d0;
    font-size: 0.78rem;
    font-weight: 700;
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
    animation: pulse 1.8s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.wrap {
    position: relative;
    padding: 28px 0 56px;
}

.hero {
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: 1.25fr 0.95fr;
    gap: 20px;
    align-items: stretch;
}

.hero-copy,
.hero-metrics,
.panel,
.empty-panel {
    border: 1px solid var(--border);
    background: var(--card-soft);
    box-shadow: var(--shadow-md);
}

.hero-copy {
    padding: 30px;
    border-radius: var(--radius-xl);
}

.hero-copy h1 {
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.02;
    letter-spacing: -0.05em;
    margin-bottom: 14px;
}

.hero-copy p {
    max-width: 58ch;
    color: var(--text-2);
    font-size: 1rem;
}

.hero-metrics {
    border-radius: var(--radius-xl);
    padding: 24px;
    display: grid;
    gap: 14px;
}

.hero-metric {
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.hero-label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.78rem;
    color: var(--text-3);
}

.hero-metric strong {
    font-size: 1.08rem;
    letter-spacing: -0.02em;
}

.layout {
    display: grid;
    grid-template-columns: 410px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.left-stack,
.right-stack {
    display: grid;
    gap: 18px;
}

.panel {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.panel:hover {
    box-shadow: var(--shadow-lg);
}

.panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
}

.panel-head.no-border {
    border-bottom: none;
    padding-bottom: 8px;
}

.panel-head-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.panel-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.panel-title.big {
    font-size: 1.2rem;
}

.panel-subtitle {
    font-size: 0.8rem;
}

.panel-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.06);
    font-size: 1rem;
}

.panel-tag {
    padding: 8px 12px;
}

.panel-tag.strong {
    color: #ddd6fe;
    background: rgba(124, 58, 237, 0.16);
}

.panel-body {
    padding: 0 22px 22px;
}

.compact-top {
    padding-top: 8px;
}

.quick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.quick-card {
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.quick-card strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.95rem;
}

.quick-card p {
    font-size: 0.8rem;
}

.quick-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.field {
    margin-bottom: 16px;
}

.field:last-child {
    margin-bottom: 0;
}

.field-label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-2);
}

.field-help,
.sales-hints {
    font-size: 0.78rem;
}

.field-help {
    margin-top: 8px;
}

.field-input {
    display: flex;
    align-items: center;
    min-height: 48px;
    border-radius: 15px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}

.field-input:focus-within,
.field-select:focus,
.field-select-full:focus,
.cost-tbl input:focus,
.fee input:focus,
.pre:focus,
.ticker-input:focus {
    outline: none;
    border-color: rgba(129, 140, 248, 0.48) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.16) !important;
}

.field-prefix,
.field-suffix {
    min-width: 54px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-3);
    font-size: 0.8rem;
    font-weight: 700;
}

.field-input input,
.field-input select,
.field-select,
.field-select-full,
.cost-tbl input,
.fee input {
    width: 100%;
    border: none;
    outline: none;
    color: var(--text-1);
    background: transparent;
    font: inherit;
    font-variant-numeric: tabular-nums;
}

.field-input input,
.field-input select {
    min-height: 48px;
    padding: 0 16px;
}

.field-input input::placeholder {
    color: var(--text-4);
}

.field-input select,
.field-select,
.field-select-full {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 34px;
}

.field-select,
.field-select-full {
    min-height: 48px;
    border-radius: 15px;
    border: 1px solid var(--border);
    background-color: rgba(255, 255, 255, 0.04);
    padding-left: 16px;
}

.field-input select option,
.field-select option,
.field-select-full option {
    color: var(--text-1);
    background: #101827;
}

.field-input select:focus,
.field-select:focus,
.field-select-full:focus {
    color-scheme: dark;
}

.row {
    display: grid;
    grid-template-columns: 1.25fr 0.95fr;
    gap: 12px;
    align-items: end;
}

.sales-hints {
    margin-top: 8px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.sales-hints span,
.empty-points span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-2);
    font-size: 0.72rem;
    font-weight: 700;
}

.cost-tbl {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.03);
}

.cost-tbl th,
.cost-tbl td {
    padding: 10px 8px;
    text-align: center;
}

.cost-tbl thead th {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-2);
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.cost-tbl td:first-child,
.cost-tbl th:first-child {
    text-align: left;
    padding-left: 12px;
}

.cost-tbl tbody td {
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.cost-tbl tbody tr:last-child td {
    border-bottom: none;
}

.cost-tbl td:first-child {
    font-weight: 700;
    color: var(--text-2);
    line-height: 1.2;
}

.cost-tbl input {
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.05);
    text-align: center;
    padding: 0 8px;
}

.cost-tbl tfoot td {
    background: rgba(124, 58, 237, 0.14);
    color: #ddd6fe;
    font-weight: 800;
    border-top: 1px solid rgba(167, 139, 250, 0.18);
}

.cost-tbl tfoot td:first-child {
    color: var(--text-1);
}

.actions {
    display: flex;
    gap: 12px;
}

.btn-main,
.btn-sub {
    min-height: 52px;
    border-radius: 16px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}

.btn-main {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    color: white;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 20px 36px rgba(79, 70, 229, 0.30);
}

.btn-main:hover,
.btn-sub:hover,
.pre:hover,
.tab:hover,
.plat:hover,
.rcard:hover {
    transform: translateY(-1px);
}

.btn-sub {
    padding: 0 18px;
    border: 1px solid var(--border);
    color: var(--text-2);
    background: rgba(255, 255, 255, 0.04);
}

.fold .panel-head {
    cursor: pointer;
}

.fold-arrow {
    margin-left: auto;
    color: var(--text-3);
    transition: transform .2s var(--ease);
}

.fold.collapsed .fold-arrow {
    transform: rotate(-90deg);
}

.fold.collapsed .fold-body {
    display: none;
}

.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.tab,
.pre {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-2);
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}

.tab {
    padding: 10px 15px;
}

.tab.active,
.pre.active {
    background: rgba(124, 58, 237, 0.18);
    border-color: rgba(167, 139, 250, 0.30);
    color: #e9ddff;
}

.country {
    display: none;
}

.country.active {
    display: block;
    animation: fadeUp .18s ease;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.plat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.plat {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.03);
    transition: box-shadow .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}

.plat.shopee {
    box-shadow: inset 0 3px 0 var(--shopee);
}

.plat.tiktok {
    box-shadow: inset 0 3px 0 var(--tiktok);
}

.plat-head {
    padding: 14px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 800;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
}

.fee-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(148, 163, 184, 0.10);
}

.fee {
    background: rgba(15, 23, 41, 0.94);
    padding: 12px;
}

.fee label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--text-3);
}

.fee input {
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.04);
    padding: 0 10px;
}

.results-body {
    padding-top: 8px;
}

.result-tools {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pill {
    padding: 8px 12px;
    color: #bbf7d0;
    background: rgba(52, 211, 153, 0.14);
}

.rgroup {
    margin-bottom: 18px;
}

.rgroup:last-child {
    margin-bottom: 0;
}

.rgroup-hd {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rgroup-country {
    font-size: 0.95rem;
    font-weight: 800;
}

.rgroup-cmp {
    padding: 7px 11px;
    color: var(--text-3);
}

.rgroup-cmp.win {
    color: #bbf7d0;
    background: rgba(52, 211, 153, 0.14);
}

.rpair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.rpair.single {
    grid-template-columns: 1fr;
}

.rcard {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.04);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}

.rcard-hd {
    padding: 18px 18px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.rcard-compact .rcard-hd {
    padding: 16px 16px 10px;
}

.plat-badge {
    padding: 7px 11px;
}

.plat-badge.shopee {
    color: #fdba74;
    background: var(--shopee-soft);
}

.plat-badge.tiktok {
    color: #a5f3fc;
    background: var(--tiktok-soft);
}

.rcard-margin {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.05em;
}

.m-ok { color: var(--green); }
.m-warn { color: var(--amber); }
.m-err { color: var(--red); }

.mbar-wrap {
    padding: 0 18px 14px;
}

.mbar {
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.mbar-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #34d399, #10b981);
}

.mbar-fill.w {
    background: linear-gradient(90deg, #fcd34d, #f59e0b);
}

.mbar-fill.d {
    background: linear-gradient(90deg, #fb7185, #ef4444);
}

.rcard-bd {
    padding: 0 18px 18px;
}

.rstats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.rstat {
    padding: 12px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.10);
    text-align: center;
}

.rstat-label {
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-3);
}

.rstat-val {
    font-size: 0.96rem;
    font-weight: 800;
}

.rstat-val.ok { color: var(--green); }
.rstat-val.err { color: var(--red); }
.rstat-val.hl {
    font-size: 1.25rem !important;
    color: #ddd6fe;
}

.rdetail {
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 14px;
}

.rdetail summary {
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-2);
}

.rdetail-list {
    margin-top: 10px;
    padding-top: 10px;
    padding-left: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.10);
}

.rdetail-item {
    margin-bottom: 5px;
    color: var(--text-3);
    font-size: 0.78rem;
}

.rdetail-item strong {
    color: var(--text-1);
}

.reverse-rstats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.empty-panel {
    padding: 34px 24px;
    border-radius: var(--radius-lg);
    text-align: center;
}

.empty {
    display: block;
}

.empty-chart {
    width: 84px;
    height: 84px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
    color: #c4b5fd;
}

.empty-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.empty-sub {
    margin-bottom: 16px;
}

.empty-points {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-size: 0.8rem;
    color: var(--text-2);
}

.empty-keys {
    color: var(--text-3);
    font-size: 0.82rem;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-bg {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.64);
}

.modal-box {
    position: relative;
    width: min(480px, calc(100% - 28px));
    border-radius: 24px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(12, 19, 34, 0.92);
    box-shadow: var(--shadow-lg);
}

.modal-top,
.modal-mid,
.modal-btm {
    padding-left: 22px;
    padding-right: 22px;
}

.modal-top {
    padding-top: 20px;
    padding-bottom: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
}

.modal-top h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.modal-sub,
.modal-hint {
    font-size: 0.82rem;
}

.modal-mid {
    padding-top: 18px;
    padding-bottom: 18px;
}

.modal-hint {
    margin-bottom: 16px;
}

.modal-close {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    color: var(--text-3);
    font-size: 1.2rem;
    cursor: pointer;
}

.presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.pre {
    padding: 9px 14px;
}

.modal-btm {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 14px;
    padding-bottom: 20px;
    border-top: 1px solid rgba(148, 163, 184, 0.10);
}

.modal-btm .btn-main,
.modal-btm .btn-sub {
    min-height: 46px;
    padding: 0 18px;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(70px);
    z-index: 400;
    padding: 12px 18px;
    border-radius: 16px;
    background: rgba(15, 23, 41, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.16);
    color: white;
    box-shadow: var(--shadow-md);
    transition: transform .2s var(--ease), opacity .2s var(--ease);
}

.toast.show {
    transform: translateX(-50%) translateY(0);
}

.toast.success { background: rgba(6, 95, 70, 0.96); }
.toast.error { background: rgba(159, 18, 57, 0.96); }

.hidden {
    display: none !important;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.24);
    border-radius: 999px;
}

@media (max-width: 1180px) {
    .ticker-inner,
    .hero,
    .layout {
        grid-template-columns: 1fr;
    }

    .layout {
        gap: 18px;
    }

    .ticker-actions {
        justify-content: space-between;
        flex-wrap: wrap;
    }
}

@media (max-width: 820px) {
    .nav-inner {
        min-height: auto;
        padding: 16px 0;
        flex-wrap: wrap;
    }

    .nav-main,
    .nav-rates {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .nav-meta {
        justify-content: flex-start;
    }

    .hero-copy,
    .hero-metrics,
    .panel-body,
    .panel-head,
    .empty-panel,
    .modal-top,
    .modal-mid,
    .modal-btm {
        padding-left: 18px;
        padding-right: 18px;
    }

    .quick-grid,
    .plat-grid,
    .rpair,
    .row,
    .rstats,
    .reverse-rstats {
        grid-template-columns: 1fr !important;
    }

    .actions,
    .modal-btm,
    .ticker-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-sub,
    .btn-main {
        width: 100%;
    }

    .cost-tbl {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media (max-width: 560px) {
    .nav-inner,
    .ticker-inner,
    .wrap {
        width: min(1320px, calc(100% - 28px));
    }

    .hero-copy h1 {
        font-size: 1.9rem;
    }

    .ticker-board {
        grid-template-columns: 1fr;
    }

    .ticker-board-nav,
    .ticker-actions-nav {
        width: 100%;
    }
}