/* =========================================================
   NOIR SITE.CSS — CLEAN CONSOLIDATED VERSION
   Final layout only. Old experimental/override blocks removed.
========================================================= */

:root{
  --noir-bg:#11100d;
  --noir-bg-2:#17150f;
  --noir-panel:#1b1811;
  --noir-panel-2:#211d14;
  --noir-border:#39311d;
  --noir-text:#f6f1df;
  --noir-muted:#aaa18a;
  --noir-accent:#f5c542;
  --noir-accent-2:#e89d18;
  --noir-accent-soft:rgba(245,197,66,.12);
}


/* =========================================================
   BASE
========================================================= */

.noir-site{
  margin:0;
  background:var(--noir-bg);
  color:var(--noir-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif;
}

.noir-site *{
  box-sizing:border-box;
}

.noir-site a{
  color:inherit;
  text-decoration:none;
}

.noir-site .container-xxl{
  max-width:1460px;
}


/* =========================================================
   HEADER
========================================================= */

.noir-header{
  position:sticky;
  top:0;
  z-index:1025;
  background:rgba(11,11,14,.93);
  border-bottom:1px solid rgba(255,255,255,.055);
  backdrop-filter:blur(16px);
}

.noir-header__main{
  min-height:72px;
  display:flex;
  align-items:center;
  gap:34px;
}

.noir-logo{
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex:0 0 auto;
}

.noir-logo__mark{
  width:35px;
  height:35px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px 10px 10px 3px;
  background:linear-gradient(135deg,var(--noir-accent),#e89d18 72%);
  color:#fff;
  font-weight:900;
  box-shadow:0 8px 24px rgba(245,197,66,.22);
}

.noir-logo__text{
  font-size:20px;
  font-weight:900;
  letter-spacing:2.5px;
}

.noir-nav{
  display:flex;
  align-items:center;
}

.noir-nav--desktop{
  gap:27px;
  flex:1;
}

.noir-nav--desktop > strong{
  display:contents;
}

.noir-nav--desktop a{
  position:relative;
  padding:27px 0 25px;
  color:#b7ae95;
  font-size:17px;
  font-weight:700;
}

.noir-nav--desktop a:hover,
.noir-nav--desktop a.is-active{
  color:#fff;
}

.noir-nav--desktop a.is-active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:24px;
  height:3px;
  transform:translateX(-50%);
  border-radius:99px;
  background:linear-gradient(90deg,var(--noir-accent),var(--noir-accent-2));
}

.noir-header__actions{
  display:flex;
  align-items:center;
  gap:16px;
}


/* =========================================================
   DESKTOP SEARCH
========================================================= */

.noir-search{
  width:270px;
  flex:0 0 auto;
}

.noir-search__form{
  width:100%;
  height:40px;
  display:flex;
  align-items:center;
  border:1px solid var(--noir-border);
  border-radius:22px;
  background:#1a1812;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}

.noir-search__form:hover{
  border-color:#4a3f25;
}

.noir-search__form:focus-within{
  border-color:rgba(245,197,66,.55);
  background:#1d1a12;
  box-shadow:0 0 0 3px rgba(245,197,66,.08);
}

.noir-search__type{
  width:62px;
  height:24px;
  margin-left:7px;
  padding:0 14px 0 8px;
  flex:0 0 auto;
  border:0;
  border-right:1px solid #2b2b33;
  outline:none;
  background:transparent;
  color:#b7ae95;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
}

.noir-search__type option{
  background:#201c13;
  color:#f0ead8;
}

.noir-search__input{
  min-width:0;
  height:38px;
  flex:1;
  padding:0 8px 0 10px;
  border:0;
  outline:none;
  background:transparent;
  color:#f0ead8;
  font-size:11px;
}

.noir-search__input::placeholder{
  color:#8e866f;
}

.noir-search__input::-webkit-search-cancel-button{
  display:none;
}

.noir-search__button{
  width:34px;
  height:34px;
  margin-right:3px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#b7ae95;
  cursor:pointer;
  transition:.2s ease;
}

.noir-search__button:hover{
  color:#ffd86a;
  background:rgba(245,197,66,.08);
}


/* =========================================================
   AUTH / USER STATE
========================================================= */

.noir-auth-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.noir-auth-actions__login{
  height:36px;
  padding:0 15px;
  border:1px solid rgba(245,197,66,.42);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(245,197,66,.22),rgba(232,157,24,.16));
  color:#ffd86a;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(245,197,66,.08);
}

.noir-auth-actions__login:hover{
  border-color:rgba(245,197,66,.68);
  background:linear-gradient(135deg,rgba(245,197,66,.30),rgba(232,157,24,.22));
  color:#fff;
}

.noir-user-state{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.noir-user-name{
  max-width:120px;
  overflow:hidden;
  color:#e2dcc8;
  font-size:12px;
  font-weight:700;
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.noir-logout-btn{
  height:34px;
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(245,197,66,.38);
  border-radius:17px;
  background:rgba(245,197,66,.10);
  color:#f5c542;
  font-size:10px;
  font-weight:750;
  white-space:nowrap;
  cursor:pointer;
  transition:.18s ease;
}

.noir-logout-btn:hover{
  border-color:rgba(245,197,66,.68);
  background:rgba(245,197,66,.18);
  color:#fff2bd;
}


/* =========================================================
   MOBILE HEADER
========================================================= */

.noir-mobile-header{
  display:none;
}

@media(max-width:767.98px){

  .noir-header__main--desktop{
    display:none !important;
  }

  .noir-mobile-header{
    display:block;
    padding-top:10px;
  }

  .noir-mobile-header__top{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
  }

  .noir-mobile-header .noir-logo{
    flex:1 1 auto;
    min-width:0;
    gap:9px;
  }

  .noir-mobile-header .noir-logo__mark{
    width:34px;
    height:34px;
    flex:0 0 auto;
    border-radius:10px 10px 10px 3px;
    box-shadow:0 7px 20px rgba(245,197,66,.18);
  }

  .noir-mobile-header .noir-logo__text{
    display:inline-block !important;
    max-width:132px;
    overflow:hidden;
    color:#f7f1df;
    font-size:17px;
    line-height:1;
    letter-spacing:2px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .noir-mobile-header__actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:7px;
  }

  .noir-mobile-search-toggle{
    width:34px;
    height:34px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #3b321d;
    border-radius:50%;
    background:#17150f;
    color:#cbc2aa;
    cursor:pointer;
    transition:.2s ease;
  }

  .noir-mobile-search-toggle:hover,
  .noir-mobile-search-toggle.is-active{
    border-color:#5a4925;
    background:#1d1a13;
    color:#fff;
  }

  .noir-mobile-login{
    height:34px;
    padding:0 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(245,197,66,.42);
    border-radius:17px;
    background:linear-gradient(135deg,rgba(245,197,66,.22),rgba(232,157,24,.16));
    color:#ffd86a;
    font-size:10px;
    line-height:1;
    font-weight:800;
    white-space:nowrap;
    cursor:pointer;
    box-shadow:0 5px 16px rgba(245,197,66,.08);
  }

  .noir-mobile-login:hover{
    border-color:rgba(245,197,66,.68);
    background:linear-gradient(135deg,rgba(245,197,66,.30),rgba(232,157,24,.22));
    color:#fff;
  }

  .noir-mobile-user-state{
    min-width:0;
    display:flex;
    align-items:center;
    gap:6px;
  }

  .noir-mobile-user{
    max-width:82px;
    overflow:hidden;
    color:#e2dcc8;
    font-size:10px;
    font-weight:750;
    line-height:1;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .noir-mobile-logout{
    height:34px;
    padding:0 10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(245,197,66,.38);
    border-radius:17px;
    background:rgba(245,197,66,.10);
    color:#f5c542;
    font-size:9px;
    font-weight:750;
    white-space:nowrap;
    cursor:pointer;
  }

  .noir-mobile-logout:hover{
    border-color:rgba(245,197,66,.68);
    background:rgba(245,197,66,.18);
    color:#fff2bd;
  }

  .noir-mobile-search-panel{
    display:grid;
    grid-template-rows:0fr;
    padding-top:0;
    opacity:0;
    transition:grid-template-rows .24s ease,padding-top .24s ease,opacity .18s ease;
  }

  .noir-mobile-search-panel.is-open{
    grid-template-rows:1fr;
    padding-top:10px;
    opacity:1;
  }

  .noir-mobile-search-panel__inner{
    min-height:0;
    overflow:hidden;
  }

  .noir-mobile-search{
    height:42px;
    display:flex;
    align-items:center;
    overflow:hidden;
    border:1px solid #3e351f;
    border-radius:12px;
    background:#19160f;
  }

  .noir-mobile-search:focus-within{
    border-color:rgba(245,197,66,.46);
    box-shadow:0 0 0 3px rgba(245,197,66,.055);
  }

  .noir-mobile-search__type-wrap{
    position:relative;
    width:72px;
    height:42px;
    flex:0 0 72px;
    border-right:1px solid #29292f;
    background:#17150f;
  }

  .noir-mobile-search__type{
    width:100%;
    height:100%;
    padding:0 25px 0 12px;
    border:0;
    outline:0;
    appearance:none;
    -webkit-appearance:none;
    background:transparent;
    color:#b7ae95;
    font-size:10px;
    font-weight:750;
    white-space:nowrap;
    cursor:pointer;
  }

  .noir-mobile-search__type-wrap svg{
    position:absolute;
    top:50%;
    right:10px;
    width:11px;
    height:11px;
    transform:translateY(-50%);
    pointer-events:none;
    color:#73717a;
  }

  .noir-mobile-search__type option{
    background:#201c13;
    color:#eee;
  }

  .noir-mobile-search__input{
    min-width:0;
    height:40px;
    flex:1;
    padding:0 11px;
    border:0;
    outline:0;
    background:transparent;
    color:#efedf2;
    font-size:11px;
  }

  .noir-mobile-search__input::placeholder{
    color:#68666f;
  }

  .noir-mobile-search__input::-webkit-search-cancel-button{
    display:none;
  }

  .noir-mobile-search__submit{
    height:30px;
    margin-right:6px;
    padding:0 11px;
    flex:0 0 auto;
    border:0;
    border-radius:8px;
    background:#292314;
    color:#dedce2;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
  }

  .noir-mobile-nav{
    margin-top:9px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border-top:1px solid #201c13;
  }

  .noir-mobile-nav > strong{
    display:contents;
  }

  .noir-mobile-nav a{
    position:relative;
    min-width:0;
    height:43px;
    padding:0 4px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    color:#938a73;
    font-size:12px;
    line-height:1;
    font-weight:700;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .noir-mobile-nav .nav-link{
    margin:0;
    border:0;
    border-radius:0;
    background:transparent;
  }

  .noir-mobile-nav a:hover,
  .noir-mobile-nav a.is-active{
    color:#f6f0dc;
  }

  .noir-mobile-nav a.is-active::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:16px;
    height:2px;
    transform:translateX(-50%);
    border-radius:99px;
    background:var(--noir-accent);
  }
}

@media(max-width:390px){
  .noir-mobile-header .noir-logo__text{
    max-width:92px;
    font-size:15px;
  }

  .noir-mobile-user{
    max-width:58px;
  }

  .noir-mobile-login,
  .noir-mobile-logout{
    padding:0 8px;
  }

  .noir-mobile-search-toggle{
    width:32px;
    height:32px;
  }

  .noir-mobile-nav a{
    padding-left:2px;
    padding-right:2px;
    font-size:9px;
  }
}


/* =========================================================
   BREADCRUMB
========================================================= */

.noir-breadcrumb{
  padding:14px 0 4px;
}

.noir-breadcrumb .breadcrumb{
  margin:0;
  font-size:13px;
  line-height:1.4;
}

.noir-breadcrumb .breadcrumb-item,
.noir-breadcrumb .breadcrumb-item::before{
  color:#7b725e;
}

.noir-breadcrumb .breadcrumb-item a{
  color:#9f967f;
  text-decoration:none;
  transition:color .18s ease;
}

.noir-breadcrumb .breadcrumb-item a:hover{
  color:#ffd95a;
}


/* =========================================================
   COMMON HERO ELEMENTS
========================================================= */

.noir-hero-section{
  padding-top:18px;
}

.noir-kicker{
  display:block;
  margin-bottom:4px;
  color:#f5c542;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.6px;
}

.noir-btn{
  height:43px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:22px;
  font-size:12px;
  font-weight:800;
  transition:.2s ease;
}

.noir-btn--primary{
  background:linear-gradient(135deg,var(--noir-accent),#e89d18);
  color:#fff !important;
}

.noir-btn--primary:hover{
  transform:translateY(-2px);
}

.noir-btn--ghost{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
  color:#e3dcc8 !important;
}


/* =========================================================
   PC HERO: 3 LARGE VIDEO CARDS
========================================================= */

.noir-hero-desktop{
  display:block;
}

.noir-hero-mobile{
  display:none;
}

.noir-hero-desktop-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.noir-hero-video-card{
  position:relative;
  min-width:0;
  height:350px;
  display:block;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  background:#17161d;
  text-decoration:none;
  box-shadow:0 18px 40px rgba(0,0,0,.24);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}

.noir-hero-video-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 24px 52px rgba(0,0,0,.34);
}

.noir-hero-video-card__img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
  transition:transform .38s ease,filter .38s ease;
}

.noir-hero-video-card:hover .noir-hero-video-card__img{
  transform:scale(1.025);
  filter:brightness(.94);
}

.noir-hero-video-card__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(8,8,11,.94) 0%,rgba(8,8,11,.76) 18%,rgba(8,8,11,.28) 42%,rgba(8,8,11,.04) 66%);
}

.noir-hero-video-card__overlay{
  position:absolute;
  right:16px;
  bottom:15px;
  left:16px;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.noir-hero-video-card__text{
  min-width:0;
  flex:1;
}

.noir-hero-video-card__text strong{
  display:-webkit-box;
  overflow:hidden;
  color:#f4f1f5;
  font-size:15px;
  font-weight:800;
  line-height:1.35;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.noir-hero-video-card__text span{
  margin-top:5px;
  display:block;
  overflow:hidden;
  color:#aaa7b0;
  font-size:10px;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.noir-hero-video-card__play{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(245,197,66,.92);
  color:#fff;
  font-size:11px;
  box-shadow:0 8px 22px rgba(245,197,66,.18);
}

.noir-hero-video-card--desktop{
  height:420px;
  border-radius:18px;
}

.noir-hero-video-card--desktop .noir-hero-video-card__overlay{
  right:18px;
  bottom:18px;
  left:18px;
}

.noir-hero-video-card--desktop .noir-hero-video-card__text strong{
  font-size:15px;
}

.noir-hero-video-card--desktop .noir-hero-video-card__play{
  width:38px;
  height:38px;
  flex-basis:38px;
}


/* =========================================================
   MOBILE HERO CAROUSEL
========================================================= */

@media(max-width:767.98px){

  .noir-hero-desktop{
    display:none !important;
  }

  .noir-hero-mobile{
    display:block !important;
  }

  .noir-hero-mobile .noir-hero-carousel,
  .noir-hero-mobile .carousel-inner{
    position:relative;
    overflow:hidden;
    border-radius:14px;
  }

  .noir-hero-mobile .noir-hero{
    position:relative;
    min-height:430px;
    margin:0;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    border-radius:14px;
  }

  .noir-hero-mobile .noir-hero__art{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    overflow:hidden;
  }

  .noir-hero-mobile .noir-hero__image{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center top;
  }

  .noir-hero-mobile .noir-hero__art::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(0deg,rgba(11,11,14,.98) 0%,rgba(11,11,14,.92) 20%,rgba(11,11,14,.58) 48%,rgba(11,11,14,.12) 78%,rgba(11,11,14,.08) 100%);
  }

  .noir-hero-mobile .noir-hero__content{
    position:relative;
    z-index:3;
    width:100%;
    max-width:100%;
    padding:210px 18px 48px;
  }

  .noir-hero-mobile .noir-hero h1{
    margin:8px 0;
    display:-webkit-box;
    overflow:hidden;
    color:#fff;
    font-size:27px;
    line-height:1.15;
    letter-spacing:-.5px;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }

  .noir-hero-mobile .noir-hero p{
    margin-bottom:15px;
    color:#aaa7b0;
    font-size:11px;
  }

  .noir-hero-mobile .noir-hero__buttons{
    display:flex;
    gap:8px;
  }

  .noir-hero-mobile .noir-btn{
    height:36px;
    padding:0 14px;
    border-radius:18px;
    font-size:10px;
  }

  .noir-hero-carousel__indicators{
    right:auto;
    bottom:12px;
    left:18px;
    z-index:8;
    margin:0;
    gap:7px;
    justify-content:flex-start;
  }

  .noir-hero-carousel__indicators [data-bs-target]{
    width:14px;
    height:3px;
    margin:0;
    border:0;
    border-radius:999px;
    background:#5a5861;
    opacity:.52;
  }

  .noir-hero-carousel__indicators .active{
    width:26px;
    background:var(--noir-accent);
    opacity:1;
  }

  .noir-hero-carousel__control{
    top:50%;
    bottom:auto;
    width:32px;
    height:32px;
    z-index:9;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    background:rgba(8,8,11,.44);
    backdrop-filter:blur(10px);
    opacity:.72;
    transform:translateY(-50%);
  }

  .noir-hero-carousel__control--prev{left:8px;}
  .noir-hero-carousel__control--next{right:8px;}
}


/* =========================================================
   NOTICE + CATEGORY
========================================================= */

.noir-notice{
  min-height:45px;
  margin-top:12px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--noir-border);
  border-radius:11px;
  background:#17150f;
  color:#9f967f;
  font-size:11px;
}

.noir-notice__badge{
  padding:3px 7px;
  border-radius:5px;
  background:var(--noir-accent-soft);
  color:#f5c542;
  font-weight:800;
}

.noir-notice__text{
  min-width:0;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.noir-category-section{
  padding:17px 0 0;
}

.noir-category-list{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
}

.noir-category-list::-webkit-scrollbar{
  display:none;
}

.noir-category-list a{
  flex:0 0 auto;
  height:38px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  border:1px solid #342d1b;
  border-radius:18px;
  background:#17150f;
  color:#9a927c;
  font-size:13px;
  font-weight:700;
}

.noir-category-list a:hover,
.noir-category-list a.is-active{
  border-color:rgba(245,197,66,.32);
  background:var(--noir-accent-soft);
  color:#ffd86a;
}


/* =========================================================
   SECTION HEADS / CONTENT GUTTERS
========================================================= */

.noir-hero-section > .container-xxl,
.noir-category-section > .container-xxl,
.noir-section > .container-xxl,
.noir-rank-section > .container-xxl{
  padding-left:22px;
  padding-right:22px;
}

.noir-section{
  padding:34px 0;
}

.noir-section--deep{
  border-top:1px solid #1d1a13;
  border-bottom:1px solid #1d1a13;
  background:#15130e;
}

.noir-section__head{
  margin-bottom:18px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}

.noir-section__head h2,
.noir-rank-box__intro h2{
  margin:0;
  font-size:28px;
  font-weight:850;
  letter-spacing:-.5px;
}

.noir-more{
  color:#8a816b;
  font-size:13px;
  font-weight:700;
}

.noir-more:hover{
  color:#ffd86a;
}

.noir-more span{
  font-size:17px;
  vertical-align:-1px;
}


/* =========================================================
   VIDEO GRID / VIDEO CARDS
   Default desktop: 4
   Tablet: 3
   Mobile: 2
========================================================= */

.noir-video-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:26px 18px;
}

.noir-video-card{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.055);
  border-radius:15px;
  background:#1b1811;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.noir-video-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.09);
  box-shadow:0 16px 34px rgba(0,0,0,.28);
}

.noir-video-card__cover{
  position:relative;
  width:100%;
  aspect-ratio:3 / 4;
  display:block;
  overflow:hidden;
  background:#1b1811;
}

.noir-video-card__img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
  transition:transform .35s ease,filter .35s ease;
}

