:root{
  --bg:#0b0f14; --bd:rgba(255,255,255,.10); --txt:#e8eef7; --mut:#a7b4c7;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:14px system-ui,-apple-system,Segoe UI,Roboto}
.notice{
  margin:10px 12px 0;padding:10px 12px;border:1px solid var(--bd);border-radius:14px;
  background:rgba(255,255,255,.05);color:var(--txt);
}
.top{
  height:56px;display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-bottom:1px solid var(--bd);background:rgba(0,0,0,.25);
}
.brand{display:flex;gap:10px;align-items:center}
.logo{
  width:34px;height:34px;border:1px solid var(--bd);border-radius:12px;
  display:grid;place-items:center;font-weight:800;
}
.title{font-weight:800}
.sub{color:var(--mut);font-size:12px}
.right{display:flex;gap:10px;align-items:center}
.pill{
  border:1px solid var(--bd);border-radius:999px;padding:8px 10px;
  background:rgba(255,255,255,.04);color:var(--txt);text-decoration:none;cursor:pointer;
}
.wrap{height:calc(100% - 56px)}
iframe{width:100%;height:100%;border:0;display:block;background:#000}

/* iPhone/Safari: echtes Fullscreen geht i.d.R. nicht → Theater Mode */
body.theater{overflow:hidden}
body.theater .top{display:none !important}
body.theater .wrap{
  position:fixed;inset:0;height:100%;
}

body.ios-mode .right{
  width:100%;
  justify-content:flex-end;
}

body.ios-mode .pill#btnDirect{
  background:rgba(121,168,255,.15);
  border-color:rgba(121,168,255,.35);
}