* {
    box-sizing: border-box;
}

:root {
    --bg-main:
        radial-gradient(circle at top right, rgba(255, 208, 94, 0.26), transparent 28%),
        radial-gradient(circle at left top, rgba(124, 187, 255, 0.18), transparent 22%),
        radial-gradient(circle at left bottom, rgba(255, 169, 116, 0.16), transparent 22%),
        linear-gradient(180deg, #fffdf8 0%, #ffffff 34%, #f3f8ff 100%);
    --text-main: #17212f;
    --text-muted: #52657f;
    --text-soft: #7a89a0;
    --surface: rgba(255, 255, 255, 0.94);
    --surface-strong: #ffffff;
    --surface-soft: rgba(255, 211, 100, 0.08);
    --surface-subtle: rgba(23, 33, 47, 0.03);
    --border: rgba(23, 33, 47, 0.1);
    --border-strong: rgba(255, 191, 71, 0.22);
    --shadow: 0 24px 60px rgba(78, 91, 116, 0.12);
    --accent: #d89400;
    --accent-soft: rgba(216, 148, 0, 0.14);
    --input-bg: #ffffff;
    --nav-bg: rgba(255, 255, 255, 0.92);
    --backdrop: rgba(27, 37, 49, 0.18);
    --buy-color: #0fa968;
    --buy-soft: rgba(15, 169, 104, 0.12);
    --sell-color: #de5c50;
    --sell-soft: rgba(222, 92, 80, 0.12);
}

[data-theme="dark"] {
    --bg-main:
        radial-gradient(circle at top right, rgba(255, 224, 138, 0.38), transparent 28%),
        radial-gradient(circle at top left, rgba(95, 208, 255, 0.2), transparent 22%),
        radial-gradient(circle at left bottom, rgba(255, 179, 92, 0.18), transparent 24%),
        linear-gradient(180deg, #13233d 0%, #1b3053 38%, #11213e 100%);
    --text-main: #fbfdff;
    --text-muted: #d8e2f3;
    --text-soft: #9ab0d3;
    --surface: rgba(22, 38, 66, 0.86);
    --surface-strong: #162947;
    --surface-soft: rgba(255, 255, 255, 0.07);
    --surface-subtle: rgba(255, 255, 255, 0.05);
    --border: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 234, 173, 0.24);
    --shadow: 0 20px 55px rgba(4, 12, 24, 0.3);
    --accent: #ffd364;
    --accent-soft: rgba(255, 211, 100, 0.2);
    --input-bg: #1a2d4d;
    --nav-bg: rgba(18, 32, 56, 0.94);
    --backdrop: rgba(5, 12, 24, 0.72);
    --buy-color: #6ef0b2;
    --buy-soft: rgba(110, 240, 178, 0.18);
    --sell-color: #ff9d8f;
    --sell-soft: rgba(255, 157, 143, 0.18);
}

body {
    margin: 0;
    font-family: Tahoma, "Segoe UI", sans-serif;
    font-size: 14px;
    background: var(--bg-main);
    color: var(--text-main);
    min-height: 100vh;
    transition: background 0.25s ease, color 0.25s ease;
}

.app-shell.is-guest {
    max-width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 28px 18px 40px;
}

.app-shell.is-authenticated {
    max-width: 460px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 20px 16px calc(92px + env(safe-area-inset-bottom));
    position: relative;
}

.app-shell.is-authenticated::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top right, rgba(255, 214, 112, 0.32), transparent 24%),
        radial-gradient(circle at top left, rgba(109, 188, 255, 0.2), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 45%);
    opacity: 0.9;
}

.app-shell.is-authenticated > * {
    position: relative;
    z-index: 1;
}

.app-shell.is-authenticated .card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 251, 255, 0.94));
    border-color: rgba(255, 196, 74, 0.16);
    box-shadow:
        0 22px 48px rgba(166, 189, 220, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.app-shell.is-authenticated .eyebrow {
    color: #9f7800;
}

.app-shell.is-authenticated #dashboardView {
    gap: 18px;
}

button,
input,
select {
    font: inherit;
}

.hidden {
    display: none !important;
}

.topbar,
.section-head,
.action-row,
.chart-head,
.chip-row,
.price-grid,
.summary-cards,
.balance-chip,
.modal-head,
.summary-line,
.modal-grid {
    display: flex;
    align-items: center;
}

.topbar,
.section-head,
.chart-head,
.action-row,
.modal-head,
.summary-line {
    justify-content: space-between;
}

.action-row {
    gap: 14px;
}

.topbar {
    margin-bottom: 18px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 16px 40px rgba(104, 124, 154, 0.12);
    position: relative;
    z-index: 300;
}

.app-shell.is-authenticated > .topbar {
    z-index: 300;
}

.topbar-actions {
    display: flex;
    gap: 10px;
}

.topbar > div:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-menu {
    position: relative;
}

.profile-menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    min-width: 176px;
    max-width: calc(100vw - 24px);
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 45px rgba(31, 42, 68, 0.18);
    display: grid;
    gap: 6px;
}

.profile-menu-panel button {
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    text-align: right;
    font-weight: 700;
    cursor: pointer;
}

.profile-menu-panel button:hover {
    background: rgba(216, 166, 79, 0.12);
}

.profile-menu-panel #logoutButton {
    color: #9c2424;
    background: rgba(255, 111, 111, 0.1);
}

.icon-button {
    width: 46px;
    min-width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 20px;
}

.eyebrow {
    margin: 0 0 6px;
    color: var(--text-soft);
    font-size: 12px;
    letter-spacing: 0.04em;
}

h1,
h2,
h3,
p {
    margin: 0;
}

h1 {
    font-size: 26px;
}

.phone-frame {
    display: grid;
    gap: 16px;
    width: 100%;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 18px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}

.auth-card,
.stack {
    display: grid;
    gap: 16px;
}

.auth-card {
    width: 80vw;
    max-width: 80vw;
    margin: 0 auto;
}

.auth-landing {
    width: min(1280px, 100%);
    max-width: 1280px;
    display: grid;
    gap: 18px;
}

.landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
    gap: 18px;
}

.landing-hero-copy,
.landing-login-card,
.landing-section-card,
.landing-cta {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 28px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}

.landing-hero-copy {
    padding: 28px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(255, 221, 130, 0.26), transparent 28%),
        radial-gradient(circle at bottom right, rgba(95, 208, 255, 0.16), transparent 26%),
        var(--surface);
}

.landing-hero-copy::after {
    content: "";
    position: absolute;
    left: -40px;
    bottom: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 223, 122, 0.16), transparent 70%);
    pointer-events: none;
}

.landing-title {
    font-size: 42px;
    line-height: 1.1;
    margin-top: 8px;
}

.landing-lead {
    margin-top: 14px;
    max-width: 720px;
    color: var(--text-muted);
    line-height: 2;
    font-size: 15px;
}

.landing-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.landing-hero-image-wrap {
    margin-top: 22px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.landing-hero-image,
.section-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
}

.metric-tile {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 16px;
}

.metric-tile strong {
    display: block;
    font-size: 24px;
    color: var(--accent);
}

.metric-tile small {
    display: block;
    margin-top: 8px;
    color: var(--text-muted);
    line-height: 1.8;
}

.landing-login-card {
    padding: 20px;
    align-self: stretch;
    display: grid;
    gap: 16px;
}

.compact-hero-panel {
    padding: 16px;
}

.landing-sections {
    display: grid;
    gap: 18px;
}

.landing-section-card {
    padding: 22px;
}

.section-heading {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
}

.section-visual {
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 12px;
}

