/* ============================================================
   NoriPlay V45 — HyperFlow Preview Engine / Ultimate Clean UI
   ============================================================ */
:root{
  --np45-radius-xl:26px;
  --np45-radius-lg:18px;
  --np45-radius-md:13px;
  --np45-glass:color-mix(in srgb,var(--surface) 86%,transparent);
  --np45-glass-strong:color-mix(in srgb,var(--surface) 94%,transparent);
  --np45-line:color-mix(in srgb,var(--line) 88%,transparent);
  --np45-shadow:0 24px 78px rgba(0,0,0,.13);
  --np45-soft-shadow:0 14px 40px rgba(0,0,0,.075);
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 78% -10%,color-mix(in srgb,var(--red) 8%,transparent),transparent 28rem),
    var(--bg)!important;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--text) 1.6%,transparent),transparent 30%);
}
.site-header{
  position:sticky!important;top:0;z-index:90;
  background:color-mix(in srgb,var(--bg) 78%,transparent)!important;
  backdrop-filter:blur(22px) saturate(130%);
  border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent)!important;
  transition:background .22s ease,box-shadow .22s ease,border-color .22s ease;
}
body.np45-scrolled .site-header{
  background:color-mix(in srgb,var(--bg) 91%,transparent)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.12);
}
.header-row{min-height:64px!important;gap:15px!important}
.header-logo img{filter:drop-shadow(0 10px 20px rgba(0,0,0,.12))}
.search{
  border-radius:13px!important;overflow:hidden;
  background:color-mix(in srgb,var(--surface-2) 78%,transparent)!important;
  border:1px solid var(--np45-line)!important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.search:focus-within{
  border-color:color-mix(in srgb,var(--red) 34%,var(--line))!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 7%,transparent);
  background:var(--surface)!important;
}

