:root{
  --bg:#0f0f0f; --bg-soft:#151515; --elev:#1b1b1b; --line:#262626;
  --text:#e8e8e8; --muted:#b4b4b4; --accent:#ff9900; --accent-2:#ffb84d;
  --radius:16px; --radius-sm:10px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.container{max-width:1300px;margin:0 auto;padding:0 16px}

/* —— TOP BAR —— */
.topbar{position:sticky;top:0;z-index:40;background:rgba(15,15,15,.9);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--line)}
.topbar-inner{display:grid;grid-template-columns:36px 140px 1fr auto;gap:12px;align-items:center;padding:10px 0}
.btn{display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--elev);height:36px;min-width:36px;color:var(--text)}
.btn:hover{border-color:#2f2f2f}
.logo{display:flex;align-items:center;gap:6px;font-weight:800}
.logo-badge{background:var(--accent);color:#111;padding:4px 8px;border-radius:6px}
.search{display:flex;align-items:center;background:var(--elev);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.search input{all:unset;padding:10px 12px;flex:1;color:var(--text)}
.search button{all:unset;display:grid;place-items:center;padding:8px 12px;background:transparent;cursor:pointer;color:var(--muted)}
.userbar{display:flex;align-items:center;gap:8px}
.pill{padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--elev);color:var(--text)}
.pill.accent{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#111;font-weight:700;border:none}

/* —— SUBNAV —— */
.subnav{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);overflow:auto}
.tab{white-space:nowrap;padding:8px 12px;border-radius:999px;background:var(--elev);color:#bbb;border:1px solid var(--line)}
.tab.active{color:#111;background:linear-gradient(180deg,var(--accent),var(--accent-2));border:none;font-weight:700}

/* —— HOME TOOLBAR —— */
.toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:16px 0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:12px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--elev);color:#ccc}
.chip.active{background:#101010;border-color:#333;color:#fff;box-shadow:inset 0 0 0 1px #333}
.select{position:relative}
.select select{appearance:none;background:var(--elev);border:1px solid var(--line);color:#fff;padding:10px 36px 10px 12px;border-radius:10px}
.select:after{content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#aaa;pointer-events:none}

/* —— HOME GRID —— */
.grid{display:grid;gap:18px;grid-template-columns:repeat(4,1fr);padding-bottom:30px}
@media (max-width:1200px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.card{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.2s box-shadow}
.card:hover{box-shadow:var(--shadow)}
.thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#2b2b2b,#1a1a1a)}
.dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.75);border-radius:8px;padding:4px 8px;font-size:12px}
.hd{position:absolute;left:8px;bottom:8px;background:#0e0e0e;border:1px solid var(--line);border-radius:8px;padding:3px 6px;font-size:12px}
.meta{padding:10px 12px}
.title{font-weight:800;line-height:1.25;margin-bottom:6px}
.sub{font-size:12px;color:#bdbdbd;display:flex;gap:8px;flex-wrap:wrap}
.meta .tags{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:11px;padding:4px 8px;border:1px solid var(--line);border-radius:999px;color:#bbb}
.footer{display:flex;justify-content:center;padding:20px 0;border-top:1px solid var(--line)}
.loadmore{padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--elev);color:#fff}

/* —— WATCH LAYOUT —— */
.page-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:22px;padding:18px 0}
@media (max-width:1024px){.page-grid{grid-template-columns:1fr}}
.card-box{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.player{aspect-ratio:16/9;background:#0b0b0b;border-radius:var(--radius-sm) var(--radius-sm) 0 0;overflow:hidden;position:relative}
video{width:100%;height:100%;object-fit:cover;background:#000}
.time-code{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.7);padding:4px 8px;border-radius:8px;color:#fff;font-weight:700}
.meta-box{padding:14px 16px;border-top:1px solid var(--line)}
.stats{display:flex;gap:14px;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.action{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--elev);border:1px solid var(--line);border-radius:12px;color:var(--text)}
.action .count{color:var(--muted)}
.channel{display:flex;align-items:center;gap:14px;padding:14px 16px;border-top:1px solid var(--line)}
.avatar{width:48px;height:48px;border-radius:999px;background:linear-gradient(135deg,#323232,#1f1f1f);border:1px solid var(--line);display:grid;place-items:center;font-weight:800}
.ch-meta{flex:1}
.ch-title{display:flex;align-items:center;gap:8px;font-weight:800}
.badge{font-size:12px;padding:2px 6px;border-radius:999px;background:var(--elev);border:1px solid var(--line);color:var(--muted)}
.desc{padding:0 16px 16px;border-top:1px solid var(--line)}
.desc p{margin:12px 0;color:#ddd}
.show-more{cursor:pointer;color:var(--accent)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag-lg{font-size:12px;padding:6px 10px;background:#121212;border:1px solid var(--line);border-radius:999px;color:#bbb}

/* —— WATCH SIDEBAR —— */
.aside .rel{display:grid;gap:12px}
.video-item{display:grid;grid-template-columns:160px 1fr;gap:12px;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.vi-meta{padding:10px 10px 10px 0}
.vi-title{font-weight:700;line-height:1.2;margin-bottom:6px}
.vi-sub{color:var(--muted);font-size:12px;display:flex;gap:8px;flex-wrap:wrap}

/* —— UTIL —— */
.i{width:18px;height:18px;display:inline-block}
.row{display:flex;align-items:center;gap:8px}

/* —— AD BANNER (watch) —— */
.ad-banner{margin:16px 0 0;}
.ad-box{position:relative;border:1px solid var(--line);background:var(--bg-soft);border-radius:12px;overflow:hidden;}
.ad-box a{display:block}
.ad-box img{display:block;width:100%;height:auto}
.ad-tag{position:absolute;left:10px;top:10px;font-size:12px;padding:4px 8px;border-radius:999px;background:#0e0e0e;border:1px solid var(--line);color:#bbb}


/* —— AD BANNER (global) —— */
.ad-banner{margin:16px 0}
.ad-box{position:relative;border:1px solid var(--line);background:var(--bg-soft);border-radius:12px;overflow:hidden}
.ad-box a{display:block}
.ad-box img{display:block;width:100%;height:auto}
.ad-tag{position:absolute;left:10px;top:10px;font-size:12px;padding:4px 8px;border-radius:999px;background:#0e0e0e;border:1px solid var(--line);color:#bbb}


/* —— AD BANNER (global) —— */
.ad-banner{margin:16px 0}
.ad-box{position:relative;border:1px solid var(--line);background:var(--bg-soft);border-radius:12px;overflow:hidden}
.ad-box a{display:block}
.ad-box img{display:block;width:100%;height:auto}
.ad-tag{position:absolute;left:10px;top:10px;font-size:12px;padding:4px 8px;border-radius:999px;background:#0e0e0e;border:1px solid var(--line);color:#bbb}


/* —— MODAL POPUP (first-visit) —— */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:1000}
.modal-backdrop.show{display:flex}
.modal{width:min(520px,92vw);background:var(--bg-soft);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.modal-title{font-weight:800}
.modal-close{all:unset;cursor:pointer;border:1px solid var(--line);background:var(--elev);border-radius:10px;width:34px;height:34px;display:grid;place-items:center;color:#ccc}
.modal-body{padding:0}
.modal-body img{display:block;width:100%;height:auto}
.modal-content{padding:14px 16px;color:#ddd}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--line)}
.btn-cta{padding:10px 16px;border-radius:999px;border:none;background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#111;font-weight:800;cursor:pointer}
.btn-ghost{padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--elev);color:#fff;cursor:pointer}

/* Khusus halaman admin */
.admin-dashboard .search{ display:none }              /* sembunyikan search */
.admin-dashboard .topbar-inner{
  grid-template-columns: 36px 140px 1fr auto;         /* kolom terakhir untuk tombol kanan */
}
.admin-dashboard .userbar{ justify-self: end; }       /* dorong ke paling kanan */

/* Alternatif: Logout fixed di pojok kanan atas */
.admin-dashboard #logoutBtn{
  position: fixed;
  top: 10px;
  right: 16px;
  z-index: 50;
}

/* Spasi antara tab admin (subnav) dan section KPI pertama */
.admin-dashboard .subnav{
  margin-bottom: 16px;   /* atur 16–24px sesuai selera */
}

.admin-dashboard #dash{ margin-top: 16px; }

/* ===== Admin Banners Polishing ===== */
.bn-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}
@media (max-width: 980px){ .bn-grid{grid-template-columns:1fr} }

.bn-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}

.bn-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width: 720px){ .bn-form-grid{grid-template-columns:1fr} }

.field .label{display:block;font-weight:700;margin-bottom:6px}
.field .hint{font-size:12px;color:#9aa;margin-top:6px}

.bn-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

/* Switch toggle */
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.switch input{display:none}
.switch .slider{width:46px;height:26px;border-radius:999px;background:#2a2a2a;border:1px solid var(--line);position:relative;transition:.2s}
.switch .slider::after{content:'';position:absolute;top:3px;left:4px;width:20px;height:20px;border-radius:50%;background:#777;transition:.2s}
.switch input:checked + .slider{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.switch input:checked + .slider::after{transform:translateX(18px);background:#111}
.switch .switch-text{font-size:14px;color:#ddd}

/* Dropzone */
.dropzone{border:1.5px dashed var(--line);border-radius:14px;padding:20px;text-align:center;background:#0f0f0f;outline:none}
.dropzone:focus{box-shadow:0 0 0 2px rgba(255,153,0,.3)}
.dz-icon{font-size:28px;margin-bottom:6px}
.dz-title{font-weight:700}
.dz-sub{font-size:12px;color:#aaa}
.dz-browse{text-decoration:underline;cursor:pointer}
.dz-file{margin-top:8px;font-size:12px;color:#bbb}

/* Preview */
.preview .empty{color:#9aa;margin:8px 0}
.preview .ad-box{max-height:220px;overflow:hidden;border-radius:12px}

/* List */
.bn-list{display:flex;flex-direction:column;gap:8px}
.bn-list .video-item{display:grid;grid-template-columns:120px 1fr auto;gap:10px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0f0f0f}
.bn-list .video-item .thumb{background:#141414}
@media (max-width: 680px){ .bn-list .video-item{grid-template-columns:1fr} }
/* Polishing Admin Banners */
.bn-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}
@media (max-width:980px){.bn-grid{grid-template-columns:1fr}}
.bn-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.bn-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:720px){.bn-form-grid{grid-template-columns:1fr}}
.field .label{display:block;font-weight:700;margin-bottom:6px}
.field .hint{font-size:12px;color:#9aa;margin-top:6px}
.bn-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

/* ===== Admin Banners — polished ===== */
.bn-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}
@media (max-width:980px){.bn-grid{grid-template-columns:1fr}}
.bn-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.bn-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:720px){.bn-form-grid{grid-template-columns:1fr}}
.field .label{display:block;font-weight:700;margin-bottom:6px}
.field .hint{font-size:12px;color:#9aa;margin-top:6px}
.bn-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

/* Switch toggle */
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.switch input{display:none}
.switch .slider{width:46px;height:26px;border-radius:999px;background:#2a2a2a;border:1px solid var(--line);position:relative;transition:.2s}
.switch .slider::after{content:'';position:absolute;top:3px;left:4px;width:20px;height:20px;border-radius:50%;background:#777;transition:.2s}
.switch input:checked + .slider{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.switch input:checked + .slider::after{transform:translateX(18px);background:#111}
.switch .switch-text{font-size:14px;color:#ddd}

/* Dropzone */
.dropzone{border:1.5px dashed var(--line);border-radius:14px;padding:20px;text-align:center;background:#0f0f0f;outline:none;transition:.15s}
.dropzone.dz-on{background:#121212}
.dz-icon{font-size:28px;margin-bottom:6px}
.dz-title{font-weight:700}
.dz-sub{font-size:12px;color:#aaa}
.dz-browse{text-decoration:underline;cursor:pointer}
.dz-file{margin-top:8px;font-size:12px;color:#bbb}

/* Preview */
.preview .empty{color:#9aa;margin:8px 0}
.preview .ad-box{max-height:220px;overflow:hidden;border-radius:12px}

/* Gallery of all slots */
.bn-allgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:1080px){.bn-allgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.bn-allgrid{grid-template-columns:1fr}}
.slot-card{border:1px solid var(--line);background:#0f0f0f;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.slot-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.slot-title{font-weight:800}
.slot-badge{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:#131313}
.slot-thumb{aspect-ratio:3/1;background:#141414;display:flex;align-items:center;justify-content:center;overflow:hidden}
.slot-thumb img{width:100%;height:100%;object-fit:cover}
.slot-cta{display:flex;gap:8px;align-items:center;padding:10px 12px;border-top:1px dashed var(--line)}
.slot-actions{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.pill.danger{background:#1a0f0f;border-color:#3b1616}

/* Tiny toast */
.toast{position:fixed;right:16px;bottom:16px;background:#111;border:1px solid var(--line);padding:10px 12px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s}
.toast.show{opacity:1}

/* Force full-width page grid khusus halaman Banners */
.page-grid.page-grid--single{
  display: grid;
  grid-template-columns: 1fr;   /* dari 2 kolom -> 1 kolom penuh */
  gap: 16px;
}

/* Sedikit ruang ekstra di kartu ketika layar lebar */
@media (min-width:1200px){
  .bn-card{ padding:18px; }
}

/* --- CTA single-line input --- */
.input-line{
  display:flex; align-items:center; gap:8px;
  background:#0f0f0f; border:1px solid var(--line);
  border-radius:12px; padding:10px 12px;
}
.input-line:focus-within{ border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,153,0,.15); }
.input-line .input-icon{opacity:.8}
.input-line input{
  flex:1; background:transparent; border:none; outline:none; color:#ddd;
}
.input-error{color:#ff8080; font-size:12px; margin-top:6px}
.input-line.invalid{ border-color:#7a2b2b; box-shadow:none; }

.text-area{width:100%;background:#0f0f0f;border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:#ddd;outline:none}
.text-area:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,153,0,.15)}
.stack > .field + .field{margin-top:10px}
.player-box .empty{color:#9aa;text-align:center;border:1px dashed var(--line);border-radius:12px}
    /* kecil-kecil tambahan biar enak */
    .text-area{width:100%;background:#0f0f0f;border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:#ddd;outline:none}
    .text-area:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,153,0,.15)}
    .stack > .field + .field{margin-top:10px}
    .player-box .empty{color:#9aa;text-align:center;border:1px dashed var(--line);border-radius:12px;padding:16px}
/* Make text inputs inside .search visible and full-width */
.field .search{
  display:flex;
  align-items:center;
  background:#0f0f0f;
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 10px;
  min-height:42px;            /* visible height */
}
.field .search:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(255,153,0,.15);
}
.field .search input{
  flex:1;
  width:100%;
  background:transparent;     /* keep theme */
  border:none;
  outline:none;
  color:#ddd;
  padding:10px 2px;
}
.field .search input::placeholder{ color:#9aa; }
.input-error{ color:#ff8080; font-size:12px; margin-top:6px; }
.text-input{
  width:100%;
  background:#0f0f0f;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  color:#ddd;
  outline:none;
}
.text-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(255,153,0,.15);
}

/* --- Admin Videos: ukuran thumb list --- */
.bn-list .video-item .thumb {
  width: 120px;
  height: 68px;
  border-radius: 10px;
  overflow: hidden;
  background: #141414;
}
.bn-list .video-item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* admin-kategori.css */
/* Table action buttons rapih */
#catBody td a.pill {
  display: inline-block;
  margin: 2px 4px;
  font-size: 13px;
  padding: 4px 8px;
}

/* Table kolom lebih lega */
#catBody td {
  vertical-align: middle;
  white-space: nowrap;
}

/* Kolom nama biar muat panjang */
#catBody td:nth-child(2) {
  white-space: normal;
  max-width: 180px;
}

/* Chip kategori di bar rapih */
.tl-cats__track {
  gap: 10px;
}
.tl-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
}

/* Toolbar biar nggak tabrakan */
.toolbar .left, .toolbar .right {
  flex-wrap: wrap;
  gap: 8px;
}
.toolbar .input input {
  width: 160px;
}

/* admin-kategori-form.css
   Styling elegan untuk form tambah kategori TubeLite
   (tidak mengubah style global lain) */

/* Kontainer form */
#addCategoryForm{
  display: grid;
  gap: 12px;
}

/* Grid fleksibel untuk baris-baris yang berisi 2 kolom (warna & icon, dsb.) */
#addCategoryForm .row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: center;
}

/* Kartu/form wrapper bawaan (sedikit padding agar lega) */
#createBox .meta-box{ padding: 14px 16px 10px; }

/* Label elegan */
#addCategoryForm .field label{
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2px;
  color: var(--muted);
}

/* Input/textarea konsisten */
#addCategoryForm .field input,
#addCategoryForm .field textarea{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
}

/* Placeholder halus */
#addCategoryForm .field input::placeholder,
#addCategoryForm .field textarea::placeholder{
  color: color-mix(in oklab, var(--muted) 84%, transparent);
}

/* Fokus: ring lembut mengikuti accent */
#addCategoryForm .field input:focus,
#addCategoryForm .field textarea:focus{
  outline: none;
  border-color: color-mix(in oklab, var(--accent) 40%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent);
}

/* Textarea nyaman untuk mengetik */
#addCategoryForm .field textarea{
  min-height: 92px;
  resize: vertical;
}

/* Picker warna dibikin proper */
#addCategoryForm input[type="color"]{
  padding: 0;
  width: 56px;
  height: 38px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

/* Switch/checkbox baris status */
#addCategoryForm .switch{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

/* Tombol */
#addCategoryForm .pill{ margin-right: 6px; }
#addCategoryForm .pill--accent{ font-weight: 700; }

/* Hint kecil (jika kamu tambahkan elemen .hint) */
#addCategoryForm .hint{
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* Responsif kecil */
@media (max-width: 520px){
  #addCategoryForm .row{
    grid-template-columns: 1fr;
  }
}

/* beri napas di kiri/kanan subnav */
.subnav {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* opsional: jarak kecil antar tab */
.subnav .tab { margin-right: 8px; }

/* opsional: sedikit ekstra di tab pertama */
.subnav .tab:first-child { margin-left: 2px; }

/* Categories page: make the search bar fill the row */
.cat-page .toolbar {
  display: flex;           /* pastikan flex container */
  align-items: center;
  gap: 12px;
}

.cat-page .toolbar .search {
  flex: 1 1 auto;          /* <= ini yang bikin melebar penuh */
  min-width: 0;            /* biar input nggak overflow */
}

.cat-page .toolbar .select {
  margin-left: auto;       /* dorong ke paling kanan */
  flex: 0 0 auto;
}

/* ===== Drawer (sidebar) – scoped, aman tidak bentrok ===== */
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  opacity:0; transition:opacity .2s ease; z-index:998;
}
.drawer-backdrop.show{ opacity:1; }
.drawer{
  position:fixed; left:0; top:0; bottom:0; width:300px; max-width:86vw;
  background:#0e0e0f; border-right:1px solid rgba(255,255,255,.06);
  transform:translateX(-100%); transition:transform .24s ease;
  z-index:999; display:flex; flex-direction:column;
}
.drawer.open{ transform:none; }
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px; border-bottom:1px solid rgba(255,255,255,.06);
}
.drawer-head .brand{ display:flex; align-items:center; gap:6px; font-weight:700; }
.drawer-head .logo-badge{
  background:#ffb000; color:#111; font-weight:800; padding:.1rem .45rem; border-radius:8px;
}
.icon-btn{ background:#1a1a1b; border:none; color:#ddd; padding:8px 10px; border-radius:10px; cursor:pointer; }
.icon-btn:hover{ background:#222; }

.drawer-nav{ padding:8px; overflow:auto; }
.d-item{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:12px 12px; border-radius:12px; color:#e8e8e8; text-decoration:none;
  background:#121213; margin-bottom:8px; border:1px solid rgba(255,255,255,.06);
}
.d-item:hover{ background:#171719; }
.d-accordion{ cursor:pointer; justify-content:space-between; }
.d-accordion .chev{ opacity:.75; }
.d-accordion[aria-expanded="true"] .chev{ transform:rotate(180deg); }

.d-panel{ padding:0 6px 6px 6px; }
.d-sub{
  display:block; padding:10px 12px; margin:6px 0 0 0; border-radius:10px;
  color:#cfcfcf; text-decoration:none; background:#101011; border:1px solid rgba(255,255,255,.05);
}
.d-sub:hover{ background:#151517; }

.d-cta{
  display:flex; align-items:center; justify-content:center;
  margin-top:10px; padding:12px; border-radius:14px;
  background:linear-gradient(90deg,#ff9f0a,#ffb400); color:#111; font-weight:800;
  text-decoration:none; border:none;
}
.d-cta:hover{ filter:saturate(1.1) brightness(1.05); }

/* Optional: kecilkan scrollbar dalam drawer */
.drawer-nav::-webkit-scrollbar{ width:10px; }
.drawer-nav::-webkit-scrollbar-thumb{ background:#1b1b1d; border-radius:10px; }
.drawer-nav{ scrollbar-width:thin; scrollbar-color:#1b1b1d transparent; }

/* Admin: lebarkan field Judul Video full width */
#vdForm .bn-form-grid > .field:first-child {  /* asumsi judul ada di field pertama */
  grid-column: 1 / -1;            /* ambil 2 kolom grid = full baris */
}

#vdForm #vdTitle {                 /* pastikan input-nya ikut melebar */
  width: 100%;
}

#vdForm .bn-form-grid > .field:first-child .search {
  width: 100%;
}

/* Paksa URL di bawah dropzone untuk semua ukuran layar */
.thumb-flex{ 
  display:block !important;   /* stop grid */
}
.thumb-flex .dropzone{
  margin-bottom:10px;         /* kasih jarak ke input URL */
}
.thumb-url{
  margin-top:0;
}
.thumb-url .sub-label{
  display:block;
  margin:4px 0 8px;
  font-size:.95rem;
  color:var(--muted);
}
.vi-cats{
  display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto;
  scrollbar-width:none;
}
.vi-cats::-webkit-scrollbar{display:none}
.pill-cat{white-space:nowrap}

/* ====== Kategori di list: single-line dengan +N ====== */
.video-item .vi-cats{
  display:flex;
  gap:6px;
  align-items:center;
  overflow:hidden;           /* cegah numpuk ke bawah */
  white-space:nowrap;        /* paksa satu baris */
}

.video-item .pill-cat{
  background:#222;
  border-radius:999px;
  padding:2px 8px;
  font-size:12px;
  line-height:20px;
  flex:0 0 auto;             /* biar chip tidak melebar */
  white-space:nowrap;
}

.video-item .pill-cat.more{
  background:#333;
  opacity:.9;
}

 .cats-mini{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
  .cats-mini .pill-cat{
    background:#222;border-radius:999px;padding:2px 8px;
    font-size:12px;line-height:20px
  }
  /* ==== Admin Settings — spacing & polish ==== */

/* Ritme vertikal */
.admin-dashboard .card-box .meta-box{
  padding: 16px 18px;              /* semula 14px 16px */
  border-top: 1px solid var(--line);
}
.admin-dashboard .card-box .desc{
  padding: 14px 18px 18px;         /* beri ruang kiri/kanan & bawah */
}

/* Field */
.admin-dashboard .stack > .field{ margin-top: 14px; }
.admin-dashboard .label{
  display:block;
  font-weight:700;
  margin: 0 0 8px;                 /* label tidak mepet input */
  letter-spacing:.2px;
}

/* Input & textarea mengikuti komponen lain, tapi lebih lega */
.admin-dashboard form .search{
  display:flex; align-items:center;
  gap: 8px;
  padding: 0 12px;                 /* ruang dalam */
  min-height: 44px;                /* tinggi konsisten */
  border-radius: 12px;
}
.admin-dashboard form .search input{
  padding: 10px 0;                 /* napas vertikal */
}
.admin-dashboard .text-area{
  min-height: 110px;
  line-height: 1.5;
  padding: 12px 14px;              /* nyaman mengetik */
  border-radius: 12px;
}

/* Baris-baris gabungan */
.admin-dashboard .row{ gap: 14px; flex-wrap:wrap; }

/* Section breaks biar tidak dempet */
.admin-dashboard .meta-box + .field,
.admin-dashboard .meta-box + .row,
.admin-dashboard .meta-box + .stack { margin-top: 10px; }

/* Tombol */
.admin-dashboard .actions{
  gap: 12px;
  margin-top: 16px;                /* jarak dari field terakhir */
}

/* Tipografi kecil */
.admin-dashboard .meta-box .title{ font-size: 15px; }
.admin-dashboard .meta-box .stats{ margin-top: 6px; color: var(--muted); }

/* File input baris */
.admin-dashboard .file-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.admin-dashboard .file-row input[type="file"]{
  padding: 8px 10px;
  background:#0f0f0f;
  border:1px solid var(--line);
  border-radius:12px;
  color:#ddd;
}
.admin-dashboard .preview-fav{
  width: 32px; height: 32px;       /* sedikit lebih besar */
  border-radius: 8px;
}
/* tanggal di pojok kanan bawah kartu */
.card .meta{position:relative}
.card .meta .date-pill{
  position:absolute; right:8px; bottom:8px;
  background:#1c1c1c; border-radius:999px;
  padding:2px 10px; font-size:12px; line-height:20px;
  opacity:.9
}
/* -- Deskripsi (watch) -- */
.desc-body{
  color:var(--muted,#b6b6b6);
  line-height:1.6;
  word-break:break-word;
}
.desc-body a{
  color:var(--accent,#ff9900);
  text-decoration:underline;
}
/* ===== Deskripsi (rapi, tidak "numpuk") ===== */
#descCard.card-box{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-top: 14px;
}
#descCard .meta-box{ padding: 0 }

#descCard .title{
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 15px;
}

.desc-body{
  padding: 0;                 /* hilangkan box di dalamnya */
  background: transparent;
  border: 0;
  color: var(--muted,#c9c9c9);
  line-height: 1.7;
  white-space: pre-wrap;      /* jaga line break */
  overflow-wrap: anywhere;    /* putus kata super panjang */
  letter-spacing: .1px;
}

/* beri jarak dari chips kategori ke deskripsi */
.watch-cats{ margin-top: 10px; margin-bottom: 4px }

/* ===== Fancy search bar ===== */
.search-inline{ position:relative; flex:1; min-width:280px }
.search-inline .s-icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-size:16px; opacity:.6; pointer-events:none;
}
.search-inline input{
  width:100%; height:42px;
  padding:10px 42px 10px 38px;   /* kanan utk clear, kiri utk icon */
  border-radius:999px;
  background:#0d0d0f;
  border:1px solid var(--border);
  color:var(--text,#e9e9e9);
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.search-inline input::placeholder{ color:#80838a }
.search-inline input:focus{
  border-color:var(--accent,#f6b34e);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent,#f6b34e) 25%, transparent);
}

/* clear button */
.search-inline .s-clear{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  display:none; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:#1b1b20; border:1px solid #2a2a2f; color:#cfcfd6;
  cursor:pointer;
}
.search-inline .s-clear:hover{ background:#22232a }
.search-inline .s-clear.show{ display:flex }


/* CTA di kanan atas */
.topbar .userbar .pill.accent{
  border-radius:9999px;
  padding:10px 14px;
  font-weight:700;
  white-space:nowrap;          /* jangan pindah baris */
}

/* versi mobile */
@media (max-width: 560px){
  .topbar .userbar{ display:flex; align-items:center; gap:8px; }
  .topbar .userbar .pill.accent{
    font-size:12px;            /* kecilkan font */
    padding:6px 10px;          /* kecilkan padding */
    line-height:1;             
    white-space:nowrap;        /* tetap 1 baris */
    max-width: 60vw;           /* jaga tidak kepanjangan */
    overflow:hidden;
    text-overflow:ellipsis;    /* kalau terlalu panjang, beri … */
  }
}

  /* Player card yang rapi */
  .player{position:relative;aspect-ratio:16/9;background:linear-gradient(180deg,#101214,#0b0b0b);
    border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.35)}
  .player video,.player iframe{width:100%;height:100%;display:block;background:#000;border:0;outline:0}

  /* Big shadow halus saat hover */
  .player:hover{box-shadow:0 12px 36px rgba(0,0,0,.45)}

  /* HUD iklan tetap di atas */
  .ad-hud{z-index:30}

  /* Brand overlay halus */
  #ovWrap{z-index:35}
  #ovWrap img{max-height:56px;max-width:160px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}

  /* Sembunyikan judul saat playing */
  .is-playing .watch-head .watch-title.hide-when-playing{display:none}

  /* Optional: crop header judul bawaan dari beberapa iframe embed */
  .iframe-crop{overflow:hidden;position:relative}
  .iframe-crop iframe{position:absolute;left:0;top:-26px;height:calc(100% + 26px)} /* atur -26px sesuai kebutuhan */