.section-heading span,
.landing-cta span {
    color: var(--text-soft);
    font-size: 12px;
    letter-spacing: 0.04em;
}

.section-heading h3 {
    font-size: 24px;
    line-height: 1.35;
}

.gap-lg {
    gap: 18px;
}

.auth-title {
    text-align: center;
    font-size: 28px;
    margin-bottom: 4px;
}

.landing-switcher-wrap {
    display: grid;
    gap: 10px;
}

.landing-switcher-label {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.landing-select {
    width: 100%;
    background-color: var(--input-bg);
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(16px) calc(50% - 3px), calc(24px) calc(50% - 3px);
    background-size: 8px 8px, 8px 8px;
    background-repeat: no-repeat;
    color: var(--text-main);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    padding: 14px 42px 14px 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.bank-select {
    position: relative;
}

.bank-select-trigger {
    width: 100%;
    background-color: var(--input-bg);
    color: var(--text-main);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    padding: 14px 16px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.bank-select-trigger::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    margin-left: 4px;
}

.bank-select-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    max-height: 260px;
    overflow: auto;
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    z-index: 30;
    padding: 8px;
}

.bank-option {
    width: 100%;
    background: transparent;
    color: var(--text-main);
    border: 0;
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-align: right;
}

.bank-option:hover {
    background: var(--surface-soft);
}

.bank-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex: 0 0 24px;
}

.dashboard-select {
    min-width: 148px;
    background-color: var(--input-bg);
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(16px) calc(50% - 3px), calc(24px) calc(50% - 3px);
    background-size: 8px 8px, 8px 8px;
    background-repeat: no-repeat;
    color: var(--text-main);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    padding: 12px 42px 12px 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
}

.dashboard-select:focus {
    border-color: rgba(255, 191, 71, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 191, 71, 0.12);
}

.landing-select:focus {
    border-color: rgba(255, 191, 71, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 191, 71, 0.12);
}

.landing-select option {
    background: var(--input-bg);
    color: var(--text-main);
}

.hero-panel {
    background: linear-gradient(135deg, rgba(255, 191, 71, 0.18), var(--surface-soft));
    border-radius: 22px;
    padding: 18px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-panel::after {
    content: "";
    position: absolute;
    inset: auto -40px -60px auto;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 223, 122, 0.28), transparent 70%);
    pointer-events: none;
}

.hero-panel h2 {
    font-size: 21px;
}

.hero-panel p {
    font-size: 13px;
    margin-top: 6px;
}

.hero-kicker {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border);
    color: #fff4cf;
    font-size: 11px;
    margin-bottom: 12px;
}

.hero-highlights {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 14px;
}

.hero-highlights span {
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid var(--border);
    color: var(--text-main);
    font-size: 11px;
}

.intro-showcase,
.service-grid,
.product-strip,
.journey-steps {
    display: grid;
    gap: 12px;
}

.intro-showcase,
.product-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.intro-feature-card,
.service-card,
.product-teaser,
.journey-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 16px;
}

.intro-feature-card strong,
.service-card strong,
.product-teaser strong,
.journey-card strong {
    display: block;
    font-size: 15px;
    margin-bottom: 8px;
}

.intro-feature-card p,
.service-card p,
.product-teaser small {
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 12px;
}

.service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-card.featured {
    background: linear-gradient(180deg, rgba(255, 211, 100, 0.18), rgba(255, 255, 255, 0.03));
    border-color: rgba(255, 211, 100, 0.28);
}

.service-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    background: linear-gradient(135deg, rgba(255, 211, 100, 0.22), rgba(255, 255, 255, 0.08));
    color: #ffe39a;
    font-size: 16px;
    font-weight: 700;
}

.product-teaser span {
    color: var(--text-soft);
    font-size: 11px;
    display: block;
    margin-bottom: 8px;
}

.journey-card {
    background: linear-gradient(135deg, rgba(255, 211, 100, 0.16), rgba(95, 208, 255, 0.08));
}

.dual-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    gap: 16px;
}

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

.full-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 26px;
    background:
        linear-gradient(135deg, rgba(255, 211, 100, 0.18), rgba(95, 208, 255, 0.08)),
        var(--surface);
}

.landing-cta strong {
    display: block;
    margin-top: 6px;
    font-size: 28px;
}

.landing-cta p {
    margin-top: 10px;
    color: var(--text-muted);
    line-height: 1.9;
    max-width: 720px;
}

.landing-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    padding: 14px 18px;
    border-radius: 18px;
    text-decoration: none;
    font-weight: 700;
    color: #08111f;
    background: linear-gradient(135deg, #ffbf47, #ffdf7a);
    box-shadow: 0 12px 28px rgba(255, 191, 71, 0.18);
}

.journey-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 14px;
}

.journey-steps div {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 12px;
    text-align: center;
}

.journey-steps span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffbf47, #ffdf7a);
    color: #08111f;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
}

.journey-steps p {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.8;
}

.hero-badge,
.balance-chip,
.chip,
.nav-item,
.ghost-button {
    border: 1px solid var(--border-strong);
}

.hero-badge {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    margin-bottom: 14px;
    background: rgba(255, 255, 255, 0.06);
}

.field {
    display: grid;
    gap: 8px;
}

.field span,
.message-box,
.muted-text,
.chart-labels,
.report-item small,
.asset-card small,
.site-meta span,
.site-meta a {
    color: var(--text-muted);
}

.field input {
    width: 100%;
    background: var(--input-bg);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 16px;
}

.primary-button,
.success-button,
.danger-button,
.ghost-button,
.nav-item,
.chip {
    border-radius: 16px;
    padding: 14px 16px;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}

.primary-button,
.success-button,
.danger-button {
    border: 0;
    color: #08111f;
    font-weight: 700;
}

