/* VIUTOP 4.0 · Ranking-first identity, built for small mobile screens. */
@view-transition{navigation:auto}
:root{--v4-night:#090d15;--v4-plate:#141c2a;--v4-soft:#1c2536;--v4-stroke:rgba(215,232,255,.12);--v4-text:#f9fafc;--v4-secondary:#b0bdce;--v4-flame:#ff6948}
body.viutop-v4{background:var(--v4-night);color:var(--v4-text);font-size:15px;line-height:1.42}
body.viutop-v4::before{background:radial-gradient(ellipse 75vw 35vh at 100% -13%,rgba(236,65,45,.12),transparent 75%),var(--v4-night)}
body.viutop-v4 .topbar{height:64px;background:rgba(9,13,21,.94);border-bottom:1px solid rgba(255,255,255,.09)}
body.viutop-v4 .topbar-inner{min-height:64px;padding:0 16px;max-width:1360px}
body.viutop-v4 .brand img{width:134px}
body.viutop-v4 .top-actions .icon-button,body.viutop-v4 .top-actions .admin-link{width:38px;height:38px;border-radius:11px}
body.viutop-v4 .main-content{max-width:1320px;padding:14px 14px calc(108px + env(safe-area-inset-bottom,0px));overflow:visible}
body.viutop-v4 .site-footer{font-size:13px}
body.viutop-v4 .v4-home-top{min-width:0}
body.viutop-v4 .v4-toptitle{padding:4px 0 13px}
body.viutop-v4 .v4-overline{display:flex;align-items:center;gap:9px;color:#ffb39d;font-size:10px;font-weight:850;letter-spacing:.15em}
body.viutop-v4 .v4-live-dot{height:8px;width:8px;background:#ff7653;border-radius:50%;box-shadow:0 0 0 4px #ff765319}
body.viutop-v4 .v4-headerrow{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-top:4px}
body.viutop-v4 .v4-headerrow h1{font-size:clamp(1.47rem,5.8vw,2.9rem);letter-spacing:-.052em;line-height:1.05;margin:3px 0 4px}
body.viutop-v4 .v4-headerrow p{color:#b3c0d1;font-size:12px;margin:0}
body.viutop-v4 .v4-date{flex:none;padding:6px 9px;border:1px solid #ffffff22;background:#ffffff09;border-radius:8px;font-size:10px;color:#d9dee9;font-weight:800}
body.viutop-v4 .v4-filters{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:0 0 13px}
body.viutop-v4 .v4-mode,body.viutop-v4 .v4-days{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;border:1px solid #ffffff15;background:#151b27;padding:4px;border-radius:12px;min-width:0}
body.viutop-v4 .v4-mode a,body.viutop-v4 .v4-days a{display:grid;place-items:center;min-width:0;min-height:38px;padding:6px 9px;text-decoration:none;border-radius:9px;color:#bec6d5;font-size:12px;font-weight:800;line-height:1.2;transition:background-color .18s,color .18s,transform .18s}
body.viutop-v4 .v4-mode a:hover,body.viutop-v4 .v4-days a:hover{color:white;background:#ffffff13}
body.viutop-v4 .v4-mode a.is-active,body.viutop-v4 .v4-days a.is-active{color:#fff;background:linear-gradient(112deg,#d92e42,#ff7d40);box-shadow:0 3px 14px #ef49462f}
body.viutop-v4 .v4-days a{padding:6px 7px;font-size:11px}
body.viutop-v4 .v4-board{position:relative;isolation:isolate;overflow:hidden;border:1px solid #ffffff24;background:linear-gradient(165deg,#1c2332,#111824 48%,#111720);box-shadow:0 20px 44px #0007,0 1px #ffffff0c inset;border-radius:20px;min-width:0}
body.viutop-v4 .v4-board::before{content:'';position:absolute;right:-20%;top:-190px;width:70%;height:330px;background:radial-gradient(circle,#e6454732,transparent 67%);z-index:-1;pointer-events:none}
body.viutop-v4 .v4-boardhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:15px 13px 12px;border-bottom:1px solid #ffffff15}
body.viutop-v4 .v4-boardhead h2{font-size:1rem;line-height:1.2;margin:0}
body.viutop-v4 .v4-boardhead p{color:#acb9cb;font-size:11px;margin:4px 0 0}
body.viutop-v4 .v4-board-count{font-size:11px;color:#ffd3bf;border:1px solid #ff8a6144;background:#ff72591c;border-radius:100px;white-space:nowrap;padding:5px 8px;font-weight:900}
body.viutop-v4 .v4-top-list{display:grid;grid-template-columns:minmax(0,1fr);gap:0;min-width:0;padding:4px 9px 0}
body.viutop-v4 .v4-top-column{min-width:0}
body.viutop-v4 .v4-entry{display:grid;grid-template-columns:29px 40px minmax(0,1fr) auto;min-width:0;gap:9px;min-height:66px;padding:8px 4px;align-items:center;text-decoration:none;color:#fff;border-bottom:1px solid #ffffff14;position:relative;border-radius:9px;transition:background .18s,transform .18s}
body.viutop-v4 .v4-entry:hover{background:#ffffff08;transform:translateX(2px)}
body.viutop-v4 .v4-entry:active{background:#ffffff11;transform:scale(.995)}
body.viutop-v4 .v4-top-column:last-child .v4-entry:last-child{border-bottom:none}
body.viutop-v4 .v4-position{font-size:12px;color:#98a8be;font-weight:900;font-variant-numeric:tabular-nums;text-align:center}
body.viutop-v4 .v4-position.v4-medal{display:grid;place-items:center;border:1px solid #ffffff1b;height:30px;min-width:29px;border-radius:9px;font-size:12px}
body.viutop-v4 .v4-medal-1{background:linear-gradient(145deg,#f6d57f30,#60431528);border-color:#bda16088!important;color:#ffe49a}
body.viutop-v4 .v4-medal-2{background:linear-gradient(145deg,#d5e5fd27,#4b556b24);color:#d8e3f4}
body.viutop-v4 .v4-medal-3{background:linear-gradient(145deg,#d8a78227,#5a342928);color:#ffbe9c}
body.viutop-v4 .v4-avatar{display:block;width:40px;height:40px;object-fit:cover;border-radius:50%;border:2px solid #ffffff35;background:#2a3445;flex:none}
body.viutop-v4 .v4-entry-name{display:flex;flex-direction:column;min-width:0;gap:3px}
body.viutop-v4 .v4-entry-name strong{font-size:clamp(12.5px,3.5vw,14.5px);font-weight:800;line-height:1.25;letter-spacing:-.028em;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.viutop-v4 .v4-entry-name small{font-family:'DM Sans',system-ui,sans-serif;font-size:10.7px;font-weight:550;line-height:1.2;color:#9cabbe;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.viutop-v4 .v4-entry-views{text-align:right;display:flex;flex-direction:column;gap:1px;justify-content:center;min-width:59px;padding-left:2px;font-variant-numeric:tabular-nums}
body.viutop-v4 .v4-entry-views strong{font-size:clamp(15px,4vw,18px);line-height:1.15;letter-spacing:-.035em;color:#fff;font-weight:900}
body.viutop-v4 .v4-entry-views small{color:#aab4c4;font-size:10.5px}
body.viutop-v4 .v4-top-column:first-child .v4-entry:first-child{background:linear-gradient(94deg,#ff824017,#ffffff02);border-radius:10px}
body.viutop-v4 .v4-top-column:first-child .v4-entry:first-child .v4-entry-views strong{color:#ffc08c}
body.viutop-v4 .v4-boardfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #ffffff16;padding:11px 13px;color:#aebbc9;font-size:11px}
body.viutop-v4 .v4-boardfoot a{color:#ffab89;text-decoration:none;font-weight:850;white-space:nowrap}
body.viutop-v4 .v4-no-data{padding:25px 16px;min-height:150px;display:grid;align-content:center;gap:10px;text-align:center}
body.viutop-v4 .v4-no-data strong{font-size:17px}
body.viutop-v4 .v4-no-data p{font-size:13px;color:#b2bed0}
body.viutop-v4 .v4-categories{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
body.viutop-v4 .v4-category-tile{position:relative;display:flex;flex-direction:column;gap:9px;min-height:136px;padding:16px 13px;background:linear-gradient(149deg,#202638,#131a27);border:1px solid #ffffff1e;border-radius:16px;box-shadow:0 8px 22px #0004;text-decoration:none;color:#fff;transition:transform .2s,border .2s}
body.viutop-v4 .v4-category-tile:hover{transform:translateY(-2px);border-color:#ff986c7d}
body.viutop-v4 .v4-category-tile strong{display:block;font-size:13px;line-height:1.25;font-weight:820;overflow-wrap:anywhere}
body.viutop-v4 .v4-category-tile small{display:block;font-size:11px;color:#a9b8cb;margin-top:4px}
body.viutop-v4 .v4-category-icon{display:grid;place-items:center;width:35px;height:35px;font-size:19px;border:1px solid #fd83653e;background:#fa634817;border-radius:10px}
body.viutop-v4 .v4-category-arrow{position:absolute;right:11px;top:10px;color:#ffb493;font-weight:900}
body.viutop-v4 .v4-home-actions{display:grid;grid-template-columns:1fr;gap:10px;margin:22px 0}
body.viutop-v4 .v4-home-actions a{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:15px;background:linear-gradient(100deg,#341b2d,#1a2232);border:1px solid #ed62583d;color:#fff;text-decoration:none;font-size:17px;font-weight:850}
body.viutop-v4 .v4-home-actions svg{color:#ff926b}
body.viutop-v4 .v4-home-actions a span{display:flex;flex:1;flex-direction:column;gap:2px}
body.viutop-v4 .v4-home-actions a small{color:#b8bdd0;font-size:11px;font-weight:500}
body.viutop-v4 .v4-home-image{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;background:#141b2a;border:1px solid #ffffff19;border-radius:13px;padding:16px;margin:18px 0;font-size:12px}
body.viutop-v4 .v4-home-image span{color:#acbac9;font-weight:800;letter-spacing:.07em}
body.viutop-v4 .v4-home-image a{color:#ffab88;text-decoration:none;font-weight:800}
body.viutop-v4 .ranked-panel .v4-top-list{padding:5px 2px}
body.viutop-v4 .ranked-panel .v4-entry{padding:9px 8px}
body.viutop-v4 .ranked-panel .v4-entry-name strong{font-size:14px}
body.viutop-v4 .ranked-panel .v4-entry-views strong{font-size:18px}
body.viutop-v4 .page-heading h1{font-size:clamp(1.75rem,6vw,3.15rem)}
body.viutop-v4 .page-heading{padding:20px 17px}
body.viutop-v4 .admin-content{overflow-x:clip}
body.viutop-v4 .v4-admin-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body.viutop-v4 .v4-admin-category{background:#202a3b;border:1px solid #ffffff1b;padding:13px;border-radius:13px;display:flex;flex-direction:column;gap:5px}
body.viutop-v4 .v4-admin-category b{font-size:13px}
body.viutop-v4 .v4-admin-category span{font-size:12px;color:#acb9c8}
body.viutop-v4 .v4-admin-imports{display:grid;gap:7px}
body.viutop-v4 .v4-import-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;border-bottom:1px solid #ffffff18;padding:14px 3px}
body.viutop-v4 .v4-import-row>div:first-child{flex:1 1 150px;min-width:0}
body.viutop-v4 .v4-import-row strong,body.viutop-v4 .v4-import-row small{display:block}
body.viutop-v4 .v4-import-row strong{font-size:13px}
body.viutop-v4 .v4-import-row small{font-size:11px;color:#a5b2c6}
body.viutop-v4 .v4-import-form{display:flex;flex-wrap:wrap;gap:7px;flex:2 1 250px}
body.viutop-v4 .v4-import-form input{width:auto;min-width:0;flex:1 1 180px;background:#0e1522;border:1px solid #ffffff2c;border-radius:10px;padding:9px;color:white;font-size:12px}
body.viutop-v4 .v4-ok{font-size:12px;color:#75e5b3}
/* App-style bottom navigation with safe-area and no cramped labels */
body.viutop-v4 .bottom-nav,body.viutop-v4 .admin-mobile-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important;height:calc(69px + env(safe-area-inset-bottom,0px))!important;overflow:hidden!important}
body.viutop-v4 .bottom-nav a,body.viutop-v4 .admin-mobile-nav a{gap:4px;font-size:clamp(10px,2.6vw,11px);overflow:hidden;min-width:0;white-space:nowrap;padding:4px 0}
body.viutop-v4 .bottom-nav a span,body.viutop-v4 .admin-mobile-nav a span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.viutop-v4 .bottom-nav a.active,body.viutop-v4 .admin-mobile-nav a.active{color:#ffa78a}
@media(min-width:600px){
 body.viutop-v4 .main-content{padding:20px 24px 100px}
 body.viutop-v4 .v4-home-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.viutop-v4 .v4-categories{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.viutop-v4 .v4-headerrow h1{font-size:2.5rem}
 body.viutop-v4 .v4-top-list{padding:10px 14px}
 body.viutop-v4 .v4-entry{min-height:70px;grid-template-columns:32px 43px minmax(0,1fr) auto;padding:8px}
}
@media(min-width:800px){
 body.viutop-v4 .main-content{padding:23px 31px 80px}
 body.viutop-v4 .v4-top-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 21px}
 body.viutop-v4 .v4-top-column:first-child{border-right:1px solid #ffffff12;padding-right:13px}
 body.viutop-v4 .v4-top-column:last-child{padding-left:2px}
 body.viutop-v4 .v4-entry{grid-template-columns:30px 39px minmax(0,1fr) auto;min-height:62px;gap:10px;padding:8px 5px}
 body.viutop-v4 .v4-entry-name strong{font-size:14px}
 body.viutop-v4 .v4-entry-views strong{font-size:17px}
 body.viutop-v4 .v4-board{border-radius:22px}
 body.viutop-v4 .v4-boardhead{padding:17px 22px}
 body.viutop-v4 .v4-boardhead h2{font-size:1.15rem}
 body.viutop-v4 .v4-headerrow h1{font-size:2.45rem}
 body.viutop-v4 .v4-filters{display:flex;justify-content:space-between}
 body.viutop-v4 .v4-mode{min-width:305px}
 body.viutop-v4 .v4-days{min-width:170px}
 body.viutop-v4 .v4-categories{grid-template-columns:repeat(4,minmax(0,1fr))}
 body.viutop-v4 .v4-category-tile{min-height:138px}
 body.viutop-v4 .v4-admin-category-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:355px){
 body.viutop-v4 .main-content{padding-left:10px;padding-right:10px}
 body.viutop-v4 .v4-entry{grid-template-columns:25px 34px minmax(0,1fr) auto;gap:6px;min-height:65px;padding:7px 3px}
 body.viutop-v4 .v4-avatar{height:34px;width:34px}
 body.viutop-v4 .v4-entry-name strong{font-size:12px}
 body.viutop-v4 .v4-entry-name small{font-size:10px}
 body.viutop-v4 .v4-entry-views strong{font-size:14px}
 body.viutop-v4 .v4-entry-views{min-width:52px}
 body.viutop-v4 .v4-filters{gap:5px}
 body.viutop-v4 .v4-mode a{padding:6px 5px;font-size:11px}
 body.viutop-v4 .v4-days a{padding:6px 5px;font-size:10px}
 body.viutop-v4 .v4-boardhead{padding:12px 10px}
}
@media(prefers-reduced-motion:reduce){body.viutop-v4 *,body.viutop-v4 *::before,body.viutop-v4 *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}