:root{--bg:#0b0c10;--fg:#e5e7eb;--accent:#00d1b2;--muted:#9ca3af;--danger:#ff5a5f;}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg);color:var(--fg)}
a{color:inherit;text-decoration:none}
.wrap{min-height:100%;display:grid;place-items:center;padding:24px}
.card{width:min(100%,980px);background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.35);overflow:hidden}
.head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,0.06)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.title{font-weight:600;letter-spacing:.2px}
.pad{padding:18px}
.foot{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-top:1px solid rgba(255,255,255,0.06);font-size:12px;color:var(--muted)}
.tag{padding:2px 8px;border:1px solid rgba(255,255,255,0.15);border-radius:999px}
.form{display:grid;gap:10px;max-width:360px}
input,button{padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.15);background:#0f1115;color:var(--fg)}
button{background:var(--accent);border:0;color:#06281f;font-weight:700;cursor:pointer}
button:disabled{opacity:.6;cursor:not-allowed}
.muted{color:var(--muted);font-size:12px}
.bad{color:var(--danger);margin:8px 0}
.ok{color:#16c60c;margin:8px 0}
.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.list li{display:flex;justify-content:space-between;align-items:center;padding:12px;border:1px solid rgba(255,255,255,0.08);border-radius:12px}
.btn{padding:8px 12px;border-radius:10px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2)}
.right{text-align:right}.mt10{margin-top:10px}
.player .vbox{background:#000;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.controls{display:flex;gap:8px;align-items:center;padding:10px}
.hidden{display:none}
.link{color:#c2e7ff;text-decoration:underline}


/* === No-crop override (append-only) === */
.player .vbox video{
  display:block;
  max-width:100%;
  width:100%;
  height:auto !important;      /* let height follow intrinsic ratio */
  object-fit:contain !important; /* show full frame, no cropping */
  background:#000;
}
/* If any fixed height on container exists, relax it on small screens */
@media (max-width: 640px){
  .player .vbox{
    height:auto !important;
    max-height:none !important;
  }
}


/* === iOS Safari no-crop contain fix (append-only) === */
@supports (-webkit-touch-callout: none) {
  .player .vbox{
    aspect-ratio: auto !important;
    height: auto !important;
    max-height: none !important;
  }
  .player .vbox video{
    width: 100% !important;
    height: auto !important;
    max-height: 80vh !important;
    object-fit: contain !important; /* show full frame without cropping */
    background:#000;
  }
  @media (orientation: landscape){
    .player .vbox video{ max-height: 100vh !important; }
  }
}


/* --- iPhone-friendly fullscreen icon button (append-only) --- */
.fs-icon{
  position:absolute; right:10px; bottom:10px;
  width:38px; height:38px; border-radius:10px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  color:#fff; z-index:5; cursor:pointer; -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(2px);
}
.fs-icon svg{ width:18px; height:18px; display:block; pointer-events:none; }
.fs-icon:hover{ background:rgba(0,0,0,.5); }
@media (max-width:640px){ .fs-icon{ width:34px; height:34px; right:8px; bottom:8px; } }


/* --- Move fullscreen button to right end of controls bar --- */
.controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  position: relative;
}
.fs-icon {
  position: static !important;
  margin-left: auto;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  border-radius: 8px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fs-icon svg{ width:18px;height:18px;pointer-events:none; }

/* Move fullscreen button to right end (strong) */
.controls{display:flex!important;align-items:center!important;gap:8px!important;position:relative!important;width:100%!important}
.fs-icon{
  margin-left:auto!important; position:static!important;
  width:38px;height:38px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.25);color:#fff;
}
.fs-icon svg{width:18px;height:18px;pointer-events:none}
@media (max-width:640px){.fs-icon{width:34px;height:34px}}


/* --- v2 adjust fs-icon margin slightly left --- */
.fs-icon {
  margin-left: auto !important;
  margin-right: 20px !important;
}
@media (max-width:640px){
  .fs-icon { margin-right: 20px !important; }
}