.auth-page,
.dashboard-shell,
.admin-shell {
    max-width: var(--max);
    margin: 0 auto;
    padding: 28px 20px 80px;
}

.auth-card,
.dashboard-hero,
.dashboard-grid article,
.admin-hero,
.admin-grid article,
.table-card,
.content-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.auth-card {
    max-width: 640px;
    margin: 40px auto 0;
    padding: 28px;
}

.stack-form { display: grid; gap: 14px; }
.stack-form label { display: grid; gap: 8px; }
.stack-form input,
.stack-form textarea,
.stack-form select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 13px 14px;
    background: rgba(255,255,255,0.92);
    font: inherit;
}
.auth-switch { margin-top: 18px; }

.dashboard-hero,
.admin-hero,
.table-card,
.content-card { padding: 24px; }

.dashboard-grid,
.admin-grid,
.card-grid {
    margin-top: 24px;
    display: grid;
    gap: 18px;
}

.dashboard-grid,
.admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-grid--wide { grid-template-columns: 1fr 1.2fr; }
.card-grid--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-grid article,
.admin-grid article { padding: 24px; }

.subnav {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 20px 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-family: Arial, Helvetica, sans-serif;
}

.subnav a {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.6);
}

.subnav a.is-active {
    background: var(--surface-strong);
    color: var(--button-text);
    border-color: var(--surface-strong);
}

.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 14px;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(17, 19, 23, 0.08);
}

