/* ALTRADER brand layer: one sharp, high-contrast identity for every customer page.
   Graphite-blue surfaces, a vivid emerald for action, gold only for rewards, and the validated
   gain/loss pair (#1a9f73 / #d9674a) for money — always with a sign or an arrow, never color alone. */
:root{
  color-scheme:dark;
  --bg:#06090e;--bg-2:#0a0f16;--panel:#0e141c;--panel-2:#131b26;--panel-3:#18222f;
  --line:#1e2937;--line-strong:#2b3a4d;--ink:#f2f6fb;--ink-2:#d3dce8;--muted:#8e9bb0;
  --accent:#3ee6a2;--accent-2:#1fc98a;--accent-ink:#021a10;--accent-soft:#3ee6a21f;
  --gold:#f5c542;--gold-soft:#f5c54222;--info:#3987e5;
  --gain:#1a9f73;--loss:#d9674a;--gain-text:#43d6a0;--loss-text:#f08e74;
  --radius:16px;--shadow:0 18px 40px #0009;--ease:cubic-bezier(.2,.8,.2,1);
}
html{background:var(--bg)}
body{
  background:
    radial-gradient(900px 480px at 8% -8%,#1fc98a1c,transparent 60%),
    radial-gradient(800px 420px at 100% 0%,#3987e51a,transparent 60%),
    linear-gradient(#ffffff05 1px,transparent 1px) 0 0/100% 32px,
    linear-gradient(90deg,#ffffff05 1px,transparent 1px) 0 0/32px 100%,
    var(--bg);
  color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:#3ee6a255;color:#fff}
p{color:var(--muted)}
.eyebrow{color:var(--accent);letter-spacing:2.4px}
h1,h2,h3{color:var(--ink)}
.page-heading h1{font-weight:700;letter-spacing:-1.6px}

/* header */
.customer-app header{background:#070b11d9;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line);box-shadow:0 1px 0 #ffffff08,0 10px 30px #0006}
.brand{white-space:nowrap;letter-spacing:-1.5px;background:linear-gradient(90deg,#fff,#cfe9df);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.brand span{-webkit-text-fill-color:var(--accent);display:inline-block;animation:brand-pulse 2.4s ease-in-out infinite}
@keyframes brand-pulse{50%{opacity:.35;transform:scale(.8)}}
.tag{border-color:var(--line-strong);color:var(--ink-2);background:#ffffff06}

/* sidebar */
.customer-sidebar{background:linear-gradient(180deg,#0b1017,#080c12);border-right:1px solid var(--line)}
.customer-sidebar nav a{display:flex;align-items:center;gap:12px;color:var(--muted);border:1px solid transparent;transition:background .18s var(--ease),color .18s,border-color .18s,transform .18s var(--ease);position:relative}
.customer-sidebar nav a .ai{flex:none;opacity:.85}
.customer-sidebar nav a:hover{background:#ffffff08;color:var(--ink);transform:translateX(2px)}
.customer-sidebar nav a[aria-current]{background:linear-gradient(90deg,var(--accent-soft),transparent);color:var(--ink);border-color:#3ee6a233}
.customer-sidebar nav a[aria-current]::before{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.customer-sidebar nav a[aria-current] .ai{color:var(--accent);opacity:1}
.sidebar-note{color:var(--muted)}

/* controls */
input,select,textarea{background:#080d14;border:1px solid var(--line-strong);color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
button{background:var(--panel-2);border:1px solid var(--line-strong);color:var(--ink);transition:transform .15s var(--ease),filter .15s,border-color .15s,box-shadow .15s}
button:hover{filter:none;border-color:#3b4e66}
button:active{transform:translateY(1px) scale(.99)}
button.primary{background:linear-gradient(180deg,#5ff0b6,var(--accent-2));color:var(--accent-ink);border-color:transparent;box-shadow:inset 0 1px 0 #ffffff66,0 8px 22px #1fc98a33;font-weight:800}
button.primary:hover{box-shadow:inset 0 1px 0 #ffffff66,0 10px 28px #1fc98a55}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#message{border-left-color:var(--accent);background:#3ee6a20d;border-radius:8px}
.notice{background:#f5c5420f;border-color:#f5c54233;color:#ecdcae}

/* surfaces */
.welcome-card,.destination-grid a,.product,.agent,.account,.card,.panel{background:linear-gradient(180deg,#ffffff06,transparent 40%),var(--panel)!important;border:1px solid var(--line)!important;box-shadow:inset 0 1px 0 #ffffff0a}
.destination-grid a{transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.destination-grid a:hover{border-color:#3ee6a255!important;transform:translateY(-3px);box-shadow:0 16px 32px #0008,0 0 0 1px #3ee6a222}
.destination-grid span{color:var(--accent)}

/* notification bell */
.notif-bell{display:inline-grid;place-items:center}
.notif-badge{background:var(--loss);box-shadow:0 0 0 2px #070b11}

/* motion */
.reveal{animation:reveal .5s var(--ease) both}
@keyframes reveal{from{opacity:0;transform:translateY(10px)}}
.medal .medal-shine{animation:medal-shine 3.6s ease-in-out infinite}
@keyframes medal-shine{0%,55%{transform:translateX(0) rotate(20deg)}85%,100%{transform:translateX(130px) rotate(20deg)}}
@media(prefers-reduced-motion:reduce){.brand span,.reveal,.medal .medal-shine{animation:none}.destination-grid a:hover,.customer-sidebar nav a:hover{transform:none}}
.notif-head{display:flex;align-items:center;gap:8px}.notif-head .ai{color:var(--gold);flex:none}