.primary-button {
    background: linear-gradient(135deg, #ffbf47, #ffdf7a);
}

.success-button {
    flex: 1;
    background: linear-gradient(135deg, #7ef0b0, #47cd8b);
    box-shadow: 0 10px 24px rgba(71, 205, 139, 0.22);
}

.danger-button {
    flex: 1;
    background: linear-gradient(135deg, #ffb19d, #ff7f76);
    box-shadow: 0 10px 24px rgba(255, 127, 118, 0.22);
}

.ghost-button,
.chip,
.nav-item {
    background: var(--surface-soft);
    color: var(--text-main);
}

.primary-button:hover,
.success-button:hover,
.danger-button:hover,
.ghost-button:hover,
.chip:hover,
.nav-item:hover {
    transform: translateY(-1px);
}

.message-box {
    min-height: 24px;
    font-size: 14px;
}

.site-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.site-meta a {
    text-decoration: none;
}

.welcome-card {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 12px;
    background:
        radial-gradient(circle at top right, rgba(255, 214, 112, 0.34), transparent 32%),
        radial-gradient(circle at bottom left, rgba(117, 198, 255, 0.2), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(245, 249, 255, 0.95));
    border-color: rgba(216, 148, 0, 0.2);
    box-shadow:
        0 26px 54px rgba(188, 205, 228, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    overflow: hidden;
    position: relative;
}

.welcome-card::after,
.price-card::after,
.summary-card::after,
.chart-card::after,
.trade-panel::after {
    content: "";
    position: absolute;
    inset: 1px 1px auto;
    height: 44%;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.balance-chip {
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    border-radius: 20px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.92));
    border: 1px solid rgba(216, 148, 0, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.balance-visual {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 6px;
    background: linear-gradient(135deg, rgba(255, 215, 111, 0.22), rgba(139, 205, 255, 0.16));
    box-shadow: 0 14px 28px rgba(181, 196, 219, 0.14);
}

.balance-visual img {
    display: block;
    width: 100%;
    height: 112px;
    object-fit: cover;
}

.selected-metal-balance {
    color: var(--text-muted);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    justify-content: center;
    text-align: center;
}

.wallet-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.wallet-action-button {
    flex: 1 1 120px;
    padding: 10px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(242, 248, 255, 0.94));
    border-color: rgba(216, 148, 0, 0.18);
    box-shadow:
        0 14px 26px rgba(188, 205, 228, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.wallet-action-button:first-child {
    background: linear-gradient(135deg, rgba(255, 223, 145, 0.38), rgba(255, 255, 255, 0.98));
}

.wallet-action-button:last-child {
    background: linear-gradient(135deg, rgba(170, 219, 255, 0.28), rgba(255, 255, 255, 0.98));
}

.switcher {
    display: inline-grid;
    grid-auto-flow: column;
    gap: 8px;
}

.switcher button {
    min-width: 88px;
}

.price-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 18px;
}

.price-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(247, 251, 255, 0.94));
    border-radius: 20px;
    padding: 16px;
    border: 1px solid rgba(23, 33, 47, 0.08);
    box-shadow:
        0 18px 36px rgba(180, 196, 220, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    position: relative;
    overflow: hidden;
}

.price-card-main {
    min-width: 160px;
}

.price-card strong {
    display: block;
    font-size: 25px;
    margin: 10px 0 4px;
    line-height: 1.15;
}

.price-card span,
.summary-card div {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.price-card small,
.summary-card small {
    font-size: 15px;
    font-weight: 500;
    display: block;
    min-height: 21px;
}

.price-unit-label {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.7;
}

.rate-action-button {
    width: 100%;
    margin-top: 14px;
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 14px;
}

.summary-cards {
    display: grid;
    gap: 12px;
}

.summary-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(247, 251, 255, 0.93));
    border-radius: 20px;
    padding: 14px;
    min-height: 108px;
    border: 1px solid rgba(23, 33, 47, 0.08);
    box-shadow:
        0 14px 30px rgba(184, 198, 220, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    position: relative;
    overflow: hidden;
}

.price-card-buy {
    border-color: rgba(15, 169, 104, 0.28);
    background:
        radial-gradient(circle at top right, rgba(110, 240, 178, 0.22), transparent 34%),
        linear-gradient(135deg, rgba(214, 255, 237, 0.92), rgba(255, 255, 255, 0.98));
}

.price-card-buy span,
.price-card-buy strong,
.price-card-buy small {
    color: var(--buy-color);
}

.summary-card-sell {
    border-color: rgba(222, 92, 80, 0.26);
    background:
        radial-gradient(circle at top right, rgba(255, 157, 143, 0.22), transparent 34%),
        linear-gradient(135deg, rgba(255, 232, 229, 0.96), rgba(255, 255, 255, 0.98));
}

.summary-card-sell div,
.summary-card-sell strong,
.summary-card-sell small {
    color: var(--sell-color);
}

.metal-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 8px;
}

.chart-card {
    margin-top: 18px;
    padding: 16px;
    background:
        radial-gradient(circle at top right, rgba(255, 214, 112, 0.2), transparent 28%),
        radial-gradient(circle at bottom left, rgba(118, 203, 255, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(246, 250, 255, 0.94));
    border-radius: 22px;
    border: 1px solid rgba(23, 33, 47, 0.08);
    box-shadow:
        0 18px 38px rgba(184, 198, 220, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    position: relative;
    overflow: hidden;
}

#priceChart {
    width: 100%;
    height: 160px;
    margin-top: 12px;
    overflow: visible;
}

.chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 8px;
    color: #6b7f98;
}

.trade-panel {
    margin-top: 18px;
    padding: 16px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top left, rgba(255, 220, 126, 0.18), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(247, 251, 255, 0.94));
    border: 1px solid rgba(255, 196, 74, 0.16);
    box-shadow:
        0 14px 28px rgba(184, 198, 220, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    position: relative;
    overflow: hidden;
}

.chip.active {
    background: rgba(255, 191, 71, 0.18);
    border-color: rgba(255, 191, 71, 0.55);
}

.muted-text {
    margin-top: 12px;
    font-size: 14px;
}

.asset-grid,
.report-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.dashboard-panel.hidden {
    display: none !important;
}

.asset-card,
.report-item {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.9));
    border-radius: 18px;
    padding: 16px;
    border: 1px solid rgba(23, 33, 47, 0.08);
    box-shadow: 0 14px 30px rgba(186, 200, 222, 0.1);
}

.asset-card span:first-child,
.summary-card div,
.price-card span,
.selected-metal-balance .label-with-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inline-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    flex: 0 0 18px;
}

.asset-card strong,
.report-item strong {
    display: block;
    margin-top: 8px;
}

.asset-card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.asset-action-button {
    flex: 1 1 140px;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
}

.report-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.report-item strong,
.asset-card strong,
.metric-box strong,
.summary-line strong {
    line-height: 1.35;
}

.bottom-nav {
    position: fixed;
    right: 50%;
    bottom: 0;
    transform: translateX(50%);
    width: min(460px, 100%);
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr 1fr 1fr;
    gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.94));
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 196, 74, 0.16);
    border-bottom: 0;
    box-shadow:
        0 -16px 34px rgba(160, 180, 210, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.nav-item.active {
    background: linear-gradient(135deg, rgba(255, 214, 112, 0.22), rgba(255, 255, 255, 0.88));
    color: var(--accent);
}

.nav-item {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 9px 8px;
    border-radius: 18px;
    font-size: 11px;
    font-weight: 700;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.58),
        0 8px 16px rgba(193, 208, 229, 0.08);
}

.nav-item span:last-child {
    white-space: nowrap;
    line-height: 1;
}

.nav-item-store {
    background: linear-gradient(135deg, #ffd45c, #ffe8a1);
    border-color: rgba(255, 191, 71, 0.56);
    transform: translateY(-20px);
    box-shadow:
        0 22px 42px rgba(255, 191, 71, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.66);
    border-radius: 22px;
    padding: 12px 10px 11px;
    font-size: 12px;
}

.section-head {
    padding: 2px 2px 0;
}

.dashboard-select {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.92));
    border-color: rgba(255, 196, 74, 0.18);
    box-shadow: 0 10px 22px rgba(188, 205, 228, 0.1);
}

[data-theme="dark"] .app-shell.is-authenticated::before {
    background:
        radial-gradient(circle at top right, rgba(255, 217, 112, 0.18), transparent 24%),
        radial-gradient(circle at top left, rgba(83, 171, 255, 0.14), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 45%);
}

