:root{
  --bg: #0B0D12;
  --surface: #151822;
  --surface-2: #1B1F2B;
  --border: #262B38;
  --text: #EDEFF4;
  --text-muted: #8B93A7;
  --amber: #C89B5C;
  --amber-dim: #5C4426;
  --amber-bright: #E8C088;
  --teal: #34D8C0;
  --danger: #FF6B6B;
  --radius: 12px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%; margin:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  overflow:hidden;
  position:fixed;
  inset:0;
}
input,button,select{font-family:inherit;}
.hidden{display:none !important;}

/* ---------- Signal bars (signature element) ---------- */
.brand-mark{display:flex; align-items:flex-end; gap:4px; height:28px;}
.brand-mark.small{height:18px; gap:3px;}
.brand-mark .bar{
  width:5px; background:var(--amber); border-radius:2px;
  animation:pulse 1.1s ease-in-out infinite;
}
.brand-mark.small .bar{width:3px;}
.brand-mark .b1{height:40%; animation-delay:0s;}
.brand-mark .b2{height:70%; animation-delay:.12s;}
.brand-mark .b3{height:100%; animation-delay:.24s;}
.brand-mark .b4{height:55%; animation-delay:.36s;}
@keyframes pulse{
  0%,100%{opacity:.45; transform:scaleY(.7);}
  50%{opacity:1; transform:scaleY(1);}
}
@media (prefers-reduced-motion: reduce){
  .brand-mark .bar{animation:none; opacity:.9;}
}

.signal-indicator{display:flex; align-items:flex-end; gap:2px; height:14px;}
.signal-indicator .bar{width:3px; background:var(--teal); border-radius:1px;}
.signal-indicator .b1{height:35%;} .signal-indicator .b2{height:65%;} .signal-indicator .b3{height:100%;}
.signal-indicator.offline .bar{background:var(--text-muted);}

/* ---------- Screens ---------- */
.screen{position:absolute; inset:0; display:none; flex-direction:column;}
.screen.active{display:flex;}

/* ---------- Setup screen ---------- */
#setup-screen{align-items:center; justify-content:center; padding:24px; overflow-y:auto;}
.setup-wrap{width:100%; max-width:380px;}
.brand{text-align:center; margin-bottom:28px;}
.brand-logo{width:min(300px, 78%); height:auto; margin:0 auto 6px; display:block; filter:drop-shadow(0 4px 18px rgba(200,155,92,.25));}
.tagline{color:var(--text-muted); font-size:14px; margin:6px 0 0;}

.setup-tabs{display:flex; background:var(--surface); border-radius:10px; padding:4px; margin-bottom:20px;}
.setup-tab{
  flex:1; padding:10px; background:none; border:none; color:var(--text-muted);
  font-size:14px; font-weight:600; border-radius:8px; cursor:pointer;
}
.setup-tab.active{background:var(--amber); color:#1a1206;}

.setup-form{display:none; flex-direction:column; gap:10px;}
.setup-form.active{display:flex;}
.setup-form label{font-size:12.5px; color:var(--text-muted); margin-top:6px;}
.setup-form input{
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:12px 14px; border-radius:9px; font-size:15px; outline:none;
}
.setup-form input:focus{border-color:var(--amber);}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}

.btn-primary{
  margin-top:14px; background:var(--amber); color:#1a1206; border:none;
  padding:13px; border-radius:9px; font-size:15px; font-weight:700; cursor:pointer;
}
.btn-primary:active{transform:scale(.98);}
.btn-secondary{
  background:var(--surface-2); color:var(--text); border:1px solid var(--border);
  padding:12px; border-radius:9px; font-size:14px; font-weight:600; cursor:pointer; width:100%;
  margin-bottom:10px;
}

.setup-error{color:var(--danger); font-size:13.5px; text-align:center; min-height:18px; margin:12px 0 0;}
.setup-loading{display:flex; align-items:center; gap:10px; justify-content:center; margin-top:16px; color:var(--text-muted); font-size:13.5px;}

.saved-sources{margin-top:26px; border-top:1px solid var(--border); padding-top:16px;}
.saved-title{font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); margin:0 0 10px;}
.saved-source-item{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:9px;
  padding:11px 13px; margin-bottom:8px; cursor:pointer;
}
.saved-source-item .del{color:var(--text-muted); font-size:18px; padding:0 4px;}

