:root { --accent: #e5202b; --accent2: #ff4d4d; --bg: #141414; --card-bg: #1f1f1f; --text: #eee; --muted: #9a9a9a;
        --gold: #d4af37; --gold2: #f3dd8a;
        --accent-rgb: 229,32,43; --gold-rgb: 212,175,55; }
:root[data-theme="netflix"] { --accent: #e50914; --accent2: #ff3b47; --gold: #9a9a9a; --gold2: #e2e2e2;
                               --accent-rgb: 229,9,20; --gold-rgb: 154,154,154; }
:root[data-theme="royal"] { --accent: #7c3aed; --accent2: #a78bfa; --gold: #c9a7ff; --gold2: #e8dcff;
                             --accent-rgb: 124,58,237; --gold-rgb: 201,167,255; }
:root[data-theme="emerald"] { --accent: #0ea968; --accent2: #34d399; --gold: #c9a227; --gold2: #f0d98a;
                               --accent-rgb: 14,169,104; --gold-rgb: 201,162,39; }
:root[data-theme="midnight"] { --accent: #2563eb; --accent2: #60a5fa; --gold: #7dd3fc; --gold2: #cfeeff;
                                --accent-rgb: 37,99,235; --gold-rgb: 125,211,252; }
* { box-sizing: border-box; }
body { font-family: "Leelawadee UI", "Segoe UI", -apple-system, "Noto Sans Thai", Roboto, sans-serif;
       margin: 0; background: var(--bg); color: var(--text); overflow-x: hidden; }
a { color: inherit; }
.navbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center;
          justify-content: space-between; padding: 0.75rem 3rem; background: rgba(10,10,10,.92);
          backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.06);
          box-shadow: 0 2px 12px rgba(0,0,0,.5); flex-wrap: wrap; gap: 0.8rem; }
/* Seigaiha (青海波) — a traditional Japanese overlapping-wave motif — as a thin scalloped
   trim under the navbar. Built from tiled radial-gradient "coins" rather than an image. */
.navbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px;
          background-image: radial-gradient(circle at 10px -5px, transparent 9px, rgba(var(--accent-rgb),.55) 10px);
          background-size: 20px 14px; background-repeat: repeat-x; pointer-events: none; }
.brand-block { display: flex; flex-direction: column; gap: 0.1rem; margin-right: auto; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand-icon { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
              width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; border-radius: 10px 10px 10px 2px;
              background: linear-gradient(150deg, var(--accent2), var(--accent) 60%, #7a0e14);
              color: #fff; font-size: 1.17rem; font-weight: 900; font-style: italic;
              box-shadow: 0 5px 16px rgba(var(--accent-rgb),.6), inset 0 0 0 1px rgba(255,255,255,.25);
              transition: transform .2s ease; }
.brand-icon::after { content: ""; position: absolute; top: -30%; left: -20%; width: 60%; height: 160%;
                      background: rgba(255,255,255,.28); transform: rotate(20deg); }
.brand-icon::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 2;
                       background: linear-gradient(75deg, transparent, rgba(255,255,255,.55), transparent);
                       transform: skewX(-18deg); opacity: 0; pointer-events: none; }
.brand:hover .brand-icon { transform: scale(1.06) rotate(-2deg); }
.brand:hover .brand-icon::before { animation: shine-sweep .9s ease forwards; }
.logo-eq { display: flex; align-items: flex-end; gap: 3px; height: 1.35rem; margin: 0 0.05rem; }
.logo-eq span { width: 3px; border-radius: 2px; transform-origin: bottom; transform: scaleY(.4);
                background: linear-gradient(180deg, var(--gold2), var(--accent)); animation: eq-bounce 1.1s ease-in-out infinite; }
.logo-eq span:nth-child(1) { height: 45%; animation-delay: -0.9s; }
.logo-eq span:nth-child(2) { height: 85%; animation-delay: -0.4s; }
.logo-eq span:nth-child(3) { height: 60%; animation-delay: -1.1s; }
.logo-eq span:nth-child(4) { height: 100%; animation-delay: -0.15s; }
@keyframes eq-bounce { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.brand-text-jap { font-weight: 900; font-size: 1.94rem; letter-spacing: -.5px;
              background: linear-gradient(120deg, var(--accent2), var(--accent));
              -webkit-background-clip: text; background-clip: text; color: transparent;
              filter: drop-shadow(0 0 16px rgba(var(--accent-rgb),.55)); }
/* "Cute" gets its own treatment: a tilted filmstrip badge (sprocket-hole rows top/bottom via
   layered radial-gradients cut into a dark fill) so the wordmark reads as two distinct halves,
   Netflix-style icon energy on the "Jap" gradient text + a playful film-reel chip for "Cute". */
.brand-text-cute { position: relative; overflow: hidden; display: inline-block; margin-left: 0.28rem;
              padding: 0.22em 0.6em 0.28em; border-radius: 5px;
              font-weight: 900; font-size: 1.44rem; font-style: italic; letter-spacing: -.01em;
              color: #fff; transform: skewX(-8deg) rotate(-2deg); transform-origin: bottom left;
              box-shadow: 0 5px 14px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--gold-rgb),.4),
                          inset 0 0 12px rgba(var(--accent-rgb),.3);
              background-image:
                radial-gradient(circle, var(--bg) 42%, transparent 43%),
                radial-gradient(circle, var(--bg) 42%, transparent 43%),
                linear-gradient(140deg, #333 0%, #111 55%, #000 100%);
              background-position: top left, bottom left, 0 0;
              background-size: 9px 9px, 9px 9px, 100% 100%;
              background-repeat: repeat-x, repeat-x, no-repeat;
              transition: transform .2s ease; }
.brand-text-cute::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 2;
              background: linear-gradient(75deg, transparent, rgba(255,255,255,.45), transparent);
              transform: skewX(-18deg); opacity: 0; pointer-events: none; }
.brand:hover .brand-text-cute { transform: skewX(-8deg) rotate(-2deg) scale(1.05); }
.brand:hover .brand-text-cute::after { animation: shine-sweep .9s ease .1s forwards; }
.brand-slogan { font-size: 0.7rem; font-weight: 700; letter-spacing: .03em; color: var(--gold2);
                 padding-left: 3.1rem; }
.tabs { position: relative; display: flex; align-items: center; gap: 0.4rem; margin-right: 2.5rem; }
/* A soft multi-hue underline tying the four tab accent colors together in one line — a
   gentler, pastel-glow touch (vs. the sharper red/gold everywhere else) for a little
   K-style softness against the otherwise high-contrast red/gold Japanese-leaning palette. */
.tabs::after { content: ""; position: absolute; left: 0.6rem; right: 0.6rem; bottom: -5px; height: 2px;
          border-radius: 2px; opacity: .5;
          background: linear-gradient(90deg, rgba(229,32,43,.6), rgba(212,175,55,.6), rgba(45,212,191,.6), rgba(124,58,237,.6)); }
.tabs a { position: relative; text-decoration: none; color: #d6d6d6; font-weight: 700; font-size: 1.15rem;
          padding: 0.5rem 1.05rem; font-style: italic; border-radius: 14px 4px 14px 4px;
          display: inline-flex; align-items: center;
          transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .15s ease; }
