@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&display=swap');

:root {
  --bg: #090a0f;
  --bg-soft: #0d0f17;
  --surface: #151722;
  --surface-2: #1e2130;
  --surface-3: #272a3b;
  --line: rgba(255, 255, 255, 0.085);
  --line-bright: rgba(245, 185, 66, 0.23);
  --text: #f8fafc;
  --muted: #94a3b8;
  --muted-2: #6f7890;
  --purple: #7c3aed;
  --purple-2: #a855f7;
  --purple-dark: #4c1d95;
  --gold: #f5b942;
  --gold-soft: #fde68a;
  --green: #22c55e;
  --red: #ef4444;
  --orange: #f97316;
  --blue: #38bdf8;
  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 32px;
  --shadow: 0 26px 80px rgba(0, 0, 0, 0.35);
  --glow: 0 18px 55px rgba(124, 58, 237, 0.24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 8% 5%, rgba(124, 58, 237, 0.17), transparent 31rem),
    radial-gradient(circle at 96% 92%, rgba(245, 185, 66, 0.08), transparent 34rem),
    var(--bg);
  font: 500 15px/1.65 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
  z-index: -1;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-family: 'Sora', sans-serif; line-height: 1.16; letter-spacing: -.035em; }
p { color: var(--muted); }

.ambient { position: fixed; width: 28rem; height: 28rem; border-radius: 50%; filter: blur(90px); opacity: .14; pointer-events: none; z-index: -1; }
.ambient-one { top: -13rem; left: 18%; background: var(--purple-2); animation: drift 12s ease-in-out infinite; }
.ambient-two { right: -15rem; bottom: -10rem; background: var(--gold); animation: drift 15s ease-in-out infinite reverse; }
@keyframes drift { 50% { transform: translate3d(2.5rem, 2rem, 0) scale(1.08); } }

[data-reveal] { opacity: 1; transform: none; }
.js-ready [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1); }
.js-ready [data-reveal].is-visible { opacity: 1; transform: none; }

.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { position: relative; width: 46px; height: 46px; flex: 0 0 46px; filter: drop-shadow(0 12px 20px rgba(124,58,237,.25)); }
.brand-copy strong { display: block; font: 800 19px/1 'Sora', sans-serif; letter-spacing: -.055em; }
.brand-copy strong span { color: var(--gold); }
.brand-copy small { display: block; margin-top: 6px; color: var(--muted-2); font-size: 9px; line-height: 1; letter-spacing: .2em; text-transform: uppercase; }

.app-shell { width: min(100%, 1600px); min-height: 100vh; margin: 0 auto; display: grid; grid-template-columns: 278px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px; border-right: 1px solid var(--line); background: rgba(9,10,15,.78); backdrop-filter: blur(22px); z-index: 20; }
.sidebar-inner { height: 100%; display: flex; flex-direction: column; }
.sidebar .brand { padding: 0 10px; margin-bottom: 30px; }
.nav-label { margin: 0 12px 10px; color: var(--muted-2); font-size: 10px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.side-nav { display: grid; gap: 7px; }
.nav-link { position: relative; display: flex; align-items: center; gap: 13px; min-height: 50px; padding: 0 14px; overflow: hidden; border: 1px solid transparent; border-radius: 16px; color: var(--muted); font-weight: 700; transition: .25s ease; }
.nav-link::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent, rgba(255,255,255,.06), transparent); transform: translateX(-120%); transition: transform .5s ease; }
.nav-link:hover::after { transform: translateX(120%); }
.nav-link:hover { color: var(--text); background: rgba(255,255,255,.035); border-color: var(--line); transform: translateX(2px); }
.nav-link.active { color: #fff; border-color: rgba(168,85,247,.32); background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(124,58,237,.08)); box-shadow: inset 3px 0 0 var(--gold); }
.nav-icon { width: 21px; height: 21px; flex: 0 0 21px; color: currentColor; }
.nav-link.active .nav-icon { color: var(--gold-soft); animation: iconPulse 2.5s ease-in-out infinite; }
@keyframes iconPulse { 50% { filter: drop-shadow(0 0 7px rgba(245,185,66,.55)); transform: translateY(-1px); } }

.sidebar-account { margin-top: auto; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); }
.account-row { display: flex; align-items: center; gap: 10px; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border: 1px solid rgba(245,185,66,.3); border-radius: 13px; color: var(--gold-soft); background: linear-gradient(135deg, rgba(124,58,237,.5), rgba(76,29,149,.5)); font: 800 14px 'Sora',sans-serif; }
.account-copy { min-width: 0; }
.account-copy strong, .account-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { font-size: 13px; }
.account-copy small { color: var(--muted-2); font-size: 10px; }
.mini-balance { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; }
.mini-balance strong { color: var(--gold-soft); font-size: 12px; }