/* page transition */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.24s;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
.np45-enter{animation:np45-enter .38s cubic-bezier(.22,.61,.36,1) both}
@keyframes np45-enter{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Home: cleaner information architecture */
.home-main{gap:24px!important;padding-top:18px!important}
.home-hero{
  border-radius:var(--np45-radius-xl)!important;
  border:1px solid var(--np45-line)!important;
  box-shadow:0 30px 92px rgba(0,0,0,.18)!important;
}
.home-hero-copy{padding:48px 38px!important}
.home-hero h1{font-size:clamp(42px,5.2vw,72px)!important;line-height:.98!important;letter-spacing:-.068em!important}
.home-hero p{font-size:12px!important;max-width:620px!important;line-height:1.68!important}
.home-overview-card{border-radius:20px!important;box-shadow:0 20px 64px rgba(0,0,0,.17)!important}
.np44-quickbar{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  padding:8px!important;border-radius:16px!important;box-shadow:var(--np45-soft-shadow)!important;
}
.np44-quickbar a{min-height:58px!important;border-radius:12px!important;background:color-mix(in srgb,var(--surface-2) 76%,transparent)!important}
.np44-quickbar a:hover{transform:translateY(-2px) scale(1.006)!important}
.home-featured-section,.home-catalog-panel{
  padding:22px!important;border-radius:20px!important;
  background:linear-gradient(180deg,var(--np45-glass-strong),color-mix(in srgb,var(--surface-2) 54%,var(--surface)))!important;
  box-shadow:var(--np45-soft-shadow)!important;
}
.home-section-head{align-items:flex-end!important;gap:16px!important}
.home-section-head h2{font-size:clamp(24px,2.4vw,34px)!important;letter-spacing:-.05em!important}
.home-section-head p{font-size:9px!important;line-height:1.55!important}
.video-grid{gap:18px 16px!important}
.video-card{transform:translateZ(0)}
.video-thumb{
  border-radius:13px!important;overflow:hidden!important;
  box-shadow:0 11px 32px rgba(0,0,0,.13)!important;
  transition:transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s ease,border-color .22s ease!important;
}
.video-card:hover .video-thumb{
  transform:translateY(-3px) scale(1.012)!important;
  box-shadow:0 20px 54px rgba(0,0,0,.22)!important;
}
.video-card h3{margin-top:10px!important;font-size:12px!important;line-height:1.35!important}
.video-card .video-meta{font-size:8px!important;line-height:1.4!important}

/* V45 preview engine visual feedback */
.video-thumb.has-video-preview{--preview-duration:9s}
.video-thumb-preview{transition:opacity .12s ease,transform .7s ease!important;will-change:opacity,transform}
.video-thumb.preview-loading .video-thumb-image{filter:saturate(.86) brightness(.82);transform:scale(1.015)}
.video-thumb.preview-active .video-thumb-preview{transform:scale(1.02)!important}
.video-thumb.preview-active .preview-status{
  background:rgba(7,8,10,.68)!important;border-color:rgba(255,255,255,.18)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.video-thumb.preview-active .preview-status::after{
  content:"";position:absolute;left:7px;right:7px;bottom:-5px;height:2px;border-radius:99px;
  background:linear-gradient(90deg,var(--red),#fff);
  transform-origin:left;animation:np45-preview-progress var(--preview-duration) linear infinite;
}
@keyframes np45-preview-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.video-thumb.preview-loading::before{
  content:"";position:absolute;z-index:5;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 26%,rgba(255,255,255,.055) 44%,transparent 62%);
  transform:translateX(-100%);animation:np45-preview-shimmer 1s ease-in-out infinite;
}
@keyframes np45-preview-shimmer{to{transform:translateX(100%)}}
.touch-preview-hint{backdrop-filter:blur(10px)}

/* secondary pages */
.search-page-hero,.category-hero,.account-hero,.page-head{
  border-radius:20px!important;box-shadow:var(--np45-soft-shadow)!important;
}
.search-results-section,.account-section,.section,.search-category-suggestions{
  border-radius:17px!important;box-shadow:0 10px 32px rgba(0,0,0,.045)!important;
}
.category-card,.account-card,.playlist-card{border-radius:14px!important}

/* Watch page / visualizer */
.watch-main{padding-top:12px!important}
.watch-page-head{padding-top:10px!important;padding-bottom:10px!important}
.watch-layout{gap:20px!important;align-items:start}
.player-shell{
  border-radius:22px!important;overflow:hidden!important;
  border-color:rgba(255,255,255,.10)!important;
  box-shadow:0 34px 110px rgba(0,0,0,.38)!important;
  background:#050506!important;
}
.player-topline{
  min-height:44px!important;padding:0 12px!important;
  background:linear-gradient(180deg,rgba(22,23,27,.98),rgba(11,12,15,.98))!important;
  border-bottom:1px solid rgba(255,255,255,.065)!important;
}
.player-stage{background:#000!important;isolation:isolate}
.player-stage::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  box-shadow:inset 0 -70px 90px rgba(0,0,0,.10);
}
.player{min-height:clamp(380px,48vw,690px)!important}
.player iframe,.player video{width:100%!important;height:100%!important;object-fit:contain!important}
.noir-custom-player .np-controls{padding:82px 18px 15px!important}
.noir-custom-player .np-progress-track{height:5px!important}
.noir-custom-player .np-control{border-radius:10px!important}
.noir-custom-player .np-center-play{border-radius:22px!important}
.source-dock{
  padding:10px 12px!important;gap:10px!important;
  background:linear-gradient(180deg,#101115,#0a0b0d)!important;
  border-top:1px solid rgba(255,255,255,.07)!important;
}
.source-buttons{gap:7px!important}
.source-button{min-height:39px!important;border-radius:10px!important}
.video-info-card,.watch-related-panel,.comments-card{
  border-radius:18px!important;border-color:var(--np45-line)!important;box-shadow:var(--np45-soft-shadow)!important;
}
.video-info-card{padding:18px!important}
.watch-title{font-size:clamp(25px,2.6vw,38px)!important;line-height:1.08!important;letter-spacing:-.05em!important}
.watch-meta{gap:7px!important}
.quick-actions{gap:8px!important;margin-top:15px!important}
.action-button{min-height:40px!important;border-radius:10px!important}
.watch-related-panel{padding:13px!important}
.comments-card{padding:17px!important}
.comment{border-radius:12px!important}
.np45-player-utility{
  display:flex;align-items:center;gap:7px;margin-left:auto;padding-left:8px;
}
.np45-player-chip{
  min-height:28px;padding:5px 8px;border:1px solid rgba(255,255,255,.08);border-radius:8px;
  background:rgba(255,255,255,.035);color:#a9abb1;font-size:7px;font-weight:850;cursor:pointer;
}
.np45-player-chip:hover{background:rgba(255,255,255,.075);color:#fff}
body.np45-ambient-off .watch-page::before{opacity:0!important}

/* Ads remain present but visually integrated */
.np-ad-slot{border-radius:14px!important;overflow:hidden!important;box-shadow:0 10px 30px rgba(0,0,0,.05)!important}

/* Responsive visualizer rescue */
@media(max-width:900px){
  .watch-layout{grid-template-columns:1fr!important}
  .watch-related-panel{position:relative!important;top:auto!important}
}
@media(max-width:760px){
  .site-header{backdrop-filter:blur(16px) saturate(120%)}
  .header-row{min-height:54px!important;padding-inline:10px!important}
  .home-main{gap:14px!important;padding-top:10px!important}
  .home-hero{border-radius:18px!important}
  .home-hero-copy{padding:28px 18px 20px!important}
  .home-hero h1{font-size:clamp(35px,11vw,50px)!important}
  .np44-quickbar{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .np44-quickbar a{min-height:50px!important;padding:8px!important}
  .home-featured-section,.home-catalog-panel{padding:14px!important;border-radius:16px!important}
  .video-grid{gap:14px 9px!important}
  .video-card h3{font-size:10px!important}

  .watch-main,.watch-page,.watch-layout,.watch-primary{width:100%!important;max-width:none!important;min-width:0!important}
  .watch-main{padding-inline:0!important}
  .watch-page-head{padding-inline:12px!important}
  .player-shell{width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;border-radius:0!important}
  .player{min-height:0!important;aspect-ratio:16/9!important;width:100%!important}
  .player iframe,.player video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
  .player-topline{min-height:39px!important;padding:0 8px!important}
  .np36-player-brand{margin-right:4px!important;padding-right:5px!important}
  .np45-player-utility{gap:4px;padding-left:3px}
  .np45-player-chip{min-height:26px;padding:4px 6px;font-size:6px}
  .source-dock{padding:7px 8px!important}
  .source-buttons{overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none}
  .source-buttons::-webkit-scrollbar{display:none}
  .source-button{flex:0 0 auto!important;min-height:36px!important}
  .video-info-card,.comments-card{margin-inline:9px!important;padding:14px!important}
  .watch-title{font-size:21px!important;line-height:1.14!important}
  .quick-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .action-button{width:100%!important;justify-content:center!important}
  .watch-related-panel{margin:0 9px!important}
}
@media(max-width:430px){
  .np44-quickbar small{display:none}
  .np44-quickbar a{min-height:44px!important}
  .quick-actions{grid-template-columns:1fr 1fr!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}