/* VIUTOP Experience v2 — mobile-first redesign.
   Stylesheet additive: preserves existing PHP, forms and original logo assets. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');
:root {
 --bg:#070a12;--surface:#101522;--surface2:#141a2a;--surface3:#1c2637;
 --line:#2d3448;--line2:#3d475d;--ink:#fcfcff;--muted:#a5acc0;--muted2:#828da5;
 --red:#fd354d;--orange:#ff7941;--blue:#756cff;--lime:#32ddb0;
 --grad:linear-gradient(111deg,#ff8e40 0%,#ff443c 48%,#ed124e 100%);
 --glow:0 12px 35px #f3283f34;--radius:22px;
}
html {scroll-padding-top:88px;overscroll-behavior-y:none}
body.viutop-v2 {background:var(--bg);font-family:'DM Sans',system-ui,-apple-system,Arial,sans-serif;min-height:100vh;letter-spacing:.005em}
body.viutop-v2:before {inset:0;position:fixed;z-index:-1;height:100vh;background:
 radial-gradient(ellipse 720px 380px at 85% -15%,#e5224635,transparent 75%),
 radial-gradient(ellipse 520px 360px at -15% 35%,#58327d23,transparent 80%),
 linear-gradient(160deg,#090e18 0%,#070a12 60%);}
body.viutop-v2:after {content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.15;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.12' filter='url(%23n)'/%3E%3C/svg%3E")}
body.viutop-v2 h1,body.viutop-v2 h2,body.viutop-v2 h3,body.viutop-v2 strong {letter-spacing:-.032em}
body.viutop-v2 h1,body.viutop-v2 h2,body.viutop-v2 h3 {font-family:Outfit,'DM Sans',sans-serif}
body.viutop-v2 a,body.viutop-v2 button { -webkit-tap-highlight-color:transparent}
body.viutop-v2 button:focus-visible,body.viutop-v2 a:focus-visible,body.viutop-v2 input:focus-visible,body.viutop-v2 select:focus-visible {outline:2px solid #ff825d;outline-offset:3px}
::selection{background:#ec354d;color:white}
.main-content {width:100%;max-width:1240px;padding:14px 15px 112px}
.topbar {height:66px;background:#0a0e18d9;border-bottom:1px solid #ffffff17;box-shadow:0 6px 22px #0002;backdrop-filter:blur(23px) saturate(1.4);-webkit-backdrop-filter:blur(23px) saturate(1.4)}
.topbar-inner {max-width:1280px;padding:0 17px}
.brand {width:145px;transition:transform .2s ease}.brand:active {transform:scale(.96)}
.desktop-nav a {font-weight:700;font-size:.9rem;position:relative}
.desktop-nav a.active:after {margin-top:6px;border-radius:4px;height:3px;box-shadow:0 0 15px #fd3944b3}
.top-actions {align-items:center;gap:4px}.top-actions .icon-button,.top-actions .admin-link {background:#ffffff07;border:1px solid #ffffff12;border-radius:13px;width:38px;height:38px;font-size:1.2rem;color:#e7e9f0}
.top-actions .icon-button .icon {width:19px;height:19px}
.bottom-nav {height:calc(69px + env(safe-area-inset-bottom));border:1px solid #ffffff22;border-bottom:0;border-radius:23px 23px 0 0;background:#111622ed;box-shadow:0 -12px 46px #0009;padding:5px 4px env(safe-area-inset-bottom);max-width:600px;left:50%;transform:translateX(-50%);overflow:visible;backdrop-filter:blur(30px)}
.bottom-nav a {font-size:.65rem;font-weight:750;color:#8e9ab1;border-radius:16px;position:relative;transition:color .22s ease,transform .22s ease}
.bottom-nav a .icon {width:23px;height:23px;transition:transform .25s ease}
.bottom-nav a.active {color:white}
.bottom-nav a.active:before {content:'';position:absolute;top:0;width:39px;height:39px;border-radius:12px;background:linear-gradient(150deg,#ff784338,#e72c5133);border:1px solid #ff63433c;pointer-events:none}
.bottom-nav a.active .icon {color:#ff6343;transform:translateY(-1px)}
.bottom-nav a.active span {color:#ff7460}
.bottom-nav a:active {transform:scale(.92)}
/* First screen: compact, immersive, useful immediately */
.intro-strip {display:flex;align-items:center;justify-content:space-between;padding:12px 4px 14px;gap:12px}
.live-indicator {font-size:.69rem;display:inline-flex;align-items:center;gap:9px;color:#b9c3d4;font-weight:800;letter-spacing:.065em;text-transform:uppercase}
.live-indicator i {width:7px;height:7px;border-radius:100%;background:#41e1b0;box-shadow:0 0 0 4px #35d9a518;animation:viu-pulse 2.5s ease-in-out infinite}
.intro-date {font-size:.7rem;color:#8790a8}
.spotlight {isolation:isolate;position:relative;border-radius:26px;border:1px solid #ffffff24;padding:20px 16px 17px;overflow:hidden;background:
 radial-gradient(ellipse at 83% 15%,#ff3a4839,transparent 52%),
 linear-gradient(140deg,#341522 0%,#181729 35%,#11182a 76%,#10121d 100%);
 box-shadow:0 22px 70px #0009,inset 0 1px #ffffff1b}
.spotlight:before {content:'';position:absolute;z-index:-1;inset:-50% -44% 48% 24%;transform:rotate(-17deg);background:linear-gradient(125deg,transparent 15%,#ff6d4428 48%,transparent 52%,#ff315319 63%,transparent 72%);pointer-events:none}
.spotlight:after {content:'';position:absolute;z-index:-1;width:180px;height:180px;right:-64px;top:95px;border:1px solid #fe6b452f;border-radius:100%;box-shadow:0 0 0 40px #ff5e3510,0 0 0 90px #ff5e3508;pointer-events:none}
.spotlight-intro {position:relative;z-index:1}.spotlight .eyebrow {color:#ffb899;font-size:.67rem;letter-spacing:.14em}
.spotlight-intro h1 {font-size:clamp(1.7rem,7vw,3.45rem);line-height:1.05;max-width:640px;font-weight:850;margin:11px 0 6px;color:#fff}
.spotlight-intro p {font-size:.79rem;line-height:1.46;color:#d2c7d1;max-width:490px}
.spotlight-period {display:flex;align-items:center;gap:6px;margin:18px 0 9px}
.spotlight-period a {background:#0c142299;border:1px solid #ffffff27;padding:8px 15px;border-radius:99px;font-size:.74rem;font-weight:800;transition:background .2s ease,color .2s ease,transform .2s ease}
.spotlight-period a.active {border-color:#ff6849;background:var(--grad);box-shadow:0 5px 17px #ec294b55}
.spotlight-period a:active {transform:scale(.94)}
.spotlight-modes {display:grid;grid-template-columns:repeat(3,1fr);padding:4px;gap:5px;border:1px solid #ffffff14;border-radius:15px;background:#080d17ac}
.spotlight-modes a {padding:9px 5px;border-radius:11px;text-align:center;color:#b5bad1;font-size:.8rem;font-weight:800;transition:all .2s ease}
.spotlight-modes a.active {background:#ff65401e;box-shadow:inset 0 0 0 1px #f45c5360;color:white}
.spotlight-leader {display:grid;grid-template-columns:106px minmax(0,1fr);align-items:center;gap:12px;position:relative;min-height:166px;padding:19px 2px 14px}
.leader-rank {position:absolute;top:10px;right:0;border:1px solid #ffc96265;color:#ffce67;background:#e4a72d16;border-radius:100px;padding:5px 10px;font-weight:900;font-size:.7rem;display:flex;align-items:center;gap:5px}
.leader-rank .icon {width:15px;height:15px}
.leader-glow {position:absolute;left:-26px;top:25px;width:195px;height:155px;opacity:.8;pointer-events:none;background:radial-gradient(ellipse,#fe4d4e4f,transparent 64%);filter:blur(10px)}
.leader-avatar {position:relative;width:104px;height:104px;border-radius:100%;border:3px solid #ff9b56;padding:4px;display:block;background:linear-gradient(130deg,#f94251,#b22253);box-shadow:0 0 0 5px #fa67491b,0 16px 35px #070810a8}
.leader-avatar .avatar-leader {width:100%;height:100%;object-fit:cover;border-radius:100%;display:grid;place-items:center;font-size:3rem;background:#1b2431}
.leader-info {padding-top:16px;min-width:0;position:relative}.leader-info .eyebrow {font-size:.62rem;color:#ffa3a0}
.leader-info h2 {font-size:clamp(1.18rem,5vw,2.2rem);line-height:1.1;font-weight:800;margin:6px 0 5px;max-width:300px;overflow-wrap:anywhere}
.leader-score {display:flex;align-items:baseline;gap:7px;margin:8px 0}.leader-score strong {font-size:clamp(1.65rem,7vw,2.65rem);font-family:Outfit;font-weight:900;line-height:1;color:#fff}.leader-score span {font-size:.71rem;color:#bac0ce}
.leader-open {display:inline-flex;align-items:center;gap:5px;padding:5px 0;color:#ffaf91;font-weight:800;font-size:.72rem}.leader-open .icon {height:14px;width:14px}
.spotlight-split .stats-summary {padding:12px 13px;margin:0;background:#090e19a6;border-color:#ffffff20;border-radius:17px}
.stats-summary {box-shadow:inset 0 1px #ffffff08;background:#101827;border-radius:19px}
.hero-total strong {font-family:Outfit;line-height:1.12;letter-spacing:-.045em}
.spotlight .hero-total strong {font-size:1.54rem}
.hero-total small {line-height:1.4}.eyebrow {letter-spacing:.11em}
.legend-stat small {font-variant-numeric:tabular-nums}.meter {background:#2b3143;border-radius:100px;height:7px;overflow:hidden}.meter b {height:100%;border-radius:100px;transition:width .9s cubic-bezier(.2,.7,.3,1)}
.meter b.short,.wide-split i,.channel-breakdown i {background:linear-gradient(90deg,#ff913d,#ef284b)}
.meter b.video,.wide-split b,.channel-breakdown b {background:linear-gradient(90deg,#8680ff,#4b9dff)}
.podium-preview {margin-top:15px}.podium-preview .section-head {margin:6px 2px 8px}.podium-preview .section-head h2 {font-size:.95rem}
.podium-preview .rank-list {background:#060c1691;border:1px solid #ffffff1a;border-radius:17px;overflow:hidden;padding:0 10px}
.hero-action {margin-top:13px!important;box-shadow:0 7px 25px #f52b4947}
.hero-action .icon {transition:transform .25s ease}.hero-action:hover .icon {transform:translateX(5px)}
/* Rankings and navigation cards */
.section-head {margin:5px 0 13px}.section-head h2 {font-size:1.21rem!important;font-weight:800}
.text-link {display:inline-flex;align-items:center;gap:5px;color:#d4dae7;font-weight:750;font-size:.72rem}
.text-link .icon {width:15px;height:15px}
.home-categories {margin-top:29px}
.category-grid {gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.category-card {min-height:172px;gap:3px;background:
 radial-gradient(circle at 80% -15%,#f042342b,transparent 58%),
 linear-gradient(149deg,#1e2535,#101522 72%);border-color:#ffffff1c;border-radius:19px;padding:13px 12px;box-shadow:inset 0 1px #ffffff0e,0 5px 24px #0002;transition:transform .25s ease,border-color .25s,box-shadow .25s;overflow:hidden}
.category-card:before {content:'';pointer-events:none;position:absolute;inset:auto -28px -83px auto;border-radius:100%;width:110px;height:110px;border:1px solid #ff674028;box-shadow:0 0 0 20px #ff60300a}
.category-card:active {transform:scale(.97)}.category-card:hover {border-color:#ff754e99;box-shadow:0 14px 35px #f82b3013,inset 0 1px #ffffff12}
.category-card .category-top {display:flex;align-items:center;justify-content:space-between;width:100%}
.category-card .category-symbol {width:43px;height:43px;display:grid;place-items:center;font-size:1.35rem;border-radius:14px;background:linear-gradient(138deg,#ff613726,#cf264225);border:1px solid #fd724546;box-shadow:inset 0 1px #ffffff10}
.category-arrow {display:grid;place-items:center;width:25px;height:25px;border-radius:100%;border:1px solid #ffffff2d;color:#adbbd5}.category-arrow svg {width:13px;height:13px}
.category-card strong {font-size:.91rem;line-height:1.13;max-width:165px;margin-top:8px}
.category-card small {color:#929bb3;font-size:.71rem}.category-mini {display:flex;margin:10px 0 4px;min-height:31px}.category-mini .mini-avatar {margin-right:-7px;position:relative;z-index:calc(5 - var(--mini,1));border:2px solid #202438;border-radius:100%;overflow:hidden;background:#182034}
.category-mini .avatar-sm {width:31px;height:31px;object-fit:cover}
.category-bottom {font-size:.69rem;font-weight:750;border-top:1px solid #ffffff14;margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;gap:5px}
.category-bottom>span:last-child {color:#ff977a;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.category-bottom .icon {width:12px;height:12px}
.category-large {min-height:200px}.category-large .category-mini {margin-top:14px}
.compare-promo {margin:25px 0 23px;padding:17px;min-height:109px;border:1px solid #ff70575b;border-radius:19px;background:radial-gradient(ellipse at 88% 90%,#ef334e4f,transparent 63%),linear-gradient(117deg,#3a1527,#241527 40%,#141b2b);box-shadow:0 13px 27px #ff364123;gap:14px}
.compare-promo .promo-icons {display:grid;place-items:center;width:42px;height:46px;background:#ff634224;border:1px solid #ff8c525c;border-radius:14px;flex:none}
.compare-promo .promo-icons .icon {color:#ff784c;width:25px;height:25px}
.compare-promo h2 {font-size:1.25rem;margin:2px 0 3px}.compare-promo p {font-size:.77rem;color:#dfc8d2;max-width:270px}
.compare-promo .eyebrow {font-size:.58rem;color:#ffa998}
.round-action {width:39px;height:39px;box-shadow:0 4px 15px #f72d4a42;background:var(--grad);border:0}
.daily-card {margin-top:24px}.daily-image {position:relative;display:block;max-width:280px;border:1px solid #ffffff24;border-radius:17px;overflow:hidden;box-shadow:0 14px 37px #02050e9c}.daily-image img {display:block;width:100%;aspect-ratio:3/4;object-fit:cover}.daily-image>span {position:absolute;bottom:0;left:0;right:0;padding:16px 10px;background:linear-gradient(transparent,#070913ed);font-weight:750;font-size:.75rem;display:flex;justify-content:center;gap:8px;align-items:center}
.daily-image .icon {height:15px}
/* ranked views */
.page-heading {padding:26px 4px 24px}.page-heading h1 {font-family:Outfit;font-size:clamp(2.1rem,8vw,3.7rem);font-weight:830}
.ranking-heading {position:relative;isolation:isolate;overflow:hidden;padding:28px 21px 27px;margin-top:6px;border:1px solid #ffffff24;border-radius:24px;background:radial-gradient(ellipse at 85% 16%,#fa464335,transparent 60%),linear-gradient(130deg,#321626,#151c2b 82%)}
.ranking-heading .back-link {display:inline-block;margin-bottom:13px}.ranking-atmosphere {position:absolute;right:-16px;bottom:-39px;opacity:.07;transform:rotate(-18deg);z-index:-1}.ranking-atmosphere .icon {width:200px;height:200px}
.period-tabs {display:flex;gap:7px;flex-wrap:wrap;margin:17px 0 11px}
.period-tabs>a,.period-tabs label span {border-radius:100px;min-width:76px;padding:10px 16px;text-align:center;font-weight:800;font-size:.77rem;border:1px solid #ffffff20;background:#181e2d}
.period-tabs>a.is-active,.period-tabs label:has(input:checked) span {background:var(--grad);border-color:#ff8862;box-shadow:0 7px 19px #fb315142}
.segmented.mode-tabs {display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#141b29;border:1px solid #ffffff19;border-radius:16px;padding:4px}
.segmented.mode-tabs a {border-radius:12px;padding:11px 2px;font-weight:820;text-align:center;color:#aeb8ca}
.segmented.mode-tabs a.is-active {background:linear-gradient(120deg,#ff753332,#f6374234);color:#fff;box-shadow:inset 0 0 0 1px #ff74564d}
.panel {border:1px solid #ffffff18;border-radius:22px;background:linear-gradient(155deg,#171e2b,#111522);box-shadow:inset 0 1px #ffffff0c,0 11px 28px #0003}
.rank-list {min-width:0}.channel-row {padding:13px 3px;border-color:#ffffff12;transition:background .2s,transform .2s,border-color .2s}
.channel-row:hover {background:#ffffff07}.channel-row:active {transform:scale(.989)}
.channel-row .avatar,.channel-row .avatar-sm {border:2px solid #ff77565c;object-fit:cover;border-radius:100%;box-shadow:0 2px 12px #0004}
.channel-row .rank-number {width:34px;height:38px;display:grid;place-items:center;background:#202a3c;color:#dbe5fa;border:1px solid #ffffff16;border-radius:11px;font-family:Outfit;font-size:1.03rem;font-weight:900}
.channel-row .rank-number.medal {color:#171820;background:linear-gradient(145deg,#ffe17b,#ffaf36);border-color:#ffbc43;box-shadow:0 0 18px #ffc04932}
.channel-row .rank-number.medal-2 {background:linear-gradient(120deg,#fafbff,#879ab2);border-color:#c9d2e0}.channel-row .rank-number.medal-3 {background:linear-gradient(130deg,#f9cb92,#c17b57);border-color:#cb936a}
.channel-main strong {font-size:.84rem;line-height:1.19;color:#f7f9ff}.channel-main small {font-size:.69rem;color:#8e98af}.channel-score {text-align:right}
.channel-score strong {font-family:Outfit;font-size:1.1rem;white-space:nowrap}.channel-score small {font-size:.66rem;color:#97a2b5}
.channel-row>.icon {opacity:.65}.movement {margin-top:4px}
.ranked-panel .section-head h2 {font-size:1.22rem}.updated-line {color:#8c98b0;font-size:.73rem;margin-bottom:5px}
.channel-breakdown {border-radius:100px!important;height:7px!important;background:#222b43!important;overflow:hidden}.channel-breakdown i,.channel-breakdown b {height:100%}
.channel-percent {color:#a9b2c7!important}
.ranking-actions {display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn {border-radius:14px;min-height:43px;font-size:.82rem;font-weight:800;display:inline-flex;justify-content:center;align-items:center;gap:8px;transition:transform .18s,box-shadow .2s,border-color .2s}
.btn .icon {width:18px;height:18px}.btn-primary {background:var(--grad);border:1px solid #ff705c;box-shadow:0 6px 22px #e92b4830;color:white}.btn-primary:hover {box-shadow:0 10px 28px #ec2b495e}
.btn-secondary {background:#1b2333;border:1px solid #ffffff24;color:#e7edf9}.btn-secondary:hover {border-color:#f36c5377}
.btn:active {transform:scale(.965)}
/* channel profile and detailed media */
.profile-hero {isolation:isolate;position:relative;align-items:flex-end;padding:82px 17px 18px;margin-top:12px;overflow:hidden;border-radius:24px;background:linear-gradient(125deg,#341525,#141d30 75%);border-color:#ffffff25;min-height:205px}
.profile-banner {position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 78% 10%,#fb4c4685,transparent 65%),linear-gradient(145deg,transparent 15%,#ff6b2622 15% 20%,transparent 22% 30%,#ec33501e 34%,transparent 55%);opacity:.7}
.profile-hero .avatar-xl {width:72px;height:72px;object-fit:cover;border:3px solid #ff744c;border-radius:100%;box-shadow:0 0 0 5px #ff75441d}
.profile-hero .profile-text h1 {font-size:clamp(1.3rem,5vw,2rem);overflow-wrap:anywhere}
.profile-hero .profile-text .eyebrow {font-size:.62rem;color:#ffc39d}.profile-meta {display:flex;align-items:center;gap:7px;margin:15px 0;color:#a9b3c7;font-size:.77rem}.profile-meta .icon {width:17px;height:17px}
.profile-kpis {gap:9px}.kpi-large,.kpi-small {background:linear-gradient(150deg,#1b2231,#101522);border:1px solid #ffffff1c;border-radius:18px;box-shadow:0 10px 20px #0003}
.kpi-large strong {font-family:Outfit;font-weight:900;font-size:clamp(1.8rem,6vw,2.4rem)}.kpi-small strong {font-family:Outfit}
.wide-split {height:13px;border-radius:100px;overflow:hidden}.wide-split i,.wide-split b {height:100%}
.simple-table,.video-list {overflow:hidden;border-radius:12px}.table-row {border-color:#ffffff12}.table-row strong {font-family:Outfit}
.video-item {min-height:90px;transition:background .2s,transform .2s}.video-item:active {transform:scale(.985)}
.video-item img {border:1px solid #ffffff2c;box-shadow:0 5px 14px #0005}.video-view b {font-family:Outfit}
.video-item:hover {background:#ffffff06}.older-panel {border-color:#ff74453d}.older-total strong {font-family:Outfit}
/* other views */
.filter-form,.compare-form {background:linear-gradient(145deg,#192131,#111725);border:1px solid #ffffff1c;border-radius:19px;padding:15px}
.search-input {border-radius:13px!important;background:#090e18!important;border:1px solid #ffffff25!important}
.filter-form select,.compare-form select,.stack input,.stack select,.stack textarea {border-radius:12px;background:#0d131e;border:1px solid #ffffff22;color:#f2f5ff}
.directory-card,.comparison-card,.history-item {background:linear-gradient(145deg,#1b2232,#111622);border:1px solid #ffffff1c;border-radius:16px;transition:transform .2s,border-color .2s}
.directory-card:hover,.history-item:hover {border-color:#ff815b6e;transform:translateY(-2px)}
.comparison-grid {gap:11px}.comparison-card {box-shadow:0 8px 20px #0003}.comparison-total {font-family:Outfit;font-weight:900}.bar-content i,.comparison-bars .bar-content>i {background:var(--grad)!important}
.image-frame {box-shadow:0 15px 45px #0009;border:1px solid #ffffff30}.daily-card h2 {font-size:1.16rem}
/* admin: strong identity and clear hierarchy without extra fake metrics */
.admin-shell {background:#080c15}.admin-sidebar {background:linear-gradient(180deg,#131a28,#0c111c);border-right:1px solid #ffffff15;padding-top:26px}
.admin-brand {width:176px;margin:4px auto 12px}.admin-nav-label {color:#758298;letter-spacing:.16em;font-size:.62rem;margin-left:13px}
.admin-sidebar nav a {color:#9cacc3;font-size:.88rem;border:1px solid transparent;border-radius:12px;min-height:47px}
.admin-sidebar nav a:hover {background:#ffffff0a;color:white}.admin-sidebar nav a.active {background:linear-gradient(95deg,#fa604b2a,#e71c4c11);border-color:#fc64584b;color:#fff;box-shadow:inset 3px 0 #f94d48}
.admin-topbar {background:#101522dc;border-bottom:1px solid #ffffff16;backdrop-filter:blur(16px);height:68px}
.admin-topbar>span {font-size:.82rem;font-weight:750;color:#bdc7d8}.admin-topbar>a:last-child {padding:9px 12px;border:1px solid #ffffff20;border-radius:11px}
.admin-content {min-width:0}.admin-heading {position:relative;isolation:isolate;padding:18px 0 22px;margin-bottom:8px}.admin-heading h1 {font-size:clamp(1.9rem,4.3vw,3.2rem);line-height:1.06;margin:8px 0;color:white}.admin-heading .eyebrow {color:#ffa58b}.admin-heading p {color:#a8b5c8}
.admin-kpis {gap:10px}.admin-kpi {position:relative;overflow:hidden;background:radial-gradient(ellipse at 130% 2%,#fc4c4128,transparent 55%),linear-gradient(140deg,#1a2233,#111722);border:1px solid #ffffff20;border-radius:19px;box-shadow:inset 0 1px #ffffff10,0 10px 26px #0004}
.admin-kpi:before {content:'';position:absolute;bottom:-35px;right:-30px;width:110px;height:110px;border:1px solid #ff5c4528;border-radius:100%;box-shadow:0 0 0 20px #ff6d3b0b}
.admin-kpi .icon {width:25px;height:25px;color:#ff7549;filter:drop-shadow(0 3px 6px #e43c4255)}
.admin-kpi strong {font-size:clamp(1.6rem,4vw,2.25rem);font-family:Outfit;font-weight:900}
.admin-kpi span {color:#b6c0d1;font-size:.77rem}
.admin-cols {gap:14px}.admin-cols .panel {border-color:#ffffff1a}
.admin-list-row {border-color:#ffffff17;transition:background .2s}.admin-list-row:hover {background:#ffffff06}
.admin-list-row .category-symbol {background:linear-gradient(155deg,#ff60402c,#f6344822);border:1px solid #ff725141;border-radius:12px}
.admin-mobile-nav {background:#101623ed;border:1px solid #ffffff1b;border-radius:22px 22px 0 0;box-shadow:0 -10px 35px #0009;max-width:620px;left:50%;transform:translateX(-50%)}
.admin-mobile-nav a.active {color:#ff7658}
.admin-panel-tabs {display:flex;gap:9px;margin-bottom:13px;overflow-x:auto;padding:2px 0 6px}
.admin-panel-tabs a {flex:none;border:1px solid #ffffff20;border-radius:13px;background:#161d2c;padding:9px 13px;font-size:.77rem;font-weight:800;color:#cad3e2}
.admin-panel-tabs a.active {background:#fc5a4225;border-color:#fc765060;color:#fff}
.admin-search {background:#0c121e;border:1px solid #ffffff27;border-radius:12px;padding:10px 12px;color:#fff;width:100%;margin:10px 0 14px}
.admin-search::placeholder {color:#929bb0}
.api-number strong {font-family:Outfit;font-size:2.6rem}
.quick-links a {min-height:46px;border-radius:12px;border:1px solid #ffffff18;transition:transform .2s,background .2s}
.quick-links a:hover {transform:translateX(2px);background:#ffffff0b}
.notice {border-radius:14px}
.login-page {background:radial-gradient(ellipse at 50% 15%,#a72b4129,transparent 60%),#070b13}
.login-card {background:linear-gradient(140deg,#1a2030,#101521);border-color:#ffffff25;box-shadow:0 26px 70px #0008}.login-card .logo-install {max-width:195px}
/* delight: reduced animation budget and meaningful motion */
[data-reveal] {opacity:0;transform:translateY(17px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.75,.25,1)}
[data-reveal].is-visible {opacity:1;transform:none}
[data-reveal-delay="1"] {transition-delay:75ms}[data-reveal-delay="2"] {transition-delay:140ms}
@keyframes viu-pulse{50%{box-shadow:0 0 0 8px #35d9a506}}
@keyframes viu-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.main-content>*,.admin-content>* {animation:viu-enter .35s cubic-bezier(.25,.7,.35,1) both}
.main-content>*:nth-child(2){animation-delay:50ms}.main-content>*:nth-child(3){animation-delay:90ms}.main-content>*:nth-child(4){animation-delay:120ms}
@view-transition {navigation:auto}
::view-transition-old(root) {animation:180ms ease both fade-out}
::view-transition-new(root) {animation:250ms ease both fade-in}
@keyframes fade-out{to{opacity:0}}@keyframes fade-in{from{opacity:0}}
/* tablet and desktop layouts */
@media(min-width:600px){
 .main-content {padding:22px 23px 110px}
 .spotlight {padding:24px 28px}.spotlight-leader {grid-template-columns:145px minmax(0,1fr);gap:25px}.leader-avatar {width:140px;height:140px}
 .spotlight-split .stats-summary {padding:20px}.category-card {min-height:194px;padding:19px}.category-grid {gap:13px}
 .compare-promo {padding:22px;gap:18px}.compare-promo h2 {font-size:1.55rem}
 .bottom-nav {bottom:10px;border-radius:21px;border:1px solid #ffffff28;max-width:520px;padding:4px;height:68px;box-shadow:0 13px 44px #0009}
 .admin-mobile-nav {max-width:520px;bottom:10px;border-radius:21px;border:1px solid #ffffff28;height:68px}
}
@media(min-width:820px){
 .main-content {padding:28px 33px 92px}.spotlight {padding:31px 35px;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);column-gap:28px}
 .spotlight-intro {grid-column:1}.spotlight-period,.spotlight-modes {grid-column:1}.spotlight-leader {grid-column:1;grid-row:4;align-self:stretch;padding-top:32px}
 .spotlight-split {grid-column:2;grid-row:1/span 4;display:flex;align-items:center}.spotlight-split .stats-summary {width:100%;grid-template-columns:1fr;gap:24px;padding:27px}
 .spotlight-split .hero-total strong {font-size:2.4rem}.spotlight-modes {max-width:370px}.spotlight-period {max-width:370px}
 .podium-preview {grid-column:1 / -1;grid-row:5}.podium-preview .rank-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;background:none;border:0;padding:0}
 .podium-preview .channel-row {border:1px solid #ffffff23;background:#0a111fa8;border-radius:15px;padding:14px 10px;grid-template-columns:25px 42px minmax(0,1fr) auto;gap:8px}
 .podium-preview .channel-row>.icon {display:none}.podium-preview .channel-score {grid-column:3 / -1;text-align:left}
 .hero-action {grid-column:1 / -1;justify-self:start;width:auto;padding-inline:22px}
 .category-grid {grid-template-columns:repeat(3,minmax(0,1fr))}.category-card {min-height:195px}
 .compare-promo {max-width:none}.admin-content {padding-left:32px;padding-right:32px}
 .bottom-nav {display:none}
}
@media(min-width:1090px){
 .category-grid {grid-template-columns:repeat(4,minmax(0,1fr))}.spotlight {column-gap:48px}
 .spotlight-leader {grid-template-columns:155px minmax(0,1fr)}.leader-avatar {width:148px;height:148px}.spotlight-intro h1 {font-size:3.3rem}
 .spotlight-split .stats-summary {min-height:230px}.ranked-panel .channel-row {padding:14px 9px}
}
@media(max-width:390px){.spotlight {padding:15px 12px}.spotlight-leader {grid-template-columns:86px minmax(0,1fr);gap:9px}.leader-avatar {width:86px;height:86px}.leader-info h2 {font-size:1.04rem}.leader-score strong {font-size:1.52rem}.rank-number {max-width:32px}.category-card {padding:12px 10px}.category-bottom {font-size:.65rem}.ranking-actions {grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after {animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 [data-reveal] {opacity:1!important;transform:none!important}
 ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* v2 administration, interactive utility refinements */
.admin-quick-status {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:20px;font-size:.74rem;color:#9aabc3}
.status-light {display:inline-flex;align-items:center;gap:8px;border:1px solid #39d7a835;border-radius:100px;background:#28af8a12;color:#b2f4e0;padding:8px 13px;font-weight:800}
.status-light i,.mini-status i {width:7px;height:7px;display:block;border-radius:100%;background:#4adcb3;box-shadow:0 0 10px #51dfbc77}
.mini-status {margin-left:auto;display:flex;align-items:center;justify-content:center;width:20px;height:20px}
.mini-status.bad i {background:#fb6a6e}.mini-status.idle i {background:#ffb961}.latest-panel .admin-list-row {text-decoration:none;display:flex;align-items:center;gap:13px}
.latest-panel .admin-list-row .avatar-sm {width:39px;height:39px;border-radius:50%;border:2px solid #ff785952;object-fit:cover}
.latest-panel .admin-list-row .row-core {flex:1}
.latest-panel .section-head {margin-bottom:10px}.admin-quick-status+.admin-kpis {margin-top:12px}
.admin-manage .panel {scroll-margin-top:90px}
@media(min-width:980px){.dashboard-grid {grid-template-columns:1.1fr 1fr}.latest-panel {margin-top:17px}}
[hidden]{display:none!important}

/* Visual storytelling for all screens: semantic data, not fabricated graphics */
.immersive-heading {border:1px solid #ffffff1e;border-radius:22px;padding:24px 20px;margin:13px 0 17px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 94% -20%,#fc544033,transparent 65%),linear-gradient(125deg,#271723,#131b2c 82%)}
.immersive-heading:after {content:'';position:absolute;right:-30px;top:-65px;height:200px;width:200px;border-radius:100%;border:1px solid #fa62452e;box-shadow:0 0 0 28px #ff5a3510,0 0 0 60px #fb4a3210;pointer-events:none}
.immersive-heading h1 {position:relative;z-index:1}.immersive-heading p {position:relative;z-index:1}
.distribution-display {display:grid;grid-template-columns:minmax(130px,auto) minmax(0,1fr);align-items:center;gap:16px;margin-top:16px}
.profile-donut {position:relative;width:clamp(115px,34vw,170px);height:clamp(115px,34vw,170px);border-radius:100%;padding:13px;background:conic-gradient(#ff7242 0 var(--shorts),#7575ff var(--shorts) 100%);box-shadow:0 0 0 7px #ffffff04,0 10px 26px #0005}
.profile-donut>div {width:100%;height:100%;border-radius:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#151c2b;box-shadow:inset 0 0 18px #0004}
.profile-donut strong {font-family:Outfit;font-size:clamp(1.16rem,4vw,1.7rem);line-height:1.13}.profile-donut small {font-size:.69rem;color:#9fb0c8}
.format-legend {display:grid;gap:15px;min-width:0}.format-legend>div {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 6px;padding-bottom:10px;border-bottom:1px solid #ffffff13}
.format-legend>div:last-child {border-bottom:0}.format-legend span {grid-column:1;display:inline-flex;align-items:center;gap:8px;color:#c9d3e4;font-size:.79rem}
.format-legend b {grid-column:2;grid-row:1;font-family:Outfit;font-size:1.03rem}.format-legend small {grid-column:1 / -1;color:#a2b0c5;font-size:.7rem}
@media(min-width:640px){.distribution-display {grid-template-columns:220px 1fr;gap:35px}.profile-donut {width:185px;height:185px}}