:root {
    --bg: #0f0f23;
    --bg-deep: #090914;
    --card: #1b1a31;
    --card-2: #22213a;
    --muted: #9898b3;
    --text: #f8fafc;
    --purple: #8b5cf6;
    --purple-soft: #a78bfa;
    --gold: #fbbf24;
    --cyan: #38bdf8;
    --danger: #ef4444;
    --border: rgba(167, 139, 250, .18);
    --shadow: 0 22px 70px rgba(0, 0, 0, .3);
    --radius: 22px;
}

* { box-sizing: border-box; }
html { background: var(--bg-deep); }
body { margin: 0; min-width: 320px; color: var(--text); background: radial-gradient(circle at 80% 0, rgba(139,92,246,.16), transparent 30%), var(--bg); font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; line-height: 1.5; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(251,191,36,.7); outline-offset: 3px; }

.app-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 20px; border-right: 1px solid var(--border); background: rgba(9,9,20,.86); backdrop-filter: blur(20px); z-index: 20; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 12px; font-family: Bahnschrift, 'Arial Narrow', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .08em; margin: 0 8px 32px; }
.brand small { display: block; margin-top: 2px; color: var(--purple-soft); font-size: 8px; letter-spacing: .26em; }
.brand-mark { width: 34px; height: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; transform: rotate(45deg); }
.brand-mark i { display: block; background: linear-gradient(135deg, var(--gold), var(--purple)); border-radius: 4px; }
.sidebar nav { display: grid; gap: 7px; }
.nav-link { min-height: 48px; padding: 0 12px; display: flex; align-items: center; gap: 13px; color: var(--muted); border: 1px solid transparent; border-radius: 13px; transition: .2s ease; }
.nav-link:hover { color: var(--text); background: rgba(255,255,255,.04); }
.nav-link.active { color: white; background: linear-gradient(90deg, rgba(139,92,246,.22), rgba(139,92,246,.06)); border-color: rgba(167,139,250,.28); }
.nav-code { width: 27px; height: 27px; display: grid; place-items: center; color: var(--purple-soft); border: 1px solid rgba(167,139,250,.3); border-radius: 8px; font: 600 9px Bahnschrift, 'Arial Narrow', sans-serif; }
.nav-link.active .nav-code { color: #11101c; background: var(--gold); border-color: var(--gold); box-shadow: 0 0 18px rgba(251,191,36,.22); }
.sidebar-note { margin-top: auto; padding: 15px; color: #c8c7d7; font-size: 13px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.025); }
.sidebar-note small { color: var(--muted); }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 12px #34d399; }
.status-dot.amber { background: var(--gold); box-shadow: 0 0 12px var(--gold); }

.main-content { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 42px 64px; }
.topbar { position: sticky; top: 0; z-index: 15; min-height: 100px; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(var(--bg) 70%, transparent); }
.eyebrow { margin: 0 0 5px; color: var(--purple-soft); font: 600 10px Bahnschrift, 'Arial Narrow', sans-serif; letter-spacing: .2em; }
.topbar h1 { margin: 0; font-size: 24px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.language-button, .wallet-button { min-height: 44px; border: 1px solid var(--border); background: rgba(255,255,255,.04); border-radius: 12px; cursor: pointer; }
.language-button { width: 44px; color: var(--muted); }
.wallet-button { padding: 0 16px; font-weight: 600; }
.wallet-button:hover { border-color: var(--purple-soft); }
.wallet-light { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.wallet-button.connected .wallet-light { background: #34d399; box-shadow: 0 0 10px #34d399; }

.hero-card { min-height: 410px; padding: 52px 58px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 30px; background: radial-gradient(circle at 75% 50%, rgba(139,92,246,.28), transparent 32%), linear-gradient(135deg, #1f1d37, #111020); box-shadow: var(--shadow); }
.pill { display: inline-flex; align-items: center; min-height: 29px; padding: 0 11px; color: var(--gold); border: 1px solid rgba(251,191,36,.25); border-radius: 99px; background: rgba(251,191,36,.08); font: 600 9px Orbitron, sans-serif; letter-spacing: .12em; }
.hero-copy h2, .page-intro h2, .profile-hero h2, .mining-hero h2 { margin: 16px 0 14px; font-size: clamp(32px, 4vw, 58px); line-height: 1.08; letter-spacing: -.04em; }
.hero-copy p, .page-intro p, .mining-hero p { max-width: 610px; margin: 0; color: var(--muted); font-size: 16px; }
.hero-actions { display: flex; gap: 12px; margin-top: 28px; }
.button { min-height: 46px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 12px; cursor: pointer; font-weight: 700; transition: transform .18s ease, filter .18s ease, background .18s ease; }
.button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.button.primary { color: #11101c; background: linear-gradient(135deg, var(--gold), #fde68a); box-shadow: 0 12px 28px rgba(251,191,36,.15); }
.button.secondary { color: white; background: var(--purple); }
.button.ghost { border-color: var(--border); background: rgba(255,255,255,.045); }
.button.danger { color: #fecaca; border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.1); }
.button.full { width: 100%; }
.orbit-visual { position: relative; width: 320px; height: 320px; margin-left: auto; display: grid; place-items: center; }
.orbit { position: absolute; border: 1px solid rgba(167,139,250,.35); border-radius: 50%; }
.orbit-one { inset: 28px; }
.orbit-two { inset: 73px; border-style: dashed; animation: rotate 24s linear infinite; }
.core { width: 130px; height: 130px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #39266b, #121121); box-shadow: 0 0 60px rgba(139,92,246,.42), inset 0 0 20px rgba(255,255,255,.08); }
.core b { font: 700 30px Orbitron, sans-serif; }
.core span { color: var(--muted); font-size: 12px; }
.orbit-label { position: absolute; display: grid; place-items: center; width: 49px; height: 49px; border-radius: 50%; color: #14121f; background: var(--gold); font: 700 8px Orbitron, sans-serif; }
.label-a { top: 18px; right: 42px; }.label-b { left: 8px; bottom: 70px; background: var(--purple-soft); }.label-c { right: 5px; bottom: 55px; background: var(--cyan); }
@keyframes rotate { to { transform: rotate(360deg); } }

.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.metrics-grid.three { grid-template-columns: repeat(3, 1fr); }
.metric-card, .panel, .checkout-card, .swap-card { border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(155deg, rgba(34,33,58,.9), rgba(24,23,43,.9)); box-shadow: 0 12px 32px rgba(0,0,0,.12); }
.metric-card { min-height: 140px; padding: 22px; display: flex; flex-direction: column; }
.metric-card > span { color: var(--muted); font-size: 13px; }
.metric-card strong { margin: 12px 0 5px; font: 600 clamp(20px, 2.1vw, 29px) Orbitron, sans-serif; letter-spacing: -.03em; }
.metric-card small { color: #86efac; font-size: 12px; }
.content-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; margin-top: 18px; }
.panel { padding: 24px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.panel-heading h3 { margin: 0; font-size: 20px; }
.panel-heading > a { color: var(--gold); font-size: 13px; }
.package-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mini-package { min-height: 105px; padding: 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.025); cursor: pointer; }
.mini-package.selected { border-color: var(--gold); background: rgba(251,191,36,.08); }
.mini-package small, .mini-package span { color: var(--muted); font-size: 10px; }.mini-package b { margin: 4px 0; font: 600 20px Orbitron, sans-serif; }
.quick-buy { margin-top: 16px; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); }
.quick-buy span { color: var(--muted); font-size: 12px; }.quick-buy strong { display: block; color: white; font-size: 18px; }
.activity-list { display: grid; gap: 3px; }
.activity-item { min-height: 64px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
.activity-item:last-child { border: 0; }.activity-mark { width: 10px; height: 10px; border-radius: 3px; background: var(--purple); transform: rotate(45deg); }.activity-item b { display: block; font-size: 13px; }.activity-item small { color: var(--muted); }.activity-item strong { color: #86efac; font-size: 13px; }

.page-intro { min-height: 180px; padding: 25px 2px 32px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.page-intro h2 { margin: 8px 0 9px; font-size: clamp(34px, 4vw, 52px); }
.balance-chip { min-width: 210px; padding: 17px 20px; border: 1px solid var(--border); border-radius: 15px; background: rgba(255,255,255,.04); }.balance-chip span { display: block; color: var(--muted); font-size: 12px; }.balance-chip b { font: 600 18px Orbitron, sans-serif; }
.ticket-layout { display: grid; grid-template-columns: 1fr 350px; gap: 18px; align-items: start; }
.package-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ticket-card { min-height: 245px; position: relative; overflow: hidden; padding: 25px; text-align: left; color: var(--text); border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(145deg, #22213a, #151426); cursor: pointer; transition: .2s ease; }
.ticket-card:hover { transform: translateY(-2px); border-color: var(--purple-soft); }.ticket-card.selected { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), 0 15px 35px rgba(251,191,36,.1); }
.ticket-number { position: absolute; right: 18px; top: 8px; color: rgba(255,255,255,.045); font: 700 88px Orbitron, sans-serif; }.ticket-badge { position: relative; display: inline-block; padding: 5px 9px; color: var(--purple-soft); border: 1px solid var(--border); border-radius: 99px; font-size: 11px; }.ticket-card strong { position: relative; display: block; margin-top: 35px; font: 700 42px Orbitron, sans-serif; }.ticket-card small { color: var(--muted); }.ticket-card i { position: absolute; left: 25px; bottom: 22px; color: var(--gold); font-style: normal; font-size: 12px; }
.checkout-card { position: sticky; top: 112px; padding: 25px; }.checkout-card h3 { margin: 5px 0 24px; }.checkout-card label, .modal-card label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; }.stepper { height: 52px; display: grid; grid-template-columns: 52px 1fr 52px; border: 1px solid var(--border); border-radius: 13px; overflow: hidden; }.stepper button { border: 0; background: rgba(255,255,255,.05); cursor: pointer; font-size: 22px; }.stepper input { min-width: 0; color: white; text-align: center; border: 0; background: transparent; font: 600 18px Orbitron, sans-serif; }.checkout-card dl { margin: 22px 0; }.checkout-card dl > div { padding: 9px 0; display: flex; justify-content: space-between; color: var(--muted); }.checkout-card dd { margin: 0; color: white; }.checkout-card .total-row { margin-top: 7px; padding-top: 16px; border-top: 1px solid var(--border); font-weight: 700; }.form-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; text-align: center; }

.profile-hero, .mining-hero, .reward-banner, .pool-overview { margin-top: 22px; padding: 38px; border: 1px solid var(--border); border-radius: 28px; background: radial-gradient(circle at 90% 20%, rgba(139,92,246,.3), transparent 28%), linear-gradient(145deg, #22213a, #121120); box-shadow: var(--shadow); }
.profile-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; }.profile-hero h2 { margin: 5px 0 8px; font-size: clamp(25px, 4vw, 42px); }.avatar { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 22px; color: #171324; background: linear-gradient(135deg, var(--gold), var(--purple-soft)); font: 700 20px Orbitron, sans-serif; }.level-badge { color: var(--gold); font: 600 9px Orbitron, sans-serif; letter-spacing: .12em; }.detail-list { display: grid; gap: 12px; margin-bottom: 18px; }.detail-list > div { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.06); }.detail-list span { color: var(--muted); }.security-row { display: flex; gap: 9px; align-items: flex-start; margin: 16px 0; }.security-row b, .security-row small { display: block; }.security-row small { color: var(--muted); }
.network-panel { margin-top: 18px; }.network-map { min-height: 320px; display: grid; place-content: center; justify-items: center; }.network-level { min-width: 140px; padding: 20px; text-align: center; border: 1px solid var(--border); border-radius: 16px; background: rgba(139,92,246,.08); }.network-level span, .network-level b { display: block; }.network-level span { color: var(--muted); font: 600 9px Orbitron, sans-serif; }.network-level.root { border-color: var(--gold); }.network-line { width: 1px; height: 44px; background: linear-gradient(var(--gold), var(--purple)); }.network-level-row { display: flex; gap: 20px; position: relative; }.network-level-row::before { content: ''; position: absolute; top: -1px; left: 70px; right: 70px; height: 1px; background: var(--purple); }
.reward-banner { display: flex; justify-content: space-between; align-items: center; }.reward-banner > div > span, .power-display > span, .pool-overview > div > span { color: var(--muted); }.reward-banner strong, .power-display strong, .pool-overview strong { display: block; margin: 5px 0; font: 700 clamp(38px, 6vw, 68px) Orbitron, sans-serif; }.reward-banner strong small, .power-display strong small, .pool-overview strong small { font-size: 15px; }.reward-banner p, .pool-overview p { margin: 0; color: #86efac; }.reward-ring, .allocation-ring { width: 118px; height: 118px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(circle at center, #1b1a31 56%, transparent 58%), conic-gradient(var(--gold) 0 78%, rgba(255,255,255,.08) 78%); }.reward-ring b, .allocation-ring b { font: 700 21px Orbitron, sans-serif; }.reward-ring span, .allocation-ring span { color: var(--muted); font-size: 10px; }.bar-chart { height: 260px; display: flex; align-items: end; gap: clamp(10px, 4vw, 38px); padding: 20px 20px 0; }.bar-chart > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }.bar-chart span { width: min(45px, 75%); min-height: 12px; border-radius: 8px 8px 2px 2px; background: linear-gradient(var(--purple-soft), var(--purple)); box-shadow: 0 0 18px rgba(139,92,246,.18); }.bar-chart small { color: var(--muted); }

.table-panel { margin-top: 4px; }.record-filters { display: flex; gap: 8px; margin-bottom: 18px; }.record-filters button { min-height: 38px; padding: 0 15px; color: var(--muted); border: 1px solid var(--border); border-radius: 10px; background: transparent; cursor: pointer; }.record-filters button.active { color: #171324; background: var(--gold); border-color: var(--gold); }.responsive-table { overflow-x: auto; }.responsive-table table { width: 100%; min-width: 600px; border-collapse: collapse; }.responsive-table th, .responsive-table td { padding: 17px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.065); }.responsive-table th { color: var(--muted); font-size: 11px; font-weight: 500; }.responsive-table td { font-size: 13px; }.amount { color: #86efac; font-family: Orbitron, sans-serif; }.status-tag { display: inline-flex; padding: 4px 9px; color: #86efac; background: rgba(52,211,153,.1); border-radius: 99px; }.status-tag.pending { color: #fde68a; background: rgba(251,191,36,.1); }
.mining-hero { display: grid; grid-template-columns: 1fr auto; align-items: center; }.mining-hero h2 { font-size: clamp(36px, 5vw, 60px); }.mining-hero .button { margin-top: 24px; }.power-display { min-width: 315px; padding-left: 40px; border-left: 1px solid var(--border); }.power-display em { color: #86efac; font-style: normal; }.node-list { display: grid; }.node-list > div { min-height: 65px; display: grid; grid-template-columns: auto 1fr auto 100px; align-items: center; gap: 13px; border-bottom: 1px solid rgba(255,255,255,.06); }.node-pulse { width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 15px #34d399; }.node-list small { color: var(--muted); text-align: right; }
.swap-card { width: min(100%, 580px); margin: 18px auto; padding: 28px; }.swap-field { padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,.025); }.swap-field label { display: block; margin-bottom: 9px; color: var(--muted); font-size: 12px; }.swap-field > div { display: grid; grid-template-columns: 1fr auto; gap: 10px; }.swap-field input { width: 100%; min-width: 0; color: white; border: 0; outline: 0; background: transparent; font: 600 30px Orbitron, sans-serif; }.swap-field button { min-width: 82px; border: 1px solid var(--border); border-radius: 11px; background: var(--card-2); }.swap-field small { color: var(--muted); }.swap-direction { width: 44px; height: 44px; margin: -7px auto; position: relative; z-index: 2; display: block; color: #181426; border: 5px solid var(--card); border-radius: 50%; background: var(--gold); cursor: pointer; }.swap-card > .button { margin-top: 18px; }
.pool-overview { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }.pool-allocation { display: flex; align-items: center; justify-content: center; gap: 34px; }.allocation-ring { background: radial-gradient(circle at center, #1b1a31 56%, transparent 58%), conic-gradient(var(--purple) 0 48%, var(--gold) 48% 80%, var(--cyan) 80%); }.pool-allocation dl { min-width: 190px; }.pool-allocation dl > div { display: flex; justify-content: space-between; padding: 8px 0; }.pool-allocation dt { color: var(--muted); }.pool-allocation dd { margin: 0; }.dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; }.dot.purple { background: var(--purple); }.dot.gold { background: var(--gold); }.dot.cyan { background: var(--cyan); }

.mobile-nav { display: none; }
.modal[hidden], .toast[hidden] { display: none; }.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }.modal-backdrop { position: absolute; inset: 0; background: rgba(3,3,10,.78); backdrop-filter: blur(8px); }.modal-card { position: relative; z-index: 1; width: min(100%, 470px); padding: 30px; border: 1px solid rgba(167,139,250,.35); border-radius: 22px; background: #1b1a31; box-shadow: var(--shadow); }.modal-card h2 { margin: 7px 0 8px; }.modal-card > p:not(.eyebrow) { color: var(--muted); }.modal-close { position: absolute; right: 15px; top: 14px; width: 38px; height: 38px; border: 0; border-radius: 10px; background: rgba(255,255,255,.05); cursor: pointer; font-size: 22px; }.modal-card input { width: 100%; height: 50px; margin-bottom: 14px; padding: 0 14px; color: white; border: 1px solid var(--border); border-radius: 11px; background: rgba(255,255,255,.04); }.toast { position: fixed; z-index: 120; left: 50%; bottom: 28px; min-width: 220px; max-width: calc(100% - 32px); padding: 13px 18px; transform: translateX(-50%); text-align: center; color: #101018; border-radius: 12px; background: #f8fafc; box-shadow: var(--shadow); font-weight: 700; }.toast.error { color: white; background: var(--danger); }

@media (max-width: 1080px) {
    .app-shell { grid-template-columns: 88px minmax(0,1fr); }.sidebar { padding: 24px 14px; }.brand { justify-content: center; margin-left: 0; margin-right: 0; }.brand > span:last-child, .nav-link > span:last-child, .sidebar-note { display: none; }.nav-link { justify-content: center; }.main-content { padding-inline: 24px; }.hero-card { padding: 42px; }.orbit-visual { width: 270px; height: 270px; }.ticket-layout { grid-template-columns: 1fr 315px; }.package-row { grid-template-columns: repeat(2,1fr); }.metrics-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 760px) {
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }.app-shell { display: block; }.sidebar { display: none; }.main-content { padding: 0 15px 30px; }.topbar { min-height: 76px; }.topbar .eyebrow { display: none; }.topbar h1 { font-size: 20px; }.language-button { display: none; }.wallet-button { min-height: 42px; padding: 0 12px; font-size: 12px; }
    .hero-card { min-height: auto; padding: 28px 22px 25px; display: block; border-radius: 22px; }.hero-copy h2 { font-size: 35px; }.hero-copy p { font-size: 14px; }.hero-actions .button { flex: 1; padding: 0 12px; }.orbit-visual { width: 235px; height: 235px; margin: 24px auto -12px; }.orbit-one { inset: 25px; }.orbit-two { inset: 58px; }.core { width: 105px; height: 105px; }.core b { font-size: 24px; }
    .metrics-grid, .metrics-grid.three { grid-template-columns: repeat(2,1fr); gap: 10px; }.metric-card { min-height: 120px; padding: 16px; }.metric-card strong { font-size: 19px; }.content-grid { grid-template-columns: 1fr; gap: 12px; }.panel { padding: 18px; border-radius: 18px; }.package-row { grid-template-columns: repeat(2,1fr); }.mini-package { min-height: 92px; }
    .page-intro { min-height: 145px; padding: 18px 2px 24px; align-items: flex-start; flex-direction: column; }.page-intro h2 { font-size: 36px; }.page-intro p { font-size: 14px; }.balance-chip { width: 100%; }.ticket-layout { display: block; }.package-grid { grid-template-columns: repeat(2,1fr); }.ticket-card { min-height: 190px; padding: 18px; }.ticket-card strong { margin-top: 26px; font-size: 28px; }.ticket-card i { left: 18px; bottom: 16px; }.ticket-number { font-size: 62px; }.checkout-card { position: static; margin-top: 12px; padding: 20px; }
    .profile-hero, .mining-hero, .reward-banner, .pool-overview { margin-top: 5px; padding: 24px 20px; border-radius: 22px; }.profile-hero { grid-template-columns: auto 1fr; }.profile-hero .button { grid-column: 1 / -1; }.avatar { width: 58px; height: 58px; border-radius: 16px; }.profile-hero h2 { font-size: 24px; }.network-level-row { gap: 7px; }.network-level { min-width: 95px; padding: 14px 8px; }.network-level-row::before { left: 48px; right: 48px; }
    .reward-banner { align-items: flex-start; }.reward-banner strong { font-size: 37px; }.reward-ring { width: 94px; height: 94px; }.bar-chart { gap: 9px; padding-inline: 0; }.record-filters { overflow-x: auto; }.record-filters button { flex: 0 0 auto; }.mining-hero { display: block; }.power-display { min-width: 0; margin-top: 28px; padding: 25px 0 0; border: 0; border-top: 1px solid var(--border); }.power-display strong { font-size: 42px; }.node-list > div { grid-template-columns: auto 1fr auto; }.node-list small { display: none; }.swap-card { margin-top: 5px; padding: 18px; }.pool-overview { grid-template-columns: 1fr; gap: 30px; }.pool-overview strong { font-size: 38px; }.pool-allocation { justify-content: flex-start; gap: 20px; }.pool-allocation dl { flex: 1; min-width: 0; }
    .mobile-nav { position: fixed; z-index: 50; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); height: 64px; padding: 5px 8px; display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid var(--border); border-radius: 18px; background: rgba(16,15,31,.92); backdrop-filter: blur(20px); box-shadow: 0 15px 35px rgba(0,0,0,.5); }.mobile-nav a { min-width: 0; display: grid; place-content: center; justify-items: center; color: var(--muted); border-radius: 13px; }.mobile-nav a.active { color: #151323; background: var(--gold); }.mobile-nav span { font: 700 8px Orbitron, sans-serif; }.mobile-nav small { margin-top: 2px; font-size: 10px; }
    .modal-card { padding: 26px 20px; }
}

@media (max-width: 390px) {
    .metrics-grid, .metrics-grid.three { grid-template-columns: 1fr; }.package-grid { grid-template-columns: 1fr; }.ticket-card { min-height: 180px; }.reward-ring { display: none; }.network-level { min-width: 86px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Front-end mobile-first shell: the admin keeps its desktop sidebar. */
.frontend-body { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
.frontend-body .app-shell { display: block; min-height: 100vh; }
.frontend-body .main-content { width: min(100%, 720px); max-width: 720px; margin: 0 auto; padding: 0 16px 38px; }
.frontend-body .topbar { min-height: 76px; padding-top: env(safe-area-inset-top); }
.frontend-body .topbar .eyebrow,
.frontend-body .language-button { display: none; }
.frontend-body .topbar h1 { font-size: 21px; }
.frontend-body .wallet-button { min-height: 44px; padding: 0 13px; }
.frontend-body .wallet-button.wrong-network .wallet-light { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.frontend-body .web3-status { min-height: 76px; margin: 2px 0 12px; padding: 13px 14px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; border: 1px solid rgba(167,139,250,.24); border-radius: 18px; background: linear-gradient(135deg, rgba(139,92,246,.13), rgba(30,29,53,.76)); }
.frontend-body .web3-status.connected { border-color: rgba(52,211,153,.3); background: linear-gradient(135deg, rgba(52,211,153,.1), rgba(30,29,53,.76)); }
.frontend-body .web3-status.warning { border-color: rgba(251,191,36,.34); background: linear-gradient(135deg, rgba(251,191,36,.1), rgba(30,29,53,.76)); }
.frontend-body .web3-status-icon { width: 42px; height: 42px; display: grid; place-items: center; color: #c4b5fd; border-radius: 13px; background: rgba(139,92,246,.17); }
.frontend-body .web3-status.connected .web3-status-icon { color: #6ee7b7; background: rgba(52,211,153,.12); }
.frontend-body .web3-status-icon i { font-size: 23px; }
.frontend-body .web3-status-copy { min-width: 0; display: flex; flex-direction: column; }
.frontend-body .web3-status-copy small { color: #a78bfa; font: 700 9px Orbitron, sans-serif; letter-spacing: .09em; }
.frontend-body .web3-status-copy strong { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.frontend-body .web3-status-copy span { margin-top: 2px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.frontend-body .web3-status > button { min-width: 64px; min-height: 44px; padding: 0 12px; color: #171422; border: 0; border-radius: 12px; background: var(--gold); cursor: pointer; font-weight: 800; transition: filter .18s ease, opacity .18s ease; }
.frontend-body .web3-status > button:hover { filter: brightness(1.08); }
.frontend-body .web3-status > button:disabled, .button:disabled { cursor: wait; opacity: .65; }
.wallet-connect-card { text-align: center; }
.wallet-brand-icon { width: 58px; height: 58px; margin: 0 auto 15px; display: grid; place-items: center; color: #171422; border-radius: 18px; background: linear-gradient(135deg, var(--gold), #fde68a); box-shadow: 0 12px 30px rgba(251,191,36,.18); }
.wallet-brand-icon i { font-size: 29px; }
.wallet-connect-card .network-summary { min-height: 58px; margin: 20px 0 14px; padding: 10px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.035); text-align: left; }
.wallet-connect-card .network-summary span { display: flex; align-items: center; font-weight: 700; }
.wallet-connect-card .network-summary b { color: var(--muted); font-size: 11px; }
.wallet-connect-action { gap: 8px; }
.wallet-connect-action i { font-size: 20px; }
.wallet-install-link { min-height: 44px; margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; color: #c4b5fd; font-size: 12px; }
.wallet-error { margin: 8px 0 0 !important; padding: 10px 12px; color: #fecaca !important; border: 1px solid rgba(239,68,68,.25); border-radius: 11px; background: rgba(239,68,68,.08); font-size: 12px; text-align: left; }
.member-level-panel { margin-top: 12px; }
.member-level-panel .panel-heading p:not(.eyebrow) { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.member-level-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.member-level-list > div { min-height: 68px; padding: 11px 12px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.025); }
.member-level-list > div.active { border-color: rgba(251,191,36,.55); background: rgba(251,191,36,.09); box-shadow: inset 3px 0 0 var(--gold); }
.member-level-list b { color: #c4b5fd; font: 700 14px Orbitron, sans-serif; }
.member-level-list span { color: var(--muted); font-size: 11px; }
.member-level-list strong { color: var(--gold); font: 700 15px Orbitron, sans-serif; }
.frontend-body .hero-card { min-height: auto; padding: 30px 24px 22px; display: block; border-radius: 24px; }
.frontend-body .hero-copy h2 { font-size: clamp(34px, 8vw, 48px); }
.frontend-body .orbit-visual { width: min(290px, 82vw); height: min(290px, 82vw); margin: 25px auto -4px; }
.frontend-body .metrics-grid,
.frontend-body .metrics-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.frontend-body .metric-card { min-height: 122px; padding: 17px; }
.frontend-body .metric-card strong { font-size: clamp(18px, 5vw, 23px); }
.frontend-body .content-grid,
.frontend-body .ticket-layout,
.frontend-body .pool-overview,
.frontend-body .settings-grid { grid-template-columns: 1fr; }
.frontend-body .package-row,
.frontend-body .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.frontend-body .checkout-card { position: static; margin-top: 12px; }
.frontend-body .page-intro { min-height: 145px; padding: 18px 2px 24px; align-items: flex-start; flex-direction: column; }
.frontend-body .profile-hero { grid-template-columns: auto 1fr; }
.frontend-body .profile-hero .button { grid-column: 1 / -1; }
.frontend-body .mining-hero { grid-template-columns: 1fr; }
.frontend-body .power-display { min-width: 0; margin-top: 26px; padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--border); }
.frontend-body .pool-overview { gap: 28px; }
.frontend-body .mobile-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 12px; }
.frontend-body .mobile-shortcuts a { min-height: 88px; padding: 16px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--border); border-radius: 17px; background: linear-gradient(145deg, rgba(34,33,58,.92), rgba(20,19,38,.92)); transition: border-color .18s ease, background .18s ease; }
.frontend-body .mobile-shortcuts a:hover { border-color: var(--purple-soft); background: rgba(139,92,246,.12); }
.frontend-body .mobile-shortcuts b { font-size: 15px; }
.frontend-body .mobile-shortcuts small { margin-top: 4px; color: var(--muted); }
.frontend-body .mobile-nav { position: fixed; z-index: 50; left: 50%; right: auto; bottom: calc(8px + env(safe-area-inset-bottom)); width: min(calc(100% - 20px), 700px); height: 66px; padding: 7px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); transform: translateX(-50%); border: 1px solid var(--border); border-radius: 19px; background: rgba(16,15,31,.94); backdrop-filter: blur(20px); box-shadow: 0 18px 42px rgba(0,0,0,.5); }
.frontend-body .mobile-nav a { min-width: 0; min-height: 50px; padding: 5px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #aaa9bd; border-radius: 13px; font-size: 14px; font-weight: 700; transition: color .18s ease, background .18s ease; }
.frontend-body .mobile-nav a.active { color: #151323; background: linear-gradient(135deg, var(--gold), #fde68a); box-shadow: 0 8px 18px rgba(251,191,36,.18); }
.frontend-body .mobile-nav a i { display: block; font-size: 21px; line-height: 1; }
.frontend-body .mobile-nav a span { font: 700 11px 'Segoe UI', 'Microsoft YaHei', sans-serif; line-height: 1.2; white-space: nowrap; }

@media (max-width: 430px) {
    .frontend-body .main-content { padding-inline: 13px; }
    .frontend-body .hero-card { padding-inline: 21px; }
    .frontend-body .hero-copy h2 { font-size: 34px; }
    .frontend-body .metrics-grid,
    .frontend-body .metrics-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .frontend-body .metric-card { min-height: 112px; padding: 14px; }
    .frontend-body .metric-card > span { font-size: 12px; }
    .frontend-body .metric-card strong { font-size: 18px; }
    .frontend-body .package-grid { grid-template-columns: 1fr; }
    .frontend-body .mobile-nav a span { font-size: 11px; }
    .frontend-body .mobile-nav a i { font-size: 20px; }
    .frontend-body .web3-status { grid-template-columns: 38px minmax(0, 1fr) auto; padding-inline: 11px; gap: 9px; }
    .frontend-body .web3-status-icon { width: 38px; height: 38px; }
    .frontend-body .web3-status-copy span { max-width: 190px; }
    .member-level-list { grid-template-columns: 1fr; }
}

/* WOKB operational screens */
.top-brand { margin: 0 14px 0 5px; font-size: 20px; min-width: 0; }
.top-brand > span:last-child { display: block; overflow-wrap: anywhere; letter-spacing: .04em; }
.top-brand .brand-mark { width: 28px; height: 28px; flex: 0 0 28px; }
.notice { padding: 13px 16px; margin: 12px 0; border: 1px solid var(--border); border-radius: 12px; color: var(--gold); background: rgba(251,191,36,.05); font-size: 13px; }
.flow-panel { margin-top: 24px; }
.flow-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 25px; padding-left: 22px; }
.flow-steps b,.flow-steps span { display: block; }.flow-steps span { color: var(--muted); margin-top: 8px; font-size: 13px; }
.order-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,290px),1fr)); gap: 18px; }
.order-card { padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--card); min-width: 0; }
.order-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.order-heading b { font-size: 14px; }
.order-card h3 { font-size: 25px; margin: 22px 0; overflow-wrap: anywhere; }.order-card h3 small { color: var(--muted); font-size: 13px; }
.order-card p,.muted { color: var(--muted); }.order-card .detail-list { font-size: 13px; }.order-card .detail-list b { text-align: right; overflow-wrap: anywhere; }
.order-card .countdown { color: var(--gold); font-variant-numeric: tabular-nums; font-size: 15px; }
progress { width: 100%; height: 6px; border: 0; border-radius: 6px; accent-color: var(--purple-soft); }
progress::-webkit-progress-bar { background: var(--card-2); border-radius: 6px; }progress::-webkit-progress-value { background: var(--purple-soft); border-radius: 6px; }
button:disabled { opacity: .45; cursor: not-allowed; transform: none !important; filter: none !important; }
.empty-state { text-align: center; padding: 46px 20px; border: 1px dashed var(--border); border-radius: 18px; margin: 18px 0; }.empty-state b { font-size: 18px; }.empty-state p { color: var(--muted); font-size: 14px; }
.section-links { display: flex; flex-wrap: wrap; gap: 18px; padding: 18px 0; color: var(--gold); font-size: 14px; }.section-links a { padding: 8px 0; }
.payment-row { padding: 18px 0; border-bottom: 1px solid var(--border); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: space-between; }.payment-row small { display: block; color: var(--muted); margin-top: 5px; }
.recover-payment { width: 100%; display: flex; gap: 10px; }.recover-payment input { min-width: 0; flex: 1; padding: 10px; border-radius: 9px; color: var(--text); background: var(--bg); border: 1px solid var(--border); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.swap-arrow { text-align: center; padding: 12px; font-size: 24px; color: var(--purple-soft); }.swap-field > div > span { color: var(--gold); padding: 12px; }
.address-text { overflow-wrap: anywhere; font-family: monospace; }.metric-card strong,.reward-banner strong { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media(max-width:760px) { .flow-steps { grid-template-columns: 1fr 1fr; }.order-card { padding: 18px; }.reward-banner { align-items: flex-start; gap: 18px; flex-direction: column; }.recover-payment { flex-direction: column; }.flow-panel { margin-top: 18px; } }
@media(max-width:420px) { .frontend-body .package-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.top-brand { font-size: 18px; }.top-brand .brand-mark { width: 24px; height: 24px; flex-basis: 24px; }.ticket-card { padding: 16px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }