@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&family=Prompt:wght@300;400;500;600&display=swap');
:root{--bg:#090807;--panel:#14110e;--panel2:#1b1611;--gold:#c88a3d;--gold2:#e3b06a;--text:#eee7dc;--muted:#aaa092;--line:#33271c;--menu-bg:#93856b;--menu-text:#fffaf0;--menu-hover:#6f624e;--menu-active:#5f5443}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Prompt,system-ui,sans-serif}a{color:inherit;text-decoration:none}.container{width:min(1180px,92%);margin:auto}
.site-header{position:sticky;top:0;z-index:20;background:var(--menu-bg);border-bottom:1px solid rgba(70,55,38,.28);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.nav-wrap{min-height:58px;display:flex;align-items:center;gap:28px}.brand{font-family:Georgia,'Times New Roman',serif;font-size:21px;letter-spacing:.5px;line-height:.82;color:#fffaf0;min-width:210px}.brand span{display:block;color:#fffaf0;font-weight:700}.brand strong{display:block;color:#fffaf0;font-size:25px;font-weight:700;letter-spacing:.8px}.brand img{max-height:46px;max-width:205px;filter:brightness(0) invert(1)}.nav-wrap nav{display:flex;gap:26px;flex:1;justify-content:center;align-items:center;flex-wrap:wrap}.nav-wrap nav a{font-family:Georgia,'Times New Roman',serif;font-size:15px;color:var(--menu-text);white-space:nowrap;padding:20px 0 19px;position:relative;transition:background .2s,color .2s}.nav-wrap nav a:hover{color:#fff;background:rgba(70,55,38,.14)}.nav-wrap nav a:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:3px}.nav-wrap nav a.active{background:var(--menu-active);color:#fff}.admin-link{font-size:12px;color:#fffaf0;border:1px solid rgba(255,255,255,.55);padding:7px 11px;border-radius:4px;background:rgba(70,55,38,.16)}
.hero{min-height:510px;display:flex;align-items:center;position:relative;background:linear-gradient(90deg,rgba(0,0,0,.95),rgba(0,0,0,.35)),url('../images/big-image.jpg') center/cover}.hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at 65% 45%,rgba(153,93,26,.2),transparent 45%)}.hero-content{position:relative;padding:80px 0}.eyebrow,.section-kicker,.tag{color:var(--gold2);font-size:12px;letter-spacing:2px}.hero h1{font-family:Kanit;font-size:clamp(36px,6vw,72px);font-weight:500;max-width:750px;line-height:1.05;margin:15px 0}.hero p{color:#c8beb2;max-width:650px}.btn{display:inline-block;background:var(--gold);color:#140d07;border:0;border-radius:5px;padding:11px 20px;font-weight:600;cursor:pointer}.btn-dark{background:#2a211a;color:#eee}.intro{padding:65px 0;background:linear-gradient(180deg,#100d0a,#090807)}.intro h2,.section h2,.page-hero h1,.watch h1{font-family:Kanit;font-weight:500;margin:7px 0 10px}.intro h2,.section h2{font-size:34px}.intro p{color:var(--muted);max-width:720px}.section{padding:60px 0}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.category-card{min-height:190px;padding:24px;background:linear-gradient(145deg,#1b1510,#0e0c0a);border:1px solid var(--line);transition:.25s;position:relative;overflow:hidden}.category-card:hover{transform:translateY(-4px);border-color:#79502b}.category-number{position:absolute;right:18px;top:12px;color:#4e3b28;font-size:38px;font-family:Kanit}.category-card h3{font-family:Kanit;font-size:23px;margin:45px 0 8px}.category-card p{color:var(--muted);font-size:13px;min-height:40px}.category-card span:last-child{color:var(--gold2);font-size:12px}.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.video-card{background:#110e0c;border:1px solid var(--line);overflow:hidden;transition:.25s}.video-card:hover{transform:translateY(-4px);border-color:#73502f}.thumb{aspect-ratio:16/9;background:#050505;position:relative;overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:rgba(200,138,61,.9);color:#120d08;padding-left:3px}.video-body{padding:18px}.video-body h3{font-family:Kanit;font-weight:400;font-size:20px;margin:7px 0}.video-body p{color:var(--muted);font-size:13px;line-height:1.6}.tag{letter-spacing:1px}.page-hero{padding:70px 0 45px;background:linear-gradient(180deg,#1a120b,#0b0907)}.page-hero h1{font-size:48px}.page-hero p{color:var(--muted)}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;color:var(--muted)}select,input,textarea{width:100%;background:#0c0a08;border:1px solid #453323;color:#eee;padding:11px;border-radius:5px;font:inherit}select{width:auto}.pagination{display:flex;gap:7px;justify-content:center;margin-top:35px;flex-wrap:wrap}.pagination a{border:1px solid #403023;padding:8px 13px;border-radius:4px}.pagination a.active,.pagination a:hover{background:var(--gold);color:#150e08}.watch{padding:70px 0}.watch h1{font-size:42px}.player{margin-top:25px;aspect-ratio:16/9;background:#000}.player iframe{width:100%;height:100%;border:0}.watch-description{color:#bbb0a3;line-height:1.8;padding:25px 0 60px}footer{border-top:1px solid var(--line);padding:35px 0;color:#8f867b}.footer-inner{display:flex;justify-content:space-between;gap:20px}.footer-inner strong{color:var(--gold2)}
.admin-body{background:#0d0b09}.admin-wrap,.form-wrap{width:min(1100px,92%);margin:50px auto}.admin-top{display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:20px}.admin-actions{display:flex;gap:10px;margin:25px 0}.admin-wrap h2{font-family:Kanit;font-weight:400;margin-top:40px}table{width:100%;border-collapse:collapse;background:#13100d}th,td{text-align:left;padding:12px;border-bottom:1px solid #30251c;font-size:14px}th{color:var(--gold2)}.form-wrap{max-width:720px}.form-wrap label,.login-box label{display:block;margin:15px 0;color:#cfc5b9}.form-wrap textarea{min-height:150px}.check{display:flex!important;align-items:center;gap:8px}.check input{width:auto}.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#2a1b0e,#090807 60%)}.login-box{width:min(430px,90%);background:#15110e;border:1px solid #4b3623;padding:35px}.login-box h1{font-family:Kanit;font-weight:400}.error{background:#4b211b;color:#ffd2c7;padding:10px;margin:15px 0;border-radius:4px}
@media(max-width:900px){.category-grid{grid-template-columns:repeat(2,1fr)}.video-grid{grid-template-columns:repeat(2,1fr)}.nav-wrap{min-height:56px}.brand{min-width:160px}.nav-wrap nav{display:none}}@media(max-width:600px){.category-grid,.video-grid{grid-template-columns:1fr}.hero{min-height:460px}.hero h1{font-size:42px}.footer-inner{display:block}.footer-inner div+div{margin-top:12px}}

.brand img{max-height:48px;max-width:190px;display:block;object-fit:contain}.columns-1{grid-template-columns:1fr}.columns-2{grid-template-columns:repeat(2,1fr)}.columns-3{grid-template-columns:repeat(3,1fr)}.columns-4{grid-template-columns:repeat(4,1fr)}.columns-5{grid-template-columns:repeat(5,1fr)}.columns-6{grid-template-columns:repeat(6,1fr)}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.settings-card{background:#15110e;border:1px solid #33271c;padding:22px}.settings-card h2{font-family:Kanit;font-weight:400;margin:0 0 18px}.settings-card textarea{min-height:110px}.settings-preview{width:100%;max-height:180px;object-fit:contain;background:#090807;border:1px solid #33271c;margin:5px 0 15px}.logo-preview{max-width:260px}.color-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.color-row input[type=color]{height:48px;padding:4px}.hint{color:#8e8478;font-size:13px}.settings-submit{grid-column:1/-1}.success{background:#16351f;border:1px solid #2e7244;color:#bceac8;padding:12px;margin:15px 0;border-radius:5px}.social-footer{display:flex;gap:14px;flex-wrap:wrap}.social-footer a:hover{color:var(--gold2)}
@media(max-width:1000px){.columns-4,.columns-5,.columns-6{grid-template-columns:repeat(2,1fr)}.settings-grid{grid-template-columns:1fr}}
@media(max-width:600px){.columns-2,.columns-3,.columns-4,.columns-5,.columns-6{grid-template-columns:1fr}}
.hint-box{background:#15110e;border:1px solid #3c2d20;color:#b9afa2;padding:14px 16px;margin:15px 0 22px;border-radius:5px}.status-on{color:#8fe0a4}.status-off{color:#c58d83}.table-url{display:inline-block;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}.form-wrap .admin-top h1{margin:0}.form-wrap .admin-top{margin-bottom:24px}
@media(max-width:700px){table{display:block;overflow-x:auto;white-space:nowrap}.admin-top{align-items:flex-start;flex-direction:column}.admin-actions{flex-wrap:wrap}}

.mobile-menu{display:none;background:none;border:0;color:#ddd;font-size:24px}.top-search{display:flex;gap:5px;margin-left:auto}.top-search input{width:170px;padding:8px}.top-search button{background:var(--gold);border:0;border-radius:4px;padding:8px 12px}.slider{height:540px;position:relative;overflow:hidden}.slide{position:absolute;inset:0;background-position:center;background-size:cover;opacity:0;transition:opacity .7s;display:flex;align-items:center}.slide.active{opacity:1}.slide-content h1{font-family:Kanit;font-size:clamp(38px,6vw,70px);margin:10px 0;max-width:780px}.slide-content p{color:#d2c6b8;max-width:650px}.slider-dots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:6px}.slider-dots button{border:1px solid #80603c;background:#111b;color:#eee;border-radius:50%;width:30px;height:30px}.section-sub{color:var(--muted);margin:0}.custom-content{background:#15110d;border:1px solid var(--line);padding:25px;line-height:1.8}.empty{padding:50px;text-align:center;border:1px dashed #493726;color:#aaa}.stats-row{display:flex;gap:15px}.stat-card{flex:1;background:#17120e;border:1px solid var(--line);padding:20px;min-width:150px}.stat-card span{display:block;color:#a89b8d;font-size:13px}.stat-card strong{font:500 32px Kanit;color:var(--gold2)}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.admin-nav a{border:1px solid #4a3827;padding:8px 12px;border-radius:4px}.sortable{list-style:none;padding:0;display:grid;gap:10px;max-width:800px}.sortable li{display:flex;align-items:center;gap:15px;background:#17120e;border:1px solid #3c2b1e;padding:14px;cursor:grab}.sortable li small{display:block;color:#998d80;margin-top:3px}.drag{color:var(--gold2);font-size:22px}.row-actions{margin-left:auto}.slider-admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.slider-admin-card{background:#17120e;border:1px solid var(--line);overflow:hidden}.slider-admin-card img{width:100%;aspect-ratio:16/6;object-fit:cover}.slider-admin-card>div{padding:15px}.slider-admin-card h3{margin:0 0 5px;font-family:Kanit}.slider-admin-card p{color:#999}
@media(max-width:900px){.mobile-menu{display:block}.nav-wrap{flex-wrap:wrap}.nav-wrap nav{display:none;width:100%;order:4;justify-content:flex-start;padding:4px 0 8px;background:var(--menu-bg)}.nav-wrap nav.open{display:flex}.nav-wrap nav a{padding:10px 12px}.top-search{order:3;margin-left:auto}.dashboard-grid,.slider-admin-grid{grid-template-columns:1fr}.stats-row{display:grid;grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.top-search input{width:120px}.slider{height:470px}.home-columns{grid-template-columns:1fr!important}.stats-row{grid-template-columns:1fr}.stat-card{min-width:0}}

/* ===== Projecttan77 Homepage Builder ===== */
.homepage-slider{height:560px;position:relative;overflow:hidden;background:#050403}
.home-slide{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;visibility:hidden;transition:opacity .65s ease,visibility .65s;display:flex;align-items:center}
.home-slide.active{opacity:1;visibility:visible;z-index:1}
.home-slide-inner{width:100%}
.home-slide .slide-content{max-width:760px;padding:70px 0}
.home-slide h1{font-family:Kanit;font-weight:500;font-size:clamp(40px,6vw,72px);line-height:1.05;margin:15px 0 12px}
.home-slide p{color:#d3c9bc;max-width:650px;font-size:16px;line-height:1.8;margin-bottom:25px}
.slider-arrow{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:44px;height:70px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.25);color:#fff;font-size:40px;line-height:1;border-radius:4px;cursor:pointer}
.slider-arrow:hover{background:rgba(200,138,61,.8);color:#120d08}
.slider-arrow.prev{left:22px}.slider-arrow.next{right:22px}
.slider-dots{z-index:6;bottom:24px}
.homepage-slider .slider-dots button{background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.45);cursor:pointer}
.homepage-slider .slider-dots button.active{background:var(--gold);border-color:var(--gold)}
.home-builder-section{scroll-margin-top:75px}
.section-head .section-sub{margin-top:3px}
.custom-content a{color:var(--gold2);text-decoration:underline}
.custom-content img{max-width:100%;height:auto}
.slider-admin-media{position:relative}
.slider-badge{position:absolute;left:12px;top:12px;padding:5px 9px;border-radius:4px;background:rgba(0,0,0,.72);color:#bceac8;font-size:12px}
.slider-form-preview{max-height:280px;object-fit:cover;aspect-ratio:16/6}
.slider-meta{color:#918579;font-size:13px;margin:8px 0 12px}
.builder-two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
code{background:#211910;padding:2px 5px;border-radius:3px;color:#e2b16d}
@media(max-width:900px){.homepage-slider{height:500px}.slider-arrow{width:38px;height:55px;font-size:32px}.home-slide h1{font-size:48px}.home-slide .slide-content{padding:55px 0}}
@media(max-width:600px){.homepage-slider{height:480px}.home-slide{background-position:center}.home-slide .slide-content{padding:40px 20px}.home-slide h1{font-size:38px}.home-slide p{font-size:14px}.slider-arrow{display:none}.builder-two{grid-template-columns:1fr}}

/* ===== Projecttan77 public navigation: desktop + mobile, shared across every page ===== */
.site-header--public{position:sticky;top:0;z-index:3000;background:rgba(12,10,8,.96);backdrop-filter:blur(12px);border-bottom:1px solid rgba(147,133,107,.28);box-shadow:0 4px 22px rgba(0,0,0,.18)}
.site-header--public .nav-wrap{min-height:70px;display:flex;align-items:center;gap:18px}
.site-header--public .brand{flex:0 0 auto;min-width:180px;z-index:1003}
.site-header--public .public-nav-shell{flex:1;min-width:0}
.site-header--public .public-nav{display:flex;align-items:center;justify-content:center;gap:4px}
.site-header--public .public-nav a{display:flex;align-items:center;min-height:42px;padding:9px 13px;border-radius:5px;color:#eee8df;white-space:nowrap;font-size:15px;transition:background .2s,color .2s}
.site-header--public .public-nav a:hover,.site-header--public .public-nav a:focus-visible{background:#93856b;color:#fff;outline:none}
.site-header--public .admin-link{flex:0 0 auto;white-space:nowrap}
.site-header--public .mobile-menu{display:none;position:relative;width:42px;height:42px;padding:8px;border:1px solid rgba(147,133,107,.5);border-radius:6px;background:#17120e;z-index:1004}
.site-header--public .mobile-menu span{display:block;height:2px;margin:5px 0;background:#eee;width:24px;border-radius:2px;transition:transform .2s,opacity .2s}
.mobile-nav-backdrop{display:none}
@media(max-width:1100px){.site-header--public .brand{min-width:160px}.site-header--public .public-nav a{padding:8px 9px;font-size:14px}.site-header--public .admin-link{font-size:13px}}
@media(max-width:850px){
  body.menu-open{overflow:hidden}
  .site-header--public .nav-wrap{min-height:62px;gap:10px}
  .site-header--public .mobile-menu{display:block;flex:0 0 42px}
  .site-header--public .brand{min-width:0;flex:1}
  .site-header--public .brand img{max-height:42px;max-width:155px}
  .site-header--public .public-nav-shell{position:fixed;top:0;left:0;width:min(330px,86vw);height:100dvh;background:#15110e;border-right:1px solid #493625;box-shadow:12px 0 40px rgba(0,0,0,.45);transform:translateX(-105%);transition:transform .25s ease;z-index:1002;padding:78px 14px 24px;overflow-y:auto}
  .site-header--public .public-nav-shell.open{transform:translateX(0)}
  .site-header--public .public-nav{display:flex;flex-direction:column;align-items:stretch;gap:4px}
  .site-header--public .public-nav a{min-height:48px;padding:12px 15px;border-bottom:1px solid rgba(147,133,107,.13);font-size:16px}
  .site-header--public .public-nav a:hover,.site-header--public .public-nav a:focus-visible{background:#93856b;color:#fff}
  .site-header--public .admin-link{padding:8px 10px;font-size:12px}
  .mobile-nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:1001}
  .site-header--public .public-nav-shell.open + .mobile-nav-backdrop{display:block}
}
@media(max-width:480px){.site-header--public .admin-link{display:none}.site-header--public .brand img{max-width:145px}.site-header--public .brand span{font-size:18px}.site-header--public .brand strong{font-size:21px}}

/* ===== FINAL MOBILE MENU FIX ===== */
@media (max-width: 1024px){
  .site-header--public .nav-wrap{min-height:64px;gap:10px;padding-top:6px;padding-bottom:6px;position:relative}
  .site-header--public .mobile-menu{display:flex !important;flex:0 0 42px !important;width:42px;height:42px;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;visibility:visible !important;opacity:1 !important}
  .site-header--public .mobile-menu span{display:block !important;width:24px;height:2px;margin:3px 0;background:#fffaf0 !important;visibility:visible !important;opacity:1 !important}
  .site-header--public .brand{min-width:0 !important;flex:1 1 auto !important;display:flex;align-items:center}
  .site-header--public .brand img{max-width:155px;max-height:44px}
  .site-header--public .public-nav-shell{position:fixed !important;top:0;left:0;width:min(340px,88vw);height:100dvh;display:block !important;background:#15110e;border-right:1px solid #493625;box-shadow:12px 0 40px rgba(0,0,0,.5);transform:translateX(-110%);transition:transform .25s ease;z-index:3002;padding:82px 14px 24px;overflow-y:auto}
  .site-header--public .public-nav-shell.open{transform:translateX(0) !important}
  .site-header--public .public-nav{display:flex !important;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:3px;width:100%}
  .site-header--public .public-nav a{display:flex;align-items:center;width:100%;min-height:50px;padding:12px 15px;border-bottom:1px solid rgba(147,133,107,.16);font-size:16px;color:#eee8df}
  .site-header--public .admin-link{display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .mobile-nav-backdrop{position:fixed !important;inset:0;background:rgba(0,0,0,.62);z-index:2999;display:none}
  .mobile-nav-backdrop.is-open{display:block !important}
  .site-header--public .mobile-menu[aria-expanded="true"]{background:#93856b}
}
@media (max-width:480px){
  .site-header--public .nav-wrap{width:100%;padding-left:10px;padding-right:10px}
  .site-header--public .brand{justify-content:center;text-align:center}
  .site-header--public .brand img{max-width:145px}
  .site-header--public .brand span{font-size:18px}
  .site-header--public .brand strong{font-size:21px}
  .site-header--public .admin-link{display:flex !important;font-size:11px;padding:7px 8px}
}

/* Mobile menu click-layer fix: drawer must be above its backdrop. */
@media(max-width:900px){
  .site-header--public{z-index:3000 !important;}
  .site-header--public .public-nav-shell{z-index:3002 !important;pointer-events:none;}
  .site-header--public .public-nav-shell.open{pointer-events:auto;}
  .site-header--public .public-nav{position:relative;z-index:3003;}
  .site-header--public .public-nav a{position:relative;z-index:3004;pointer-events:auto;cursor:pointer;}
  .mobile-nav-backdrop{z-index:2999 !important;pointer-events:auto;}
  .site-header--public .mobile-menu{z-index:3005 !important;pointer-events:auto;}
  .site-header--public .admin-link{z-index:3005 !important;position:relative;}
}

/* ===== Category album cover / homepage ===== */
.homepage-categories .section-sub{color:var(--muted);margin:4px 0 0}
.category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.category-card{padding:0;min-height:0;display:flex;flex-direction:column;background:#110e0c;border:1px solid var(--line);overflow:hidden}
.category-card:hover{transform:translateY(-4px);border-color:#8a5e31}
.category-cover{width:100%;aspect-ratio:16/9;background:#17120e;overflow:hidden}
.category-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.category-card:hover .category-cover img{transform:scale(1.04)}
.category-cover--empty{display:grid;place-items:center;background:linear-gradient(135deg,#211910,#0d0b09)}
.category-cover--empty span{font-family:Georgia,serif;font-size:58px;color:#8d6a42;opacity:.7}
.category-card-content{position:relative;padding:20px 21px 22px;min-height:175px}
.category-card-content .category-number{top:12px;right:17px}
.category-card-content h3{margin:8px 0 8px;font-size:24px}
.category-card-content p{min-height:40px;margin:0 0 14px}
.category-card-content .category-count{display:inline-block;color:var(--gold2);font-size:13px}

.category-page-hero{background-position:center;background-size:cover}
.category-hero-inner{min-height:280px;display:flex;align-items:center;gap:28px}
.category-hero-thumb{width:150px;height:150px;object-fit:cover;border:1px solid rgba(227,176,106,.45);box-shadow:0 12px 35px rgba(0,0,0,.35)}
.category-hero-inner h1{margin-top:8px}

.watch-navigation{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.back-button{display:inline-flex;align-items:center;gap:7px;background:var(--gold);color:#150e08;padding:10px 16px;border-radius:5px;font-weight:600;font-size:14px;transition:transform .2s,background .2s}
.back-button:hover{transform:translateY(-1px);background:var(--gold2)}
.back-button--secondary{background:#282019;color:var(--text);border:1px solid #493625}
.back-button--secondary:hover{background:#3a2d22;color:#fff}

.category-image-field{margin:18px 0 22px}
.category-image-field>label:first-child{display:block;color:#cfc5b9;margin-bottom:6px}
.upload-help{color:#8f867b;font-size:13px;margin-bottom:10px}
.category-image-preview{width:100%;aspect-ratio:16/9;max-height:360px;background:#0c0a08;border:1px dashed #4b3827;border-radius:6px;overflow:hidden;display:grid;place-items:center;margin-bottom:12px}
.category-image-preview img{width:100%;height:100%;object-fit:cover;display:block}
.category-image-empty{color:#756b61;font-size:14px}
.image-remove-check{margin-top:10px!important}
.admin-category-thumb{width:90px;height:58px;object-fit:cover;border:1px solid #453323;border-radius:4px;background:#17120e;display:block}
.admin-category-thumb--empty{display:grid;place-items:center;color:#665b50;font-size:12px}

@media(max-width:900px){
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .category-hero-inner{min-height:240px}
}
@media(max-width:600px){
  .category-grid{grid-template-columns:1fr}
  .category-card-content{min-height:145px}
  .category-hero-inner{min-height:220px;gap:16px}
  .category-hero-thumb{width:100px;height:100px}
  .category-hero-inner h1{font-size:34px}
  .watch{padding-top:38px}
  .watch h1{font-size:34px;line-height:1.15}
  .watch-navigation{margin-bottom:20px}
  .back-button{font-size:13px;padding:9px 12px}
}

/* ===== Two-image album artwork ===== */
.category-cover--pair{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:#090807}
.category-cover--pair img{min-width:0;object-fit:cover}
.category-cover--pair img+img{border-left:1px solid rgba(227,176,106,.45)}
.category-hero-thumbs{display:flex;gap:12px;flex-shrink:0}
.category-hero-thumb--second{box-shadow:0 12px 35px rgba(0,0,0,.28)}
.category-image-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.category-image-fields .category-image-field{min-width:0;padding:18px;background:linear-gradient(145deg,#17120e,#0d0b09);border:1px solid #38291c;border-radius:8px}
.category-image-fields .category-image-preview{aspect-ratio:16/9;max-height:none}
.admin-category-thumbs{display:flex;gap:6px;align-items:center}
.admin-category-thumbs .admin-category-thumb{width:78px;height:50px}
@media(max-width:700px){
  .category-image-fields{grid-template-columns:1fr}
  .category-hero-thumbs{gap:8px}
  .category-hero-thumb{width:110px;height:110px}
}
@media(max-width:480px){
  .category-hero-inner{align-items:flex-start;flex-direction:column;padding-top:25px;padding-bottom:25px}
  .category-hero-thumbs{width:100%}
  .category-hero-thumb{width:calc(50% - 4px);height:auto;aspect-ratio:16/9}
}

/* Category detail: show album artwork as a distinct, full-ratio panel over the hero */
.category-page-hero .category-hero-inner{gap:32px}
.category-page-hero .category-hero-thumbs{
  width:min(48%,560px);
  flex:0 0 min(48%,560px);
  padding:10px;
  box-sizing:border-box;
  background:rgba(8,7,6,.82);
  border:1px solid rgba(227,176,106,.42);
  border-radius:8px;
  box-shadow:0 16px 42px rgba(0,0,0,.42);
  align-items:stretch;
}
.category-page-hero .category-hero-thumb{
  display:block;
  width:calc(50% - 6px);
  height:auto;
  aspect-ratio:16/9;
  object-fit:contain;
  background:#080a10;
  border:0;
  box-shadow:none;
}
.category-page-hero .category-hero-thumbs:not(:has(.category-hero-thumb--second)) .category-hero-thumb{width:100%}
.category-page-hero .category-hero-thumb--second{border-left:1px solid rgba(227,176,106,.45)}
@media(max-width:700px){
  .category-page-hero .category-hero-thumbs{width:100%;flex:0 0 auto;padding:8px;gap:8px}
  .category-page-hero .category-hero-thumb{width:calc(50% - 4px);height:auto;aspect-ratio:16/9}
  .category-page-hero .category-hero-thumbs:not(:has(.category-hero-thumb--second)) .category-hero-thumb{width:100%}
}