.anav{height:86px;padding:0 3.8%;display:flex;align-items:center;gap:20px;border-bottom:1px solid #202a34;background:rgba(7,11,15,.96);position:sticky;top:0;z-index:100;backdrop-filter:blur(14px);font-family:Arial,Helvetica,sans-serif}
.anav-logo{display:flex;align-items:center;flex:0 0 auto}.anav-logo img{width:190px;max-height:62px;object-fit:contain;display:block}
.anav-links{display:flex;align-items:center;height:100%;gap:3px;overflow-x:auto;scrollbar-width:none}.anav-links::-webkit-scrollbar{display:none}
.anav-links a{height:70px;min-width:72px;padding:8px 10px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:12px;color:#cbd2d9;font-size:13px;font-weight:700;white-space:nowrap;position:relative;transition:.18s;text-decoration:none}.anav-links a span{font-size:16px;color:#aeb8c2}.anav-links a:hover{color:#fff;background:#111a23}.anav-links a.active{color:#fff;background:rgba(255,122,0,.09)}.anav-links a.active:after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:3px;border-radius:3px;background:#ff7a00}.anav-links a.active span,.anav-links a:hover span{color:#ff7a00}
.anav-right{margin-left:auto;display:flex;align-items:center;gap:9px;flex:0 0 auto}.anav-search{position:relative;width:min(315px,24vw);display:flex}.anav-search input{width:100%;height:42px;border:1px solid transparent;border-radius:23px;background:#1b2631;color:#fff;padding:0 44px 0 16px;outline:none}.anav-search input:focus{border-color:#ff7a00;box-shadow:0 0 0 3px #ff7a001c}.anav-search input::placeholder{color:#8d99a6}.anav-search button{position:absolute;right:4px;top:4px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#cbd3db;font-size:21px;cursor:pointer}.anav-search button:hover{background:#263440;color:#ff7a00}.anav-theme,.anav-menu{width:42px;height:42px;border:1px solid #2b3742;border-radius:50%;background:#18222c;color:#fff;cursor:pointer;font-size:18px;display:inline-flex;align-items:center;justify-content:center}.anav-theme:hover,.anav-menu:hover{border-color:#ff7a00;color:#ff7a00}.anav-menu{display:none}
body.light .anav{background:rgba(255,255,255,.95);border-bottom-color:#d5dce3}.anav.lightdummy{display:none}body.light .anav-links a{color:#4e5965}body.light .anav-links a:hover{color:#111820;background:#eef2f5}body.light .anav-links a.active{color:#111820}body.light .anav-search input{background:#e9eef3;color:#18202a;border-color:#d5dce3}body.light .anav-theme,body.light .anav-menu{background:#eef2f5;color:#18202a;border-color:#d5dce3}
@media(max-width:1200px){.anav{gap:12px}.anav-logo img{width:170px}.anav-links a{min-width:65px;padding:8px 8px;font-size:12px}.anav-search{width:230px}}
@media(max-width:950px){.anav{height:auto;min-height:72px;flex-wrap:wrap;padding:9px 4%;gap:9px}.anav-menu{display:inline-flex}.anav-right{margin-left:auto}.anav-links{display:none;order:5;width:100%;height:48px}.anav-links.open{display:flex}.anav-links a{height:44px;min-width:auto;padding:7px 12px}.anav-links a.active:after{bottom:1px}.anav-search{width:min(280px,45vw)}}
@media(max-width:600px){.anav{padding:8px 4%}.anav-logo img{width:155px;max-width:48vw}.anav-right{order:3;width:100%;flex:1}.anav-search{width:calc(100% - 49px)}.anav-search input{height:42px}.anav-links{order:5}.anav-links a{font-size:12px}.anav-links a span{font-size:14px}}

/* =========================================================
   AsuNime v48 — Mockup Match / Responsive UI
   Keeps original AsuNime logo and all existing PHP/data logic.
   ========================================================= */
:root{--v48-bg:#03070b;--v48-panel:#061019;--v48-panel2:#0b151e;--v48-border:#20303d;--v48-accent:#ff7a00;--v48-cyan:#20bfe8}
html{background:var(--v48-bg);overflow-x:hidden}
body{background:radial-gradient(circle at 50% -15%,#10202d 0,#03070b 34%,#02060a 100%)!important;color:#f4f7fa;overflow-x:hidden}
.anav{height:72px!important;min-height:72px!important;padding:0 clamp(14px,3.2vw,52px)!important;gap:10px!important;background:rgba(3,7,11,.94)!important;border-bottom:1px solid #17232d!important}
.anav-logo img{width:145px!important;max-height:50px!important}
.anav-menu{display:inline-flex!important;width:38px!important;height:38px!important;border:0!important;background:transparent!important;font-size:0!important;order:-1}
.anav-menu:before{content:'☰';font-size:21px;line-height:1;color:#eef3f7}
.anav-menu:hover{background:#101a23!important}
.anav-links{gap:2px!important}
.anav-links a{height:58px!important;min-width:66px!important;padding:8px 9px!important;border-radius:11px!important;font-size:12px!important}
.anav-links a.active{background:rgba(255,122,0,.10)!important}
.anav-links a.active:after{bottom:4px!important;height:3px!important}
.anav-right{gap:8px!important}
.anav-search{width:min(315px,25vw)!important}
.anav-search input{height:40px!important;background:#16222d!important;border-color:#202e3a!important}
.anav-theme{width:42px!important;height:42px!important;background:#111d27!important;border-color:#273746!important}
.home-shell{width:min(1480px,94%)!important;grid-template-columns:minmax(0,1fr) 300px!important;gap:22px!important;margin:0 auto!important}
.hero{margin-top:18px!important;height:275px!important;min-height:275px!important;border-radius:13px!important;border-color:#1f303d!important;box-shadow:0 18px 45px rgba(0,0,0,.35)!important}
.hero-bg{background-position:center!important}
.hero-content{width:60%!important;padding:28px 36px 48px!important}
.featured{font-size:10px!important;padding:6px 11px!important;border-radius:6px!important;margin-bottom:9px!important}
.hero h1{font-size:clamp(28px,2.7vw,42px)!important;max-width:610px!important;margin-bottom:9px!important}
.meta{font-size:11px!important;gap:10px!important;margin-bottom:8px!important}
.hero p{font-size:12px!important;line-height:1.45!important;max-width:560px!important;margin-bottom:9px!important;-webkit-line-clamp:2!important}
.chips{gap:5px!important;margin-bottom:10px!important}
.chip{font-size:9px!important;padding:4px 8px!important}
.btn{min-height:38px!important;padding:8px 13px!important;border-radius:8px!important;font-size:11px!important}
.btn.primary{box-shadow:0 7px 20px rgba(255,122,0,.18)!important}
.dots{right:18px!important;bottom:14px!important}
.section{padding-top:25px!important}
.section-head{margin-bottom:12px!important}
.section-title{font-size:19px!important;letter-spacing:-.2px}
.section-title .mark{font-size:18px!important}
.all{font-size:10px!important}
.row{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:13px!important}
.poster-wrap{aspect-ratio:2/2.85!important;border-radius:8px!important;border-color:#20303d!important;background:#0c141c!important;box-shadow:0 8px 20px rgba(0,0,0,.22)!important}
.card-title{font-size:12px!important;line-height:1.25!important;margin-top:7px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.sub{font-size:9px!important;margin-top:4px!important}
.rank{font-size:11px!important;padding:5px 7px!important;border-radius:7px 0 7px 0!important}
.bookmark{width:29px!important;height:29px!important;right:6px!important;top:6px!important;background:rgba(3,7,11,.72)!important;border:1px solid rgba(255,255,255,.12)!important;display:grid!important;place-items:center!important}
.home-sidebar{padding-top:18px!important}
.side-panel{background:linear-gradient(180deg,#061019,#050d14)!important;border-color:#20303d!important;border-radius:10px!important;padding:13px!important;margin-bottom:17px!important}
.side-title{font-size:14px!important;margin-bottom:12px!important}
.side-title .ico{font-size:15px!important;color:var(--v48-accent)!important}
.side-title a,.side-link{font-size:9px!important}
.schedule-item{grid-template-columns:44px minmax(0,1fr) auto!important;gap:8px!important;padding:7px 0!important}
.schedule-thumb{width:44px!important;height:52px!important;border-radius:5px!important}
.schedule-name{font-size:9.5px!important;line-height:1.25!important}
.schedule-date,.schedule-day{font-size:8px!important}
.schedule-day{padding:5px 6px!important}
.bookmark-panel{min-height:188px!important}
.bookmark-side-empty{font-size:9px!important;min-height:145px!important}
.bookmark-side-empty .big{font-size:34px!important}
.empty{background:#0b151e!important;border-color:#20303d!important;border-radius:9px!important}
.footer{margin-top:35px!important;padding:17px 3%!important;border-top-color:#17232d!important;font-size:10px!important}

/* Desktop/tablet navigation */
@media(max-width:1250px){
 .anav-logo img{width:132px!important}.anav-links a{min-width:60px!important;padding-inline:7px!important}.anav-search{width:220px!important}
 .home-shell{grid-template-columns:minmax(0,1fr) 280px!important}.row{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}
@media(max-width:1050px){
 .anav{flex-wrap:wrap;height:auto!important;min-height:72px!important;padding-block:8px!important}
 .anav-links{display:none!important;order:6;width:100%;height:44px!important}.anav-links.open{display:flex!important}
 .anav-search{width:42px!important}.anav-search input{display:none!important}.anav-search button{inset:0!important;width:42px!important;height:42px!important;background:#111d27!important;border:1px solid #273746!important}
 .home-shell{grid-template-columns:1fr!important}.home-sidebar{display:block!important;order:2!important;padding-top:8px!important}
 .hero{height:330px!important;min-height:330px!important}.hero-content{width:68%!important}
 .row{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}

/* Phone: match the supplied mockup — compact top bar + bottom navigation */
@media(max-width:680px){
 body{padding-bottom:68px!important}
 .anav{height:62px!important;min-height:62px!important;padding:7px 12px!important;gap:5px!important}
 .anav-menu{width:34px!important;height:38px!important}.anav-menu:before{font-size:19px!important}
 .anav-logo img{width:116px!important;max-width:43vw!important;max-height:43px!important}
 .anav-links{display:none!important}
 .anav-right{margin-left:auto!important;gap:5px!important}
 .anav-search{width:38px!important;height:38px!important}
 .anav-search button{width:38px!important;height:38px!important;font-size:19px!important}
 .anav-theme{width:38px!important;height:38px!important;font-size:16px!important}
 .home-shell{width:94%!important;display:block!important}
 .hero{margin-top:12px!important;height:300px!important;min-height:300px!important;border-radius:11px!important}
 .hero-content{width:100%!important;height:100%!important;padding:18px 17px 19px!important;justify-content:flex-end!important}
 .featured{font-size:9px!important;padding:5px 9px!important;margin-bottom:7px!important}
 .hero h1{font-size:25px!important;line-height:1.08!important;-webkit-line-clamp:2!important;margin-bottom:7px!important}
 .meta{font-size:9px!important;gap:7px!important;margin-bottom:6px!important}
 .hero p{font-size:10px!important;line-height:1.4!important;-webkit-line-clamp:2!important;margin-bottom:7px!important}
 .chip{font-size:8px!important;padding:3px 6px!important}
 .chips{margin-bottom:8px!important;max-height:22px!important}
 .btn{min-height:34px!important;padding:7px 10px!important;font-size:9.5px!important;border-radius:7px!important}
 .actions{gap:6px!important;flex-wrap:nowrap!important}.actions .btn{width:auto!important}
 .dots{right:14px!important;bottom:11px!important}.dots i{width:7px!important;height:7px!important}.dots i.active{width:16px!important}
 .section{padding-top:22px!important}.section-head{margin-bottom:10px!important}
 .section-title{font-size:16px!important}.section-title .mark{font-size:15px!important}.all{font-size:9px!important}
 .row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:13px 10px!important}
 .poster-wrap{border-radius:7px!important}.card-title{font-size:11px!important;margin-top:6px!important}.sub{font-size:8.5px!important}
 .rank{font-size:10px!important;padding:4px 6px!important}.bookmark{width:27px!important;height:27px!important;right:5px!important;top:5px!important}
 .home-sidebar{padding-top:3px!important}.side-panel{padding:12px!important;border-radius:9px!important;margin-bottom:13px!important}
 .side-title{font-size:13px!important}.schedule-item{grid-template-columns:42px minmax(0,1fr) auto!important}.schedule-thumb{width:42px!important;height:50px!important}.schedule-name{font-size:9px!important}
 .bookmark-panel{min-height:160px!important}.bookmark-side-empty{min-height:120px!important}
 .footer{margin-top:27px!important;padding-bottom:18px!important}
 /* mobile bottom nav */
 .anav-mobile-bottom{display:grid!important;position:fixed!important;left:10px!important;right:10px!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;height:54px!important;z-index:9999!important;grid-template-columns:repeat(4,1fr)!important;background:rgba(7,15,22,.96)!important;border:1px solid #263746!important;border-radius:17px!important;box-shadow:0 12px 35px rgba(0,0,0,.48)!important;backdrop-filter:blur(16px)!important}
 .anav-mobile-bottom a{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;color:#91a0ad!important;font-size:9px!important;font-weight:700!important}
 .anav-mobile-bottom a span{font-size:17px!important;line-height:1!important}.anav-mobile-bottom a.active{color:#ff7a00!important}
}
@media(min-width:681px){.anav-mobile-bottom{display:none!important}}
@media(max-width:380px){.anav-logo img{width:105px!important}.hero{height:292px!important;min-height:292px!important}.hero h1{font-size:23px!important}.actions .btn{font-size:9px!important;padding-inline:8px!important}.section-title{font-size:15px!important}}
@supports(padding:max(0px)){.anav{padding-left:max(12px,env(safe-area-inset-left))!important;padding-right:max(12px,env(safe-area-inset-right))!important}.anav-mobile-bottom{left:max(10px,env(safe-area-inset-left))!important;right:max(10px,env(safe-area-inset-right))!important}}


/* ===== V48.2 PUBLIC UI BUG FIXES ===== */
html,body{width:100%;max-width:100%;overflow-x:hidden}
img{max-width:100%}
.home-shell{min-width:0}
.home-main{min-width:0;overflow:visible}
.hero-slider,.hero{isolation:isolate}
.hero-bg{will-change:opacity,transform}
.hero-slide{z-index:0}
.hero-slide.active{z-index:1}
.hero-content{min-width:0}
.hero h1,.hero p,.card-title,.schedule-name{overflow-wrap:anywhere}
.actions .bookmark{position:static!important;display:inline-flex!important;flex:0 1 auto!important}
.actions .bookmark .hearticon{width:16px;height:16px;flex:0 0 auto}
.side-panel{min-width:0}
.schedule-item{min-width:0}
.schedule-item>div{min-width:0}

/* Keep the mockup hierarchy stable on medium screens. */
@media (min-width:1101px){
  .home-sidebar{display:block!important}
}
@media (min-width:681px) and (max-width:1100px){
  .home-sidebar{display:block!important;padding-top:4px!important}
  .home-shell{width:min(940px,94%)!important;display:block!important}
  .hero{height:360px!important;min-height:360px!important}
  .hero-content{width:72%!important;padding:32px 38px 60px!important}
  .row{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

/* Mobile header: no wrapping/overflow; search expands without breaking the bar. */
@media (max-width:680px){
  .anav{position:sticky!important;top:0!important;display:flex!important;flex-wrap:nowrap!important;height:62px!important;min-height:62px!important;padding-left:max(10px,env(safe-area-inset-left))!important;padding-right:max(10px,env(safe-area-inset-right))!important}
  .anav-logo{min-width:0!important;flex:1 1 auto!important}
  .anav-logo img{width:116px!important;max-width:100%!important}
  .anav-menu{order:-2!important;flex:0 0 34px!important}
  .anav-right{order:0!important;width:auto!important;flex:0 0 auto!important;margin-left:auto!important}
  .anav-search{width:38px!important;flex:0 0 38px!important;transition:width .2s ease!important}
  .anav-search input{display:none!important}
  .anav-search.expanded{width:min(62vw,260px)!important;flex-basis:min(62vw,260px)!important}
  .anav-search.expanded input{display:block!important}
  .anav-search.expanded button{right:4px!important}
  .anav-theme{flex:0 0 38px!important}
  .hero{height:300px!important;min-height:300px!important}
  .hero-content{padding:18px 17px 19px!important}
  .actions{min-width:0!important}
  .actions .btn{max-width:100%!important}
  .actions .btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .home-sidebar{display:block!important}
}
@media (max-width:380px){
  .anav-logo img{width:103px!important}
  .anav-right{gap:3px!important}
  .hero{height:292px!important;min-height:292px!important}
  .actions .btn.secondary span{display:none!important}
}

/* iOS/Safari safe-area and touch behavior */
@supports (-webkit-touch-callout:none){
  .anav{padding-top:max(7px,env(safe-area-inset-top))!important;height:calc(62px + env(safe-area-inset-top))!important;min-height:calc(62px + env(safe-area-inset-top))!important}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))!important;-webkit-text-size-adjust:100%}
  .anav-mobile-bottom{bottom:max(8px,env(safe-area-inset-bottom))!important}
}