body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: linear-gradient(180deg, #07111f, #0a1628);
  color: white;
}

.app {
  max-width: 1100px;
  margin: auto;
  padding: 20px;
}

.hero {
  background: linear-gradient(135deg, #00b4ff, #1e3a8a, #07111f);
  padding: 35px;
  border-radius: 28px;
  text-align: center;
  margin-bottom: 20px;
  box-shadow: 0 15px 40px rgba(0, 180, 255, 0.25);
}

.hero h1 {
  font-size: 42px;
  margin: 0;
}

.hero p, .muted, .hint {
  color: #dbeafe;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.stats div, .user-box, .auth-box, .form-box {
  background: rgba(14, 27, 46, 0.95);
  border: 1px solid rgba(255,255,255,0.08);
}

.stats div {
  padding: 12px;
  border-radius: 16px;
}

.auth-box, .form-box, .user-box {
  padding: 18px;
  border-radius: 22px;
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.user-box {
  grid-template-columns: 1fr auto;
  align-items: center;
}

input, select, textarea {
  padding: 14px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
}

textarea {
  min-height: 80px;
}

button {
  padding: 14px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #00b4ff, #2563eb);
  color: white;
  font-size: 15px;
  cursor: pointer;
}

button:disabled {
  opacity: 0.55;
}

.search {
  width: 100%;
  box-sizing: border-box;
  background: #10233d;
  color: white;
  margin-bottom: 15px;
}

.backup, .tabs {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.tabs, .two {
  grid-template-columns: 1fr 1fr;
}

.category {
  margin-bottom: 30px;
}

.category h2 {
  border-left: 6px solid #00b4ff;
  padding-left: 10px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.card {
  background: #0e1b2e;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 15px 40px rgba(0,0,0,0.35);
}

.poster {
  width: 100%;
  height: 320px;
  object-fit: cover;
  background: #10233d;
}

.info {
  padding: 16px;
}

.badge {
  background: #00b4ff;
  color: #03111f;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: bold;
}

.owner {
  display: inline-block;
  margin-left: 6px;
  background: #263852;
  color: white;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
}

.info h2 {
  border-left: 6px solid #00b4ff;
  padding-left: 10px;
}

.progress-box {
  background: #263852;
  height: 10px;
  border-radius: 20px;
  overflow: hidden;
  margin: 10px 0;
}

.progress {
  height: 100%;
  background: linear-gradient(90deg, #00b4ff, #60a5fa);
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.actions.three {
  grid-template-columns: 1fr 1fr 1fr;
}

.gray {
  background: #263852;
}

.favorite {
  background: #ffd60a;
  color: #111;
}

.checkline {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #dbeafe;
}

.empty {
  text-align: center;
  padding: 30px;
  color: #dbeafe;
  background: #0e1b2e;
  border-radius: 20px;
}


.stats .stat-card{
  background: rgba(14, 27, 46, 0.95);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 14px;
  border-radius: 16px;
  color: white;
  font-size: 18px;
  box-shadow: none;
}

.stats .stat-card:active{
  transform: scale(.97);
}

.view-bar{
  background: rgba(14, 27, 46, 0.95);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  padding: 16px;
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.view-bar h2{
  margin: 0;
  border-left: 6px solid #00b4ff;
  padding-left: 10px;
}

@media (max-width: 600px){
  .view-bar{
    grid-template-columns: 1fr;
  }
}


.menu-toggle{
position:absolute;top:20px;right:20px;width:64px;height:64px;
border-radius:50%;background:#162554;font-size:28px;
}
.hero{position:relative;}
.menu-panel{
display:none;
position:fixed;
top:100px;right:20px;z-index:999;
width:280px;
background:#0e1b2e;
box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.menu-panel.open{display:grid !important;}


/* Improved menu design */
.menu-panel{
display:none;
position:fixed;
top:95px;
right:20px;
z-index:999;
width:320px;
padding:24px;
border-radius:28px;
background:rgba(7,17,31,.97);
border:1px solid rgba(255,255,255,.08);
}
.menu-panel button{margin-top:10px;}

.auth-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px}.menu-panel{display:none}.menu-panel.open{display:grid}
.settings-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:999;align-items:center;justify-content:center}.settings-modal.show{display:flex}.settings-card{background:#071228;padding:25px;border-radius:24px;width:85%;max-width:340px}.settings-card h2{color:#fff;margin-bottom:15px}.settings-card button{width:100%;margin:10px 0}
.settings-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:2000}
.settings-box{background:#0e1b2e;padding:25px;border-radius:25px;width:90%;max-width:350px;display:grid;gap:12px}
.user-box button{width:100%}
.light-mode{background:#f4f7fb;color:#111}

.settings-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:3000}
.settings-box{background:#0e1b2e;padding:25px;border-radius:24px;width:90%;max-width:360px;display:grid;gap:10px}
.light-mode{background:#f4f7fb!important;color:#111!important}
.menu-panel button{display:flex;justify-content:space-between;width:100%}


/* Light mode */
.light-mode{
  background:#f4f7fb !important;
  color:#111 !important;
}
.light-mode .hero,
.light-mode .form-box,
.light-mode .user-box,
.light-mode .card,
.light-mode .menu-panel,
.light-mode .settings-box{
  background:#ffffff !important;
  color:#111 !important;
}

.avatar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.avatar-grid img{width:80px;height:80px;border-radius:50%;background:#fff;padding:5px;cursor:pointer}
.avatar-grid img:hover{transform:scale(1.05)}


.menu-profile{display:flex;align-items:center;gap:15px;margin-bottom:15px;}
.menu-avatar{width:70px;height:70px;border-radius:50%;object-fit:cover;border:3px solid #00b4ff;background:#fff;box-shadow:0 0 20px rgba(0,180,255,.4);}


/* V2 stat/type filters */
.stats{grid-template-columns:repeat(3,1fr);}
.type-filter{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;}
.type-filter button{padding:10px;font-size:13px;border-radius:12px;}
@media(max-width:600px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .type-filter{grid-template-columns:repeat(2,1fr);}
}

/* v2 cleanup/filter UI */
.type-filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0 18px;
}
.type-filter{
  padding:10px 14px;
  border-radius:999px;
  background:#263852;
  color:#fff;
  font-size:14px;
}
.type-filter.active{
  background:linear-gradient(135deg,#00b4ff,#2563eb);
  box-shadow:0 8px 20px rgba(0,180,255,.25);
}
#cancelEditBtn{
  background:#3b465c;
}
.stats{
  grid-template-columns:repeat(3,1fr);
}
@media(max-width:600px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .type-filter{font-size:13px;padding:9px 11px;}
}
.light-mode .type-filter{background:#e5e7eb;color:#111;}
.light-mode .type-filter.active{color:#fff;}

/* Season System V1 */
.group-card .actions{
  grid-template-columns:1fr 1fr;
}
.season-detail-box{
  max-width:520px;
  max-height:85vh;
  overflow-y:auto;
  position:relative;
  padding-bottom:20px;
}
.season-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  background:rgba(255,255,255,.06);
  border-radius:16px;
  padding:12px;
  margin:10px 0;
}
.season-row p{
  margin:6px 0 0;
  color:#dbeafe;
}
.light-mode .season-row{
  background:#f1f5f9;
}
.light-mode .season-row p{
  color:#475569;
}

/* Season status improvements */
.season-main{
  flex:1;
}
.season-progress{
  max-width:260px;
  margin-top:10px;
}
.season-row.status-ดูจบแล้ว{
  border-left:5px solid #22c55e;
}
.season-row.status-กำลังดู{
  border-left:5px solid #00b4ff;
}
.season-row.status-ดองไว้{
  border-left:5px solid #f59e0b;
}
.season-row.status-อยากดู{
  border-left:5px solid #94a3b8;
}


/* Smart Add V1 */
.smart-suggest-box{
  background:rgba(7,17,31,.92);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  padding:12px;
  display:grid;
  gap:10px;
}
.smart-head{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  color:#dbeafe;
  font-size:13px;
}
.smart-head b{
  color:#fff;
  font-size:15px;
}
.smart-loading,
.smart-empty{
  padding:14px;
  color:#dbeafe;
  background:rgba(255,255,255,.05);
  border-radius:14px;
}
.smart-result{
  width:100%;
  display:grid;
  grid-template-columns:58px 1fr;
  gap:12px;
  align-items:center;
  text-align:left;
  background:#10233d;
  margin:8px 0;
  padding:10px;
}
.smart-result img{
  width:58px;
  height:82px;
  object-fit:cover;
  border-radius:10px;
  background:#263852;
}
.smart-result b{
  display:block;
  color:#fff;
  margin-bottom:4px;
}
.smart-result p{
  margin:3px 0;
  color:#dbeafe;
  font-size:13px;
}
.smart-alt{
  opacity:.8;
}
.light-mode .smart-suggest-box{
  background:#fff;
  border-color:#e5e7eb;
}
.light-mode .smart-head,
.light-mode .smart-loading,
.light-mode .smart-empty,
.light-mode .smart-result p{
  color:#475569;
}
.light-mode .smart-head b,
.light-mode .smart-result b{
  color:#111;
}
.light-mode .smart-result{
  background:#f1f5f9;
}

.smart-hint{
  margin:4px 2px 0;
  color:#dbeafe;
  font-size:12px;
  opacity:.85;
}
.light-mode .smart-hint{
  color:#475569;
}

/* Related Season Online */
.related-season-tools{
  margin-top:14px;
  display:grid;
  gap:10px;
}
.related-season-results{
  display:grid;
  gap:10px;
  max-height:420px;
  overflow:auto;
  padding-right:2px;
}
.related-title{
  color:#dbeafe;
  font-weight:bold;
  padding:4px 2px;
}
.related-season-row{
  display:grid;
  grid-template-columns:54px 1fr auto;
  gap:10px;
  align-items:center;
  background:rgba(255,255,255,.06);
  border-radius:16px;
  padding:10px;
}
.related-season-row img{
  width:54px;
  height:76px;
  object-fit:cover;
  border-radius:10px;
  background:#263852;
}
.related-info b{
  display:block;
  color:#fff;
  margin-bottom:4px;
}
.related-info p{
  margin:3px 0;
  color:#dbeafe;
  font-size:13px;
}
.related-note{
  opacity:.85;
}
.related-season-row button{
  padding:10px 12px;
  border-radius:12px;
}
.light-mode .related-season-row{
  background:#f1f5f9;
}
.light-mode .related-info b{
  color:#111;
}
.light-mode .related-info p,
.light-mode .related-title{
  color:#475569;
}


/* Manual season tools + delete */
.season-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  min-width:130px;
}
.danger{
  background:#dc2626 !important;
  color:#fff !important;
}
.season-manual-tools{
  margin-top:14px;
  display:grid;
}
.season-manual-tools button{
  width:100%;
}
@media(max-width:600px){
  .season-row{
    align-items:stretch;
  }
  .season-actions{
    grid-template-columns:1fr;
    min-width:92px;
  }
}


/* Detail polish v16 */
.season-summary{
  margin: 4px 0 16px;
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  color: #dbeafe;
  font-weight: bold;
}
.season-main p{
  line-height: 1.45;
}
.season-tools{
  margin-top:14px;
  display:grid;
  gap:10px;
}
.season-tools button{
  width:100%;
}
.wjb-dup-group{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px;
  margin-bottom:12px;
  background:rgba(255,255,255,.04);
}
.wjb-dup-group h3{
  margin:0 0 8px;
  font-size:15px;
}
.wjb-dup-row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  padding:6px 0;
  cursor:pointer;
}
.wjb-dup-group button{
  width:100%;
  margin-top:8px;
}
.light-mode .wjb-dup-group{
  background:#f1f5f9;
  border-color:#e2e8f0;
}
.light-mode .season-summary{
  background:#f1f5f9;
  color:#475569;
}

#publicProfileContent{padding:10px;}


.season-modal-content{
    max-height:85vh;
    overflow-y:auto;
    position:relative;
}

.season-modal-close{
    position:sticky;
    top:10px;
    float:right;
    z-index:999;
    background:#ff3b3b;
    border:none;
    border-radius:12px;
    padding:8px 12px;
    color:#fff;
    cursor:pointer;
}


.season-close-btn{
  position:sticky;
  top:0;
  width:100%;
  margin-top:10px;
  background:#263852;
  z-index:10;
}
.light-mode .season-close-btn{
  background:#e5e7eb;
  color:#111;
}

.premium-tools{margin:15px 0}
#hallContent{display:grid;gap:12px}
.hall-card{background:rgba(255,255,255,.06);padding:12px;border-radius:14px}


/* New user guide */
.guide-box{
  background: rgba(0,180,255,.08);
  border: 1px solid rgba(0,180,255,.2);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 12px;
}
.guide-box h3{margin:0 0 12px;color:#fff;font-size:18px}
.guide-item{
  background: rgba(255,255,255,.05);
  border-radius:14px;padding:12px;margin-bottom:10px;
}
.guide-item b{display:block;margin-bottom:6px}
.guide-item p{margin:0;color:#dbeafe;font-size:14px;line-height:1.5}
.guide-tip{
  margin-top:8px;padding:10px;border-radius:12px;
  background:rgba(255,255,255,.05);color:#facc15;font-weight:bold;
}
.light-mode .guide-box{background:#eff6ff;border-color:#bfdbfe}
.light-mode .guide-item{background:#fff}
.light-mode .guide-box h3,.light-mode .guide-item b{color:#111}
.light-mode .guide-item p{color:#475569}
.settings-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}

.settings-box {
  background: #0e1b2e;
  padding: 25px;
  border-radius: 24px;
  width: 90%;
  max-width: 360px;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ===== WJB Admin Panel ===== */
.admin-btn{
  background: linear-gradient(135deg,#ffd66b,#ff9f1c);
  color:#1a1200;
  font-weight:800;
}
.admin-box{
  width:min(1100px,96vw);
  max-height:90vh;
  overflow:auto;
}
.admin-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0;
}
.admin-tabs button{width:auto;}
.admin-content{margin-top:10px;}
.admin-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:12px;
}
.admin-stats div{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:16px;
  text-align:center;
}
.admin-stats b{
  display:block;
  font-size:30px;
  margin-bottom:4px;
}
.admin-stats span{color:#dbeafe;}
.admin-note{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  background:rgba(56,189,248,.12);
  border:1px solid rgba(56,189,248,.25);
}
.admin-table-wrap{
  overflow:auto;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
}
.admin-table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}
.admin-table th,
.admin-table td{
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  text-align:left;
  vertical-align:top;
}
.admin-table th{
  background:rgba(255,255,255,.08);
  position:sticky;
  top:0;
}
.admin-table small,
.admin-table code{
  color:#dbeafe;
  word-break:break-all;
}
.admin-table button{width:auto; padding:8px 10px;}
.light-mode .admin-stats div,
.light-mode .admin-table-wrap,
.light-mode .admin-table th,
.light-mode .admin-table td{
  border-color:rgba(0,0,0,.10);
}
.light-mode .admin-stats div,
.light-mode .admin-table th{background:rgba(0,0,0,.04);}

/* ===== Activity Log Polish ===== */
.admin-log-table{min-width:860px;}
.action-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  background:rgba(148,163,184,.18);
  border:1px solid rgba(148,163,184,.28);
  color:#e5f1ff;
  white-space:nowrap;
}
.action-badge.success{
  background:rgba(34,197,94,.16);
  border-color:rgba(34,197,94,.35);
}
.action-badge.danger{
  background:rgba(239,68,68,.16);
  border-color:rgba(239,68,68,.35);
}
.action-badge.admin{
  background:rgba(250,204,21,.18);
  border-color:rgba(250,204,21,.38);
}
.log-main-title{font-weight:800;margin-bottom:6px;}
.log-summary{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px;}
.log-chip{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  font-size:12px;
  color:#dbeafe;
}
.log-detail-btn{width:auto!important;padding:6px 10px!important;font-size:12px;}
.log-json{
  margin-top:8px;
  padding:10px;
  border-radius:12px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  color:#dbeafe;
  white-space:pre-wrap;
  word-break:break-word;
  font-size:12px;
  max-width:420px;
}
.muted{color:#94a3b8;font-size:12px;}
.light-mode .action-badge{color:#0f172a;}
.light-mode .log-chip,
.light-mode .log-json{color:#334155;border-color:rgba(0,0,0,.10);}
.light-mode .log-json{background:rgba(0,0,0,.04);}

/* ===== Newly Added Item Focus ===== */
.just-added-card{
  position:relative;
  border-color:rgba(56,189,248,.75)!important;
  box-shadow:0 0 0 3px rgba(56,189,248,.22), 0 0 34px rgba(56,189,248,.34)!important;
  animation:wjbNewItemPulse 1.25s ease-in-out 5;
}
.new-item-badge{
  display:inline-block;
  margin-left:8px;
  padding:4px 8px;
  border-radius:999px;
  background:linear-gradient(135deg,#06b6d4,#2563eb);
  color:#fff;
  font-size:12px;
  font-weight:800;
  vertical-align:middle;
  white-space:nowrap;
}
@keyframes wjbNewItemPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.015);}
}

/* ===== Trending Explorer ===== */
.trend-menu-btn,
.trend-hero-btn{
  background:linear-gradient(135deg,#f59e0b,#ef4444,#2563eb)!important;
  color:#fff!important;
  font-weight:800;
  box-shadow:0 12px 28px rgba(245,158,11,.22);
}
.trend-hero-btn{
  width:100%;
  font-size:17px;
  padding:16px;
  border-radius:18px;
}
.trending-box{
  width:min(980px,94vw)!important;
  max-height:88vh;
  overflow:auto;
}
.trend-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:14px 0;
}
.trend-controls button{width:auto!important;min-width:92px;}
.trend-note{
  background:rgba(250,204,21,.12);
  border:1px solid rgba(250,204,21,.25);
  color:#fde68a;
  padding:10px 12px;
  border-radius:14px;
  margin:10px 0 14px;
  font-size:13px;
  line-height:1.5;
}
.trending-content{
  display:grid;
  gap:12px;
}
.trend-card{
  display:grid;
  grid-template-columns:54px 86px 1fr;
  gap:12px;
  background:rgba(15,23,42,.72);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:12px;
  align-items:flex-start;
}
.trend-rank{
  background:linear-gradient(135deg,#06b6d4,#2563eb);
  color:#fff;
  border-radius:14px;
  padding:10px 6px;
  text-align:center;
  font-weight:900;
  position:sticky;
  top:8px;
}
.trend-poster{
  width:86px;
  height:122px;
  object-fit:cover;
  border-radius:12px;
  background:#0f172a;
}
.trend-info h3{margin:4px 0 2px;font-size:18px;line-height:1.25;}
.trend-topline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:#bfdbfe;font-size:12px;}
.trend-alt{margin:2px 0;color:#93c5fd;font-size:13px;}
.trend-desc{margin:8px 0 0;color:#dbeafe;line-height:1.55;font-size:13px;}
.trend-score-row{display:flex;justify-content:space-between;gap:10px;margin:8px 0 6px;color:#e0f2fe;}
.trend-progress{height:9px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden;}
.trend-progress div{height:100%;background:linear-gradient(90deg,#22c55e,#06b6d4,#2563eb);border-radius:999px;}
.trend-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.trend-actions button{width:auto!important;padding:9px 12px!important;font-size:13px;}
.trend-load-more{width:100%;margin-top:14px;}
.trend-meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0;}
.trend-meta-grid div{background:rgba(255,255,255,.07);border:1px solid rgba(148,163,184,.18);border-radius:12px;padding:7px 8px;min-width:0;}
.trend-meta-grid small{display:block;color:#93c5fd;font-size:11px;margin-bottom:3px;}
.trend-meta-grid b{display:block;color:#f8fafc;font-size:13px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.light-mode .trend-meta-grid div{background:#f8fafc;border-color:#dbeafe;}
.light-mode .trend-meta-grid small{color:#2563eb;}
.light-mode .trend-meta-grid b{color:#0f172a;}

.trend-loading{text-align:center;padding:28px;color:#dbeafe;background:rgba(255,255,255,.06);border-radius:18px;}
.light-mode .trend-card{background:#ffffff;border-color:#dbeafe;color:#0f172a;}
.light-mode .trend-desc,.light-mode .trend-score-row{color:#334155;}
.light-mode .trend-note{background:#fffbeb;color:#92400e;border-color:#fde68a;}
@media(max-width:640px){
  .trend-card{grid-template-columns:44px 70px 1fr;gap:9px;padding:10px;}
  .trend-poster{width:70px;height:100px;}
  .trend-info h3{font-size:15px;}
  .trend-desc{display:none;}
  .trend-actions{display:grid;grid-template-columns:1fr;}
  .trend-actions button{width:100%!important;}
  .trend-meta-grid{grid-template-columns:1fr;}
  .trend-controls{display:grid;grid-template-columns:1fr 1fr;}
  .trend-controls button{width:100%!important;min-width:0;}
}

.trend-section-label{margin:12px 0 6px;color:#bfdbfe;font-weight:700;font-size:14px;}
.trend-platform-controls{
  flex-wrap:nowrap!important;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
  scrollbar-width:thin;
}
.trend-platform-controls button{
  min-width:auto;
  flex:0 0 auto;
  padding:8px 14px!important;
  font-size:13px!important;
  border-radius:999px!important;
}
.trend-jump-hint{
  color:#93c5fd;
  font-size:12px;
  margin:2px 0 10px;
}
.light-mode .trend-jump-hint{color:#2563eb;}
.trend-platform{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:rgba(14,165,233,.18);border:1px solid rgba(125,211,252,.35);color:#e0f2fe;font-size:12px;font-weight:800;}
.light-mode .trend-section-label{color:#1d4ed8;}
.light-mode .trend-platform{background:#e0f2fe;border-color:#bae6fd;color:#075985;}

/* ===== Trending Keep Position / Added State ===== */
.trend-added-btn{
  background:linear-gradient(135deg,#16a34a,#22c55e)!important;
  color:#fff!important;
  cursor:default!important;
  opacity:1!important;
}
.trend-added-toast{
  display:none;
  position:sticky;
  top:0;
  z-index:20;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(34,197,94,.16);
  border:1px solid rgba(34,197,94,.35);
  color:#dcfce7;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  line-height:1.45;
}
.light-mode .trend-added-toast{
  background:#dcfce7;
  border-color:#86efac;
  color:#14532d;
}

/* ===== Bulk Delete Mode ===== */
.bulk-delete-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  background:rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.28);
  border-radius:18px;
  padding:14px;
  margin:0 0 15px;
}
.bulk-delete-bar p{
  margin:4px 0 0;
  color:#fecaca;
  font-size:13px;
}
.bulk-delete-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.bulk-delete-actions button{
  width:auto;
  padding:10px 12px;
}
.bulk-select-card{
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(239,68,68,.14);
  color:#fecaca;
  padding:10px 12px;
  font-weight:800;
  border-bottom:1px solid rgba(239,68,68,.25);
}
.bulk-select-card input{
  width:20px;
  height:20px;
}
.bulk-selected-card{
  border-color:rgba(239,68,68,.75)!important;
  box-shadow:0 0 0 3px rgba(239,68,68,.18), 0 10px 28px rgba(239,68,68,.18)!important;
}
/* ===== Long-press bulk-select feedback ===== */
.card.group-card{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card.group-card.long-press-active{
  transform:scale(.97);
  border-color:rgba(239,68,68,.6)!important;
  box-shadow:0 0 0 3px rgba(239,68,68,.14), 0 8px 22px rgba(239,68,68,.16)!important;
}
.light-mode .card.group-card.long-press-active{
  border-color:rgba(239,68,68,.45)!important;
}
.light-mode .bulk-delete-bar{
  background:#fff1f2;
  border-color:#fecdd3;
}
.light-mode .bulk-delete-bar p,
.light-mode .bulk-select-card{
  color:#9f1239;
}
.light-mode .bulk-select-card{
  background:#fff1f2;
  border-bottom-color:#fecdd3;
}
@media(max-width:640px){
  .bulk-delete-bar{
    display:grid;
  }
  .bulk-delete-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .bulk-delete-actions button{
    width:100%;
  }
}

/* ===== Trending Fast Browse / Compact View ===== */
.trend-fast-tools{
  display:grid;
  grid-template-columns:2fr auto 100px auto auto;
  gap:8px;
  align-items:center;
  margin:12px 0;
}
.trend-search,
.trend-jump-input{
  width:100%;
  box-sizing:border-box;
  background:#10233d;
  color:#fff;
}
.trend-result-count{
  color:#bfdbfe;
  font-size:13px;
  margin:4px 0 12px;
}
.compact-trending{
  gap:8px;
}
.compact-trending .trend-card,
.trend-card-compact{
  grid-template-columns:48px 42px 1fr;
  align-items:center;
  padding:8px 10px;
  border-radius:14px;
}
.compact-trending .trend-poster,
.trend-card-compact .trend-poster{
  width:42px;
  height:58px;
  border-radius:8px;
}
.compact-trending .trend-info h3,
.trend-card-compact .trend-info h3{
  font-size:14px;
  margin:2px 0;
}
.compact-trending .trend-desc,
.compact-trending .trend-progress,
.compact-trending .trend-score-row,
.compact-trending .trend-alt,
.trend-card-compact .trend-desc,
.trend-card-compact .trend-progress,
.trend-card-compact .trend-score-row,
.trend-card-compact .trend-alt{
  display:none;
}
.compact-trending .trend-meta-grid,
.trend-card-compact .trend-meta-grid{
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:5px;
  margin:4px 0;
}
.compact-trending .trend-meta-grid div,
.trend-card-compact .trend-meta-grid div{
  padding:4px 6px;
  border-radius:9px;
}
.compact-trending .trend-meta-grid small,
.trend-card-compact .trend-meta-grid small{
  display:none;
}
.compact-trending .trend-meta-grid b,
.trend-card-compact .trend-meta-grid b{
  font-size:11px;
}
.compact-trending .trend-actions,
.trend-card-compact .trend-actions{
  margin-top:5px;
}
.compact-trending .trend-actions button,
.trend-card-compact .trend-actions button{
  padding:7px 9px!important;
  font-size:12px;
}
.trend-jump-highlight{
  box-shadow:0 0 0 4px rgba(250,204,21,.45), 0 0 30px rgba(250,204,21,.35)!important;
  border-color:#facc15!important;
}
.light-mode .trend-search,
.light-mode .trend-jump-input{
  background:#f8fafc;
  color:#0f172a;
  border:1px solid #dbeafe;
}
.light-mode .trend-result-count{color:#1d4ed8;}
@media(max-width:640px){
  .trend-fast-tools{
    grid-template-columns:1fr 1fr;
  }
  .trend-search{
    grid-column:1 / -1;
  }
  .compact-trending .trend-card,
  .trend-card-compact{
    grid-template-columns:42px 34px 1fr;
    gap:7px;
  }
  .compact-trending .trend-poster,
  .trend-card-compact .trend-poster{
    width:34px;
    height:48px;
  }
  .compact-trending .trend-meta-grid,
  .trend-card-compact .trend-meta-grid{
    grid-template-columns:1fr 1fr;
  }
}


/* ===== My List Fast Browse + Floating Bulk Delete ===== */
.list-tools-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:-6px 0 12px;
}
.list-tools-bar button{
  width:auto;
  padding:10px 12px;
  font-size:13px;
}
.my-list-compact .grid{
  grid-template-columns:1fr;
  gap:10px;
}
.my-list-compact .group-card{
  display:grid;
  grid-template-columns:76px 1fr;
  gap:10px;
  align-items:stretch;
  padding:10px;
}
.my-list-compact .group-card .poster{
  width:76px;
  height:106px;
  border-radius:12px;
  object-fit:cover;
}
.my-list-compact .group-card .info{
  padding:0;
  min-width:0;
}
.my-list-compact .group-card .info h2{
  font-size:15px;
  margin:6px 0;
  line-height:1.25;
  border-left-width:4px;
}
.my-list-compact .group-card .info p{
  margin:3px 0;
  font-size:12px;
  line-height:1.25;
}
.my-list-compact .group-card .badge{
  padding:4px 8px;
  font-size:11px;
}
.my-list-compact .group-card .actions{
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:7px;
}
.my-list-compact .group-card .actions button{
  padding:8px 7px;
  font-size:12px;
  border-radius:10px;
}
.my-list-compact .group-card .progress-box{
  height:7px;
  margin:5px 0;
}
.my-list-compact .bulk-select-card{
  grid-column:1 / -1;
  margin:0 0 4px;
  padding:8px 10px;
}
.bulk-delete-floating{
  position:fixed;
  left:12px;
  right:12px;
  bottom:calc(92px + env(safe-area-inset-bottom, 0px) + 14px);
  z-index:2147483001;
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:space-between;
  padding:10px;
  border-radius:18px;
  background:rgba(7,17,31,.96);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 38px rgba(0,0,0,.45);
  backdrop-filter:blur(14px);
}
.bulk-delete-floating b{
  font-size:13px;
  white-space:nowrap;
}
.bulk-delete-floating button{
  width:auto;
  padding:9px 12px;
  font-size:13px;
  border-radius:12px;
}
.light-mode .bulk-delete-floating{
  background:rgba(255,255,255,.96);
  border-color:rgba(0,0,0,.12);
  color:#111;
}
@media(max-width:600px){
  .list-tools-bar{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .list-tools-bar button{width:100%;}
  .bulk-delete-floating{
    left:8px;
    right:8px;
    bottom:calc(88px + env(safe-area-inset-bottom, 0px) + 10px);
  }
  .bulk-delete-floating b{font-size:12px;}
  .bulk-delete-floating button{padding:9px 10px;font-size:12px;}
}


/* ===== WJB Personal AI / AI Brain v2 ===== */
.ai-menu-btn,
.ai-hero-btn{
  background:linear-gradient(135deg,#8b5cf6,#2563eb,#06b6d4)!important;
  color:#fff!important;
  font-weight:900;
  box-shadow:0 12px 28px rgba(139,92,246,.22);
}
.ai-hero-btn{width:100%;font-size:17px;padding:16px;border-radius:18px;}
.ai-box{width:min(980px,94vw)!important;max-height:88vh;overflow:auto;}
.ai-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
.ai-tabs button{width:auto!important;}
.personal-ai-content{display:grid;gap:12px;}
.ai-taste-box,.ai-select-box,.ai-next-watch{
  background:rgba(139,92,246,.12);
  border:1px solid rgba(167,139,250,.28);
  border-radius:18px;
  padding:14px;
}
.ai-taste-box p,.ai-select-box p{margin:8px 0 0;color:#dbeafe;line-height:1.55;}
.ai-select-box{display:grid;gap:8px;}
.ai-select-box select{width:100%;background:#10233d;color:#fff;}
.ai-rec-card{
  display:grid;
  grid-template-columns:54px 86px 1fr;
  gap:12px;
  background:rgba(15,23,42,.72);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:12px;
  align-items:flex-start;
}
.ai-rec-rank{background:linear-gradient(135deg,#8b5cf6,#06b6d4);color:#fff;border-radius:14px;padding:10px 6px;text-align:center;font-weight:900;}
.ai-rec-card img{width:86px;height:122px;object-fit:cover;border-radius:12px;background:#0f172a;}
.ai-rec-info h3{margin:4px 0 2px;font-size:18px;line-height:1.25;}
.ai-rec-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:#bfdbfe;font-size:12px;}
.ai-match{display:grid;gap:4px;background:rgba(255,255,255,.07);border:1px solid rgba(148,163,184,.18);border-radius:12px;padding:8px 10px;margin:8px 0;}
.ai-match b{color:#f8fafc;font-size:17px;}
.ai-match span{color:#bfdbfe;font-size:13px;}
.ai-match-bar{height:9px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden;}
.ai-match-bar div{height:100%;background:linear-gradient(90deg,#8b5cf6,#06b6d4,#22c55e);border-radius:999px;}
.ai-desc{margin:8px 0 0;color:#dbeafe;line-height:1.55;font-size:13px;}
.ai-mood-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;}
.ai-mood-grid div{background:rgba(255,255,255,.07);border:1px solid rgba(148,163,184,.18);border-radius:16px;padding:12px;}
.ai-mood-grid p{margin:6px 0 0;color:#dbeafe;line-height:1.45;}
.light-mode .ai-rec-card,.light-mode .ai-taste-box,.light-mode .ai-select-box,.light-mode .ai-next-watch,.light-mode .ai-mood-grid div{background:#ffffff;border-color:#dbeafe;color:#0f172a;}
.light-mode .ai-taste-box p,.light-mode .ai-select-box p,.light-mode .ai-desc,.light-mode .ai-mood-grid p{color:#334155;}
.light-mode .ai-select-box select{background:#f8fafc;color:#0f172a;}
.light-mode .ai-match{background:#f8fafc;border-color:#dbeafe;}
.light-mode .ai-match b{color:#0f172a;}.light-mode .ai-match span{color:#334155;}
@media(max-width:640px){
  .ai-rec-card{grid-template-columns:44px 70px 1fr;gap:9px;padding:10px;}
  .ai-rec-card img{width:70px;height:100px;}
  .ai-rec-info h3{font-size:15px;}
  .ai-desc{display:none;}
  .ai-tabs{display:grid;grid-template-columns:1fr 1fr;}
  .ai-tabs button{width:100%!important;}
}

/* ===== WJB Guardian AI ===== */
.guardian-menu-btn{
  background:linear-gradient(135deg,#10b981,#0ea5e9,#6366f1)!important;
  color:#fff!important;
  font-weight:800;
}
.guardian-box{
  width:min(900px,94vw)!important;
  max-height:88vh;
  overflow:auto;
}
.guardian-actions{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
}
.guardian-summary{
  display:grid;
  gap:5px;
  padding:14px;
  border-radius:18px;
  background:rgba(14,165,233,.13);
  border:1px solid rgba(125,211,252,.28);
  color:#e0f2fe;
}
.guardian-summary span{font-size:13px;color:#bfdbfe;}
.guardian-summary.ok{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.32);}
.guardian-summary.warn{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.34);}
.guardian-summary.error{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.34);}
.guardian-content{display:grid;gap:10px;}
.guardian-loading{
  padding:18px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  color:#dbeafe;
  text-align:center;
}
.guardian-row{
  border-radius:16px;
  padding:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.guardian-row.ok{border-left:5px solid #22c55e;}
.guardian-row.warn{border-left:5px solid #f59e0b;}
.guardian-row.error{border-left:5px solid #ef4444;}
.guardian-row-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.guardian-row-head span{
  padding:4px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  font-size:12px;
  color:#dbeafe;
}
.guardian-row p{margin:8px 0 0;color:#dbeafe;line-height:1.45;}
.guardian-fix{
  margin-top:9px;
  padding:9px 10px;
  border-radius:12px;
  background:rgba(250,204,21,.12);
  border:1px solid rgba(250,204,21,.22);
  color:#fde68a;
  font-size:13px;
  line-height:1.45;
}
.guardian-note{
  font-size:12px;
  color:#94a3b8;
  line-height:1.45;
  padding:10px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
}
.guardian-history{
  margin-top:12px;
  display:grid;
  gap:8px;
}
.guardian-history h3{margin:4px 0;}
.guardian-history-item{
  padding:9px 10px;
  border-radius:12px;
  background:rgba(15,23,42,.7);
  color:#dbeafe;
  font-size:13px;
}
.light-mode .guardian-summary,
.light-mode .guardian-row,
.light-mode .guardian-loading,
.light-mode .guardian-note{
  background:#f8fafc;
  color:#0f172a;
  border-color:#dbeafe;
}
.light-mode .guardian-summary span,
.light-mode .guardian-row p,
.light-mode .guardian-row-head span,
.light-mode .guardian-history-item{color:#334155;}
.light-mode .guardian-history-item{background:#f1f5f9;}
.light-mode .guardian-fix{background:#fffbeb;color:#92400e;border-color:#fde68a;}

/* ===== Guardian AI v2: Health Dashboard + Auto Fix ===== */
.guardian-dashboard{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
  margin:10px 0;
}
.guardian-health-card{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(148,163,184,.20);
  border-radius:16px;
  padding:12px;
  display:grid;
  gap:4px;
}
.guardian-health-card small{color:#bfdbfe;font-weight:700;}
.guardian-health-card b{font-size:26px;line-height:1;}
.guardian-health-card span{font-size:12px;color:#dbeafe;line-height:1.35;}
.guardian-health-card.ok{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.12);}
.guardian-health-card.warn{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.12);}
.guardian-health-card.error{border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.12);}
.guardian-fix-main{
  background:linear-gradient(135deg,#22c55e,#0ea5e9)!important;
  font-weight:900;
}
.guardian-fix-report{
  border-left-color:#22c55e!important;
  box-shadow:0 0 0 2px rgba(34,197,94,.10);
}
.light-mode .guardian-health-card{
  background:#f8fafc;
  border-color:#dbeafe;
}
.light-mode .guardian-health-card small{color:#1d4ed8;}
.light-mode .guardian-health-card span{color:#334155;}

/* ===== WJB Control Center v1 ===== */
.control-menu-btn{
  background:linear-gradient(135deg,#8b5cf6,#2563eb)!important;
  color:#fff!important;
  font-weight:800;
}
.control-center-box{
  width:min(1050px,96vw)!important;
  max-height:90vh;
  overflow:auto;
}
.control-center-content{display:grid;gap:14px;}
.control-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
}
.control-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:16px;
  display:grid;
  gap:10px;
}
.control-card h3{margin:0 0 6px;}
.control-toggle{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:flex-start;
  padding:10px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
}
.control-toggle input{width:20px;height:20px;margin-top:1px;}
.control-toggle span{font-weight:800;}
.control-toggle small{
  grid-column:2;
  color:#bfdbfe;
  line-height:1.35;
}
.control-field{display:grid;gap:6px;}
.control-field span{font-weight:800;color:#dbeafe;}
.control-field textarea,
.control-config-box{
  width:100%;
  box-sizing:border-box;
  min-height:90px;
  background:#10233d;
  color:#fff;
  border:0;
  border-radius:14px;
  padding:12px;
  font-family:inherit;
}
.control-mini-report{
  background:rgba(0,0,0,.18);
  border-radius:14px;
  padding:12px;
}
.control-mini-report p{margin:5px 0;color:#dbeafe;}
.control-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  background:rgba(255,255,255,.04);
  border-radius:18px;
  padding:12px;
}
.control-actions button{width:auto;}
.control-config-box{min-height:120px;}
.system-update-banner{
  position:sticky;
  top:0;
  z-index:5000;
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  color:#fff;
  padding:10px 14px;
  text-align:center;
  font-weight:800;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}
.wjb-maintenance .form-box,
.wjb-maintenance .backup{
  outline:2px dashed rgba(245,158,11,.55);
}
.light-mode .control-card,
.light-mode .control-toggle,
.light-mode .control-mini-report{
  background:#f8fafc;
  border-color:#dbeafe;
  color:#111;
}
.light-mode .control-toggle small,
.light-mode .control-field span,
.light-mode .control-mini-report p{color:#475569;}
.light-mode .control-field textarea,
.light-mode .control-config-box{background:#f1f5f9;color:#111;}
@media(max-width:640px){
  .control-actions{display:grid;grid-template-columns:1fr 1fr;}
  .control-actions button{width:100%;}
}


/* ===== Brother AI real chat ===== */
.brother-ai-menu-btn{
  background:linear-gradient(135deg,#a855f7,#06b6d4,#2563eb)!important;
  color:#fff!important;
  font-weight:900;
}
.brother-ai-box{
  width:min(760px,94vw)!important;
  max-height:90vh;
  overflow:auto;
}
.brother-ai-tools{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;
}
.brother-ai-chat{
  min-height:260px;
  max-height:48vh;
  overflow:auto;
  padding:12px;
  border-radius:18px;
  background:rgba(2,6,23,.45);
  border:1px solid rgba(148,163,184,.18);
  display:grid;
  gap:10px;
}
.brother-ai-msg{
  padding:11px 13px;
  border-radius:16px;
  line-height:1.55;
  white-space:pre-wrap;
  word-break:break-word;
}
.brother-ai-msg.user{
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  margin-left:10%;
}
.brother-ai-msg.assistant{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  margin-right:7%;
}
.brother-ai-msg.system{
  background:rgba(250,204,21,.12);
  border:1px solid rgba(250,204,21,.25);
  color:#fde68a;
  font-size:13px;
}
.brother-ai-compose{
  display:grid;
  gap:8px;
}
.brother-ai-compose textarea{
  min-height:86px;
}
.brother-ai-note{
  color:#facc15;
  font-size:12px;
  line-height:1.45;
  background:rgba(250,204,21,.10);
  padding:9px 11px;
  border-radius:12px;
}
.light-mode .brother-ai-chat{background:#f8fafc;border-color:#dbeafe;}
.light-mode .brother-ai-msg.assistant{background:#fff;color:#0f172a;border-color:#dbeafe;}
.light-mode .brother-ai-msg.system{background:#fffbeb;color:#92400e;}


/* WJB Free Only v3 */
.wjb-smart-filter-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 14px;padding:10px;border:1px solid rgba(148,163,184,.25);border-radius:14px;background:rgba(15,23,42,.04)}
.wjb-smart-filter-bar button.active-filter{font-weight:700;box-shadow:0 0 0 2px rgba(59,130,246,.18) inset}
.wjb-doctor-list{display:grid;gap:10px;margin:12px 0}
.wjb-doctor-item{display:flex;gap:8px;align-items:flex-start;flex-direction:column;border:1px solid rgba(148,163,184,.3);border-radius:14px;padding:10px;background:rgba(255,255,255,.65)}
.wjb-doctor-item input{margin-right:8px;transform:scale(1.15)}
.wjb-doctor-item b{display:block}
.wjb-doctor-item span{font-size:.92rem;opacity:.9}
.wjb-doctor-item small{font-size:.78rem;opacity:.7;word-break:break-all}
.wjb-dup-group{border-left:5px solid #f59e0b}


/* ===== WJB Floating Quick Tools Fix ===== */
.wjb-floating-quick-tools{
  position:fixed;
  left:50%;
  top:calc(10px + env(safe-area-inset-top));
  transform:translateX(-50%);
  z-index:5100;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  padding:8px;
  border-radius:18px;
  background:rgba(7,17,31,.94);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 38px rgba(0,0,0,.45);
  backdrop-filter:blur(14px);
  max-width:min(560px, calc(100vw - 16px));
}
.wjb-floating-quick-tools.with-bulk{
  top:calc(10px + env(safe-area-inset-top));
}
.wjb-floating-quick-tools button{
  width:auto;
  min-width:118px;
  padding:10px 12px;
  font-size:13px;
  border-radius:12px;
  margin:0;
}
.light-mode .wjb-floating-quick-tools{
  background:rgba(255,255,255,.96);
  border-color:rgba(0,0,0,.12);
  color:#111;
}
@media(max-width:600px){
  .wjb-floating-quick-tools{
    left:8px;
    right:8px;
    top:calc(8px + env(safe-area-inset-top));
    transform:none;
    justify-content:space-between;
  }
  .wjb-floating-quick-tools.with-bulk{
    top:calc(8px + env(safe-area-inset-top));
  }
  .wjb-floating-quick-tools button{
    flex:1;
    min-width:0;
    padding:10px 8px;
    font-size:12px;
  }
}

/* PWA install button */
.pwa-install-box{text-align:center}
.pwa-install-logo{width:96px;height:96px;border-radius:24px;display:block;margin:12px auto;box-shadow:0 0 24px rgba(0,170,255,.45)}
.pwa-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 12px}
.pwa-choice-btn{margin:0;border-radius:16px;padding:14px 10px;font-weight:800}
.pwa-choice-btn.primary{background:linear-gradient(135deg,#06b6d4,#2563eb);color:#06121f}
.pwa-choice-btn.secondary{background:rgba(148,163,184,.18);color:inherit;border:1px solid rgba(255,255,255,.14)}
.pwa-status-box{display:inline-flex;gap:6px;align-items:center;justify-content:center;margin:6px auto 12px;padding:10px 14px;border-radius:999px;background:rgba(14,165,233,.16);border:1px solid rgba(56,189,248,.28);font-weight:700}
@media(max-width:520px){.pwa-choice-grid{grid-template-columns:1fr}.pwa-choice-btn{width:100%}}
.pwa-menu-btn{
  background:linear-gradient(135deg,#00c8ff,#1f6bff)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 10px 28px rgba(0,160,255,.22);
}

/* ===== Premium Consumer UI v5 — WatchJettaphon redesign ===== */
:root{
  --wj-bg:#050b18;
  --wj-panel:rgba(7,18,36,.76);
  --wj-panel-2:rgba(12,27,52,.70);
  --wj-line:rgba(34,211,238,.30);
  --wj-cyan:#22d3ee;
  --wj-blue:#2563eb;
  --wj-violet:#a855f7;
  --wj-red:#fb4664;
  --wj-text:#f8fbff;
  --wj-muted:#8fa3c6;
}
body{
  background:
    radial-gradient(circle at 18% -8%, rgba(34,211,238,.22), transparent 34%),
    radial-gradient(circle at 105% 18%, rgba(168,85,247,.20), transparent 34%),
    linear-gradient(180deg,#020817 0%,#071120 48%,#030814 100%) !important;
  color:var(--wj-text);
}
.app{max-width:960px;padding:18px 16px 34px;}
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 0%,rgba(34,211,238,.25),transparent 30%),
    radial-gradient(circle at 100% 65%,rgba(168,85,247,.22),transparent 34%),
    linear-gradient(135deg,rgba(14,165,233,.18),rgba(37,99,235,.14),rgba(9,18,38,.92)) !important;
  border:1px solid rgba(34,211,238,.20);
  box-shadow:0 22px 70px rgba(37,99,235,.24), inset 0 0 0 1px rgba(255,255,255,.04);
  padding:34px 28px;
  border-radius:32px;
}
.hero::before{
  content:"";position:absolute;inset:-2px;
  background:linear-gradient(120deg,rgba(34,211,238,.30),transparent 36%,rgba(168,85,247,.32));
  opacity:.38;pointer-events:none;
}
.hero h1{position:relative;font-size:clamp(34px,8vw,54px);letter-spacing:.2px;text-shadow:0 0 30px rgba(34,211,238,.18);}
.hero p{position:relative;color:#d8e7ff;font-size:16px;}
.menu-toggle{
  top:28px!important;right:28px!important;width:68px!important;height:68px!important;border-radius:28px!important;
  background:rgba(9,18,38,.78)!important;border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.35),0 0 22px rgba(37,99,235,.18)!important;
  backdrop-filter:blur(16px);z-index:20;
}
.stats{position:relative;grid-template-columns:repeat(3,1fr);gap:12px;}
.stat-card,.stats button,.stats div{
  border-radius:18px!important;background:rgba(4,13,28,.78)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:inset 0 0 24px rgba(37,99,235,.08);
}
.stat-card b{font-size:26px;margin-left:6px;}
.auth-box,.form-box,.view-bar,.guide-box,.bulk-delete-bar,.smart-suggest-box{
  background:rgba(7,18,36,.78)!important;
  border:1px solid rgba(34,211,238,.18)!important;
  box-shadow:0 22px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03)!important;
  backdrop-filter:blur(18px);
}
.form-box{border-radius:30px!important;padding:24px!important;}
input,select,textarea,.search{
  background:rgba(255,255,255,.95)!important;
  color:#111827!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 10px 25px rgba(0,0,0,.16)!important;
}
button{font-weight:800;letter-spacing:.1px;}
button.gray,.gray{
  background:rgba(30,45,70,.88)!important;color:#f8fbff!important;border:1px solid rgba(255,255,255,.08)!important;
}
.trend-hero-btn,.ai-hero-btn,#saveBtn{
  background:linear-gradient(135deg,#0ea5e9,#2563eb,#7c3aed)!important;
  box-shadow:0 0 34px rgba(37,99,235,.26)!important;
}
.grid{gap:18px;}
.card,.group-card{
  background:rgba(7,18,36,.76)!important;
  border:1px solid rgba(34,211,238,.16)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.32),0 0 28px rgba(168,85,247,.08)!important;
  border-radius:28px!important;overflow:hidden;
}
.badge{border-radius:999px!important;}
.type-filter button,.filter-chip,.type-filter-bar button{
  border-radius:999px!important;
}

/* premium quick tools moved high and safe */
.list-tools-bar,.wjb-floating-quick-tools{
  position:sticky!important;top:10px!important;z-index:80!important;
  display:grid!important;grid-template-columns:1fr 1fr;gap:12px!important;
  margin:12px 0 18px!important;padding:10px!important;border-radius:24px!important;
  background:rgba(5,13,30,.72)!important;border:1px solid rgba(34,211,238,.16)!important;
  backdrop-filter:blur(18px);box-shadow:0 18px 42px rgba(0,0,0,.28)!important;
}
.list-tools-bar button,.wjb-floating-quick-tools button{
  min-height:54px!important;border-radius:18px!important;font-size:16px!important;
  background:linear-gradient(135deg,rgba(14,165,233,.22),rgba(37,99,235,.20),rgba(168,85,247,.18))!important;
  border:1px solid rgba(34,211,238,.22)!important;box-shadow:inset 0 0 22px rgba(34,211,238,.06)!important;
}

/* Premium normal-user menu; admin/internal tools hidden unless admin */
.premium-user-menu.menu-panel{
  position:fixed!important;inset:18px 12px auto 12px!important;top:max(16px,env(safe-area-inset-top))!important;
  width:auto!important;max-width:520px!important;margin:0 auto!important;max-height:calc(100svh - 32px)!important;overflow:auto!important;
  padding:26px 20px 22px!important;border-radius:34px!important;
  background:
    radial-gradient(circle at 78% 18%,rgba(34,211,238,.10),transparent 30%),
    radial-gradient(circle at 95% 76%,rgba(168,85,247,.14),transparent 34%),
    rgba(4,12,26,.92)!important;
  border:1px solid rgba(34,211,238,.24)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.03), inset 0 0 60px rgba(37,99,235,.06)!important;
  /* backdrop-filter:blur(24px) removed on 2026-07-04: this drawer is fixed,
     scrollable, and wraps the <details> accordion menu. On real iOS Safari,
     backdrop-filter forces the browser to recomposite the blurred region on
     every layout change behind/inside it — including the accordion opening
     and closing — which is what caused the freeze/lag when tapping the +
     buttons. Background is already near-opaque (.92 alpha), so it still
     reads as a solid panel without the blur. */
  display:none!important;gap:12px!important;
}
.premium-user-menu.open{display:grid!important;}
.premium-menu-handle{width:72px;height:7px;border-radius:99px;background:linear-gradient(90deg,rgba(37,99,235,.65),rgba(168,85,247,.65));margin:0 auto 8px;opacity:.85;}
.premium-profile-card{
  display:grid!important;grid-template-columns:88px 1fr!important;gap:18px!important;align-items:center!important;
  margin:8px 0 18px!important;padding:22px!important;border-radius:28px!important;
  background:radial-gradient(circle at 100% 20%,rgba(34,211,238,.22),transparent 30%),linear-gradient(135deg,rgba(15,35,70,.75),rgba(7,15,30,.72))!important;
  border:1px solid rgba(34,211,238,.22)!important;box-shadow:0 0 34px rgba(37,99,235,.18), inset 0 0 36px rgba(255,255,255,.03)!important;
}
.menu-avatar{width:88px!important;height:88px!important;border-radius:50%!important;object-fit:cover!important;border:4px solid rgba(34,211,238,.85)!important;box-shadow:0 0 26px rgba(34,211,238,.45)!important;}
.premium-profile-info b{font-size:26px;line-height:1.1;display:block;}
.premium-profile-info .muted{font-size:14px;color:rgba(219,234,254,.70)!important;margin:8px 0 10px;word-break:break-all;}
.menu-role-badge{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;background:rgba(37,99,235,.20);border:1px solid rgba(34,211,238,.22);color:#dff7ff;font-weight:800;}
.menu-section-title{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;color:#38bdf8;font-weight:900;margin:8px 0 4px;}
.menu-section-title span{height:1px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.35),transparent);}
.admin-title{color:#fbbf24;}
.premium-menu-item{
  width:100%!important;display:grid!important;grid-template-columns:58px 1fr 22px!important;align-items:center!important;gap:14px!important;
  text-align:left!important;padding:15px 16px!important;min-height:78px!important;border-radius:20px!important;
  background:linear-gradient(135deg,rgba(15,35,70,.78),rgba(7,15,30,.70))!important;
  border:1px solid rgba(34,211,238,.18)!important;box-shadow:inset 0 0 28px rgba(37,99,235,.06),0 10px 30px rgba(0,0,0,.18)!important;
  margin-top:0!important;color:#fff!important;
}
.premium-menu-item em{font-style:normal;font-size:38px;line-height:1;color:rgba(255,255,255,.68);justify-self:end;}
.premium-menu-text b{font-size:21px;display:block;line-height:1.2;}
.premium-menu-text small{font-size:13px;display:block;color:rgba(219,234,254,.62);margin-top:5px;line-height:1.28;font-weight:600;}
.premium-menu-icon{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;font-size:24px;background:rgba(34,211,238,.10);box-shadow:0 0 22px rgba(34,211,238,.16);}
.icon-list{background:rgba(34,211,238,.13);}
.icon-people{background:rgba(168,85,247,.13);}
.icon-fire{background:rgba(244,63,94,.12);}
.icon-phone{background:rgba(20,184,166,.12);}
.icon-gear{background:rgba(148,163,184,.14);}
.icon-logout{background:rgba(248,113,113,.10);color:#fb7185;}
.logout-item{border-color:rgba(251,70,100,.35)!important;background:linear-gradient(135deg,rgba(80,20,38,.66),rgba(14,15,32,.74))!important;color:#fb7185!important;}
.logout-item .premium-menu-text b{color:#fb7185!important;}
.menu-safe-note{margin:8px 0 0;text-align:center;color:#60a5fa;font-weight:700;}
@media(max-width:560px){
  .app{padding:14px 10px 28px;}
  .hero{padding:30px 18px;border-radius:30px;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .premium-user-menu.menu-panel{inset:10px 8px auto 8px!important;max-height:calc(100svh - 20px)!important;padding:20px 14px!important;border-radius:28px!important;}
  .premium-profile-card{grid-template-columns:74px 1fr!important;padding:18px!important;}
  .menu-avatar{width:74px!important;height:74px!important;}
  .premium-profile-info b{font-size:22px;}
  .premium-menu-item{grid-template-columns:50px 1fr 18px!important;min-height:70px!important;padding:13px!important;}
  .premium-menu-icon{width:46px;height:46px;font-size:21px;border-radius:16px;}
  .premium-menu-text b{font-size:18px;}
}


/* WJB v5.3 Free/Admin Lock: ซ่อนเครื่องมือผู้ดูแลจากผู้ใช้ทั่วไปแบบซ้อนอีกชั้น */
body:not(.wjb-admin) .admin-only-menu,
body:not(.wjb-admin) .admin-btn,
body:not(.wjb-admin) .guardian-menu-btn,
body:not(.wjb-admin) .brother-ai-menu-btn,
body:not(.wjb-admin) .control-menu-btn,
body:not(.wjb-admin) #adminMenuBtn,
body:not(.wjb-admin) #controlCenterMenuBtn {
  display: none !important;
  pointer-events: none !important;
}

body.wjb-admin .admin-only-menu {
  display: block;
}

/* Neon blue-purple mood lock */
:root{
  --wjb-neon-blue:#00b4ff;
  --wjb-neon-purple:#7c3cff;
  --wjb-deep:#07111f;
}
.hero, .trend-hero-btn, .ai-hero-btn{
  box-shadow: 0 18px 55px rgba(0,180,255,.22), 0 0 38px rgba(124,60,255,.18);
}
button:not(.gray):not(.favorite):not(.danger){
  background: linear-gradient(135deg, var(--wjb-neon-blue), var(--wjb-neon-purple));
}


/* ===== WJB v5.7 Launch Choice replaces old PWA Ready page ===== */
.wjb-launch-screen{
  position:fixed;
  inset:0;
  z-index:999999;
  min-height:100svh;
  overflow:auto;
  padding:calc(22px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  background:
    radial-gradient(circle at 50% 16%, rgba(37,99,235,.38), transparent 24%),
    radial-gradient(circle at 88% 38%, rgba(168,85,247,.25), transparent 26%),
    radial-gradient(circle at 12% 24%, rgba(34,211,238,.16), transparent 24%),
    linear-gradient(180deg,#020817 0%,#07112a 46%,#030814 100%);
  color:#f8fbff;
  isolation:isolate;
  transition:opacity .32s ease, transform .32s ease;
}
.wjb-launch-screen.is-hiding{opacity:0;transform:scale(1.015);pointer-events:none}
.wjb-launch-screen::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(34,211,238,.12) 49% 50%, transparent 51% 100%),
    radial-gradient(circle at 50% 34%, rgba(34,211,238,.20), transparent 13%),
    radial-gradient(ellipse at 50% 34%, rgba(168,85,247,.35), transparent 28%);
  opacity:.72;
}
.wjb-launch-screen::after{
  content:"";
  position:absolute;
  left:50%;top:190px;
  width:min(76vw,560px);height:130px;
  transform:translateX(-50%);
  border-radius:50%;
  border:1px solid rgba(34,211,238,.30);
  box-shadow:0 0 34px rgba(34,211,238,.28), inset 0 0 30px rgba(168,85,247,.24);
  z-index:-1;
}
.wjb-launch-bg-orb{position:absolute;border-radius:999px;filter:blur(18px);opacity:.5;z-index:-1}
.wjb-launch-bg-orb.one{width:260px;height:260px;background:#0ea5e9;left:-130px;top:110px}
.wjb-launch-bg-orb.two{width:280px;height:280px;background:#7c3aed;right:-150px;top:285px}
.wjb-launch-top{width:100%;max-width:880px;display:flex;align-items:flex-start;justify-content:space-between;margin:16px auto 18px;gap:14px}
.wjb-launch-chip{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;background:rgba(8,18,40,.78);border:1px solid rgba(56,189,248,.24);box-shadow:0 0 26px rgba(37,99,235,.22);font-weight:900;letter-spacing:2px;color:#eaf8ff}
.wjb-launch-safe{display:inline-flex;text-align:center;line-height:1.45;padding:13px 22px;border-radius:18px;transform:skewX(-6deg);background:linear-gradient(135deg,rgba(26,22,74,.86),rgba(10,18,38,.68));border:1px solid rgba(168,85,247,.25);box-shadow:0 0 28px rgba(168,85,247,.20);font-weight:800;color:#dce9ff}
.wjb-launch-logo-stage{position:relative;margin:2px auto 30px;width:170px;height:132px;display:grid;place-items:center}
.wjb-launch-ring{position:absolute;left:50%;bottom:-12px;width:310px;height:74px;transform:translateX(-50%);border-radius:50%;border:1px solid rgba(34,211,238,.28);box-shadow:0 0 34px rgba(56,189,248,.32),0 0 64px rgba(168,85,247,.22) inset}
.wjb-launch-logo{position:relative;width:138px;height:138px;border-radius:30px;object-fit:cover;box-shadow:0 0 0 1px rgba(56,189,248,.55),0 0 26px rgba(34,211,238,.48),0 20px 60px rgba(0,0,0,.55)}
.wjb-launch-title-wrap{text-align:center;width:100%;max-width:860px;margin:0 auto 26px}.wjb-launch-title-wrap h1{margin:0;font-size:clamp(38px,8vw,76px);line-height:1.05;letter-spacing:-1.6px;font-weight:950;background:linear-gradient(90deg,#fff 5%,#eaf7ff 62%,#7dd3fc 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 30px rgba(56,189,248,.18)}
.wjb-launch-line{display:flex;align-items:center;justify-content:center;margin:18px auto 14px;width:min(76vw,620px);height:16px;position:relative}.wjb-launch-line::before{content:"";height:1px;width:100%;background:linear-gradient(90deg,transparent,rgba(125,211,252,.86),transparent)}.wjb-launch-line span{position:absolute;width:34px;height:18px;background:linear-gradient(90deg,transparent 40%,#7dd3fc 42% 48%,transparent 50% 54%,#7dd3fc 56% 62%,transparent 64%);filter:drop-shadow(0 0 8px #38bdf8)}
.wjb-launch-title-wrap p{margin:0 auto;color:#dbeafe;font-size:clamp(18px,4.4vw,28px);line-height:1.55;font-weight:500}.wjb-launch-title-wrap p span{color:#67e8f9;font-weight:950;margin:0 5px;letter-spacing:2px}
.wjb-launch-card{width:100%;max-width:860px;margin:0 auto;padding:clamp(22px,5vw,46px);border-radius:34px;background:linear-gradient(180deg,rgba(6,17,37,.78),rgba(3,10,25,.90));border:1px solid rgba(34,211,238,.25);box-shadow:0 0 0 1px rgba(168,85,247,.14) inset,0 0 48px rgba(37,99,235,.18),0 40px 110px rgba(0,0,0,.45);backdrop-filter:blur(18px)}
.wjb-launch-choice{width:100%;min-height:112px;border:1px solid rgba(56,189,248,.55);border-radius:26px;margin:0 0 24px;padding:18px clamp(16px,4vw,34px);display:grid;grid-template-columns:90px 1fr 30px;align-items:center;gap:22px;text-align:left;color:#fff;cursor:pointer;position:relative;overflow:hidden;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}.wjb-launch-choice:hover,.wjb-launch-choice:active{transform:translateY(-2px) scale(1.006)}
.wjb-launch-choice::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.06),transparent 45%,rgba(255,255,255,.08));opacity:.75}.wjb-launch-choice.mobile{background:linear-gradient(135deg,rgba(4,56,104,.96),rgba(12,40,110,.78));box-shadow:0 0 24px rgba(14,165,233,.28),inset 0 0 30px rgba(37,99,235,.25)}.wjb-launch-choice.web{background:linear-gradient(135deg,rgba(46,16,101,.95),rgba(88,28,135,.72));border-color:rgba(192,132,252,.62);box-shadow:0 0 28px rgba(168,85,247,.30),inset 0 0 30px rgba(168,85,247,.22)}
.choice-icon{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;font-size:34px;font-weight:900;background:rgba(2,8,23,.45);box-shadow:0 0 0 1px rgba(255,255,255,.10) inset,0 0 22px rgba(34,211,238,.18);color:#7dd3fc}.web .choice-icon{color:#d8b4fe}.choice-text{position:relative;display:flex;flex-direction:column;gap:8px}.choice-text b{font-size:clamp(28px,6vw,42px);line-height:1;font-weight:950}.choice-text small{font-size:clamp(15px,3.8vw,22px);color:#b8c6dd;font-weight:600}.wjb-launch-choice i{font-style:normal;font-size:54px;font-weight:300;color:#bdefff;position:relative}.web i{color:#e9d5ff}
.wjb-launch-features{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:18px;border-top:1px solid rgba(148,163,184,.16);padding-top:24px}.wjb-launch-features span{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0;color:#dbeafe;border-right:1px solid rgba(148,163,184,.18);padding:0 10px}.wjb-launch-features span:last-child{border-right:0}.wjb-launch-features b{font-size:17px}.wjb-launch-features small{font-size:13px;color:#94a3b8}.wjb-launch-status{margin:22px 0 0;text-align:center;color:#8fb6da;font-size:14px;font-weight:700}
.pwa-choice-btn small{display:block;margin-top:4px;font-weight:700;opacity:.86}
@media(max-width:540px){.wjb-launch-screen{padding-left:14px;padding-right:14px}.wjb-launch-top{margin-top:10px}.wjb-launch-safe{font-size:13px;padding:10px 14px}.wjb-launch-chip{font-size:15px;padding:10px 16px}.wjb-launch-logo-stage{width:146px;height:112px;margin-bottom:22px}.wjb-launch-logo{width:112px;height:112px;border-radius:26px}.wjb-launch-ring{width:250px;height:58px}.wjb-launch-card{border-radius:30px;padding:20px 18px}.wjb-launch-choice{grid-template-columns:66px 1fr 22px;gap:14px;min-height:96px;border-radius:22px;padding:15px 16px;margin-bottom:18px}.choice-icon{width:58px;height:58px;border-radius:18px;font-size:28px}.wjb-launch-choice i{font-size:42px}.wjb-launch-features{gap:0;padding-top:18px}.wjb-launch-features b{font-size:13px}.wjb-launch-features small{font-size:11px}.wjb-launch-title-wrap{margin-bottom:20px}.wjb-launch-title-wrap p{font-size:17px}.wjb-launch-title-wrap h1{font-size:38px}}
@media(max-height:760px){.wjb-launch-logo-stage{margin-bottom:12px}.wjb-launch-title-wrap{margin-bottom:14px}.wjb-launch-choice{min-height:86px;margin-bottom:14px}.wjb-launch-card{padding-top:16px;padding-bottom:16px}.wjb-launch-features{padding-top:12px}.wjb-launch-status{margin-top:12px}.wjb-launch-title-wrap p{line-height:1.35}}

/* ===== WJB v5.5 Bug Fix + Title Flow UX ===== */
.wjb-title-flow-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:12px 0 12px;
}
.wjb-title-flow-actions button,
.smart-collapse-btn{
  width:100%;
  border-radius:18px;
  min-height:52px;
  border:1px solid rgba(56,189,248,.35);
  color:#eff6ff;
  font-weight:900;
  letter-spacing:.1px;
  box-shadow:0 12px 34px rgba(2,132,199,.18), inset 0 0 22px rgba(255,255,255,.05);
}
.wjb-use-title-btn{
  background:linear-gradient(135deg,#06b6d4,#2563eb 48%,#a855f7)!important;
  border-color:rgba(103,232,249,.66)!important;
  text-shadow:0 0 16px rgba(255,255,255,.32);
}
.wjb-search-again-btn{
  background:rgba(15,23,42,.72)!important;
  border-color:rgba(168,85,247,.42)!important;
}
.wjb-title-continue-notice{
  margin:10px auto 12px;
  padding:12px 14px;
  border-radius:999px;
  text-align:center;
  color:#bbf7d0;
  background:rgba(20,83,45,.22);
  border:1px solid rgba(34,197,94,.32);
  box-shadow:0 0 26px rgba(34,197,94,.12);
  font-weight:800;
}
.smart-head{
  gap:8px;
}
.smart-collapse-btn{
  max-width:170px;
  min-height:38px;
  padding:8px 12px;
  font-size:13px;
  background:linear-gradient(135deg,rgba(14,165,233,.55),rgba(168,85,247,.55))!important;
}
.smart-suggest-collapsed{
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:center;
  gap:10px;
  margin:10px 0 14px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(168,85,247,.38);
  background:linear-gradient(135deg,rgba(15,23,42,.80),rgba(30,41,59,.42));
  box-shadow:inset 0 0 20px rgba(59,130,246,.06),0 10px 28px rgba(0,0,0,.22);
  cursor:pointer;
  color:#dbeafe;
}
.smart-suggest-collapsed b{
  padding:3px 9px;
  border-radius:999px;
  color:#e9d5ff;
  background:rgba(126,34,206,.35);
  font-size:12px;
}
.smart-suggest-collapsed small{color:#aebdd6;}
.smart-suggest-collapsed em{font-style:normal;font-size:22px;color:#93c5fd;}

/* Fix: ปุ่มมุมมองย่อ/ขึ้นบนต้องแตะติด และปุ่มขึ้นบนต้องอยู่เหนือการ์ดรายการ */
.list-tools-bar{
  position:sticky!important;
  top:calc(8px + env(safe-area-inset-top))!important;
  z-index:1200!important;
  display:grid!important;
  grid-template-columns:1fr 1fr;
  gap:12px!important;
  margin:12px 0 18px!important;
  padding:10px!important;
  border-radius:24px!important;
  background:rgba(5,13,30,.86)!important;
  border:1px solid rgba(34,211,238,.22)!important;
  backdrop-filter:blur(18px);
  box-shadow:0 18px 42px rgba(0,0,0,.32)!important;
  pointer-events:auto!important;
}
/* v20.1: กล่องแท็ก ("แท็กทั้งหมด" + #แท็กต่างๆ) ที่ตอนนี้ใช้บอร์ดร่วมกับปุ่มเครื่องมือ
   (.list-tools-bar) ทั้งฝั่งอนิเมะและมังงะ — ฝั่งมังงะ #mangaTagFilterBar ถูกวางเป็นลูก
   อยู่ในกล่องเดียวกับปุ่มมุมมองย่อ/หาเรื่องซ้ำ/เช็คสุขภาพ จึงต้องกิน 2 คอลัมน์เต็มแถว
   แล้วห่อบรรทัดเอง (ไม่งั้นจะโดนบีบเป็น 1fr เท่าปุ่มอื่นแล้วแท็กล้น) */
.list-tools-bar .wjb-tools-bar-tags{
  grid-column:1 / -1!important;
  display:flex!important;
  flex-wrap:wrap;
  gap:8px;
  margin-top:2px;
}
.wjb-floating-quick-tools{
  position:fixed!important;
  left:8px!important;
  right:8px!important;
  top:calc(8px + env(safe-area-inset-top))!important;
  transform:none!important;
  z-index:9999!important;
  display:none;
  grid-template-columns:1fr 1fr;
  gap:12px!important;
  margin:0!important;
  padding:10px!important;
  border-radius:24px!important;
  background:rgba(5,13,30,.92)!important;
  border:1px solid rgba(34,211,238,.24)!important;
  backdrop-filter:blur(18px);
  box-shadow:0 18px 42px rgba(0,0,0,.36)!important;
  pointer-events:auto!important;
}
.list-tools-bar button,.wjb-floating-quick-tools button{
  pointer-events:auto!important;
  touch-action:manipulation;
  cursor:pointer;
}
@media(max-width:560px){
  .wjb-title-flow-actions{grid-template-columns:1fr;}
  .smart-suggest-collapsed{grid-template-columns:1fr auto;}
  .smart-suggest-collapsed small{grid-column:1 / -1;}
  .smart-collapse-btn{max-width:none;}
}


/* ===== WJB v5.7: force launch screen to replace old PWA Ready first page ===== */
body.wjb-launch-disabled{
  overflow:hidden;
  background:#020817;
}
body.wjb-launch-disabled #wjbMainAppShell{
  display:none!important;
}
body.wjb-launch-disabled .wjb-launch-screen{
  display:flex!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
}
.wjb-launch-screen{
  z-index:2147483000!important;
}
.wjb-launch-choice.mobile .choice-text b::after{
  content:"";
}

/* =========================================================
   WJB v5.9 Full UI Apply — real UI layer from approved concept
   ฟรี 100% · No OpenAI · Normal users never see admin tools
   ========================================================= */
:root{
  --wjb-bg:#030a18;
  --wjb-panel:rgba(8,18,40,.72);
  --wjb-panel2:rgba(12,24,52,.82);
  --wjb-line:rgba(56,189,248,.28);
  --wjb-cyan:#22d3ee;
  --wjb-blue:#2563eb;
  --wjb-purple:#8b5cf6;
  --wjb-pink:#ec4899;
  --wjb-text:#f8fbff;
  --wjb-muted:#b9c7dc;
}
html{scroll-behavior:smooth;}
body.wjb-v60, body{
  background:
    radial-gradient(circle at 20% 5%, rgba(34,211,238,.16), transparent 28%),
    radial-gradient(circle at 94% 16%, rgba(139,92,246,.20), transparent 34%),
    linear-gradient(180deg,#020713 0%,#071224 50%,#020713 100%) !important;
  color:var(--wjb-text);
}
body.wjb-v60::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px, transparent 1px);
  background-size:44px 44px;opacity:.25;
}
body.wjb-v60 .app{
  width:min(100%, 980px);
  padding:18px 18px 112px;
}
body.wjb-v60 button{cursor:pointer;}
body.wjb-v60 .hero.wjb-v60-home{
  position:relative;padding:0;margin:0 0 22px;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible;
}
.wjb-v60-topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:4px 0 18px;}
.wjb-v60-brand{display:flex;align-items:center;gap:16px;min-width:0;}
.wjb-v60-brand-logo{width:86px;height:86px;border-radius:22px;object-fit:cover;box-shadow:0 0 0 1px rgba(34,211,238,.35),0 0 32px rgba(34,211,238,.22);}
.wjb-v60-brand h1{margin:0;font-size:clamp(30px,7vw,58px);line-height:1;font-weight:950;letter-spacing:-1.2px;color:#fff;text-shadow:0 0 24px rgba(34,211,238,.20);}
.wjb-v60-brand h1 span{background:linear-gradient(90deg,#7dd3fc,#8b5cf6,#d946ef);-webkit-background-clip:text;background-clip:text;color:transparent;}
.wjb-v60-brand p{margin:8px 0 0;color:#dbeafe;font-size:clamp(13px,3.4vw,18px);}
.wjb-v60-menu{position:static!important;width:60px!important;height:60px!important;border-radius:18px!important;font-size:30px!important;background:rgba(8,18,40,.72)!important;border:1px solid rgba(139,92,246,.32)!important;box-shadow:0 0 26px rgba(139,92,246,.20)!important;color:#fff!important;}
.wjb-v60-hero-card{
  position:relative;overflow:hidden;border-radius:28px;padding:clamp(22px,5vw,54px);text-align:left;
  background:linear-gradient(135deg,rgba(7,20,44,.88),rgba(10,14,42,.72));
  border:1px solid rgba(56,189,248,.32);
  box-shadow:0 0 0 1px rgba(139,92,246,.16) inset,0 24px 80px rgba(0,0,0,.42),0 0 44px rgba(34,211,238,.10);
}
.wjb-v60-hero-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 32%,rgba(34,211,238,.34),transparent 21%),radial-gradient(circle at 100% 100%,rgba(236,72,153,.32),transparent 30%);opacity:.8;}
.wjb-v60-hero-card::after{content:"";position:absolute;right:4%;top:8%;width:260px;height:260px;border:18px solid rgba(148,163,184,.08);border-radius:50%;box-shadow:inset 0 0 0 24px rgba(0,0,0,.16),0 0 50px rgba(34,211,238,.12);}
.wjb-v60-hero-copy{position:relative;z-index:1;max-width:620px;}
.wjb-v60-pill{display:inline-flex;padding:8px 14px;border-radius:999px;background:rgba(14,165,233,.16);border:1px solid rgba(34,211,238,.34);color:#a5f3fc;font-weight:900;margin-bottom:14px;}
.wjb-v60-hero-copy h2{margin:0 0 14px;font-size:clamp(36px,8.8vw,70px);line-height:1.08;font-weight:950;letter-spacing:-1.4px;color:#fff;}
.wjb-v60-hero-copy h2 span{background:linear-gradient(90deg,#38bdf8,#8b5cf6,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent;}
.wjb-v60-hero-copy p{margin:0;color:#dce8ff;font-size:clamp(16px,4vw,22px);line-height:1.55;max-width:540px;}
.wjb-v60-hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;}
.wjb-v60-hero-actions button{min-height:68px;border-radius:18px;border:1px solid rgba(34,211,238,.35);background:linear-gradient(135deg,#0ea5e9,#2563eb 56%,#7c3aed);color:white;font-weight:950;font-size:18px;box-shadow:0 0 30px rgba(34,211,238,.22);}
.wjb-v60-hero-actions button.secondary{background:linear-gradient(135deg,rgba(23,37,84,.78),rgba(88,28,135,.62));border-color:rgba(217,70,239,.42);}
.wjb-v60-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0 18px;}
.wjb-v60-feature-grid button{display:grid;place-items:center;text-align:center;gap:8px;min-height:142px;padding:14px 10px;border-radius:22px;background:linear-gradient(180deg,rgba(7,20,44,.76),rgba(5,11,26,.86));border:1px solid rgba(56,189,248,.22);box-shadow:0 0 24px rgba(34,211,238,.08);color:white;}
.wjb-v60-feature-grid i{font-style:normal;font-size:36px;filter:drop-shadow(0 0 16px rgba(34,211,238,.28));}
.wjb-v60-feature-grid b{font-size:19px;}.wjb-v60-feature-grid small{font-size:13px;line-height:1.35;color:#bcd0ea;}
.wjb-v60-stats{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:16px!important;margin:18px 0!important;}
.wjb-v60-stats .stat-card{min-height:112px;text-align:left;display:grid!important;grid-template-columns:64px 1fr auto;align-items:center;gap:14px;border-radius:22px!important;background:linear-gradient(135deg,rgba(7,20,44,.82),rgba(10,13,37,.84))!important;border:1px solid rgba(56,189,248,.24)!important;box-shadow:0 0 26px rgba(34,211,238,.09)!important;color:#eaf6ff!important;font-size:18px!important;padding:16px!important;}
.wjb-v60-stats .stat-card span{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(14,165,233,.12);box-shadow:0 0 0 1px rgba(34,211,238,.25),0 0 20px rgba(34,211,238,.18);font-size:25px;}
.wjb-v60-stats .stat-card b{font-size:38px;color:#fff;text-align:right;text-shadow:0 0 18px rgba(34,211,238,.18);}
.wjb-v60-sample-card,.wjb-v60-tools,.auth-box,.form-box,.user-box,.view-bar,#backupBox,.backup{background:linear-gradient(180deg,rgba(7,18,39,.82),rgba(4,11,26,.92))!important;border:1px solid rgba(56,189,248,.22)!important;border-radius:26px!important;box-shadow:0 0 0 1px rgba(139,92,246,.10) inset,0 20px 70px rgba(0,0,0,.32),0 0 36px rgba(34,211,238,.08)!important;}
.wjb-v60-sample-card{padding:18px;margin:18px 0;}
.wjb-v60-sample-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;}.wjb-v60-sample-head b{font-size:22px}.wjb-v60-sample-head button{width:auto!important;padding:9px 14px!important;border-radius:999px!important;background:transparent!important;color:#93c5fd!important;border:1px solid rgba(147,197,253,.22)!important;}
.wjb-v60-sample-body{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;padding:14px;border-radius:22px;background:rgba(3,10,25,.52);border:1px solid rgba(56,189,248,.16);}.wjb-v60-sample-body img{width:150px;height:150px;object-fit:cover;border-radius:18px;box-shadow:0 0 28px rgba(34,211,238,.14);}.wjb-v60-sample-body h3{margin:0 0 4px;font-size:28px}.wjb-v60-sample-body span{display:inline-flex;background:rgba(139,92,246,.18);padding:5px 10px;border-radius:999px;color:#ddd6fe;margin-bottom:10px}.wjb-v60-sample-body p{margin:8px 0;color:#cbd5e1}.wjb-v60-sample-body p b{float:right;color:#fff;}
.wjb-v60-tools{padding:18px;margin:18px 0}.wjb-v60-tools h3{margin:0 0 14px;font-size:26px}.wjb-v60-tools button{display:grid!important;grid-template-columns:58px 1fr 28px;align-items:center;text-align:left;gap:14px;width:100%;border-radius:18px!important;padding:16px!important;margin:10px 0!important;background:rgba(15,23,42,.68)!important;border:1px solid rgba(56,189,248,.18)!important;color:white!important}.wjb-v60-tools button span{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(14,165,233,.28),rgba(124,58,237,.28));font-size:26px}.wjb-v60-tools small{display:block;color:#94a3b8;font-size:13px;margin-top:4px}.wjb-v60-tools em{font-style:normal;font-size:34px;color:#a78bfa;}
body.wjb-v60 .auth-box{padding:28px!important;margin:22px 0!important;}.auth-box #authTitle{font-size:clamp(28px,7vw,48px)!important;margin:0 0 8px!important}.wjb-v60-auth-sub{color:#cbd5e1;margin:0 0 20px;font-size:16px}.auth-switch{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;background:rgba(2,6,23,.45);border:1px solid rgba(56,189,248,.18);padding:8px;border-radius:20px;margin-bottom:18px}.auth-switch button{border-radius:15px!important;background:linear-gradient(135deg,#0ea5e9,#7c3aed)!important}.auth-switch button.gray{background:transparent!important;border-color:transparent!important;color:#cbd5e1!important}
body.wjb-v60 input,body.wjb-v60 select,body.wjb-v60 textarea,body.wjb-v60 .search{background:rgba(2,8,23,.58)!important;border:1px solid rgba(148,163,184,.24)!important;color:#f8fafc!important;border-radius:16px!important;min-height:56px;box-shadow:inset 0 0 0 1px rgba(56,189,248,.06)!important;}body.wjb-v60 input:focus,body.wjb-v60 select:focus,body.wjb-v60 textarea:focus{border-color:rgba(34,211,238,.75)!important;box-shadow:0 0 0 3px rgba(34,211,238,.10),0 0 24px rgba(34,211,238,.12)!important;outline:none!important;}
.wjb-v60-section-title{display:flex;gap:14px;align-items:center;margin-bottom:18px}.wjb-v60-section-title span{width:62px;height:62px;border-radius:19px;display:grid;place-items:center;font-size:34px;background:linear-gradient(135deg,#0ea5e9,#7c3aed);box-shadow:0 0 26px rgba(34,211,238,.25)}.wjb-v60-section-title h2{margin:0;font-size:32px}.wjb-v60-section-title p{margin:4px 0 0;color:#cbd5e1}.wjb-v60-form{padding:22px!important;}
.guide-box{border:1px solid rgba(56,189,248,.18)!important;background:rgba(8,18,40,.54)!important;border-radius:22px!important}.guide-tip{background:rgba(251,191,36,.10)!important;border-radius:16px;color:#fde68a!important;}
.trend-hero-btn,.ai-hero-btn,#saveBtn,.wjb-use-title-btn{background:linear-gradient(135deg,#0ea5e9,#2563eb 52%,#8b5cf6)!important;border:1px solid rgba(56,189,248,.34)!important;border-radius:18px!important;box-shadow:0 0 26px rgba(34,211,238,.18)!important;font-weight:900!important;}.ai-hero-btn{background:linear-gradient(135deg,#7c3aed,#ec4899)!important;}
.wjb-title-flow-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 14px}.wjb-title-flow-actions button{min-height:58px;border-radius:17px!important}.wjb-search-again-btn{background:rgba(15,23,42,.65)!important;border:1px solid rgba(139,92,246,.45)!important;color:#e9d5ff!important}.wjb-title-continue-notice{border-radius:999px;background:rgba(34,197,94,.10);border:1px solid rgba(74,222,128,.28);padding:12px;text-align:center;color:#86efac;margin-bottom:12px}.smart-suggest-collapsed{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:10px;border-radius:18px;border:1px solid rgba(139,92,246,.42);background:rgba(15,23,42,.72);padding:14px 16px;margin:10px 0 14px}.smart-suggest-collapsed b{background:rgba(139,92,246,.22);border-radius:999px;padding:5px 9px;color:#ddd6fe}.smart-suggest-collapsed small{color:#94a3b8}.smart-suggest-collapsed em{font-style:normal;color:#a78bfa;font-size:28px}.smart-suggest-box{border:1px solid rgba(56,189,248,.24)!important;border-radius:22px!important;background:rgba(5,15,34,.88)!important;}.smart-result,.smart-card,.suggest-card{border-radius:18px!important;background:rgba(15,23,42,.68)!important;border:1px solid rgba(56,189,248,.16)!important;}
.tabs,.two{background:rgba(2,6,23,.40)!important;border-radius:20px!important;border:1px solid rgba(56,189,248,.16)!important;padding:8px!important}.tabs button{border-radius:15px!important;}.type-filter{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.type-filter button{border-radius:999px!important;}
#list{display:grid;gap:16px;margin-top:18px}.item,.list-item,.public-item,.card{background:linear-gradient(180deg,rgba(7,18,39,.80),rgba(4,10,25,.92))!important;border:1px solid rgba(56,189,248,.20)!important;border-radius:24px!important;box-shadow:0 14px 50px rgba(0,0,0,.24),0 0 24px rgba(34,211,238,.06)!important;overflow:hidden}.item img,.poster,.item-poster{border-radius:18px!important;}
.settings-modal{backdrop-filter:blur(14px);}.settings-box{background:linear-gradient(180deg,rgba(7,18,39,.94),rgba(3,8,20,.98))!important;border:1px solid rgba(56,189,248,.28)!important;border-radius:28px!important;box-shadow:0 0 60px rgba(34,211,238,.12),0 0 70px rgba(139,92,246,.10)!important}.settings-box h2{font-size:clamp(28px,6vw,44px);}.trending-box,.ai-box{max-width:980px!important;}.trend-controls button,.ai-tabs button{border-radius:999px!important;}.trending-content,.personal-ai-content{display:grid;gap:14px;}.trend-item,.ai-rec-card,.ai-card{border-radius:22px!important;background:rgba(15,23,42,.68)!important;border:1px solid rgba(56,189,248,.18)!important;}
.wjb-v60-bottom-nav{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);width:min(92vw,760px);z-index:80;display:grid;grid-template-columns:1fr 1fr 72px 1fr 1fr;gap:4px;align-items:center;padding:8px;border-radius:30px;background:rgba(2,6,23,.76);border:1px solid rgba(56,189,248,.22);box-shadow:0 0 42px rgba(34,211,238,.16);backdrop-filter:blur(16px)}.wjb-v60-bottom-nav button{border:0!important;background:transparent!important;color:#dbeafe!important;display:grid;place-items:center;gap:2px;min-height:58px;font-size:28px;padding:0!important}.wjb-v60-bottom-nav small{font-size:11px}.wjb-v60-bottom-nav .add{width:66px;height:66px;margin:auto;border-radius:50%!important;background:linear-gradient(135deg,#0ea5e9,#7c3aed)!important;color:white!important;font-size:44px!important;box-shadow:0 0 30px rgba(124,58,237,.28)!important;}
body:not(.wjb-admin) .admin-only-menu,body:not(.wjb-admin) .admin-btn,body:not(.wjb-admin) .guardian-menu-btn,body:not(.wjb-admin) .brother-ai-menu-btn,body:not(.wjb-admin) .control-menu-btn,body:not(.wjb-admin) #adminMenuBtn,body:not(.wjb-admin) #controlCenterMenuBtn{display:none!important;visibility:hidden!important;pointer-events:none!important;}
@media(max-width:720px){body.wjb-v60 .app{padding:14px 12px 106px}.wjb-v60-brand-logo{width:70px;height:70px;border-radius:18px}.wjb-v60-topbar{align-items:flex-start}.wjb-v60-menu{width:54px!important;height:54px!important;font-size:26px!important}.wjb-v60-hero-card{border-radius:24px;padding:22px}.wjb-v60-hero-actions{grid-template-columns:1fr}.wjb-v60-feature-grid{grid-template-columns:repeat(2,1fr)}.wjb-v60-stats{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}.wjb-v60-stats .stat-card{grid-template-columns:44px 1fr auto;min-height:88px;font-size:15px!important;padding:12px!important}.wjb-v60-stats .stat-card span{width:42px;height:42px;font-size:20px}.wjb-v60-stats .stat-card b{font-size:28px}.wjb-v60-sample-body{grid-template-columns:110px 1fr}.wjb-v60-sample-body img{width:110px;height:140px}.wjb-v60-sample-body h3{font-size:23px}.wjb-title-flow-actions{grid-template-columns:1fr}.type-filter{grid-template-columns:repeat(3,1fr)}.wjb-v60-bottom-nav{bottom:10px;width:94vw;grid-template-columns:1fr 1fr 64px 1fr 1fr}.wjb-v60-bottom-nav .add{width:58px;height:58px}.wjb-v60-tools button{grid-template-columns:50px 1fr 22px}.wjb-v60-hero-card::after{opacity:.35;right:-80px;}}
@media(max-width:420px){.wjb-v60-brand h1{font-size:31px}.wjb-v60-brand p{font-size:12px}.wjb-v60-feature-grid{gap:10px}.wjb-v60-feature-grid button{min-height:122px}.wjb-v60-sample-body{grid-template-columns:1fr}.wjb-v60-sample-body img{width:100%;height:220px}.wjb-v60-stats .stat-card{grid-template-columns:1fr;place-items:start}.wjb-v60-stats .stat-card b{justify-self:end}.smart-suggest-collapsed{grid-template-columns:1fr auto}.smart-suggest-collapsed small{grid-column:1/-1}.type-filter{grid-template-columns:repeat(2,1fr)}}


/* ===== WJB v5.9 Full UI Apply: actual web UI layer ===== */
:root{
  --wjb-bg:#050b18;
  --wjb-card:rgba(9,20,43,.82);
  --wjb-card2:rgba(12,25,52,.72);
  --wjb-line:rgba(56,189,248,.28);
  --wjb-blue:#1bbcff;
  --wjb-purple:#9b4dff;
  --wjb-pink:#ff4dcc;
  --wjb-text:#f7fbff;
  --wjb-muted:#b7c7dd;
}
html{scroll-behavior:smooth; background:var(--wjb-bg)}
body{
  background:
    radial-gradient(circle at 15% 8%, rgba(34,211,238,.18), transparent 30%),
    radial-gradient(circle at 88% 16%, rgba(147,51,234,.22), transparent 34%),
    linear-gradient(180deg,#030716 0%,#071225 42%,#030816 100%) !important;
  color:var(--wjb-text)!important;
  letter-spacing:.01em;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 80%)}
.app{max-width:980px!important;padding:18px 16px 112px!important}
.wjb-v60-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}.wjb-v60-brand{display:flex;align-items:center;gap:14px;text-align:left}.wjb-v60-brand-logo{width:76px;height:76px;border-radius:22px;box-shadow:0 0 0 1px rgba(56,189,248,.5),0 0 24px rgba(34,211,238,.28)}.wjb-v60-brand h1{margin:0!important;font-size:clamp(34px,7vw,58px)!important;letter-spacing:-.05em!important;background:linear-gradient(90deg,#fff,#54d6ff 52%,#ae62ff);-webkit-background-clip:text;background-clip:text;color:transparent!important;text-shadow:none!important}.wjb-v60-brand h1 span{color:inherit}.wjb-v60-brand p{margin:4px 0 0!important;color:#dbeafe!important}.menu-toggle{width:58px!important;height:58px!important;border-radius:18px!important;background:rgba(3,10,28,.75)!important;border:1px solid rgba(148,163,184,.22)!important;color:#fff!important;box-shadow:0 0 20px rgba(124,58,237,.22)!important;font-size:26px!important}
.hero.wjb-v60-home-hero{position:relative!important;padding:0!important;margin-bottom:18px!important;background:none!important;box-shadow:none!important;text-align:left!important;border:0!important}.wjb-v60-hero-card{position:relative;overflow:hidden;border:1px solid rgba(56,189,248,.32);border-radius:28px;padding:28px;background:linear-gradient(135deg,rgba(7,18,41,.9),rgba(12,18,52,.82));box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 0 36px rgba(34,211,238,.14),0 0 60px rgba(147,51,234,.16)}.wjb-v60-hero-card::after{content:"";position:absolute;right:-50px;top:16px;width:310px;height:210px;background:radial-gradient(circle,rgba(56,189,248,.2),transparent 60%),linear-gradient(135deg,transparent 15%,rgba(147,51,234,.18));border-radius:50%;filter:blur(4px)}.wjb-v60-hero-card h2{position:relative;z-index:1;margin:0;font-size:clamp(35px,8vw,70px);line-height:1.12;letter-spacing:-.04em}.wjb-v60-hero-card h2 span{background:linear-gradient(90deg,#38bdf8,#a855f7,#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent}.wjb-v60-hero-card p{position:relative;z-index:1;max-width:620px;margin:18px 0;color:#dbeafe!important;font-size:clamp(16px,3.8vw,22px);line-height:1.7}.wjb-v60-hero-actions{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.wjb-v60-hero-actions button{min-height:62px;border-radius:18px!important;background:linear-gradient(135deg,#03b7ff,#6d28d9)!important;box-shadow:0 0 24px rgba(56,189,248,.26)!important}.wjb-v60-hero-actions button.gray{background:linear-gradient(135deg,rgba(14,165,233,.18),rgba(147,51,234,.26))!important;border:1px solid rgba(168,85,247,.45)!important}
.wjb-v60-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}.wjb-v60-feature-grid div{padding:18px 12px;border-radius:20px;background:rgba(9,20,43,.72);border:1px solid rgba(56,189,248,.18);box-shadow:0 0 24px rgba(37,99,235,.1)}.wjb-v60-feature-grid i{display:block;font-style:normal;font-size:32px;margin-bottom:8px}.wjb-v60-feature-grid b{display:block;font-size:18px}.wjb-v60-feature-grid small{display:block;color:var(--wjb-muted);line-height:1.45;margin-top:6px}.stats.wjb-v60-stats{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:14px!important;margin:18px 0!important}.stat-card{min-height:98px!important;border-radius:22px!important;background:linear-gradient(135deg,rgba(10,24,54,.82),rgba(10,16,38,.74))!important;border:1px solid rgba(56,189,248,.24)!important;color:#fff!important;box-shadow:0 0 22px rgba(56,189,248,.08)!important;text-align:left!important;padding:18px!important;display:grid!important;grid-template-columns:auto 1fr auto!important;align-items:center!important;gap:14px!important}.stat-card span{width:48px;height:48px;display:grid;place-items:center;border-radius:999px;background:rgba(34,211,238,.1);box-shadow:0 0 18px rgba(34,211,238,.18)}.stat-card em{font-style:normal;color:#e5f4ff;font-weight:800;font-size:18px}.stat-card b{font-size:34px;color:#dff7ff}.auth-box,.form-box,.user-box,.view-bar,.backup,.premium-tools,.settings-box,.modal-content{background:linear-gradient(180deg,rgba(7,18,41,.86),rgba(4,11,25,.92))!important;border:1px solid rgba(56,189,248,.24)!important;box-shadow:0 0 0 1px rgba(255,255,255,.03) inset,0 0 34px rgba(59,130,246,.10),0 0 50px rgba(147,51,234,.10)!important;border-radius:28px!important}.auth-box{padding:28px!important}.auth-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:rgba(2,6,23,.35);padding:8px;border-radius:22px}.auth-switch button{border-radius:16px!important}.tabs{background:rgba(2,6,23,.45)!important;border:1px solid rgba(56,189,248,.16);border-radius:22px;padding:8px}.tabs button{border-radius:16px!important}.view-bar{padding:18px!important}.type-filter{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}.type-filter button{white-space:nowrap;width:auto!important;border-radius:999px!important;padding:10px 16px!important}
/* v16.1: #animeStatsRow/#mangaStatsRow ใช้ class .stats.wjb-v60-stats ร่วมกับการ์ดสถิติ
   เดิม ซึ่งมี "display:grid!important" บังคับไว้แล้ว (บรรทัดข้างบน) ทำให้ inline
   style.display="none" ที่ตั้งจาก JS ธรรมดาแพ้ !important เดิม การ์ดเลยโชว์ทับกัน
   ทั้งสองแถว — เลยต้องเพิ่ม selector ที่ specificity สูงกว่า (ใช้ id) พร้อม !important
   เพื่อซ่อนแถวที่ไม่ใช่โหมดปัจจุบันได้จริง */
#animeStatsRow.wjb-mode-hidden,#mangaStatsRow.wjb-mode-hidden{display:none!important}
/* v17.0: ปุ่มแท็กที่ผู้ใช้ตั้งเอง — ใช้ทั้งในการ์ดอนิเมะและการ์ดมังงะ */
.wjb-card-tags{display:flex!important;flex-wrap:wrap;gap:6px;margin-top:2px}
.wjb-tag-pill{display:inline-block;padding:4px 12px;border-radius:999px;background:rgba(56,189,248,.14);border:1px solid rgba(56,189,248,.32);color:#bae6fd;font-size:13px;font-weight:700;cursor:pointer}
.wjb-tag-pill:active{background:rgba(56,189,248,.28)}
.form-box{padding:22px!important}.wjb-v60-form-title{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.wjb-v60-form-title b{font-size:28px;line-height:1.15}.wjb-v60-form-title small{color:#b9c8de}.wjb-v60-field-label{font-weight:900;color:#e0f2fe;margin-top:6px}input,select,textarea,.search{background:rgba(2,8,23,.58)!important;border:1px solid rgba(148,163,184,.24)!important;color:#fff!important;border-radius:16px!important;padding:16px!important;box-shadow:0 0 0 1px rgba(255,255,255,.02) inset!important}input:focus,select:focus,textarea:focus,.search:focus{outline:none!important;border-color:#38bdf8!important;box-shadow:0 0 0 3px rgba(56,189,248,.16),0 0 24px rgba(56,189,248,.14)!important}.wjb-title-flow-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}.wjb-use-title-btn{background:linear-gradient(135deg,#06b6d4,#7c3aed,#d946ef)!important;border:1px solid rgba(255,255,255,.16)!important;box-shadow:0 0 24px rgba(124,58,237,.28)!important}.wjb-search-again-btn{background:rgba(2,6,23,.42)!important;border:1px solid rgba(56,189,248,.32)!important;color:#dbeafe!important}.wjb-title-continue-notice{border-radius:999px!important;text-align:center;padding:12px!important;background:rgba(34,197,94,.12)!important;border:1px solid rgba(74,222,128,.24)!important;color:#bbf7d0!important}.smart-suggest-collapsed{border-radius:18px!important;background:rgba(7,18,41,.72)!important;border:1px solid rgba(168,85,247,.38)!important;box-shadow:0 0 24px rgba(147,51,234,.14)!important}.wjb-v60-section-separator{display:flex;align-items:center;justify-content:center;gap:10px;color:#dbeafe;font-weight:900;margin:18px 0 6px}.wjb-v60-section-separator::before,.wjb-v60-section-separator::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#38bdf8,#a855f7,transparent)}#saveBtn{min-height:60px;border-radius:18px!important;background:linear-gradient(135deg,#0ea5e9,#7c3aed)!important;box-shadow:0 0 28px rgba(56,189,248,.20)!important}.guide-box{background:rgba(2,8,23,.45)!important;border:1px solid rgba(56,189,248,.16)!important;border-radius:20px!important;padding:16px!important}.trend-hero-btn,.ai-hero-btn{min-height:58px!important;border-radius:18px!important;background:linear-gradient(135deg,rgba(14,165,233,.95),rgba(124,58,237,.95))!important;box-shadow:0 0 22px rgba(124,58,237,.18)!important}.ai-hero-btn{background:linear-gradient(135deg,rgba(124,58,237,.95),rgba(217,70,239,.85))!important}
#list{display:grid;gap:16px;margin-top:16px}.item,.list-item,.card{border-radius:24px!important;background:linear-gradient(135deg,rgba(7,18,41,.84),rgba(4,10,24,.92))!important;border:1px solid rgba(56,189,248,.18)!important;box-shadow:0 0 22px rgba(56,189,248,.08)!important}.list-tools-bar,.wjb-floating-quick-tools{background:rgba(2,8,23,.62)!important;border:1px solid rgba(56,189,248,.18)!important;border-radius:22px!important;box-shadow:0 0 26px rgba(59,130,246,.12)!important;z-index:50!important}.wjb-scroll-top-fix{pointer-events:auto!important;touch-action:manipulation!important;position:relative!important;z-index:55!important}.premium-menu-item{border-radius:18px!important;background:rgba(2,8,23,.38)!important;border:1px solid rgba(148,163,184,.16)!important}.premium-menu-icon{box-shadow:0 0 18px rgba(56,189,248,.14)!important}.pwa-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.pwa-choice-btn{min-height:78px!important;border-radius:20px!important}.pwa-choice-btn.primary{background:linear-gradient(135deg,#0ea5e9,#7c3aed)!important}.pwa-choice-btn.secondary{background:rgba(2,8,23,.62)!important;border:1px solid rgba(168,85,247,.32)!important}.settings-modal{backdrop-filter:blur(10px)}.trending-box,.ai-box{max-width:920px!important}.trending-content,.personal-ai-content{display:grid;gap:12px}.wjb-v60-bottom-nav{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);width:min(900px,calc(100% - 28px));height:76px;padding:8px;border-radius:28px;background:rgba(3,8,23,.78);border:1px solid rgba(56,189,248,.25);box-shadow:0 0 34px rgba(59,130,246,.18),0 0 48px rgba(147,51,234,.16);backdrop-filter:blur(16px);display:grid;grid-template-columns:repeat(5,1fr);gap:4px;z-index:999}.wjb-v60-bottom-nav button{background:transparent!important;border:0!important;color:#cbd5e1!important;display:flex!important;flex-direction:column!important;gap:3px!important;align-items:center!important;justify-content:center!important;padding:4px!important;border-radius:20px!important;font-size:20px!important}.wjb-v60-bottom-nav small{font-size:11px;color:#cbd5e1}.wjb-v60-bottom-nav .nav-center{background:linear-gradient(135deg,rgba(14,165,233,.30),rgba(124,58,237,.40))!important;box-shadow:0 0 24px rgba(124,58,237,.22)!important}.wjb-v60-bottom-nav .nav-center span{font-size:25px}.wjb-launch-screen{background:radial-gradient(circle at 50% 8%,rgba(56,189,248,.18),transparent 30%),radial-gradient(circle at 80% 28%,rgba(147,51,234,.25),transparent 34%),linear-gradient(180deg,#030716,#071225 55%,#020617)!important}.wjb-launch-card,.wjb-launch-choice{backdrop-filter:blur(12px)}.wjb-launch-choice b{font-size:clamp(24px,5vw,42px)!important}.wjb-launch-choice small{font-size:clamp(14px,3.4vw,20px)!important}.wjb-launch-title-wrap h1{letter-spacing:-.06em!important}.wjb-launch-status{color:#b7c7dd!important}
@media(max-width:720px){.app{padding:12px 10px 108px!important}.wjb-v60-brand-logo{width:64px;height:64px;border-radius:18px}.wjb-v60-brand h1{font-size:36px!important}.wjb-v60-brand p{font-size:13px!important}.menu-toggle{width:52px!important;height:52px!important}.wjb-v60-hero-card{padding:22px}.wjb-v60-hero-actions{grid-template-columns:1fr}.wjb-v60-feature-grid{grid-template-columns:repeat(2,1fr)}.wjb-v60-feature-grid div{min-height:106px}.stats.wjb-v60-stats{grid-template-columns:repeat(2,1fr)!important}.stat-card{grid-template-columns:auto 1fr!important;min-height:90px!important}.stat-card b{grid-column:2;font-size:30px}.wjb-title-flow-actions,.pwa-choice-grid{grid-template-columns:1fr}.wjb-v60-bottom-nav{height:74px;border-radius:24px}.wjb-v60-bottom-nav button span{font-size:19px}.wjb-v60-bottom-nav small{font-size:10px}.wjb-launch-top{padding:0 6px}.wjb-launch-card{border-radius:28px!important}.wjb-launch-choice{grid-template-columns:74px 1fr 24px!important;min-height:100px!important}.choice-icon{width:62px!important;height:62px!important}.wjb-launch-features{grid-template-columns:1fr!important;gap:10px!important}.wjb-launch-features span{border-left:0!important;border-top:1px solid rgba(148,163,184,.16);padding-top:10px}}
@media(max-width:420px){.wjb-v60-brand h1{font-size:30px!important}.wjb-v60-hero-card h2{font-size:34px}.wjb-v60-feature-grid{grid-template-columns:1fr 1fr;gap:10px}.wjb-v60-feature-grid b{font-size:15px}.wjb-v60-feature-grid small{font-size:12px}.stat-card{padding:12px!important}.stat-card em{font-size:14px}.stat-card b{font-size:26px}.auth-box,.form-box{padding:16px!important}.wjb-v60-bottom-nav{width:calc(100% - 18px)}}
/* Hide admin/internal tools for normal users again */
body:not(.wjb-admin) .admin-only-menu,body:not(.wjb-admin) .admin-btn,body:not(.wjb-admin) .guardian-menu-btn,body:not(.wjb-admin) .brother-ai-menu-btn,body:not(.wjb-admin) .control-menu-btn,body:not(.wjb-admin) #adminMenuBtn,body:not(.wjb-admin) #controlCenterMenuBtn{display:none!important;visibility:hidden!important;pointer-events:none!important}

/* v5.9 compatibility with existing v5.7 HTML patch names */
body.wjb-v60 .hero.wjb-v60-home-hero,
body .hero.wjb-v60-home-hero{
  position:relative!important;padding:0!important;margin:0 0 22px!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;text-align:left!important;
}
.wjb-v60-home-hero .menu-toggle{position:static!important;width:60px!important;height:60px!important;border-radius:18px!important;font-size:30px!important;background:rgba(8,18,40,.72)!important;border:1px solid rgba(139,92,246,.32)!important;box-shadow:0 0 26px rgba(139,92,246,.20)!important;color:#fff!important;}
.wjb-v60-hero-card > div{position:relative;z-index:2;max-width:620px;}
.wjb-v60-hero-card h2{margin:0 0 14px;font-size:clamp(36px,8.8vw,70px);line-height:1.08;font-weight:950;letter-spacing:-1.4px;color:#fff;}
.wjb-v60-hero-card h2 span{background:linear-gradient(90deg,#38bdf8,#8b5cf6,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent;}
.wjb-v60-hero-card p{margin:0;color:#dce8ff;font-size:clamp(16px,4vw,22px);line-height:1.55;max-width:540px;}
.wjb-v60-feature-grid > div{display:grid;place-items:center;text-align:center;gap:8px;min-height:142px;padding:14px 10px;border-radius:22px;background:linear-gradient(180deg,rgba(7,20,44,.76),rgba(5,11,26,.86));border:1px solid rgba(56,189,248,.22);box-shadow:0 0 24px rgba(34,211,238,.08);color:white;}
.wjb-v60-form-title{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;padding:16px;border-radius:20px;background:linear-gradient(135deg,rgba(14,165,233,.14),rgba(124,58,237,.14));border:1px solid rgba(56,189,248,.22);}
.wjb-v60-form-title b{font-size:28px;color:#fff}.wjb-v60-form-title small{color:#cbd5e1;font-size:15px}
@media(max-width:720px){.wjb-v60-home-hero .menu-toggle{width:54px!important;height:54px!important;font-size:26px!important}.wjb-v60-feature-grid > div{min-height:122px}}


/* ===== WJB v6.0 No Launch Choice ===== */
#wjbLaunchScreen, .wjb-launch-screen{display:none!important;visibility:hidden!important;pointer-events:none!important;}
body.wjb-v60 #wjbMainAppShell{display:block!important;}


/* v6.1: remove top feature grid */
.wjb-v60-feature-grid{display:none !important;}


/* v6.2: my list top tool bars removed (JS side cleaned up too — see legacy-app.js) */
#listToolsBar{display:none !important;}


/* v6.3 Bottom Nav tap reliability + view toggle */
.wjb-v60-bottom-nav{
  z-index:9999 !important;
  pointer-events:auto !important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.wjb-v60-bottom-nav button{
  pointer-events:auto !important;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  cursor:pointer;
}
.wjb-v60-bottom-nav button span,
.wjb-v60-bottom-nav button small{
  pointer-events:none;
}
#wjbBottomViewToggle span{font-size:28px;line-height:1;}


/* v6.4 clean single-column menu drawer */
.premium-user-menu.menu-panel{
  grid-template-columns:1fr !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  top:max(14px, env(safe-area-inset-top)) !important;
  left:12px !important;
  right:auto !important;
  width:min(86vw, 330px) !important;
  max-width:330px !important;
  max-height:calc(100svh - 24px) !important;
  padding:18px 14px 16px !important;
  border-radius:24px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  gap:10px !important;
}
.premium-menu-handle{display:none !important;}
.premium-menu-close{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  width:34px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border-radius:999px !important;
  background:transparent !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#fff !important;
  font-size:18px !important;
  box-shadow:none !important;
}
.premium-profile-card{
  display:grid !important;
  grid-template-columns:72px 1fr !important;
  gap:14px !important;
  align-items:center !important;
  margin:0 0 10px !important;
  padding:14px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,rgba(10,22,46,.94),rgba(7,15,30,.98)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
}
.menu-avatar{width:72px !important;height:72px !important;border-width:3px !important;box-shadow:none !important;}
.premium-profile-info b{font-size:22px !important;line-height:1.1 !important;}
.premium-profile-info .muted{font-size:13px !important;margin:5px 0 8px !important;}
.menu-role-badge{padding:6px 10px !important;font-size:12px !important;border-radius:999px !important;}
.menu-section-title{display:none !important;}
.premium-menu-item{
  width:100% !important;
  display:grid !important;
  grid-template-columns:44px 1fr 18px !important;
  gap:12px !important;
  align-items:center !important;
  min-height:60px !important;
  padding:13px 12px !important;
  border-radius:16px !important;
  margin:0 !important;
  background:rgba(9,18,38,.82) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  box-shadow:none !important;
}
.premium-menu-icon{width:40px !important;height:40px !important;border-radius:12px !important;font-size:20px !important;box-shadow:none !important;}
.premium-menu-text b{font-size:17px !important;line-height:1.15 !important;}
.premium-menu-text small{font-size:12px !important;line-height:1.25 !important;margin-top:3px !important;}
.premium-menu-item em{font-size:22px !important;color:rgba(255,255,255,.72) !important;}
.logout-item{margin-top:4px !important;}
.menu-safe-note{margin-top:4px !important;font-size:13px !important;color:#9ecbff !important;text-align:left !important;padding-left:4px !important;}
.premium-user-menu.menu-panel .admin-only-menu{display:grid !important;gap:10px !important;}
@media (max-width:560px){
  .premium-user-menu.menu-panel{width:min(88vw,315px) !important;left:10px !important;padding:16px 12px 14px !important;}
  .premium-profile-card{grid-template-columns:64px 1fr !important;padding:12px !important;}
  .menu-avatar{width:64px !important;height:64px !important;}
  .premium-profile-info b{font-size:20px !important;}
}
/* one-tap friendly touch targets */
.wjb-v60-bottom-nav button,.premium-menu-item,.menu-toggle,.premium-menu-close{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}


/* v6.5: iPhone/Safari anti auto-zoom + one-tap controls */
html{
  -webkit-text-size-adjust:100% !important;
  text-size-adjust:100% !important;
  touch-action:manipulation;
}
body{
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}
button,a,[role="button"],.stat-card,.premium-menu-item,.wjb-v60-bottom-nav button,.menu-toggle{
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent !important;
  user-select:none;
  -webkit-user-select:none;
}
input,select,textarea{
  font-size:16px !important;
  line-height:1.35 !important;
  touch-action:manipulation !important;
}
@media(max-width:768px){
  input,select,textarea,button{font-size:16px !important;}
}


/* v6.6 classic home style, closer to older layout */
html,body{overflow-x:hidden !important;max-width:100% !important;}
*{box-sizing:border-box;}
body{background:linear-gradient(180deg,#e5e7eb 0,#e5e7eb 100px,#020817 100px,#020817 100%) !important;}
body::before{display:none !important;}
.app{max-width:760px !important;padding:14px 14px 112px !important;overflow-x:hidden !important;}
.app > *{max-width:100% !important;min-width:0 !important;}
.hero.wjb-v60-home-hero{
  padding:22px 20px 26px !important;
  border-radius:34px !important;
  background:linear-gradient(135deg,#18baf9 0%,#2450b8 58%,#041225 100%) !important;
  box-shadow:0 20px 48px rgba(4,22,60,.35) !important;
  border:0 !important;
  overflow:hidden !important;
  margin:4px 0 20px !important;
}
.wjb-v60-topbar{margin-bottom:18px !important;position:relative;z-index:2;}
.wjb-v60-brand-logo{width:70px !important;height:70px !important;border-radius:20px !important;box-shadow:none !important;}
.wjb-v60-brand h1{font-size:clamp(30px,7vw,54px)!important;line-height:1.02 !important;letter-spacing:-.04em !important;background:none !important;-webkit-text-fill-color:#fff !important;color:#fff !important;}
.wjb-v60-brand p{font-size:15px !important;color:rgba(255,255,255,.82)!important;}
.menu-toggle{width:68px !important;height:68px !important;border-radius:24px !important;background:#1a2f6b !important;border:0 !important;box-shadow:none !important;font-size:30px !important;}
.wjb-v60-hero-card{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;overflow:visible !important;}
.wjb-v60-hero-card::after{display:none !important;}
.wjb-v60-hero-card h2{font-size:clamp(44px,11vw,76px) !important;line-height:1.02 !important;letter-spacing:-.05em !important;color:#fff !important;}
.wjb-v60-hero-card h2 span{background:none !important;color:#fff !important;-webkit-text-fill-color:#fff !important;}
.wjb-v66-hero-subtitle{margin:16px 0 0 !important;color:rgba(255,255,255,.86) !important;font-size:clamp(14px,3.8vw,20px) !important;font-weight:600 !important;}
.wjb-v60-hero-card p{display:none !important;}
.stats.wjb-v60-stats{margin:22px 0 0 !important;gap:14px !important;}
.stat-card{min-height:92px !important;padding:16px 18px !important;border-radius:22px !important;background:rgba(6,17,40,.92) !important;border:1px solid rgba(255,255,255,.08) !important;box-shadow:none !important;grid-template-columns:auto 1fr auto !important;}
.stat-card span{width:44px !important;height:44px !important;background:transparent !important;box-shadow:none !important;font-size:28px !important;}
.stat-card em{font-size:18px !important;color:#fff !important;}
.stat-card b{font-size:30px !important;color:#fff !important;}
.wjb-v60-hero-actions{grid-template-columns:1fr 1fr !important;gap:14px !important;margin-top:18px !important;}
.wjb-v60-hero-actions button{min-height:58px !important;border-radius:18px !important;font-size:17px !important;box-shadow:none !important;}
.wjb-v60-hero-actions button:not(.gray){background:linear-gradient(135deg,#22b6ff,#2a73ff) !important;}
.wjb-v60-hero-actions button.gray{background:#31456a !important;border:0 !important;color:#fff !important;}
.tabs{display:none !important;}
#mainApp{margin-top:0 !important;}
.form-box{padding:20px !important;border-radius:28px !important;background:linear-gradient(180deg,rgba(7,18,41,.96),rgba(4,11,25,.98)) !important;}
.trend-hero-btn{background:linear-gradient(135deg,#ff9812,#fb5d68,#6b7cff) !important;color:#fff !important;border-radius:24px !important;min-height:86px !important;font-size:18px !important;font-weight:900 !important;}
.ai-hero-btn{background:linear-gradient(135deg,#8b5cf6,#0ea5e9) !important;color:#fff !important;border-radius:24px !important;min-height:82px !important;font-size:18px !important;font-weight:900 !important;}
.guide-box{margin-top:12px !important;padding:18px !important;border-radius:24px !important;background:linear-gradient(180deg,rgba(7,18,41,.88),rgba(4,11,25,.95)) !important;}
.guide-box h3{font-size:18px !important;margin:0 0 12px !important;}
#list,.item,.list-item,.card,.view-bar,.backup,.premium-tools{max-width:100% !important;overflow-x:hidden !important;}
.wjb-v60-bottom-nav{width:min(720px,calc(100% - 20px)) !important;left:50% !important;transform:translateX(-50%) !important;right:auto !important;}
@media(max-width:720px){
  .app{padding:12px 10px 106px !important;}
  .hero.wjb-v60-home-hero{padding:18px 16px 22px !important;border-radius:28px !important;}
  .wjb-v60-brand-logo{width:58px !important;height:58px !important;}
  .wjb-v60-brand h1{font-size:28px !important;}
  .menu-toggle{width:60px !important;height:60px !important;border-radius:22px !important;}
  .wjb-v60-hero-card h2{font-size:clamp(34px,10vw,58px) !important;}
  .wjb-v60-hero-actions{grid-template-columns:1fr 1fr !important;}
  .stat-card{min-height:84px !important;padding:14px 14px !important;}
  .stat-card em{font-size:16px !important;}
  .stat-card b{font-size:26px !important;}
}
@media(max-width:430px){
  .wjb-v60-topbar{align-items:flex-start !important;}
  .wjb-v60-brand{gap:12px !important;align-items:flex-start !important;}
  .wjb-v60-brand h1{font-size:26px !important;}
  .wjb-v60-brand p{font-size:13px !important;}
  .wjb-v60-hero-actions{grid-template-columns:1fr 1fr !important;gap:12px !important;}
  .wjb-v60-hero-actions button{font-size:16px !important;padding:12px !important;min-height:56px !important;}
  .stat-card{grid-template-columns:auto 1fr auto !important;}
}


/* v6.7: menu label renamed to media-focused wording */


/* v6.8 fix horizontal drift / purple side strip */
html,body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:clip !important;
  overflow-y:auto !important;
  position:relative !important;
  overscroll-behavior-x:none !important;
}
body{touch-action:pan-y !important;}
body.wjb-v60, body.wjb-v60 .app, #mainApp, .hero, .hero *, section, .tabs, .view-bar, .form-box, .auth-box, .backup, .premium-tools, .settings-box, .modal-content, .wjb-v60-home-hero, .wjb-v60-hero-card, .stats.wjb-v60-stats, #list, .trending-box, .ai-box {
  max-width:100% !important;
}
body.wjb-v60 .app{
  width:100% !important;
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  overflow-x:clip !important;
}
section, .hero, .tabs, .view-bar, .form-box, .auth-box, .backup, .premium-tools, .settings-box, .modal-content, .wjb-v60-home-hero, .wjb-v60-hero-card, .stats.wjb-v60-stats, #list, .item, .list-item, .card, .trending-box, .ai-box {
  width:100% !important;
  overflow-x:clip !important;
  min-width:0 !important;
}
img,svg,canvas,video,iframe{max-width:100% !important;height:auto;}
.wjb-v60-bottom-nav{
  width:min(720px,calc(100vw - 16px)) !important;
  max-width:calc(100vw - 16px) !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
}
.smart-suggest-list,.type-filter,.trending-content,.personal-ai-content{max-width:100% !important;}


/* v6.9 modal scroll lock: modal should scroll, background should not */
body.wjb-modal-open{overflow:hidden !important;touch-action:none !important;}
body.wjb-modal-open .app{pointer-events:none;}
body.wjb-modal-open .settings-modal,
body.wjb-modal-open .modal{pointer-events:auto;}
body.wjb-modal-open .wjb-v60-bottom-nav{pointer-events:none !important;opacity:.38 !important;}
.settings-modal{
  align-items:flex-start !important;
  justify-content:center !important;
  padding:16px 12px max(16px, env(safe-area-inset-bottom)) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
}
.settings-box, .trending-box, .ai-box, .guardian-box, .brother-ai-box, .season-detail-box, .control-center-box, .admin-box{
  width:min(980px,94vw) !important;
  max-height:calc(100svh - 32px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  margin:auto 0 !important;
}
.trending-content,.personal-ai-content,.guardian-content,#hallContent,#adminContent,#controlCenterContent,#seasonDetailList{overscroll-behavior:contain !important;}
@media (max-width:720px){
  .settings-modal{padding:10px 8px calc(10px + env(safe-area-inset-bottom)) !important;}
  .settings-box, .trending-box, .ai-box, .guardian-box, .brother-ai-box, .season-detail-box, .control-center-box, .admin-box{max-height:calc(100svh - 20px) !important;border-radius:22px !important;}
}


/* v7.1 auth-first professional entry */
body.wjb-auth-only .wjb-v60-home-hero,
body.wjb-auth-only #mainApp,
body.wjb-auth-only .wjb-v60-bottom-nav,
body.wjb-auth-only #userBox{display:none !important;}
body.wjb-auth-only .app{padding-top:18px !important;padding-bottom:24px !important;}
body.wjb-auth-only #authBox{display:grid !important;margin-top:8px !important;}
body.wjb-auth-only .auth-box{max-width:760px !important;}

/* v7.2: add-form centering / width alignment fix */
*, *::before, *::after{
  box-sizing:border-box;
}
body.wjb-v60 .app,
#mainApp{
  padding-left:max(14px, env(safe-area-inset-left)) !important;
  padding-right:max(14px, env(safe-area-inset-right)) !important;
}
.form-box,
.auth-box{
  width:100% !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.form-box > *,
.auth-box > *{
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.form-box input,
.form-box select,
.form-box textarea,
.form-box button,
.auth-box input,
.auth-box select,
.auth-box textarea,
.auth-box button{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  display:block !important;
  box-sizing:border-box !important;
}
.form-box label,
.auth-box label,
.wjb-v60-form-title,
.guide-box,
.wjb-title-continue-notice,
.smart-suggest-box,
.smart-suggest-collapsed,
.wjb-v60-section-separator{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
.wjb-title-flow-actions{
  width:100% !important;
  max-width:100% !important;
  align-items:stretch !important;
}
.wjb-title-flow-actions > button{
  width:100% !important;
  min-width:0 !important;
}
#poster,
input[type="file"]{
  width:100% !important;
  max-width:100% !important;
}
@media(max-width:480px){
  .form-box,
  .auth-box{
    padding:16px !important;
  }
}

/* v7.3: classic centered home hero like original reference */
.wjb-v73-classic-home{
  position:relative !important;
  padding:30px 20px 22px !important;
  text-align:center !important;
  overflow:hidden !important;
}
.wjb-v73-hero-menu{
  position:absolute !important;
  top:28px !important;
  right:20px !important;
  width:72px !important;
  height:72px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  font-size:34px !important;
  background:rgba(18,34,92,.78) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.25) !important;
  z-index:2 !important;
}
.wjb-v73-hero-center{
  width:100% !important;
  max-width:760px !important;
  margin:10px auto 8px !important;
  padding:24px 14px 6px !important;
}
.wjb-v73-classic-home .wjb-v73-hero-center h2{
  margin:0 !important;
  color:#fff !important;
  line-height:.96 !important;
  letter-spacing:-.045em !important;
  font-size:clamp(58px,11vw,108px) !important;
  font-weight:900 !important;
}
.wjb-v73-wave{
  display:inline-block !important;
  margin-right:12px !important;
  font-size:.54em !important;
  vertical-align:top !important;
  transform:translateY(10px) !important;
}
.wjb-v73-classic-home .wjb-v66-hero-subtitle{
  margin:14px auto 4px !important;
  max-width:92% !important;
  color:#e5eefc !important;
  font-size:clamp(18px,3.7vw,28px) !important;
  font-weight:500 !important;
  text-align:center !important;
}
.wjb-v73-classic-home .wjb-v60-topbar,
.wjb-v73-classic-home .wjb-v60-hero-card,
.wjb-v73-classic-home .wjb-v60-hero-actions{
  display:none !important;
}
.wjb-v73-classic-home .stats.wjb-v60-stats{
  margin-top:22px !important;
}
@media(max-width:480px){
  .wjb-v73-classic-home{
    padding:22px 16px 18px !important;
  }
  .wjb-v73-hero-menu{
    top:18px !important;
    right:16px !important;
    width:62px !important;
    height:62px !important;
    font-size:30px !important;
  }
  .wjb-v73-hero-center{
    padding:18px 8px 2px !important;
    margin-top:2px !important;
  }
  .wjb-v73-classic-home .wjb-v73-hero-center h2{
    font-size:clamp(46px,14.6vw,76px) !important;
  }
  .wjb-v73-wave{
    margin-right:8px !important;
    transform:translateY(7px) !important;
  }
  .wjb-v73-classic-home .wjb-v66-hero-subtitle{
    font-size:clamp(16px,4.9vw,22px) !important;
    max-width:96% !important;
  }
}


/* v7.5 clean auth / add form tweaks */
body.auth-login-mode #email,
body.auth-login-mode .register-only-field{
  display:none !important;
}
body.auth-register-mode #email,
body.auth-register-mode .register-only-field{
  display:block !important;
}
body.auth-register-mode .login-only-field{
  display:none !important;
}
#isPublic[style*="display:none"]{
  display:none !important;
}
.wjb-forgot-pw-row{
  margin:2px 2px 10px;
  text-align:right;
  font-size:.85em;
}
.wjb-forgot-pw-row a{
  color:var(--accent,#4da6ff);
  text-decoration:none;
}
.wjb-forgot-pw-row a:hover{
  text-decoration:underline;
}
.wjb-forgot-pw-box{
  margin-top:10px;
  padding:12px;
  border-radius:10px;
  background:rgba(127,127,127,.08);
}
.wjb-forgot-pw-box input{
  width:100%;
}

/* Center hero title like the approved mockup */
.wjb-v73-classic-home .wjb-v73-hero-center{
  text-align:center !important;
  padding-top:16px !important;
}
.wjb-v73-classic-home .wjb-v73-hero-center h2{
  text-align:center !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  font-size:clamp(44px,12.4vw,78px) !important;
  line-height:1.04 !important;
  letter-spacing:-.035em !important;
  overflow:visible !important;
}
.wjb-v73-wave{
  display:block !important;
  width:max-content !important;
  margin:0 auto 10px !important;
  transform:none !important;
  font-size:clamp(46px,10vw,72px) !important;
  line-height:1 !important;
}
.wjb-v73-classic-home .wjb-v66-hero-subtitle{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:94% !important;
}

/* Long trend title: keep readable and centered */
.trending-box h2{
  text-align:center !important;
  line-height:1.25 !important;
  font-size:clamp(25px,5.8vw,42px) !important;
}
.premium-menu-item .premium-menu-text b{
  line-height:1.32 !important;
}

/* Hidden old public checkbox row: bottom navigation already has Explore */
.checkline:has(#isPublic){
  display:none !important;
}


/* v7.6 Floating menu button for PWA / iPhone standalone */
.menu-toggle,
.wjb-v60-home-hero .menu-toggle,
.wjb-v73-hero-menu{
  position:fixed !important;
  top:calc(env(safe-area-inset-top, 0px) + 14px) !important;
  left:14px !important;
  right:auto !important;
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  min-height:58px !important;
  border-radius:20px !important;
  display:grid !important;
  place-items:center !important;
  z-index:2147483000 !important;
  background:rgba(3,10,28,.82) !important;
  border:1px solid rgba(56,189,248,.28) !important;
  color:#ffffff !important;
  font-size:28px !important;
  line-height:1 !important;
  box-shadow:0 12px 34px rgba(0,0,0,.38),0 0 24px rgba(34,211,238,.18),0 0 18px rgba(168,85,247,.16) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
  transform:none !important;
  opacity:1 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}
body.wjb-auth-only .menu-toggle,
body.wjb-modal-open .menu-toggle{
  display:none !important;
}
/* Give the hero enough top room so the floating button never sits on top of the title. */
body:not(.wjb-auth-only) .wjb-v60-home-hero,
body:not(.wjb-auth-only) .hero{
  padding-top:calc(env(safe-area-inset-top, 0px) + 86px) !important;
}
/* Make the button easy to tap on very small screens. */
@media(max-width:420px){
  .menu-toggle,
  .wjb-v60-home-hero .menu-toggle,
  .wjb-v73-hero-menu{
    top:calc(env(safe-area-inset-top, 0px) + 12px) !important;
    left:12px !important;
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    min-height:56px !important;
    border-radius:19px !important;
  }
}

/* v7.7: clean bottom nav and restore public/private toggle */
/* Hide bottom navigation whenever a modal/detail/overlay is open. It prevents the nav from covering content. */
body.wjb-modal-open .wjb-v60-bottom-nav,
body.wjb-hide-bottom-nav .wjb-v60-bottom-nav{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Public/private checkbox: visible again, one-line, premium card style. */
#publicToggleRow,
.checkline.wjb-public-toggle{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
  max-width:100% !important;
  min-height:58px !important;
  padding:14px 16px !important;
  margin:8px 0 12px !important;
  border-radius:18px !important;
  background:rgba(2,8,23,.48) !important;
  border:1px solid rgba(56,189,248,.22) !important;
  box-shadow:0 0 22px rgba(56,189,248,.07), inset 0 0 0 1px rgba(255,255,255,.02) !important;
  color:#eaf6ff !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
#publicToggleRow input,
.checkline.wjb-public-toggle input{
  flex:0 0 auto !important;
  width:26px !important;
  height:26px !important;
  min-height:26px !important;
  margin:0 !important;
  accent-color:#0ea5e9 !important;
  display:inline-block !important;
}
#publicToggleRow span,
.checkline.wjb-public-toggle span{
  display:block !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  font-weight:800 !important;
  line-height:1.35 !important;
}

/* Override old rule that hid the public checkbox row. */
.checkline:has(#isPublic){
  display:flex !important;
}
#isPublic{
  display:inline-block !important;
}

/* v7.8 audit/display fix: cleaner auth actions and nav visibility */
body.auth-login-mode .auth-action-row,
body.auth-register-mode .auth-action-row{
  grid-template-columns:1fr !important;
}
body.auth-login-mode .auth-action-register,
body.auth-register-mode .auth-action-login{
  display:none !important;
}
body.auth-login-mode .auth-action-login,
body.auth-register-mode .auth-action-register{
  display:block !important;
  width:100% !important;
}

/* Bottom nav should only be available on main/home style screens, not edit/detail/sub screens. */
body.wjb-subscreen-open .wjb-v60-bottom-nav,
body.wjb-edit-mode .wjb-v60-bottom-nav{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Give edit/add form a little extra bottom room when the nav is hidden. */
body.wjb-edit-mode .form-box,
body.wjb-subscreen-open .form-box{
  margin-bottom:22px !important;
}

/* Prevent the restored public toggle from being clipped on small screens. */
#publicToggleRow,
.checkline.wjb-public-toggle{
  min-width:0 !important;
}
#publicToggleRow span,
.checkline.wjb-public-toggle span{
  white-space:nowrap !important;
}
@media(max-width:390px){
  #publicToggleRow,
  .checkline.wjb-public-toggle{
    padding-left:12px !important;
    padding-right:12px !important;
    gap:9px !important;
  }
  #publicToggleRow span,
  .checkline.wjb-public-toggle span{
    font-size:14px !important;
  }
}

/* v7.9: restore bottom nav on normal main/list/detail screens */
body.wjb-main-nav-on:not(.wjb-auth-only):not(.wjb-force-hide-nav) .wjb-v60-bottom-nav{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
body.wjb-force-hide-nav .wjb-v60-bottom-nav{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}


/* v8.0: when bottom nav is hidden, remove reserved floating-nav blank space */
body.wjb-force-hide-nav .app,
body.wjb-hide-bottom-nav .app,
body.wjb-subscreen-open .app,
body.wjb-edit-mode .app,
body.wjb-modal-open .app{
  padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important;
}
body.wjb-force-hide-nav #mainApp,
body.wjb-hide-bottom-nav #mainApp,
body.wjb-subscreen-open #mainApp,
body.wjb-edit-mode #mainApp{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}
body.wjb-force-hide-nav .form-box,
body.wjb-hide-bottom-nav .form-box,
body.wjb-subscreen-open .form-box,
body.wjb-edit-mode .form-box{
  margin-bottom:12px !important;
}
body.wjb-force-hide-nav .wjb-v60-bottom-nav,
body.wjb-hide-bottom-nav .wjb-v60-bottom-nav,
body.wjb-subscreen-open .wjb-v60-bottom-nav,
body.wjb-edit-mode .wjb-v60-bottom-nav,
body.wjb-modal-open .wjb-v60-bottom-nav{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
/* Keep enough room only when the real main bottom nav is visible */
body.wjb-main-nav-on:not(.wjb-force-hide-nav):not(.wjb-hide-bottom-nav):not(.wjb-edit-mode):not(.wjb-subscreen-open):not(.wjb-modal-open) .app{
  padding-bottom:108px !important;
}


/* v8.1: Auto bottom navigation.
   - Hidden on first load/top of main page for a cleaner hero.
   - Slides up automatically after scrolling down.
   - Stays hidden in login, edit, modal, popup, and subscreen states. */
.wjb-v60-bottom-nav{
  transform:translateX(-50%) translateY(120%) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:transform .28s ease, opacity .22s ease, visibility .22s ease !important;
}
body.wjb-auto-nav-visible:not(.wjb-auth-only):not(.wjb-force-hide-nav):not(.wjb-hide-bottom-nav):not(.wjb-edit-mode):not(.wjb-subscreen-open):not(.wjb-modal-open) .wjb-v60-bottom-nav{
  display:grid !important;
  transform:translateX(-50%) translateY(0) !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
body.wjb-auth-only .wjb-v60-bottom-nav,
body.wjb-force-hide-nav .wjb-v60-bottom-nav,
body.wjb-hide-bottom-nav .wjb-v60-bottom-nav,
body.wjb-edit-mode .wjb-v60-bottom-nav,
body.wjb-subscreen-open .wjb-v60-bottom-nav,
body.wjb-modal-open .wjb-v60-bottom-nav{
  display:none !important;
  transform:translateX(-50%) translateY(120%) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
/* No need to reserve big nav space until the auto nav is actually visible. */
body.wjb-main-nav-on:not(.wjb-auto-nav-visible):not(.wjb-force-hide-nav):not(.wjb-hide-bottom-nav):not(.wjb-edit-mode):not(.wjb-subscreen-open):not(.wjb-modal-open) .app{
  padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important;
}
body.wjb-auto-nav-visible.wjb-main-nav-on:not(.wjb-force-hide-nav):not(.wjb-hide-bottom-nav):not(.wjb-edit-mode):not(.wjb-subscreen-open):not(.wjb-modal-open) .app{
  padding-bottom:108px !important;
}


/* v8.2: robust auto bottom nav on main screen
   Fix: older hide classes could remain on normal list/detail cards and keep the nav hidden.
   This rule uses fresh JS state classes and wins over older nav hide rules. */
body.wjb-main-auto-nav-allowed .app{
  padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important;
}
body.wjb-main-auto-nav-allowed.wjb-main-auto-nav-visible .app{
  padding-bottom:108px !important;
}
body.wjb-main-auto-nav-allowed .wjb-v60-bottom-nav{
  display:grid !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateX(-50%) translateY(120%) !important;
  transition:transform .26s ease, opacity .22s ease, visibility .22s ease !important;
}
body.wjb-main-auto-nav-allowed.wjb-main-auto-nav-visible .wjb-v60-bottom-nav{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
}
body.wjb-auth-only .wjb-v60-bottom-nav,
body.wjb-real-modal-open .wjb-v60-bottom-nav,
body.wjb-real-edit-mode .wjb-v60-bottom-nav{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateX(-50%) translateY(120%) !important;
}
body.wjb-real-modal-open .app,
body.wjb-real-edit-mode .app{
  padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important;
}

/* v8.4: hard auto bottom nav fix
   The bottom nav was still hidden on long list scrolls because older CSS hide states could win.
   These classes are controlled by inline JS and win over all previous rules. */
body.wjb-v84-auto-nav-on .wjb-v60-bottom-nav{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
  transition:transform .24s ease, opacity .20s ease !important;
}
body.wjb-v84-auto-nav-off .wjb-v60-bottom-nav,
body.wjb-auth-only .wjb-v60-bottom-nav,
body.wjb-real-modal-open .wjb-v60-bottom-nav,
body.wjb-real-edit-mode .wjb-v60-bottom-nav{
  display:grid !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateX(-50%) translateY(125%) !important;
}
body.wjb-v84-auto-nav-on .app{padding-bottom:108px !important;}
body.wjb-v84-auto-nav-off .app{padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important;}


/* v8.4: Auto bottom nav list/main fix
   Shows bottom nav on normal main/list scrolling even if an old edit-state class is stuck. */
body.wjb-v84-auto-nav-on .wjb-v60-bottom-nav{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
}
body.wjb-v84-auto-nav-off .wjb-v60-bottom-nav,
body.wjb-auth-only .wjb-v60-bottom-nav,
body.wjb-v84-real-modal-open .wjb-v60-bottom-nav,
body.wjb-v84-real-edit-open .wjb-v60-bottom-nav{
  display:grid !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateX(-50%) translateY(125%) !important;
}
body.wjb-v84-auto-nav-on .app{padding-bottom:108px !important;}
body.wjb-v84-auto-nav-off .app,
body.wjb-v84-real-modal-open .app,
body.wjb-v84-real-edit-open .app{
  padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important;
}


/* v8.5 final auto nav: list-card aware controller */
body.wjb-v85-nav-show .wjb-v60-bottom-nav{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
  transition:transform .24s ease, opacity .24s ease, visibility .24s ease !important;
}
body.wjb-v85-nav-hide .wjb-v60-bottom-nav{
  display:grid !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateX(-50%) translateY(125%) !important;
  transition:transform .24s ease, opacity .24s ease, visibility .24s ease !important;
}

/* v8.6: simple scroll auto-nav final override
   Show the bottom toolbar on normal logged-in pages after the user scrolls down.
   This is intentionally independent from older edit/subscreen state classes that can get stuck. */
body.wjb-v87-nav-hide .wjb-v60-bottom-nav{
  display:grid !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateX(-50%) translateY(128%) !important;
}
body.wjb-v87-nav-show:not(.wjb-auth-only) .wjb-v60-bottom-nav{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
  transition:transform .22s ease, opacity .18s ease !important;
}
body.wjb-v87-nav-show:not(.wjb-auth-only) .app{
  padding-bottom:108px !important;
}
body.wjb-v87-nav-hide .app{
  padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important;
}


/* v8.7: Always-on bottom navigation.
   Decision: make the bottom toolbar a core app navigation instead of auto-hide.
   It is shown on every logged-in app screen and hidden only on Login/Register. */
body:not(.wjb-auth-only) .wjb-v60-bottom-nav{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
  transition:none !important;
  z-index:9999 !important;
}
body:not(.wjb-auth-only) .app{
  padding-bottom:calc(118px + env(safe-area-inset-bottom)) !important;
}
body.wjb-auth-only .wjb-v60-bottom-nav{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateX(-50%) translateY(130%) !important;
}
/* Prevent old auto-hide classes from reserving/removing space incorrectly. */
body:not(.wjb-auth-only).wjb-v86-nav-hide .wjb-v60-bottom-nav,
body:not(.wjb-auth-only).wjb-v85-nav-hide .wjb-v60-bottom-nav,
body:not(.wjb-auth-only).wjb-main-auto-nav-allowed .wjb-v60-bottom-nav,
body:not(.wjb-auth-only).wjb-auto-nav-visible .wjb-v60-bottom-nav{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
}


/* v8.8 edit-season scroll anchor */
#wjbFormDetailsStart{scroll-margin-top:calc(18px + env(safe-area-inset-top));}

/* v8.9: episode +1/-1 stepper, only for "ดูถึงตอนที่" */
.wjb-episode-stepper{
  width:100% !important;
  display:grid !important;
  grid-template-columns:1fr auto !important;
  gap:10px !important;
  align-items:stretch !important;
  max-width:100% !important;
}
.wjb-episode-stepper input#episode{
  width:100% !important;
  min-width:0 !important;
  height:100% !important;
}
.wjb-episode-stepper-buttons{
  width:104px !important;
  min-width:104px !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
}
.wjb-episode-step-btn{
  width:100% !important;
  min-width:0 !important;
  min-height:56px !important;
  padding:0 !important;
  border-radius:16px !important;
  font-size:17px !important;
  font-weight:900 !important;
  line-height:1 !important;
  display:grid !important;
  place-items:center !important;
  touch-action:manipulation !important;
  user-select:none !important;
  -webkit-user-select:none !important;
}
.wjb-episode-step-btn.plus{
  background:linear-gradient(135deg,#0ea5e9,#7c3aed) !important;
  box-shadow:0 0 22px rgba(56,189,248,.16) !important;
}
.wjb-episode-step-btn.minus{
  background:rgba(15,23,42,.82) !important;
  border:1px solid rgba(148,163,184,.28) !important;
  color:#e5e7eb !important;
}
@media(max-width:420px){
  .wjb-episode-stepper{grid-template-columns:1fr 92px !important;gap:8px !important;}
  .wjb-episode-stepper-buttons{width:92px !important;min-width:92px !important;gap:6px !important;}
  .wjb-episode-step-btn{font-size:15px !important;border-radius:14px !important;}
}


/* v9.0 final: bottom nav is a permanent app toolbar after login */
body.wjb-v90-nav-always-on:not(.wjb-auth-only) .wjb-v60-bottom-nav,
body:not(.wjb-auth-only) .wjb-v60-bottom-nav{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
  transition:none !important;
  z-index:999999 !important;
}
body.wjb-auth-only .wjb-v60-bottom-nav{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateX(-50%) translateY(130%) !important;
}
body.wjb-v90-nav-always-on:not(.wjb-auth-only) .app,
body:not(.wjb-auth-only) .app{
  padding-bottom:calc(122px + env(safe-area-inset-bottom)) !important;
}

/* v9.0: make +1/-1 buttons reliably tappable on iPhone/Safari */
.wjb-episode-stepper,
.wjb-episode-stepper *{
  pointer-events:auto !important;
}
.wjb-episode-step-btn{
  position:relative !important;
  z-index:30 !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:rgba(56,189,248,.18) !important;
}


/* v11.5 stable permanent bottom toolbar after login */
body.wjb-v115-nav-ready:not(.wjb-auth-only) .wjb-v60-bottom-nav,
body:not(.wjb-auth-only) .wjb-v60-bottom-nav{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
  transition:none !important;
  will-change:auto !important;
}
body.wjb-auth-only .wjb-v60-bottom-nav{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
body.wjb-v115-nav-ready:not(.wjb-auth-only) .app{
  padding-bottom:calc(122px + env(safe-area-inset-bottom)) !important;
}
/* Avoid old classes hiding the toolbar after login */
body:not(.wjb-auth-only).wjb-hide-bottom-nav .wjb-v60-bottom-nav,
body:not(.wjb-auth-only).wjb-force-hide-nav .wjb-v60-bottom-nav,
body:not(.wjb-auth-only).wjb-subscreen-open .wjb-v60-bottom-nav,
body:not(.wjb-auth-only).wjb-edit-mode .wjb-v60-bottom-nav,
body:not(.wjb-auth-only).wjb-real-edit-mode .wjb-v60-bottom-nav,
body:not(.wjb-auth-only).wjb-real-modal-open .wjb-v60-bottom-nav,
body:not(.wjb-auth-only).wjb-v84-auto-nav-off .wjb-v60-bottom-nav,
body:not(.wjb-auth-only).wjb-v85-nav-hide .wjb-v60-bottom-nav,
body:not(.wjb-auth-only).wjb-v86-nav-hide .wjb-v60-bottom-nav,
body:not(.wjb-auth-only).wjb-v87-nav-hide .wjb-v60-bottom-nav{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
}

/* v9.2 iPhone menu drawer bottom safe area fix */
.premium-user-menu.menu-panel{
  max-height:calc(100svh - 20px) !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  padding-bottom:calc(160px + env(safe-area-inset-bottom)) !important;
}
@media (max-width:560px){
 .premium-user-menu.menu-panel{
   max-height:calc(100svh - 20px) !important;
   padding-bottom:calc(180px + env(safe-area-inset-bottom)) !important;
 }
}

/* v9.3 Premium Compact Accordion Menu
   - จัดเมนูเป็นหมวด ลดความยาวของ Drawer
   - ยังรองรับ iPhone/Safari safe area และ Bottom Nav
*/
.wjb-menu-groups{
  display:grid !important;
  gap:10px !important;
}
.wjb-menu-group{
  display:block !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:rgba(2,8,23,.34) !important;
  border:1px solid rgba(148,163,184,.14) !important;
}
.wjb-menu-group-summary{
  list-style:none !important;
  cursor:pointer !important;
  min-height:46px !important;
  padding:11px 12px !important;
  display:grid !important;
  grid-template-columns:30px 1fr auto !important;
  align-items:center !important;
  gap:10px !important;
  color:#f8fafc !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent !important;
  width:100% !important;
  border:0 !important;
  background:transparent !important;
  text-align:left !important;
  font:inherit !important;
}
.wjb-menu-group-summary span{
  width:30px !important;
  height:30px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:10px !important;
  background:rgba(14,165,233,.12) !important;
}
.wjb-menu-group-summary b{
  font-size:15px !important;
  letter-spacing:-.01em !important;
}
.wjb-menu-group-summary em{
  font-style:normal !important;
  font-size:11px !important;
  color:rgba(203,213,225,.72) !important;
}
.wjb-menu-group:not(.open) .wjb-menu-group-summary{
  background:rgba(15,23,42,.38) !important;
}
.wjb-menu-group:not(.open) .wjb-menu-group-summary::after{
  content:'+' !important;
  margin-left:8px !important;
  font-size:18px !important;
  color:#38bdf8 !important;
}
.wjb-menu-group.open .wjb-menu-group-summary::after{
  content:'−' !important;
  margin-left:8px !important;
  font-size:18px !important;
  color:#38bdf8 !important;
}
.wjb-menu-group:not(.open) .wjb-menu-group-body{
  display:none !important;
}
.wjb-menu-group-body{
  display:grid !important;
  gap:8px !important;
  padding:0 8px 8px !important;
}
.wjb-menu-group-body .premium-menu-item{
  min-height:54px !important;
  grid-template-columns:38px 1fr 16px !important;
  padding:10px !important;
  border-radius:14px !important;
}
.wjb-menu-group-body .premium-menu-icon{
  width:36px !important;
  height:36px !important;
  border-radius:11px !important;
  font-size:18px !important;
}
.wjb-menu-group-body .premium-menu-text b{font-size:15px !important;}
.wjb-menu-group-body .premium-menu-text small{font-size:11px !important;}
.premium-user-menu.menu-panel .logout-item{
  margin-top:2px !important;
  min-height:54px !important;
}
.premium-user-menu.menu-panel{
  padding-bottom:calc(135px + env(safe-area-inset-bottom)) !important;
}
@media (max-width:560px){
  .premium-user-menu.menu-panel{
    width:min(88vw,315px) !important;
    max-height:calc(100svh - max(18px, env(safe-area-inset-top))) !important;
    padding-bottom:calc(150px + env(safe-area-inset-bottom)) !important;
  }
  .wjb-menu-group-summary em{display:none !important;}
  .wjb-menu-group-summary{grid-template-columns:30px 1fr auto !important;}
}

/* WJB v10 Premium Search Cards */
.smart-head{
  align-items:flex-start!important;
  flex-wrap:wrap!important;
}
.smart-head b::after{
  content:" · v10 Premium";
  color:#7dd3fc;
  font-weight:800;
}
.smart-head span{
  flex:1 1 100%;
  color:#a8bed8;
}
#smartSuggestList{
  display:grid;
  gap:10px;
}
.smart-result.wjb-v10-result{
  grid-template-columns:76px 1fr!important;
  gap:12px!important;
  align-items:stretch!important;
  border-radius:20px!important;
  padding:12px!important;
  margin:0!important;
  background:linear-gradient(145deg,rgba(8,18,39,.95),rgba(15,23,42,.82))!important;
  border:1px solid rgba(56,189,248,.22)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04)!important;
  overflow:hidden!important;
}
.smart-result.wjb-v10-result:active{
  transform:scale(.985);
}
.smart-result.wjb-v10-result img{
  width:76px!important;
  height:108px!important;
  border-radius:14px!important;
  box-shadow:0 10px 22px rgba(0,0,0,.28)!important;
}
.wjb-v10-result-body{
  min-width:0;
  display:grid;
  gap:7px;
}
.wjb-v10-title-row{
  display:flex;
  gap:8px;
  align-items:flex-start;
  justify-content:space-between;
}
.wjb-v10-title-row b{
  font-size:17px!important;
  line-height:1.22!important;
  margin:0!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.wjb-v10-score{
  flex:0 0 auto;
  color:#fde68a;
  font-weight:950;
  background:rgba(245,158,11,.14);
  border:1px solid rgba(245,158,11,.24);
  border-radius:999px;
  padding:4px 8px;
  font-size:12px;
}
.wjb-v10-meta,
.wjb-v10-source,
.wjb-v10-stats{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.wjb-v10-badge,
.wjb-v10-pill{
  border-radius:999px;
  padding:4px 8px;
  font-size:12px;
  font-weight:850;
  line-height:1;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(148,163,184,.13);
  color:#dbeafe;
}
.wjb-v10-badge.anime{background:rgba(14,165,233,.22);color:#bae6fd;border-color:rgba(56,189,248,.32)}
.wjb-v10-badge.movie{background:rgba(168,85,247,.20);color:#e9d5ff;border-color:rgba(168,85,247,.34)}
.wjb-v10-badge.series{background:rgba(16,185,129,.16);color:#bbf7d0;border-color:rgba(16,185,129,.30)}
.wjb-v10-badge.other{background:rgba(100,116,139,.16);color:#cbd5e1;border-color:rgba(148,163,184,.24)}
.wjb-v10-stat{
  color:#c7d2fe;
  font-size:12px;
  font-weight:800;
}
.wjb-v10-note{
  color:#94a3b8!important;
  font-size:12px!important;
  margin:0!important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.wjb-v10-actions{
  display:flex;
  gap:8px;
  margin-top:2px;
}
.wjb-v10-action-primary,
.wjb-v10-action-secondary{
  border-radius:999px;
  padding:8px 10px;
  font-size:12px;
  font-weight:900;
}
.wjb-v10-action-primary{background:linear-gradient(135deg,#0ea5e9,#7c3aed);color:white;}
.wjb-v10-action-secondary{background:rgba(51,65,85,.78);color:#dbeafe;}
@media(max-width:420px){
  .smart-result.wjb-v10-result{grid-template-columns:68px 1fr!important;padding:10px!important;}
  .smart-result.wjb-v10-result img{width:68px!important;height:96px!important;}
  .wjb-v10-title-row b{font-size:16px!important;}
  .wjb-v10-note{display:none;}
}

/* WJB v10.1 Audit Fix: action buttons + bottom sheet detail */
.smart-result.wjb-v10-result{
  cursor:pointer!important;
  text-align:left!important;
}
.wjb-v10-actions button{
  border:0!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  cursor:pointer!important;
}
.wjb-smart-sheet-backdrop{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:16px;
  background:rgba(2,6,23,.62);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.wjb-smart-sheet{
  width:min(560px,100%);
  max-height:calc(88dvh - env(safe-area-inset-bottom));
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:28px 28px 22px 22px;
  padding:18px;
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(155deg,rgba(8,18,39,.98),rgba(15,23,42,.94));
  border:1px solid rgba(56,189,248,.25);
  box-shadow:0 -24px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
  color:#e5f0ff;
  position:relative;
}
.wjb-smart-sheet-close{
  position:absolute;
  top:12px;
  right:12px;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(15,23,42,.9);
  color:#fff;
  font-size:24px;
  font-weight:900;
}
.wjb-smart-sheet-head{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:14px;
  align-items:start;
  padding-right:36px;
}
.wjb-smart-sheet-head img,
.wjb-smart-sheet-poster{
  width:88px;
  height:124px;
  border-radius:16px;
  object-fit:cover;
  background:rgba(30,41,59,.8);
  display:grid;
  place-items:center;
  font-weight:950;
  color:#7dd3fc;
}
.wjb-smart-sheet h3{
  margin:4px 0 6px;
  font-size:24px;
  line-height:1.15;
}
.wjb-smart-sheet p{
  margin:0;
  color:#b6c7df;
}
.wjb-smart-sheet-alt{
  margin-top:14px!important;
  font-weight:800;
  color:#dbeafe!important;
}
.wjb-smart-sheet-note{
  margin-top:12px!important;
  line-height:1.65;
}
.wjb-smart-sheet-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:16px;
}
.wjb-smart-sheet-actions button{
  border:0;
  border-radius:16px;
  padding:14px 12px;
  font-weight:950;
  color:white;
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
}
.wjb-smart-sheet-actions button:last-child{
  background:rgba(51,65,85,.92);
  color:#dbeafe;
}
@media(max-width:420px){
  .wjb-smart-sheet-backdrop{padding:10px;}
  .wjb-smart-sheet{border-radius:24px 24px 18px 18px;}
  .wjb-smart-sheet-head{grid-template-columns:74px 1fr;}
  .wjb-smart-sheet-head img,.wjb-smart-sheet-poster{width:74px;height:104px;}
  .wjb-smart-sheet h3{font-size:20px;}
  .wjb-smart-sheet-actions{grid-template-columns:1fr;}
}

/* WJB v11 Premium Search UI - mockup applied */
.smart-head b::after{content:" · v11 Premium"!important;color:#c4b5fd!important;}
.smart-suggest-box{background:linear-gradient(180deg,rgba(3,7,18,.92),rgba(8,18,39,.88))!important;border-color:rgba(96,165,250,.24)!important;box-shadow:0 22px 70px rgba(0,0,0,.24)!important;}
#smartSuggestList{gap:12px!important;}
.smart-result.wjb-v10-result.wjb-v11-result{grid-template-columns:92px 1fr!important;gap:14px!important;min-height:158px!important;padding:12px!important;border-radius:22px!important;background:linear-gradient(145deg,rgba(5,13,31,.98),rgba(11,25,51,.90))!important;border:1px solid rgba(96,165,250,.22)!important;box-shadow:0 18px 42px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05)!important;transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease!important;}
.smart-result.wjb-v10-result.wjb-v11-result:hover{border-color:rgba(168,85,247,.45)!important;box-shadow:0 22px 54px rgba(76,29,149,.22)!important;}
.smart-result.wjb-v10-result.wjb-v11-result:active{transform:scale(.97)!important;}
.smart-result.wjb-v10-result.wjb-v11-result img{width:92px!important;height:128px!important;border-radius:18px!important;object-fit:cover!important;align-self:start!important;box-shadow:0 12px 28px rgba(0,0,0,.35)!important;}
.wjb-v10-title-row b{font-size:18px!important;line-height:1.16!important;letter-spacing:-.02em!important;}
.wjb-v10-score{padding:5px 9px!important;font-size:13px!important;background:rgba(251,191,36,.12)!important;border-color:rgba(251,191,36,.35)!important;color:#fde68a!important;box-shadow:0 0 16px rgba(245,158,11,.10)!important;}
.wjb-v10-result-body{gap:6px!important;}
.wjb-v10-badge,.wjb-v10-pill,.wjb-v11-source-pill{border-radius:999px!important;padding:5px 8px!important;font-size:11px!important;font-weight:900!important;line-height:1!important;border:1px solid rgba(148,163,184,.18)!important;background:rgba(15,23,42,.65)!important;color:#dbeafe!important;}
.wjb-v10-badge.anime{background:rgba(14,165,233,.24)!important;color:#bae6fd!important;border-color:rgba(56,189,248,.36)!important;}
.wjb-v10-badge.movie{background:rgba(168,85,247,.30)!important;color:#f3e8ff!important;border-color:rgba(168,85,247,.45)!important;}
.wjb-v10-badge.series{background:rgba(34,197,94,.22)!important;color:#bbf7d0!important;border-color:rgba(34,197,94,.38)!important;}
.wjb-v10-stats{gap:9px!important;}
.wjb-v10-stat{font-size:12px!important;color:#c7d2fe!important;}
.wjb-v11-popular{color:#fb923c!important;}
.wjb-v10-note{font-size:13px!important;line-height:1.35!important;-webkit-line-clamp:2!important;color:#9fb0c8!important;}
.wjb-v11-stars{display:flex;align-items:center;gap:8px;color:#fbbf24;font-size:13px;font-weight:950;letter-spacing:.05em;}
.wjb-v11-stars span{letter-spacing:0;color:#c4b5fd;font-size:11px;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.22);border-radius:999px;padding:3px 7px;}
.wjb-v10-source{gap:6px!important;}
.wjb-v11-source-pill{display:inline-flex;align-items:center;gap:4px;background:rgba(30,41,59,.55)!important;}
.wjb-v11-actions{display:grid!important;grid-template-columns:minmax(82px,1fr) 44px minmax(98px,1fr)!important;gap:8px!important;margin-top:4px!important;}
.wjb-v11-actions button{min-height:38px!important;border-radius:999px!important;padding:8px 10px!important;font-size:12px!important;white-space:nowrap!important;}
.wjb-v11-icon-action{font-size:18px!important;color:#fb7185!important;background:rgba(244,63,94,.10)!important;border:1px solid rgba(244,63,94,.25)!important;}
.wjb-v10-action-primary{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;box-shadow:0 10px 24px rgba(37,99,235,.20)!important;}
.wjb-v10-action-secondary{background:rgba(15,23,42,.68)!important;border:1px solid rgba(148,163,184,.18)!important;color:#dbeafe!important;}
.wjb-v11-sheet-backdrop{background:rgba(2,6,23,.70)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;}
.wjb-v11-sheet{border-radius:30px 30px 24px 24px!important;background:linear-gradient(160deg,rgba(8,18,39,.98),rgba(4,12,28,.96))!important;border-color:rgba(147,197,253,.26)!important;box-shadow:0 -28px 80px rgba(0,0,0,.55),0 0 80px rgba(124,58,237,.15)!important;}
.wjb-v11-grabber{width:54px;height:5px;border-radius:999px;background:rgba(226,232,240,.38);margin:0 auto 14px;}
.wjb-v11-sheet-head{grid-template-columns:104px 1fr!important;gap:16px!important;}
.wjb-v11-sheet-head img,.wjb-v11-sheet-head .wjb-smart-sheet-poster{width:104px!important;height:146px!important;border-radius:20px!important;box-shadow:0 14px 34px rgba(0,0,0,.36)!important;}
.wjb-v11-sheet h3{font-size:24px!important;letter-spacing:-.03em!important;}
.wjb-v11-sheet-source{margin-top:8px!important;}
.wjb-v11-rating-row{display:flex;align-items:center;gap:12px;margin-top:12px;}
.wjb-v11-main-score{display:flex;align-items:baseline;gap:4px;color:#f8fafc;}
.wjb-v11-main-score span{font-size:24px}.wjb-v11-main-score b{font-size:30px}.wjb-v11-main-score small{color:#9ca3af;font-weight:800;}
.wjb-v11-wjb-score{margin-left:auto;min-width:86px;border-radius:18px;padding:10px 12px;text-align:center;background:linear-gradient(160deg,rgba(88,28,135,.42),rgba(30,64,175,.20));border:1px solid rgba(217,70,239,.36);box-shadow:0 0 30px rgba(168,85,247,.12);}
.wjb-v11-wjb-score small{display:block;color:#e879f9;font-size:10px;font-weight:950;}.wjb-v11-wjb-score b{display:block;font-size:32px;color:#c084fc;line-height:1;}.wjb-v11-wjb-score em{font-style:normal;font-size:11px;color:#fde68a;font-weight:900;}
.wjb-v11-star-line{margin:14px 0 12px;color:#fbbf24;font-size:28px;letter-spacing:.04em;}
.wjb-v11-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid rgba(148,163,184,.18);border-radius:18px;overflow:hidden;background:rgba(15,23,42,.40);margin:8px 0 14px;}
.wjb-v11-metrics div{padding:12px 8px;text-align:center;border-right:1px solid rgba(148,163,184,.14);}.wjb-v11-metrics div:last-child{border-right:0}.wjb-v11-metrics b{display:block;color:#f8fafc;font-size:18px}.wjb-v11-metrics span{display:block;color:#9ca3af;font-size:12px;margin-top:2px;}
.wjb-v11-section-title{margin:14px 0 8px;color:#e5e7eb;font-size:15px;}.wjb-v11-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}.wjb-v11-tags span{border:1px solid rgba(148,163,184,.18);border-radius:999px;padding:7px 11px;color:#dbeafe;background:rgba(15,23,42,.48);font-weight:800;font-size:12px;}
.wjb-v11-sheet-actions{grid-template-columns:1fr 1fr!important;}.wjb-v11-sheet-actions button:first-child{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;}.wjb-v11-sheet-actions button:last-child{background:rgba(15,23,42,.72)!important;border:1px solid rgba(148,163,184,.22)!important;color:#e0e7ff!important;}
.wjb-v11-mini-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;}.wjb-v11-mini-actions button{border:0;background:transparent;color:#cbd5e1;font-weight:800;display:grid;gap:4px;place-items:center;padding:8px;border-radius:14px;}.wjb-v11-mini-actions button:active{background:rgba(148,163,184,.10);}.wjb-v11-mini-actions span{font-size:11px;}
@media(max-width:420px){.smart-result.wjb-v10-result.wjb-v11-result{grid-template-columns:78px 1fr!important;min-height:142px!important;padding:10px!important;}.smart-result.wjb-v10-result.wjb-v11-result img{width:78px!important;height:110px!important;border-radius:15px!important;}.wjb-v10-title-row b{font-size:16px!important;}.wjb-v10-note{display:-webkit-box!important;font-size:12px!important;}.wjb-v11-stars{display:none!important;}.wjb-v11-actions{grid-template-columns:1fr 40px 1fr!important;}.wjb-v11-actions button{font-size:11px!important;min-height:36px!important;padding:7px 8px!important;}.wjb-v11-sheet-head{grid-template-columns:84px 1fr!important;}.wjb-v11-sheet-head img,.wjb-v11-sheet-head .wjb-smart-sheet-poster{width:84px!important;height:118px!important;}.wjb-v11-main-score b{font-size:24px}.wjb-v11-wjb-score{min-width:72px;padding:8px}.wjb-v11-wjb-score b{font-size:26px}.wjb-v11-star-line{font-size:23px}.wjb-v11-metrics b{font-size:15px}}


/* WJB v11.2 Global Safe Area Fix
   Fixes iPhone/Safari bottom content being hidden behind bottom nav/address bar.
   Applies to main pages, list/details, trending, season, admin, AI, menu, and smart sheets. */
:root{
  --wjb-nav-height-v115: 92px;
  --wjb-bottom-safe-v115: calc(var(--wjb-nav-height-v115) + env(safe-area-inset-bottom) + 44px);
  --wjb-modal-bottom-safe-v115: calc(var(--wjb-nav-height-v115) + env(safe-area-inset-bottom) + 64px);
}
html{
  scroll-padding-bottom: var(--wjb-bottom-safe-v115) !important;
}
body{
  padding-bottom: env(safe-area-inset-bottom) !important;
}
.app,
#mainApp{
  padding-bottom: var(--wjb-bottom-safe-v115) !important;
}
#list,
.form-box,
.view-bar,
.backup,
.premium-tools,
.user-box,
.premium-user-menu,
.trending-content,
.personal-ai-content,
.admin-content,
#seasonDetailList,
#smartSuggestList{
  padding-bottom: var(--wjb-bottom-safe-v115) !important;
  scroll-padding-bottom: var(--wjb-bottom-safe-v115) !important;
}
/* make every popup/modal truly scrollable on iPhone */
.settings-modal,
.modal,
.wjb-smart-sheet-backdrop,
.wjb-v11-sheet-backdrop{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: max(14px, env(safe-area-inset-top)) !important;
  padding-bottom: var(--wjb-modal-bottom-safe-v115) !important;
}
.settings-box,
.modal-content,
.trending-box,
.ai-box,
.season-detail-box,
.admin-box,
.wjb-smart-sheet,
.wjb-v11-sheet{
  max-height: calc(100svh - env(safe-area-inset-top) - var(--wjb-nav-height-v115) - env(safe-area-inset-bottom) - 28px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  padding-bottom: var(--wjb-modal-bottom-safe-v115) !important;
  margin-bottom: calc(env(safe-area-inset-bottom) + 28px) !important;
}
/* prevent last cards/buttons from being trapped under the bottom nav */
.trending-content::after,
.personal-ai-content::after,
.admin-content::after,
#seasonDetailList::after,
#list::after,
#smartSuggestList::after{
  content:"";
  display:block;
  height:var(--wjb-bottom-safe-v115);
  flex:0 0 var(--wjb-bottom-safe-v115);
}
/* sticky close buttons should not collide with status bar */
.season-close-btn,
.premium-menu-close,
.settings-box > button:first-child,
.trending-box > button:first-child,
.season-detail-box > button:first-child,
.ai-box > button:first-child{
  position: sticky !important;
  top: max(8px, env(safe-area-inset-top)) !important;
  z-index: 30 !important;
}
/* bottom nav itself respects the iPhone home indicator */
.wjb-v60-bottom-nav{
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
}
@media(max-width:720px){
  .app,#mainApp{padding-bottom:calc(var(--wjb-bottom-safe-v115) + 18px) !important;}
  .settings-modal,.modal,.wjb-smart-sheet-backdrop,.wjb-v11-sheet-backdrop{padding-left:8px !important;padding-right:8px !important;}
  .settings-box,.modal-content,.trending-box,.ai-box,.season-detail-box,.admin-box{width:100% !important;}
}


/* WJB v11.5 Structure Polish Clean
   Global scroll/safe-area polish for iPhone Safari and long screens. */
:root{
  --wjb-nav-height-v115: 92px;
  --wjb-bottom-safe-v115: calc(var(--wjb-nav-height-v115) + env(safe-area-inset-bottom) + 56px);
  --wjb-modal-bottom-safe-v115: calc(var(--wjb-nav-height-v115) + env(safe-area-inset-bottom) + 76px);
}
html,body{scroll-padding-bottom:var(--wjb-bottom-safe-v115)!important;}
.app,#mainApp{padding-bottom:calc(var(--wjb-bottom-safe-v115) + 18px)!important;}
.card,.section,.form-card,.items-list,.admin-panel,.settings-box,.modal-content,.smart-results,.smart-box,.trending-list,.season-detail-list{scroll-padding-bottom:var(--wjb-bottom-safe-v115)!important;}
.wjb-v60-bottom-nav{z-index:2147483000!important;}
.wjb-safe-bottom-spacer,.wjb-v115-safe-bottom-spacer{height:var(--wjb-bottom-safe-v115)!important;min-height:var(--wjb-bottom-safe-v115)!important;flex:0 0 var(--wjb-bottom-safe-v115)!important;}
.settings-modal,.modal,.wjb-smart-sheet-backdrop,.wjb-v11-sheet-backdrop{padding-bottom:calc(env(safe-area-inset-bottom) + 10px)!important;}
.wjb-smart-sheet,.wjb-v11-sheet,.settings-box,.modal-content{max-height:calc(100svh - env(safe-area-inset-top) - 26px)!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;padding-bottom:var(--wjb-modal-bottom-safe-v115)!important;}
.wjb-v11-actions button,.wjb-v11-sheet-actions button,.wjb-v11-icon-action{touch-action:manipulation!important;}
.just-added-card{animation:wjbV114FocusPulse 1.8s ease 1!important;}
@keyframes wjbV114FocusPulse{0%,100%{box-shadow:0 0 0 rgba(56,189,248,0)}35%{box-shadow:0 0 0 4px rgba(56,189,248,.28),0 0 40px rgba(124,58,237,.28)}}

/* =========================================================
   WJB v12.1 Safe Modular Core — Cross-platform safe UI layer
   Free 100%: no paid APIs, no paid libraries.
   ========================================================= */
:root{
  --wjb-v12-bottom-safe: calc(112px + env(safe-area-inset-bottom, 0px));
  --wjb-v12-top-safe: calc(16px + env(safe-area-inset-top, 0px));
}
html.wjb-v12-free-core-ready body{
  padding-bottom: var(--wjb-v12-bottom-safe);
}
.wjb-v12-free-core-ready .settings-modal,
.wjb-v12-free-core-ready .modal,
.wjb-v12-free-core-ready .trending-modal,
.wjb-v12-free-core-ready .wjb-detail-sheet{
  padding: var(--wjb-v12-top-safe) 12px var(--wjb-v12-bottom-safe) !important;
  overscroll-behavior: contain;
}
.wjb-v12-free-core-ready .settings-box,
.wjb-v12-free-core-ready .modal-content,
.wjb-v12-free-core-ready .season-detail-box,
.wjb-v12-free-core-ready .system-health-box{
  max-height: calc(100svh - var(--wjb-v12-bottom-safe) - 24px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)) !important;
}
.system-health-box{max-width:920px;width:min(94vw,920px)}
.system-health-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 16px}
.system-health-content h3{margin:18px 0 10px}
.wjb-v12-health-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.wjb-v12-health-card{border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(36,20,78,.72),rgba(6,18,36,.72));border-radius:18px;padding:14px;box-shadow:0 14px 34px rgba(0,0,0,.25)}
.wjb-v12-health-card small{display:block;color:#aeb8d5;margin-bottom:6px}
.wjb-v12-health-card b{display:block;font-size:1.05rem;color:#fff;margin-bottom:4px}
.wjb-v12-health-card span{display:block;color:#cdd7f4;font-size:.86rem;word-break:break-word}
.wjb-v12-pill{display:inline-flex!important;align-items:center;gap:4px;border-radius:999px;padding:6px 10px;font-weight:800;font-size:.86rem}
.wjb-v12-pill.ok{background:rgba(34,197,94,.13);color:#bbf7d0;border:1px solid rgba(34,197,94,.28)}
.wjb-v12-pill.bad{background:rgba(239,68,68,.13);color:#fecaca;border:1px solid rgba(239,68,68,.28)}
.wjb-v12-health-list{display:grid;gap:8px}
.wjb-v12-health-row{display:flex;justify-content:space-between;gap:12px;border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:11px 12px;background:rgba(255,255,255,.05)}
.wjb-v12-error-list{display:grid;gap:8px}.wjb-v12-error{border:1px solid rgba(251,191,36,.18);background:rgba(251,191,36,.08);border-radius:14px;padding:10px}.wjb-v12-error b,.wjb-v12-error span,.wjb-v12-error small{display:block}.wjb-v12-error small{color:#aeb8d5;margin-top:4px}.wjb-v12-empty,.wjb-v12-loading{padding:16px;border-radius:16px;background:rgba(255,255,255,.06);color:#cdd7f4}.wjb-v12-details{margin-top:12px;color:#cdd7f4}.wjb-v12-details p{word-break:break-word;font-size:.82rem}.wjb-v12-dev-panel{position:fixed;left:12px;right:12px;bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:99999;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:18px;background:rgba(5,11,28,.86);backdrop-filter:blur(18px);border:1px solid rgba(124,58,237,.38);box-shadow:0 20px 40px rgba(0,0,0,.38);color:white;font-size:.78rem}.wjb-v12-dev-panel button{width:32px;height:32px;border-radius:50%;padding:0;flex:none}.wjb-v12-dev-panel #wjbV12DevPanelContent{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.wjb-v12-dev-panel span{color:#cdd7f4}@media (min-width:760px){.wjb-v12-dev-panel{left:auto;right:18px;max-width:520px;bottom:24px}.wjb-v12-free-core-ready .settings-box,.wjb-v12-free-core-ready .modal-content{max-height:calc(100svh - 48px)!important}}

/* WJB v12.2 QA Center Free — admin-only diagnostics, no paid services */
.qa-center-box{max-width:min(980px, calc(100vw - 18px)) !important;}
.qa-center-content{padding-bottom:calc(92px + env(safe-area-inset-bottom));}
.qa-score-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;margin:14px 0 18px;}
.qa-score-card{border:1px solid rgba(148,163,184,.22);background:linear-gradient(180deg,rgba(30,41,59,.82),rgba(15,23,42,.72));border-radius:18px;padding:14px;box-shadow:0 14px 28px rgba(0,0,0,.22);}
.qa-score-card small{display:block;color:#94a3b8;font-size:12px;margin-bottom:6px;}
.qa-score-card b{display:block;font-size:28px;line-height:1.05;color:#e0f2fe;}
.qa-score-card span{display:block;color:#cbd5e1;font-size:12px;margin-top:5px;}
.qa-group{border:1px solid rgba(148,163,184,.2);border-radius:16px;margin:10px 0;overflow:hidden;background:rgba(15,23,42,.42);}
.qa-group summary{cursor:pointer;padding:12px 14px;font-weight:800;color:#e2e8f0;background:rgba(124,58,237,.14);}
.qa-row{gap:12px;align-items:flex-start;}
.qa-row span{max-width:56%;text-align:right;word-break:break-word;}
.qa-manual-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:10px;}
.qa-manual-item{display:flex;align-items:center;gap:10px;border:1px solid rgba(148,163,184,.2);background:rgba(15,23,42,.48);border-radius:14px;padding:12px;color:#e2e8f0;font-weight:700;}
.qa-manual-item input{width:20px;height:20px;accent-color:#22c55e;}
.qa-report-text{white-space:pre-wrap;max-height:280px;overflow:auto;background:rgba(2,6,23,.72);border-radius:14px;padding:12px;color:#dbeafe;font-size:12px;}
.qa-center-menu-btn .premium-menu-icon{background:linear-gradient(135deg,#22c55e,#06b6d4) !important;}
@media (max-width:560px){.qa-row{display:block}.qa-row span{display:block;max-width:100%;text-align:left;margin-top:6px}.qa-score-card b{font-size:24px}.qa-manual-list{grid-template-columns:1fr}}


/* WJB v12.3 Overlay + Search Card Safe Fix
   - Fixes premium search card actions/details overflowing outside card.
   - Unifies bottom safe area for iPhone Safari + Android Chrome.
   - Prevents invisible overlays from blocking scroll after bottom navigation. */
:root{
  --wjb-v123-nav-height: 96px;
  --wjb-v123-bottom-safe: calc(var(--wjb-v123-nav-height) + env(safe-area-inset-bottom) + 56px);
}
html, body{
  max-width:100% !important;
  overflow-x:hidden !important;
  overscroll-behavior-x:none !important;
}
body:not(.wjb-modal-open):not(.wjb-v123-scroll-locked){
  overflow-y:auto !important;
  touch-action:auto !important;
}
.app, #mainApp{
  padding-bottom:var(--wjb-v123-bottom-safe) !important;
  min-height:100svh !important;
}
#smartSuggestList,
.smart-suggest-box,
.smart-result,
.smart-result *{
  box-sizing:border-box !important;
}
.smart-suggest-box,
#smartSuggestList{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}
.smart-result.wjb-v10-result,
.smart-result.wjb-v10-result.wjb-v11-result{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  min-height:unset !important;
  overflow:hidden !important;
  grid-template-columns:92px minmax(0,1fr) !important;
  align-items:start !important;
  contain:layout paint !important;
}
.smart-result.wjb-v10-result img,
.smart-result.wjb-v10-result.wjb-v11-result img{
  max-width:100% !important;
  object-fit:cover !important;
}
.wjb-v10-result-body,
.wjb-v10-title-row,
.wjb-v10-meta,
.wjb-v10-source,
.wjb-v10-stats,
.wjb-v10-actions{
  min-width:0 !important;
  max-width:100% !important;
}
.wjb-v10-title-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:start !important;
}
.wjb-v10-title-row b{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.wjb-v10-score{
  max-width:68px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  font-size:12px !important;
  padding:4px 7px !important;
}
.wjb-v10-note{
  max-width:100% !important;
  overflow:hidden !important;
  word-break:break-word !important;
}
.wjb-v10-actions,
.wjb-v11-actions{
  width:100% !important;
  max-width:100% !important;
  display:grid !important;
  grid-template-columns:minmax(70px,1fr) 42px minmax(82px,1fr) !important;
  gap:8px !important;
  overflow:hidden !important;
  padding:0 !important;
  margin-top:6px !important;
}
.wjb-v10-actions button,
.wjb-v11-actions button{
  min-width:0 !important;
  max-width:100% !important;
  width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  line-height:1.15 !important;
}
.wjb-v10-action-secondary:not(.wjb-v11-icon-action){
  font-size:11px !important;
  padding-left:8px !important;
  padding-right:8px !important;
}
.wjb-v11-icon-action{
  width:42px !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
@media(max-width:430px){
  .smart-result.wjb-v10-result,
  .smart-result.wjb-v10-result.wjb-v11-result{
    grid-template-columns:76px minmax(0,1fr) !important;
    gap:10px !important;
    padding:10px !important;
  }
  .smart-result.wjb-v10-result img,
  .smart-result.wjb-v10-result.wjb-v11-result img{
    width:76px !important;
    height:106px !important;
    border-radius:15px !important;
  }
  .wjb-v10-title-row b{font-size:15px !important;}
  .wjb-v10-score{font-size:11px !important;max-width:58px !important;padding:4px 6px !important;}
  .wjb-v10-badge,.wjb-v10-pill,.wjb-v11-source-pill{font-size:10px !important;padding:4px 6px !important;}
  .wjb-v10-stat{font-size:11px !important;}
  .wjb-v10-note{font-size:11px !important;-webkit-line-clamp:2 !important;}
  .wjb-v10-actions,.wjb-v11-actions{grid-template-columns:minmax(58px,1fr) 38px minmax(70px,1fr) !important;gap:6px !important;}
  .wjb-v10-actions button,.wjb-v11-actions button{min-height:34px !important;font-size:10.5px !important;padding:6px 7px !important;}
  .wjb-v11-icon-action{width:38px !important;font-size:16px !important;}
}
/* overlays/sheets must not block the page once closed */
.settings-modal:not(.show):not(.active):not(.open)[style*="display: none"],
.modal:not(.show):not(.active):not(.open)[style*="display: none"]{
  pointer-events:none !important;
}
body.wjb-v123-cleaned-overlays .settings-modal:not(.show):not(.active):not(.open),
body.wjb-v123-cleaned-overlays .modal:not(.show):not(.active):not(.open){
  pointer-events:none !important;
}
/* every long screen gets enough final scroll space above bottom nav */
#list,.form-box,.view-bar,.backup,.premium-tools,.user-box,.trending-content,.personal-ai-content,.admin-content,#seasonDetailList,#smartSuggestList,.qa-center-content,.system-health-content{
  padding-bottom:var(--wjb-v123-bottom-safe) !important;
  scroll-padding-bottom:var(--wjb-v123-bottom-safe) !important;
}
.wjb-v60-bottom-nav{
  z-index:9000 !important;
}


/* WJB v12.4 Scroll Stability Fix
   Fixes iPhone/Android micro-jump while normal scrolling after v12.3.
   Root causes: dynamic 100svh recalculation, scroll anchoring, and layout containment on result cards. */
html.wjb-v12-4-scroll-stable,
html.wjb-v12-4-scroll-stable body{
  overflow-anchor:none !important;
  scroll-behavior:auto;
}
html.wjb-v12-4-scroll-stable body{
  min-height:100svh !important;
}
html.wjb-v12-4-scroll-stable .app,
html.wjb-v12-4-scroll-stable #mainApp{
  min-height:100svh !important;
  transform:none !important;
  will-change:auto !important;
}
/* Do not use layout containment on scrolling cards; Safari can re-anchor and jump. */
html.wjb-v12-4-scroll-stable .smart-result.wjb-v10-result,
html.wjb-v12-4-scroll-stable .smart-result.wjb-v10-result.wjb-v11-result{
  contain:none !important;
  content-visibility:visible !important;
  overflow:hidden !important;
  position:relative !important;
}
/* Reserve stable poster space before images finish loading to prevent content jumping. */
html.wjb-v12-4-scroll-stable .smart-result.wjb-v10-result img,
html.wjb-v12-4-scroll-stable .smart-result.wjb-v10-result.wjb-v11-result img{
  width:92px !important;
  height:128px !important;
  min-width:92px !important;
  min-height:128px !important;
  flex:0 0 92px !important;
  aspect-ratio:92 / 128 !important;
  backface-visibility:hidden !important;
}
@media(max-width:430px){
  html.wjb-v12-4-scroll-stable .smart-result.wjb-v10-result img,
  html.wjb-v12-4-scroll-stable .smart-result.wjb-v10-result.wjb-v11-result img{
    width:76px !important;
    height:106px !important;
    min-width:76px !important;
    min-height:106px !important;
    flex-basis:76px !important;
    aspect-ratio:76 / 106 !important;
  }
}
/* Avoid accidental vertical scroll jumps caused by old smooth-scroll helpers while the user is actively touching the page. */
html.wjb-v12-4-user-scrolling{
  scroll-behavior:auto !important;
}
html.wjb-v12-4-user-scrolling *{
  scroll-behavior:auto !important;
}


/* WJB v12.5 No-Jitter Scroll Fix
   Keep layout stable during native momentum scroll on iPhone/Android. */
html.wjb-v12-5-no-jitter,
html.wjb-v12-5-no-jitter body{
  overscroll-behavior-y:auto !important;
  scroll-behavior:auto !important;
}
/* Avoid expensive layout/style recalculation during scroll. */
html.wjb-v12-5-no-jitter .wjb-v60-bottom-nav{
  transition:none !important;
  will-change:auto !important;
  transform:translateX(-50%) translateY(0) translateZ(0) !important;
  backface-visibility:hidden !important;
}
/* Do not animate card layout while the user is touching/scrolling. */
html.wjb-v12-5-user-touching .smart-result,
html.wjb-v12-5-user-touching .card,
html.wjb-v12-5-user-touching .season-card,
html.wjb-v12-5-user-touching .wjb-v60-bottom-nav{
  transition:none !important;
  animation:none !important;
}
/* Keep the document width clamped without forcing vertical scrollTo in JS. */
html.wjb-v12-5-no-jitter,
html.wjb-v12-5-no-jitter body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}


/* WJB v12.6 Scroll Debug Audit */
.scroll-debug-content{margin-top:14px;}
.scroll-debug-hit code{display:block;margin-top:8px;padding:10px;border-radius:12px;background:rgba(0,0,0,.28);color:#cfe9ff;font-size:.78rem;line-height:1.45;white-space:normal;}
.scroll-debug-risk-bad{border-color:rgba(255,80,80,.55)!important;background:rgba(255,40,70,.10)!important;}
.scroll-debug-risk-warn{border-color:rgba(255,190,80,.55)!important;background:rgba(255,190,80,.10)!important;}
.scroll-debug-risk-ok{border-color:rgba(70,255,170,.45)!important;background:rgba(70,255,170,.08)!important;}
.wjb-v12-pill.warn{background:rgba(255,193,7,.14);border:1px solid rgba(255,193,7,.34);color:#ffe7a3;}
html.wjb-v12-6-scroll-debug .qa-center-box{padding-bottom:calc(150px + env(safe-area-inset-bottom));}


/* =====================================================================
   WJB v13 LTS — Navigation + Card Stability
   Goal: fix sticky pages after nav, keep search cards auto-height, no paid APIs.
   ===================================================================== */
:root{
  --wjb-v13-nav-height: 96px;
  --wjb-v13-safe-bottom: calc(var(--wjb-v13-nav-height) + env(safe-area-inset-bottom, 0px) + 56px);
  --wjb-v13-card-gap: 12px;
}
html.wjb-v13-lts,
html.wjb-v13-lts body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
  scroll-behavior:auto !important;
  overscroll-behavior-y:auto !important;
  overflow-anchor:none !important;
}
html.wjb-v13-lts body{
  min-height:100svh !important;
  touch-action:auto !important;
}
html.wjb-v13-lts body:not(.wjb-modal-open):not(.wjb-real-modal-open):not(.wjb-v13-modal-active){
  overflow-y:auto !important;
  position:static !important;
  height:auto !important;
}
html.wjb-v13-lts .app,
html.wjb-v13-lts #mainApp{
  min-height:100svh !important;
  padding-bottom:var(--wjb-v13-safe-bottom) !important;
  overflow:visible !important;
  touch-action:auto !important;
  transform:none !important;
}
html.wjb-v13-lts .wjb-v60-bottom-nav{
  position:fixed !important;
  left:50% !important;
  bottom:calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  transform:translateX(-50%) translateY(0) translateZ(0) !important;
  z-index:9000 !important;
  pointer-events:auto !important;
  transition:none !important;
  will-change:auto !important;
  contain:layout paint !important;
}
html.wjb-v13-lts .wjb-v60-bottom-nav button{
  touch-action:manipulation !important;
}
html.wjb-v13-lts #list,
html.wjb-v13-lts #smartSuggestList,
html.wjb-v13-lts .smart-suggest-box,
html.wjb-v13-lts .form-box,
html.wjb-v13-lts .backup,
html.wjb-v13-lts .premium-tools,
html.wjb-v13-lts .trending-content,
html.wjb-v13-lts .admin-content,
html.wjb-v13-lts .system-health-content,
html.wjb-v13-lts .qa-center-content,
html.wjb-v13-lts #seasonDetailList{
  padding-bottom:var(--wjb-v13-safe-bottom) !important;
  scroll-padding-bottom:var(--wjb-v13-safe-bottom) !important;
}

/* Search result card: auto-height, no action row overflow. */
html.wjb-v13-lts .smart-result.wjb-v10-result,
html.wjb-v13-lts .smart-result.wjb-v10-result.wjb-v11-result{
  position:relative !important;
  display:grid !important;
  grid-template-columns:92px minmax(0,1fr) !important;
  gap:14px !important;
  align-items:start !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden !important;
  padding:14px !important;
  border-radius:24px !important;
  box-sizing:border-box !important;
  contain:none !important;
  content-visibility:visible !important;
  background:linear-gradient(145deg,rgba(5,13,31,.98),rgba(11,25,51,.92)) !important;
  border:1px solid rgba(96,165,250,.22) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
html.wjb-v13-lts .smart-result.wjb-v10-result:active,
html.wjb-v13-lts .smart-result.wjb-v10-result.wjb-v11-result:active{
  transform:none !important;
}
html.wjb-v13-lts .smart-result.wjb-v10-result img,
html.wjb-v13-lts .smart-result.wjb-v10-result.wjb-v11-result img{
  width:92px !important;
  height:128px !important;
  min-width:92px !important;
  min-height:128px !important;
  aspect-ratio:92/128 !important;
  border-radius:18px !important;
  object-fit:cover !important;
  align-self:start !important;
  box-shadow:0 12px 28px rgba(0,0,0,.35) !important;
}
html.wjb-v13-lts .wjb-v10-result-body{
  min-width:0 !important;
  max-width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:7px !important;
  overflow:visible !important;
}
html.wjb-v13-lts .wjb-v10-title-row{
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:8px !important;
  align-items:start !important;
}
html.wjb-v13-lts .wjb-v10-title-row b{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  line-height:1.18 !important;
}
html.wjb-v13-lts .wjb-v10-score{
  flex:none !important;
  width:auto !important;
  max-width:70px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  padding:5px 8px !important;
  font-size:12px !important;
}
html.wjb-v13-lts .wjb-v10-meta,
html.wjb-v13-lts .wjb-v10-stats,
html.wjb-v13-lts .wjb-v10-source{
  min-width:0 !important;
  max-width:100% !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  overflow:hidden !important;
}
html.wjb-v13-lts .wjb-v10-note{
  min-width:0 !important;
  max-width:100% !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
  word-break:break-word !important;
  margin:0 !important;
  line-height:1.35 !important;
}
html.wjb-v13-lts .wjb-v11-stars{
  min-width:0 !important;
  max-width:100% !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  overflow:hidden !important;
}
html.wjb-v13-lts .wjb-v10-actions,
html.wjb-v13-lts .wjb-v11-actions{
  position:static !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin:8px 0 0 !important;
  padding:0 !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
html.wjb-v13-lts .wjb-v10-actions button,
html.wjb-v13-lts .wjb-v11-actions button{
  min-width:0 !important;
  max-width:100% !important;
  min-height:42px !important;
  height:auto !important;
  padding:9px 10px !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  border-radius:18px !important;
  box-sizing:border-box !important;
  touch-action:manipulation !important;
}
/* Row 1: primary CTA, forced onto its own full-width line. */
html.wjb-v13-lts .wjb-v10-action-primary{
  flex:1 1 100% !important;
  width:100% !important;
  order:1 !important;
}
/* Row 2: heart is a fixed-width square, details fills whatever is left. */
html.wjb-v13-lts .wjb-v11-icon-action{
  flex:0 0 44px !important;
  width:44px !important;
  padding-left:0 !important;
  padding-right:0 !important;
  font-size:18px !important;
  order:2 !important;
}
html.wjb-v13-lts .wjb-v10-action-secondary:not(.wjb-v11-icon-action){
  flex:1 1 auto !important;
  width:auto !important;
  font-size:12px !important;
  order:3 !important;
}
@media(max-width:430px){
  html.wjb-v13-lts .smart-result.wjb-v10-result,
  html.wjb-v13-lts .smart-result.wjb-v10-result.wjb-v11-result{
    grid-template-columns:82px minmax(0,1fr) !important;
    gap:12px !important;
    padding:12px !important;
    border-radius:22px !important;
  }
  html.wjb-v13-lts .smart-result.wjb-v10-result img,
  html.wjb-v13-lts .smart-result.wjb-v10-result.wjb-v11-result img{
    width:82px !important;
    height:116px !important;
    min-width:82px !important;
    min-height:116px !important;
    aspect-ratio:82/116 !important;
    border-radius:16px !important;
  }
  html.wjb-v13-lts .wjb-v10-title-row b{font-size:16px !important;}
  html.wjb-v13-lts .wjb-v10-note{font-size:12px !important;}
  html.wjb-v13-lts .wjb-v11-stars{font-size:14px !important;}
  html.wjb-v13-lts .wjb-v10-actions,
  html.wjb-v13-lts .wjb-v11-actions{
    gap:7px !important;
    margin-top:7px !important;
  }
  html.wjb-v13-lts .wjb-v10-actions button,
  html.wjb-v13-lts .wjb-v11-actions button{
    min-height:38px !important;
    padding:7px 8px !important;
    font-size:11px !important;
    border-radius:16px !important;
  }
  html.wjb-v13-lts .wjb-v11-icon-action{flex:0 0 42px !important;width:42px !important;font-size:17px !important;}
}
@media(max-width:360px){
  html.wjb-v13-lts .smart-result.wjb-v10-result,
  html.wjb-v13-lts .smart-result.wjb-v10-result.wjb-v11-result{
    grid-template-columns:74px minmax(0,1fr) !important;
    gap:10px !important;
    padding:10px !important;
  }
  html.wjb-v13-lts .smart-result.wjb-v10-result img,
  html.wjb-v13-lts .smart-result.wjb-v10-result.wjb-v11-result img{
    width:74px !important;height:104px !important;min-width:74px !important;min-height:104px !important;
  }
  html.wjb-v13-lts .wjb-v10-actions,
  html.wjb-v13-lts .wjb-v11-actions{gap:6px !important;}
  html.wjb-v13-lts .wjb-v11-icon-action{flex:0 0 38px !important;width:38px !important;}
}

/* Closed overlays must never capture touch. */
html.wjb-v13-lts .settings-modal:not(.show):not(.active):not(.open),
html.wjb-v13-lts .modal:not(.show):not(.active):not(.open),
html.wjb-v13-lts .wjb-sheet-backdrop:not(.show):not(.active):not(.open),
html.wjb-v13-lts .wjb-bottom-sheet-backdrop:not(.show):not(.active):not(.open),
html.wjb-v13-lts .wjb-smart-sheet-backdrop:not(.show):not(.active):not(.open){
  pointer-events:none !important;
}
html.wjb-v13-lts .settings-modal[style*="display:none"],
html.wjb-v13-lts .settings-modal[style*="display: none"],
html.wjb-v13-lts .modal[style*="display:none"],
html.wjb-v13-lts .modal[style*="display: none"]{
  pointer-events:none !important;
}

/* WJB v13.1 Critical Interaction Unlock
   Fixes feature screens that look frozen because modal/body scroll locks and bottom nav overlap. */
html.wjb-v13-1-modal-stability,
html.wjb-v13-1-modal-stability body{
  overflow-x:clip !important;
  overflow-y:auto !important;
  touch-action:pan-y !important;
  position:relative !important;
  height:auto !important;
}
html.wjb-v13-1-modal-stability body.wjb-v131-feature-surface-open{
  overflow-y:auto !important;
  touch-action:pan-y !important;
  position:relative !important;
}
html.wjb-v13-1-modal-stability body.wjb-v131-feature-surface-open .app,
html.wjb-v13-1-modal-stability body.wjb-v131-feature-surface-open #mainApp{
  pointer-events:auto !important;
}
html.wjb-v13-1-modal-stability body.wjb-v131-feature-surface-open .wjb-v60-bottom-nav{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
html.wjb-v13-1-modal-stability .settings-modal,
html.wjb-v13-1-modal-stability .modal{
  position:fixed !important;
  inset:0 !important;
  align-items:flex-start !important;
  justify-content:center !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-y:contain !important;
  padding:calc(14px + env(safe-area-inset-top,0px)) 10px calc(34px + env(safe-area-inset-bottom,0px)) !important;
  touch-action:pan-y !important;
}
html.wjb-v13-1-modal-stability .settings-modal[style*="display: block"],
html.wjb-v13-1-modal-stability .settings-modal[style*="display:block"],
html.wjb-v13-1-modal-stability .settings-modal[style*="display: flex"],
html.wjb-v13-1-modal-stability .settings-modal[style*="display:flex"],
html.wjb-v13-1-modal-stability .settings-modal.show,
html.wjb-v13-1-modal-stability .settings-modal.active,
html.wjb-v13-1-modal-stability .settings-modal.open,
html.wjb-v13-1-modal-stability .modal[style*="display: block"],
html.wjb-v13-1-modal-stability .modal[style*="display:block"],
html.wjb-v13-1-modal-stability .modal[style*="display: flex"],
html.wjb-v13-1-modal-stability .modal[style*="display:flex"],
html.wjb-v13-1-modal-stability .modal.show,
html.wjb-v13-1-modal-stability .modal.active,
html.wjb-v13-1-modal-stability .modal.open{
  pointer-events:auto !important;
}
html.wjb-v13-1-modal-stability .settings-box,
html.wjb-v13-1-modal-stability .modal-content,
html.wjb-v13-1-modal-stability .trending-box,
html.wjb-v13-1-modal-stability .ai-box,
html.wjb-v13-1-modal-stability .season-detail-box,
html.wjb-v13-1-modal-stability .admin-box,
html.wjb-v13-1-modal-stability .control-center-box,
html.wjb-v13-1-modal-stability .guardian-box,
html.wjb-v13-1-modal-stability .system-health-box{
  width:min(94vw,980px) !important;
  max-height:none !important;
  height:auto !important;
  min-height:auto !important;
  overflow:visible !important;
  margin:0 auto calc(24px + env(safe-area-inset-bottom,0px)) !important;
  padding-bottom:calc(32px + env(safe-area-inset-bottom,0px)) !important;
  touch-action:pan-y !important;
}
html.wjb-v13-1-modal-stability #seasonDetailList,
html.wjb-v13-1-modal-stability #hallContent,
html.wjb-v13-1-modal-stability #adminContent,
html.wjb-v13-1-modal-stability #controlCenterContent,
html.wjb-v13-1-modal-stability #guardianContent,
html.wjb-v13-1-modal-stability .trending-content,
html.wjb-v13-1-modal-stability .personal-ai-content{
  overflow:visible !important;
  max-height:none !important;
  padding-bottom:calc(42px + env(safe-area-inset-bottom,0px)) !important;
}
html.wjb-v13-1-modal-stability .season-close-btn,
html.wjb-v13-1-modal-stability .settings-box > button:first-child,
html.wjb-v13-1-modal-stability .trending-box > button:first-child,
html.wjb-v13-1-modal-stability .season-detail-box > button:first-child,
html.wjb-v13-1-modal-stability .ai-box > button:first-child{
  position:sticky !important;
  top:calc(8px + env(safe-area-inset-top,0px)) !important;
  z-index:50 !important;
}
html.wjb-v13-1-modal-stability .settings-modal:not(.show):not(.active):not(.open)[style*="display: none"],
html.wjb-v13-1-modal-stability .settings-modal:not(.show):not(.active):not(.open)[style*="display:none"],
html.wjb-v13-1-modal-stability .modal:not(.show):not(.active):not(.open)[style*="display: none"],
html.wjb-v13-1-modal-stability .modal:not(.show):not(.active):not(.open)[style*="display:none"]{
  pointer-events:none !important;
}
@media(max-width:560px){
  html.wjb-v13-1-modal-stability .settings-modal,
  html.wjb-v13-1-modal-stability .modal{padding-left:8px !important;padding-right:8px !important;}
  html.wjb-v13-1-modal-stability .settings-box,
  html.wjb-v13-1-modal-stability .modal-content,
  html.wjb-v13-1-modal-stability .trending-box,
  html.wjb-v13-1-modal-stability .ai-box,
  html.wjb-v13-1-modal-stability .season-detail-box,
  html.wjb-v13-1-modal-stability .admin-box{width:100% !important;border-radius:22px !important;}
}

/* WJB v13.3 Admin Panel Responsive Fix
   Fix admin modal/table overflow on mobile Safari/Android Chrome.
   Keeps admin usable without locking the whole page. */
html.wjb-v13-3-admin-responsive,
html.wjb-v13-3-admin-responsive body{
  max-width:100%;
  overflow-x:hidden !important;
}
html.wjb-v13-3-admin-responsive .settings-modal{
  box-sizing:border-box !important;
  width:100vw !important;
  max-width:100vw !important;
  left:0 !important;
  right:0 !important;
  padding-left:10px !important;
  padding-right:10px !important;
  overflow-x:hidden !important;
}
html.wjb-v13-3-admin-responsive #adminModal.settings-modal{
  align-items:flex-start !important;
  justify-content:center !important;
}
html.wjb-v13-3-admin-responsive .admin-box{
  box-sizing:border-box !important;
  width:min(1060px, calc(100vw - 20px)) !important;
  max-width:calc(100vw - 20px) !important;
  min-width:0 !important;
  margin:10px auto calc(env(safe-area-inset-bottom) + 26px) !important;
  padding-left:clamp(14px, 4vw, 26px) !important;
  padding-right:clamp(14px, 4vw, 26px) !important;
  overflow-x:hidden !important;
}
html.wjb-v13-3-admin-responsive .admin-box > button:first-child{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  margin:0 0 18px !important;
  white-space:nowrap !important;
}
html.wjb-v13-3-admin-responsive .admin-box h2{
  font-size:clamp(28px, 8vw, 48px) !important;
  line-height:1.12 !important;
  overflow-wrap:anywhere !important;
}
html.wjb-v13-3-admin-responsive .admin-tabs{
  box-sizing:border-box !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-x:contain !important;
  padding:2px 2px 10px !important;
  margin-left:0 !important;
  margin-right:0 !important;
  scrollbar-width:none;
}
html.wjb-v13-3-admin-responsive .admin-tabs::-webkit-scrollbar{display:none;}
html.wjb-v13-3-admin-responsive .admin-tabs button{
  flex:0 0 auto !important;
  width:auto !important;
  max-width:none !important;
  white-space:nowrap !important;
  padding:14px 18px !important;
}
html.wjb-v13-3-admin-responsive .admin-content{
  box-sizing:border-box !important;
  max-width:100% !important;
  overflow-x:hidden !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
html.wjb-v13-3-admin-responsive .admin-table-wrap{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-x:contain !important;
}
html.wjb-v13-3-admin-responsive .admin-table{
  width:max-content !important;
  min-width:min(760px, 185vw) !important;
  max-width:none !important;
}
html.wjb-v13-3-admin-responsive .admin-log-table{
  min-width:min(860px, 205vw) !important;
}
html.wjb-v13-3-admin-responsive .admin-table th,
html.wjb-v13-3-admin-responsive .admin-table td{
  max-width:260px !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}
html.wjb-v13-3-admin-responsive .admin-table code,
html.wjb-v13-3-admin-responsive .admin-table small{
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}
@media(max-width:560px){
  html.wjb-v13-3-admin-responsive .settings-modal{padding-left:8px !important;padding-right:8px !important;}
  html.wjb-v13-3-admin-responsive .admin-box{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    padding-left:16px !important;
    padding-right:16px !important;
    border-radius:22px !important;
  }
  html.wjb-v13-3-admin-responsive .admin-tabs button{padding:12px 16px !important;font-size:15px !important;}
  html.wjb-v13-3-admin-responsive .admin-table th,
  html.wjb-v13-3-admin-responsive .admin-table td{padding:11px 12px !important;font-size:14px !important;}
}

/* ===== WJB v13.3 Hall of Fame Premium Layout ===== */
#hallModal .season-detail-box{
  width:min(92vw, 760px) !important;
  max-width:92vw !important;
  overflow-x:hidden !important;
}
#hallContent{
  display:block !important;
  gap:0 !important;
  padding-bottom:calc(34px + env(safe-area-inset-bottom)) !important;
}
.hall-hero-card{
  border:1px solid rgba(0,180,255,.24);
  border-radius:28px;
  padding:18px;
  background:linear-gradient(150deg, rgba(5,18,38,.96), rgba(13,21,48,.92));
  box-shadow:0 0 34px rgba(0,174,255,.12), inset 0 0 0 1px rgba(255,255,255,.04);
  overflow:hidden;
}
.hall-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.hall-title-row h3{margin:0;font-size:clamp(24px,5vw,34px);line-height:1.15;color:#fff}
.hall-title-row span{color:#7dd3fc;font-weight:800;white-space:nowrap}
.hall-main-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:14px;align-items:stretch}
.hall-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hall-stat-card{
  min-height:106px;
  border-radius:18px;
  padding:14px;
  background:linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  border:1px solid rgba(125,211,252,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.hall-stat-card span{font-size:28px;display:block;margin-bottom:4px;filter:drop-shadow(0 0 10px rgba(124,58,237,.5))}
.hall-stat-card small{display:block;color:#cbd5e1;font-weight:800;line-height:1.25}
.hall-stat-card b{display:block;color:#fff;font-size:30px;line-height:1.05;margin-top:3px}
.hall-stat-card em{display:block;color:#dbeafe;font-style:normal;font-weight:700;font-size:13px}
.hall-top-user{
  border-radius:22px;
  padding:14px 12px;
  text-align:center;
  background:radial-gradient(circle at 50% 0%, rgba(250,204,21,.18), rgba(255,255,255,.035) 46%, rgba(255,255,255,.02));
  border:1px solid rgba(250,204,21,.36);
  box-shadow:0 0 26px rgba(250,204,21,.12), inset 0 0 0 1px rgba(255,255,255,.04);
  min-width:0;
}
.hall-crown{font-size:16px;color:#fde68a;font-weight:900;margin-bottom:10px;white-space:nowrap}
.hall-top-user img{width:94px;height:94px;object-fit:cover;border-radius:50%;border:3px solid rgba(250,204,21,.75);box-shadow:0 0 22px rgba(250,204,21,.35);background:#0f172a}
.hall-top-user b{display:block;margin-top:10px;color:#fff;font-size:18px;line-height:1.25;word-break:break-word}
.hall-top-user span{display:block;margin-top:5px;color:#dbeafe;font-size:13px;font-weight:700}
.hall-top-user strong{display:inline-block;margin-top:8px;color:#fff;background:rgba(250,204,21,.12);border:1px solid rgba(250,204,21,.24);padding:5px 10px;border-radius:999px}
.hall-section-head{display:flex;align-items:center;justify-content:space-between;margin:20px 0 10px;color:#fff;font-size:18px}
.hall-rank-list{display:grid;gap:9px}
.hall-rank-row{
  display:grid;
  grid-template-columns:42px 54px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  border:1px solid rgba(148,163,184,.22);
  background:linear-gradient(90deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  border-radius:16px;
  padding:9px 10px;
  min-width:0;
}
.hall-rank-badge{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:linear-gradient(135deg,#facc15,#7c3aed);color:#071426;box-shadow:0 0 16px rgba(124,58,237,.25)}
.hall-rank-poster{width:50px;height:50px;border-radius:12px;object-fit:cover;background:#0f172a}
.hall-rank-info{min-width:0}
.hall-rank-info b{display:block;color:#fff;font-size:15px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hall-rank-info span{display:block;color:#cbd5e1;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hall-rank-score{color:#fff;font-weight:900;white-space:nowrap;font-size:14px}
.hall-score-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.hall-score-chip{display:flex;align-items:center;gap:7px;min-width:0;max-width:100%;border:1px solid rgba(167,139,250,.28);background:rgba(124,58,237,.12);border-radius:999px;padding:7px 10px;color:#fff}
.hall-score-chip b{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.hall-score-chip em{font-style:normal;color:#fde68a;font-weight:900}
.hall-empty{color:#cbd5e1;padding:16px;text-align:center;border:1px dashed rgba(148,163,184,.26);border-radius:16px}
@media (max-width:560px){
  #hallModal .season-detail-box{width:calc(100vw - 28px) !important;max-width:calc(100vw - 28px) !important;padding-left:14px !important;padding-right:14px !important;}
  .hall-hero-card{padding:14px;border-radius:24px}
  .hall-main-grid{grid-template-columns:1fr;gap:12px}
  .hall-stat-grid{grid-template-columns:1fr 1fr;gap:10px}
  .hall-stat-card{min-height:96px;padding:12px}
  .hall-stat-card b{font-size:26px}
  .hall-top-user{display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-areas:'pic crown' 'pic name' 'pic meta' 'pic score';text-align:left;align-items:center;column-gap:12px}
  .hall-crown{grid-area:crown;margin:0;font-size:15px}.hall-top-user img{grid-area:pic;width:76px;height:76px}.hall-top-user b{grid-area:name;margin:0;font-size:17px}.hall-top-user span{grid-area:meta}.hall-top-user strong{grid-area:score;justify-self:start}
  .hall-rank-row{grid-template-columns:34px 46px minmax(0,1fr);gap:8px}
  .hall-rank-score{grid-column:3;justify-self:start;font-size:13px;margin-top:-4px}
  .hall-rank-badge{width:32px;height:32px}.hall-rank-poster{width:44px;height:44px}
  .hall-score-chip b{max-width:190px}
}


/* ===== WJB v13.4 Hall of Fame Preview Card ===== */
#hallPreview.hall-preview-shell{
  margin:18px 0 28px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.hall-preview-card{
  border:1px solid rgba(0,180,255,.25);
  border-radius:28px;
  padding:18px;
  background:linear-gradient(150deg, rgba(5,18,38,.97), rgba(13,21,48,.93));
  box-shadow:0 0 34px rgba(0,174,255,.12), inset 0 0 0 1px rgba(255,255,255,.045);
  overflow:hidden;
}
.hall-preview-card:active{transform:scale(.992)}
.hall-preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.hall-preview-head h3{margin:0;color:#fff;font-size:clamp(24px,5vw,34px);line-height:1.1}
.hall-preview-head p{margin:6px 0 0;color:#cbd5e1;font-weight:700;font-size:14px;line-height:1.35}
.hall-preview-head span{white-space:nowrap;color:#93c5fd;font-weight:900;border:1px solid rgba(147,197,253,.22);background:rgba(124,58,237,.13);border-radius:999px;padding:8px 12px}
.hall-preview-feature{
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  gap:14px;
  align-items:center;
  border-radius:22px;
  padding:14px;
  margin-bottom:14px;
  background:radial-gradient(circle at 18% 18%, rgba(250,204,21,.16), rgba(255,255,255,.045) 44%, rgba(255,255,255,.025));
  border:1px solid rgba(250,204,21,.32);
  box-shadow:0 0 24px rgba(250,204,21,.1), inset 0 0 0 1px rgba(255,255,255,.035);
}
.hall-preview-poster-wrap{position:relative;width:98px;height:98px;min-width:98px}
.hall-preview-poster-wrap img{width:98px;height:98px;border-radius:50%;object-fit:cover;border:3px solid rgba(250,204,21,.72);background:#0f172a;box-shadow:0 0 22px rgba(250,204,21,.32)}
.hall-preview-poster-wrap em{position:absolute;right:-4px;bottom:3px;font-style:normal;font-weight:1000;color:#fff;background:linear-gradient(135deg,#facc15,#7c3aed);border:2px solid rgba(7,20,38,.8);padding:5px 8px;border-radius:999px;font-size:13px}
.hall-preview-feature-info{min-width:0;color:#fff}
.hall-preview-feature-info b{display:block;color:#fde68a;font-size:15px;margin-bottom:5px}
.hall-preview-feature-info strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:20px;line-height:1.2;margin-bottom:5px}
.hall-preview-feature-info small{display:block;color:#dbeafe;font-weight:800;margin-bottom:8px}
.hall-preview-score{display:inline-block;color:#fff;background:rgba(250,204,21,.12);border:1px solid rgba(250,204,21,.26);padding:6px 11px;border-radius:999px;font-weight:1000}
.hall-preview-progress{height:7px;border-radius:999px;background:rgba(148,163,184,.22);overflow:hidden;margin-top:10px}
.hall-preview-progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#22d3ee,#7c3aed,#f472b6)}
.hall-preview-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.hall-preview-stats div{min-width:0;min-height:92px;border-radius:18px;padding:12px;background:linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));border:1px solid rgba(125,211,252,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
.hall-preview-stats span{display:block;font-size:24px;margin-bottom:4px;filter:drop-shadow(0 0 10px rgba(124,58,237,.45))}
.hall-preview-stats b{display:block;color:#fff;font-size:25px;line-height:1.05}
.hall-preview-stats small{display:block;color:#dbeafe;font-size:12px;font-weight:800;line-height:1.2;margin-top:3px}
.hall-preview-open{width:100%;border:0;border-radius:18px;padding:16px 14px;background:linear-gradient(135deg,#0ea5e9,#7c3aed);color:#fff;font-weight:1000;font-size:17px;box-shadow:0 10px 28px rgba(124,58,237,.24)}
.hall-preview-empty,.hall-preview-empty-state{color:#cbd5e1;text-align:center;font-weight:800;padding:26px;border:1px dashed rgba(148,163,184,.24);border-radius:22px;background:rgba(255,255,255,.035)}
@media (max-width:560px){
  #hallPreview.hall-preview-shell{margin:16px 0 26px}
  .hall-preview-card{padding:14px;border-radius:25px}
  .hall-preview-head span{font-size:13px;padding:7px 10px}
  .hall-preview-feature{grid-template-columns:90px minmax(0,1fr);gap:12px;padding:12px}
  .hall-preview-poster-wrap,.hall-preview-poster-wrap img{width:84px;height:84px;min-width:84px}
  .hall-preview-feature-info strong{font-size:18px}
  .hall-preview-stats{grid-template-columns:1fr 1fr;gap:10px}
  .hall-preview-stats div{min-height:88px}
}

/* ===== WJB v13.5 Admin Mobile Isolation Fix =====
   Scope: Admin modal only. Does not change home/search/trending/my-list logic. */
html.wjb-v13-5-admin-mobile-fix,
html.wjb-v13-5-admin-mobile-fix body{
  max-width:100% !important;
  overflow-x:hidden !important;
}
html.wjb-v13-5-admin-mobile-fix #adminModal.settings-modal{
  box-sizing:border-box !important;
  inset:0 !important;
  width:100vw !important;
  max-width:100vw !important;
  padding:10px !important;
  align-items:flex-start !important;
  justify-content:center !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
}
html.wjb-v13-5-admin-mobile-fix #adminModal .admin-box{
  box-sizing:border-box !important;
  width:min(980px, calc(100vw - 20px)) !important;
  max-width:calc(100vw - 20px) !important;
  min-width:0 !important;
  margin:10px auto calc(24px + env(safe-area-inset-bottom)) !important;
  padding:clamp(16px,4vw,30px) !important;
  overflow-x:hidden !important;
  overflow-y:visible !important;
  border-radius:24px !important;
}
html.wjb-v13-5-admin-mobile-fix #adminModal .season-close-btn{
  position:sticky !important;
  top:0 !important;
  z-index:5 !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 0 22px 0 !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  border-radius:18px !important;
  white-space:nowrap !important;
}
html.wjb-v13-5-admin-mobile-fix #adminModal .admin-box h2{
  font-size:clamp(30px,8vw,48px) !important;
  line-height:1.08 !important;
  margin:0 0 18px !important;
  overflow-wrap:anywhere !important;
}
html.wjb-v13-5-admin-mobile-fix #adminModal .admin-box .muted{
  max-width:100% !important;
  overflow-wrap:anywhere !important;
}
html.wjb-v13-5-admin-mobile-fix #adminModal .admin-tabs{
  box-sizing:border-box !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-x:contain !important;
  padding:4px 2px 12px !important;
  margin:18px 0 18px !important;
  scrollbar-width:none !important;
}
html.wjb-v13-5-admin-mobile-fix #adminModal .admin-tabs::-webkit-scrollbar{display:none !important;}
html.wjb-v13-5-admin-mobile-fix #adminModal .admin-tabs button{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:max-content !important;
  max-width:none !important;
  white-space:nowrap !important;
  padding:13px 18px !important;
  border-radius:16px !important;
}
html.wjb-v13-5-admin-mobile-fix #adminModal .admin-content{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:hidden !important;
  overflow-y:visible !important;
}
html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table-wrap{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-x:contain !important;
  border-radius:18px !important;
}
html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  table-layout:auto !important;
}
@media (max-width:720px){
  html.wjb-v13-5-admin-mobile-fix #adminModal{padding:8px !important;}
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-box{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    padding:16px !important;
    border-radius:22px !important;
  }
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table-wrap{
    overflow-x:hidden !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table,
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table thead,
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table tbody,
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table tr,
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table th,
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table td{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table thead{display:none !important;}
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table tr{
    margin:0 0 14px !important;
    padding:14px !important;
    border:1px solid rgba(96,165,250,.22) !important;
    border-radius:18px !important;
    background:rgba(15,23,42,.58) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.18) !important;
    overflow:hidden !important;
  }
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table td{
    display:grid !important;
    grid-template-columns:minmax(76px,34%) minmax(0,1fr) !important;
    gap:10px !important;
    align-items:start !important;
    padding:9px 0 !important;
    border:0 !important;
    border-bottom:1px solid rgba(148,163,184,.12) !important;
    font-size:15px !important;
    line-height:1.35 !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table td:last-child{border-bottom:0 !important;padding-bottom:0 !important;}
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table td::before{
    color:#93c5fd !important;
    font-weight:800 !important;
    opacity:.95 !important;
    overflow-wrap:normal !important;
  }
  /* Users table labels */
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table:not(.admin-log-table) tr td:nth-child(1)::before{content:'ชื่อ';}
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table:not(.admin-log-table) tr td:nth-child(2)::before{content:'อีเมล/ประเภท';}
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table:not(.admin-log-table) tr td:nth-child(3)::before{content:'สิทธิ์/สถานะ';}
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table:not(.admin-log-table) tr td:nth-child(4)::before{content:'UID/เจ้าของ';}
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table:not(.admin-log-table) tr td:nth-child(5)::before{content:'วันที่';}
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table:not(.admin-log-table) tr td:nth-child(6)::before{content:'จัดการ';}
  /* Activity log labels */
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-log-table tr td:nth-child(1)::before{content:'เวลา';}
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-log-table tr td:nth-child(2)::before{content:'ผู้ใช้';}
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-log-table tr td:nth-child(3)::before{content:'การกระทำ';}
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-log-table tr td:nth-child(4)::before{content:'รายละเอียด';}
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table button{
    width:100% !important;
    max-width:100% !important;
    padding:11px 12px !important;
    border-radius:14px !important;
  }
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table code,
  html.wjb-v13-5-admin-mobile-fix #adminModal .admin-table small{
    display:inline-block !important;
    max-width:100% !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }
}


/* WJB v13.6 Favorite UX Polish - isolated favorite UI only */
.wjb-fav-stat-card{
  position:relative;
  border-color:rgba(96,180,255,.38)!important;
  box-shadow:0 0 0 1px rgba(62,167,255,.15),0 14px 38px rgba(18,88,180,.20)!important;
}
.wjb-fav-stat-card span{filter:drop-shadow(0 0 12px rgba(90,180,255,.5));}
.stat-card small{
  display:block;
  margin-top:2px;
  color:rgba(224,239,255,.72);
  font-size:.76rem;
  font-weight:800;
  text-align:right;
}
.wjb-favorite-btn{
  border:1px solid rgba(88,185,255,.28)!important;
  background:linear-gradient(135deg,rgba(13,36,70,.78),rgba(40,34,86,.82))!important;
  color:#eaf6ff!important;
  white-space:nowrap;
  min-width:0;
}
.wjb-favorite-btn.active{
  border-color:rgba(108,189,255,.48)!important;
  background:linear-gradient(135deg,rgba(0,164,255,.75),rgba(114,70,255,.78))!important;
  box-shadow:0 0 18px rgba(31,154,255,.22)!important;
}
.wjb-group-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px!important;
}
.wjb-favorite-toast{
  position:fixed;
  left:50%;
  bottom:calc(96px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(18px);
  z-index:99999;
  max-width:min(92vw,420px);
  padding:13px 16px;
  border-radius:18px;
  border:1px solid rgba(82,184,255,.36);
  background:linear-gradient(135deg,rgba(5,18,38,.94),rgba(30,22,68,.94));
  color:#fff;
  font-weight:900;
  box-shadow:0 18px 50px rgba(0,0,0,.36),0 0 32px rgba(38,152,255,.18);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.wjb-favorite-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.wjb-favorite-toast.wjb-toast-success{
  border-color:rgba(66,214,141,.4);
  background:linear-gradient(135deg,rgba(6,32,20,.94),rgba(10,48,30,.94));
}
.wjb-favorite-toast.wjb-toast-error{
  border-color:rgba(255,99,99,.45);
  background:linear-gradient(135deg,rgba(40,10,10,.94),rgba(56,14,14,.94));
}
.wjb-favorite-toast.wjb-toast-info{
  border-color:rgba(82,184,255,.36);
  background:linear-gradient(135deg,rgba(5,18,38,.94),rgba(30,22,68,.94));
}

/* v14 Confirm / Prompt Modal */
.wjb-confirm-modal{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(5,8,16,.62);
  backdrop-filter:blur(3px);
  padding:20px;
}
.wjb-confirm-box{
  width:100%;
  max-width:380px;
  border-radius:16px;
  padding:20px;
  background:linear-gradient(160deg,rgba(16,22,40,.98),rgba(24,20,48,.98));
  border:1px solid rgba(120,150,255,.25);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  color:#fff;
}
.wjb-confirm-message{
  margin:0 0 16px;
  font-weight:700;
  line-height:1.5;
  white-space:pre-line;
}
.wjb-confirm-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.wjb-confirm-actions button{
  padding:11px 10px;
  border-radius:10px;
  border:none;
  font-weight:800;
  cursor:pointer;
}
.wjb-confirm-actions #wjbConfirmOkBtn,
.wjb-confirm-actions #wjbPromptOkBtn{
  background:linear-gradient(135deg,#2698ff,#7c5cff);
  color:#fff;
}
.wjb-confirm-actions #wjbConfirmOkBtn.danger{
  background:linear-gradient(135deg,#ff5c5c,#c22a2a);
}
.wjb-confirm-actions .gray{
  background:rgba(127,127,127,.22);
  color:#fff;
}
.wjb-prompt-input{
  width:100%;
  margin-bottom:14px;
  padding:11px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff;
}
.wjb-btn-busy{
  opacity:.7;
  cursor:progress !important;
}

/* v14 accordion groups for the add/edit item form */
.wjb-form-group{
  display:block;
  border-radius:18px;
  overflow:hidden;
  background:rgba(2,8,23,.34);
  border:1px solid rgba(148,163,184,.14);
  margin:12px 0;
}
.wjb-form-group summary{
  list-style:none;
  cursor:pointer;
  min-height:46px;
  padding:12px 14px;
  display:grid;
  grid-template-columns:30px 1fr auto;
  align-items:center;
  gap:10px;
  color:#f8fafc;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.wjb-form-group summary::-webkit-details-marker{display:none;}
.wjb-form-group summary span{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(14,165,233,.12);
}
.wjb-form-group summary b{
  font-size:15px;
  letter-spacing:-.01em;
}
.wjb-form-group summary em{
  font-style:normal;
  font-size:11px;
  color:rgba(203,213,225,.72);
}
.wjb-form-group:not([open]) summary{
  background:rgba(15,23,42,.38);
}
.wjb-form-group:not([open]) summary::after{
  content:'+';
  margin-left:8px;
  font-size:18px;
  color:#38bdf8;
}
.wjb-form-group[open] summary::after{
  content:'−';
  margin-left:8px;
  font-size:18px;
  color:#38bdf8;
}
.wjb-form-group-body{
  display:grid;
  gap:10px;
  padding:2px 14px 16px;
}
.light-mode .wjb-form-group{
  background:#f8fafc;
  border-color:#dbeafe;
}
.light-mode .wjb-form-group summary{color:#0f172a;}
.light-mode .wjb-form-group:not([open]) summary{background:#eef2f7;}

@media(max-width:560px){
  .wjb-group-actions{grid-template-columns:1fr 1fr;gap:8px!important;}
  .wjb-favorite-btn{font-size:.95rem!important;padding:12px 10px!important;}
}


/* =========================================================
   WJB v14.0 — Search Result Card Balance + Floating Menu Fix
   Fixes reported by user:
   1) Fixed hamburger (.menu-toggle) button overlapping the
      "Free Search Hub" header text/results whenever the page
      auto-scrolls the form/search box to the top of viewport
      (scrollIntoView block:"start"). We reserve clearance via
      scroll-margin-top so the browser never scrolls content
      underneath the floating button.
   2) The 3-across action row (เลือก / ❤ / ⓘ รายละเอียด) could
      overflow its card on narrow phones, clipping the
      "รายละเอียด" label at the screen edge. Rebuilt as a
      2-row grid: full-width primary CTA on top, then a
      balanced heart + details row underneath — nothing can
      ever exceed the card width again.
   3) General safety net so no badge/pill/title can spill past
      the rounded card border, plus a small premium polish
      pass (tighter rhythm, consistent radii, ellipsis instead
      of raw clipping).
   ========================================================= */

/* --- 1) Never let the floating menu button sit on top of content --- */
#formBox,
.form-box,
#smartSuggestBox,
.smart-suggest-box,
#wjbFormDetailsStart,
#viewBar,
.view-bar,
.guide-box{
  scroll-margin-top:calc(env(safe-area-inset-top,0px) + 92px) !important;
}

/* --- 2) Card-level overflow safety net --- */
.smart-result.wjb-v10-result.wjb-v11-result{
  overflow:hidden !important;
  max-width:100% !important;
}
.wjb-v10-result-body{
  min-width:0 !important;
}
.wjb-v10-title-row{
  flex-wrap:wrap !important;
  min-width:0 !important;
}
.wjb-v10-title-row b{
  min-width:0 !important;
  overflow:hidden !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
}
.wjb-v10-meta,
.wjb-v10-stats,
.wjb-v10-source{
  flex-wrap:wrap !important;
  min-width:0 !important;
}
.wjb-v10-badge,
.wjb-v10-pill,
.wjb-v11-source-pill,
.wjb-v10-stat{
  max-width:100% !important;
}

/* --- 3) Rebuilt action row: balanced, never overflows ---
   NOTE: html.wjb-v13-lts (added by js/v12/navigation.js on every load)
   carries higher-specificity versions of these same rules further up
   this file — this block only covers the brief instant before that
   class is attached, so it must stay behaviourally identical. */
.wjb-v11-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:8px !important;
  width:100% !important;
  box-sizing:border-box !important;
}
.wjb-v11-actions > *{
  min-width:0 !important;
  box-sizing:border-box !important;
}
.wjb-v11-actions .wjb-v10-action-primary{
  flex:1 1 100% !important;
  width:100% !important;
  min-height:44px !important;
  font-size:14px !important;
  letter-spacing:.01em !important;
}
.wjb-v11-actions .wjb-v11-icon-action{
  flex:0 0 44px !important;
  width:44px !important;
  min-height:40px !important;
  padding:8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.wjb-v11-actions .wjb-v10-action-secondary:not(.wjb-v11-icon-action){
  flex:1 1 auto !important;
  min-height:40px !important;
  padding:8px 10px !important;
  font-size:12px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
}

/* Small premium polish pass: consistent rhythm + a touch more depth */
.smart-result.wjb-v10-result.wjb-v11-result{
  padding:14px !important;
}
.wjb-v10-action-primary{
  box-shadow:0 12px 26px rgba(37,99,235,.28) !important;
}
.wjb-v10-action-primary:active{
  transform:scale(.98) !important;
}
.wjb-v11-icon-action:active,
.wjb-v10-action-secondary:active{
  transform:scale(.96) !important;
}

@media(max-width:420px){
  .wjb-v11-actions .wjb-v10-action-secondary:not(.wjb-v11-icon-action){
    font-size:11.5px !important;
  }
}


/* ===== WJB Anime Airing Notify v1 ===== */
.wjb-airing-banner{
  margin:0 0 12px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(96,180,255,.28);
  background:linear-gradient(135deg, rgba(13,36,70,.85), rgba(40,34,86,.85));
}
.wjb-airing-row{
  padding:10px 14px;
  font-size:13.5px;
  line-height:1.5;
  color:#eaf6ff;
}
.wjb-airing-row + .wjb-airing-row{
  border-top:1px solid rgba(96,180,255,.18);
}
.wjb-airing-row b{ margin-right:4px; }
.wjb-airing-today{ background:rgba(59,130,246,.12); }
.wjb-airing-gap{ background:rgba(234,179,8,.08); }

.wjb-airing-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-weight:700;
}
.wjb-airing-controls button{
  padding:6px 12px;
  font-size:12.5px;
  white-space:nowrap;
}

/* ===== WJB Airing Board v1 ===== */
.airing-mine-form{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:10px 0 14px;
}
.airing-mine-form input[type="text"]{
  flex:1 1 140px;
}
.airing-mine-form select,
.airing-mine-form input[type="time"]{
  flex:0 0 auto;
}
.airing-mine-poster-label{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:10px;
  border:1px dashed rgba(96,180,255,.4);
  cursor:pointer;
  overflow:hidden;
  flex:0 0 auto;
  font-size:11px;
  text-align:center;
  color:rgba(224,239,255,.7);
}
.airing-mine-poster-preview{
  width:100%;
  height:100%;
  object-fit:cover;
}
.airing-online-card, .airing-mine-card{
  display:flex;
  flex-direction:row;
  gap:10px;
  align-items:flex-start;
}
.airing-online-card{
  cursor:pointer;
  transition:transform .15s ease, background-color .15s ease;
}
.airing-online-card:active{
  transform:scale(.97);
  background-color:rgba(96,180,255,.08);
}
.airing-card-poster{
  width:56px;
  height:78px;
  border-radius:8px;
  object-fit:cover;
  flex:0 0 auto;
}
.airing-card-poster-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(96,180,255,.1);
  font-size:22px;
}
.airing-card-info{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1 1 auto;
}
.airing-mine-today{
  border-color:rgba(96,180,255,.4) !important;
}
.airing-watch-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin:2px 0;
}
.airing-watch-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:2px;
}
.airing-watch-actions button{
  font-size:12px;
  padding:7px 12px;
  min-height:auto;
}
.airing-watch-status{
  font-size:12px;
  font-weight:600;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(148,163,184,.14);
  color:rgba(224,239,255,.65);
}
.airing-watch-status.airing-watch-pending{
  background:rgba(248,113,113,.16);
  color:#fca5a5;
}
.airing-watch-status.airing-watch-done{
  background:rgba(34,197,94,.16);
  color:#86efac;
}

/* v15.0: Smart Sync pending badge — เห็นได้ว่ามีกี่รายการรอส่งขึ้นคลาวด์ */
.wjb-sync-badge{
  position:fixed;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  z-index:9000;
  background:rgba(15,23,42,.92);
  color:#e0efff;
  font-size:12px;
  font-weight:600;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.25);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  gap:6px;
  pointer-events:none;
}
.wjb-sync-badge .wjb-sync-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#fbbf24;
  flex:none;
}
.wjb-sync-badge.wjb-sync-error .wjb-sync-dot{ background:#f87171; }
.wjb-sync-badge.wjb-sync-offline .wjb-sync-dot{ background:#94a3b8; }
.wjb-sync-badge.wjb-sync-done{ border-color:rgba(74,222,128,.35); }
.wjb-sync-badge.wjb-sync-done .wjb-sync-dot{ background:#4ade80; }

/* v15.4: Sync Dashboard — แผงตรวจสอบการแก้ไขตั้งแต่ล็อกอิน */
.wjb-sd-overlay{
  position:fixed;
  inset:0;
  z-index:9500;
  background:rgba(8,12,20,.6);
  display:none;
  align-items:flex-end;
  justify-content:center;
  backdrop-filter:blur(2px);
}
.wjb-sd-modal{
  width:100%;
  max-width:520px;
  max-height:80vh;
  background:#111827;
  border:1px solid rgba(148,163,184,.2);
  border-radius:18px 18px 0 0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 -10px 30px rgba(0,0,0,.4);
}
@media (min-width:640px){
  .wjb-sd-overlay{ align-items:center; }
  .wjb-sd-modal{ border-radius:18px; margin-bottom:0; }
}
.wjb-sd-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  font-weight:700;
  color:#e0efff;
  border-bottom:1px solid rgba(148,163,184,.15);
}
.wjb-sd-close{
  background:none;
  border:none;
  color:#94a3b8;
  font-size:18px;
  cursor:pointer;
  padding:4px 8px;
}
.wjb-sd-body{
  overflow-y:auto;
  padding:14px 18px 20px;
}
.wjb-sd-summary-total{
  color:#e0efff;
  font-size:14px;
  margin-bottom:10px;
}
.wjb-sd-summary-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.wjb-sd-tag{
  font-size:12px;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(148,163,184,.14);
}
.wjb-sd-tag.wjb-sd-done{ color:#86efac; background:rgba(34,197,94,.14); }
.wjb-sd-tag.wjb-sd-pending{ color:#fbbf24; background:rgba(251,191,36,.14); }
.wjb-sd-tag.wjb-sd-fail{ color:#fca5a5; background:rgba(248,113,113,.14); }
.wjb-sd-warning{
  font-size:12.5px;
  color:#fca5a5;
  background:rgba(248,113,113,.1);
  border:1px solid rgba(248,113,113,.25);
  border-radius:10px;
  padding:8px 10px;
  margin-top:8px;
}
.wjb-sd-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:8px;
}
.wjb-sd-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
}
.wjb-sd-row-title{
  color:#e0efff;
  font-size:13.5px;
  font-weight:600;
}
.wjb-sd-row-sub{
  color:rgba(224,239,255,.55);
  font-size:12px;
  margin-top:2px;
}
.wjb-sd-row-status{
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.wjb-sd-row-status.wjb-sd-done{ color:#86efac; }
.wjb-sd-row-status.wjb-sd-pending{ color:#fbbf24; }
.wjb-sd-row-status.wjb-sd-fail{ color:#fca5a5; }
.wjb-sd-empty{
  color:rgba(224,239,255,.55);
  font-size:13px;
  text-align:center;
  padding:30px 10px;
}

/* ==========================================================================
   v21.0: การ์ดแท็ก ("แท็ก" / "แท็กทั้งหมด" / "แท็กยอดนิยม") — ใช้ร่วมกันทั้ง
   ฝั่งอนิเมะ (#tagFilterBar) และฝั่งมังงะ (#mangaTagFilterBar) โครงสร้าง HTML
   สร้างจาก window.wjbBuildTagCardHTML ใน js/legacy-app.js
   ========================================================================== */
.wjb-tagcard.wjb-tools-bar-tags,
.wjb-tagcard{
  display:block!important;
  width:100%!important;
  flex-wrap:initial!important;
  margin-top:4px!important;
  padding:16px!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(9,20,43,.72),rgba(4,10,24,.78))!important;
  border:1px solid rgba(56,189,248,.20)!important;
  box-shadow:0 0 24px rgba(37,99,235,.10)!important;
}
.wjb-tagcard-head h3{
  margin:0;
  font-size:17px;
  font-weight:900;
  color:#f1f7ff;
}
.wjb-tagcard-head p{
  margin:4px 0 14px;
  font-size:12.5px;
  color:rgba(224,239,255,.55);
}
.wjb-tagcard-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.wjb-tagcard-pill,
.wjb-tagcard-add,
.wjb-tagcard-chip{
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.04);
  color:#dbeafe;
  border-radius:999px;
  padding:10px 16px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  line-height:1.2;
}
.wjb-tagcard-pill.active{
  background:linear-gradient(135deg,#0ea5e9,#7c3aed)!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 0 18px rgba(124,58,237,.30);
}
.wjb-tagcard-add{
  border-style:dashed;
  color:#93c5fd;
  background:rgba(14,165,233,.06);
}
.wjb-tagcard-divider{
  height:1px;
  background:rgba(148,163,184,.16);
  margin:16px 0 14px;
}
.wjb-tagcard-popular-title{
  font-size:15px;
  font-weight:900;
  color:#f1f7ff;
  margin-bottom:12px;
}
.wjb-tagcard-hint{
  font-size:11.5px;
  font-weight:600;
  color:rgba(224,239,255,.45);
}
.wjb-tagcard-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
@media(max-width:520px){
  .wjb-tagcard-grid{ grid-template-columns:repeat(2,1fr); }
}
.wjb-tagcard-chip{
  width:100%;
  text-align:center;
  background:rgba(255,255,255,.035);
}
.wjb-tagcard-chip:active{
  background:rgba(56,189,248,.14);
}
.wjb-tagcard-viewall{
  display:block;
  width:100%;
  margin-top:14px;
  padding:10px;
  text-align:center;
  background:transparent;
  border:0;
  color:#7dd3fc;
  font-weight:800;
  font-size:13.5px;
  cursor:pointer;
}
.wjb-tagcard-empty{
  margin:2px 0 0;
  font-size:12.5px;
  color:rgba(224,239,255,.55);
}
.light-mode .wjb-tagcard{
  background:rgba(255,255,255,.92)!important;
  border-color:rgba(37,99,235,.18)!important;
}
.light-mode .wjb-tagcard-head h3,
.light-mode .wjb-tagcard-popular-title{ color:#0f172a; }
.light-mode .wjb-tagcard-pill,
.light-mode .wjb-tagcard-add,
.light-mode .wjb-tagcard-chip{
  background:#eef2ff;
  border-color:rgba(37,99,235,.18);
  color:#1e293b;
}


/* v21.3 — Tag card only layout: Anime/Manga use the same tag component.
   Removed compact/duplicate/health buttons from the visible list tools area. */
.list-tools-bar.wjb-tagcard-only{
  display:block!important;
  margin:10px 0 16px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.list-tools-bar.wjb-tagcard-only .wjb-tagcard{
  margin:0!important;
}


/* v21.4 fix: Anime list/tag card must stay visible above the add/search cards. */
#myListToolsBar.wjb-tagcard-only{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  margin:16px 0 18px!important;
}
#tagFilterBar.wjb-tagcard{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}
#mainApp > #myListToolsBar + .view-bar + .form-box,
#mainApp > #myListToolsBar + .form-box{
  margin-top:14px!important;
}


/* v21.6 Safe Sticky Tag Bar: แถบแท็กลอยด้านล่างแบบปลอดภัย ไม่บล็อกหน้าเว็บ */

/* WJB v22.0 — removed Floating/Sticky Tag UI. Tag card remains in list pages. */


/* v22.0 — ย้ายการ์ดแท็กมาอยู่ในโซนลิสต์ ใต้แจ้งเตือน/เหนือรายการจริง */
.wjb-list-inline-tagcard{
  margin: 14px 0 18px !important;
}
#list > .wjb-list-inline-tagcard,
#mangaList > .wjb-list-inline-tagcard{
  width: 100%;
  box-sizing: border-box;
}
#list > .wjb-list-inline-tagcard + .category,
#mangaList > .wjb-list-inline-tagcard + .category{
  margin-top: 10px;
}

/* WJB v23.0 Season Modal Touch Hard Fix */
body.wjb-season-modal-open .wjb-v60-bottom-nav{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
#seasonDetailModal.settings-modal,
#mangaSeasonDetailModal.settings-modal{
  z-index:2147482000 !important;
  overscroll-behavior:contain !important;
  touch-action:pan-y !important;
}
#seasonDetailModal.settings-modal[style*="display: flex"],
#seasonDetailModal.settings-modal[style*="display:flex"],
#seasonDetailModal.settings-modal.show,
#mangaSeasonDetailModal.settings-modal[style*="display: flex"],
#mangaSeasonDetailModal.settings-modal[style*="display:flex"],
#mangaSeasonDetailModal.settings-modal.show{
  pointer-events:auto !important;
}
#seasonDetailModal .season-detail-box,
#mangaSeasonDetailModal .season-detail-box{
  pointer-events:auto !important;
  position:relative !important;
  z-index:2147482100 !important;
  max-height:none !important;
  overflow:visible !important;
}
#seasonDetailModal .season-close-btn,
#mangaSeasonDetailModal .season-close-btn{
  position:sticky !important;
  top:calc(10px + env(safe-area-inset-top,0px)) !important;
  z-index:2147483000 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent !important;
}
#seasonDetailModal[style*="display: none"],
#seasonDetailModal[style*="display:none"],
#mangaSeasonDetailModal[style*="display: none"],
#mangaSeasonDetailModal[style*="display:none"]{
  pointer-events:none !important;
}


/* WJB v24.1 Bulk Delete UX Fix
   Keep confirmation above season/detail overlays and hide the bulk action bar
   while the confirmation is open, so the dialog is immediately visible. */
.wjb-confirm-modal{
  z-index:2147483647 !important;
  pointer-events:auto !important;
}
body.wjb-confirm-open .bulk-delete-floating{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
body.wjb-confirm-open .wjb-v60-bottom-nav{
  pointer-events:none !important;
}


/* ===== WJB v24.5 Hall of Fame + Modal Stability ===== */
html.wjb-v24-5-modal-manager .settings-modal,
html.wjb-v24-5-modal-manager .modal{
  touch-action:pan-y !important;
  -webkit-overflow-scrolling:touch !important;
}
html.wjb-v24-5-modal-manager .settings-modal[aria-hidden="true"],
html.wjb-v24-5-modal-manager .modal[aria-hidden="true"]{
  pointer-events:none !important;
}

#hallModal.settings-modal{
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  padding:max(10px, env(safe-area-inset-top,0px)) 10px max(10px, env(safe-area-inset-bottom,0px)) !important;
  background:rgba(1,6,18,.86) !important;
}
#hallModal .hall-modal-box{
  width:min(980px,calc(100vw - 20px)) !important;
  max-width:min(980px,calc(100vw - 20px)) !important;
  height:auto !important;
  max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 20px) !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  border-radius:26px !important;
}
#hallModal .hall-modal-header{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 12px 18px;
  border-bottom:1px solid rgba(125,211,252,.18);
  background:linear-gradient(180deg,rgba(7,18,39,.99),rgba(7,18,39,.94));
  box-shadow:0 10px 26px rgba(2,6,23,.24);
  z-index:5;
}
#hallModal .hall-modal-header h2{
  margin:0 !important;
  min-width:0;
  font-size:clamp(22px,5vw,32px) !important;
  line-height:1.15 !important;
  color:#fff;
}
#hallModal .hall-modal-close{
  position:static !important;
  inset:auto !important;
  flex:0 0 auto;
  width:auto !important;
  min-width:84px !important;
  margin:0 !important;
  padding:10px 14px !important;
  border:1px solid rgba(248,113,113,.42) !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#ef4444,#be123c) !important;
  color:#fff !important;
  font-weight:900 !important;
  box-shadow:0 8px 20px rgba(190,18,60,.24) !important;
  z-index:6 !important;
}
#hallModal #hallContent{
  flex:1 1 auto;
  min-height:0;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-y:contain !important;
  touch-action:pan-y !important;
  padding:14px 14px calc(24px + env(safe-area-inset-bottom,0px)) !important;
  scroll-padding-top:12px;
}
#hallModal .hall-hero-card{margin:0 !important;}
#hallModal .hall-modal-intro{
  margin:0 0 14px;
  color:#cbd5e1;
  font-weight:750;
  line-height:1.4;
}
@media(max-width:560px){
  #hallModal.settings-modal{padding:6px !important;}
  #hallModal .hall-modal-box{
    width:calc(100vw - 12px) !important;
    max-width:calc(100vw - 12px) !important;
    max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 12px) !important;
    border-radius:22px !important;
  }
  #hallModal .hall-modal-header{padding:12px 10px 10px 14px;}
  #hallModal .hall-modal-header h2{font-size:23px !important;}
  #hallModal .hall-modal-close{min-width:76px !important;padding:9px 12px !important;font-size:14px !important;}
  #hallModal #hallContent{padding:12px 10px calc(22px + env(safe-area-inset-bottom,0px)) !important;}
}