:root{--bg:#0b0d12;--card:#151922;--line:#262c3a;--tx:#e8ecf4;--mut:#8b94a7;--ac:#6d5efc;--ok:#2ecc8f;--bad:#ff5d6c}
*{box-sizing:border-box}body{margin:0;font:16px/1.5 system-ui,sans-serif;background:var(--bg);color:var(--tx)}
a{color:var(--ac)}header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
header b{font-size:18px}nav a{margin-left:14px;text-decoration:none;color:var(--mut)}nav a:hover{color:var(--tx)}
main{max-width:980px;margin:0 auto;padding:20px 16px 60px}
.hero{padding:36px 0 18px}.hero h1{font-size:clamp(28px,6vw,44px);margin:0 0 8px}.hero p{color:var(--mut);margin:0 0 18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:0 0 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.grid .card{margin:0}.grid img{width:100%;height:130px;object-fit:cover;border-radius:10px;margin-bottom:8px;background:#0e1118}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}
button,.btn{background:var(--ac);color:#fff;border:0;border-radius:10px;padding:9px 14px;font:inherit;cursor:pointer;text-decoration:none;display:inline-block}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--tx)}button.on{background:var(--ac);border-color:var(--ac)}
button.bad{background:var(--bad)}input,select,textarea{width:100%;background:#0e1118;color:var(--tx);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font:inherit;margin:4px 0 10px}
.big{font-size:44px;font-weight:700}.mut{color:var(--mut)}.pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:13px;border:1px solid var(--line)}
.ok{color:var(--ok)}.err{color:var(--bad)}table{width:100%;border-collapse:collapse}td,th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1;min-width:140px}.hide{display:none}

/* ---------- polish ---------- */
html{scroll-behavior:smooth}
header{backdrop-filter:blur(10px);background:rgba(11,13,18,.82)}
header b{background:linear-gradient(90deg,#8b7dff,#4fd1c5);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.5px}
.hero{padding:44px 0 26px}
.hero h1{background:linear-gradient(90deg,#fff,#b9b2ff 60%,#7be0d6);-webkit-background-clip:text;background-clip:text;color:transparent}
.card{transition:transform .15s,border-color .15s}.grid .card:hover{transform:translateY(-3px);border-color:#3a4260}
.sec{font-size:26px;margin:46px 0 14px}.sub{margin:26px 0 12px;color:var(--mut);font-weight:600}

/* ---------- portfolio ---------- */
.pf-card{display:flex;gap:20px;align-items:center;background:linear-gradient(135deg,#171b27,#12151f);border:1px solid var(--line);border-radius:20px;padding:22px;position:relative;overflow:hidden}
.pf-card::before{content:"";position:absolute;inset:-40% -20% auto auto;width:260px;height:260px;background:radial-gradient(circle,rgba(109,94,252,.35),transparent 70%);pointer-events:none}
.avatar{flex:0 0 84px;height:84px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:28px;letter-spacing:1px;background:linear-gradient(135deg,#6d5efc,#22c3b3);box-shadow:0 0 0 4px rgba(109,94,252,.25)}
.pf-main h3{margin:0;font-size:26px}.role{margin:2px 0 10px;color:var(--mut)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.chips span{font-size:13px;padding:4px 12px;border-radius:99px;background:rgba(109,94,252,.15);border:1px solid rgba(109,94,252,.4)}
.about{margin:0 0 6px;font-weight:600}
blockquote{margin:0;padding-left:12px;border-left:3px solid var(--ac);color:var(--mut);font-style:italic}
.social{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:16px}
.social a{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:14px;color:var(--tx);text-decoration:none;font-weight:600;transition:transform .15s,border-color .15s,color .15s}
.social a:hover{transform:translateY(-3px)}
.social svg{width:26px;height:26px;flex:0 0 26px}
.s-tg:hover{border-color:#2aabee;color:#2aabee}.s-ig:hover{border-color:#e4405f;color:#e4405f}.s-wa:hover{border-color:#25d366;color:#25d366}
.s-x:hover{border-color:#fff}.s-yt:hover{border-color:#ff0033;color:#ff0033}
.foot{text-align:center;color:var(--mut);padding:24px 16px 40px;border-top:1px solid var(--line);font-size:14px}
@media(max-width:520px){.pf-card{flex-direction:column;text-align:center}.chips{justify-content:center}blockquote{border-left:0;padding:0}}

/* ---------- floating logo ---------- */
body{padding-bottom:96px}
.logo-fab{position:fixed;left:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:66px;height:66px;border:0;padding:0;background:none;border-radius:50%;cursor:pointer;z-index:40;animation:bob 3.2s ease-in-out infinite}
.logo-fab::before{content:"";position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(#6d5efc,#22d3c5,#ff5db1,#6d5efc);animation:spin 4s linear infinite;filter:blur(7px);opacity:.9}
.logo-fab svg{position:relative;width:100%;height:100%;display:block;filter:drop-shadow(0 6px 14px rgba(109,94,252,.55))}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes bob{50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.logo-fab,.logo-fab::before{animation:none}}
.fab-pop{position:fixed;left:14px;bottom:calc(94px + env(safe-area-inset-bottom,0px));width:min(290px,calc(100vw - 28px));z-index:41;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 14px 40px rgba(0,0,0,.55)}
.fp-top{display:flex;gap:12px;align-items:center;margin-bottom:12px}.avatar.sm{flex:0 0 44px;height:44px;font-size:15px;box-shadow:none}
.fp-icons{display:flex;gap:10px;margin-bottom:12px}.fp-icons a{flex:1;display:grid;place-items:center;height:42px;border-radius:12px;background:#0e1118;border:1px solid var(--line);color:var(--tx)}
.fp-icons svg{width:22px;height:22px}.fp-icons .s-tg:hover{color:#2aabee}.fp-icons .s-ig:hover{color:#e4405f}.fp-icons .s-wa:hover{color:#25d366}.fp-icons .s-yt:hover{color:#ff0033}
.btn.wide{display:block;text-align:center}

/* ---------- dashboard (drawer layout) ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;position:sticky;top:0;z-index:20;background:rgba(11,13,18,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{background:linear-gradient(90deg,#8b7dff,#4fd1c5);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.5px;font-size:18px}
.iconbtn{width:42px;height:42px;display:grid;place-items:center;padding:0;background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--tx)}
.coin-pill{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:12px;background:rgba(34,211,197,.1);border:1px solid rgba(34,211,197,.4);font-weight:700;color:#5eead4}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .25s;z-index:55}.overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;inset:0 auto 0 0;width:min(310px,86vw);background:#0f1219;border-right:1px solid var(--line);transform:translateX(-100%);transition:transform .25s;z-index:60;display:flex;flex-direction:column}
.drawer.open{transform:none}
.dhead{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid var(--line)}.dhead small{display:block;color:var(--mut);letter-spacing:2px;font-size:11px;margin-top:2px}
.dnav{flex:1;overflow-y:auto;padding:6px 12px 12px}
.dnav h4{margin:16px 6px 6px;font-size:12px;letter-spacing:1.5px;color:#2dd4bf;text-transform:uppercase}
.dnav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:var(--mut);text-decoration:none}
.dnav a:hover,.dnav a.on{background:rgba(34,211,197,.1);color:#5eead4}.dnav .ic{width:26px;text-align:center;font-size:18px}
.soon{margin-left:auto;font-style:normal;font-size:11px;padding:2px 9px;border-radius:99px;background:rgba(245,158,11,.14);color:#f59e0b;border:1px solid rgba(245,158,11,.4)}
.dfoot{padding:12px;border-top:1px solid var(--line)}
.ubox{display:flex;align-items:center;gap:12px;padding:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:10px}
.uav{flex:0 0 42px;height:42px;border-radius:50%;overflow:hidden;background:#0a84d6;display:grid;place-items:center;font-weight:700}.uav img{width:100%;height:100%;object-fit:cover}
.uinfo{min-width:0}.uinfo b,.uinfo small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.uinfo small{color:var(--mut)}
.logout{width:100%;background:transparent;border:1px solid rgba(255,93,108,.45);color:var(--bad)}
.hero2{border-radius:22px;padding:24px 20px;border:1px solid var(--line);background:radial-gradient(120% 140% at 100% 100%,rgba(124,58,237,.35),transparent 55%),linear-gradient(160deg,#0f1424,#0b0d12);margin-bottom:14px}
.hero2 h1{font-size:clamp(26px,6vw,36px);margin:12px 0 6px}.hero2 p{color:var(--mut);margin:0 0 18px}
.badge{display:inline-block;font-size:12px;letter-spacing:1.2px;padding:6px 12px;border-radius:99px;border:1px solid var(--line);color:var(--mut);background:rgba(255,255,255,.04)}
.badge.on{color:#5eead4;border-color:rgba(34,211,197,.5);background:rgba(34,211,197,.1)}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.pill-btn{background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--tx);padding:11px 16px;border-radius:12px;text-decoration:none;font:inherit;cursor:pointer}
.pill-btn:disabled{opacity:.55;cursor:default}
.refcard{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:16px;border-radius:18px;border:1px solid rgba(245,158,11,.35);background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(245,158,11,.03));margin-bottom:8px}
.rc-ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:rgba(245,158,11,.18)}
.rc-txt{flex:1 1 180px;display:flex;flex-direction:column}.rc-txt span{color:var(--mut);font-size:14px}
.refcard input{flex:1 1 200px;margin:0}.amber{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#1a1200;font-weight:700}
.eyebrow{margin:26px 0 0;font-size:12px;letter-spacing:2px;color:var(--mut);text-transform:uppercase}.sec2{margin:4px 0 14px;font-size:22px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px}
.tile .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;margin-bottom:12px}
.t1{background:rgba(34,211,197,.14)}.t2{background:rgba(124,58,237,.18)}.t3{background:rgba(255,93,108,.16)}.t4{background:rgba(37,211,102,.14)}
.tile .num{font-size:30px;font-weight:700;line-height:1.1}.tile .num.sm{font-size:20px;padding:5px 0}

/* ---------- bot + plans ---------- */
.pair-code{font:700 38px/1.2 ui-monospace,Menlo,monospace;letter-spacing:6px;text-align:center;padding:18px 10px;margin:12px 0;border-radius:14px;background:#0e1118;border:1px dashed var(--ac);color:#c7c0ff}
.qr-img{display:block;margin:12px auto;width:240px;max-width:100%;border-radius:12px;background:#fff;padding:8px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.plan{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 10px;background:#0e1118;border:1px solid var(--line);color:var(--tx)}
.plan b{font-size:20px;color:#5eead4}.plan span{color:var(--mut);font-size:14px}.plan:hover{border-color:var(--ac)}