@font-face{font-family:PNURegular;src:url('../fonts/PNU-Regular.ttf') format('truetype');font-weight:400}
@font-face{font-family:PNUBold;src:url('../fonts/PNU-Bold.ttf') format('truetype');font-weight:700}
:root{--bg:#333333;--bg2:#2b2b2b;--card:#3b3b3b;--card2:#353535;--line:rgba(255,255,255,.08);--text:#fff;--muted:rgba(255,255,255,.7);--primary:#3D9FA1;--primary-strong:#55b7b9;--primary-soft:rgba(61,159,161,.18);--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}html,body{margin:0;padding:0;background:linear-gradient(180deg,#3a3a3a 0%,#333333 32%,#2f2f2f 100%);color:var(--text)}body{font-family:PNURegular,Tahoma,Arial,sans-serif}html[lang=en] body{font-family:Inter,Arial,sans-serif}
img{max-width:100%}
.container{width:min(1220px,92vw);margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(51,51,51,.86);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav-wrap{display:flex;justify-content:space-between;align-items:center;padding:14px 0;gap:16px}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-family:PNUBold,PNURegular,sans-serif;font-size:1.15rem}
.brand-badge{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary-strong));color:#fff;font-family:PNUBold,PNURegular,sans-serif;box-shadow:0 8px 24px rgba(61,159,161,.22)}
.main-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.main-nav a{color:var(--muted);text-decoration:none;padding:10px 14px;border-radius:14px;transition:.2s}
.main-nav a:hover,.main-nav .lang-switch{background:rgba(255,255,255,.05);color:#fff}
.page-main{padding:28px 0 56px}
.hero{position:relative;min-height:500px;border-radius:32px;overflow:hidden;border:1px solid rgba(61,159,161,.25);background:#262626;margin-bottom:34px;box-shadow:0 28px 50px rgba(0,0,0,.22)}
.hero img{width:100%;height:500px;object-fit:cover;display:block}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(22,22,22,.95) 5%,rgba(22,22,22,.55) 42%,rgba(22,22,22,.1) 70%)}
.hero-content{position:absolute;inset:auto 0 0 0;padding:36px;z-index:2}
.eyebrow,.pill,.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--primary-soft);border:1px solid rgba(61,159,161,.28);font-size:.84rem;color:#d6ffff}
.hero h1,.section-title,.detail-title,h2,h3,h4{font-family:PNUBold,PNURegular,sans-serif}
.hero h1{margin:14px 0 10px;font-size:clamp(2rem,4vw,3.7rem)}
.hero p{max-width:760px;color:var(--muted);line-height:1.95}
.btn,.btn-outline,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;padding:11px 16px;text-decoration:none;border:none;cursor:pointer;font:inherit;transition:.2s}
.btn{background:linear-gradient(135deg,var(--primary),var(--primary-strong));color:#fff;font-family:PNUBold,PNURegular,sans-serif;box-shadow:0 10px 22px rgba(61,159,161,.22)}
.btn:hover,.btn-outline:hover,.btn-ghost:hover{transform:translateY(-1px)}
.btn-outline{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.14);color:#fff}
.btn-ghost{background:transparent;color:var(--muted)}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:28px 0 16px;flex-wrap:wrap}
.section-title{font-size:1.4rem;margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)),var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.card:hover{transform:translateY(-4px);border-color:rgba(61,159,161,.34)}
.card-poster{position:relative}
.card img{width:100%;height:320px;object-fit:cover;display:block}
.card-body{padding:14px}
.meta-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.card h3{margin:0;font-size:1.05rem}
.small{font-size:.84rem;color:var(--muted)}
.badge-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:rgba(255,255,255,.04);padding:7px 10px;border-radius:12px;font-size:.77rem;color:#ecffff}
.badge.rating{background:rgba(255,255,255,.05);border-color:rgba(61,159,161,.24)}
.desc{color:var(--muted);line-height:1.85;font-size:.92rem;min-height:54px}
.listing-hero{display:flex;justify-content:space-between;align-items:end;gap:18px;flex-wrap:wrap;padding:22px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(135deg,rgba(61,159,161,.12),rgba(255,255,255,.03));margin-bottom:24px}
.detail-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:22px}
.cover-panel img{width:100%;height:100%;min-height:360px;object-fit:cover;border-radius:24px}
.detail-title{margin:14px 0 10px}
.detail-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.meta-box{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px;background:rgba(255,255,255,.03)}
.meta-label{font-size:.72rem;color:var(--muted)}
.meta-value{font-size:.9rem}
.inline-meta{display:flex;gap:10px;flex-wrap:wrap}
.season-tabs{display:flex;gap:8px;flex-wrap:wrap}
.season-tab{padding:9px 14px;border-radius:12px;border:1px solid var(--line);background:#373737;color:var(--muted);cursor:pointer}
.season-tab.active{background:var(--primary-soft);border-color:rgba(61,159,161,.28);color:#fff}
.episode-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.episode-card{display:grid;grid-template-columns:130px 1fr;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.episode-thumb img{width:100%;height:100%;min-height:100%;object-fit:cover}
.episode-body{padding:14px}
.person-hero{display:grid;grid-template-columns:170px 1fr;gap:20px;align-items:center}
.person-thumb{width:170px;height:170px;border-radius:24px;object-fit:cover;border:1px solid var(--line)}
.person-facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.crew-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.crew-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:12px;text-decoration:none;color:#fff}
.crew-card:hover{border-color:rgba(61,159,161,.3)}
.crew-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px}
.crew-card small{color:#bfeff0}
.auth-wrap,.contact-wrap{max-width:560px;margin:auto}
.input,.textarea,select{width:100%;background:#2f2f2f;color:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;font:inherit}
.form-group{margin-bottom:14px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.helper{font-size:.78rem;color:var(--muted);margin-top:6px}
.site-footer{margin-top:48px;border-top:1px solid var(--line);background:#2f2f2f}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;padding:28px 0}
.site-footer p,.copyright,.social-links a{color:var(--muted)}
.social-links{display:flex;gap:10px;flex-wrap:wrap}.social-links a{text-decoration:none;border:1px solid var(--line);padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.04)}
.copyright{border-top:1px solid var(--line);text-align:center;padding:14px 0}
.admin-layout{display:grid;grid-template-columns:280px 1fr;gap:18px}
.sidebar,.admin-panel{background:var(--card2);border:1px solid var(--line);border-radius:26px}
.sidebar{padding:18px}
.sidebar a{display:flex;gap:10px;color:var(--muted);text-decoration:none;padding:12px 14px;border-radius:14px}
.sidebar a.active,.sidebar a:hover{background:var(--primary-soft);color:#fff;border:1px solid rgba(61,159,161,.16)}
.admin-panel{padding:18px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{background:linear-gradient(180deg,rgba(61,159,161,.16),rgba(255,255,255,.03));border:1px solid rgba(61,159,161,.18);border-radius:20px;padding:16px}
.table-wrap{overflow:auto}
.admin-table{width:100%;border-collapse:collapse}.admin-table th,.admin-table td{padding:12px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.thumb-mini{width:60px;height:86px;border-radius:10px;object-fit:cover}
.alert{padding:12px 14px;border-radius:14px;margin-bottom:14px}
.alert.error{background:rgba(255,71,87,.12);border:1px solid rgba(255,71,87,.2)}.alert.success{background:rgba(20,220,140,.12);border:1px solid rgba(20,220,140,.2)}
.cast-row{display:grid;grid-template-columns:1.3fr 1fr 1fr 90px auto;gap:10px;align-items:end;margin-bottom:10px}
.cast-remove{min-width:42px}
.video-modal{position:fixed;inset:0;display:none;z-index:999}
.video-modal.open{display:block}
.video-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(4px)}
.video-modal-dialog{position:relative;z-index:2;width:min(1200px,96vw);margin:3vh auto;background:#111;border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:18px}
.video-frame-wrap{position:relative;padding-top:56.25%;overflow:hidden;border-radius:18px;background:#000}
.video-frame-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-close{position:absolute;top:10px;right:12px;border:none;background:rgba(255,255,255,.08);color:#fff;width:40px;height:40px;border-radius:12px;cursor:pointer;z-index:3}
@media (max-width:980px){.detail-layout,.admin-layout,.footer-grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:780px){.hero,.hero img{min-height:420px;height:420px}.episode-card,.person-hero{grid-template-columns:1fr}.person-thumb{width:120px;height:120px}.cast-row,.form-grid{grid-template-columns:1fr}}
@media (max-width:680px){.grid,.episode-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.main-nav{justify-content:center}.hero-content{padding:22px}.card img{height:280px}}
.brand-logo{width:42px;height:42px;border-radius:14px;object-fit:cover;border:1px solid var(--line);background:#222}
.top-banner-wrap{padding-top:18px}
.top-banner{display:block;width:100%;height:140px;object-fit:cover;border-radius:24px;border:1px solid var(--line)}
.store-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.store-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;border:1px solid var(--line);background:rgba(255,255,255,.04);padding:10px 14px;border-radius:14px}
.back-to-top{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border:none;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary-strong));color:#fff;box-shadow:0 10px 22px rgba(61,159,161,.22);cursor:pointer;display:none;z-index:60}
.back-to-top.show{display:block}
.settings-preview{width:80px;height:80px;object-fit:cover;border-radius:12px;border:1px solid var(--line);margin-top:8px}
.settings-banner-preview{width:100%;max-width:420px;height:110px;object-fit:cover;border-radius:12px;border:1px solid var(--line);margin-top:8px}

.main-nav-sm a{font-size:.92rem}
.quick-links{margin-bottom:8px}
.category-filters{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 24px}
.filter-chip{display:inline-flex;align-items:center;padding:9px 14px;border-radius:14px;text-decoration:none;color:#dff; border:1px solid var(--line); background:rgba(255,255,255,.04)}
.filter-chip.active,.filter-chip:hover{background:var(--primary-soft);border-color:rgba(61,159,161,.25);color:#fff}
.category-checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;border:1px solid var(--line);background:#2f2f2f;border-radius:16px;padding:14px}
.category-check{display:flex;align-items:center;gap:8px;color:#fff}
.card-poster img{width:100%;height:100%;display:block;object-fit:cover}
.copyright a{color:#dff;text-decoration:none}
.copyright a:hover{text-decoration:underline}

/* Header icons */
.icon-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.icon-nav .nav-item{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:56px;text-decoration:none;color:inherit;padding:6px 8px;border-radius:12px;transition:background .2s ease,transform .2s ease}
.icon-nav .nav-item:hover{background:rgba(255,255,255,.06);transform:translateY(-1px)}
.icon-nav .nav-item .icon{font-size:22px;line-height:1}
.icon-nav .nav-item small{font-size:11px;line-height:1.1;opacity:.9;white-space:nowrap}
.icon-nav .lang-flag .icon{font-size:24px}

/* Mobile: bottom navigation like apps */
@media (max-width:768px){
  .site-header{
    position:sticky;
    top:0;
    z-index:70;
    background:rgba(51,51,51,.92);
  }

  .nav-wrap{
    padding:10px 0 !important;
    justify-content:center;
  }

  .brand{
    width:100%;
    justify-content:center;
    font-size:1rem;
  }

  .brand-logo,.brand-badge{
    width:36px;
    height:36px;
    border-radius:12px;
  }

  .icon-nav{
    position:fixed;
    right:0;
    left:0;
    bottom:0;
    z-index:120;
    width:100%;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:0;
    margin:0;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    background:rgba(43,43,43,.96);
    backdrop-filter:blur(18px);
    border-top:1px solid var(--line);
    box-shadow:0 -10px 30px rgba(0,0,0,.28);
  }

  .icon-nav .nav-item{
    min-width:auto;
    padding:6px 2px;
    border-radius:12px;
    gap:3px;
  }

  .icon-nav .nav-item .icon{
    font-size:18px;
  }

  .icon-nav .nav-item small{
    font-size:9px;
    line-height:1;
  }

  .utility-nav-item{
    display:none !important;
  }

  .page-main{
    padding-bottom:96px !important;
  }

  .site-footer{
    padding-bottom:88px;
  }

  .top-banner-wrap{
    padding-top:12px;
  }

  .top-banner{
    height:96px;
    border-radius:18px;
  }
}