/* Wallet polish layer — calm, Coinbase-style dark theme. Loaded after wallet.css.
   Visual only: no markup, routes or behaviour depend on it. */
:root {
  --bg: #0A0B0D; --surface: #141519; --surface-2: #1B1D22; --border: #26282E; --border-2: #32353D;
  --ink: #F5F7FA; --muted: #8A919E; --blue: #0052FF; --blue-hover: #1A62FF; --blue-text: #5B8CFF;
  --teal: #0052FF; --cyan: #3773F5; --mint: #5B8CFF; --ice: #C9D6F5; --gold: #F5B301;
  --line: #26282E; --glow: none; --radius: 20px;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.45);
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html { background: var(--bg); scroll-padding-top: 96px; }
html body { background: var(--bg); color: var(--ink); font: 400 15px/1.6 var(--font); letter-spacing: -.005em; }
html body h1, html body h2, html body h3, html body .btn, html body .nav { font-family: var(--font); }
::selection { background: rgba(0,82,255,.35); }
.kx-field, canvas.kx-field, .title-dots, .kx-logo-dots, .kxl2-spot { display: none !important; }
/* sticky header must not cover section titles when jumping to anchors */
section, [id], h2 { scroll-margin-top: 96px; }

/* header */
html body .nav { background: rgba(10,11,13,.82); border: 1px solid var(--border); box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 10px 30px -20px rgba(0,0,0,.8); border-radius: 18px; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
html body .nav .kx-crown, .kx-mark { animation: none !important; filter: none !important; display: inline-flex; }
.kx-logo-stage { width: auto !important; }
html body .kx-word { font: 700 19px/30px var(--font) !important; letter-spacing: -.01em !important; color: var(--ink) !important; text-shadow: none !important; position: static !important; }
html body .nav-links a, html body .nav-links button { font: 500 14px var(--font); border: 1px solid transparent; }
html body .nav-links a:hover, html body .nav-links a.on, html body .nav-links button:hover { color: var(--ink); border-color: var(--border); background: var(--surface); }

/* buttons */
html body .btn { border: 1px solid var(--border-2); background: var(--surface); color: var(--ink); font: 600 15px var(--font); border-radius: 999px; box-shadow: none; }
html body .btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--border-2); box-shadow: none; transform: none; }
html body .btn.primary { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: none; }
html body .btn.primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
html body .btn:focus-visible, html body a:focus-visible, html body button:focus-visible { outline: 2px solid var(--blue-text); outline-offset: 2px; }

