/* ZFORGE by Zestify Digital — dark 3D theme built on the Zestify blue. */
:root {
  color-scheme: dark;
  --bg0: #030817; --bg1: #060f2b; --navy: #071233;
  --surface: rgba(16, 30, 74, .52); --surface-2: rgba(22, 40, 96, .62); --surface-solid: #0b1838;
  --line: rgba(139, 166, 255, .14); --line-2: rgba(139, 166, 255, .26);
  --ink: #f1f5ff; --ink-2: #c6d1f1; --muted: #8b98bf; --subtle: #5d6a90;
  --blue: #2f66ff; --blue-2: #5f88ff; --blue-3: #93b0ff; --deep: #1743c7;
  --violet: #8b5cff; --cyan: #33d6ff; --pink: #ff4d9d;
  --ok: #2ee59d; --warn: #ffc24b; --bad: #ff5a6e; --binance: #f0b90b;
  --grad: linear-gradient(135deg, #2f66ff 0%, #7b5cff 52%, #33d6ff 100%);
  --grad-soft: linear-gradient(135deg, rgba(47,102,255,.28), rgba(123,92,255,.18) 50%, rgba(51,214,255,.2));
  --glow: 0 0 0 1px rgba(95,136,255,.35), 0 10px 40px -8px rgba(47,102,255,.65), 0 0 80px -20px rgba(51,214,255,.45);
  --shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 60px -30px rgba(0,0,0,.8), 0 12px 30px -18px rgba(23,67,199,.5);
  --radius: 20px; --radius-sm: 12px;
  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg0); color: var(--ink-2); font: 500 15px/1.6 var(--sans);
       -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--blue-3); text-decoration: none; font-weight: 700; }