.app-main { min-width: 0; padding: 22px clamp(18px, 3vw, 44px) 48px; }
.topbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.topbar-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(34,197,94,.1); animation: live 2s ease-out infinite; }
@keyframes live { 50% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } }
.top-actions { display: flex; align-items: center; gap: 10px; }
.icon-button { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); background: rgba(255,255,255,.025); transition: .2s; }
.icon-button:hover { color: var(--gold-soft); border-color: var(--line-bright); transform: translateY(-2px); }
.icon-button svg { width: 19px; }
.mobile-brand { display: none; }

.page-wrap { width: 100%; max-width: 1260px; margin: 0 auto; }
.page-hero { position: relative; min-height: 210px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; overflow: hidden; margin-bottom: 22px; padding: clamp(25px,4vw,44px); border: 1px solid rgba(168,85,247,.18); border-radius: var(--radius-lg); background: linear-gradient(125deg, rgba(76,29,149,.62), rgba(30,33,48,.88) 52%, rgba(245,185,66,.08)); box-shadow: var(--shadow); }
.page-hero::before { content: ''; position: absolute; width: 230px; height: 230px; right: -45px; top: -78px; border: 1px solid rgba(245,185,66,.22); border-radius: 50%; box-shadow: 0 0 0 28px rgba(245,185,66,.035), 0 0 0 58px rgba(124,58,237,.035); animation: orbit 12s linear infinite; }
.page-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 20%, rgba(255,255,255,.045) 49%, transparent 68%); transform: translateX(-100%); animation: sheen 7s ease-in-out infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes sheen { 45%,100% { transform: translateX(100%); } }
.hero-copy { position: relative; z-index: 2; max-width: 710px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--gold-soft); font-size: 10px; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--gold); }
.page-hero h1 { margin-bottom: 12px; max-width: 700px; font-size: clamp(30px, 4vw, 52px); }
.page-hero p { max-width: 650px; margin-bottom: 0; font-size: clamp(13px,1.4vw,16px); }
.hero-badge { position: relative; z-index: 2; min-width: 150px; padding: 17px; border: 1px solid var(--line-bright); border-radius: 19px; background: rgba(9,10,15,.4); backdrop-filter: blur(10px); }
.hero-badge small, .hero-badge strong { display: block; }
.hero-badge small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.hero-badge strong { margin-top: 5px; color: var(--gold-soft); font: 700 17px 'Sora',sans-serif; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 22px; }
.stat-card { position: relative; min-width: 0; overflow: hidden; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(30,33,48,.94), rgba(21,23,34,.9)); box-shadow: 0 12px 35px rgba(0,0,0,.16); transition: .25s ease; }
.stat-card:hover { border-color: rgba(168,85,247,.28); transform: translateY(-3px); }
.stat-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 18px; }
.stat-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(168,85,247,.22); border-radius: 13px; color: #c4b5fd; background: rgba(124,58,237,.12); }
.stat-icon.gold { color: var(--gold-soft); border-color: rgba(245,185,66,.22); background: rgba(245,185,66,.08); }
.stat-icon.green { color: #86efac; border-color: rgba(34,197,94,.2); background: rgba(34,197,94,.08); }
.stat-icon svg { width: 20px; animation: softFloat 3.5s ease-in-out infinite; }
@keyframes softFloat { 50% { transform: translateY(-2px) rotate(2deg); } }
.stat-card small { color: var(--muted); font-size: 11px; font-weight: 700; }
.stat-card strong { display: block; overflow-wrap: anywhere; font: 700 clamp(20px,2.3vw,29px) 'Sora',sans-serif; }
.stat-card p { margin: 7px 0 0; font-size: 11px; }

.content-grid { display: grid; grid-template-columns: minmax(0,1.42fr) minmax(280px,.78fr); gap: 20px; align-items: start; }
.content-grid.equal { grid-template-columns: repeat(2,minmax(0,1fr)); }
.content-grid.single { grid-template-columns: minmax(0,1fr); }
.panel { min-width: 0; padding: clamp(20px,3vw,30px); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(21,23,34,.86); box-shadow: 0 14px 45px rgba(0,0,0,.17); backdrop-filter: blur(18px); }
.panel + .panel { margin-top: 18px; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.panel-header h2 { margin-bottom: 7px; font-size: clamp(19px,2.2vw,25px); }
.panel-header p { margin: 0; font-size: 12px; }
.panel-icon { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 46px; border: 1px solid var(--line-bright); border-radius: 15px; color: var(--gold-soft); background: rgba(245,185,66,.07); }
.panel-icon svg { width: 22px; }

.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }
.field { min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; margin: 0 0 8px 2px; color: #dce2ee; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.input-wrap { position: relative; }
.input-icon { position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; color: var(--muted-2); transform: translateY(-50%); pointer-events: none; }
.input-icon.textarea { top: 17px; transform: none; }
input, select, textarea { width: 100%; outline: none; border: 1px solid var(--line); border-radius: 15px; color: var(--text); background: rgba(9,10,15,.55); transition: border-color .2s, box-shadow .2s, background .2s; }
input, select { height: 52px; padding: 0 15px; }
.has-icon input, .has-icon select { padding-left: 46px; }
textarea { min-height: 132px; resize: vertical; padding: 14px 15px; }
.has-icon textarea { padding-left: 46px; }
input::placeholder, textarea::placeholder { color: #596176; }
input:focus, select:focus, textarea:focus { border-color: rgba(168,85,247,.62); background: rgba(15,17,26,.92); box-shadow: 0 0 0 4px rgba(124,58,237,.12); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 23px, calc(100% - 15px) 23px; background-size: 5px 5px; background-repeat: no-repeat; }
select option { background: var(--surface); color: var(--text); }
.field-hint { display: block; margin: 7px 2px 0; color: var(--muted-2); font-size: 10px; }
.password-toggle { position: absolute; right: 8px; top: 7px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 11px; color: var(--muted); background: transparent; cursor: pointer; }
.password-toggle:hover { color: var(--gold-soft); background: rgba(255,255,255,.04); }
.password-toggle svg { width: 18px; }

.file-picker { position: relative; min-height: 126px; display: grid; place-items: center; padding: 18px; border: 1px dashed rgba(168,85,247,.36); border-radius: 18px; text-align: center; background: rgba(124,58,237,.055); cursor: pointer; transition: .22s; }
.file-picker:hover { border-color: var(--gold); background: rgba(245,185,66,.05); transform: translateY(-2px); }
.file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-picker svg { width: 27px; margin: 0 auto 8px; color: var(--gold-soft); }
.file-picker strong { display: block; font-size: 12px; }
.file-picker small { display: block; margin-top: 4px; color: var(--muted-2); font-size: 10px; }
.file-name { max-width: 100%; margin-top: 8px; overflow: hidden; color: #c4b5fd; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }

.button-row { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 20px; }
.btn { position: relative; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; padding: 0 19px; border: 1px solid transparent; border-radius: 15px; color: #fff; font-weight: 800; cursor: pointer; transition: .23s ease; }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent, rgba(255,255,255,.18), transparent); transform: translateX(-120%); transition: transform .55s; }
.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 19px; flex: 0 0 19px; }
.btn-primary { background: linear-gradient(135deg, var(--purple), #9333ea); box-shadow: 0 12px 30px rgba(124,58,237,.28); }
.btn-gold { color: #211404; background: linear-gradient(135deg, #fde68a, var(--gold)); box-shadow: 0 12px 30px rgba(245,185,66,.19); }
.btn-ghost { border-color: var(--line); color: var(--muted); background: rgba(255,255,255,.025); }
.btn-danger { background: linear-gradient(135deg,#ef4444,#b91c1c); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::before { content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.alert { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 18px; padding: 14px 15px; border: 1px solid; border-radius: 15px; font-size: 12px; }
.alert svg { width: 19px; flex: 0 0 19px; margin-top: 1px; }
.alert-error { color: #fecaca; border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.09); }
.alert-success { color: #bbf7d0; border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.09); }
.alert-warning { color: #fde68a; border-color: rgba(245,185,66,.25); background: rgba(245,185,66,.07); }

.info-stack { display: grid; gap: 12px; }
.info-item { display: flex; align-items: flex-start; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.018); }
.info-icon { width: 37px; height: 37px; display: grid; place-items: center; flex: 0 0 37px; border-radius: 12px; color: #c4b5fd; background: rgba(124,58,237,.13); }
.info-icon svg { width: 18px; }
.info-item strong { display: block; font-size: 12px; }
.info-item p { margin: 3px 0 0; font-size: 10px; line-height: 1.55; }
.notice { padding: 16px; border: 1px solid var(--line-bright); border-radius: 17px; background: linear-gradient(135deg, rgba(245,185,66,.08), rgba(124,58,237,.06)); }
.notice strong { display: block; margin-bottom: 5px; color: var(--gold-soft); font-size: 12px; }
.notice p { margin: 0; font-size: 10px; }

.package-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.package-card { position: relative; display: block; cursor: pointer; }
.package-card input { position: absolute; opacity: 0; pointer-events: none; }
.package-face { min-height: 105px; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.022); transition: .22s; }
.package-card:hover .package-face, .package-card input:checked + .package-face, .package-card.is-selected .package-face { border-color: rgba(245,185,66,.45); background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(245,185,66,.06)); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.17); }
.package-face small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.package-face strong { font: 700 18px 'Sora',sans-serif; }
.package-face span { color: var(--gold-soft); font-size: 10px; }

.action-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.action-card { min-height: 142px; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; border: 1px solid var(--line); border-radius: 19px; background: linear-gradient(145deg, rgba(30,33,48,.74), rgba(21,23,34,.75)); transition: .25s; }
.action-card:hover { border-color: rgba(168,85,247,.32); transform: translateY(-4px); box-shadow: var(--glow); }
.action-card .panel-icon { width: 40px; height: 40px; flex-basis: 40px; }
.action-card h3 { margin: 16px 0 5px; font-size: 14px; }
.action-card p { margin: 0; font-size: 10px; }

.list { display: grid; gap: 11px; }
.transaction { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.018); transition: .2s; }
.transaction:hover { border-color: rgba(168,85,247,.25); background: rgba(255,255,255,.03); }
.transaction-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #86efac; background: rgba(34,197,94,.09); }
.transaction-icon.debit { color: #fca5a5; background: rgba(239,68,68,.09); }
.transaction-icon svg { width: 19px; }
.transaction-copy { min-width: 0; }
.transaction-copy strong, .transaction-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transaction-copy strong { font-size: 12px; }
.transaction-copy span { color: var(--muted-2); font-size: 9px; }
.transaction-value { text-align: right; }
.transaction-value strong { display: block; font-size: 12px; }
.status { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 4px 7px; border-radius: 99px; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status.approved, .status.successful { color: #86efac; background: rgba(34,197,94,.09); }
.status.pending, .status.open { color: #fde68a; background: rgba(245,185,66,.09); }
.status.rejected, .status.failed, .status.closed { color: #fca5a5; background: rgba(239,68,68,.09); }
.status.answered { color: #c4b5fd; background: rgba(124,58,237,.12); }

.ticket { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.018); }
.ticket-head { display: flex; justify-content: space-between; gap: 14px; padding: 17px; border-bottom: 1px solid var(--line); }
.ticket-head h3 { margin: 0 0 4px; font-size: 14px; }
.ticket-head p { margin: 0; font-size: 9px; }
.ticket-body { padding: 17px; }
.ticket-message { margin: 0 0 14px; color: #d6dbe7; font-size: 11px; white-space: pre-line; }
.reply { margin-top: 10px; padding: 12px; border-radius: 14px; background: rgba(124,58,237,.07); }
.reply.admin { border-left: 2px solid var(--gold); background: rgba(245,185,66,.06); }
.reply-head { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.reply p { margin: 6px 0 0; color: #d7dbea; font-size: 10px; white-space: pre-line; }
.reply-form { display: flex; gap: 8px; margin-top: 13px; }
.reply-form textarea { min-height: 48px; height: 48px; padding: 12px; }
.reply-form .btn { min-height: 48px; flex: 0 0 auto; }

.timeline { display: grid; gap: 0; }
.step { position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 15px; padding-bottom: 26px; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ''; position: absolute; left: 23px; top: 46px; bottom: 0; width: 1px; background: linear-gradient(var(--purple), rgba(124,58,237,.1)); }
.step:last-child::before { display: none; }
.step-number { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(168,85,247,.3); border-radius: 16px; color: var(--gold-soft); background: rgba(124,58,237,.13); font: 800 14px 'Sora',sans-serif; }
.step h3 { margin: 3px 0 6px; font-size: 14px; }
.step p { margin: 0; font-size: 11px; }

.empty-state { padding: 36px 20px; text-align: center; border: 1px dashed var(--line); border-radius: 19px; }
.empty-state .panel-icon { margin: 0 auto 14px; }
.empty-state h3 { margin-bottom: 6px; font-size: 15px; }
.empty-state p { max-width: 390px; margin: 0 auto; font-size: 11px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; background: rgba(3,4,8,.78); backdrop-filter: blur(10px); transition: .25s; }
.modal-backdrop.is-open { opacity: 1; visibility: visible; }
.modal-card { width: min(100%, 430px); padding: 28px; border: 1px solid rgba(168,85,247,.28); border-radius: 26px; background: linear-gradient(145deg,var(--surface-2),var(--surface)); box-shadow: var(--shadow); transform: translateY(18px) scale(.97); transition: .3s; text-align: center; }
.modal-backdrop.is-open .modal-card { transform: none; }
.success-orb { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto 18px; border: 1px solid rgba(34,197,94,.3); border-radius: 24px; color: #86efac; background: rgba(34,197,94,.1); animation: success 2.4s ease-in-out infinite; }
.success-orb svg { width: 32px; }
@keyframes success { 50% { box-shadow: 0 0 0 12px rgba(34,197,94,0); transform: scale(1.04); } }
.modal-card h2 { margin-bottom: 8px; }
.modal-card p { font-size: 12px; }

.mobile-nav { display: none; }

/* Authentication */
.auth-body { min-height: 100vh; display: grid; place-items: center; padding: 22px; }
.auth-shell { width: min(1120px,100%); min-height: 690px; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(390px,.92fr); overflow: hidden; border: 1px solid var(--line); border-radius: 34px; background: rgba(21,23,34,.83); box-shadow: 0 35px 110px rgba(0,0,0,.48); backdrop-filter: blur(22px); }
.auth-story { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(30px,5vw,58px); background: linear-gradient(145deg, rgba(76,29,149,.82), rgba(15,17,26,.95) 64%, rgba(245,185,66,.12)); }
.auth-story::before { content: ''; position: absolute; width: 340px; height: 340px; right: -110px; top: 14%; border: 1px solid rgba(245,185,66,.22); border-radius: 50%; box-shadow: 0 0 0 45px rgba(245,185,66,.025),0 0 0 92px rgba(124,58,237,.04); animation: orbit 18s linear infinite; }
.auth-story::after { content: ''; position: absolute; inset: 0; opacity: .3; background-image: radial-gradient(rgba(255,255,255,.28) 1px,transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(135deg,#000,transparent 72%); }
.auth-story > * { position: relative; z-index: 2; }
.story-copy { max-width: 560px; }
.story-copy h1 { margin-bottom: 18px; font-size: clamp(36px,5vw,64px); }
.story-copy h1 span { color: var(--gold-soft); }
.story-copy p { max-width: 490px; color: #c4c9d6; font-size: 14px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px; }
.trust-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 99px; color: #d7dbea; background: rgba(9,10,15,.24); font-size: 9px; font-weight: 800; }
.trust-chip svg { width: 14px; color: var(--gold-soft); }
.auth-form-side { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px,5vw,58px); background: rgba(9,10,15,.31); }
.auth-mobile-brand { display: none; margin-bottom: 28px; }
.auth-head { margin-bottom: 25px; }
.auth-head h2 { margin-bottom: 9px; font-size: 30px; }
.auth-head p { margin: 0; font-size: 12px; }
.auth-form { display: grid; gap: 15px; }
.auth-switch { margin: 23px 0 0; color: var(--muted); text-align: center; font-size: 11px; }
.auth-switch a { color: var(--gold-soft); font-weight: 800; }
.auth-switch a:hover { text-decoration: underline; }
.auth-footer { margin-top: 22px; color: var(--muted-2); text-align: center; font-size: 9px; }

/* Public landing */
.landing { min-height: 100vh; }
.landing-nav { width: min(1180px,calc(100% - 36px)); min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 auto; }
.landing-links { display: flex; align-items: center; gap: 9px; }
.landing-hero { width: min(1180px,calc(100% - 36px)); min-height: calc(100vh - 120px); display: grid; grid-template-columns: minmax(0,1.1fr) minmax(360px,.9fr); align-items: center; gap: clamp(35px,7vw,90px); margin: 0 auto; padding: 55px 0 90px; }
.landing-copy h1 { max-width: 750px; margin-bottom: 22px; font-size: clamp(45px,7.2vw,88px); }
.landing-copy h1 span { display: block; color: var(--gold-soft); }
.landing-copy p { max-width: 620px; font-size: clamp(14px,1.5vw,17px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 36px; }
.proof { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; font-weight: 700; }
.proof svg { width: 17px; color: var(--gold-soft); }
.token-stage { position: relative; min-height: 500px; display: grid; place-items: center; }
.token-stage::before { content: ''; position: absolute; width: 390px; height: 390px; border: 1px solid rgba(168,85,247,.16); border-radius: 50%; box-shadow: 0 0 0 48px rgba(124,58,237,.025), 0 0 0 95px rgba(245,185,66,.018); animation: orbit 20s linear infinite; }
.stage-logo { width: clamp(180px,24vw,265px); filter: drop-shadow(0 35px 45px rgba(0,0,0,.45)); animation: stageFloat 5s ease-in-out infinite; z-index: 2; }
@keyframes stageFloat { 50% { transform: translateY(-13px) rotate(2deg); } }
.float-card { position: absolute; z-index: 3; min-width: 150px; padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: rgba(21,23,34,.82); box-shadow: var(--shadow); backdrop-filter: blur(12px); animation: floatCard 5.5s ease-in-out infinite; }
.float-card.one { left: 0; top: 21%; }
.float-card.two { right: 0; bottom: 19%; animation-delay: -2s; }
@keyframes floatCard { 50% { transform: translateY(-9px); } }
.float-card small, .float-card strong { display: block; }
.float-card small { color: var(--muted); font-size: 9px; }
.float-card strong { margin-top: 4px; font: 700 14px 'Sora',sans-serif; }

/* Live approved-withdrawal notification */
.withdrawal-toast-region {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 140;
  width: min(400px, calc(100vw - 32px));
  pointer-events: none;
}
.withdrawal-toast {
  --withdrawal-visible-for: 5000ms;
  position: relative;
  width: 100%;
  min-height: 112px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  padding: 17px 17px 18px;
  border: 1px solid rgba(245, 185, 66, .28);
  border-radius: 22px;
  opacity: 0;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(35, 27, 54, .97), rgba(14, 16, 25, .98) 62%),
    var(--surface);
  box-shadow: 0 26px 75px rgba(0, 0, 0, .48), 0 0 0 1px rgba(124, 58, 237, .08);
  backdrop-filter: blur(24px);
  transform: translate3d(0, calc(-100% - 34px), 0) scale(.97);
  transform-origin: top right;
  transition: opacity .38s ease, transform .48s cubic-bezier(.16, 1, .3, 1);
  will-change: transform, opacity;
}
.withdrawal-toast[hidden] { display: none; }
.withdrawal-toast::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .075) 48%, transparent 72%);
  transform: translateX(-110%);
}
.withdrawal-toast.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.withdrawal-toast.is-visible::before { animation: withdrawalSheen 2.2s .3s ease forwards; }
.withdrawal-toast.is-leaving {
  opacity: 0;
  transform: translate3d(0, calc(-100% - 34px), 0) scale(.98);
}
.withdrawal-toast-aura {
  position: absolute;
  width: 115px;
  height: 115px;
  left: -35px;
  top: -48px;
  border-radius: 50%;
  background: rgba(124, 58, 237, .28);
  filter: blur(30px);
  animation: withdrawalAura 3.8s ease-in-out infinite;
}
.withdrawal-toast-icon {
  position: relative;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245, 185, 66, .28);
  border-radius: 18px;
  color: var(--gold-soft);
  background: linear-gradient(145deg, rgba(245, 185, 66, .14), rgba(124, 58, 237, .14));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 28px rgba(0, 0, 0, .2);
}
.withdrawal-toast-icon::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(245, 185, 66, .12);
  border-radius: 12px;
  animation: withdrawalRing 2.6s ease-in-out infinite;
}
.withdrawal-toast-icon svg {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  animation: withdrawalArrow 1.7s ease-in-out infinite;
}
.withdrawal-toast-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: block;
}
.withdrawal-toast-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  color: #bbf7d0;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.withdrawal-toast-kicker i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(34, 197, 94, .1);
  animation: live 2s ease-out infinite;
}
.withdrawal-toast-copy strong {
  display: block;
  overflow: hidden;
  color: #e8eaf1;
  font: 700 12px/1.4 'Manrope', sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.withdrawal-toast-copy strong span { color: #fff; }
.withdrawal-toast-amount {
  display: block;
  margin-top: 2px;
  color: var(--gold-soft);
  font: 800 19px/1.25 'Sora', sans-serif;
  letter-spacing: -.035em;
}
.withdrawal-toast-check {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(34, 197, 94, .22);
  border-radius: 10px;
  color: #86efac;
  background: rgba(34, 197, 94, .09);
}
.withdrawal-toast-check svg { width: 17px; height: 17px; }
.withdrawal-toast-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
}
.withdrawal-toast-progress::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--purple-2), var(--gold));
  transform-origin: left center;
}
.withdrawal-toast.is-visible .withdrawal-toast-progress::after {
  animation: withdrawalProgress var(--withdrawal-visible-for) linear forwards;
}
@keyframes withdrawalSheen { to { transform: translateX(110%); } }
@keyframes withdrawalAura { 50% { opacity: .58; transform: translate3d(22px, 12px, 0) scale(1.12); } }
@keyframes withdrawalRing { 50% { opacity: .3; transform: scale(.88); } }
@keyframes withdrawalArrow { 50% { transform: translateY(3px); } }
@keyframes withdrawalProgress { to { transform: scaleX(0); } }

@media (max-width: 1080px) {
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .content-grid { grid-template-columns: minmax(0,1fr); }
  .auth-shell { grid-template-columns: .9fr 1.1fr; }
  .landing-hero { gap: 28px; }
}
.referral-card {
  grid-template-columns: minmax(0, 1fr);
}

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

.referral-metric:hover {
  transform: translateY(-3px);
}
/* BlexxToken referral rewards */
.referral-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  align-items: stretch;
  gap: 22px;
  overflow: hidden;
  margin-bottom: 22px;
  padding: clamp(22px, 3.5vw, 38px);
  border: 1px solid rgba(168, 85, 247, .24);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(
      125deg,
      rgba(76, 29, 149, .62),
      rgba(25, 27, 40, .96) 52%,
      rgba(245, 185, 66, .09)
    );
  box-shadow:
    0 25px 75px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .04);
}

.referral-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image:
    radial-gradient(
      rgba(255, 255, 255, .22) 1px,
      transparent 1px
    );
  background-size: 27px 27px;
  mask-image: linear-gradient(
    120deg,
    #000,
    transparent 72%
  );
}

.referral-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      110deg,
      transparent 20%,
      rgba(255, 255, 255, .045) 48%,
      transparent 72%
    );
  transform: translateX(-110%);
  animation: referralSheen 8s ease-in-out infinite;
}

.referral-card-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  right: -90px;
  top: -130px;
  border-radius: 50%;
  background: rgba(245, 185, 66, .18);
  filter: blur(45px);
  pointer-events: none;
  animation: referralGlow 5.5s ease-in-out infinite;
}

.referral-card-main,
.referral-metrics {
  position: relative;
  z-index: 2;
}

.referral-card-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.referral-card h2 {
  max-width: 620px;
  margin-bottom: 10px;
  font-size: clamp(26px, 3.3vw, 42px);
}

.referral-card-main > p {
  max-width: 680px;
  margin-bottom: 0;
  font-size: 12px;
}

.referral-share-row {
  display: flex;
  align-items: stretch;
  gap: 11px;
  margin-top: 23px;
}

.referral-code-box {
  position: relative;
  min-width: 220px;
  flex: 1;
  overflow: hidden;
  padding: 13px 16px;
  border: 1px solid rgba(245, 185, 66, .25);
  border-radius: 16px;
  background: rgba(9, 10, 15, .48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.referral-code-box::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  right: -35px;
  bottom: -45px;
  border-radius: 50%;
  background: rgba(124, 58, 237, .25);
  filter: blur(18px);
}

.referral-code-box span,
.referral-code-box strong {
  position: relative;
  z-index: 1;
  display: block;
}

.referral-code-box span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.referral-code-box strong {
  margin-top: 4px;
  color: var(--gold-soft);
  font: 800 17px/1.25 'Sora', sans-serif;
  letter-spacing: .08em;
}

.referral-copy-button {
  flex: 0 0 auto;
  min-width: 185px;
}

.referral-copy-button.is-copied {
  color: #052e16;
  background: linear-gradient(135deg, #bbf7d0, #22c55e);
  box-shadow: 0 12px 30px rgba(34, 197, 94, .2);
}

.referral-copy-feedback {
  min-height: 18px;
  display: block;
  margin: 8px 0 -8px 2px;
  opacity: 0;
  color: #86efac;
  font-size: 10px;
  font-weight: 700;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
}

.referral-copy-feedback.is-visible {
  opacity: 1;
  transform: none;
}

.referral-metrics {
  display: grid;
  align-content: center;
  gap: 10px;
}

.referral-metric {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(9, 10, 15, .38);
  backdrop-filter: blur(12px);
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease;
}

.referral-metric:hover {
  border-color: rgba(168, 85, 247, .32);
  background: rgba(15, 17, 26, .62);
  transform: translateX(-3px);
}

.referral-metric-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border: 1px solid rgba(168, 85, 247, .24);
  border-radius: 14px;
  color: #c4b5fd;
  background: rgba(124, 58, 237, .13);
}

.referral-metric-icon.gold {
  color: var(--gold-soft);
  border-color: rgba(245, 185, 66, .24);
  background: rgba(245, 185, 66, .09);
}

.referral-metric-icon.green {
  color: #86efac;
  border-color: rgba(34, 197, 94, .22);
  background: rgba(34, 197, 94, .09);
}

.referral-metric-icon svg {
  width: 20px;
  height: 20px;
  animation: softFloat 3.5s ease-in-out infinite;
}

.referral-metric div {
  min-width: 0;
}

.referral-metric small,
.referral-metric strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.referral-metric small {
  color: var(--muted);
  font-size: 9px;
}

.referral-metric strong {
  margin-top: 3px;
  color: var(--text);
  font: 700 15px/1.3 'Sora', sans-serif;
}

@keyframes referralGlow {
  50% {
    opacity: .55;
    transform: translate3d(-28px, 25px, 0) scale(1.15);
  }
}

@keyframes referralSheen {
  42%,
  100% {
    transform: translateX(110%);
  }
}

@media (max-width: 900px) {
  body { padding-bottom: 77px; }
  .app-shell { display: block; }
  .sidebar { display: none; }
  .app-main { padding: 12px 14px 28px; }
  .topbar { min-height: 58px; margin-bottom: 13px; }
  .mobile-brand { display: flex; }
  .mobile-brand .brand-logo { width: 39px; height: 39px; flex-basis: 39px; }
  .mobile-brand .brand-copy strong { font-size: 16px; }
  .mobile-brand .brand-copy small { display: none; }
  .topbar-meta { display: none; }
  .mobile-nav { position: fixed; left: 10px; right: 10px; bottom: 9px; z-index: 80; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: rgba(15,17,26,.88); box-shadow: 0 18px 50px rgba(0,0,0,.55); backdrop-filter: blur(20px); }
  .mobile-nav a { min-width: 0; min-height: 51px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 15px; color: var(--muted-2); font-size: 8px; font-weight: 800; }
  .mobile-nav a.active { color: var(--gold-soft); background: linear-gradient(135deg,rgba(124,58,237,.3),rgba(124,58,237,.08)); }
  .mobile-nav svg { width: 19px; height: 19px; }
  .page-hero { min-height: 190px; padding: 25px 21px; }
  .hero-badge { display: none; }
  .auth-body { padding: 12px; }
  .auth-shell { width: min(560px,100%); min-height: auto; display: block; }
  .auth-story { display: none; }
  .auth-form-side { padding: 29px 22px; }
  .auth-mobile-brand { display: inline-flex; }
  .landing-hero { grid-template-columns: minmax(0,1fr); text-align: center; padding-top: 60px; }
  .landing-copy p { margin-left: auto; margin-right: auto; }
  .hero-actions, .hero-proof { justify-content: center; }
  .token-stage { min-height: 400px; }
}

@media (max-width: 620px) {
  .withdrawal-toast-region { top: max(10px, env(safe-area-inset-top)); right: 10px; width: calc(100vw - 20px); }
  .withdrawal-toast { min-height: 102px; grid-template-columns: 48px minmax(0,1fr) 27px; gap: 11px; padding: 15px 14px 16px; border-radius: 19px; }
  .withdrawal-toast-icon { width: 48px; height: 48px; border-radius: 16px; }
  .withdrawal-toast-icon svg { width: 24px; height: 24px; }
  .withdrawal-toast-copy strong { font-size: 11px; }
  .withdrawal-toast-amount { font-size: 17px; }
  .withdrawal-toast-check { width: 26px; height: 26px; }
  .page-hero { min-height: 168px; border-radius: 24px; }
  .page-hero h1 { font-size: 28px; }
  .page-hero p { font-size: 12px; line-height: 1.55; }
  .stats-grid, .content-grid.equal, .form-grid, .package-grid, .action-grid { grid-template-columns: minmax(0,1fr); }
  .stats-grid { gap: 10px; }
  .stat-card { padding: 16px; }
  .panel { padding: 19px 16px; border-radius: 20px; }
  .panel-header { margin-bottom: 19px; }
  .panel-icon { width: 42px; height: 42px; flex-basis: 42px; }
  .field.full { grid-column: auto; }
  .button-row .btn { width: 100%; }
  .reply-form { display: grid; }
  .reply-form .btn { width: 100%; }
  .transaction { grid-template-columns: auto minmax(0,1fr); }
  .transaction-value { grid-column: 2; text-align: left; }
  .top-actions .btn { width: 42px; min-width: 42px; padding: 0; }
  .top-actions .btn span { display: none; }
  .landing-nav .btn-ghost { display: none; }
  .landing-nav { min-height: 72px; }
  .landing-hero { padding-top: 35px; }
  .landing-copy h1 { font-size: clamp(39px,14vw,58px); }
  .hero-actions .btn { width: 100%; }
  .token-stage { min-height: 330px; }
  .token-stage::before { width: 260px; height: 260px; }
  .stage-logo { width: 175px; }
  .float-card { min-width: 125px; padding: 11px; }
  .float-card.one { left: -5px; }
  .float-card.two { right: -5px; }
}
.referral-card {
  gap: 18px;
  padding: 21px 16px;
  border-radius: 23px;
}

.referral-card h2 {
  font-size: 27px;
}

.referral-card-main > p {
  font-size: 11px;
  line-height: 1.6;
}

.referral-share-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.referral-code-box {
  min-width: 0;
  width: 100%;
  text-align: center;
}

.referral-copy-button {
  width: 100%;
  min-width: 0;
}

.referral-metrics {
  grid-template-columns: minmax(0, 1fr);
}

.referral-metric {
  padding: 13px;
}

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