*{box-sizing:border-box}
:root{--bg:#090b0e;--panel:#151922;--panel2:#1d2431;--text:#f7f9fc;--muted:#9ba7b4;--border:#2c3544}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.hidden{display:none!important}.center{min-height:100vh;display:grid;place-items:center;padding:24px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:24px;padding:24px;margin-bottom:18px}
.lock{width:min(500px,100%);text-align:center}h1,h2{margin:0 0 10px}
header{display:flex;justify-content:space-between;align-items:center;padding:18px 26px;border-bottom:1px solid var(--border)}
nav{position:sticky;top:0;z-index:30;display:flex;gap:10px;padding:11px 18px;background:rgba(9,11,14,.97);border-bottom:1px solid var(--border)}
nav button{flex:1;background:var(--panel2);color:var(--text)}
main{padding:22px}.muted,small{color:var(--muted)}
input,button{border-radius:18px;border:1px solid var(--border);font-size:20px;padding:16px 18px;min-height:56px}
input{background:#0e1218;color:var(--text);width:100%}button{background:#fff;color:#111;font-weight:800;cursor:pointer}
button.secondary{background:var(--panel2);color:var(--text)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:17px}
.tile{min-height:175px;background:var(--panel);color:var(--text);text-align:left;display:flex;flex-direction:column;justify-content:space-between}
.tile span{font-size:46px}.tile b{font-size:26px}.search-row{display:grid;grid-template-columns:1fr auto;gap:12px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.chips button{font-size:14px;min-height:40px;padding:7px 12px}
.status{margin-top:13px}.view-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.actions{display:flex;gap:8px;flex-wrap:wrap}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.video-card{background:var(--panel);border:1px solid var(--border);border-radius:20px;overflow:hidden}
.thumb{aspect-ratio:16/9;background:#000;cursor:pointer}.thumb img{width:100%;height:100%;object-fit:cover}
.video-info{padding:15px}.video-title{font-size:19px;font-weight:800;line-height:1.25}.video-meta{color:var(--muted);margin-top:7px}
.card-actions{display:flex;gap:8px;padding:0 14px 14px}.card-actions button{flex:1;font-size:16px;min-height:47px;padding:9px}
.video-wrap{position:relative;width:100%;padding-top:56.25%;background:#000;border-radius:18px;overflow:hidden}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.browser-frame{height:calc(100vh - 190px);min-height:540px;background:#000;border:1px solid var(--border);border-radius:20px;overflow:hidden}
.browser-frame iframe{width:100%;height:100%;border:0;background:#fff}
.player{width:100%;margin-top:18px;max-height:72vh;background:#000;border-radius:18px}
.notice{margin-top:12px;padding:13px 15px;background:var(--panel2);border-radius:15px;color:var(--muted);line-height:1.4}
@media(max-width:700px){header,main{padding:14px}.search-row{grid-template-columns:1fr}.video-grid{grid-template-columns:1fr}.view-head{align-items:flex-start;flex-direction:column}.actions{width:100%}.actions button{flex:1}.browser-frame{height:70vh;min-height:420px}}
@media(orientation:landscape) and (min-width:800px){header{padding:10px 22px}header h1{font-size:25px}main{padding:15px 25px}.video-grid{grid-template-columns:repeat(3,1fr)}.browser-frame{height:calc(100vh - 155px)}}

/* Portal fullscreen: works without the browser Fullscreen API */
body.portal-fullscreen { overflow:hidden; }
body.portal-fullscreen header,
body.portal-fullscreen nav,
body.portal-fullscreen main > .view:not(.portal-fullscreen-active),
body.portal-fullscreen .portal-fullscreen-active > .card {
  display:none !important;
}
body.portal-fullscreen main {
  padding:0 !important;
  margin:0 !important;
}
body.portal-fullscreen .portal-fullscreen-active {
  display:block !important;
  position:fixed;
  inset:0;
  z-index:99998;
  background:#000;
}
body.portal-fullscreen .portal-fullscreen-active .browser-frame,
body.portal-fullscreen .portal-fullscreen-active .video-wrap {
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:0 !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  z-index:99998;
}
body.portal-fullscreen .portal-fullscreen-active iframe {
  width:100% !important;
  height:100% !important;
}
.portal-exit {
  position:fixed;
  z-index:99999;
  top:max(12px,env(safe-area-inset-top));
  right:max(12px,env(safe-area-inset-right));
  width:auto;
  min-height:48px;
  padding:10px 16px;
  border-radius:16px;
  background:rgba(15,18,24,.86);
  color:white;
  border:1px solid rgba(255,255,255,.25);
  font-size:18px;
  font-weight:800;
}

.pin-pad{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:16px 0;
}
.pin-pad button{min-height:64px;font-size:28px}
.unlock-wide{width:100%}
#pin{text-align:center;letter-spacing:.35em;font-size:30px}

textarea{
  width:100%;
  min-height:58px;
  resize:none;
  overflow:hidden;
  border-radius:18px;
  border:1px solid var(--border);
  font:inherit;
  font-size:20px;
  line-height:1.35;
  padding:16px 18px;
  background:#0e1218;
  color:var(--text);
  appearance:none;
  -webkit-appearance:none;
  user-select:text;
  -webkit-user-select:text;
  touch-action:auto;
}
textarea:focus{
  outline:2px solid #2b86d1;
  outline-offset:0;
}