a:hover { color: #fff; }
b, strong { color: var(--ink); font-weight: 800; }
::selection { background: rgba(47,102,255,.5); color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ico { width: 18px; height: 18px; flex: none; }

/* ---------------------------------------------------------- background scene */
.scene-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
            background: radial-gradient(1200px 700px at 70% -10%, #0d2370 0%, transparent 60%),
                        radial-gradient(900px 600px at -10% 30%, #12124a 0%, transparent 55%),
                        linear-gradient(180deg, var(--bg1), var(--bg0) 60%); }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: drift 22s var(--ease) infinite alternate; }
.blob.b1 { width: 520px; height: 520px; background: #2f66ff; top: -160px; right: -80px; }
.blob.b2 { width: 420px; height: 420px; background: #7b5cff; top: 40%; left: -180px; opacity: .35; animation-duration: 28s; }
.blob.b3 { width: 360px; height: 360px; background: #33d6ff; bottom: -160px; right: 20%; opacity: .25; animation-duration: 34s; }
@keyframes drift { to { transform: translate3d(-60px, 50px, 0) scale(1.12); } }
.floor { position: absolute; left: -50%; right: -50%; bottom: -30%; height: 70%;
         background-image: linear-gradient(rgba(95,136,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(95,136,255,.22) 1px, transparent 1px);
         background-size: 64px 64px; transform: perspective(700px) rotateX(70deg);
         mask-image: linear-gradient(to top, rgba(0,0,0,.8), transparent 75%); -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.8), transparent 75%); }
.noise { position: absolute; inset: 0; opacity: .09; mix-blend-mode: overlay;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------- header */
header.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 12px 28px;
             background: rgba(4, 11, 34, .66); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
             border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; color: var(--ink); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text b { font-size: 19px; font-weight: 800; letter-spacing: .06em; }
.brand-text small { font-size: 10.5px; color: var(--muted); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-top: 3px; }
.mark { width: 40px; height: 40px; border-radius: 13px; display: inline-grid; place-items: center; color: #fff; position: relative; flex: none;
        background: radial-gradient(120% 90% at 30% 20%, #8fb0ff 0%, #2f66ff 38%, #1743c7 75%, #0f2a8a 100%);
        box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 -4px 8px rgba(0,0,40,.45) inset, 0 6px 0 #0d2275, 0 10px 24px -4px rgba(47,102,255,.8);
        transform: perspective(200px) rotateX(10deg) rotateY(-12deg); }
.mark::after { content: ""; position: absolute; inset: 3px 6px auto; height: 40%; border-radius: 10px 10px 30px 30px;
               background: linear-gradient(rgba(255,255,255,.45), transparent); }
.mark svg { width: 60%; height: 60%; filter: drop-shadow(0 2px 2px rgba(0,0,40,.5)); position: relative; z-index: 1; }
.mark.sm { width: 24px; height: 24px; border-radius: 8px; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 3px 0 #0d2275; vertical-align: middle; }
.mark.lg { width: 78px; height: 78px; border-radius: 24px; box-shadow: 0 2px 0 rgba(255,255,255,.6) inset, 0 -8px 14px rgba(0,0,40,.45) inset, 0 10px 0 #0d2275, 0 24px 50px -6px rgba(47,102,255,.9); }
nav.links { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
nav.links a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 12px; color: var(--ink-2);
              font-size: 14px; font-weight: 700; border: 1px solid transparent; transition: .2s var(--ease); }
nav.links a .ico { width: 16px; height: 16px; opacity: .8; }
nav.links a:hover { color: #fff; background: rgba(95,136,255,.1); }
nav.links a.active { color: #fff; background: var(--grad-soft); border-color: var(--line-2); box-shadow: 0 0 24px -6px rgba(47,102,255,.7); }
nav.links a.active .ico { opacity: 1; color: var(--cyan); }
nav.links a.btn { color: #fff; }
.nav-sep { width: 1px; height: 26px; background: var(--line-2); margin: 0 6px; }
.avatar { width: 26px; height: 26px; border-radius: 9px; display: inline-grid; place-items: center; font-weight: 800; font-size: 12.5px; color: #fff;
          background: var(--grad); box-shadow: 0 0 14px -2px rgba(123,92,255,.8); }
.icon-only { padding: 8px !important; }
.menu-btn { display: none; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); border-radius: 12px; padding: 7px 9px; cursor: pointer; }

/* ---------------------------------------------------------- layout & type */
.wrap { max-width: 1180px; margin: 0 auto; padding: 34px 28px 20px; position: relative; }
h1, h2, h3 { color: var(--ink); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(30px, 4vw, 44px); }
h2 { font-size: clamp(24px, 3vw, 34px); }
h1 em, h2 em, .accent { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0;
                        background: linear-gradient(100deg, #93b0ff, #33d6ff 60%, #b39bff); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); margin-bottom: 10px; }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.lead { color: var(--muted); margin: 10px 0 0; font-size: 16px; font-weight: 600; max-width: 720px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.hint { color: var(--muted); font-size: 12.5px; margin-top: 6px; font-weight: 600; }
.mono { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.nowrap { white-space: nowrap; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.grid .full { grid-column: 1 / -1; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stack > * + * { margin-top: 16px; }

/* ---------------------------------------------------------- cards (glass + gradient border) */
.card { position: relative; background: linear-gradient(180deg, rgba(24,42,102,.55), rgba(10,20,52,.62));
        border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 18px;
        box-shadow: var(--shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
                background: linear-gradient(160deg, rgba(147,176,255,.45), rgba(147,176,255,.04) 40%, rgba(51,214,255,.18));
                -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.card h3 { margin: 0 0 12px; font-size: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card p { margin: 8px 0 14px; }
.card.glow { box-shadow: var(--shadow), 0 0 60px -20px rgba(47,102,255,.8); }
.chip-ico { width: 42px; height: 42px; border-radius: 13px; display: inline-grid; place-items: center; color: #fff; flex: none;
            background: radial-gradient(120% 100% at 30% 15%, #8fb0ff, #2f66ff 45%, #1a3fb8);
            box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -3px 6px rgba(0,0,40,.4) inset, 0 4px 0 #0d2275, 0 10px 22px -6px rgba(47,102,255,.8); }
.chip-ico .ico { width: 21px; height: 21px; }
.chip-ico.violet { background: radial-gradient(120% 100% at 30% 15%, #c9b6ff, #7b5cff 45%, #4a2fc2); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 4px 0 #2e1b84, 0 10px 22px -6px rgba(123,92,255,.8); }
.chip-ico.cyan { background: radial-gradient(120% 100% at 30% 15%, #b8f3ff, #22c2ee 45%, #0b7fa8); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 4px 0 #055a78, 0 10px 22px -6px rgba(51,214,255,.8); }
.chip-ico.green { background: radial-gradient(120% 100% at 30% 15%, #b6ffe0, #22c98a 45%, #0d7f55); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 4px 0 #075438, 0 10px 22px -6px rgba(46,229,157,.7); }
.chip-ico.gold { background: radial-gradient(120% 100% at 30% 15%, #fff0b3, #f0b90b 45%, #a67b00); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 4px 0 #6e5200, 0 10px 22px -6px rgba(240,185,11,.7); color: #2a1f00; }

/* stat tiles */
.tile { display: flex; flex-direction: column; gap: 6px; }
.tile .tile-top { display: flex; justify-content: space-between; align-items: center; }
.tile .label { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.stat { font-size: 34px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; line-height: 1.1; }
.stat.grad-text { color: transparent; }
.tile .sub { font-size: 13px; color: var(--muted); font-weight: 600; }

/* ---------------------------------------------------------- forms */
label { display: block; font-weight: 800; font-size: 12.5px; letter-spacing: .04em; margin-bottom: 7px; color: var(--ink); }
input[type=text], input[type=password], input[type=number], input[type=email], input[type=file], select, textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 13px; font: 600 15px var(--sans); color: var(--ink);
  background: rgba(3, 10, 32, .65); box-shadow: 0 2px 8px rgba(0,0,0,.35) inset; transition: .2s var(--ease); }
input::placeholder, textarea::placeholder { color: var(--subtle); font-weight: 500; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue-2); box-shadow: 0 0 0 4px rgba(47,102,255,.22), 0 0 24px -4px rgba(47,102,255,.6); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--blue-3) 50%), linear-gradient(135deg, var(--blue-3) 50%, transparent 50%);
         background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
select option { background: var(--surface-solid); }
input[type=file] { padding: 10px; }
input[type=file]::file-selector-button { font: 800 13px var(--sans); border: 0; border-radius: 9px; padding: 8px 14px; margin-right: 12px; color: #fff; background: var(--grad); cursor: pointer; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--blue); }
textarea { resize: vertical; }

/* ---------------------------------------------------------- buttons (3D) */
.btn { --b: #2a3a6e; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 20px;
       border-radius: 14px; border: 1px solid var(--line-2); font: 800 14.5px var(--sans); letter-spacing: .01em; color: var(--ink); cursor: pointer;
       white-space: nowrap; background: linear-gradient(180deg, rgba(40,62,130,.75), rgba(22,36,84,.85));
       box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 4px 0 #0a1433, 0 10px 20px -10px rgba(0,0,0,.8);
       transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .2s; overflow: hidden; }
.btn:hover { color: #fff; filter: brightness(1.12); transform: translateY(-1px); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 1px 0 #0a1433, 0 4px 10px -6px rgba(0,0,0,.8); }
.btn .ico { width: 17px; height: 17px; }
.btn.primary { color: #fff; border-color: rgba(147,176,255,.5); background: linear-gradient(180deg, #5f88ff 0%, #2f66ff 45%, #1f4fe0 100%);
               box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 4px 0 #1235a8, 0 14px 30px -10px rgba(47,102,255,.95), 0 0 40px -12px rgba(51,214,255,.7); }
.btn.primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; transform: skewX(-20deg);
                      background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: shine 4.5s ease-in-out infinite; }
@keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.btn.primary:active { box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 1px 0 #1235a8, 0 6px 16px -8px rgba(47,102,255,.95); }
.btn.danger { color: #fff; border-color: rgba(255,140,150,.5); background: linear-gradient(180deg, #ff7a88, #ff4560 50%, #d92a45); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 4px 0 #8e1428, 0 12px 26px -10px rgba(255,69,96,.9); }
.btn.ok { color: #04261a; border-color: rgba(150,255,210,.6); background: linear-gradient(180deg, #7dffc8, #2ee59d 50%, #14b97a); box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 4px 0 #0a7a4f, 0 12px 26px -10px rgba(46,229,157,.8); }
.btn.gold { color: #241a00; border-color: rgba(255,230,140,.7); background: linear-gradient(180deg, #ffe57a, #f0b90b 55%, #cf9a00); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 4px 0 #7a5a00, 0 12px 26px -10px rgba(240,185,11,.85); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.big { padding: 15px 26px; font-size: 16.5px; border-radius: 16px; }
.btn.small { padding: 6px 12px; font-size: 12.5px; border-radius: 10px; box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 2px 0 #0a1433; }
.btn.small.primary { box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 3px 0 #1235a8, 0 8px 20px -8px rgba(47,102,255,.9); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: grayscale(.4); }

/* ---------------------------------------------------------- badges & messages */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 99px; font-size: 11.5px; font-weight: 800;
         letter-spacing: .03em; white-space: nowrap; border: 1px solid; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.badge.ok { color: var(--ok); background: rgba(46,229,157,.1); border-color: rgba(46,229,157,.35); }
.badge.warn { color: var(--warn); background: rgba(255,194,75,.1); border-color: rgba(255,194,75,.35); }
.badge.bad { color: var(--bad); background: rgba(255,90,110,.1); border-color: rgba(255,90,110,.38); }
.badge.info { color: var(--blue-3); background: rgba(95,136,255,.12); border-color: rgba(95,136,255,.38); }
.badge.live::before { animation: pulse 1.4s ease-in-out infinite; }
.badge.solid { color: #fff; background: var(--grad); border-color: rgba(255,255,255,.25); box-shadow: 0 0 20px -4px rgba(123,92,255,.9); }
.badge.solid::before { display: none; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.7); } }
.msg { position: relative; padding: 14px 18px 14px 46px; border-radius: 14px; margin: 0 0 18px; font-weight: 700; border: 1px solid; backdrop-filter: blur(10px); }
.msg::before { content: ""; position: absolute; left: 18px; top: 19px; width: 12px; height: 12px; border-radius: 50%; background: currentColor; box-shadow: 0 0 14px currentColor; }
.msg.ok { color: #b9ffe2; background: rgba(46,229,157,.1); border-color: rgba(46,229,157,.35); }
.msg.ok::before { background: var(--ok); }
.msg.warn { color: #ffe3a8; background: rgba(255,194,75,.1); border-color: rgba(255,194,75,.35); }
.msg.warn::before { background: var(--warn); }
.msg.bad { color: #ffc2ca; background: rgba(255,90,110,.1); border-color: rgba(255,90,110,.4); }
.msg.bad::before { background: var(--bad); }
.msg.info { color: #cfdcff; background: rgba(95,136,255,.12); border-color: rgba(95,136,255,.38); }
.msg.info::before { background: var(--cyan); }
.msg a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); background: rgba(3,10,32,.4); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 800;
     padding: 13px 14px; border-bottom: 1px solid var(--line-2); white-space: nowrap; background: rgba(47,102,255,.06); }
td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: rgba(47,102,255,.07); }
tr:last-child td { border-bottom: 0; }
td b { color: var(--ink); }

/* ---------------------------------------------------------- progress */
.bar { height: 14px; border-radius: 99px; overflow: hidden; background: rgba(3,10,32,.8); border: 1px solid var(--line-2); box-shadow: 0 2px 6px rgba(0,0,0,.5) inset; }
.bar > span { display: block; height: 100%; border-radius: 99px; background: var(--grad); background-size: 200% 100%; transition: width .5s var(--ease);
              box-shadow: 0 0 18px rgba(51,214,255,.7); position: relative;
              background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.18) 0 8px, transparent 8px 16px), var(--grad); animation: stripes 1s linear infinite; }
@keyframes stripes { to { background-position: 22px 0, 0 0; } }
.ring { --p: 0; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; flex: none; position: relative;
        background: conic-gradient(from 210deg, #2f66ff, #7b5cff calc(var(--p) * .5%), #33d6ff calc(var(--p) * 1%), rgba(95,136,255,.12) 0);
        box-shadow: 0 0 40px -8px rgba(47,102,255,.8); }
.ring-in { width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; text-align: center; align-content: center;
           background: radial-gradient(circle at 35% 25%, #13265e, #060f2b 70%); box-shadow: 0 2px 10px rgba(0,0,0,.7) inset, 0 0 0 1px var(--line-2); }
.ring-in b { font-size: 28px; line-height: 1; letter-spacing: -.03em; }
.ring-in span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.big-count { font-size: clamp(40px, 6vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.big-count small { font-size: .35em; color: var(--muted); letter-spacing: 0; }
.log { background: rgba(2,6,20,.9); color: #9fb4e8; font: 500 12.5px/1.7 var(--mono); padding: 14px 16px; border-radius: 14px; max-height: 320px; overflow: auto;
       white-space: pre-wrap; border: 1px solid var(--line); box-shadow: 0 2px 12px rgba(0,0,0,.6) inset; }
.spinner { width: 16px; height: 16px; border: 2.5px solid var(--cyan); border-right-color: transparent; border-radius: 50%; display: inline-block;
           animation: spin .7s linear infinite; vertical-align: -3px; filter: drop-shadow(0 0 6px var(--cyan)); }
@keyframes spin { to { transform: rotate(360deg); } }
details summary { cursor: pointer; font-weight: 800; color: var(--ink); margin-bottom: 8px; }

/* ---------------------------------------------------------- landing */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px; align-items: center; padding: 30px 0 50px; min-height: 560px; }
.hero h1 { font-size: clamp(40px, 6.2vw, 78px); line-height: .98; letter-spacing: -.045em; }
.hero h1 .line { display: block; }
.hero .lead { font-size: 18px; margin: 20px 0 28px; }
.hero-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; font-size: 13px; font-weight: 800; color: var(--ink);
        background: rgba(16,30,74,.6); border: 1px solid var(--line-2); }
.pill .ico { width: 15px; height: 15px; color: var(--ok); }

/* 3D stage */
.stage { position: relative; height: 520px; perspective: 1100px; }
.stage .orbit { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px solid rgba(95,136,255,.35); transform-style: preserve-3d;
                box-shadow: 0 0 30px rgba(47,102,255,.25), 0 0 30px rgba(47,102,255,.25) inset; }
.stage .o1 { width: 440px; height: 440px; margin: -220px; animation: orbit1 18s linear infinite; }
.stage .o2 { width: 330px; height: 330px; margin: -165px; border-color: rgba(51,214,255,.4); animation: orbit2 13s linear infinite; }
.stage .o1::after, .stage .o2::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; top: -7px; left: 50%; background: var(--cyan); box-shadow: 0 0 18px 4px var(--cyan); }
@keyframes orbit1 { from { transform: rotateX(72deg) rotateZ(0); } to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes orbit2 { from { transform: rotateX(64deg) rotateY(18deg) rotateZ(360deg); } to { transform: rotateX(64deg) rotateY(18deg) rotateZ(0); } }
.cube-wrap { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px; transform-style: preserve-3d; animation: float 6s ease-in-out infinite; }
.cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: spin3d 16s linear infinite; }
.cube .face { position: absolute; inset: 0; border-radius: 26px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 40px; letter-spacing: -.02em;
              background: linear-gradient(145deg, rgba(95,136,255,.95), rgba(31,79,224,.92) 55%, rgba(18,44,150,.95));
              border: 1.5px solid rgba(190,210,255,.55); box-shadow: 0 0 50px rgba(47,102,255,.55) inset, 0 0 40px rgba(47,102,255,.35); backface-visibility: visible; }
.cube .face svg { width: 74px; height: 74px; filter: drop-shadow(0 4px 6px rgba(0,0,40,.5)); }
.cube .f1 { transform: translateZ(85px); }
.cube .f2 { transform: rotateY(180deg) translateZ(85px); }
.cube .f3 { transform: rotateY(90deg) translateZ(85px); background: linear-gradient(145deg, rgba(150,120,255,.95), rgba(103,70,230,.92)); }
.cube .f4 { transform: rotateY(-90deg) translateZ(85px); background: linear-gradient(145deg, rgba(120,230,255,.95), rgba(20,150,210,.92)); }
.cube .f5 { transform: rotateX(90deg) translateZ(85px); }
.cube .f6 { transform: rotateX(-90deg) translateZ(85px); }
@keyframes spin3d { from { transform: rotateX(-22deg) rotateY(0); } to { transform: rotateX(-22deg) rotateY(360deg); } }
@keyframes float { 50% { transform: translateY(-18px); } }
.sphere { position: absolute; border-radius: 50%; animation: float 7s ease-in-out infinite;
          background: radial-gradient(circle at 32% 28%, #fff 0%, #b9ccff 8%, #5f88ff 30%, #1d3fb5 62%, #081a5a 100%);
          box-shadow: 0 20px 40px -10px rgba(47,102,255,.7), inset -8px -10px 20px rgba(0,0,40,.5); }
.sphere.s1 { width: 76px; height: 76px; top: 6%; left: 12%; }
.sphere.s2 { width: 44px; height: 44px; bottom: 14%; right: 8%; animation-delay: -2s;
             background: radial-gradient(circle at 32% 28%, #fff 0%, #d9ccff 8%, #9c7bff 30%, #5a34d6 62%, #24116e 100%); }
.sphere.s3 { width: 28px; height: 28px; top: 22%; right: 14%; animation-delay: -4s;
             background: radial-gradient(circle at 32% 28%, #fff 0%, #c9f6ff 10%, #33d6ff 35%, #0b7fa8 70%, #03384d 100%); }
.torus { position: absolute; width: 120px; height: 120px; bottom: 6%; left: 6%; border-radius: 50%; animation: float 8s ease-in-out infinite -3s;
         background: conic-gradient(from 0deg, #33d6ff, #2f66ff, #7b5cff, #ff4d9d, #33d6ff);
         -webkit-mask: radial-gradient(circle, transparent 38%, #000 39%); mask: radial-gradient(circle, transparent 38%, #000 39%);
         transform: rotateX(60deg) rotateZ(20deg); filter: drop-shadow(0 0 20px rgba(123,92,255,.7)); }
.float-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; color: var(--ink);
              background: rgba(10,22,60,.78); border: 1px solid var(--line-2); backdrop-filter: blur(12px); box-shadow: var(--shadow), 0 0 30px -10px rgba(47,102,255,.8);
              font-weight: 800; font-size: 14px; animation: float 6s ease-in-out infinite; }
.float-card small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.float-card .big { font-size: 22px; letter-spacing: -.02em; }
.fc1 { top: 8%; right: 0; animation-delay: -1s; }
.fc2 { bottom: 12%; left: 0; animation-delay: -3s; }
.fc3 { bottom: 2%; right: 12%; animation-delay: -5s; }

.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-radius: var(--radius); overflow: hidden; margin: 10px 0 60px;
         border: 1px solid var(--line-2); background: linear-gradient(90deg, rgba(47,102,255,.14), rgba(123,92,255,.12), rgba(51,214,255,.12)); }
.strip > div { padding: 22px 24px; border-right: 1px solid var(--line); }
.strip > div:last-child { border-right: 0; }
.strip b { display: block; font-size: 30px; letter-spacing: -.03em; }
.strip span { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.section { margin: 70px 0; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 34px; }
.section-head .lead { margin: 12px auto 0; }
.feature h3 { font-size: 19px; margin: 16px 0 8px; }
.feature p { color: var(--muted); margin: 0; font-weight: 600; }
.steps { counter-reset: s; }
.step { position: relative; padding-top: 64px; }
.step::before { counter-increment: s; content: "0" counter(s); position: absolute; top: 18px; left: 24px; font-size: 44px; font-weight: 800; letter-spacing: -.04em;
                background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta-band { position: relative; overflow: hidden; text-align: center; padding: 50px 24px; border-radius: 28px; margin: 60px 0 20px;
            background: radial-gradient(600px 300px at 50% 0%, rgba(51,214,255,.35), transparent 70%), linear-gradient(135deg, #1f4fe0, #4a2fc2 60%, #0b7fa8);
            border: 1px solid rgba(190,210,255,.35); box-shadow: 0 30px 80px -30px rgba(47,102,255,.9); }
.cta-band h2 { font-size: clamp(28px, 4vw, 46px); }
.cta-band p { color: #d7e2ff; font-weight: 600; font-size: 17px; margin: 12px 0 24px; }
.cta-band .btn.primary { background: #fff; color: #1235a8; border-color: #fff; box-shadow: 0 4px 0 #9bb2ff, 0 20px 40px -12px rgba(0,0,40,.6); }
.faq details { padding: 18px 22px; }
.faq details p { margin: 6px 0 0; color: var(--muted); font-weight: 600; }

/* ---------------------------------------------------------- plans */
.plan { display: flex; flex-direction: column; padding: 28px; transition: transform .3s var(--ease); }
.plan:hover { transform: translateY(-6px); }
.plan .plan-name { font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.plan .price { font-size: 58px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--ink); margin: 18px 0 4px; }
.plan .price sup { font-size: 24px; vertical-align: 26px; margin-right: 2px; color: var(--blue-3); }
.plan .price small { font-size: 14px; color: var(--muted); font-weight: 700; letter-spacing: 0; }
.plan .qty { font-size: 22px; font-weight: 800; color: var(--ink); margin: 14px 0 2px; }
.plan .qty span { color: var(--muted); font-size: 14px; font-weight: 700; }
.plan .qty span.grad-text { color: transparent; font-size: inherit; font-weight: 800; }
.plan ul { list-style: none; padding: 0; margin: 16px 0 24px; flex: 1; }
.plan li { display: flex; gap: 10px; align-items: center; padding: 7px 0; font-weight: 700; color: var(--ink-2); border-bottom: 1px dashed var(--line); }
.plan li .ico { width: 18px; height: 18px; color: var(--ok); padding: 2px; border-radius: 6px; background: rgba(46,229,157,.12); }
.plan.featured { background: linear-gradient(180deg, rgba(47,102,255,.35), rgba(74,47,194,.28) 60%, rgba(10,20,52,.7)); box-shadow: var(--glow); transform: translateY(-10px); }
.plan.featured:hover { transform: translateY(-16px); }
.plan.featured::before { padding: 2px; background: conic-gradient(from var(--a, 0deg), #33d6ff, #2f66ff, #7b5cff, #ff4d9d, #33d6ff); animation: rot 6s linear infinite; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes rot { to { --a: 360deg; } }

/* ---------------------------------------------------------- payment */
.pay-box { position: relative; border-radius: var(--radius); padding: 24px; overflow: hidden;
           background: radial-gradient(400px 200px at 100% 0%, rgba(240,185,11,.28), transparent 70%), linear-gradient(160deg, rgba(60,46,8,.7), rgba(20,16,6,.85));
           border: 1px solid rgba(240,185,11,.45); box-shadow: 0 20px 50px -24px rgba(240,185,11,.6); }
.pay-box .k { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #d9b65c; margin-top: 14px; }
.pay-box .v { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 700 22px var(--mono); color: #fff3c4; }
.pay-box .amount { font-size: 40px; font-family: var(--sans); font-weight: 800; letter-spacing: -.03em; color: var(--binance); text-shadow: 0 0 30px rgba(240,185,11,.5); }
.pay-steps { counter-reset: p; list-style: none; padding: 0; margin: 0 0 18px; }
.pay-steps li { counter-increment: p; position: relative; padding: 4px 0 10px 42px; font-weight: 700; color: var(--ink-2); }
.pay-steps li::before { content: counter(p); position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
                        font-weight: 800; font-size: 13px; color: #241a00; background: linear-gradient(180deg, #ffe57a, #f0b90b); box-shadow: 0 3px 0 #7a5a00; }
.copy { cursor: pointer; }
.thumb { max-width: 120px; max-height: 80px; border-radius: 10px; border: 1px solid var(--line-2); box-shadow: 0 8px 20px -10px #000; }

/* ---------------------------------------------------------- auth */
.auth { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; min-height: calc(100vh - 220px); }
.auth-card { width: 100%; max-width: 460px; justify-self: center; padding: 34px; }
.auth-card h1 { font-size: 34px; }
.auth-card > .mark { display: grid; }
.auth-art { position: relative; height: 480px; }
.auth-art .stage { height: 100%; }
.auth-art .art-text { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; z-index: 3; }
.auth-art .art-text h2 { font-size: 30px; }

/* ---------------------------------------------------------- dashboard */
.welcome { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; padding: 28px;
           background: radial-gradient(500px 240px at 0% 0%, rgba(51,214,255,.18), transparent 70%), linear-gradient(135deg, rgba(47,102,255,.32), rgba(74,47,194,.24) 60%, rgba(10,20,52,.6)); }
.welcome h1 { font-size: clamp(28px, 3.6vw, 40px); }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.checklist li a { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 18px; border-radius: 16px; color: var(--ink);
                  background: rgba(3,10,32,.45); border: 1px solid var(--line); transition: .2s var(--ease); }
.checklist li a:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: 0 0 30px -10px rgba(47,102,255,.8); }
.checklist .n { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.checklist .done .n { color: var(--ok); }
.checklist .done a { border-color: rgba(46,229,157,.35); }

/* ---------------------------------------------------------- admin tabs */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 24px; padding: 6px; border-radius: 16px; background: rgba(3,10,32,.5); border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 12px; color: var(--ink-2); font-weight: 800; font-size: 14px; }
.tabs a:hover { color: #fff; background: rgba(95,136,255,.1); }
.tabs a.active { color: #fff; background: linear-gradient(180deg, #5f88ff, #2f66ff); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 3px 0 #1235a8, 0 10px 24px -10px rgba(47,102,255,.9); }

/* ---------------------------------------------------------- footer */
.foot { text-align: center; padding: 40px 20px 34px; margin-top: 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; font-weight: 600; }
.foot-in { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.foot-in b { letter-spacing: .06em; }
.foot-copy { margin-top: 6px; color: var(--subtle); }
form.inline { display: inline; }

/* tilt */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }

/* ---------------------------------------------------------- responsive */
@media (min-width: 761px) and (max-width: 1240px) {
  nav.links:not(.always) a:not(.active) > span:not(.avatar) { display: none; }
  nav.links:not(.always) a:not(.active) { padding: 9px; }
}
@media (max-width: 1000px) {
  .hero, .auth { grid-template-columns: 1fr; }
  .stage { height: 420px; }
  .auth-art { display: none; }
  .grid4, .checklist { grid-template-columns: 1fr 1fr; }
  .grid3 { grid-template-columns: 1fr; }
  .plan.featured { transform: none; }
  .welcome { grid-template-columns: 1fr; text-align: left; }
}
@media (max-width: 760px) {
  .wrap { padding: 22px 16px 16px; }
  header.top { padding: 10px 16px; flex-wrap: wrap; }
  .menu-btn { display: inline-grid; place-items: center; }
  nav.links:not(.always) { display: none; width: 100%; flex-direction: column; align-items: stretch; padding: 8px 0 4px; }
  body.nav-open nav.links { display: flex; }
  .nav-sep { display: none; }
  .hide-sm { display: none !important; }
  .grid, .grid4, .checklist, .strip { grid-template-columns: 1fr; }
  .strip > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .stage { height: 340px; transform: scale(.78); transform-origin: center top; margin-bottom: -60px; }
  .card { padding: 18px; }
  .brand-text small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}