.tabs a:hover { color: #fff; background: rgba(255,255,255,.06); transform: translateY(-1px); }
.tab-icon { display: inline-flex; align-items: center; justify-content: center; margin-right: 0.4rem;
            font-size: 1.05rem; font-style: normal; line-height: 1; }
.tab-icon svg { display: block; width: 1.15em; height: 1.15em; border-radius: 50%;
                border: 1.5px solid rgba(255,255,255,.55); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
/* Inactive tabs get a slim gradient underline instead of nothing — the active tab's own
   background pill is enough signal on its own, so the underline only shows on the rest. */
.tabs a:not(.active)::before { content: ""; position: absolute; left: 1.1rem; right: 1.1rem; bottom: 0.3rem;
          height: 2px; border-radius: 2px; opacity: .5; transition: opacity .18s ease;
          background: linear-gradient(90deg, rgba(var(--accent-rgb),.85), rgba(var(--gold-rgb),.85)); }
.tabs a:not(.active):hover::before { opacity: .95; }
.tabs a.active { color: #fff; background: linear-gradient(135deg, var(--accent2), var(--accent));
                  box-shadow: 0 4px 14px rgba(var(--accent-rgb),.45); }
/* Each tab gets its own accent so the row reads as curated rather than uniform — reusing hues
   already established elsewhere in the site (teal from the sidebar categories, gold, royal
   purple from the theme picker) instead of inventing new ones. */
.tabs a.tab-news:hover { color: #5eead4; background: rgba(45,212,191,.12); }
.tabs a.tab-news.active { background: linear-gradient(135deg, #2dd4bf, #0d9488);
                            box-shadow: 0 4px 14px rgba(45,212,191,.4); }
.tabs a.tab-star:hover { color: var(--gold2); background: rgba(var(--gold-rgb),.14); }
.tabs a.tab-star.active { color: #1c1608; background: linear-gradient(135deg, var(--gold2), var(--gold));
                            box-shadow: 0 4px 14px rgba(var(--gold-rgb),.4); }
.tabs a.tab-studio:hover { color: #c9a7ff; background: rgba(124,58,237,.14); }
.tabs a.tab-studio.active { background: linear-gradient(135deg, #a78bfa, #7c3aed);
                              box-shadow: 0 4px 14px rgba(124,58,237,.4); }
.tabs a.tab-sub-yes:hover { color: #ff8a93; background: rgba(230,30,40,.12); }
.tabs a.tab-sub-yes.active { background: linear-gradient(135deg, #ff5b63, #c81824);
                              box-shadow: 0 4px 14px rgba(200,24,36,.45); }
.tabs a.tab-sub-no:hover { color: #cfcfcf; background: rgba(255,255,255,.08); }
.tabs a.tab-sub-no.active { background: linear-gradient(135deg, #7a7a7a, #4a4a4a);
                              box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.tabs a.tab-soon { font-size: 0.98rem; opacity: .8; }
.nav-search { display: flex; align-items: center; }
.nav-search input { width: 190px; background: #1c1c1c; border: 1px solid #333; color: #fff;
                     padding: 0.4rem 0.8rem; border-radius: 999px; font-size: 0.85rem;
                     transition: width .2s ease, border-color .2s ease, box-shadow .2s ease; }
.nav-search input:focus { outline: none; width: 240px; border-color: var(--gold);
                           box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.18); }
.nav-right { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; }
.nav-right a { text-decoration: none; color: var(--muted); transition: color .15s ease; }
.nav-right a:hover { color: #fff; }
.hero-top { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: flex-start;
            gap: 2rem; flex-wrap: wrap; padding: 2.8rem 2.2rem 3.1rem; }
.hero-top::before, .hero-top::after { content: ""; position: absolute; border-radius: 50%; z-index: 0;
                                       filter: blur(50px); pointer-events: none; }
.hero-top::before { width: 480px; height: 480px; top: -220px; left: -120px;
                     background: radial-gradient(circle, rgba(var(--accent-rgb),.28), transparent 70%);
                     animation: drift1 15s ease-in-out infinite alternate; }
.hero-top::after { width: 420px; height: 420px; bottom: -200px; right: -100px;
                    background: radial-gradient(circle, rgba(var(--gold-rgb),.22), transparent 70%);
                    animation: drift2 18s ease-in-out infinite alternate; }
@keyframes drift1 { from { transform: translate(0, 0); } to { transform: translate(70px, 50px); } }
@keyframes drift2 { from { transform: translate(0, 0); } to { transform: translate(-60px, -35px); } }
.hero-top > * { position: relative; z-index: 1; }
.hero-tagline { flex: 0 0 340px; }
.tagline-eyebrow { display: inline-block; font-size: 0.85rem; font-weight: 800; letter-spacing: .12em;
                    color: var(--gold2); background: rgba(var(--gold-rgb),.12); border: 1px solid rgba(var(--gold-rgb),.35);
                    padding: 0.4rem 0.9rem; border-radius: 999px; margin-bottom: 1.3rem; }
.hero-tagline h2 { font-size: 3.1rem; font-weight: 900; line-height: 1.12; margin: 0 0 1rem;
                    background: linear-gradient(120deg, #fff, var(--gold2));
                    -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-tagline p { color: var(--muted); font-size: 1.1rem; margin: 0; }
.kicker { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 800;
          letter-spacing: .04em; padding: 0.35rem 0.9rem 0.35rem 0.7rem; border-radius: 999px;
          margin: 1.9rem 2.2rem -0.9rem; }
.showcase-carousel { flex: 1 1 400px; min-width: 0; overflow: hidden; position: relative; }
.showcase-carousel::before, .showcase-carousel::after { content: ""; position: absolute; top: 0; bottom: 0;
                                                          width: 50px; z-index: 2; pointer-events: none; }
.showcase-carousel::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.showcase-carousel::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.showcase-track { display: flex; align-items: flex-end; gap: 1.5rem; width: max-content;
                   animation: showcase-scroll 34s linear infinite; }
.showcase-carousel:hover .showcase-track { animation-play-state: paused; }
@keyframes showcase-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.showcase-item { width: 270px; flex: 0 0 270px; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.showcase-item .card:hover { transform: none; }
.showcase-item.t0 { transform: rotate(-4deg) translateY(8px); }
.showcase-item.t1 { transform: rotate(0deg) translateY(-6px); }
.showcase-item.t2 { transform: rotate(4deg) translateY(8px); }
.showcase-item:hover { transform: rotate(0deg) translateY(-16px) scale(1.08) !important; z-index: 5; }
.site-stats-strip { color: var(--muted); font-size: 0.78rem; padding: 0 2.2rem; margin: -0.6rem 0 1.1rem;
                     text-align: right; }
.layout { display: flex; align-items: flex-start; }
.sidebar { position: sticky; top: 84px; flex: 0 0 200px; width: 200px;
           padding: 1.4rem 1rem 1.6rem; }
.main-content { flex: 1 1 0%; min-width: 0; }
.side-section h4 { font-size: 0.98rem; text-transform: uppercase; letter-spacing: .08em; color: #b0b0b0;
                    margin: 0 0 0.7rem; font-weight: 800; }
.side-list { display: flex; flex-direction: column; gap: 0.35rem; }
.side-item { position: relative; display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 0.75rem 0.6rem 0.9rem;
             border-radius: 999px 10px 999px 10px;
             text-decoration: none; color: #ccc; font-size: 1.08rem; font-weight: 700;
             background: transparent; border: 1px solid transparent;
             transition: background .18s ease, color .18s ease, border-color .18s ease, transform .15s ease, box-shadow .18s ease; }
.side-item:hover { color: #fff; background: linear-gradient(120deg, rgba(var(--gold-rgb),.32), rgba(var(--accent-rgb),.16));
                    border-color: rgba(var(--gold-rgb),.5); transform: translateX(4px);
                    box-shadow: 0 4px 14px rgba(var(--gold-rgb),.25); }
.side-item:active { transform: translateX(4px) scale(.97);
                     background: linear-gradient(120deg, rgba(var(--gold-rgb),.5), rgba(var(--accent-rgb),.28)); }
.side-item.active { color: #fff; background: linear-gradient(120deg, rgba(255,138,61,.4), rgba(var(--accent-rgb),.22));
                     border-color: rgba(255,138,61,.6); box-shadow: 0 4px 14px rgba(255,138,61,.3); }
.side-item.active::before, .side-cat.active::before {
  content: ""; position: absolute; left: -0.1rem; top: 18%; bottom: 18%; width: 4px; border-radius: 3px;
  background: linear-gradient(180deg, var(--gold2), #ff8a3d); }
.side-rank { flex: 0 0 1.9em; height: 1.9em; display: flex; align-items: center; justify-content: center;
             border-radius: 50%; font-size: 0.95rem; font-weight: 800; color: #0c0c0c;
             background: linear-gradient(135deg, var(--gold2), var(--gold)); }
/* Popular list is intentionally quieter than the หมวดหมู่ list above it — small plain icon
   instead of a rank-number badge, smaller text, less padding. */
.side-panel-popular .side-item { font-size: 0.86rem; font-weight: 600; color: #bbb;
             padding: 0.42rem 0.6rem 0.42rem 0.7rem; gap: 0.5rem; }
.side-panel-popular .side-item:hover { color: #fff; }
.side-popular-icon { flex: 0 0 auto; font-size: 0.8rem; opacity: .75; }
.side-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-empty { color: #666; font-size: 0.86rem; padding: 0.2rem 0.6rem; }
.side-profile { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem; margin-bottom: 1.3rem;
                 border-radius: 14px 4px 14px 4px; background: rgba(var(--gold-rgb),.08);
                 border: 1px solid rgba(var(--gold-rgb),.25); text-decoration: none; transition: background .15s ease; }
.side-profile:hover { background: rgba(var(--gold-rgb),.14); }
.side-profile-avatar { flex: 0 0 2.1rem; width: 2.1rem; height: 2.1rem; border-radius: 8px 8px 8px 2px;
                        background: linear-gradient(135deg, var(--gold2), var(--gold)); color: #0c0c0c;
                        font-weight: 900; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; }
.side-profile-name { font-size: 0.85rem; font-weight: 800; color: #fff; }
.side-profile-role { font-size: 0.7rem; color: var(--muted); }
.side-panel { border-radius: 16px 4px 16px 4px; background: rgba(var(--gold-rgb),.06);
              border: 1px solid rgba(var(--gold-rgb),.2); padding: 0.9rem 0.8rem; margin-bottom: 1.2rem; }
.side-panel:last-child { margin-bottom: 0; }
.side-panel-cats { border-radius: 6px 20px 6px 20px; background: rgba(45,212,191,.08); border-color: rgba(45,212,191,.28); }
/* Plain list, no card framing — just the items themselves, unlike the หมวดหมู่ panel above it. */
.side-panel-popular { background: none; border: none; padding: 0; }
.side-cat { position: relative; display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.75rem 0.6rem 0.9rem;
            border-radius: 999px 10px 999px 10px;
            text-decoration: none; color: #e2e2e2; font-size: 1.08rem; font-weight: 700;
            transition: background .18s ease, color .18s ease, transform .15s ease, box-shadow .18s ease; }
.side-cat:hover { color: #fff; background: linear-gradient(120deg, rgba(45,212,191,.32), rgba(var(--gold-rgb),.14));
                   transform: translateX(4px); box-shadow: 0 4px 14px rgba(45,212,191,.28); }
.side-cat:active { transform: translateX(4px) scale(.97);
                    background: linear-gradient(120deg, rgba(45,212,191,.5), rgba(var(--gold-rgb),.24)); }
.side-cat.active { color: #fff; background: linear-gradient(120deg, rgba(45,212,191,.42), rgba(var(--gold-rgb),.2));
                    box-shadow: 0 4px 14px rgba(45,212,191,.32); }
.side-cat.active::before { background: linear-gradient(180deg, #5eead4, #0d9488); }
.side-cat-icon { font-size: 1.55rem; }
/* "ใหม่" (newest) is deliberately red — distinct from the teal treatment every other
   category link gets — so it reads instantly as the urgent/fresh one in the list, red and
   italic from the start (not just on hover), fading out left-to-right toward the label edge. */
.side-cat.side-cat-new { color: #fff; font-weight: 800; font-style: italic;
            background: linear-gradient(90deg, rgba(229,32,43,.65), rgba(229,32,43,.18) 65%, transparent);
            border: 1px solid rgba(229,32,43,.55); box-shadow: 0 3px 10px rgba(229,32,43,.25); }
.side-cat.side-cat-new .side-cat-icon { filter: drop-shadow(0 0 5px rgba(255,255,255,.6)); }
.side-cat.side-cat-new:hover { background: linear-gradient(90deg, rgba(229,32,43,.85), rgba(229,32,43,.28) 65%, transparent);
            border-color: #ff6b6b; box-shadow: 0 4px 14px rgba(229,32,43,.45); transform: translateX(4px); }
.side-cat.side-cat-new:active { transform: translateX(4px) scale(.97); }
.side-cat.side-cat-new.active { background: linear-gradient(90deg, rgba(229,32,43,.9), rgba(229,32,43,.32) 65%, transparent);
            border-color: #ff6b6b; box-shadow: 0 4px 14px rgba(229,32,43,.45); }
.side-cat.side-cat-new.active::before { background: linear-gradient(180deg, #ff6b6b, #b3121c); }
.theme-picker { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 50; display: flex; gap: 0.5rem;
                 background: rgba(10,10,10,.85); backdrop-filter: blur(8px); padding: 0.5rem;
                 border-radius: 999px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.theme-swatch { width: 1.4rem; height: 1.4rem; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
                 transition: transform .15s ease, border-color .15s ease; }
.theme-swatch:hover { transform: scale(1.18); }
.theme-swatch.active { border-color: #fff; }
.section-title { padding: 1.6rem 2.2rem 0.6rem; font-size: 1.3rem; font-weight: 800; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.4rem;
        padding: 0 2.2rem 3rem; }
.catalog-loading { display: none; text-align: center; color: var(--muted); font-size: 0.9rem; padding: 0 0 2.5rem; }
/* Fixed-per-row overrides for movie listing grids specifically — the generic .grid class
   keeps its own responsive auto-fill sizing, untouched.
   #all-movies-grid = homepage "หนังทั้งหมด" catalog (4/row). #movies-grid = /movies search/genre
   results (still 5/row, not changed by the homepage-specific request this came from).
   #tagged-grid = /actress, /studio, /tag result pages (3/row, deliberately narrower/denser). */
#all-movies-grid { grid-template-columns: repeat(4, 1fr); }
#movies-grid { grid-template-columns: repeat(5, 1fr); }
#tagged-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { #all-movies-grid, #movies-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { #movies-grid, #tagged-grid { grid-template-columns: repeat(2, 1fr); }
  /* Homepage-only, per explicit request: 1/row on phones (was 2/row) — 2 columns was running
     wider than the viewport there. */
  #all-movies-grid { grid-template-columns: repeat(1, 1fr); } }
.card { display: block; transition: transform .2s ease; }
/* Scroll-reveal — see REVEAL_SCRIPT. `.pre-reveal` (invisible/offset) only ever gets applied by
   JS right before a card is observed, never as a base rule, so a card with no JS just keeps its
   normal fully-visible default — this pair of classes can never hide content permanently. */
.pre-reveal { opacity: 0; transform: translateY(22px) scale(.97); }
.pre-reveal.revealed { animation: card-reveal .55s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes card-reveal { to { opacity: 1; transform: translateY(0) scale(1); } }
.card:hover { transform: scale(1.06) translateY(-2px); z-index: 3; }
.card-link { display: block; text-decoration: none; color: inherit; }
.poster { position: relative; aspect-ratio: 800 / 538; border-radius: 8px; overflow: hidden;
          display: flex; align-items: center; justify-content: center;
          border: 1px solid rgba(var(--gold-rgb),.55);
          box-shadow: 0 4px 14px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.5) inset;
          transition: box-shadow .25s ease, border-color .25s ease; }
.card:hover .poster { border-color: var(--gold2);
                       box-shadow: 0 14px 30px rgba(0,0,0,.7), 0 0 14px rgba(var(--gold-rgb),.35); }
.poster::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 2;
                  background: linear-gradient(75deg, transparent, rgba(255,255,255,.32), transparent);
                  transform: skewX(-18deg); pointer-events: none; opacity: 0;
                  animation: ambient-shine 6.5s ease-in-out infinite;
                  animation-delay: var(--shine-delay, 0s); }
/* Runs on a loop (not just :hover) so the sparkle is visible on touchscreens too — hover has
   no equivalent on a phone, and that's how most people actually view this site. */
@keyframes ambient-shine { 0%, 85% { left: -60%; opacity: 0; } 91% { opacity: .9; } 100% { left: 130%; opacity: 0; } }
.card:hover .poster::after { animation: shine-sweep .85s ease forwards; }
@keyframes shine-sweep { 0% { left: -60%; opacity: 0; } 12% { opacity: 1; } 100% { left: 130%; opacity: 0; } }
.play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
                opacity: 0; background: rgba(0,0,0,.25); transition: opacity .18s; z-index: 3; }
.play-overlay span { width: 3rem; height: 3rem; border-radius: 50%; background: rgba(0,0,0,.55);
                      backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center;
                      font-size: 1.3rem; color: #fff; border: 1.5px solid rgba(var(--gold-rgb),.8); }
.card:hover .play-overlay { opacity: 1; }
.poster-font { font-family: Impact, "Arial Black", "Leelawadee UI", sans-serif; font-style: italic; }
/* Each caption row is themed by field type (star=pink, studio=teal, genre=purple, tag=gold) so
   the label badge + its linked values read as one distinct category at a glance, not four
   identical gold lines — the card background separates the whole block from the poster above. */
.card-caption { margin-top: 0.5rem; padding: 0.45rem 0.6rem; display: flex; flex-direction: column;
                 gap: 0.3rem; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
                 border-radius: 8px; }
.card-caption-line { font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                       display: flex; align-items: baseline; gap: 0.4rem; }
.card-caption-line .cc-label { flex: 0 0 auto; display: inline-block; padding: 0.06rem 0.44rem;
                                 border-radius: 4px; font-size: 0.64rem; font-weight: 800;
                                 letter-spacing: .03em; text-transform: uppercase; }
.card-caption-line .tag-link { overflow: hidden; text-overflow: ellipsis; }
.cc-star .cc-label { background: rgba(244,114,182,.18); color: #f9a8d4; }
.cc-star .tag-link { color: #f9a8d4; }
.cc-studio .cc-label { background: rgba(45,212,191,.18); color: #5eead4; }
.cc-studio .tag-link { color: #5eead4; }
.cc-genre .cc-label { background: rgba(167,139,250,.2); color: #c4b5fd; }
.cc-genre .tag-link { color: #c4b5fd; }
.cc-tag .cc-label { background: rgba(var(--gold-rgb),.18); color: rgba(var(--gold-rgb),.95); }
.cc-tag .tag-link { color: rgba(var(--gold-rgb),.85); }
.card-caption-line .tag-link:hover { text-decoration: underline; filter: brightness(1.3); }
.ribbon { position: absolute; top: 0.55rem; right: 0.55rem; z-index: 4; font-size: 0.68rem; font-weight: 800;
          letter-spacing: .03em; padding: 0.28rem 0.55rem; border-radius: 4px; text-transform: uppercase;
          box-shadow: 0 2px 8px rgba(0,0,0,.55); color: #fff; }
.ribbon.hot { background: linear-gradient(135deg, #ff8a3d, var(--accent)); }
.ribbon.new { background: linear-gradient(135deg, #2fd47a, #1f8f52); }
.ribbon.no-cover { right: auto; left: 0.55rem; background: linear-gradient(135deg, #6b7280, #374151); text-transform: none; }
.ribbon.coming-soon { background: linear-gradient(135deg, #60a5fa, #1e40af); text-transform: none; }
.coming-soon-poster { filter: grayscale(55%) brightness(.7); cursor: default; }
.coming-soon-poster .poster-info { opacity: .92; }
.countdown-chip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
                   display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
                   padding: 0.6rem 1rem; border-radius: 12px; text-align: center;
                   background: linear-gradient(135deg, rgba(20,14,34,.82), rgba(40,20,55,.82));
                   backdrop-filter: blur(6px); border: 1px solid rgba(var(--gold-rgb),.5);
                   box-shadow: 0 0 18px rgba(var(--accent-rgb),.35), 0 4px 14px rgba(0,0,0,.55);
                   animation: countdown-pulse 2.4s ease-in-out infinite; }
.countdown-chip .countdown-label { font-size: 0.62rem; letter-spacing: .06em; text-transform: uppercase;
                                     color: rgba(var(--gold-rgb),.9); font-weight: 700; }
.countdown-chip .countdown-value { font-size: 1.32rem; font-weight: 800; font-variant-numeric: tabular-nums;
                                     letter-spacing: .05em; font-family: Consolas, "SFMono-Regular", monospace;
                                     background: linear-gradient(135deg, #fff, rgba(var(--gold-rgb),1));
                                     -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes countdown-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(var(--accent-rgb),.35), 0 4px 14px rgba(0,0,0,.55); }
  50% { box-shadow: 0 0 30px rgba(var(--accent-rgb),.65), 0 4px 14px rgba(0,0,0,.55); }
}
.genre-chip { font-size: 0.65rem; font-weight: 600;
              padding: 0.22rem 0.55rem; border-radius: 999px; background: rgba(0,0,0,.55);
              backdrop-filter: blur(4px); color: #eee; border: 1px solid rgba(var(--gold-rgb),.3); max-width: 62%;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* One small, static status dot — no tilt, no glow, no text label. The single signal a movie
   card keeps by default; everything else (genre, quality, duration, size) lives on the watch
   page now instead of stacking on top of the poster. */
.flag-dot { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 4; width: 1.5rem; height: 1.5rem;
            border-radius: 50%; overflow: hidden; display: block; border: 1.5px solid rgba(255,255,255,.85);
            box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.flag-dot svg { display: block; width: 100%; height: 100%; }
.flag-dot.no { opacity: .8; }
.poster-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 23%; z-index: 1; pointer-events: none;
                background: linear-gradient(to top, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 55%, transparent 100%);
                backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.poster-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0.85rem 0.75rem 0.7rem; }
.poster-info-title { font-weight: 900; font-size: 1.2rem; letter-spacing: -.01em; color: #fff; line-height: 1.25;
                      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
                      text-shadow: 0 1px 3px rgba(0,0,0,.8);
                      padding: 0.32rem 0.55rem; border-left: 4px solid var(--gold); border-radius: 3px;
                      background: linear-gradient(100deg, rgba(10,6,4,.92), rgba(40,10,10,.88));
                      box-shadow: 0 2px 8px rgba(0,0,0,.4); width: fit-content; max-width: 100%; }
.poster-info-meta { margin-top: 0.35rem; font-size: 0.78rem; font-weight: 600; color: #ddd; display: flex; gap: 0.6rem;
                     flex-wrap: wrap; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.card-meta { display: flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; color: var(--muted); margin-top: 0.2rem; }
.card-meta .views { display: flex; align-items: center; gap: 0.25rem; }
.empty-state { padding: 4rem 2.2rem; text-align: center; color: var(--muted); font-size: 1.05rem; }
.watch-wrap { max-width: 1100px; margin: 2rem auto; padding: 0 1.5rem; }
.back-link { text-decoration: none; color: var(--muted); display: inline-block; margin-bottom: 1rem; }
.watch-wrap h1 { margin: 0 0 1rem; }
.watch-wrap video { width: 100%; max-height: 78vh; background: #000; border-radius: 6px; }
.movie-details { margin-top: 1.4rem; padding: 1.1rem 1.3rem; background: var(--card-bg); border-radius: 10px;
                  border: 1px solid rgba(255,255,255,.06); }
.movie-cast { margin: 0; color: var(--muted); font-size: 0.92rem; }
.movie-cast strong { color: #ddd; }
.tag-link { color: rgba(var(--gold-rgb),.95); text-decoration: none; }
.tag-link:hover { text-decoration: underline; color: var(--gold2); }
.poster-mgr { margin-top: 1.4rem; padding: 1.1rem 1.3rem; background: var(--card-bg); border-radius: 10px;
              border: 1px solid rgba(255,255,255,.06); }
.poster-mgr h3 { margin: 0 0 0.9rem; font-size: 1.05rem; color: #eee; }
.poster-mgr-top { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: flex-start; }
.poster-mgr-current { flex: 0 0 160px; width: 160px; aspect-ratio: 800/538; border-radius: 6px; background-size: cover;
                       background-position: center; border: 1px solid rgba(var(--gold-rgb),.4); cursor: crosshair; }
.poster-mgr-empty { display: flex; align-items: center; justify-content: center; text-align: center;
                     color: var(--muted); font-size: 0.78rem; background: #1c1c1c; padding: 0.5rem; }
.poster-mgr-actions { display: flex; flex-direction: column; gap: 0.55rem; flex: 1 1 220px; max-width: 280px; }
.poster-mgr-actions input[type=password] { background: #1c1c1c; border: 1px solid #333; color: #fff;
              padding: 0.5rem 0.8rem; border-radius: 999px; font-size: 0.95rem; letter-spacing: .3em; text-align: center; }
.poster-action-form button { width: 100%; }
.poster-upload-label { display: block; width: 100%; text-align: center; font-size: 0.95rem; padding: 0.4rem 0.6rem;
              background: #222; color: #fff; border: 1px solid #333; border-radius: 4px; cursor: pointer; box-sizing: border-box; }
.poster-upload-label:hover { border-color: var(--gold2); }
.poster-upload-input { display: none; }
.poster-reject-btn { width: 100%; background: #3a1414; border: 1px solid #5c1f1f; color: #ffb3b3; }
.poster-reject-btn:hover { background: #c81824; border-color: #c81824; color: #fff; }
.poster-gemini-btn { width: 100%; background: linear-gradient(135deg,#1a73e8,#4285f4); border: none; color: #fff; font-weight: 700; }
.poster-gemini-btn:hover { filter: brightness(1.1); }
.poster-flash { padding: 0.55rem 0.8rem; border-radius: 6px; font-size: 0.85rem; margin-bottom: 0.8rem; }
.poster-flash-ok { background: rgba(31,143,82,.18); border: 1px solid rgba(31,143,82,.5); color: #8fe3b0; }
.poster-flash-err { background: rgba(200,24,36,.15); border: 1px solid rgba(200,24,36,.5); color: #ffb3b3; }
.poster-mgr-hint { color: var(--muted); font-size: 0.85rem; margin: 1rem 0 0; }
button.danger { background: #3a1414; border-color: #6b2020; color: #ff9a9a; }
button.danger:hover { background: #5a1c1c; }
.poster-cand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; margin-top: 1.1rem; }
.poster-cand-wrap { position: relative; }
.poster-cand-form, .poster-cand-del-form { margin: 0; }
.poster-cand { width: 100%; aspect-ratio: 800/538; border-radius: 6px; background-size: cover; background-position: center;
               border: 2px solid rgba(255,255,255,.15); cursor: pointer; padding: 0; transition: border-color .15s ease, transform .15s ease; }
.poster-cand:hover { border-color: var(--gold2); transform: scale(1.04); }
.poster-cand.is-current { border-color: #2fd47a; box-shadow: 0 0 0 2px rgba(47,212,122,.4); }
.poster-cand-del-form { position: absolute; top: 3px; right: 3px; }
.poster-cand-del { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: rgba(0,0,0,.75); color: #fff;
                    border: 1px solid rgba(255,255,255,.4); font-size: 0.75rem; line-height: 1; padding: 0; cursor: pointer; }
.poster-cand-del:hover { background: #c81824; }
.center-wrap { max-width: 380px; margin: 6rem auto; padding: 0 1rem; text-align: center; }
.center-wrap input { width: 100%; padding: 0.7rem; margin: 0.6rem 0; background: #222; border: 1px solid #333;
                      color: #fff; border-radius: 4px; font-size: 1rem; }
.center-wrap button { width: 100%; padding: 0.7rem; background: var(--accent); color: #fff; border: none;
                       border-radius: 4px; font-size: 1rem; font-weight: 700; cursor: pointer; }
/* Member login/gate page — a full-screen "access control" stage rather than a plain centered
   card, per explicit request for more graphic flair: drifting glow blobs + a faint moving grid
   for atmosphere ("ดูเยอะกว่านี้"), a corner-bracket scanner frame with a beam that sweeps down
   the card on a loop ("scan เคลื่อนไหว"), and a spinning radar ring behind the lock icon. Reuses
   the navbar's own .brand-icon "J" badge so this reads as the same site, not a generic form. */
.member-wrap { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
               overflow: hidden; padding: 2rem 1.2rem; box-sizing: border-box;
               background: radial-gradient(circle at 50% 15%, #221426, var(--bg) 70%); }
.member-wrap::before, .member-wrap::after { content: ""; position: absolute; border-radius: 50%; z-index: 0;
                                             filter: blur(60px); pointer-events: none; }
.member-wrap::before { width: 520px; height: 520px; top: -200px; left: -160px;
                        background: radial-gradient(circle, rgba(var(--accent-rgb),.32), transparent 70%);
                        animation: drift1 16s ease-in-out infinite alternate; }
.member-wrap::after { width: 460px; height: 460px; bottom: -220px; right: -140px;
                       background: radial-gradient(circle, rgba(var(--gold-rgb),.26), transparent 70%);
                       animation: drift2 19s ease-in-out infinite alternate; }
.member-grid { position: absolute; inset: 0; z-index: 0; opacity: .12; pointer-events: none;
               background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
                                  linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
               background-size: 42px 42px;
               mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
               -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%); }
.member-card { position: relative; z-index: 1; max-width: 420px; width: 100%; border-radius: 22px;
                padding: 2.3rem 2.1rem 2.1rem; text-align: center; box-sizing: border-box;
                background: linear-gradient(160deg, rgba(30,20,45,.92), rgba(15,12,22,.95));
                border: 1px solid rgba(var(--gold-rgb),.4);
                box-shadow: 0 0 50px rgba(var(--accent-rgb),.22), 0 24px 60px rgba(0,0,0,.55);
                overflow: hidden; animation: card-rise .55s ease both; }
@keyframes card-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.member-card::before { content: ""; position: absolute; inset: -40% -20% auto -20%; height: 70%;
                        background: radial-gradient(circle, rgba(var(--accent-rgb),.25), transparent 70%);
                        pointer-events: none; }
.scan-corner { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(var(--gold-rgb),.85);
               z-index: 2; opacity: .85; pointer-events: none; }
.scan-corner.tl { top: 10px; left: 10px; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.scan-corner.tr { top: 10px; right: 10px; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.scan-corner.bl { bottom: 10px; left: 10px; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.scan-corner.br { bottom: 10px; right: 10px; border-left: none; border-top: none; border-radius: 0 0 6px 0; }
.scan-beam { position: absolute; left: 6%; right: 6%; height: 2px; z-index: 2; pointer-events: none;
             background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb),1), transparent);
             box-shadow: 0 0 14px 3px rgba(var(--gold-rgb),.75), 0 0 40px 10px rgba(var(--accent-rgb),.3);
             animation: scan-sweep 3.2s cubic-bezier(.4,0,.2,1) infinite; mix-blend-mode: screen; }
@keyframes scan-sweep { 0% { top: 4%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 96%; opacity: 0; } }
.member-brand { display: flex; align-items: center; justify-content: center; margin-bottom: 0.85rem; position: relative; z-index: 1; }
.member-kicker { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.68rem; font-weight: 800;
                  letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--gold-rgb),.95);
                  background: rgba(var(--gold-rgb),.12); border: 1px solid rgba(var(--gold-rgb),.35);
                  border-radius: 999px; padding: 0.25rem 0.75rem; margin-bottom: 1rem; position: relative; z-index: 1; }
.member-lock { position: relative; width: 4rem; height: 4rem; margin: 0 auto 0.7rem; display: flex;
               align-items: center; justify-content: center; z-index: 1; }
.member-lock::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
                        border: 2px dashed rgba(var(--gold-rgb),.55); animation: scan-spin 6s linear infinite; }
.member-lock::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; filter: blur(2px);
                       background: conic-gradient(from 0deg, transparent 0deg, rgba(var(--accent-rgb),.6) 40deg, transparent 90deg);
                       animation: scan-spin 2.3s linear infinite; }
@keyframes scan-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.member-lock span { position: relative; z-index: 2; font-size: 1.85rem; filter: drop-shadow(0 0 14px rgba(var(--gold-rgb),.6)); }
.member-card h1 { font-size: 1.4rem; margin: 0 0 0.35rem; position: relative; z-index: 1;
                   background: linear-gradient(135deg, #fff, rgba(var(--gold-rgb),1));
                   -webkit-background-clip: text; background-clip: text; color: transparent; }
.member-card p.member-sub { position: relative; z-index: 1; color: var(--muted); font-size: 0.88rem; margin: 0 0 1.4rem; }
.member-card form { position: relative; z-index: 1; }
.member-card .member-error, .member-card .member-ok { position: relative; z-index: 1; }
.member-card input { width: 100%; box-sizing: border-box; padding: 0.75rem 0.95rem; margin: 0 0 0.7rem;
                      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
                      color: #fff; border-radius: 10px; font-size: 0.95rem; transition: border-color .15s ease; }
.member-card input:focus { outline: none; border-color: rgba(var(--gold-rgb),.7); }
.member-card button, .member-card .member-btn { width: 100%; padding: 0.8rem; border: none; border-radius: 10px;
                       font-size: 0.98rem; font-weight: 800; cursor: pointer; color: #1c1608; margin-top: 0.2rem;
                       background: linear-gradient(135deg, #fff2c9, rgba(var(--gold-rgb),1));
                       box-shadow: 0 6px 18px rgba(var(--gold-rgb),.35); text-decoration: none; display: inline-block; }
.member-card button:hover, .member-card .member-btn:hover { filter: brightness(1.06); }
.member-card .member-links { margin-top: 1.1rem; font-size: 0.85rem; color: var(--muted); }
.member-card .member-links a { color: rgba(var(--gold-rgb),.95); text-decoration: none; font-weight: 700; }
.member-card .member-links a:hover { text-decoration: underline; }
.member-card .member-error { background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.4);
                              color: #ff9a9a; border-radius: 8px; padding: 0.55rem 0.8rem; font-size: 0.85rem;
                              margin: 0 0 1rem; }
.member-card .member-ok { background: rgba(47,212,122,.12); border: 1px solid rgba(47,212,122,.4);
                           color: #7ee787; border-radius: 8px; padding: 0.55rem 0.8rem; font-size: 0.85rem;
                           margin: 0 0 1rem; }
.member-hint-list { text-align: left; font-size: 0.78rem; color: var(--muted); margin: -0.3rem 0 1.1rem;
                     padding-left: 1.1rem; }
table.member-table code { background: rgba(255,255,255,.06); padding: 0.15rem 0.4rem; border-radius: 4px;
                            font-size: 0.82rem; }
.member-badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.72rem;
                 font-weight: 700; }
.member-badge.active { background: rgba(47,212,122,.18); color: #7ee787; }
.member-badge.revoked { background: rgba(239,68,68,.18); color: #ff9a9a; }
table { border-collapse: collapse; width: 100%; margin: 0 0 1.5rem; }
td, th { border-bottom: 1px solid #2a2a2a; padding: 0.55rem; text-align: left; }
.admin-wrap { max-width: 1000px; margin: 2rem auto; padding: 0 1.5rem; }
.admin-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
             padding: 0.7rem 1.5rem; background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(255,255,255,.08); }
.admin-nav-links { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.admin-nav-links a { text-decoration: none; color: #ccc; font-weight: 700; font-size: 0.92rem;
             padding: 0.4rem 0.85rem; border-radius: 999px; transition: background .15s ease, color .15s ease; }
.admin-nav-links a:hover { color: #fff; background: rgba(255,255,255,.08); }
.admin-nav-links a.active { color: #fff; background: linear-gradient(135deg, var(--accent2), var(--accent));
             box-shadow: 0 2px 8px rgba(var(--accent-rgb),.4); }
.admin-nav-right { display: flex; gap: 1rem; font-size: 0.85rem; }
.admin-nav-right a { color: var(--muted); text-decoration: none; }
.admin-nav-right a:hover { color: #fff; }
.admin-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.admin-summary-card { background: var(--card-bg); border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
             padding: 1.1rem 1.2rem; text-decoration: none; color: inherit; display: block; transition: border-color .15s ease, transform .15s ease; }
.admin-summary-card:hover { border-color: rgba(var(--accent-rgb),.5); transform: translateY(-2px); }
.admin-summary-card .num { font-size: 1.8rem; font-weight: 900; color: #fff; }
.admin-summary-card .label { font-size: 0.85rem; color: var(--muted); margin-top: 0.2rem; }
.admin-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.admin-panel { background: var(--card-bg); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 1.1rem 1.2rem; }
.admin-panel h3 { margin: 0 0 0.8rem; font-size: 1rem; }
.admin-panel .empty { color: var(--muted); font-size: 0.85rem; }
.storage-row { margin-bottom: 0.7rem; }
.storage-row .storage-label { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--muted); margin-bottom: 0.25rem; }
.storage-bar { height: 8px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; }
.storage-bar-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--accent2), var(--accent)); }
.activity-list, .todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.activity-list li { font-size: 0.85rem; display: flex; justify-content: space-between; gap: 0.6rem; border-bottom: 1px solid rgba(255,255,255,.05); padding-bottom: 0.45rem; }
.activity-list .a-time { color: var(--muted); white-space: nowrap; font-size: 0.78rem; }
.todo-list li { font-size: 0.88rem; display: flex; justify-content: space-between; gap: 0.6rem; }
.todo-list li a { color: inherit; text-decoration: none; }
.todo-list li a:hover { text-decoration: underline; }
.todo-list .todo-count { font-weight: 800; color: var(--accent); }
.trending-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.trending-list li { font-size: 0.85rem; display: flex; justify-content: space-between; gap: 0.5rem; }
.trending-list .t-count { color: var(--muted); white-space: nowrap; }
.incoming-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.incoming-list li { font-size: 0.88rem; border-radius: 8px; padding: 0.5rem 0.7rem; border: 1px solid rgba(255,255,255,.07); }
.incoming-list li.ok { border-color: rgba(90,220,140,.35); background: rgba(90,220,140,.06); }
.incoming-list li.wait { border-color: rgba(255,190,90,.3); background: rgba(255,190,90,.05); }
.admin-live-status { margin: 1rem 0; }
.status-rows { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.8rem; }
.status-row { display: flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.status-dot.on { background: #2fd47a; box-shadow: 0 0 6px rgba(47,212,122,.7); }
.status-dot.off { background: #ff6b6b; box-shadow: 0 0 6px rgba(255,107,107,.7); }
.status-name { font-weight: 700; min-width: 90px; }
.status-detail { color: var(--muted); }
.status-line { font-size: 0.85rem; margin: 0.35rem 0; }
.move-history-table td, .move-history-table th { font-size: 0.82rem; }
.status-pill-ok { color: #4ade80; } .status-pill-error { color: #f87171; }
.admin-problems { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.06); margin-bottom: 1.2rem; }
.admin-problems h3 { color: #f87171; }
.admin-problems-ok { border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.06); margin-bottom: 1.2rem; }
.admin-problems-ok h3 { color: #4ade80; }
.problem-item { padding: 0.7rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.problem-item:last-child { border-bottom: none; padding-bottom: 0; }
.problem-title { font-weight: 700; margin-bottom: 0.3rem; }
.problem-cause, .problem-fix { font-size: 0.85rem; margin-bottom: 0.2rem; }
.problem-fix { color: #86efac; }
.problem-detail { font-size: 0.78rem; color: var(--muted); margin-top: 0.3rem; word-break: break-word; }
.poster-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.8rem; margin-top: 0.6rem; }
.poster-admin-card { display: block; text-decoration: none; color: inherit; }
.poster-admin-thumb { width: 100%; aspect-ratio: 800/538; border-radius: 6px; background: #1c1c1c; background-size: cover;
              background-position: center; display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
              border: 1px solid rgba(255,255,255,.08); }
.poster-admin-card:hover .poster-admin-thumb { border-color: rgba(var(--accent-rgb),.5); }
.poster-admin-title { font-size: 0.78rem; margin-top: 0.3rem; line-height: 1.25; color: #ddd;
              overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.poster-admin-meta { font-size: 0.7rem; color: var(--muted); margin-top: 0.1rem; }
.avatar-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin-top: 0.8rem; }
.avatar-admin-card { display: flex; flex-direction: column; align-items: center; text-align: center;
                       background: var(--card-bg); border-radius: 10px; padding: 0.9rem 0.7rem; }
.avatar-circle-link { display: block; }
.avatar-circle { width: 84px; height: 84px; border-radius: 50%; background-size: cover; background-position: center;
                   border: 2px solid rgba(var(--gold-rgb),.6); box-shadow: 0 3px 10px rgba(0,0,0,.5); }
.avatar-fallback { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
                     font-size: 1.8rem; font-weight: 900; color: #fff;
                     background: linear-gradient(150deg, var(--accent2), var(--accent) 60%, #7a0e14);
                     border: 2px solid rgba(var(--gold-rgb),.4); }
.studio-logo-box { width: 84px; height: 84px; border-radius: 12px; background-size: contain; background-position: center;
                     background-repeat: no-repeat; background-color: #fff; border: 2px solid rgba(var(--gold-rgb),.6);
                     box-shadow: 0 3px 10px rgba(0,0,0,.5); }
.studio-logo-empty { background-color: transparent; border-style: dashed; display: flex; align-items: center; justify-content: center; }
.studio-logo-empty .avatar-fallback { border: none; box-shadow: none; }
.avatar-admin-name { font-weight: 700; margin-top: 0.6rem; font-size: 0.9rem; color: #eee; }
.avatar-admin-meta { font-size: 0.72rem; color: var(--muted); margin-top: 0.1rem; }
.studio-admin-bio { font-size: 0.74rem; color: var(--muted); margin-top: 0.5rem; line-height: 1.4; min-height: 2.6em; }
.avatar-upload-form { width: 100%; margin-top: 0.6rem; }
.avatar-admin-card form + form { margin-top: 0.4rem; }
/* /actress/{name} and /studio/{name} profile headers, above the movie grid */
.profile-header { display: flex; align-items: center; gap: 1.3rem; padding: 1.8rem 2.2rem 0.6rem; }
.profile-header h1 { margin: 0 0 0.4rem; }
.studio-bio-text { color: #ddd; line-height: 1.7; max-width: 640px; font-size: 0.95rem; margin: 0; }
.badge { font-size: 0.8rem; padding: 0.15rem 0.5rem; border-radius: 4px; background: #333; }
.badge.accent { background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #fff; font-weight: 700; }
.badge.sub-yes-badge { background: rgba(31,143,82,.85); color: #eafff2; font-weight: 700; }
.badge.sub-no-badge { background: #4a4a4a; color: #ddd; }
.online { background: #1e4620; } .offline { background: #4a1e1e; }
form.inline { display: inline-flex; gap: 0.4rem; }
button, select { font-size: 0.95rem; padding: 0.4rem 0.6rem; background: #222; color: #fff;
                 border: 1px solid #333; border-radius: 4px; cursor: pointer; }
.big-link { display: inline-block; font-size: 1.05rem; font-weight: 800; padding: 0.7rem 1.3rem;
            border-radius: 12px 4px 12px 4px; text-decoration: none; color: #fff;
            background: linear-gradient(135deg, var(--accent2), var(--accent));
            box-shadow: 0 4px 14px rgba(var(--accent-rgb),.4); }
.big-link:hover { filter: brightness(1.1); }
.movie-admin-toolbar { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.6rem; }
.movie-admin-toolbar input[type="search"] { font-size: 1rem; padding: 0.6rem 0.9rem; background: #1c1c1c;
            border: 1px solid #333; border-radius: 999px; color: #fff; flex: 1 1 260px; }
.movie-admin-toolbar button { font-size: 0.95rem; padding: 0.65rem 1.1rem; border-radius: 8px; }
.check-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.check-pill { display: inline-flex; align-items: center; gap: 0.4rem; background: #1c1c1c; border: 1px solid #333;
              border-radius: 999px; padding: 0.4rem 0.9rem; font-weight: 400; font-size: 0.9rem; cursor: pointer; }
.wizard-steps { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.8rem 0 1.6rem; }
.wstep { font-size: 0.82rem; font-weight: 700; padding: 0.35rem 0.8rem; border-radius: 999px; background: #222;
         color: var(--muted); border: 1px solid #333; }
.wstep.active { background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #fff; border-color: transparent; }
.wstep.done { color: #7ee787; border-color: #2a4a2a; }
.title-pick { background: #1c1c1c; border: 1px solid #2a2a2a; border-radius: 10px; padding: 0.8rem 1rem; margin-bottom: 0.7rem; }
.title-pick label { font-weight: 400; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.title-pick textarea { margin-top: 0.6rem; }
.mini-btn { font-size: 0.82rem; padding: 0.3rem 0.6rem; margin-top: 0.5rem; }
.settings-recap { background: #1c1c1c; border: 1px solid #2a2a2a; border-radius: 10px; padding: 0.9rem 1.2rem;
                   margin: 0.6rem 0 1.2rem; }
.settings-recap li { margin: 0.2rem 0; color: #ccc; }
.movie-card { display: flex; gap: 1.2rem; background: var(--card-bg); border: 1px solid #2a2a2a;
              border-radius: 14px; padding: 1.1rem; margin-bottom: 1rem; }
.movie-card .thumb { flex: 0 0 90px; width: 90px; height: 135px; border-radius: 8px; background-size: cover;
                      background-position: center; background-color: #111; border: 1px solid #333; }
.movie-card .body { flex: 1 1 auto; min-width: 0; }
.movie-card .title-row { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.movie-card .title-row h3 { margin: 0; font-size: 1.15rem; }
.movie-card .meta-line { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.7rem; }
.movie-card .status-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.movie-card .pill { font-size: 0.78rem; font-weight: 700; padding: 0.25rem 0.7rem; border-radius: 999px; }
.movie-card .pill.yes { background: #1e4620; color: #7ee787; }
.movie-card .pill.no { background: #333; color: #999; }
.movie-card .actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.movie-card .actions button, .movie-card .actions select { font-size: 0.95rem; padding: 0.6rem 1rem; border-radius: 10px; }
.movie-card .actions .danger { background: #3a1414; border-color: #6b2020; color: #ff9a9a; }
.movie-card .actions form { display: inline-flex; gap: 0.4rem; align-items: center; }
.movie-card .actions .sep { flex-basis: 100%; height: 0; }
.news-card { background: var(--card-bg); border-radius: 8px; overflow: hidden; text-decoration: none;
              color: inherit; display: block; transition: transform .18s ease; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.news-card:hover { transform: translateY(-4px); }
.news-card .news-body { padding: 0.75rem 1rem 1.1rem; }
.news-card .news-teaser { color: var(--muted); font-size: 0.85rem; line-height: 1.5;
                             display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.story-detail { max-width: 900px; margin: 2rem auto; padding: 0 1.5rem; display: flex; gap: 2.2rem; flex-wrap: wrap; }
.story-detail .cover { flex: 0 0 280px; aspect-ratio: 2 / 3; border-radius: 10px; background-size: cover;
                        background-position: center; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.story-detail .content { flex: 1 1 380px; min-width: 280px; }
.story-detail h1 { margin-top: 0; font-size: 1.9rem; }
.reading-meta { display: flex; gap: 0.6rem; align-items: center; margin: 0.4rem 0 1.4rem; flex-wrap: wrap; }
.watch-title-row { display: flex; align-items: center; gap: 0.7rem; justify-content: space-between; }
.watch-title-row h1 { margin: 0; }
.del-icon-btn { background: none; border: 1px solid rgba(255,107,107,.4); color: #ff6b6b; border-radius: 8px;
                width: 2.4rem; height: 2.4rem; font-size: 1.1rem; cursor: pointer; flex-shrink: 0; }
.del-icon-btn:hover { background: rgba(255,107,107,.12); }
.del-step-form { display: none; gap: 0.5rem; margin-top: 0.6rem; align-items: center; }
.del-step-form.show { display: flex; }
.del-step-form input[type="password"] { padding: 0.5rem 0.7rem; border-radius: 6px; border: 1px solid rgba(255,255,255,.15);
                                          background: var(--card-bg); color: var(--text); }
.reading-divider { border: none; border-top: 1px solid #33291c; width: 70px; margin: 0 0 1.6rem; position: relative; }
.reading-divider::after { content: "❦"; position: absolute; left: 0; top: -0.8em; color: #8a7a5c; font-size: 1rem;
                           background: var(--bg); padding-right: 0.6rem; }
.reading-card { background: #1b1712; border: 1px solid #2a2419; border-radius: 12px; padding: 2.2rem 2.4rem;
                box-shadow: 0 10px 30px rgba(0,0,0,.4); max-width: 680px; }
.article { font-family: "Angsana New", "Leelawadee UI", "Noto Serif Thai", Georgia, serif;
           font-size: 1.25rem; line-height: 2; color: #e8dfcf; }
.article p { margin: 0 0 1.3em; }
.article p:first-of-type::first-letter { font-size: 3.2em; font-weight: 700; float: left; line-height: 0.75;
           padding: 0.06em 0.14em 0 0; color: var(--accent); font-family: Georgia, serif; }
.row-title { padding: 1.6rem 2.2rem 0.6rem; font-size: 1.25rem; font-weight: 700; display: flex;
             align-items: baseline; gap: 0.6rem; position: relative; }
.row-title .count { font-size: 0.85rem; color: var(--muted); font-weight: 400; }
.row-title .see-all-link { margin-left: auto; font-size: 0.82rem; font-weight: 700; color: var(--gold2);
                             text-decoration: none; }
.row-title .see-all-link:hover { color: #fff; }
.row-title.new-row::after { content: ""; position: absolute; left: 2.2rem; right: 2.2rem; bottom: -1px;
                             height: 2px; border-radius: 2px;
                             background: linear-gradient(90deg, transparent, var(--gold2), var(--accent2), var(--gold2), transparent);
                             background-size: 200% 100%; animation: line-draw 3.2s linear infinite; }
@keyframes line-draw { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.row { display: flex; gap: 1.2rem; overflow-x: auto; padding: 0 2.2rem 2rem; scroll-snap-type: x proximity; }
.row::-webkit-scrollbar { height: 8px; }
.row::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
.row .card, .row .news-card { flex: 0 0 22%; min-width: 160px; scroll-snap-align: start; }
.overlap-row { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 0; row-gap: 2.8rem;
               padding: 1.2rem 2.2rem 2.4rem; align-items: start; }
.overlap-item { transition: transform .25s ease; }
.overlap-item:not(:nth-child(4n+1)) { margin-left: -22px; }
.overlap-item .card:hover { transform: none; }
.overlap-item:hover { transform: rotate(0deg) translateY(-14px) scale(1.06) !important; z-index: 20 !important; }
.overlap-row-3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .overlap-row { grid-template-columns: repeat(2, 1fr); }
  .overlap-item:not(:nth-child(4n+1)) { margin-left: 0; }
  .overlap-item:not(:nth-child(2n+1)) { margin-left: -22px; }
  /* Tilted-fan look is desktop-only — the rotation is set inline per card (computed in
     Python), so it takes !important here to win over that. Flat on touch devices reads
     cleaner and avoids the tilted edges clipping into neighboring cards on a narrow screen. */
  .overlap-item { transform: none !important; }
}
.genre-pills { padding: 0 2.2rem 0.9rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.genre-pills a { text-decoration: none; color: #ccc; background: #1c1c1c; border: 1px solid #333;
                  border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.85rem; font-weight: 600;
                  display: inline-flex; align-items: center; gap: 0.35rem; transition: all .15s ease; }
.genre-pills a:hover { border-color: #555; color: #fff; }
.genre-pills a.active { background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #fff;
                          border-color: transparent; box-shadow: 0 3px 10px rgba(var(--accent-rgb),.35); }
.genre-pills a .pill-count { font-size: 0.72rem; color: #999; }
.genre-pills a.active .pill-count { color: rgba(255,255,255,.85); }

/* ===== Mobile pass — this site is used almost entirely from a phone in practice, so this
   isn't a defensive afterthought, it's the primary target. Three big structural moves: the
   200px-fixed left sidebar (roughly half a phone's width) is dropped entirely rather than
   squeezed, the tab bar becomes a horizontal swipe strip instead of wrapping into a jumbled
   multi-row mess, and every big horizontal padding (2.2rem/3rem, meant for a wide desktop
   canvas) gets cut down so content actually gets the screen width to work with. ===== */
@media (max-width: 860px) {
  .navbar { padding: 0.6rem 1rem; gap: 0.5rem; }
  .brand-slogan { display: none; }
  .brand-icon { width: 1.9rem; height: 1.9rem; flex-basis: 1.9rem; }
  .brand-text-jap, .brand-text-cute { font-size: 1.35rem; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; margin-right: 0.6rem;
          -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs::after { display: none; }
  .tabs a { flex: 0 0 auto; font-size: 0.95rem; padding: 0.42rem 0.75rem; white-space: nowrap; }
  .tab-icon { margin-right: 0.25rem; }
  .tab-icon svg, .tab-icon { font-size: 0.9rem; }
  .nav-search { order: 3; flex: 1 1 100%; }
  .nav-search input { width: 100%; box-sizing: border-box; }
  .nav-search input:focus { width: 100%; }
  .nav-right { font-size: 0.85rem; }

  /* The sidebar (ยอดนิยม / หมวดหมู่) is secondary content already reachable via the top tabs
     and the "หนังทั้งหมด" catalog — dropped rather than squeezed into an unusable sliver. */
  .sidebar { display: none; }
  .layout { display: block; }

  .hero-top { padding: 1.6rem 1rem 1.8rem; gap: 1.2rem; }
  /* .hero-tagline's base rule is "flex: 0 0 340px" (fixed, non-shrinking) — wider than most
     phone screens by itself once hero-top's padding is subtracted, which forced the whole
     hero section (and the page) wider than the viewport. Overriding to full-width/auto-basis
     here lets it stack above the carousel instead of dragging the page into horizontal scroll. */
  .hero-tagline { flex: 1 1 100%; width: 100%; }
  .hero-tagline h2 { font-size: 1.5rem; }
  .showcase-item { width: 180px; flex: 0 0 180px; }

  .row-title, .section-title { padding-left: 1rem; padding-right: 1rem; font-size: 1.08rem; }
  .grid, .overlap-row { padding-left: 1rem; padding-right: 1rem; gap: 0.9rem; }
  .genre-pills { padding-left: 1rem; padding-right: 1rem; }
  .site-stats-strip { padding-left: 1rem; padding-right: 1rem; font-size: 0.68rem; text-align: left;
                       white-space: normal; }
  #all-movies-grid { grid-template-columns: repeat(1, 1fr); gap: 0.9rem; }
  #movies-grid { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
  .poster-info-title { font-size: 1.02rem; }

  .watch-wrap { padding: 0 0.9rem; margin: 1.2rem auto; }
  .watch-wrap video { max-height: 46vh; }
  .poster-mgr, .movie-details { padding: 0.9rem 1rem; }
  .poster-mgr-top { gap: 0.9rem; }
  .poster-mgr-current { flex-basis: 130px; width: 130px; }
  .poster-mgr-actions { max-width: 100%; }
  .poster-cand-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

  /* Bigger tap targets sitewide on touch — the desktop sizing (0.4rem/0.6rem) is under the
     ~44px minimum comfortable touch target on most phones. */
  button, select, .poster-upload-label { padding: 0.65rem 0.9rem; font-size: 1rem; }

  .admin-wrap { padding: 0 1rem; max-width: 100%; box-sizing: border-box; }
  .admin-nav { padding: 0.6rem 1rem; }
  .admin-nav-links { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .admin-nav-links a { flex: 0 0 auto; white-space: nowrap; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Lazy-loaded images: thumb_bg() only *defines* --bg (no download); LAZYBG_SCRIPT adds
   .in-view when the element nears the viewport, and only then does the image load. */
[style*="--bg:"].in-view { background-image: var(--bg); }