/* ---------- Top bar ---------- */
.top-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 10px; flex-shrink:0;
}
.top-bar-left{display:flex; flex-direction:row; align-items:center; gap:9px;}
.top-bar-logo{width:30px; height:30px; object-fit:contain; border-radius:6px; flex-shrink:0;}
.top-bar-text{display:flex; flex-direction:column;}
.app-name{font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--amber-bright); letter-spacing:.3px;}
.source-name{font-size:11.5px; color:var(--text-muted); font-family:var(--font-mono);}

/* ---------- Search + categories ---------- */
.search-bar{padding:0 16px 10px; flex-shrink:0;}
.search-bar input{
  width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:10px 14px; border-radius:9px; font-size:14px; outline:none;
}
.search-bar input:focus{border-color:var(--amber);}

.category-rail{
  display:flex; gap:8px; overflow-x:auto; padding:0 16px 12px; flex-shrink:0;
  scrollbar-width:none;
}
.category-rail::-webkit-scrollbar{display:none;}
.cat-chip{
  flex-shrink:0; background:var(--surface); border:1px solid var(--border); color:var(--text-muted);
  padding:7px 14px; border-radius:20px; font-size:13px; white-space:nowrap; cursor:pointer;
}
.cat-chip.active{background:var(--amber); color:#1a1206; border-color:var(--amber); font-weight:600;}

/* ---------- Content area ---------- */
.content-area{flex:1; overflow-y:auto; padding:0 16px 90px;}
.content-grid{display:none;}
.content-grid.visible{display:grid;}

.channel-grid{grid-template-columns:1fr; gap:8px;}
.channel-card{
  display:flex; align-items:center; gap:12px; background:var(--surface);
  border:1px solid var(--border); border-radius:10px; padding:9px 12px; cursor:pointer;
}
.channel-card .num{font-family:var(--font-mono); font-size:12px; color:var(--text-muted); width:32px; flex-shrink:0;}
.channel-card img{width:38px; height:38px; object-fit:contain; border-radius:6px; background:var(--surface-2); flex-shrink:0;}
.channel-card .name{font-size:14px; font-weight:500; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.channel-card .fav-btn{color:var(--text-muted); font-size:18px; padding:4px;}
.channel-card .fav-btn.active{color:var(--amber);}

.poster-grid{grid-template-columns:repeat(3, 1fr); gap:10px;}
.poster-card{cursor:pointer;}
.poster-card .poster-img{
  width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:9px; background:var(--surface);
  border:1px solid var(--border);
}
.poster-card .poster-title{
  font-size:12px; margin-top:6px; overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.3;
}

.empty-state{display:flex; flex-direction:column; align-items:center; gap:12px; padding:60px 20px; color:var(--text-muted); text-align:center;}
.empty-state .brand-mark{justify-content:center;}

/* ---------- Tab bar ---------- */
.tab-bar{
  position:absolute; bottom:0; left:0; right:0; display:flex;
  background:var(--surface); border-top:1px solid var(--border);
  padding:8px 4px calc(8px + env(safe-area-inset-bottom));
}
.tab-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; color:var(--text-muted); font-size:10.5px; cursor:pointer; padding:4px;
}
.tab-btn svg{width:22px; height:22px;}
.tab-btn.active{color:var(--amber);}

/* ---------- Player ---------- */
.player-wrap{position:relative; width:100%; height:100%; background:#000;}
#video-el{width:100%; height:100%; object-fit:contain; background:#000;}
.player-topbar{
  position:absolute; top:0; left:0; right:0; display:flex; align-items:center; gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) 16px 30px 12px;
  background:linear-gradient(to bottom, rgba(0,0,0,.75), transparent);
}
.player-back{background:none; border:none; color:var(--text); padding:6px; cursor:pointer;}
.player-title{font-size:15px; font-weight:600;}
.player-status{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; background:rgba(0,0,0,.55); color:var(--text-muted); font-size:13.5px;
}

/* ---------- Settings panel ---------- */
.settings-panel{
  position:absolute; inset:0; background:var(--bg); padding:20px 16px; z-index:5;
  display:flex; flex-direction:column; gap:6px; overflow-y:auto;
}
.settings-row{display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--border); font-size:14px;}
.settings-row select{background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:7px; padding:6px 10px;}
.settings-link{color:var(--teal); font-size:13.5px; margin-top:16px; text-decoration:none;}
.settings-footer{margin-top:auto; text-align:center; color:var(--text-muted); font-size:12px; padding-top:20px; font-family:var(--font-mono);}

/* ---------- Responsive ---------- */
@media (min-width:640px){
  .poster-grid{grid-template-columns:repeat(4,1fr);}
}
@media (min-width:900px){
  .poster-grid{grid-template-columns:repeat(6,1fr);}
}