/* ========================================
   你我她影视 - Netflix Dark Theme CSS
   ======================================== */
:root{
  --bg:#141414;--bg-card:#181818;--bg-elevated:#1F1F1F;--bg-hover:#282828;
  --accent:#E50914;--accent-hover:#F6121D;--green:#46D369;--teal:#54B9C5;--teal-hover:#7DD5DF;
  --text:#FFF;--text-2:#E5E5E5;--text-3:#B3B3B3;--text-4:#808080;--text-5:#666;--text-6:#555;
  --border:#282828;--border-2:#333;--radius:4px;--radius-lg:8px;
  --header-h:68px;--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --shadow-card:0 4px 20px rgba(0,0,0,.4);--shadow-hover:0 8px 30px rgba(0,0,0,.7);
  --transition:all .2s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text-2);line-height:1.6;min-height:100vh;overflow-x:hidden}
a{color:var(--text-2);text-decoration:none;transition:color .2s}
a:hover{color:var(--text)}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select,textarea{font-family:inherit}

/* ===== Header ===== */
.nf-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:linear-gradient(to bottom,rgba(0,0,0,.85) 0%,rgba(0,0,0,.6) 60%,transparent 100%);padding:0 4%;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;transition:var(--transition)}
.nf-header.scrolled{background:rgba(20,20,20,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 10px rgba(0,0,0,.5)}
.nf-header-left{display:flex;align-items:center;gap:32px}
.nf-logo{font-size:28px;font-weight:900;color:var(--accent);letter-spacing:-1px;text-transform:uppercase;white-space:nowrap}
.nf-logo span{color:var(--text-2);font-weight:300}
.nf-nav{display:flex;gap:20px}
.nf-nav a{font-size:14px;color:var(--text-4);font-weight:500;transition:color .2s;position:relative;padding:4px 0}
.nf-nav a:hover,.nf-nav a.active{color:var(--text)}
.nf-nav a.active::after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--accent);border-radius:1px}
.nf-header-right{display:flex;align-items:center;gap:16px}
.nf-search-btn{color:var(--text);font-size:20px;padding:6px;transition:color .2s}
.nf-search-btn:hover{color:var(--accent)}
.nf-search-box{display:none;position:absolute;top:var(--header-h);left:0;right:0;background:rgba(0,0,0,.95);backdrop-filter:blur(12px);padding:16px 4%;border-bottom:1px solid var(--border)}
.nf-search-box.active{display:block}
.nf-search-box input{width:100%;max-width:600px;padding:12px 20px;background:var(--bg-elevated);border:1px solid var(--border-2);border-radius:var(--radius);color:var(--text);font-size:16px;outline:none;transition:border-color .2s}
.nf-search-box input:focus{border-color:var(--accent)}
.nf-search-box input::placeholder{color:var(--text-4)}
.nf-mobile-toggle{display:none;color:var(--text);font-size:24px;padding:6px}
.nf-mobile-menu{display:none;position:fixed;top:calc(var(--header-h) - 12px);left:0;right:0;background:rgba(0,0,0,.97);padding:16px 4%;z-index:999;border-bottom:1px solid var(--border)}
.nf-mobile-menu.active{display:block}
.nf-mobile-menu a{display:block;padding:14px 0;font-size:16px;color:var(--text-4);border-bottom:1px solid #222}
.nf-mobile-menu a:hover{color:var(--text)}

/* ===== Hero Banner ===== */
.nf-hero{position:relative;height:85vh;min-height:500px;max-height:900px;overflow:hidden;margin-top:calc(var(--header-h) * -1)}
.nf-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center top;transition:opacity 1s ease}
.nf-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(20,20,20,.92) 0%,rgba(20,20,20,.4) 50%,rgba(20,20,20,.1) 100%),linear-gradient(to top,var(--bg) 0%,transparent 30%)}
.nf-hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 4%;max-width:600px}
.nf-hero-tag{display:inline-block;background:var(--accent);color:var(--text);padding:4px 12px;border-radius:2px;font-size:13px;font-weight:700;margin-bottom:16px;width:fit-content}
.nf-hero-title{font-size:48px;font-weight:800;color:var(--text);line-height:1.1;margin-bottom:16px;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.nf-hero-desc{font-size:16px;color:var(--text-3);line-height:1.6;margin-bottom:8px;max-width:500px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nf-hero-meta{font-size:14px;color:var(--text-4);margin-bottom:24px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.nf-hero-meta .quality{background:#555;color:var(--text);padding:2px 8px;border-radius:2px;font-size:12px;font-weight:600}
.nf-hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.nf-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 28px;border-radius:var(--radius);font-size:16px;font-weight:700;transition:var(--transition)}
.nf-btn-primary{background:var(--text);color:#000}
.nf-btn-primary:hover{background:#E0E0E0;transform:scale(1.02)}
.nf-btn-secondary{background:rgba(109,109,110,.7);color:var(--text)}
.nf-btn-secondary:hover{background:rgba(109,109,110,.5)}
.nf-hero-indicators{position:absolute;bottom:40px;right:4%;z-index:3;display:flex;gap:8px}
.nf-hero-dot{width:12px;height:3px;background:rgba(255,255,255,.3);border-radius:2px;cursor:pointer;transition:var(--transition)}
.nf-hero-dot.active{width:28px;background:var(--accent)}

/* ===== Section ===== */
.nf-section{padding:30px 0 10px;position:relative}
.nf-section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:0 4%}
.nf-section-title h2{font-size:20px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.nf-section-title .more{font-size:14px;color:var(--teal);display:flex;align-items:center;gap:4px}
.nf-section-title .more:hover{color:var(--teal-hover)}

/* ===== Card Row (horizontal scroll) ===== */
.nf-row-wrap{position:relative;padding:0 4%}
.nf-row{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;padding:8px 0 20px;-ms-overflow-style:none;scrollbar-width:none}
.nf-row::-webkit-scrollbar{display:none}

/* ===== Movie Card ===== */
.nf-card{flex:0 0 calc((100% - 7*8px)/8);min-width:160px;position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .3s,box-shadow .3s;background:var(--bg-card)}
.nf-card:hover{transform:scale(1.08);z-index:10;box-shadow:var(--shadow-hover)}
.nf-card-img{position:relative;padding-top:140%;overflow:hidden}
.nf-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.nf-card:hover .nf-card-img img{transform:scale(1.1)}
.nf-card-title{padding:10px 8px 6px;font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-card-meta{padding:0 8px 10px;font-size:12px;color:var(--text-4);display:flex;justify-content:space-between;align-items:center}
.nf-card-badge{position:absolute;top:8px;left:8px;background:var(--accent);color:var(--text);padding:2px 8px;border-radius:2px;font-size:11px;font-weight:700;z-index:2}
.nf-card-score{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.7);color:var(--green);padding:2px 8px;border-radius:2px;font-size:12px;font-weight:700;z-index:2}
.nf-card-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:50px;height:50px;background:rgba(229,9,20,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .3s;z-index:2}
.nf-card:hover .nf-card-play{transform:translate(-50%,-50%) scale(1)}
.nf-card-play::after{content:"";width:0;height:0;border-left:18px solid var(--text);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}

/* ===== Grid (vertical layout) ===== */
.nf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;padding:0 4%}
.nf-grid .nf-card{flex:none;min-width:0}

/* ===== Filter ===== */
.nf-filter{padding:12px 4%;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--border);margin-bottom:20px}
.nf-filter-group{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nf-filter-label{font-size:14px;color:var(--text-4);font-weight:600;min-width:50px}
.nf-filter-tag{padding:6px 16px;border-radius:20px;font-size:13px;background:var(--bg-elevated);color:#CCC;transition:var(--transition);border:1px solid transparent}
.nf-filter-tag:hover,.nf-filter-tag.active{background:var(--accent);color:var(--text);border-color:var(--accent)}

/* ===== Pagination (MacCMS {$pages}) ===== */
.nf-pagination{display:flex;justify-content:center;gap:6px;padding:40px 0 60px;flex-wrap:wrap}
.nf-pagination a,.nf-pagination span{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius);font-size:14px;background:var(--bg-elevated);color:#CCC;transition:var(--transition);padding:0 12px;border:1px solid transparent}
.nf-pagination a:hover{background:var(--accent);color:var(--text)}
.nf-pagination .page-current,.nf-pagination span.page-current{background:var(--accent);color:var(--text);font-weight:700;border-color:var(--accent)}
.nf-pagination .page-disabled,.nf-pagination a.page-disabled{opacity:.3;pointer-events:none}

/* ===== Detail Page ===== */
.nf-detail-hero{position:relative;min-height:500px;overflow:hidden;margin-top:calc(var(--header-h) * -1)}
.nf-detail-hero .nf-hero-bg{background-position:center 20%}
.nf-detail-info{position:relative;z-index:2;padding:80px 4% 40px;display:flex;gap:40px;max-width:1400px;margin:0 auto}
.nf-hero-btns-float{position:absolute;bottom:40px;right:4%;z-index:3;display:flex;gap:8px}
.nf-hero-btns-float .nf-btn{padding:7px 18px;font-size:13px;border-radius:6px}
.nf-detail-poster{flex:0 0 280px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}
.nf-detail-poster img{width:100%;aspect-ratio:2/3;object-fit:cover}
.nf-detail-main{flex:1;min-width:0}
.nf-detail-title{font-size:36px;font-weight:800;color:var(--text);margin-bottom:12px;line-height:1.2}
.nf-detail-subtitle{font-size:16px;color:var(--text-4);margin-bottom:16px}
.nf-detail-score-row{display:flex;align-items:center;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.nf-detail-score{font-size:32px;font-weight:800;color:var(--green)}
.nf-detail-score-count{font-size:14px;color:var(--text-4)}
.nf-detail-tag{padding:4px 12px;border-radius:var(--radius);font-size:13px;background:var(--bg-elevated);color:#CCC}
.nf-detail-desc{font-size:15px;color:var(--text-3);line-height:1.8;margin-bottom:24px}
.nf-detail-crew{display:flex;gap:32px;font-size:14px;color:var(--text-4);margin-bottom:24px;flex-wrap:wrap}
.nf-detail-crew>div span{color:var(--text-3)}
.nf-detail-blurb{background:var(--bg-card);border-radius:var(--radius-lg);padding:24px;margin:0 4% 40px;max-width:1400px;margin-left:auto;margin-right:auto}
.nf-detail-blurb h3{font-size:18px;color:var(--text);margin-bottom:12px}
.nf-detail-blurb p{color:var(--text-3);line-height:1.8;font-size:15px}

/* ===== Episodes ===== */
.nf-ep-section{background:var(--bg-card);border-radius:var(--radius-lg);padding:24px;margin:0 4% 40px;max-width:1400px;margin-left:auto;margin-right:auto}
.nf-ep-section h3{font-size:18px;color:var(--text);margin-bottom:16px}
.nf-ep-tabs{display:flex;gap:4px;margin-bottom:20px;overflow-x:auto;flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}
.nf-ep-tabs::-webkit-scrollbar{display:none}
.nf-ep-tab{padding:8px 20px;border-radius:var(--radius);font-size:14px;background:var(--bg-elevated);color:#CCC;white-space:nowrap;transition:var(--transition);cursor:pointer}
.nf-ep-tab:hover{background:#444}
.nf-ep-tab.active{background:var(--accent);color:var(--text)}
.nf-ep-source{display:none}
.nf-ep-source.active{display:block}
.nf-ep-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;max-height:300px;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:thin;scrollbar-color:#444 transparent}
.nf-ep-list::-webkit-scrollbar{width:4px}
.nf-ep-list::-webkit-scrollbar-thumb{background:#444;border-radius:2px}
.nf-ep-item{padding:10px 4px;text-align:center;border-radius:var(--radius);background:var(--bg-hover);color:#CCC;font-size:14px;transition:var(--transition);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-ep-item:hover{background:var(--accent);color:var(--text)}
.nf-ep-item.active{background:var(--accent);color:var(--text);font-weight:600}

/* ===== Player ===== */
.nf-player-wrap{margin-top:var(--header-h);background:#000;position:relative;width:100%;padding-top:56.25%}
.nf-player-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
.nf-player-info{padding:20px 4%;background:var(--bg-card)}
.nf-player-title{font-size:24px;font-weight:700;color:var(--text);margin-bottom:8px}
.nf-player-sub{color:var(--text-4);font-size:14px;margin-bottom:4px}
.nf-player-desc{color:var(--text-3);font-size:14px}
.nf-player-ep-nav{display:flex;gap:8px;margin-top:12px}
.nf-player-ep-btn{padding:8px 16px;border-radius:var(--radius);font-size:14px;background:var(--bg-elevated);color:#CCC;transition:var(--transition)}
.nf-player-ep-btn:hover{background:var(--accent);color:var(--text)}

/* ===== Search ===== */
.nf-search-header{padding:100px 4% 20px}
.nf-search-header h1{font-size:28px;color:var(--text);margin-bottom:8px}
.nf-search-result-info{font-size:14px;color:var(--text-4);margin-bottom:20px}

/* ===== Footer ===== */
.nf-footer{margin-top:60px;padding:40px 4% 30px;border-top:1px solid var(--border)}
.nf-footer-content{max-width:1400px;margin:0 auto;display:flex;justify-content:center;gap:48px}
.nf-footer-col h4{font-size:14px;color:var(--text-4);margin-bottom:12px}
.nf-footer-col a{display:block;font-size:13px;color:var(--text-6);padding:4px 0;transition:color .2s}
.nf-footer-col a:hover{color:#CCC}
.nf-footer-bottom{max-width:1400px;margin:24px auto 0;padding-top:20px;border-top:1px solid #222;font-size:12px;color:var(--text-6);text-align:center}

/* ===== Back to Top ===== */
.nf-back-top{position:fixed;bottom:30px;right:30px;z-index:999;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--text);font-size:20px;display:none;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.4);transition:var(--transition)}
.nf-back-top:hover{background:var(--accent-hover);transform:translateY(-2px)}
.nf-back-top.visible{display:flex}

/* ===== Forms ===== */
.nf-form-container{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:100px 20px 40px}
.nf-form-card{background:var(--bg-elevated);border-radius:var(--radius-lg);padding:40px;width:100%;max-width:400px}
.nf-form-card h2{text-align:center;color:var(--text);margin-bottom:24px}
.nf-form-input{width:100%;padding:12px 16px;background:var(--bg-hover);border:1px solid var(--border-2);border-radius:var(--radius);color:var(--text);font-size:14px;margin-bottom:16px;outline:none;transition:border-color .2s}
.nf-form-input:focus{border-color:var(--accent)}
.nf-form-input::placeholder{color:var(--text-5)}
textarea.nf-form-input{resize:vertical;min-height:100px}
.nf-form-btn{width:100%;padding:12px;background:var(--accent);color:var(--text);border:none;border-radius:var(--radius);font-size:16px;font-weight:700;cursor:pointer;transition:var(--transition)}
.nf-form-btn:hover{background:var(--accent-hover)}

/* ===== Cards (flat / user menu) ===== */
.nf-card-flat{background:var(--bg-elevated);border-radius:var(--radius-lg);padding:20px;color:var(--text-2);text-align:center;transition:var(--transition);display:block}
.nf-card-flat:hover{background:var(--bg-hover);transform:translateY(-2px)}
.nf-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;max-width:900px;margin:0 auto}

/* ===== Message Items (comments/gbook) ===== */
.nf-message-list{max-width:900px;margin:0 auto;padding:0 4%}
.nf-message-item{background:var(--bg-elevated);border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:12px}
.nf-message-name{color:var(--text);font-size:14px;font-weight:600;margin-bottom:4px}
.nf-message-content{color:var(--text-3);font-size:14px;line-height:1.6}
.nf-message-time{color:var(--text-6);font-size:12px;margin-top:8px}

/* ===== Article ===== */
.nf-article-list{max-width:900px;margin:0 auto;padding:0 4%}
.nf-article-item{display:block;padding:20px 0;border-bottom:1px solid var(--border);color:var(--text-2);transition:color .2s}
.nf-article-item:hover{color:var(--text)}
.nf-article-item h3{font-size:18px;color:var(--text);margin-bottom:8px}
.nf-article-item p{font-size:14px;color:var(--text-4);margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nf-article-item time{font-size:12px;color:var(--text-6)}
.nf-article-content{max-width:900px;margin:0 auto;padding:0 4%}
.nf-article-content h1{font-size:28px;color:var(--text);margin-bottom:16px}
.nf-article-meta{font-size:13px;color:var(--text-4);margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.nf-article-body{color:var(--text-3);line-height:1.8;font-size:16px}
.nf-article-body p{margin-bottom:16px}
.nf-article-body img{border-radius:var(--radius);margin:16px 0}

/* ===== User Center ===== */
.nf-user-header{background:var(--bg-elevated);border-radius:var(--radius-lg);padding:24px;margin-bottom:20px}
.nf-user-header p{color:var(--text-3)}
.nf-user-header span{color:var(--text)}

/* ===== Empty State ===== */
.nf-empty{text-align:center;padding:80px 20px}
.nf-empty-icon{font-size:64px;margin-bottom:16px;opacity:.3}
.nf-empty-text{font-size:16px;color:var(--text-4)}

/* ===== 404 Page ===== */
.nf-page-404{text-align:center;padding:160px 20px 100px}
.nf-page-404 h1{font-size:120px;font-weight:900;color:var(--accent);opacity:.3;line-height:1;margin-bottom:16px}
.nf-page-404 h2{font-size:24px;color:var(--text);margin-bottom:12px}
.nf-page-404 p{color:var(--text-4);margin-bottom:32px}

/* ===== Breadcrumb ===== */
.nf-breadcrumb{padding:80px 4% 10px;font-size:13px;color:var(--text-6)}
.nf-breadcrumb a{color:var(--teal)}
.nf-breadcrumb a:hover{color:var(--teal-hover)}
.nf-breadcrumb span{margin:0 8px}

/* ===== Skeleton Loading ===== */
.nf-skeleton{background:linear-gradient(90deg,var(--bg-elevated) 25%,var(--bg-hover) 50%,var(--bg-elevated) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== Utilities ===== */
.nf-gradient-text{background:linear-gradient(135deg,var(--accent),#FF6B6B);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-red{color:var(--accent)}.text-green{color:var(--green)}.text-gray{color:var(--text-4)}.text-white{color:var(--text)}
.nf-jsonld{display:none}

/* ===== Scrollbar ===== */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#444;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#555}

/* ===== Responsive: Tablet ===== */
@media(max-width:1200px){
  .nf-card{flex:0 0 calc((100% - 5*8px)/6)}
}
@media(max-width:1024px){
  .nf-card{flex:0 0 calc((100% - 4*8px)/5);min-width:140px}
  .nf-hero-title{font-size:36px}
  .nf-detail-poster{flex:0 0 220px}
  .nf-detail-title{font-size:28px}
}

/* ===== Responsive: Mobile ===== */
@media(max-width:768px){
  :root{--header-h:52px}
  /* Header */
  .nf-header{height:var(--header-h);padding:0 3%}
  .nf-header-left{gap:12px}
  .nf-logo{font-size:22px;letter-spacing:0}
  .nf-nav{display:none}
  .nf-mobile-toggle{display:block;font-size:22px}
  .nf-mobile-menu{top:var(--header-h)}
  .nf-search-btn{font-size:18px}
  .nf-search-box{padding:12px 3%}
  .nf-search-box input{font-size:16px;padding:12px 16px}

  /* Hero */
  .nf-hero{height:55vh;min-height:320px;max-height:500px}
  .nf-hero-content{padding:0 3%;max-width:none}
  .nf-hero-tag{font-size:11px;padding:3px 8px;margin-bottom:10px}
  .nf-hero-title{font-size:22px;margin-bottom:10px;text-shadow:0 2px 12px rgba(0,0,0,.7)}
  .nf-hero-desc{font-size:13px;-webkit-line-clamp:2;max-width:none}
  .nf-hero-meta{font-size:12px;gap:10px;margin-bottom:16px}
  .nf-hero-btns{flex-direction:row;gap:8px}
  .nf-btn{padding:9px 18px;font-size:13px;border-radius:3px}
  .nf-hero-indicators{bottom:16px;right:3%}
  .nf-hero-dot{width:10px;height:3px}
  .nf-hero-dot.active{width:22px}

  /* Sections & Cards */
  .nf-section{padding:20px 0 6px}
  .nf-section-title{margin-bottom:10px;padding:0 3%}
  .nf-section-title h2{font-size:16px}
  .nf-section-title .more{font-size:13px}
  .nf-row-wrap{padding:0 3%}
  .nf-row{gap:6px;padding:6px 0 14px}
  .nf-card{flex:0 0 calc((100% - 2*6px)/3);min-width:100px}
  .nf-card:hover{transform:none;box-shadow:none}
  .nf-card-img{padding-top:140%}
  .nf-card-title{padding:8px 6px 4px;font-size:12px}
  .nf-card-meta{padding:0 6px 8px;font-size:11px}
  .nf-card-badge{top:6px;left:6px;padding:1px 6px;font-size:10px}
  .nf-card-score{top:6px;right:6px;padding:1px 6px;font-size:11px}
  .nf-card-play{width:40px;height:40px}
  .nf-card-play::after{border-left-width:14px;border-top-width:9px;border-bottom-width:9px;margin-left:3px}
  .nf-card-play{transform:translate(-50%,-50%) scale(.8)}
  .nf-card:hover .nf-card-play{transform:translate(-50%,-50%) scale(1)}

  /* Grid */
  .nf-grid{grid-template-columns:repeat(3,1fr);gap:8px;padding:0 3%}
  .nf-grid .nf-card{min-width:0}

  /* Filter */
  .nf-filter{padding:10px 3%;gap:8px}
  .nf-filter-group{gap:6px}
  .nf-filter-label{font-size:13px;min-width:40px}
  .nf-filter-tag{padding:5px 12px;font-size:12px;border-radius:16px}

  /* Pagination */
  .nf-pagination{gap:4px;padding:20px 0 30px}
  .nf-pagination a,.nf-pagination span{min-width:32px;height:32px;font-size:12px;padding:0 6px}

  /* Detail */
  .nf-detail-hero{min-height:300px}
  .nf-detail-info{flex-direction:column;gap:16px;padding:60px 3% 20px}
  .nf-detail-poster{flex:none;width:50%;max-width:200px;margin:0 auto}
  .nf-detail-title{font-size:20px;margin-bottom:8px}
  .nf-detail-subtitle{font-size:14px;margin-bottom:10px}
  .nf-detail-score{font-size:24px}
  .nf-detail-score-row{gap:12px;margin-bottom:14px}
  .nf-detail-tag{font-size:12px;padding:3px 8px}
  .nf-detail-desc{font-size:14px;margin-bottom:16px}
  .nf-detail-crew{gap:16px;font-size:13px;margin-bottom:16px}
  .nf-detail-blurb{margin:0 3% 24px;padding:16px;border-radius:var(--radius)}
  .nf-detail-blurb h3{font-size:16px;margin-bottom:8px}
  .nf-detail-blurb p{font-size:14px}

  /* Episodes */
  .nf-ep-section{margin:0 3% 24px;padding:14px;border-radius:var(--radius)}
  .nf-ep-section h3{font-size:16px;margin-bottom:12px}
  .nf-ep-tab{padding:6px 14px;font-size:13px}
  .nf-ep-list{grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:6px;max-height:240px}
  .nf-ep-item{padding:8px 2px;font-size:12px}

  /* Player */
  .nf-player-wrap{margin-top:var(--header-h)}
  .nf-player-info{padding:14px 3%}
  .nf-player-title{font-size:18px}
  .nf-player-sub{font-size:13px}
  .nf-player-desc{font-size:13px}
  .nf-player-ep-nav{flex-wrap:wrap;gap:6px}
  .nf-player-ep-btn{padding:6px 12px;font-size:13px}

  /* Search */
  .nf-search-header{padding:70px 3% 14px}
  .nf-search-header h1{font-size:20px}
  .nf-search-result-info{font-size:13px}

  /* Breadcrumb */
  .nf-breadcrumb{padding:62px 3% 6px;font-size:12px}

  /* Footer */
  .nf-footer{margin-top:40px;padding:20px 3% 16px}
  .nf-footer-content{gap:24px;flex-wrap:wrap;justify-content:center}
  .nf-footer-col h4{font-size:13px;margin-bottom:8px}
  .nf-footer-col a{font-size:12px}
  .nf-footer-bottom{margin-top:16px;padding-top:14px;font-size:11px}

  /* Back to top */
  .nf-back-top{bottom:16px;right:12px;width:38px;height:38px;font-size:18px}

  /* Forms */
  .nf-form-container{padding:70px 12px 20px}
  .nf-form-card{padding:20px 16px;border-radius:var(--radius)}
  .nf-form-card h2{font-size:18px;margin-bottom:16px}
  .nf-form-input{padding:10px 14px;font-size:16px;margin-bottom:12px}

  /* Card grid & messages */
  .nf-card-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .nf-message-list,.nf-article-list,.nf-article-content{padding:0 3%}
  .nf-message-item{padding:12px 14px}
  .nf-message-name{font-size:13px}
  .nf-message-content{font-size:13px}
  .nf-article-item{padding:14px 0}
  .nf-article-item h3{font-size:16px}
  .nf-article-content h1{font-size:22px}

  /* Empty & 404 */
  .nf-empty{padding:50px 16px}
  .nf-empty-icon{font-size:48px}
  .nf-empty-text{font-size:14px}
  .nf-page-404{padding:100px 16px 60px}
  .nf-page-404 h1{font-size:80px}

  /* User */
  .nf-user-header{padding:16px}
}

/* ===== Responsive: Small Mobile (<=480px) ===== */
@media(max-width:480px){
  :root{--header-h:48px}
  .nf-logo{font-size:20px}
  .nf-hero{height:50vh;min-height:280px}
  .nf-hero-title{font-size:20px}
  .nf-hero-desc{font-size:12px;-webkit-line-clamp:2}
  .nf-hero-btns{flex-direction:column;gap:6px}
  .nf-hero-btns-float{bottom:20px;right:3%;flex-direction:row;gap:6px}
  .nf-hero-btns-float .nf-btn{padding:6px 14px;font-size:12px}
  .nf-btn{width:100%;justify-content:center;padding:10px 16px}
  .nf-card{flex:0 0 calc((100% - 1*6px)/2.5);min-width:90px}
  .nf-grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .nf-ep-list{grid-template-columns:repeat(5,1fr);gap:4px}
  .nf-card-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .nf-filter-tag{padding:4px 10px;font-size:11px}
  .nf-detail-poster{width:45%}
  .nf-detail-title{font-size:18px}
  .nf-footer-content{flex-direction:column;gap:16px}
}

/* ===== DPlayer Wrapper (from play.html) ===== */
#nfPlayerWrap{width:100%;background:#000;position:relative;padding-top:56.25%;margin-top:var(--header-h,60px)}
#nfPlayerWrap .dplayer{position:absolute;top:0;left:0;width:100%!important;height:100%!important}
#nfPlayerWrap .MacPlayer{position:absolute;top:0;left:0;width:100%!important;height:100%!important;z-index:1}
@media(max-width:768px){
  #nfPlayerWrap{margin-top:0;padding-top:0;height:56.25vw}
}