
:root{
  --bg:#060a11;--bg2:#0a0f19;--panel:#0e1522;--panel2:#111a29;--line:#1e2a3d;
  --text:#f5f7ff;--muted:#91a0bb;--violet:#7c2cff;--violet2:#a85cff;--blue:#238cff;
  --cyan:#34d5ff;--green:#39ee95;--yellow:#ffd55a;--danger:#ff5b7d;
}
*{box-sizing:border-box}html,body{margin:0;background:radial-gradient(circle at 78% -10%,#0d1932 0,transparent 30%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}
button,input,select{font:inherit}.app-shell{display:grid;grid-template-columns:218px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:18px 10px 14px;border-right:1px solid #152035;background:linear-gradient(180deg,#07101c 0,#061019 100%);display:flex;flex-direction:column;gap:15px;z-index:30}
.side-brand{display:flex;align-items:center;gap:9px;padding:0 8px 10px}.side-brand img{width:46px;height:46px;border-radius:12px;object-fit:cover}.side-brand div{display:flex;flex-direction:column}.side-brand strong{font-size:25px;letter-spacing:.02em}.side-brand span{font-size:8px;letter-spacing:.13em;color:#9aa8c0}
.side-nav{display:grid;gap:3px}.side-nav button{display:flex;gap:12px;align-items:center;border:0;background:transparent;color:#d6def0;padding:11px 13px;border-radius:10px;text-align:left}.side-nav button.active{background:linear-gradient(90deg,#282856 0,#142442 100%);box-shadow:inset 3px 0 #8b3cff}.side-nav button:hover{background:#101827}
.plan-card,.pro-side{border:1px solid #26334a;background:#0d1421;border-radius:12px;padding:13px}.plan-card>span{font-size:12px;color:#c0c7d5}.plan-card h3{font-size:24px;margin:5px 0 10px}.plan-card ul{padding:0;margin:13px 0 0;list-style:none;display:grid;gap:8px;font-size:11px;color:#c4ccda}.gradient-btn{border:0;color:#fff;font-weight:800;border-radius:9px;padding:11px 15px;background:linear-gradient(100deg,var(--violet),#6d27ff 48%,var(--blue));box-shadow:0 0 28px #692fff2b}.plan-card .gradient-btn,.pro-side .gradient-btn{width:100%}.pro-side{text-align:center;border-color:#7048b6;padding:15px}.pro-side .crown{font-size:30px;color:var(--yellow)}.pro-side strong{display:block;color:#b169ff}.pro-side strong em{font-style:normal;color:#ffd632}.pro-side p{font-size:12px;color:#d2d8e5;line-height:1.45}.side-footer{margin-top:auto;padding:0 8px;display:grid;gap:2px}.side-footer small{color:#697894;font-size:10px}
.main-column{min-width:0}.topbar{height:72px;position:sticky;top:0;z-index:25;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #162236;background:#07101be8;backdrop-filter:blur(18px);padding:0 18px}.top-nav{display:flex;align-items:center;gap:24px}.top-nav button{height:72px;border:0;background:none;color:#d7deec;position:relative;font-size:13px}.top-nav button.active:after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:linear-gradient(90deg,#7a2cff,#bd5cff);border-radius:2px}.top-actions{display:flex;gap:12px;align-items:center}.searchbox{height:40px;width:245px;display:flex;align-items:center;gap:8px;border:1px solid #24334d;border-radius:9px;padding:0 12px;background:#0c1625}.searchbox input{width:100%;border:0;background:none;outline:0;color:#fff}.searchbox input::placeholder{color:#8390a9}.icon-btn{position:relative;background:none;border:0;color:#fff;font-size:19px}.icon-btn span{position:absolute;right:-2px;top:-4px;background:var(--danger);width:15px;height:15px;border-radius:50%;font-size:8px;display:none;align-items:center;justify-content:center}.profile-pill{display:flex;gap:8px;align-items:center}.avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#4932ff,#1e98ff)}.profile-pill div{display:flex;flex-direction:column}.profile-pill b{font-size:12px}.profile-pill small{font-size:10px;color:#8f9ab0}
.content{padding:24px 20px 0;max-width:1480px;margin:0 auto}.hero-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(235px,1fr);gap:16px}.hero-banner{min-height:260px;border:1px solid #59318e;border-radius:13px;background:linear-gradient(105deg,#0d1020 0,#111126 48%,#160a33 100%);display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden;position:relative}.hero-copy{padding:24px;position:relative;z-index:2}.eyebrow{font-size:10px;letter-spacing:.18em;color:#a873ff;font-weight:900}.hero-copy h1{font-size:35px;line-height:.98;margin:8px 0 15px;letter-spacing:.02em}.hero-copy h1 span{background:linear-gradient(90deg,#c989ff,#7c60ff);-webkit-background-clip:text;color:transparent}.hero-copy>p:not(.eyebrow){color:#d1d6e1;line-height:1.5}.hero-actions{display:flex;gap:12px;margin-top:18px}.ghost-btn{border:1px solid #596981;background:#0b1019cc;color:#fff;border-radius:9px;padding:10px 15px}.hero-visual{position:relative;background:radial-gradient(circle at 55% 48%,#742bbd59,transparent 33%),linear-gradient(150deg,#0a0f1b,#12132b 55%,#25103c)}.hero-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 10%,#4b1e7d45 60%,#2d75c53d)}.orb{position:absolute;border-radius:50%;filter:blur(.3px)}.orb-a{width:120px;height:120px;right:50px;top:45px;background:radial-gradient(circle at 35% 35%,#ea63ff,#8a1fff 28%,#1f104f 65%,transparent 70%);box-shadow:0 0 60px #6f29ff55}.orb-b{width:58px;height:58px;left:30px;bottom:38px;background:radial-gradient(circle at 30% 30%,#27c9ff,#334dff 50%,#121a5c)}.orb-c{width:20px;height:20px;right:30px;top:35px;background:#d44dff;box-shadow:0 0 30px #cc4aff}.hero-mark{position:absolute;right:18px;bottom:18px;font-weight:900;color:#a146ff;letter-spacing:.08em}.trend-side{display:grid;gap:12px}.metric-card,.quote-card{border:1px solid #27364f;border-radius:12px;background:linear-gradient(180deg,#0e1725,#0b1421);padding:17px}.metric-card span{font-weight:800}.metric-card strong{display:block;font-size:30px;color:var(--green);margin:12px 0}.metric-card small,.quote-card small{color:#96a3b8;line-height:1.45}.quote-card{color:#be7aff;font-weight:800;line-height:1.45}.quote-card small{display:block;text-align:right;margin-top:12px;font-weight:400}
.panel{border:1px solid #213149;background:linear-gradient(180deg,#0c1522,#09121c);border-radius:13px;padding:14px;margin-top:16px}.panel-title{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:13px}.panel-title h2{font-size:17px;margin:0}.panel-title p{font-size:10px;color:#95a0b3;margin:4px 0 0}.text-link{border:0;background:none;color:#b464ff;font-size:11px}
.trend-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.game-card{min-width:0;border:1px solid #24344c;border-radius:12px;background:#0c1420;overflow:hidden;cursor:pointer;transition:.18s}.game-card:hover{transform:translateY(-2px);border-color:#5a43a2}.game-cover{height:105px;display:flex;align-items:center;justify-content:center;font-size:45px;position:relative;background:radial-gradient(circle at 50% 35%,#32415f,#131b2a 65%)}.game-rank{position:absolute;top:8px;left:8px;background:#1f5a42;color:#c6ffe4;border-radius:7px;padding:5px 8px;font-size:10px;font-weight:800}.game-card-body{padding:10px}.game-card h3{font-size:14px;margin:0 0 6px}.player-line{font-size:11px;color:#c4cede}.growth{color:var(--green);font-size:13px;font-weight:800;margin-top:9px}.spark{height:18px;margin-top:2px;position:relative}.spark:before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:linear-gradient(90deg,transparent,#35ed8e 25%,#35ed8e 70%,transparent);clip-path:polygon(0 65%,15% 35%,30% 55%,45% 15%,60% 65%,75% 30%,100% 0,100% 100%,0 100%)}.tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.tag{font-size:9px;padding:4px 7px;border-radius:999px;background:#162237;color:#a9b4c8}
.dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.compact{min-height:210px}.list-stack,.goal-stack{display:grid;gap:8px}.list-row{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:9px;border-radius:9px;background:#0b131e;border:1px solid #19263a}.list-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#18243a;font-size:19px}.list-row b{font-size:12px}.list-row small{display:block;color:#8f9caf;font-size:10px}.list-stat{color:var(--green);font-size:11px;font-weight:700}.goal-card{background:#0b131e;border:1px solid #1d2a40;border-radius:10px;padding:10px}.goal-card header{display:flex;justify-content:space-between;font-size:11px}.progress{height:6px;background:#1c283b;border-radius:999px;margin:8px 0;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,#2ed0ff,#4a7cff)}.goal-card small{color:#8e9aaf}
.pro-banner{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:18px;border-color:#6e3db6;background:linear-gradient(100deg,#111629,#17142f 52%,#1d0d40)}.pro-icon{font-size:38px;color:#aa80ff}.pro-copy h2{margin:0}.pro-copy h2 span{color:#ffd737}.pro-copy p{margin:4px 0 0;color:#9fa9bb;font-size:11px}.pro-benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;font-size:10px;color:#d3d8e4}
.footer{min-height:74px;border-top:1px solid #152137;margin-top:18px;display:flex;align-items:center;gap:20px;font-size:10px;color:#8693aa}.footer b{font-size:15px;color:#fff}.footer-right{margin-left:auto;display:flex;align-items:center;gap:12px}.footer select{background:#0c1420;border:1px solid #25344a;color:#fff;border-radius:8px;padding:8px}
.mobile-nav{display:none}
dialog{width:min(520px,92vw);border:1px solid #33415e;border-radius:18px;background:#0d1420;color:#fff;padding:22px;box-shadow:0 25px 100px #000d}dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}dialog .close{float:right;border:0;background:none;color:#98a3b7;font-size:27px}.price{display:flex;gap:8px;align-items:baseline}.price b{font-size:32px}.price span,.muted{color:#8f9bb0}.dialog-input,dialog select{width:100%;padding:11px;margin:7px 0;border-radius:10px;border:1px solid #2a3953;background:#09111c;color:#fff}.billing-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.pay-option,.secondary{border:1px solid #32415c;background:#111b2a;color:#fff;border-radius:9px;padding:10px}.wide{width:100%}.notif-list{display:grid;gap:8px;max-height:55vh;overflow:auto}.notif-row{padding:10px;border:1px solid #22314a;border-radius:9px;background:#0a111b}.notif-row.unread{border-color:#6149bd;background:#10152a}.notif-row small{display:block;color:#8f9bb0;margin-top:4px}.history-chart{height:220px;border:1px solid #22314a;border-radius:12px;background:#09111a;padding:12px}.history-chart svg{width:100%;height:100%;color:#6f65ff}.history-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px}.history-stat{padding:9px;background:#0a111b;border:1px solid #22314a;border-radius:10px}.history-stat b{display:block}.history-stat small{color:#8e9aae}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;background:#151d2c;border:1px solid #35445f;border-radius:10px;padding:10px 15px;transition:.2s;z-index:100}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1150px){.top-nav{display:none}.trend-cards{grid-template-columns:repeat(3,1fr)}.dashboard-grid{grid-template-columns:1fr 1fr}.dashboard-grid .panel:last-child{grid-column:span 2}.pro-banner{grid-template-columns:auto 1fr auto}.pro-benefits{grid-column:2/4}}
@media(max-width:850px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.topbar{height:62px;padding:0 12px}.profile-pill{display:none}.searchbox{width:min(57vw,260px)}.content{padding:14px 11px 85px}.hero-grid{grid-template-columns:1fr}.trend-side{grid-template-columns:1fr 1fr}.hero-banner{grid-template-columns:1fr;min-height:300px}.hero-visual{position:absolute;inset:0;opacity:.42}.hero-copy{z-index:2}.hero-copy h1{font-size:31px}.trend-cards{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.dashboard-grid .panel:last-child{grid-column:auto}.pro-banner{grid-template-columns:auto 1fr}.pro-benefits{grid-column:1/3;grid-template-columns:1fr 1fr}.pro-banner>.gradient-btn{grid-column:1/3}.footer{flex-wrap:wrap;padding:16px 0}.footer-right{margin-left:0}.mobile-nav{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,1fr);background:#08101af2;border-top:1px solid #1d2940;backdrop-filter:blur(18px);z-index:40;padding:7px 4px max(7px,env(safe-area-inset-bottom))}.mobile-nav button{border:0;background:none;color:#718099;display:flex;flex-direction:column;align-items:center;gap:2px}.mobile-nav button.active{color:#8d5cff}.mobile-nav span{font-size:9px}}
@media(max-width:560px){.trend-cards{grid-template-columns:1fr 1fr}.trend-side{grid-template-columns:1fr}.game-cover{height:86px}.pro-benefits{grid-template-columns:1fr}.pro-benefits{grid-column:1/3}.billing-options{grid-template-columns:1fr}}

.hidden-view{display:none!important}
.catalog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.catalog-item{border:1px solid #24344c;border-radius:12px;background:#0b1420;padding:13px;position:relative}
.catalog-item .emoji{font-size:30px}.catalog-item h3{font-size:14px;margin:8px 0 4px}.catalog-item small{color:#8f9bb0}.catalog-item .follow-btn{position:absolute;right:10px;top:10px;width:32px;height:32px;border-radius:50%;border:1px solid #34415b;background:#111a28;color:#75829a}.catalog-item .follow-btn.on{color:#ffd861;border-color:#6f5d21}
.alerts-center{display:grid;grid-template-columns:1fr 1fr;gap:12px}.alerts-center>div{border:1px solid #22314a;border-radius:12px;background:#0a111b;padding:12px}
.featured-full{min-height:160px;display:flex;align-items:center;justify-content:center;border:1px dashed #3a4560;border-radius:12px;background:#0b121d;color:#95a1b6;text-align:center;padding:24px}
.coming-card{padding:24px;border-radius:12px;border:1px dashed #3b4762;color:#95a1b6;background:#0a111b}
.ecosystem-disabled{opacity:.55}
@media(max-width:1050px){.catalog-grid{grid-template-columns:repeat(2,1fr)}.alerts-center{grid-template-columns:1fr}}
@media(max-width:560px){.catalog-grid{grid-template-columns:1fr}}

.footer a{color:#8693aa;text-decoration:none}.footer a:hover{color:#b56fff}.launch-legal{text-align:center;color:#697893;font-size:9px;line-height:1.5;margin:10px 0 18px}.launch-legal a{color:#9270df}