.noir-video-card:hover .noir-video-card__img{
  transform:scale(1.025);
  filter:brightness(.94);
}

.noir-video-card__score,
.noir-video-card__episode{
  position:absolute;
  z-index:2;
}

.noir-video-card__score{
  top:10px;
  right:10px;
  min-width:34px;
  height:24px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(12,12,15,.82);
  color:#ffd95a;
  font-size:10px;
  font-weight:900;
  backdrop-filter:blur(8px);
}

.noir-video-card__episode{
  right:10px;
  bottom:10px;
  max-width:calc(100% - 20px);
  height:24px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:7px;
  background:rgba(10,10,13,.82);
  color:#f6f0dc;
  font-size:9px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
  backdrop-filter:blur(8px);
}

.noir-video-card__play{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translate(-50%,-50%) scale(.88);
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(245,197,66,.90);
  color:#fff;
  font-size:10px;
  opacity:0;
  box-shadow:0 8px 24px rgba(245,197,66,.18);
  transition:.2s ease;
}

.noir-video-card:hover .noir-video-card__play{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.noir-video-card__title{
  margin:0;
  padding:12px 12px 0;
  display:-webkit-box;
  overflow:hidden;
  color:#f6f0dc;
  font-size:14px;
  font-weight:800;
  line-height:1.42;
  text-decoration:none;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.noir-video-card__title:hover{
  color:#ffd95a;
}

.noir-video-card__meta{
  margin:0;
  padding:7px 12px 0;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px 7px;
  color:#9b98a2;
  font-size:11px;
  line-height:1.35;
}

.noir-video-card__meta i{
  width:3px;
  height:3px;
  flex:0 0 3px;
  border-radius:50%;
  background:#56535d;
}

.noir-video-card__time{
  margin:0;
  padding:6px 12px 13px;
  overflow:hidden;
  color:#65636c;
  font-size:10px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* Free + Hot: desktop 6 columns */
@media(min-width:1200px){

  :is(#free-watch,#hot-watch) .noir-video-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:22px 14px;
  }

  :is(#free-watch,#hot-watch) .noir-video-card__title{
    font-size:12px;
  }

  :is(#free-watch,#hot-watch) .noir-video-card__meta{
    font-size:9px;
  }

  :is(#free-watch,#hot-watch) .noir-video-card__time{
    font-size:8px;
  }
}


/* =========================================================
   HOT FEATURE SECTION
========================================================= */

.noir-hot-layout{
  display:grid;
  grid-template-columns:1.7fr 1fr;
  gap:14px;
}

.noir-hot-main,
.noir-hot-small{
  position:relative;
  display:block;
  overflow:hidden;
  border:1px solid #27232d;
  border-radius:16px;
  color:#fff;
}

.noir-hot-main{
  min-height:350px;
}

.noir-hot-main__bg{
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,#201624,#583048 58%,#9c4d62);
}

.noir-hot-main__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(7,7,10,.83),rgba(7,7,10,.08) 74%);
}

.noir-hot-main__content{
  position:absolute;
  z-index:3;
  left:27px;
  right:27px;
  bottom:27px;
}

.noir-hot-main__content>span,
.noir-hot-small span{
  color:#f5c542;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.5px;
}

.noir-hot-main__content h3{
  margin:8px 0 6px;
  font-size:32px;
  font-weight:850;
}

.noir-hot-main__content p,
.noir-hot-small p{
  margin:0;
  color:#a9a6ae;
  font-size:10px;
}

.noir-hot-main__content strong{
  display:inline-block;
  margin-top:17px;
  color:#eee;
  font-size:11px;
}

.noir-hot-side{
  display:grid;
  gap:14px;
}

.noir-hot-small{
  min-height:168px;
}

.noir-hot-small--1{background:linear-gradient(125deg,#221b29,#56334d,#794255);}
.noir-hot-small--2{background:linear-gradient(125deg,#1d1b2c,#49355c,#733b59);}

.noir-hot-small>div{
  position:absolute;
  z-index:2;
  left:18px;
  right:18px;
  bottom:15px;
}

.noir-hot-small h3{
  margin:5px 0 4px;
  font-size:16px;
  font-weight:800;
}


/* =========================================================
   UPDATE LIST
========================================================= */

.noir-update-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}

.noir-update-card{
  min-height:108px;
  padding:9px;
  display:flex;
  align-items:center;
  gap:13px;
  border:1px solid #24242a;
  border-radius:13px;
  background:#17150f;
  transition:.2s ease;
}

.noir-update-card:hover{
  border-color:#37333d;
  background:#1a1812;
  transform:translateY(-2px);
}

.noir-update-card__thumb{
  position:relative;
  width:115px;
  height:87px;
  flex:0 0 auto;
  overflow:hidden;
  border-radius:9px;
}

.noir-thumb--1{background:linear-gradient(135deg,#262237,#63384e,#9a4e61);}
.noir-thumb--2{background:linear-gradient(135deg,#211c2e,#594264,#92516d);}
.noir-thumb--3{background:linear-gradient(135deg,#251b27,#75384d,#a44a60);}
.noir-thumb--4{background:linear-gradient(135deg,#1e1b2b,#4f365a,#753f59);}

.noir-update-card__thumb span{
  position:absolute;
  right:6px;
  bottom:5px;
  padding:3px 5px;
  border-radius:4px;
  background:rgba(7,7,10,.68);
  color:#eee;
  font-size:8px;
  font-weight:800;
}

.noir-update-card__content{
  min-width:0;
  flex:1;
}

.noir-update-card__content h3{
  margin:0 0 7px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#dedce2;
  font-size:13px;
  font-weight:750;
}

.noir-update-card__content p{
  margin:0;
  color:#8a816b;
  font-size:9px;
}

.noir-update-card time{
  flex:0 0 auto;
  color:#7b725e;
  font-size:9px;
}


/* =========================================================
   RANK
========================================================= */

.noir-rank-section{
  padding-top:6px;
  padding-bottom:50px;
}

.noir-rank-box{
  display:grid;
  grid-template-columns:280px 1fr;
  overflow:hidden;
  border:1px solid #25252b;
  border-radius:15px;
  background:#17150f;
}

.noir-rank-box__intro{
  padding:30px;
  background:radial-gradient(circle at 20% 15%,rgba(245,197,66,.15),transparent 42%),#17151b;
}

.noir-rank-box__intro p{
  margin:9px 0 20px;
  color:#8a816b;
  font-size:10px;
}

.noir-rank-box__intro a{
  color:#f5c542;
  font-size:10px;
  font-weight:800;
}

.noir-rank-list{
  padding:9px 22px;
}

.noir-rank-list a{
  min-height:51px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 75px;
  align-items:center;
  gap:9px;
  border-bottom:1px dashed #27272d;
}

.noir-rank-list a:last-child{
  border-bottom:0;
}

.noir-rank-list__num{
  color:#696870;
  font-size:14px;
  font-weight:900;
}

.noir-rank-list__num.is-top{
  color:#f5c542;
}

.noir-rank-list strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#c9c7cd;
  font-size:12px;
  font-weight:700;
}

.noir-rank-list em{
  color:#77757d;
  font-size:9px;
  font-style:normal;
  text-align:right;
}


/* =========================================================
   FOOTER
========================================================= */

.noir-footer{
  padding:36px 0 28px;
  border-top:1px solid rgba(245,197,66,.08);
  background:#0d0c09;
}

.noir-footer__brand{
  display:flex;
  justify-content:center;
}

.noir-footer__brand .noir-logo{
  transform:scale(1.04);
}

.noir-footer__bottom{
  margin-top:24px;
  padding-top:18px;

  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;

  border-top:1px solid rgba(255,255,255,.045);

  color:#8f866f;

  font-size:12px;
  line-height:1.6;
  text-align:center;
}

.noir-footer__bottom--center{
  justify-content:center;
}

.noir-footer__dot{
  color:#5f5849;
}

.noir-footer__email{
  color:#d7b94d;
  font-weight:700;
}

@media(max-width:767.98px){

  .noir-footer{
    padding:28px 0 22px;
  }

  .noir-footer__bottom{
    margin-top:18px;
    padding-top:15px;
    gap:6px;

    font-size:11px;
  }
}


/* =========================================================
   AUTH MODALS
========================================================= */

.noir-auth-modal .modal-dialog{
  max-width:430px;
}

.noir-auth-modal .modal-content{
  position:relative;
  overflow:hidden;
  border:1px solid #2d2d34;
  border-radius:20px;
  background:radial-gradient(circle at 100% 0%,rgba(232,157,24,.11),transparent 30%),radial-gradient(circle at 0% 15%,rgba(245,197,66,.11),transparent 28%),#121217;
  color:#eee;
  box-shadow:0 28px 90px rgba(0,0,0,.64);
}

.noir-auth-modal__close{
  position:absolute;
  top:13px;
  right:13px;
  z-index:3;
  width:31px;
  height:31px;
  border:1px solid #493d22;
  border-radius:50%;
  background:#201c13;
  color:#9f967f;
  font-size:20px;
  cursor:pointer;
}

.noir-auth-modal__brand{
  padding-top:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.noir-auth-modal__brand .noir-logo__mark{
  width:42px;
  height:42px;
}

.noir-auth-modal__brand strong{
  margin-top:9px;
  font-size:17px;
  letter-spacing:2px;
}

.noir-auth-modal__brand small{
  margin-top:5px;
  color:#77757f;
  font-size:10px;
}

.noir-auth-modal__title{
  padding:22px 30px 0;
  text-align:center;
}

.noir-auth-modal__title h5{
  margin:0;
  color:#f1eff4;
  font-size:19px;
  font-weight:850;
}

.noir-auth-modal__title p{
  margin:7px 0 0;
  color:#8a816b;
  font-size:10px;
}

.noir-auth-modal__body{
  padding:22px 30px 20px;
}

.noir-form-item{
  margin-bottom:15px;
}

.noir-form-item label{
  margin-bottom:6px;
  color:#c1bec6;
  font-size:10px;
  font-weight:700;
}

.noir-auth-modal .form-control{
  height:43px;
  padding:0 13px;
  border:1px solid #3b321d;
  border-radius:9px;
  outline:none;
  background:#15130e;
  color:#eee;
  font-size:11px;
}

.noir-auth-modal .form-control:focus{
  border-color:rgba(245,197,66,.52);
  background:#15130e;
  color:#fff;
  box-shadow:0 0 0 3px rgba(245,197,66,.075);
}

.noir-password-field{
  position:relative;
}

.noir-password-field .form-control{
  padding-right:55px;
}

.noir-password-toggle{
  position:absolute;
  top:0;
  right:3px;
  height:43px;
  padding:0 8px;
  border:0;
  background:transparent;
  color:#73717a;
  font-size:9px;
}

.noir-auth-submit{
  width:100%;
  height:43px;
  margin-top:3px;
  border:0;
  border-radius:10px;
  background:linear-gradient(135deg,var(--noir-accent),#e89d18);
  color:#fff;
  font-size:11px;
  font-weight:900;
  box-shadow:0 9px 22px rgba(245,197,66,.15);
}

.noir-auth-modal__footer{
  padding:0 30px 25px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:#6f6e76;
  font-size:9px;
}

.noir-auth-modal__footer a{
  color:#f5c542;
  font-weight:800;
}


/* =========================================================
   ALERT DIALOG
========================================================= */

#alertDialog::backdrop{
  background-color:rgba(0,0,0,.72);
  backdrop-filter:blur(3px);
}

.noir-alert-dialog{
  width:min(90%,380px);
  padding:0;
  overflow:hidden;
  border:1px solid #2f2f36;
  border-radius:16px;
  background:#121217;
  color:#eee;
  box-shadow:0 25px 80px rgba(0,0,0,.6);
}

.noir-alert-dialog__header{
  padding:15px 17px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:linear-gradient(135deg,#8b263d,#c23a58);
  color:#fff;
}

.noir-alert-dialog__header h5{
  margin:0;
  font-size:14px;
  font-weight:850;
}

.noir-alert-dialog__close{
  width:29px;
  height:29px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:20px;
  opacity:.8;
}

.noir-alert-dialog__body{
  padding:26px 22px;
  text-align:center;
}

.noir-alert-dialog__body p{
  margin:0;
  color:#dddbe1;
  font-size:13px;
  font-weight:650;
  line-height:1.6;
}

.noir-alert-dialog__footer{
  padding:12px 14px;
  display:flex;
  justify-content:flex-end;
  border-top:1px solid #25252c;
  background:#0f0f13;
}

.noir-alert-dialog__confirm{
  min-width:76px;
  height:35px;
  padding:0 16px;
  border:0;
  border-radius:8px;
  background:linear-gradient(135deg,#d53d5f,#ef5574);
  color:#fff;
  font-size:10px;
  font-weight:850;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(min-width:1400px){
  .noir-hero-video-card--desktop{
    height:455px;
  }

  .noir-hero-desktop-grid{
    gap:20px;
  }
}

@media(min-width:768px) and (max-width:991.98px){

  .noir-hero-section > .container-xxl,
  .noir-category-section > .container-xxl,
  .noir-section > .container-xxl,
  .noir-rank-section > .container-xxl{
    padding-left:18px;
    padding-right:18px;
  }

  .noir-hero-video-card--desktop{
    height:360px;
  }

  .noir-hero-desktop-grid{
    gap:12px;
  }

  .noir-video-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px 14px;
  }

  .noir-video-card__title{
    padding:10px 10px 0;
    font-size:12px;
  }

  .noir-video-card__meta{
    padding:6px 10px 0;
    font-size:9px;
  }

  .noir-video-card__time{
    padding:5px 10px 11px;
    font-size:8px;
  }

  .noir-rank-box{
    grid-template-columns:230px 1fr;
  }
}

@media(max-width:767.98px){

  .noir-site .container-xxl{
    padding-left:11px;
    padding-right:11px;
  }

  .noir-hero-section > .container-xxl,
  .noir-category-section > .container-xxl,
  .noir-section > .container-xxl,
  .noir-rank-section > .container-xxl{
    padding-left:12px;
    padding-right:12px;
  }

  .noir-breadcrumb{
    display:block !important;
    min-height:32px;
    padding:9px 0 7px;
  }

  .noir-breadcrumb .breadcrumb{
    display:flex !important;
    margin:0 !important;
    font-size:11px;
  }

  .noir-hero-section{
    padding-top:10px;
  }

  .noir-category-section{
    padding-top:12px;
  }

  .noir-category-list a{
    height:34px;
    padding:0 14px;
    font-size:11px;
  }

  .noir-section{
    padding:25px 0;
  }

  .noir-section__head{
    margin-bottom:14px;
  }

  .noir-section__head h2,
  .noir-rank-box__intro h2{
    font-size:24px;
  }

  .noir-video-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 10px;
  }

  .noir-video-card{
    border-radius:11px;
  }

  .noir-video-card__title{
    padding:9px 9px 0;
    font-size:12px;
    line-height:1.4;
  }

  .noir-video-card__meta{
    padding:5px 9px 0;
    gap:4px 5px;
    font-size:9px;
  }

  .noir-video-card__time{
    padding:4px 9px 10px;
    font-size:8px;
  }

  .noir-video-card__score{
    top:7px;
    right:7px;
    min-width:30px;
    height:21px;
    padding:0 6px;
    font-size:9px;
  }

  .noir-video-card__episode{
    right:7px;
    bottom:7px;
    max-width:calc(100% - 14px);
    height:21px;
    padding:0 7px;
    font-size:8px;
  }

  .noir-video-card__play{
    width:30px;
    height:30px;
    font-size:9px;
  }

  .noir-hot-layout{
    grid-template-columns:1fr;
  }

  .noir-hot-main{
    min-height:265px;
  }

  .noir-hot-side{
    grid-template-columns:1fr 1fr;
  }

  .noir-hot-small{
    min-height:140px;
  }

  .noir-update-grid{
    grid-template-columns:1fr;
  }

  .noir-update-card{
    min-height:92px;
  }

  .noir-update-card__thumb{
    width:93px;
    height:72px;
  }

  .noir-update-card time{
    display:none;
  }

  .noir-rank-box{
    grid-template-columns:1fr;
  }

  .noir-rank-box__intro{
    padding:22px;
  }

  .noir-rank-list{
    padding:7px 13px;
  }

  .noir-footer__top,
  .noir-footer__bottom{
    align-items:flex-start;
    flex-direction:column;
  }

  .noir-auth-modal .modal-dialog{
    margin-left:13px;
    margin-right:13px;
  }

  .noir-auth-modal__body,
  .noir-auth-modal__title,
  .noir-auth-modal__footer{
    padding-left:20px;
    padding-right:20px;
  }
}

@media(max-width:460px){
  .noir-hot-side{
    grid-template-columns:1fr;
  }
}
/* =========================================================
   CATEGORY PAGE HEADER / BREADCRUMB
========================================================= */

.noir-page-head{
  padding:26px 0 25px;
  border-bottom:1px solid rgba(255,255,255,.045);
  background:#11100d;
}

.noir-page-head > .container-xxl{
  padding-left:22px;
  padding-right:22px;
}

.noir-page-breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  color:#7d7a84;
  font-size:13px;
  line-height:1.4;
}

.noir-page-breadcrumb a{
  color:#aaa7b0;
  text-decoration:none;
  transition:color .18s ease;
}

.noir-page-breadcrumb a:hover{
  color:#fff;
}

.noir-page-breadcrumb__divider{
  color:#4f4d55;
}

.noir-page-breadcrumb__current{
  color:#ff4f8a;
  font-weight:700;
}

.noir-page-title{
  margin:18px 0 0;
  color:#f4f2f5;
  font-size:30px;
  line-height:1.3;
  font-weight:850;
  letter-spacing:-.4px;
}


/* 手机端 */
@media(max-width:767.98px){

  .noir-page-head{
    padding:18px 0 19px;
  }

  .noir-page-head > .container-xxl{
    padding-left:12px;
    padding-right:12px;
  }

  .noir-page-breadcrumb{
    font-size:11px;
  }

  .noir-page-title{
    margin-top:13px;
    font-size:20px;
  }
}
.noir-page-breadcrumb__link{
  color:#aaa7b0;
  text-decoration:none;
  transition:color .18s ease;
}

.noir-page-breadcrumb__link:hover{
  color:#fff;
}
/* =========================================================
   DETAIL PAGE
========================================================= */

.noir-detail{
  padding:10px 0 40px;
}


/* =========================
   MAIN DETAIL CARD
========================= */

.noir-detail-card{
  padding:26px;
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:30px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:18px;
  background:#151519;
  box-shadow:0 14px 36px rgba(0,0,0,.18);
}

.noir-detail-card__media{
  min-width:0;
}

.noir-detail-card__poster{
  width:100%;
  display:block;
  aspect-ratio:3 / 4;
  object-fit:cover;
  object-position:center top;
  border-radius:14px;
  background:#17150f;
}

.noir-detail-card__content{
  min-width:0;
  padding-top:4px;
}

.noir-detail-card__title{
  margin:0;
  color:#f4f2f5;
  font-size:34px;
  line-height:1.25;
  font-weight:850;
  letter-spacing:-.5px;
}


/* =========================
   META
========================= */

.noir-detail-card__meta{
  margin-top:14px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px 12px;
  color:#8e8b95;
  font-size:11px;
}

.noir-detail-card__meta > span{
  position:relative;
}

.noir-detail-card__meta > span:not(:last-child)::after{
  content:"";
  position:absolute;
  top:50%;
  right:-7px;
  width:3px;
  height:3px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#4f4d55;
}

.noir-detail-card__score{
  color:#ffd95a;
  font-weight:850;
}


/* =========================
   INTRO
========================= */

.noir-detail-card__intro{
  margin-top:26px;
}

.noir-detail-card__intro h2{
  margin:0 0 9px;
  color:#efedf2;
  font-size:15px;
  font-weight:800;
}

.noir-detail-card__intro p{
  margin:0;
  color:#aaa7b0;
  font-size:12px;
  line-height:1.85;
}


/* =========================
   ACTION
========================= */

.noir-detail-card__actions{
  margin-top:28px;
}

.noir-detail-play{
  height:42px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:22px;
  background:linear-gradient(
    135deg,
    var(--noir-accent),
    var(--noir-accent-2)
  );
  color:#fff !important;
  font-size:12px;
  font-weight:850;
  box-shadow:0 9px 24px rgba(245,197,66,.17);
  transition:.2s ease;
}

.noir-detail-play:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
}

.noir-detail-play span{
  font-size:10px;
}


/* =========================================================
   PLAY SOURCE
========================================================= */

.noir-play-source{
  margin-top:18px;
  padding:24px 26px 26px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:18px;
  background:#151519;
}

.noir-play-source__head{
  margin-bottom:16px;
}

.noir-play-source__head h2{
  margin:0;
  color:#f6f0dc;
  font-size:20px;
  font-weight:850;
}

.noir-play-source__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.noir-play-source__item{
  min-width:0;
  padding:14px 15px;
  display:flex;
  flex-direction:column;
  gap:5px;
  border:1px solid #3b321d;
  border-radius:11px;
  background:#17150f;
  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.noir-play-source__item:hover{
  transform:translateY(-2px);
  border-color:rgba(245,197,66,.40);
  background:rgba(245,197,66,.07);
}

.noir-play-source__item strong{
  overflow:hidden;
  color:#e8e5eb;
  font-size:12px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.noir-play-source__item span{
  color:#8a816b;
  font-size:9px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:991.98px){

  .noir-detail-card{
    grid-template-columns:180px minmax(0,1fr);
    gap:22px;
  }

  .noir-detail-card__title{
    font-size:25px;
  }

  .noir-play-source__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


@media(max-width:767.98px){

  .noir-detail{
    padding-top:4px;
    padding-bottom:28px;
  }

  .noir-detail-card{
    padding:14px;
    grid-template-columns:105px minmax(0,1fr);
    gap:14px;
    border-radius:14px;
  }

  .noir-detail-card__poster{
    border-radius:10px;
  }

  .noir-detail-card__content{
    padding-top:0;
  }

  .noir-detail-card__title{
    font-size:22px;
    line-height:1.3;
  }

  .noir-detail-card__meta{
    margin-top:9px;
    gap:5px 9px;
    font-size:9px;
  }

  .noir-detail-card__intro{
    margin-top:14px;
    grid-column:1 / -1;
  }

  .noir-detail-card__intro h2{
    font-size:13px;
  }

  .noir-detail-card__intro p{
    font-size:10px;
    line-height:1.7;
  }

  .noir-detail-card__actions{
    margin-top:15px;
  }

  .noir-detail-play{
    height:36px;
    padding:0 14px;
    font-size:10px;
  }

  .noir-play-source{
    margin-top:12px;
    padding:17px 14px 18px;
    border-radius:14px;
  }

  .noir-play-source__head{
    margin-bottom:12px;
  }

  .noir-play-source__head h2{
    font-size:17px;
  }

  .noir-play-source__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .noir-play-source__item{
    padding:11px 10px;
  }

  .noir-play-source__item strong{
    font-size:10px;
  }

  .noir-play-source__item span{
    font-size:8px;
  }
}
/* =========================================================
   PLAY PAGE
========================================================= */

.noir-play-page{
  padding:8px 0 42px;
}


/* =========================================================
   PLAY INFO
========================================================= */

.noir-play-info{
  padding:25px 27px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:18px;
  background:#151519;
  box-shadow:0 14px 36px rgba(0,0,0,.18);
}

.noir-play-info__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}

.noir-play-info__main{
  min-width:0;
}

.noir-play-info__title{
  margin:5px 0 0;
  color:#f4f2f5;
  font-size:34px;
  line-height:1.3;
  font-weight:850;
  letter-spacing:-.45px;
}


/* =========================================================
   META
========================================================= */

.noir-play-info__meta{
  margin-top:13px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px 13px;
  color:#8e8b95;
  font-size:10px;
}

.noir-play-info__meta > span{
  position:relative;
}

.noir-play-info__meta > span:not(:last-child)::after{
  content:"";
  position:absolute;
  top:50%;
  right:-8px;
  width:3px;
  height:3px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#514f58;
}

.noir-play-info__score{
  color:#ffd95a;
  font-weight:850;
}


/* =========================================================
   AUTHOR
========================================================= */

.noir-play-info__author{
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#aaa7b0;
  font-size:11px;
}

.noir-play-info__author span{
  color:#8a816b;
}

.noir-play-info__author strong{
  color:#dad7de;
  font-weight:750;
}


/* =========================================================
   INTRO
========================================================= */

.noir-play-info__intro{
  margin-top:23px;
}

.noir-play-info__intro h2{
  margin:0 0 9px;
  color:#efedf2;
  font-size:15px;
  font-weight:800;
}

.noir-play-info__intro p{
  margin:0;
  color:#aaa7b0;
  font-size:12px;
  line-height:1.85;
}


/* =========================================================
   AI KEYWORD RECOMMEND
========================================================= */

.noir-ai-tags{
  margin-top:16px;
  padding:21px 24px 23px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:16px;
  background:#19160f;
}

.noir-ai-tags__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}

.noir-ai-tags__head h2{
  margin:0;
  color:#f6f0dc;
  font-size:18px;
  font-weight:850;
}

.noir-ai-tags__note{
  color:#66646d;
  font-size:9px;
}


/* 关键词区域 */

.noir-ai-tags__list{
  margin-top:15px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
}


/* 单个关键词 */

.noir-ai-tag{
  min-height:32px;
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  border:1px solid #2a2930;
  border-radius:8px;
  background:#201c13;
  color:#b7b4bd;
  font-size:10px;
  font-weight:700;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease;
}

.noir-ai-tag span{
  color:#f5c542;
  font-weight:900;
}

.noir-ai-tag:hover{
  transform:translateY(-1px);
  border-color:rgba(245,197,66,.42);
  background:rgba(245,197,66,.10);
  color:#fff;
}


/* =========================================================
   PLAYER AREA
========================================================= */

.noir-player-section{
  margin-top:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.055);
  border-radius:18px;
  background:#15130e;
}


/* =========================================================
   MOBILE SHARE
========================================================= */

.noir-share-box{
  margin-top:16px;
  padding:18px 15px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:14px;
  background:#1a1710;
  text-align:center;
}

.noir-share-btn{
  height:38px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:20px;
  background:linear-gradient(
    135deg,
    var(--noir-accent),
    var(--noir-accent-2)
  );
  color:#fff;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(245,197,66,.16);
}

.noir-share-btn:hover{
  filter:brightness(1.06);
}

.noir-share-btn:active{
  transform:translateY(1px);
}

.noir-share-box__text{
  margin:10px 0 0;
  color:#85828c;
  font-size:10px;
  line-height:1.5;
}

.noir-share-box__text i{
  color:#ffd95a;
}


/* =========================================================
   RELATED VIDEOS
========================================================= */

.noir-related{
  margin-top:28px;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.055);
}


/* =========================================================
   TABLET
========================================================= */

@media(min-width:768px) and (max-width:991.98px){

  .noir-play-info{
    padding:22px;
  }

  .noir-play-info__title{
    font-size:25px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767.98px){

  .noir-play-page{
    padding-top:4px;
    padding-bottom:28px;
  }


  /* 信息区 */

  .noir-play-info{
    padding:17px 14px;
    border-radius:14px;
  }

  .noir-play-info__title{
    font-size:22px;
    line-height:1.35;
  }

  .noir-play-info__meta{
    margin-top:9px;
    gap:5px 10px;
    font-size:8px;
  }

  .noir-play-info__meta > span:not(:last-child)::after{
    right:-6px;
  }

  .noir-play-info__author{
    margin-top:13px;
    font-size:9px;
  }

  .noir-play-info__intro{
    margin-top:17px;
  }

  .noir-play-info__intro h2{
    font-size:13px;
  }

  .noir-play-info__intro p{
    font-size:10px;
    line-height:1.7;
  }


  /* AI 推荐 */

  .noir-ai-tags{
    margin-top:12px;
    padding:15px 13px 16px;
    border-radius:13px;
  }

  .noir-ai-tags__head{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }

  .noir-ai-tags__head h2{
    font-size:16px;
  }

  .noir-ai-tags__list{
    margin-top:12px;
    gap:7px;
  }

  .noir-ai-tag{
    min-height:29px;
    padding:0 10px;
    border-radius:7px;
    font-size:9px;
  }


  /* 播放区域 */

  .noir-player-section{
    margin-top:12px;
    border-radius:13px;
  }


  /* 分享 */

  .noir-share-box{
    margin-top:12px;
    padding:15px 12px;
  }

  .noir-share-btn{
    height:36px;
    padding:0 16px;
    font-size:10px;
  }

  .noir-share-box__text{
    font-size:9px;
  }


  /* 相关推荐 */

  .noir-related{
    margin-top:22px;
    padding-top:22px;
  }

}

/* =========================================================
   HUANGGUO YELLOW BRAND REFINEMENT
========================================================= */
.noir-logo__mark,
.noir-btn--primary,
.noir-detail-play,
.noir-share-btn,
.noir-auth-submit,
.noir-pagination-section .page-item.active .page-link{
  color:#17120a !important;
}

.noir-section__head h2,
.noir-page-title,
.noir-detail-card__title,
.noir-play-info__title,
.noir-play-source__head h2,
.noir-ai-tags__head h2{
  color:#f7d96a;
}

.noir-video-card__episode{
  border-color:rgba(245,197,66,.28);
  background:rgba(31,26,12,.90);
  color:#ffd95a;
}

.noir-video-card__score,
.noir-detail-card__score,
.noir-play-info__score,
.noir-page-breadcrumb__current{
  color:#ffd95a;
}

.noir-hero-video-card__play,
.noir-video-card__play{
  background:rgba(245,197,66,.94);
  color:#17120a;
  box-shadow:0 8px 24px rgba(245,197,66,.16);
}

.noir-ai-tag span{color:#f5c542;}

.noir-ai-tag:hover{
  border-color:rgba(245,197,66,.42);
  background:rgba(245,197,66,.09);
  color:#fff4c7;
}

.noir-video-card,
.noir-detail-card,
.noir-play-info,
.noir-play-source,
.noir-ai-tags,
.noir-share-box{
  border-color:rgba(245,197,66,.08);
}

/* =========================================================
   HUANGGUO READABILITY — FINAL TYPE SCALE
========================================================= */
@media(min-width:768px){
  .noir-nav--desktop a{font-size:17px;}
  .noir-category-list a{
    height:42px;
    padding:0 20px;
    font-size:15px;
  }
  .noir-section__head h2,
  .noir-rank-box__intro h2{font-size:38px;}
  .noir-video-card__title{font-size:17px;}
  .noir-page-title{font-size:30px;}
  .noir-detail-card__title,
  .noir-play-info__title{font-size:34px;}
  .noir-main-search__form{height:64px;}
  .noir-main-search__input{font-size:17px;}
  .noir-main-search__type{font-size:14px;}
  .noir-main-search__button{font-size:15px;}
}

@media(max-width:767.98px){
  .noir-mobile-nav a{font-size:12px;}
  .noir-category-list a{
    height:38px;
    padding:0 15px;
    font-size:13px;
  }
  .noir-section__head h2,
  .noir-rank-box__intro h2{font-size:28px;}
  .noir-video-card__title{font-size:14px;}
  .noir-page-title{font-size:24px;}
  .noir-detail-card__title,
  .noir-play-info__title{font-size:24px;}
  .noir-main-search__form{height:56px;}
  .noir-main-search__input{font-size:14px;}
  .noir-main-search__type{font-size:12px;}
  .noir-main-search__button{font-size:12px;}
}
.noir-section__title-row{
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
}

.noir-more--inline{
  margin-bottom:4px;

  display:inline-flex;
  align-items:center;
  gap:3px;

  color:#f5c542;

  font-size:13px;
  font-weight:800;

  white-space:nowrap;
}

.noir-more--inline:hover{
  color:#ffd86a;
}

.noir-more--inline span{
  font-size:18px;
  line-height:1;
}


/* =========================================================
   INLINE "查看更多" BUTTON
========================================================= */

.noir-section__title-row{
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
}

.noir-more--inline{
  height:30px;
  margin-bottom:4px;
  padding:0 11px 0 12px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;

  border:1px solid rgba(245,197,66,.30);
  border-radius:999px;

  background:rgba(245,197,66,.08);

  color:#f5c542 !important;

  font-size:11px;
  font-weight:850;
  line-height:1;
  white-space:nowrap;

  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease;
}

.noir-more--inline span{
  position:relative;
  top:-1px;

  color:#e3b62f;

  font-size:17px;
  line-height:1;
}

.noir-more--inline:hover{
  transform:translateY(-1px);

  border-color:#f5c542;
  background:#f5c542;

  color:#17120a !important;
}

.noir-more--inline:hover span{
  color:#17120a;
}

@media(max-width:767.98px){
  .noir-section__title-row{
    gap:10px;
  }

  .noir-more--inline{
    height:27px;
    margin-bottom:2px;
    padding:0 9px 0 10px;
    font-size:10px;
  }

  .noir-more--inline span{
    font-size:15px;
  }
}

/* =========================================================
   LOGOUT BUTTON — HUANGGUO YELLOW FINAL OVERRIDE
========================================================= */
.noir-logout-btn,
.noir-mobile-logout{
  border-color:rgba(245,197,66,.38) !important;
  background:rgba(245,197,66,.10) !important;
  color:#f5c542 !important;
}

.noir-logout-btn:hover,
.noir-mobile-logout:hover{
  border-color:rgba(245,197,66,.68) !important;
  background:rgba(245,197,66,.18) !important;
  color:#fff2bd !important;
}