/* KovalStream responsive UI */
:root{--bg:#0b0b0f;--panel:#11111a;--panel2:#141427;--border:#2a2a38;--border2:#2b2b3f;--text:#eaeaf0}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;
  padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top));padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right));
  background:rgba(10,10,14,.92);backdrop-filter:blur(8px);border-bottom:1px solid #1d1d28}
.brand{font-weight:800;letter-spacing:.5px;user-select:none}
.toggles{display:flex;gap:8px}
.toggle{padding:10px 12px;font-size:14px;border-radius:999px;background:var(--panel2);border:1px solid var(--border2);color:var(--text);cursor:pointer;touch-action:manipulation}
.toggle.active{background:#1b1b32;border-color:#3a3a55}
.search{flex:1 1 260px;min-width:180px;padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--panel);color:var(--text);outline:none}
.search:focus{border-color:#3a3a55}
.actions{display:flex;gap:8px;flex:0 0 auto}
.status{font-size:12px;opacity:.85;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.main{padding:16px;padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right));padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.banner{margin:0 0 14px;padding:12px 14px;border-radius:14px;background:var(--panel2);border:1px solid var(--border);font-size:13px;line-height:1.35}
.banner.hidden{display:none}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.card{background:var(--panel);border:1px solid #1f1f2b;border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .08s ease;touch-action:manipulation}
.card:hover{transform:translateY(-2px)}
.thumb{width:100%;aspect-ratio:16/9;object-fit:cover;background:#1b1b28;display:block}
.meta{padding:10px 10px 12px}
.title{font-size:13px;line-height:1.2;margin:0 0 6px}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{font-size:11px;opacity:.82;padding:3px 9px;border-radius:999px;background:#181827;border:1px solid var(--border)}
.btn{display:inline-block;padding:11px 12px;border-radius:12px;background:#191927;border:1px solid var(--border2);color:var(--text);text-decoration:none;cursor:pointer;touch-action:manipulation}
.btn:hover{border-color:#3a3a55}
.btn.small{padding:10px 11px;font-size:13px}
.hidden{display:none!important}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:grid;place-items:center;padding:18px;padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.modal-inner{width:min(980px,100%);background:#0f0f16;border:1px solid #232335;border-radius:16px;padding:12px;max-height:92vh;overflow:auto}
.modal-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 6px 10px}
.modal-title{font-weight:800}
.player{width:100%;border-radius:12px;background:black}
.note{font-size:12px;opacity:.8;padding:10px 6px 4px}
@media(max-width:600px){
  .topbar{padding:12px 12px;padding-top:calc(12px + env(safe-area-inset-top))}
  .toggles{width:100%}
  .toggle{flex:1 1 0}
  .actions{width:100%}
  .actions .btn{flex:1 1 0}
  .status{width:100%}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .title{font-size:14px}
  .modal{padding:0;place-items:stretch}
  .modal-inner{width:100%;height:100%;max-height:none;border-radius:0;border:0}
}
@media(min-width:601px) and (max-width:1024px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .title{font-size:14px}
}