[data-theme="dark"] .app-shell.is-authenticated .card {
    background:
        linear-gradient(180deg, rgba(19, 35, 61, 0.96), rgba(24, 44, 74, 0.94));
    border-color: rgba(255, 233, 173, 0.14);
    box-shadow:
        0 24px 52px rgba(5, 12, 24, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .topbar {
    background: linear-gradient(180deg, rgba(20, 38, 66, 0.96), rgba(18, 33, 58, 0.94));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 18px 40px rgba(4, 12, 24, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .profile-menu-panel {
    background: rgba(19, 28, 44, 0.98);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .profile-menu-panel button:hover {
    background: rgba(245, 196, 107, 0.12);
}

[data-theme="dark"] .topbar strong,
[data-theme="dark"] .topbar span,
[data-theme="dark"] .topbar p {
    color: #f8fbff;
}

[data-theme="dark"] .topbar .eyebrow {
    color: #d7e4f8;
}

[data-theme="dark"] .icon-button,
[data-theme="dark"] #logoutButton,
[data-theme="dark"] #themeToggle {
    background: rgba(255, 255, 255, 0.06);
    color: #eef5ff;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 10px 18px rgba(4, 12, 24, 0.16);
}

[data-theme="dark"] .app-shell.is-authenticated .eyebrow {
    color: #ffe08d;
}

[data-theme="dark"] .welcome-card {
    background:
        radial-gradient(circle at top right, rgba(255, 214, 112, 0.18), transparent 32%),
        radial-gradient(circle at bottom left, rgba(95, 208, 255, 0.15), transparent 30%),
        linear-gradient(135deg, rgba(20, 38, 66, 0.98), rgba(18, 33, 58, 0.96));
    border-color: rgba(255, 233, 173, 0.16);
    box-shadow:
        0 26px 54px rgba(4, 12, 24, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .welcome-card::after,
[data-theme="dark"] .price-card::after,
[data-theme="dark"] .summary-card::after,
[data-theme="dark"] .chart-card::after,
[data-theme="dark"] .trade-panel::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
}

[data-theme="dark"] .balance-chip {
    background: linear-gradient(180deg, rgba(27, 46, 77, 0.94), rgba(23, 40, 68, 0.92));
    border-color: rgba(255, 233, 173, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .balance-visual {
    background: linear-gradient(135deg, rgba(255, 211, 100, 0.16), rgba(95, 208, 255, 0.14));
    box-shadow: 0 16px 30px rgba(4, 12, 24, 0.22);
}

[data-theme="dark"] .selected-metal-balance,
[data-theme="dark"] .chart-labels,
[data-theme="dark"] .muted-text {
    color: #d7e4f8;
}

[data-theme="dark"] .wallet-action-button {
    background: linear-gradient(135deg, rgba(28, 49, 82, 0.98), rgba(22, 39, 66, 0.94));
    border-color: rgba(255, 233, 173, 0.14);
    color: #f8fbff;
    box-shadow:
        0 14px 26px rgba(4, 12, 24, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .wallet-action-button:first-child {
    background: linear-gradient(135deg, rgba(96, 78, 18, 0.68), rgba(23, 40, 68, 0.96));
}

[data-theme="dark"] .wallet-action-button:last-child {
    background: linear-gradient(135deg, rgba(28, 81, 117, 0.58), rgba(23, 40, 68, 0.96));
}

[data-theme="dark"] .price-card {
    background: linear-gradient(180deg, rgba(25, 45, 76, 0.98), rgba(19, 35, 61, 0.94));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 18px 36px rgba(4, 12, 24, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .summary-card {
    background: linear-gradient(180deg, rgba(25, 45, 76, 0.96), rgba(19, 35, 61, 0.92));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 14px 30px rgba(4, 12, 24, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .price-card-buy {
    border-color: rgba(110, 240, 178, 0.3);
    background:
        radial-gradient(circle at top right, rgba(110, 240, 178, 0.16), transparent 34%),
        linear-gradient(135deg, rgba(22, 65, 53, 0.9), rgba(19, 35, 61, 0.96));
}

[data-theme="dark"] .summary-card-sell {
    border-color: rgba(255, 157, 143, 0.28);
    background:
        radial-gradient(circle at top right, rgba(255, 157, 143, 0.16), transparent 34%),
        linear-gradient(135deg, rgba(80, 33, 37, 0.88), rgba(19, 35, 61, 0.96));
}

[data-theme="dark"] .chart-card {
    background:
        radial-gradient(circle at top right, rgba(255, 214, 112, 0.14), transparent 28%),
        radial-gradient(circle at bottom left, rgba(95, 208, 255, 0.1), transparent 34%),
        linear-gradient(180deg, rgba(24, 44, 74, 0.98), rgba(18, 33, 58, 0.95));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 18px 38px rgba(4, 12, 24, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .trade-panel,
[data-theme="dark"] .asset-card,
[data-theme="dark"] .report-item {
    background:
        linear-gradient(180deg, rgba(24, 44, 74, 0.96), rgba(18, 33, 58, 0.93));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 14px 28px rgba(4, 12, 24, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .modal-dialog {
    background: linear-gradient(180deg, rgba(20, 38, 66, 0.99), rgba(18, 33, 58, 0.96));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 30px 60px rgba(4, 12, 24, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .profile-section,
[data-theme="dark"] .deposit-result-box,
[data-theme="dark"] .bank-select-trigger,
[data-theme="dark"] .bank-select-menu,
[data-theme="dark"] .deposit-method-card,
[data-theme="dark"] .store-card,
[data-theme="dark"] .ticket-card {
    background: linear-gradient(180deg, rgba(24, 44, 74, 0.97), rgba(18, 33, 58, 0.94));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 16px 28px rgba(4, 12, 24, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .support-textarea,
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .landing-select {
    background: #1a2d4d;
    color: #f8fbff;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .support-textarea::placeholder,
[data-theme="dark"] .field input::placeholder {
    color: #9eb3d3;
}

[data-theme="dark"] .chip {
    background: rgba(255, 255, 255, 0.06);
    color: #eef5ff;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .chip.active {
    background: linear-gradient(135deg, rgba(255, 211, 100, 0.22), rgba(95, 208, 255, 0.12));
    color: #ffe08d;
    border-color: rgba(255, 233, 173, 0.18);
}

[data-theme="dark"] .ticket-card-collapsible.is-open {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 233, 173, 0.16);
}

[data-theme="dark"] .ticket-preview,
[data-theme="dark"] .ticket-chevron,
[data-theme="dark"] #supportMessageBox,
[data-theme="dark"] .message-box {
    color: #d7e4f8;
}

[data-theme="dark"] .ticket-thread {
    border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .ticket-message {
    background: rgba(255, 255, 255, 0.06);
    color: #f8fbff;
}

[data-theme="dark"] .ticket-status.closed {
    background: rgba(255, 255, 255, 0.08);
    color: #d7e4f8;
}

[data-theme="dark"] .modal-grid .metric-box {
    background: linear-gradient(180deg, rgba(26, 46, 77, 0.98), rgba(19, 35, 61, 0.94));
    border-color: rgba(255, 255, 255, 0.08);
    color: #f8fbff;
    box-shadow:
        0 14px 28px rgba(4, 12, 24, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .modal-grid .metric-box.buy-tone {
    background: linear-gradient(135deg, rgba(25, 95, 72, 0.88), rgba(19, 35, 61, 0.96));
    border-color: rgba(110, 240, 178, 0.3);
}

[data-theme="dark"] .modal-grid .metric-box.sell-tone {
    background: linear-gradient(135deg, rgba(92, 38, 43, 0.88), rgba(19, 35, 61, 0.96));
    border-color: rgba(255, 157, 143, 0.28);
}

[data-theme="dark"] .modal-summary {
    background: linear-gradient(180deg, rgba(24, 44, 74, 0.97), rgba(18, 33, 58, 0.94));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 16px 28px rgba(4, 12, 24, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .summary-line {
    color: #eef5ff;
}

[data-theme="dark"] .summary-line.total {
    border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] #tradeModalMessage {
    color: #d7e4f8;
}

[data-theme="dark"] #tradeModal .modal-close {
    background: rgba(255, 255, 255, 0.06);
    color: #eef5ff;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .bottom-nav {
    background: linear-gradient(180deg, rgba(18, 32, 56, 0.98), rgba(16, 28, 48, 0.95));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 -16px 34px rgba(4, 12, 24, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .nav-item {
    color: #eef5ff;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.07),
        0 8px 16px rgba(4, 12, 24, 0.16);
}

[data-theme="dark"] .nav-item.active {
    background: linear-gradient(135deg, rgba(255, 211, 100, 0.22), rgba(95, 208, 255, 0.12));
    color: #ffe08d;
}

[data-theme="dark"] .nav-item-store {
    background: linear-gradient(135deg, #f0be47, #ffd979);
    color: #2d220a;
}

[data-theme="dark"] .dashboard-select {
    background: linear-gradient(180deg, rgba(26, 46, 77, 0.98), rgba(19, 35, 61, 0.94));
    border-color: rgba(255, 233, 173, 0.16);
    color: #f8fbff;
    box-shadow: 0 10px 22px rgba(4, 12, 24, 0.18);
    color-scheme: dark;
}

[data-theme="dark"] .dashboard-select option {
    background: #1a2d4d;
    color: #f8fbff;
}

.nav-item-store .nav-icon {
    width: 28px;
    height: 28px;
}

.nav-item-store.active {
    color: #2d220a;
    background: linear-gradient(135deg, #ffbf47, #ffdf7a);
}

.nav-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inline-icon svg,
.nav-icon svg {
    width: 100%;
    height: 100%;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--backdrop);
    backdrop-filter: blur(10px);
}

.modal-dialog {
    position: relative;
    width: min(92vw, 460px);
    z-index: 1;
    max-height: calc(100vh - 40px);
    overflow: auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 250, 255, 0.96));
    border-color: rgba(23, 33, 47, 0.08);
    box-shadow: 0 30px 60px rgba(112, 134, 166, 0.18);
}

.modal-close {
    padding: 10px 14px;
}

.modal-grid {
    gap: 12px;
    margin: 18px 0;
}

.metric-box {
    flex: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 251, 255, 0.9));
    border-radius: 18px;
    padding: 14px;
    border: 1px solid rgba(23, 33, 47, 0.08);
}

.metric-box.buy-tone {
    border-color: rgba(71, 205, 139, 0.34);
    background: linear-gradient(135deg, var(--buy-soft), var(--surface-soft));
}

.metric-box.sell-tone {
    border-color: rgba(255, 127, 118, 0.34);
    background: linear-gradient(135deg, var(--sell-soft), var(--surface-soft));
}

.metric-box strong {
    display: block;
    margin-top: 8px;
    font-size: 18px;
}

.modal-summary {
    display: grid;
    gap: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 251, 255, 0.9));
    border-radius: 18px;
    padding: 14px;
    border: 1px solid rgba(23, 33, 47, 0.08);
}

.summary-line.total {
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.deposit-methods {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.deposit-method-card {
    width: 100%;
    text-align: right;
    background: var(--surface-subtle);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 16px;
    display: grid;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.deposit-method-card:hover {
    transform: translateY(-1px);
    border-color: var(--border-strong);
}

.deposit-method-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    color: var(--accent);
}

.deposit-method-icon svg {
    width: 100%;
    height: 100%;
}

.deposit-method-card strong {
    font-size: 16px;
}

.deposit-method-card small {
    color: var(--text-muted);
    line-height: 1.7;
}

.deposit-result-box {
    margin-top: 16px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--surface-soft);
}

.deposit-result-box strong {
    display: block;
    margin-bottom: 6px;
}

.deposit-details {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.deposit-detail-item {
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px 14px;
}

.deposit-detail-item span {
    display: block;
    color: var(--text-soft);
    font-size: 12px;
    margin-bottom: 6px;
}

.deposit-detail-item strong {
    margin: 0;
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.7;
}

.deposit-detail-item .mono {
    direction: ltr;
    text-align: left;
    font-family: Consolas, Monaco, monospace;
    letter-spacing: 0;
}

.deposit-info-note {
    background: rgba(255, 191, 71, 0.1);
    border-color: rgba(255, 191, 71, 0.24);
}

.deposit-info-note strong {
    color: var(--accent);
}

.profile-dialog {
    width: min(94vw, 560px);
}

.store-dialog {
    width: min(94vw, 580px);
}

.store-summary-box {
    margin-top: 18px;
}

.store-grid {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.store-card {
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 16px;
    display: grid;
    gap: 14px;
}

.store-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.store-card-head strong {
    display: block;
    font-size: 17px;
}

.store-card-head small {
    color: var(--text-muted);
    display: block;
    margin-top: 4px;
    line-height: 1.7;
}

.store-price {
    color: var(--accent);
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
}

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

.store-meta-item {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 10px 12px;
}

.store-meta-item span {
    color: var(--text-soft);
    font-size: 12px;
    display: block;
    margin-bottom: 4px;
}

.store-description {
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 14px;
}

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

.store-action-note {
    color: var(--text-soft);
    font-size: 12px;
}

.profile-sections {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.profile-section {
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 16px;
}

.profile-section h4 {
    margin: 0 0 14px;
    font-size: 16px;
}

.kyc-status-banner {
    padding: 14px;
    border-radius: 18px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    background: var(--surface-soft);
}

.kyc-status-banner strong {
    display: block;
    margin-bottom: 6px;
}

.kyc-status-banner.pending {
    background: rgba(255, 191, 71, 0.12);
    border-color: rgba(255, 191, 71, 0.28);
}

.kyc-status-banner.approved {
    background: var(--buy-soft);
    border-color: rgba(71, 205, 139, 0.28);
}

.kyc-status-banner.rejected {
    background: var(--sell-soft);
    border-color: rgba(255, 127, 118, 0.28);
}

.compact-head {
    margin-top: 18px;
}

.support-filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

#openTicketsFilter {
    min-width: 148px;
}

#closedTicketsFilter {
    min-width: 74px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 12px;
}

.bank-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.bank-status.pending {
    background: rgba(255, 191, 71, 0.14);
    color: #d9a231;
}

.bank-status.approved {
    background: var(--buy-soft);
    color: var(--buy-color);
}

.bank-status.rejected {
    background: var(--sell-soft);
    color: var(--sell-color);
}

.support-textarea {
    background: var(--input-bg);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 16px;
    min-height: 110px;
    resize: vertical;
    font: inherit;
}

.ticket-card {
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px;
    display: grid;
    gap: 10px;
}

.ticket-card-collapsible {
    width: 100%;
    text-align: right;
    color: var(--text-main);
    cursor: pointer;
}

.ticket-card-collapsible.is-open {
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.05);
}

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

.ticket-head-main {
    min-width: 0;
}

.ticket-head-main strong {
    display: block;
}

.ticket-head-side {
    display: grid;
    justify-items: end;
    gap: 8px;
    flex: 0 0 auto;
}

.ticket-preview {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.7;
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ticket-chevron {
    font-size: 18px;
    color: var(--text-soft);
    line-height: 1;
    transition: transform 0.2s ease;
}

.ticket-card-collapsible.is-open .ticket-chevron {
    transform: rotate(180deg);
}

.ticket-thread {
    padding-top: 4px;
    border-top: 1px solid var(--border);
}

.ticket-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
}

.ticket-status.open {
    background: rgba(255, 191, 71, 0.14);
    color: #d9a231;
}

.ticket-status.answered {
    background: var(--buy-soft);
    color: var(--buy-color);
}

.ticket-status.closed {
    background: var(--surface-soft);
    color: var(--text-muted);
}

.ticket-message {
    border-radius: 14px;
    padding: 10px 12px;
    background: var(--surface-soft);
}

.ticket-message.user {
    border-right: 3px solid var(--accent);
}

.ticket-message.admin {
    border-right: 3px solid var(--buy-color);
}

@media (max-width: 420px) {
    .welcome-card,
    .price-grid {
        grid-template-columns: 1fr;
        display: grid;
    }

    .summary-cards {
        display: grid;
    }

    .dashboard-select {
        width: 100%;
        margin-top: 10px;
    }

    .section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .app-shell.is-guest {
        padding: 16px;
    }

    .auth-card {
        width: 88vw;
        max-width: 88vw;
    }

    .modal-grid {
        flex-direction: column;
    }

    .wallet-actions {
        flex-direction: column;
    }

    .store-meta {
        grid-template-columns: 1fr;
    }

    .nav-item-store {
        transform: translateY(-14px);
    }

    .intro-showcase,
    .service-grid,
    .product-strip,
    .journey-steps {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .auth-landing,
    .auth-card {
        width: 100%;
        max-width: 100%;
    }

    .landing-hero,
    .dual-section,
    .landing-metrics,
    .full-strip {
        grid-template-columns: 1fr;
    }

    .landing-title {
        font-size: 34px;
    }

    .landing-cta {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Premium redesign layer */
:root {
    --bg-main:
        radial-gradient(circle at 88% 4%, rgba(196, 143, 51, 0.18), transparent 28%),
        radial-gradient(circle at 8% 18%, rgba(32, 122, 111, 0.13), transparent 26%),
        linear-gradient(135deg, #f7f4ec 0%, #eef2ef 47%, #f8f6f1 100%);
    --text-main: #171511;
    --text-muted: #666157;
    --text-soft: #8a8376;
    --surface: rgba(255, 254, 249, 0.9);
    --surface-strong: #fffef9;
    --surface-soft: rgba(31, 95, 87, 0.07);
    --surface-subtle: rgba(23, 21, 17, 0.035);
    --border: rgba(23, 21, 17, 0.1);
    --border-strong: rgba(196, 143, 51, 0.28);
    --shadow: 0 20px 54px rgba(35, 29, 19, 0.11);
    --accent: #b8842f;
    --accent-soft: rgba(184, 132, 47, 0.13);
    --input-bg: rgba(255, 255, 255, 0.92);
    --nav-bg: rgba(255, 254, 249, 0.93);
    --backdrop: rgba(19, 18, 15, 0.46);
    --buy-color: #14795f;
    --buy-soft: rgba(20, 121, 95, 0.13);
    --sell-color: #b74d3e;
    --sell-soft: rgba(183, 77, 62, 0.12);
}

[data-theme="dark"] {
    --bg-main:
        radial-gradient(circle at 86% 6%, rgba(207, 157, 63, 0.17), transparent 26%),
        radial-gradient(circle at 7% 18%, rgba(42, 166, 149, 0.14), transparent 26%),
        linear-gradient(135deg, #11100d 0%, #191b18 48%, #101412 100%);
    --text-main: #f8f3e8;
    --text-muted: #c7beac;
    --text-soft: #9f9584;
    --surface: rgba(30, 29, 25, 0.9);
    --surface-strong: #24221d;
    --surface-soft: rgba(255, 255, 255, 0.055);
    --surface-subtle: rgba(255, 255, 255, 0.045);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(205, 162, 78, 0.24);
    --shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
    --accent: #d0a24e;
    --accent-soft: rgba(208, 162, 78, 0.16);
    --input-bg: rgba(24, 24, 21, 0.96);
    --nav-bg: rgba(28, 27, 24, 0.94);
    --backdrop: rgba(0, 0, 0, 0.68);
    --buy-color: #53c59f;
    --buy-soft: rgba(83, 197, 159, 0.15);
    --sell-color: #ff9b88;
    --sell-soft: rgba(255, 155, 136, 0.15);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Vazirmatn, Tahoma, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(23, 21, 17, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 21, 17, 0.025) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 70%);
}

.app-shell.is-guest {
    padding: 30px 22px 44px;
}

.app-shell.is-authenticated {
    max-width: min(1180px, 100%);
    padding: 24px 24px calc(96px + env(safe-area-inset-bottom));
}

.app-shell.is-authenticated::before {
    background:
        radial-gradient(circle at 84% 0%, rgba(184, 132, 47, 0.14), transparent 28%),
        radial-gradient(circle at 12% 10%, rgba(31, 95, 87, 0.11), transparent 22%);
}

.phone-frame {
    max-width: 1120px;
    margin: 0 auto;
}

.topbar,
.card,
.landing-hero-copy,
.landing-login-card,
.landing-section-card,
.landing-cta,
.metric-tile,
.intro-feature-card,
.service-card,
.product-teaser,
.journey-card,
.hero-panel,
.balance-chip,
.price-card,
.summary-card,
.chart-card,
.trade-panel,
.asset-card,
.report-item,
.modal-dialog,
.metric-box,
.modal-summary,
.deposit-method-card,
.deposit-result-box,
.profile-section,
.store-card,
.ticket-card,
.field input,
.field select,
.support-textarea,
.dashboard-select,
.landing-select,
.bank-select-trigger,
.bank-select-menu,
.primary-button,
.success-button,
.danger-button,
.ghost-button,
.nav-item,
.chip {
    border-radius: 8px;
}

.topbar {
    max-width: 1120px;
    margin: 0 auto 18px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
    border-color: var(--border);
    box-shadow: 0 16px 42px rgba(35, 29, 19, 0.08);
}

.topbar h1 {
    font-size: 20px;
    font-weight: 900;
}

.topbar::before {
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 8px;
    margin-left: 12px;
    background:
        linear-gradient(145deg, #e5bd6b, #ad7426);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 24px rgba(184, 132, 47, 0.2);
}

.topbar > div:first-child {
    display: flex;
    align-items: center;
}

.auth-landing {
    max-width: 1240px;
    gap: 20px;
}

.landing-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: 20px;
}

.landing-hero-copy {
    min-height: 650px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 34px;
    background:
        linear-gradient(110deg, rgba(23, 21, 17, 0.86), rgba(44, 35, 22, 0.58)),
        url("./hero-metals.png");
    background-size: cover;
    background-position: center;
    color: #fff9ec;
    overflow: hidden;
}

.landing-hero-copy::after {
    display: none;
}

.landing-title {
    max-width: 720px;
    font-size: clamp(44px, 6vw, 78px);
    line-height: 1.08;
    font-weight: 900;
    color: #fff9ec;
}

.landing-lead {
    max-width: 760px;
    color: rgba(255, 249, 236, 0.82);
    font-size: 16px;
}

.hero-kicker {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.22);
    color: #f4d99e;
    font-weight: 800;
}

.hero-highlights {
    justify-content: flex-start;
}

.hero-highlights span {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff9ec;
    font-weight: 700;
}

.landing-metrics {
    margin-top: 28px;
}

.metric-tile {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
}

.metric-tile strong {
    color: #f1c76c;
    font-size: 28px;
}

.metric-tile small {
    color: rgba(255, 249, 236, 0.75);
}

.landing-hero-image-wrap {
    display: none;
}

.landing-login-card {
    padding: 22px;
    background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
    align-content: center;
}

.auth-title {
    font-size: 24px;
    font-weight: 900;
}

.compact-hero-panel {
    text-align: right;
    background:
        linear-gradient(135deg, var(--accent-soft), var(--surface-soft)),
        var(--surface-strong);
}

.landing-section-card {
    padding: 24px;
    background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
}

.section-heading {
    margin-bottom: 18px;
}

.section-heading span,
.landing-cta span,
.eyebrow {
    letter-spacing: 0;
    font-weight: 800;
}

.section-heading h3,
.landing-cta strong {
    font-weight: 900;
}

.section-visual {
    max-height: 240px;
    overflow: hidden;
    background: #15130f;
}

.section-visual img {
    height: 100%;
    object-fit: cover;
}

.service-card,
.product-teaser,
.intro-feature-card,
.journey-card {
    background: var(--surface-subtle);
}

.service-icon {
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
}

.landing-cta {
    background:
        linear-gradient(110deg, rgba(23, 21, 17, 0.92), rgba(23, 21, 17, 0.8)),
        url("./products-metals.png");
    background-size: cover;
    background-position: center;
    color: #fff9ec;
}

.landing-cta p,
.landing-cta span {
    color: rgba(255, 249, 236, 0.78);
}

.landing-cta-button,
.primary-button {
    background: linear-gradient(135deg, #d8a64f, #f1cf79);
    color: #18140d;
    box-shadow: 0 14px 30px rgba(184, 132, 47, 0.22);
}

.success-button {
    background: linear-gradient(135deg, #14795f, #45bf94);
    color: #ffffff;
}

.danger-button {
    background: linear-gradient(135deg, #a94337, #e07763);
    color: #ffffff;
}

.ghost-button,
.chip,
.nav-item {
    background: var(--surface-subtle);
    border-color: var(--border);
}

.primary-button,
.success-button,
.danger-button,
.ghost-button,
.nav-item,
.chip,
.landing-cta-button {
    font-weight: 800;
}

.primary-button:disabled,
.success-button:disabled,
.danger-button:disabled,
.ghost-button:disabled,
.rate-action-button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    filter: grayscale(0.45);
    transform: none;
}

.field span {
    font-weight: 800;
    color: var(--text-muted);
}

.field input,
.field select,
.support-textarea,
.dashboard-select,
.landing-select,
.bank-select-trigger {
    min-height: 48px;
    border-color: var(--border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

#dashboardView {
    display: grid;
    grid-template-columns: minmax(330px, 0.42fr) minmax(0, 0.58fr);
    align-items: start;
    gap: 20px;
}

#dashboardView > .welcome-card {
    position: sticky;
    top: 20px;
}

#dashboardView > .card:not(.welcome-card) {
    min-width: 0;
}

.welcome-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px;
    background:
        linear-gradient(150deg, rgba(23, 21, 17, 0.92), rgba(31, 95, 87, 0.76)),
        url("./services-metals.png");
    background-size: cover;
    background-position: center;
    color: #fff9ec;
    border-color: rgba(255, 255, 255, 0.16);
}

.welcome-card .eyebrow,
.welcome-card .selected-metal-balance {
    color: rgba(255, 249, 236, 0.78);
}

#walletBalance {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 900;
    color: #fff9ec;
}

.wallet-breakdown {
    display: grid;
    gap: 7px;
    margin: 10px 0 16px;
    color: rgba(255, 249, 236, 0.76);
    font-size: 13px;
}

.wallet-breakdown span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.wallet-breakdown strong {
    color: #fff9ec;
    white-space: nowrap;
}

.selected-metal-balance {
    display: grid;
    gap: 6px;
}

.selected-metal-value {
    color: rgba(255, 249, 236, 0.72);
    font-size: 12px;
    font-weight: 600;
}

.deposit-profile-link {
    width: 100%;
    margin-top: 10px;
}

.withdraw-account-list {
    display: grid;
    gap: 10px;
}

.withdraw-account-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-strong);
    color: var(--text);
    text-align: right;
}

.withdraw-account-card.active {
    border-color: rgba(216, 166, 79, 0.68);
    box-shadow: 0 0 0 3px rgba(216, 166, 79, 0.12);
}

.withdraw-account-card span:not(.withdraw-bank-fallback) {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.withdraw-account-card small {
    color: var(--muted);
    direction: ltr;
    text-align: left;
    overflow-wrap: anywhere;
}

.withdraw-bank-fallback {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(216, 166, 79, 0.14);
    color: var(--gold);
    font-size: 11px;
    font-weight: 800;
}

.withdraw-account-empty {
    padding: 12px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--muted);
    font-size: 13px;
}

.amount-words {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    line-height: 1.8;
}

.wallet-actions {
    display: grid;
    grid-template-columns: 1fr;
}

.wallet-action-button {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff9ec;
    box-shadow: none;
}

.balance-chip {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
}

.balance-visual {
    background: rgba(0, 0, 0, 0.18);
}

.price-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.78fr);
    gap: 14px;
}

.price-card,
.summary-card,
.chart-card,
.trade-panel,
.asset-card,
.report-item {
    position: relative;
    overflow: hidden;
    background: var(--surface-strong);
    border-color: var(--border);
}

.price-card strong,
.summary-card strong {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 900;
}

.price-card-buy {
    background:
        linear-gradient(135deg, rgba(20, 121, 95, 0.14), transparent),
        var(--surface-strong);
}

.summary-card-sell {
    background:
        linear-gradient(135deg, rgba(183, 77, 62, 0.12), transparent),
        var(--surface-strong);
}

.rate-action-button {
    width: 100%;
    margin-top: 16px;
}

.chart-card {
    min-height: 260px;
}

#priceChart {
    min-height: 170px;
}

.bottom-nav {
    width: min(1120px, calc(100% - 32px));
    max-width: 1120px;
    bottom: 16px;
    padding: 10px;
    border-radius: 8px;
    background: var(--nav-bg);
    border: 1px solid var(--border);
    box-shadow: 0 18px 54px rgba(35, 29, 19, 0.16);
}

.nav-item {
    min-height: 58px;
    gap: 5px;
    color: var(--text-muted);
}

.nav-item.active,
.nav-item-store.active {
    background: #171511;
    color: #fff9ec;
}

.nav-item-store {
    background: linear-gradient(135deg, #d8a64f, #f1cf79);
    color: #18140d;
    transform: translateY(-8px);
}

.modal {
    padding: 24px;
}

.modal-dialog {
    border-color: var(--border);
    background: var(--surface-strong);
}

.store-dialog,
.profile-dialog {
    width: min(94vw, 760px);
}

.modal-head {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.asset-grid,
.store-grid,
.report-list {
    display: grid;
    gap: 12px;
}

.asset-card strong,
.report-item strong,
.metric-box strong,
.summary-line strong {
    font-weight: 900;
}

[data-theme="dark"] .landing-hero-copy,
[data-theme="dark"] .landing-cta,
[data-theme="dark"] .welcome-card {
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .landing-login-card,
[data-theme="dark"] .landing-section-card,
[data-theme="dark"] .card,
[data-theme="dark"] .price-card,
[data-theme="dark"] .summary-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .trade-panel,
[data-theme="dark"] .asset-card,
[data-theme="dark"] .report-item,
[data-theme="dark"] .modal-dialog,
[data-theme="dark"] .profile-section,
[data-theme="dark"] .deposit-result-box,
[data-theme="dark"] .bank-select-trigger,
[data-theme="dark"] .bank-select-menu,
[data-theme="dark"] .deposit-method-card,
[data-theme="dark"] .store-card,
[data-theme="dark"] .ticket-card,
[data-theme="dark"] .metric-box,
[data-theme="dark"] .modal-summary {
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="dark"] .nav-item.active,
[data-theme="dark"] .nav-item-store.active {
    background: #f1cf79;
    color: #18140d;
}

@media (max-width: 980px) {
    .landing-hero {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;
    }

    .landing-hero-copy {
        order: 1;
        width: 100%;
        min-height: 560px;
    }

    .landing-login-card {
        order: 2;
        width: 100%;
        min-height: auto;
        align-content: start;
        align-self: auto;
    }

    #dashboardView {
        grid-template-columns: 1fr;
    }

    #dashboardView > .welcome-card {
        position: relative;
        top: auto;
    }

    .price-grid {
        grid-template-columns: 1fr;
    }

    .app-shell.is-guest .phone-frame,
    .app-shell.is-guest .landing-sections {
        padding-bottom: calc(210px + env(safe-area-inset-bottom));
    }

    .mobile-footer-brand span,
    .mobile-footer-links,
    .mobile-footer-links a {
        color: rgba(255, 249, 236, 0.76);
    }

    .mobile-footer-links {
        display: grid;
        justify-content: stretch;
        gap: 8px;
    }

    .mobile-footer-links a,
    .mobile-footer-links span {
        padding: 10px 12px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.07);
    }
}

@media (max-width: 560px) {
    .app-shell.is-guest,
    .app-shell.is-authenticated {
        padding-right: 14px;
        padding-left: 14px;
    }

    .app-shell.is-authenticated {
        padding-bottom: calc(94px + env(safe-area-inset-bottom));
    }

    .landing-hero-copy {
        min-height: 460px;
        padding: 22px;
    }

    .landing-login-card {
        gap: 14px;
    }

    .landing-title {
        font-size: 36px;
    }

    .landing-login-card,
    .landing-section-card,
    .landing-cta,
    .card {
        padding: 16px;
    }

    .landing-metrics,
    .service-grid,
    .full-strip,
    .journey-steps {
        grid-template-columns: 1fr;
    }

    .bottom-nav {
        width: calc(100% - 18px);
        bottom: 8px;
        padding: 7px;
    }

    .nav-item {
        min-height: 54px;
        padding: 8px 6px;
        font-size: 11px;
    }

    .nav-icon {
        width: 20px;
        height: 20px;
    }

    .modal {
        padding: 12px;
    }

    .guest-mobile-dock {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 14px;
    }

    .guest-mobile-dock-links {
        justify-content: stretch;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .guest-mobile-dock-links a,
    .guest-mobile-dock-links span {
        padding: 8px 6px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.07);
        overflow-wrap: anywhere;
    }
}

/* Fresh mobile guest footer */
.guest-mobile-dock {
    position: fixed;
    right: 12px;
    left: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 2147483000;
    display: none;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(23, 21, 17, 0.96), rgba(35, 31, 24, 0.94));
    color: #fff9ec;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
}

.guest-mobile-dock.hidden {
    display: none !important;
}

.app-shell.is-guest ~ .guest-mobile-dock {
    display: grid;
}

/* Locked mobile footer: five primary actions stay pinned to the viewport. */
#bottomNav.bottom-nav {
    position: fixed !important;
    z-index: 2147483000 !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
}

#bottomNav.bottom-nav.hidden {
    display: none !important;
}

#bottomNav.bottom-nav:not(.hidden) {
    display: grid !important;
}

@media (min-width: 721px) {
    #bottomNav.bottom-nav {
        right: 50% !important;
        left: auto !important;
        bottom: 16px !important;
        width: min(460px, calc(100% - 24px)) !important;
        max-width: 460px !important;
        transform: translateX(50%) !important;
    }
}

@media (max-width: 720px) {
    .app-shell.is-authenticated {
        padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    }

    #bottomNav.bottom-nav {
        right: max(8px, env(safe-area-inset-right)) !important;
        left: max(8px, env(safe-area-inset-left)) !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-width: none !important;
        min-height: 66px !important;
        padding: 7px !important;
        border-radius: 8px !important;
        transform: translate3d(0, 0, 0) !important;
        will-change: transform;
    }

    #bottomNav .nav-item {
        min-width: 0 !important;
        min-height: 52px !important;
        padding: 7px 2px !important;
        border-radius: 8px !important;
        font-size: 10.5px !important;
        line-height: 1.15 !important;
    }

    #bottomNav .nav-item-store {
        transform: none !important;
        padding: 7px 2px !important;
        border-radius: 8px !important;
    }

    #bottomNav .nav-icon {
        width: 22px !important;
        height: 22px !important;
    }

    #bottomNav .nav-item span:last-child {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.guest-mobile-dock-brand {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.guest-mobile-dock-brand strong {
    font-size: 16px;
    font-weight: 900;
}

.guest-mobile-dock-brand span,
.guest-mobile-dock-links,
.guest-mobile-dock-links a {
    color: rgba(255, 249, 236, 0.78);
    font-size: 12px;
}

.guest-mobile-dock-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.guest-mobile-dock-links a {
    text-decoration: none;
    font-weight: 800;
}

@media (max-width: 560px) {
    .guest-mobile-dock {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 14px;
    }

    .guest-mobile-dock-links {
        justify-content: stretch;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .guest-mobile-dock-links a,
    .guest-mobile-dock-links span {
        padding: 8px 6px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.07);
        overflow-wrap: anywhere;
    }
}

#bottomNav .nav-item.active:not(.nav-item-store) {
    background: transparent !important;
    color: var(--text-muted) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.58),
        0 8px 16px rgba(193, 208, 229, 0.08) !important;
}

#bottomNav .nav-item-store,
#bottomNav .nav-item-store.active {
    background: linear-gradient(135deg, #d8a64f, #f1cf79) !important;
    color: #18140d !important;
}

body.modal-open #bottomNav.bottom-nav {
    display: none !important;
}

.modal {
    z-index: 2147483600 !important;
}

@media (max-width: 720px) {
    .modal {
        align-items: flex-start !important;
        justify-content: center !important;
        overflow-y: auto !important;
        padding:
            calc(12px + env(safe-area-inset-top))
            10px
            calc(18px + env(safe-area-inset-bottom)) !important;
    }

    .modal-dialog {
        width: min(100%, 460px) !important;
        max-height: calc(100dvh - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        margin: 0 auto !important;
        overflow-y: auto !important;
    }

    #tradeModal .modal-dialog {
        padding-bottom: 18px !important;
    }
}

.site-logo,
.landing-logo,
.auth-logo,
.guest-mobile-dock-logo {
    display: block;
    object-fit: cover;
    border-radius: 8px;
    background: #171511;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.topbar-brand {
    display: flex !important;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.topbar::before {
    content: none !important;
    display: none !important;
}

.site-logo-sm {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
}

.landing-brand,
.auth-brand {
    display: flex;
    align-items: center;
    min-width: 0;
}

.landing-brand {
    gap: 18px;
    margin-bottom: 18px;
}

.landing-brand .landing-title,
.auth-brand .auth-title {
    margin: 0;
}

.landing-logo {
    width: 104px;
    height: 104px;
    margin-bottom: 0;
    flex: 0 0 104px;
}

.auth-brand {
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.auth-logo {
    width: 68px;
    height: 68px;
    margin: 0;
    flex: 0 0 68px;
}

.login-card-pulse {
    animation: login-card-pulse 0.9s ease;
}

#otpVerifyForm:not(.hidden) {
    display: grid !important;
    scroll-margin: 120px;
    animation: otp-reveal 0.32s ease both;
}

.otp-step-active #otpRequestForm {
    opacity: 0.72;
}

@keyframes otp-reveal {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes login-card-pulse {
    0%,
    100% {
        box-shadow: var(--shadow);
    }

    42% {
        box-shadow:
            0 0 0 4px rgba(216, 166, 79, 0.28),
            0 26px 64px rgba(216, 166, 79, 0.22);
    }
}

.guest-mobile-dock-logo {
    width: 42px;
    height: 42px;
}

.guest-mobile-dock-brand {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.guest-mobile-dock-brand span {
    grid-column: 2;
}

@media (max-width: 720px) {
    .landing-logo {
        width: 74px;
        height: 74px;
        flex-basis: 74px;
    }

    .landing-brand {
        gap: 12px;
        margin-bottom: 14px;
    }

    .auth-logo {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }

    .auth-brand {
        justify-content: flex-start;
    }

    .site-logo-sm {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }
}

.trend-up {
    color: var(--buy-color) !important;
}

.trend-down {
    color: var(--sell-color) !important;
}