.badge--positive { background: rgba(42, 122, 83, 0.15); color: #205036; }
.badge--warning { background: rgba(186, 124, 34, 0.17); color: #71480f; }
.badge--danger { background: rgba(168, 62, 51, 0.15); color: #74271d; }
.badge--muted { background: rgba(95, 105, 117, 0.12); color: #48515b; }

.chip-list { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.72);
    font-family: Arial, Helvetica, sans-serif;
}

.content-card__header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.card-subtitle { margin-top: -6px; }
.spot-note { margin-top: -4px; font-size: 0.92rem; color: var(--muted); }
.stack-list { margin: 0; padding-left: 18px; display: grid; gap: 10px; }
.compact-list { margin: 0; padding-left: 18px; }
.compact-list-noindent { padding-left: 0; list-style: none; }

.table-wrap { overflow-x: auto; }
.table-card--top-gap { margin-top: 24px; }
.admin-flash { max-width: var(--max); margin: 20px auto 0; }
.quick-links { display: grid; gap: 10px; }
.chart-shell { display: grid; gap: 24px; }
.chart-hero { grid-template-columns: 1.2fr 0.8fr; align-items: end; }
.arena-kpis {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.arena-kpi {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(17,19,23,0.12);
    border-radius: 16px;
    padding: 10px 12px;
}
.arena-kpi p {
    margin: 0;
    color: #5d6572;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.arena-kpi strong {
    display: block;
    margin-top: 8px;
    font-size: 1.05rem;
}
.arena-main {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
}
.arena-ticket-row,
.arena-progress-row {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
}
.arena-sidebar-row {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.chart-card {
    background: linear-gradient(180deg, rgba(17,19,23,0.98), rgba(23,28,35,0.96));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 30px;
    box-shadow: 0 28px 80px rgba(8, 11, 16, 0.22);
    color: #f5ecdc;
    padding: 24px;
}
.chart-card--arena { padding: 20px; }
.arena-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.arena-field { display: grid; gap: 6px; }
.arena-field span { font-size: 0.78rem; color: rgba(245,236,220,0.76); }
.arena-field select {
    min-width: 180px;
    border: 1px solid rgba(17,19,23,0.35);
    border-radius: 12px;
    background: #ffffff;
    color: #111317;
    padding: 10px 12px;
    font: inherit;
}
.arena-field select:focus-visible,
.sim-form select:focus-visible,
.sim-form input:focus-visible {
    outline: 2px solid #a86535;
    outline-offset: 2px;
    border-color: #a86535;
}
.chart-card--hero { padding: 28px; }
.chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.chart-toolbar--compact { justify-content: flex-end; }
.chart-toolbar label { display: grid; gap: 8px; font-family: Arial, Helvetica, sans-serif; color: var(--muted); }
.chart-toolbar select {
    min-width: 180px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.06);
    color: #f5ecdc;
}
.chart-toolbar--compact label {
    color: #2a2f35;
    font-weight: 700;
}
.chart-toolbar--compact select {
    border-color: rgba(17,19,23,0.32);
    background: #ffffff;
    color: #111317;
    box-shadow: 0 1px 0 rgba(17,19,23,0.08);
}
.chart-toolbar--compact select:focus-visible {
    outline: 2px solid #a86535;
    outline-offset: 2px;
    border-color: #a86535;
}
.range-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.range-button {
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: #f5ecdc;
    padding: 10px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
}
.range-button.is-active {
    background: linear-gradient(135deg, #cf9b67, #a86535);
    color: #111317;
    border-color: transparent;
}
.chart-meta { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 18px; }
.chart-stage {
    height: 420px;
    border-radius: 20px;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(170,106,54,0.13), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}
.chart-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgba(245,236,220,0.78);
}
.legend-item::before {
    content: '';
    width: 16px;
    height: 3px;
    border-radius: 999px;
    display: inline-block;
}
.legend-item--support::before { background: #3d7d59; }
.legend-item--resistance::before { background: #8a5b31; }
.legend-item--spot::before { background: #c94f41; }
.legend-item--entry::before { background: #5b8bd9; }
.sim-grid {
    margin-top: 24px;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sim-panel {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 18px;
    background: rgba(255,255,255,0.02);
}
.arena-rank { margin: 4px 0 10px; font-weight: 700; color: #f2d9b6; }
.arena-progress {
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
    margin-bottom: 10px;
}
.arena-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #c98a4b, #f0b776);
}
.arena-grid-two {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.table-card--full { grid-column: 1 / -1; }
.is-positive { color: #7bd8a3; }
.is-negative { color: #e38a7b; }
.arena-toast {
    position: fixed;
    right: 18px;
    bottom: 22px;
    border-radius: 14px;
    padding: 12px 14px;
    background: #14191f;
    color: #f7efe1;
    transform: translateY(12px);
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 999;
}
.arena-toast--error { background: #6a2f2a; }
.arena-toast.is-visible { transform: translateY(0); opacity: 1; }
.sim-panel p { color: rgba(245,236,220,0.74); }
.sim-form { display: grid; gap: 12px; }
.sim-form label { display: grid; gap: 8px; }
.sim-form--inline {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.sim-form--inline label {
    min-width: 150px;
    flex: 1 1 150px;
}
.sim-form--inline button {
    flex: 0 0 auto;
}
.order-action-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.order-led {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.25);
    box-shadow: 0 0 0 0 rgba(220, 185, 130, 0);
}
.order-led.is-pending {
    background: #ddb882;
    animation: order-led-pulse 0.9s ease-in-out infinite;
}
.order-led.is-success {
    background: #69cd95;
}
.order-led.is-error {
    background: #dd7e72;
}
.button.is-pending {
    position: relative;
    min-width: 48px;
    color: transparent !important;
    pointer-events: none;
}
.button.is-pending::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    margin-top: -8px;
    border-radius: 999px;
    border: 2px solid rgba(17,19,23,0.25);
    border-top-color: #111317;
    animation: order-spin 0.7s linear infinite;
}
@keyframes order-spin {
    to { transform: rotate(360deg); }
}
@keyframes order-led-pulse {
    0% { box-shadow: 0 0 0 0 rgba(221,184,130,0.55); }
    100% { box-shadow: 0 0 0 9px rgba(221,184,130,0); }
}
.sim-form input,
.sim-form select {
    border: 1px solid rgba(17,19,23,0.35);
    border-radius: 12px;
    background: #ffffff;
    color: #111317;
    padding: 10px 12px;
    font: inherit;
}
.sim-form select option,
.arena-field select option {
    color: #111317;
    background: #ffffff;
}
.sim-note { margin: 0; font-size: 0.9rem; }
.sim-metrics { display: flex; gap: 10px; flex-wrap: wrap; }
.sim-panel--progress-inline {
    display: grid;
    gap: 12px;
}
.progress-inline {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}
.progress-inline .arena-progress {
    width: min(360px, 100%);
    margin-bottom: 0;
}
.replay-panel { display: grid; gap: 14px; }
.replay-controls {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.replay-controls--actions {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end;
}
.replay-controls label,
.replay-trade label { display: grid; gap: 6px; }
.replay-controls input,
.replay-controls select,
.replay-trade input,
.replay-trade select {
    border: 1px solid rgba(17,19,23,0.35);
    border-radius: 12px;
    background: #fff;
    color: #111317;
    padding: 10px 12px;
    font: inherit;
}
.replay-slider-wrap input[type="range"] { width: 100%; }
.replay-trade {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.two-col-form,
.three-col-form {
    display: grid;
    gap: 12px;
}

.two-col-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three-col-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }

dl { display: grid; grid-template-columns: 120px 1fr; gap: 8px 16px; font-family: Arial, Helvetica, sans-serif; }
dt { font-weight: 700; }

table { width: 100%; border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }

@media (max-width: 900px) {
    .dashboard-grid,
    .admin-grid,
    .admin-grid--wide,
    .card-grid--pairs,
    .chart-hero,
    .sim-grid,
    .arena-main,
    .arena-sidebar-row,
    .arena-grid-two,
    .replay-controls,
    .replay-controls--actions,
    .replay-trade,
    .two-col-form,
    .three-col-form {
        grid-template-columns: 1fr;
    }

    .arena-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    table, thead, tbody, th, td, tr { display: block; }
    thead { display: none; }
    td { padding-left: 0; }
}

.market-browser {
    width: 100%;
    margin-bottom: 12px;
}
.market-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.market-tab {
    border: 1px solid rgba(245,236,220,0.18);
    border-radius: 10px;
    padding: 6px 14px;
    background: rgba(245,236,220,0.06);
    color: #f5ecdc;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.market-tab:hover {
    background: rgba(245,236,220,0.12);
}
.market-tab.is-active {
    background: rgba(102,166,255,0.18);
    border-color: rgba(102,166,255,0.45);
    color: #66a6ff;
}
.market-search-row {
    margin-bottom: 10px;
}
.market-search-input {
    width: 100%;
    border: 1px solid rgba(245,236,220,0.18);
    border-radius: 10px;
    padding: 10px 14px;
    background: rgba(245,236,220,0.06);
    color: #f5ecdc;
    font-size: 14px;
    outline: none;
}
.market-search-input::placeholder {
    color: rgba(245,236,220,0.35);
}
.market-search-input:focus {
    border-color: rgba(102,166,255,0.45);
    background: rgba(102,166,255,0.08);
}
.market-popular-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.market-popular-item {
    border: 1px solid rgba(245,236,220,0.12);
    border-radius: 10px;
    padding: 10px 12px;
    background: rgba(245,236,220,0.04);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.market-popular-item:hover {
    background: rgba(102,166,255,0.12);
    border-color: rgba(102,166,255,0.35);
}
.market-popular-item.is-selected {
    background: rgba(102,166,255,0.18);
    border-color: rgba(102,166,255,0.5);
}
.market-popular-symbol {
    font-weight: 700;
    font-size: 14px;
    color: #f5ecdc;
}
.market-popular-name {
    font-size: 12px;
    color: rgba(245,236,220,0.55);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.market-popular-meta {
    font-size: 11px;
    color: rgba(245,236,220,0.35);
    margin-top: 2px;
}
.market-load-more {
    margin-top: 10px;
    border: 1px solid rgba(245,236,220,0.18);
    border-radius: 10px;
    padding: 8px 20px;
    background: transparent;
    color: #f5ecdc;
    font-size: 13px;
    cursor: pointer;
}
.market-load-more:hover {
    background: rgba(245,236,220,0.08);
}
.market-results-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.market-result-item {
    border: 1px solid rgba(245,236,220,0.12);
    border-radius: 10px;
    padding: 10px 12px;
    background: rgba(245,236,220,0.04);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.market-result-item:hover {
    background: rgba(102,166,255,0.12);
    border-color: rgba(102,166,255,0.35);
}

@media (max-width: 900px) {
    .market-popular-grid,
    .market-results-list {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

.replay-selected-input {
    width: 100%;
    border: 1px solid rgba(245,236,220,0.18);
    border-radius: 10px;
    padding: 10px 14px;
    background: rgba(245,236,220,0.06);
    color: #f5ecdc;
    font-size: 14px;
    font-weight: 700;
    opacity: 1;
}
.replay-shell .replay-controls {
    background: none;
    border: none;
    padding: 0;
}
.replay-shell .replay-controls label span,
.replay-shell .replay-controls select,
.replay-shell .replay-controls .badge {
    color: #f5ecdc;
}
.replay-shell .replay-controls select {
    background: rgba(245,236,220,0.08);
    border: 1px solid rgba(245,236,220,0.18);
    color: #f5ecdc;
    border-radius: 10px;
    padding: 8px 12px;
}
.replay-shell .replay-controls .button {
    color: #f5ecdc;
    border-color: rgba(245,236,220,0.18);
}
.replay-shell .replay-controls .button:hover {
    background: rgba(245,236,220,0.08);
}
.replay-shell .replay-slider-wrap input[type="range"] {
    accent-color: #66a6ff;
}
.replay-shell .sim-form select,
.replay-shell .sim-form input[type="number"] {
    background: rgba(245,236,220,0.08);
    border: 1px solid rgba(245,236,220,0.18);
    color: #f5ecdc;
    border-radius: 10px;
    padding: 10px 12px;
}
.replay-shell .sim-form label span {
    color: #f5ecdc;
}

.bulk-close-row {
    display: flex;
    gap: 8px;
    margin: 12px 0 8px;
    flex-wrap: wrap;
}
.button--sm {
    padding: 6px 14px;
    font-size: 12px;
    border-radius: 8px;
}
.button--warn {
    border-color: rgba(201,79,65,0.4);
    color: #c94f41;
}
.button--warn:hover {
    background: rgba(201,79,65,0.12);
}
.button--positive {
    border-color: rgba(61,125,89,0.4);
    color: #3d7d59;
}
.button--positive:hover {
    background: rgba(61,125,89,0.12);
}

tr.is-closing {
    animation: rowClose 0.7s ease-out forwards;
}
@keyframes rowClose {
    0% {
        background: rgba(102,166,255,0.25);
        box-shadow: 0 0 8px rgba(102,166,255,0.3);
    }
    40% {
        background: rgba(102,166,255,0.25);
        box-shadow: 0 0 8px rgba(102,166,255,0.3);
    }
    100% {
        background: transparent;
        box-shadow: none;
        opacity: 0.3;
    }
}

.order-submit-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    vertical-align: middle;
}
.order-submit-icon .spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(245,236,220,0.2);
    border-top-color: #66a6ff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
.order-submit-icon .check-icon {
    display: none;
    width: 16px;
    height: 16px;
    color: #3d7d59;
}
.order-submit-icon .error-icon {
    display: none;
    width: 16px;
    height: 16px;
    color: #c94f41;
}
.is-pending .order-submit-icon .spinner {
    display: inline-block;
}
.is-success .order-submit-icon .check-icon {
    display: inline-block;
}
.is-error .order-submit-icon .error-icon {
    display: inline-block;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.progression-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #1a1a2e;
    background: #f8f7f4;
    min-height: 100vh;
}

/* ─── HERO ─── */
.progression-hero {
    position: relative;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 40%, #24243e 100%);
    border-radius: 0 0 24px 24px;
    padding: 48px 32px 36px;
    margin: 0 -20px 32px;
    color: #f5ecdc;
    overflow: hidden;
}
.progression-hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 20%, rgba(102,166,255,0.15) 0%, transparent 60%),
                radial-gradient(ellipse at 30% 80%, rgba(61,125,89,0.1) 0%, transparent 50%);
    pointer-events: none;
}
.progression-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}
.progression-eyebrow {
    font-size: 11px;
    letter-spacing: 0.2em;
    color: rgba(245,236,220,0.4);
    margin: 0 0 8px;
    text-transform: uppercase;
}
.progression-title {
    font-size: 36px;
    font-weight: 800;
    margin: 0 0 4px;
    color: #f5ecdc;
}
.progression-grade-name {
    background: linear-gradient(135deg, #66a6ff, #3d7d59);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.progression-xp-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
}
.progression-xp-current {
    font-size: 48px;
    font-weight: 800;
    color: #f5ecdc;
    line-height: 1;
}
.progression-xp-label {
    font-size: 16px;
    color: rgba(245,236,220,0.5);
    font-weight: 600;
}
.progression-xp-separator {
    font-size: 24px;
    color: rgba(245,236,220,0.25);
    margin: 0 4px;
}
.progression-xp-target {
    font-size: 28px;
    font-weight: 700;
    color: rgba(245,236,220,0.4);
}
.progression-bar {
    position: relative;
    height: 10px;
    background: rgba(245,236,220,0.08);
    border-radius: 5px;
    max-width: 500px;
    margin: 0 auto 12px;
    overflow: hidden;
}
.progression-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #66a6ff, #3d7d59);
    border-radius: 5px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.progression-bar-glow {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(102,166,255,0.4), rgba(61,125,89,0.3));
    border-radius: 5px;
    filter: blur(6px);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.progression-next {
    font-size: 14px;
    color: rgba(245,236,220,0.5);
    margin: 0;
}
.progression-next strong {
    color: #66a6ff;
}

/* ─── TIMELINE ─── */
.progression-timeline {
    margin-bottom: 32px;
}
.progression-timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.progression-timeline-header h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: #1a1a2e;
}
.progression-timeline-count {
    font-size: 13px;
    color: rgba(0,0,0,0.35);
    background: rgba(102,166,255,0.08);
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
}
.grade-track {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.grade-node {
    display: flex;
    align-items: stretch;
    min-height: 64px;
}
.grade-node-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex-shrink: 0;
    position: relative;
}
.grade-node-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: rgba(0,0,0,0.06);
    color: rgba(0,0,0,0.25);
    border: 2px solid rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}
.grade-node.is-unlocked .grade-node-dot {
    background: linear-gradient(135deg, #66a6ff, #4a8de0);
    color: #fff;
    border-color: #66a6ff;
    box-shadow: 0 2px 8px rgba(102,166,255,0.3);
}
.grade-node.is-current .grade-node-dot {
    background: linear-gradient(135deg, #3d7d59, #2d6044);
    border-color: #3d7d59;
    box-shadow: 0 2px 12px rgba(61,125,89,0.4);
    animation: pulse-ring 2s ease-in-out infinite;
}
@keyframes pulse-ring {
    0%, 100% { box-shadow: 0 2px 12px rgba(61,125,89,0.4); }
    50% { box-shadow: 0 2px 20px rgba(61,125,89,0.6); }
}
.grade-node-connector {
    width: 2px;
    background: rgba(0,0,0,0.06);
    margin: 0 0 0 19px;
    flex-shrink: 0;
}
.grade-node:last-child .grade-node-connector {
    display: none;
}
.grade-node.is-unlocked + .grade-node .grade-node-connector {
    background: linear-gradient(180deg, #66a6ff 0%, rgba(0,0,0,0.06) 100%);
}
.grade-node-card {
    flex: 1;
    padding: 12px 16px;
    margin: 4px 0 4px 12px;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    transition: all 0.2s ease;
}
.grade-node.is-unlocked .grade-node-card {
    border-color: rgba(102,166,255,0.15);
    background: rgba(102,166,255,0.03);
}
.grade-node.is-current .grade-node-card {
    border-color: rgba(61,125,89,0.3);
    background: rgba(61,125,89,0.04);
    box-shadow: 0 4px 16px rgba(61,125,89,0.1);
}
.grade-node-name {
    font-weight: 700;
    font-size: 14px;
    color: #1a1a2e;
    width: 100%;
}
.grade-node.is-unlocked .grade-node-name {
    color: #66a6ff;
}
.grade-node.is-current .grade-node-name {
    color: #3d7d59;
}
.grade-node-xp {
    font-size: 11px;
    color: rgba(0,0,0,0.3);
    font-weight: 600;
}
.grade-node-condition {
    font-size: 11px;
    color: rgba(0,0,0,0.35);
    flex: 1;
    min-width: 0;
}
.grade-node-unlocks {
    font-size: 10px;
    color: rgba(0,0,0,0.2);
    background: rgba(102,166,255,0.06);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

/* ─── PANELS ─── */
.progression-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.panel {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 24px;
}
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.panel-header h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #1a1a2e;
}
.panel-badge {
    font-size: 13px;
    font-weight: 700;
    color: #66a6ff;
    background: rgba(102,166,255,0.08);
    padding: 4px 12px;
    border-radius: 20px;
}
.panel-badge-sep {
    color: rgba(0,0,0,0.2);
    margin: 0 2px;
}
.panel-empty {
    font-size: 13px;
    color: rgba(0,0,0,0.3);
    margin: 0;
    text-align: center;
    padding: 20px 0;
}

/* ─── ACHIEVEMENTS ─── */
.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.achievement-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 10px;
    border-radius: 12px;
    background: rgba(0,0,0,0.02);
    border: 1px solid transparent;
    opacity: 0.35;
    filter: grayscale(1);
    transition: all 0.3s ease;
}
.achievement-card.is-unlocked {
    opacity: 1;
    filter: grayscale(0);
    border-color: rgba(102,166,255,0.2);
    background: linear-gradient(135deg, rgba(102,166,255,0.06), rgba(61,125,89,0.04));
}
.achievement-card-icon {
    font-size: 28px;
    margin-bottom: 8px;
}
.achievement-card-label {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a2e;
}
.achievement-card-date {
    font-size: 10px;
    color: rgba(0,0,0,0.3);
    margin-top: 4px;
}

/* ─── CHALLENGES ─── */
.challenge-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.challenge-card {
    padding: 16px;
    border-radius: 12px;
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.06);
    transition: all 0.2s ease;
}
.challenge-card.is-completed {
    background: rgba(61,125,89,0.04);
    border-color: rgba(61,125,89,0.2);
}
.challenge-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.challenge-card-label {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
}
.challenge-card-xp {
    font-size: 12px;
    font-weight: 700;
    color: #66a6ff;
    background: rgba(102,166,255,0.08);
    padding: 2px 10px;
    border-radius: 10px;
}
.challenge-card-bar {
    height: 6px;
    background: rgba(0,0,0,0.06);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}
.challenge-card-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #66a6ff, #4a8de0);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.challenge-card.is-completed .challenge-card-bar-fill {
    background: linear-gradient(90deg, #3d7d59, #2d6044);
}
.challenge-card-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}
.challenge-card-progress {
    font-size: 11px;
    color: rgba(0,0,0,0.35);
    font-weight: 600;
}
.challenge-card-period {
    font-size: 10px;
    color: rgba(0,0,0,0.2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ─── XP FEED ─── */
.xp-feed {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 420px;
    overflow-y: auto;
}
.xp-feed-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background 0.15s;
}
.xp-feed-item:hover {
    background: rgba(0,0,0,0.02);
}
.xp-feed-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: rgba(0,0,0,0.04);
    flex-shrink: 0;
}
.xp-feed-item.is-positive .xp-feed-icon {
    background: rgba(61,125,89,0.1);
}
.xp-feed-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.xp-feed-reason {
    font-size: 13px;
    color: #1a1a2e;
    text-transform: capitalize;
    font-weight: 500;
}
.xp-feed-time {
    font-size: 10px;
    color: rgba(0,0,0,0.25);
}
.xp-feed-amount {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    flex-shrink: 0;
}
.xp-feed-item.is-positive .xp-feed-amount {
    color: #3d7d59;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
    .progression-panels {
        grid-template-columns: 1fr;
    }
    .progression-title {
        font-size: 28px;
    }
    .progression-xp-current {
        font-size: 36px;
    }
    .grade-node-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .grade-node-condition,
    .grade-node-unlocks {
        width: 100%;
    }
}

/* ─── ACHIEVEMENT ALERT ─── */
.achievement-alert {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(102,166,255,0.3);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 20px rgba(102,166,255,0.15);
    color: #f5ecdc;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
    max-width: 340px;
    pointer-events: none;
}
.achievement-alert.is-visible {
    transform: translateX(0);
    opacity: 1;
}
.achievement-alert-icon {
    font-size: 36px;
    flex-shrink: 0;
    animation: alert-bounce 0.6s ease 0.3s both;
}
@keyframes alert-bounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.achievement-alert-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.achievement-alert-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(245,236,220,0.5);
    font-weight: 600;
}
.achievement-alert-name {
    font-size: 16px;
    font-weight: 700;
    color: #f5ecdc;
}

/* ─── XP ALERT ─── */
.xp-alert {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #3d7d59, #2d6044);
    border: 1px solid rgba(61,125,89,0.4);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(61,125,89,0.3);
    color: #fff;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    pointer-events: none;
}
.xp-alert.is-visible {
    transform: translateX(0);
    opacity: 1;
}
.xp-alert-icon {
    font-size: 18px;
    animation: alert-bounce 0.5s ease 0.2s both;
}
.xp-alert-amount {
    font-size: 16px;
    font-weight: 700;
}

@media (max-width: 600px) {
    .achievement-alert,
    .xp-alert {
        top: auto;
        bottom: 24px;
        right: 12px;
        left: 12px;
        max-width: none;
        transform: translateY(120%);
    }
    .achievement-alert.is-visible,
    .xp-alert.is-visible {
        transform: translateY(0);
    }
}

/* ─── GUEST BANNER ─── */
.guest-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: linear-gradient(90deg, rgba(255,193,7,0.12), rgba(255,152,0,0.08));
    border-bottom: 1px solid rgba(255,193,7,0.25);
    font-size: 13px;
    color: #1a1a2e;
}
.guest-banner-icon {
    font-size: 18px;
    flex-shrink: 0;
}
.guest-banner-text {
    flex: 1;
}
.guest-banner-text strong {
    color: #e65100;
}
.guest-banner-text a {
    color: #1565c0;
    text-decoration: underline;
    font-weight: 600;
}
.guest-banner-timer {
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: #e65100;
    font-size: 14px;
    flex-shrink: 0;
}