/* cards & inputs */
html body .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
html body .field input, html body .field select, html body .field textarea, html body input:not([type=checkbox]):not([type=radio]) { border-color: var(--border-2); border-style: solid; }
html body .field input:focus, html body input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(0,82,255,.25); }
html body .kicker i { background: var(--blue) !important; box-shadow: none !important; }
html body .num { font-family: var(--font); font-variant-numeric: tabular-nums; }
html body .toast { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
html body .toast svg { background: var(--blue); color: #fff; }

/* calmer, reliable entrance: content is visible by default (no clip-path print-in, no late fade) */
html body .build { animation: none !important; opacity: 1 !important; clip-path: none !important; filter: none !important; }
html body #main.out { opacity: 1 !important; transform: none !important; }

/* ---------------- landing (logged-out home) ---------------- */
body[data-page="home"] #main { max-width: 1120px; margin: 0 auto; width: 100%; padding: 28px clamp(16px, 4vw, 32px) 56px !important; }
body[data-page="home"] .nav { justify-content: flex-start; }
.lp-app-hero { padding: 0 !important; border-radius: 28px !important; background: var(--surface) !important; border: 1px solid var(--border); box-shadow: var(--shadow) !important; }
.lp-app-hero:before { display: none !important; }
.lp-auth-row { padding: 18px 22px 0; margin: 0 !important; }
.lp-brand-chip { background: transparent !important; border: 1px solid var(--border) !important; color: var(--muted) !important; font: 600 12px var(--font) !important; letter-spacing: .08em !important; }
.lp-brand-chip b { display: inline-flex; color: var(--blue-text) !important; filter: none !important; }
.lp-brand-chip b svg, .lp-auth-row a svg, .lp-main-actions a svg, .lp-badge svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lp-auth-row a { gap: 6px; height: 40px !important; border-radius: 999px !important; font: 600 14px var(--font) !important; background: transparent !important; border: 1px solid var(--border-2) !important; color: var(--ink) !important; box-shadow: none !important; }
.lp-auth-row a:hover { background: var(--surface-2) !important; }
.lp-auth-row a.register { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; }
.lp-auth-row a.register:hover { background: var(--blue-hover) !important; }
.lp-core { padding: clamp(28px, 5vw, 56px) clamp(22px, 5vw, 56px) clamp(24px, 4vw, 40px) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.lp-badge { gap: 8px; align-items: center; background: rgba(0,82,255,.12) !important; border: 1px solid rgba(91,140,255,.25) !important; color: var(--blue-text) !important; font: 600 13px var(--font) !important; }
.lp-core h1 { font: 700 clamp(38px, 6.2vw, 64px)/1.05 var(--font) !important; letter-spacing: -.035em !important; color: var(--ink) !important; margin: 22px 0 16px !important; }
.lp-core h1 strong { color: var(--blue-text) !important; text-shadow: none !important; font-weight: 700; }
.lp-core > p { color: var(--muted) !important; font-size: 18px !important; max-width: 640px !important; }
.lp-core > .lp-ur, .lp-ur, [dir="rtl"] { font-family: "Noto Nastaliq Urdu", var(--font); }
.lp-core > .lp-ur { color: var(--ice) !important; font-size: 17px !important; line-height: 2.1 !important; margin-top: 6px !important; }
.lp-main-actions { display: flex !important; flex-wrap: wrap; gap: 12px !important; margin: 28px 0 32px !important; }
.lp-main-actions a { gap: 8px; height: 52px !important; padding: 0 26px; border-radius: 999px !important; font: 600 16px var(--font) !important; box-shadow: none !important; }
.lp-main-actions .create { background: var(--blue) !important; border: 1px solid var(--blue) !important; color: #fff !important; }
.lp-main-actions .create:hover { background: var(--blue-hover) !important; }
.lp-main-actions .login { background: transparent !important; border: 1px solid var(--border-2) !important; color: var(--ink) !important; }
.lp-main-actions .login:hover { background: var(--surface-2) !important; }
.lp-feature-strip { gap: 12px !important; border-top: 1px solid var(--border); padding-top: 24px; }
.lp-feature-strip > div { min-height: 0 !important; padding: 16px !important; flex-direction: row !important; justify-content: flex-start !important; gap: 12px; background: var(--surface-2) !important; border: 1px solid var(--border) !important; box-shadow: none !important; border-radius: 16px !important; text-align: left; display: grid !important; grid-template-columns: auto 1fr; align-items: center; }
.lp-feature-strip i { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(0,82,255,.14); color: var(--blue-text); }
.lp-feature-strip i svg, .lp-why-grid i svg, .lp-steps i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-feature-strip b { font: 600 16px var(--font) !important; color: var(--ink); }
.lp-feature-strip small { color: var(--muted) !important; font-size: 13px !important; }

.lp-why, .lp-sec, .programs-home { margin: 72px 0 0 !important; }
.lp-why-head { margin-bottom: 20px !important; align-items: baseline !important; }
.lp-why-head h2, .lp-h2, .programs-home .list-head h2, .lp-cta h2 { font: 700 clamp(26px, 3.4vw, 34px)/1.15 var(--font) !important; letter-spacing: -.025em; color: var(--ink); margin: 0 !important; }
.lp-why-head span { color: var(--muted); font-size: 14px; }
.lp-why-grid { gap: 16px !important; }
.lp-why-grid article, .lp-steps li { padding: 26px !important; border-radius: var(--radius) !important; border: 1px solid var(--border) !important; background: var(--surface) !important; box-shadow: var(--shadow) !important; transition: border-color .2s; }
.lp-why-grid article:hover, .lp-steps li:hover { border-color: var(--border-2) !important; }
.lp-why-grid i, .lp-steps i { width: 44px !important; height: 44px !important; display: grid !important; place-items: center; border-radius: 12px !important; background: rgba(0,82,255,.14) !important; color: var(--blue-text) !important; box-shadow: none !important; font-size: 0 !important; }
.lp-why-grid h3, .lp-steps h3 { font: 600 18px/1.3 var(--font) !important; margin: 18px 0 6px !important; color: var(--ink); }
.lp-why-grid p, .lp-steps p { color: var(--muted) !important; font-size: 15px !important; line-height: 1.55; }
.lp-h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 20px !important; }
.lp-h2 small { font: 400 16px "Noto Nastaliq Urdu", var(--font) !important; color: var(--muted) !important; margin: 0 !important; }
.lp-steps { gap: 16px !important; }
.lp-steps b { top: 22px !important; right: 24px !important; font: 600 14px var(--font) !important; color: var(--muted) !important; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-2); }

/* plans: grid on desktop, swipe rail on phones; cards visible immediately */
.programs-home .list-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.programs-home .list-head a { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-text); text-decoration: none; font-weight: 600; }
.programs-home .list-head a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body .prog-grid { gap: 16px; }
@media (min-width: 761px) {
  html body .prog-grid.h-rail { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0 !important; padding: 0 !important; scroll-snap-type: none; }
  html body .prog-grid.h-rail > * { flex: initial; min-width: 0; }
}
@media (max-width: 760px) {
  html body .prog-grid.h-rail { padding: 2px 16px 14px !important; margin: 0 -16px !important; scroll-padding-inline: 16px; }
  html body .prog-grid.h-rail > * { flex: 0 0 min(86%, 340px) !important; }
}
html body .prog { padding: 22px; gap: 16px; opacity: 1 !important; }
html body .prog.skel { background: linear-gradient(110deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%) !important; background-size: 260% 100% !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; }
html body .prog-top h3 { font: 600 18px var(--font); }
html body .prog-top small { color: var(--muted); font-size: 13px; }
html body .plan-includes { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--border); display: flex !important; flex-direction: column; gap: 10px; }
html body .plan-includes li { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14px; line-height: 1.4; }
html body .plan-includes li svg { width: 18px; height: 18px; flex: none; padding: 3px; border-radius: 50%; background: rgba(0,82,255,.16); stroke: var(--blue-text); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
html body .prog-style { font-size: 14px; color: var(--muted); }
html body .prog-style b { font-size: 16px; color: var(--ink); }
html body .prog-sample { padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); margin: 0; }
html body .prog-sample > span:first-child b { color: #27AD75; }
html body .prog-sample > span:nth-child(2) b { color: #F0616D; }
html body .prog .btn { height: 48px; }
html body .plan-disclaimer, html body .prog-style small { color: var(--muted); font-size: 12px; }
html body .sale-price { color: #F5B301 !important; }

/* CTA + footer */
.lp-cta { margin: 72px 0 0 !important; padding: clamp(32px, 6vw, 56px) 24px !important; text-align: center; background: var(--surface) !important; }
.lp-cta p { color: var(--muted) !important; font: 400 18px/2 "Noto Nastaliq Urdu", var(--font) !important; margin: 8px 0 22px !important; }
.lp-cta .btn.big { height: 52px; padding: 0 30px; font-size: 16px; }
.lp-foot { margin: 56px 0 0; padding: 28px 0 0; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.lp-foot .risk-note { margin: 0 !important; max-width: 620px; color: var(--muted) !important; font-size: 13px !important; text-align: left !important; }
.lp-foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.lp-foot nav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.lp-foot nav a:hover { color: var(--ink); }

@media (max-width: 650px) {
  body[data-page="home"] #main { padding-top: 16px !important; }
  .lp-auth-row { padding: 14px 14px 0; }
  .lp-core { padding: 26px 18px 20px !important; }
  .lp-core h1 { font-size: 38px !important; }
  .lp-core > p { font-size: 16px !important; }
  .lp-main-actions a { flex: 1 1 140px; height: 50px !important; padding: 0 16px; font-size: 15px !important; }
  .lp-feature-strip { grid-template-columns: 1fr !important; }
  .lp-why, .lp-sec, .programs-home, .lp-cta { margin-top: 52px !important; }
  .lp-steps { grid-template-columns: 1fr !important; }
  .lp-foot { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 651px) and (max-width: 900px) { .lp-steps { grid-template-columns: 1fr 1fr 1fr; } }
/* the landing "Log in" button shares the .login class name with the login page card: keep it a pill */
.lp-main-actions a, .lp-auth-row a { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; text-align: center; }
.lp-main-actions a.login { padding: 0 26px !important; gap: 8px !important; }
.lp-badge { padding: 6px 14px !important; line-height: 1.4; }
.lp-badge > span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lp-badge [dir="rtl"] { font: 500 13px/1.9 "Noto Nastaliq Urdu", var(--font); }
.kx-mark::before, .kx-mark::after, .nav .kx-crown::before, .nav .kx-crown::after { display: none !important; content: none !important; }
.kx-mark svg rect { fill: #0052FF !important; } .kx-mark svg path { fill: #fff !important; stroke: none !important; }
@media (max-width: 650px) {
  .lp-auth-row a:first-child { display: none !important; }
  .lp-brand-chip { white-space: nowrap; font-size: 11px !important; }
  .lp-auth-row a.register { padding: 0 14px !important; white-space: nowrap; }
  .lp-main-actions a { white-space: nowrap; }
}

/* p2: animated plan illustrations */
html body .plan-art { width: 88px; height: 88px; margin: -2px 0 -4px; flex: none; }
html body .plan-art svg { width: 100%; height: 100%; display: block; overflow: visible; stroke: none; fill: none; stroke-width: 0; }
html body .plan-art .pa-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pa-draw 1.1s cubic-bezier(.4,0,.2,1) .15s forwards; }
html body .plan-art .pa-halo { transform-box: fill-box; transform-origin: center; animation: pa-pulse 3.6s ease-in-out infinite; }
html body .plan-art .pa-leaf { transform-box: fill-box; transform: scale(0); animation: pa-pop .6s cubic-bezier(.3,1.4,.5,1) forwards; }
html body .plan-art .pa-leaf-l { transform-origin: 100% 100%; animation-delay: .7s; }
html body .plan-art .pa-leaf-r { transform-origin: 0% 100%; animation-delay: .95s; }
html body .plan-art-1 svg { animation: pa-sway 5s ease-in-out 1.6s infinite; transform-origin: 50% 78%; }
html body .plan-art .pa-bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); animation: pa-grow .7s cubic-bezier(.3,1.2,.5,1) forwards; }
html body .plan-art .pa-bar:nth-child(1) { animation-delay: .1s; } html body .plan-art .pa-bar:nth-child(2) { animation-delay: .25s; } html body .plan-art .pa-bar:nth-child(3) { animation-delay: .4s; }
html body .plan-art .pa-dot { opacity: 0; transform-box: fill-box; transform-origin: center; animation: pa-fade .3s ease-out 1.2s forwards, pa-pulse 2.4s ease-in-out 1.5s infinite; }
html body .plan-art .pa-float { animation: pa-float 4s ease-in-out infinite; }
html body .plan-art .pa-spark { transform-box: fill-box; transform-origin: center; animation: pa-twinkle 3s ease-in-out infinite; }
html body .plan-art .pa-spark2 { animation-delay: 1.5s; }
@keyframes pa-draw { to { stroke-dashoffset: 0; } }
@keyframes pa-pop { to { transform: scale(1); } }
@keyframes pa-grow { to { transform: scaleY(1); } }
@keyframes pa-fade { to { opacity: 1; } }
@keyframes pa-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes pa-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes pa-sway { 0%,100% { transform: rotate(0); } 50% { transform: rotate(2deg); } }
@keyframes pa-twinkle { 0%,100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@media (max-width: 720px) { html body .plan-art { width: 72px; height: 72px; } }
@media (prefers-reduced-motion: reduce) {
  html body .plan-art *, html body .plan-art svg { animation: none !important; }
  html body .plan-art .pa-draw { stroke-dashoffset: 0; }
  html body .plan-art .pa-leaf, html body .plan-art .pa-bar { transform: none; }
  html body .plan-art .pa-dot { opacity: 1; }
}

/* p4: welcome bonus + JazzCash */
html body .bonus-chip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 14px 0; border-radius: 14px; background: rgba(0,82,255,.10); border: 1px solid rgba(55,115,245,.35); text-align: left; max-width: 460px; }
html body .bonus-chip i { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #0052FF; color: #fff; }
html body .bonus-chip i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body .bonus-chip b { display: block; font: 600 15px var(--font); color: var(--ink); }
html body .bonus-chip small { display: block; font-size: 12.5px; color: var(--muted); }
html body .dash-bonus { max-width: none; }
html body .jc-logo { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #2B2F36; color: #fff; font: 700 12px var(--font); font-style: normal; text-transform: uppercase; }
html body .jc-fee { font-size: 13px; color: var(--ink); }
/* plan page: animated plan picture in the existing 84px frame + simple profit box (2026-10-14) */
html body .pd-pic.pd-art { display: block; flex: none; width: 84px; height: 84px; margin: 0; padding: 6px; box-sizing: border-box; border-radius: 22px !important; border: 2px solid rgba(91,140,255,.6); box-shadow: 0 0 26px rgba(0,82,255,.45); background: rgba(0,82,255,.08) !important; filter: none; }
html body .pd-earn { display: grid; gap: 12px; }
html body .pd-earn-line { margin: 0; font-size: 15px; line-height: 1.5; }
html body .pd-earn-list { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
html body .pd-earn-list div { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
html body .pd-earn-list dt { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
html body .pd-earn-list dd { margin: 0; font-weight: 700; font-size: 18px; }
html body .pd-earn-list dd small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; }
html body .pd-earn-list .up { color: var(--mint, #5B8CFF); } html body .pd-earn-list .down { color: #ff8a8a; }
html body .pd-earn-note { color: var(--muted); }

/* p6: top-right spin (busy spinner) + notification bell (2026-10-14) */
html body .net-spin { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 99px; color: var(--mint, #5B8CFF); border: 1.4px solid rgba(91,140,255,.5); background: rgba(0,82,255,.08); box-shadow: 0 0 18px rgba(0,82,255,.14); }
html body .net-spin svg { width: 26px; height: 26px; }
html body .net-spin .ns-wheel { transform-origin: 16px 16px; transition: opacity .2s; }
html body .net-spin.busy .ns-wheel { animation: kxl2Spin .8s linear infinite; }
html body .net-spin.busy { box-shadow: 0 0 22px rgba(0,82,255,.45); }
html body .notice-bellbtn { min-width: 38px !important; width: 38px; padding: 0 !important; margin-left: 8px; }
html body .notice-bellbtn .notice-bell { width: 20px; height: 20px; transform: none; font-size: 0; }
html body .notice-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #ff5c6c; color: #fff; font: 700 10.5px/18px var(--font, system-ui); text-align: center; box-shadow: 0 0 0 2px #0a0b0d; }
html body .notice-badge[hidden] { display: none; }
html body .net-spin { margin-left: 8px; }
html body .note-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; }
html body .note-all { border: 0; background: none; color: var(--mint, #5B8CFF); font: 600 12px var(--font, system-ui); cursor: pointer; }
html body .notice-panel { max-height: min(70vh, 520px); overflow: auto; }
html body .notice-panel > a.note { flex-direction: row; align-items: flex-start; gap: 10px; }
html body .notice-panel > a.note > i { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: rgba(0,82,255,.1); font-style: normal; font-size: 14px; }
html body .notice-panel > a.note > span { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
html body .notice-panel > a.note > em { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; }
html body .notice-panel > a.note.unread b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--mint, #5B8CFF); vertical-align: middle; }
html body .note-empty { margin: 8px 4px; color: var(--muted); }
@media (max-width: 760px) { html body .net-spin, html body .notice-bellbtn { width: 36px; height: 36px; min-width: 36px !important; } }

/* p7: calmer fintech look — one brand blue, soft cards, no neon glow (2026-10-14) */
html body { --glow: none; }
html body .card, html body .dash-stat, html body .dash-tool, html body .dash-action, html body .method, html body .dash-balance, html body .notice-panel, html body .prog, html body .lp-why-grid article, html body .lp-steps li {
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -16px rgba(0,0,0,.6) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 18px !important; }
html body .card, html body .prog, html body .lp-why-grid article, html body .lp-steps li { background: #121418 !important; }
html body .page, html body .lp-why, html body .lp-sec, html body .programs-home { --gap: 20px; }
html body .page > * + * { margin-top: 20px; }
/* dashboard tiles: calm surfaces with a blue icon instead of rainbow gradients */
html body .dash-stat, html body .dash-tool { background: #121418 !important; color: var(--ink) !important; }
html body .dash-stat::before, html body .dash-stat::after, html body .dash-tool::before, html body .dash-tool::after, html body .dash-balance::before, html body .dash-balance::after { display: none !important; }
html body .dash-stat > i, html body .dash-tool > i { background: rgba(0,82,255,.14) !important; color: #5B8CFF !important; box-shadow: none !important; }
html body .dash-stat small, html body .dash-stat em, html body .dash-tool small { color: var(--muted) !important; }
html body .dash-action { background: #121418 !important; color: var(--ink) !important; }
html body .dash-action.da-deposit { background: #0052FF !important; border-color: #0052FF !important; color: #fff !important; }
html body .dash-action svg { color: inherit; }
/* no glow / pulse / text-shadow anywhere */
html body *, html body *::before, html body *::after { text-shadow: none !important; }
html body .notice-bar i, html body .kicker i { animation: none !important; box-shadow: none !important; }
html body .net-spin, html body .notice-bellbtn { border: 1px solid rgba(255,255,255,.12) !important; background: rgba(255,255,255,.04) !important; box-shadow: none !important; color: #5B8CFF !important; }
html body .net-spin.busy { box-shadow: none !important; border-color: rgba(91,140,255,.6) !important; }
html body .pd-pic.pd-art { border: 1px solid rgba(91,140,255,.35) !important; box-shadow: none !important; }
html body .tabbar::before { border: 1px solid rgba(255,255,255,.1) !important; box-shadow: 0 10px 30px -12px rgba(0,0,0,.7) !important; background: rgba(14,16,20,.92) !important; }
html body .tabbar a.on, html body .tabbar button.on { color: #fff !important; background: rgba(0,82,255,.22) !important; box-shadow: none !important; }
html body .btn.primary, html body .nav-cta { background: #0052FF !important; box-shadow: none !important; border-color: #0052FF !important; }
html body .btn.primary:hover { background: #1A62FF !important; }
html body .spark path { stroke: #5B8CFF; }
html body canvas.crown-field, html body .starfield, html body .kx-stars { display: none !important; }
html body .up { color: #3DD68C; }
html body .id-verify { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; }
html body .id-verify > i { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(0,82,255,.14); color: #5B8CFF; }
html body .id-verify > i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
html body .id-verify span { display: flex; flex-direction: column; gap: 2px; } html body .id-verify small { color: var(--muted); }
/* p8b: one original animated avatar for everyone; password tucked away */
html body .avatar-mei { border-radius: 50% !important; background: #0d1424; box-shadow: 0 0 0 1px rgba(91,140,255,.25) !important; animation: none !important; object-fit: cover; flex: none; }
html body .avatar-lg { width: 72px; height: 72px; }
html body .page-head:has(.avatar-lg) { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html body .pw-fold { padding: 0 !important; }
html body .pw-fold > summary { list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; color: var(--ink); }
html body .pw-fold > summary::-webkit-details-marker { display: none; }
html body .pw-fold > summary span { color: var(--muted); transition: transform .2s; }
html body .pw-fold[open] > summary span { transform: rotate(90deg); }
html body .pw-fold .password-card { padding: 0 18px 18px; background: none !important; border: 0 !important; box-shadow: none !important; }
/* p8c: 4 original pastel avatars, crossfade every 6s inside the brand-blue ring */
html body .avatar-rot { position: relative; display: block; flex: none; width: var(--s); height: var(--s); border-radius: 50% !important; overflow: hidden; box-shadow: 0 0 0 2px #0052FF, 0 0 0 5px rgba(0,82,255,.15) !important; animation: none !important; background: #f6dbe8; }
html body .avatar-rot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: av-fade 24s infinite; animation-delay: calc(var(--i) * 6s); }
html body .avatar-rot img:first-child { opacity: 1; }
@keyframes av-fade { 0% { opacity: 0; } 4% { opacity: 1; } 25% { opacity: 1; } 29% { opacity: 0; } 100% { opacity: 0; } }
html body .avatar-rot img:first-child { animation-name: av-fade-first; }
@keyframes av-fade-first { 0%, 25% { opacity: 1; } 29%, 96% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html body .avatar-rot img { animation: none !important; opacity: 0; } html body .avatar-rot img:first-child { opacity: 1; } }