:root { --ink:#0a2029; --teal:#0d5661; --ice:#eef4f2; --cream:#f7f5ef; --red:#df4b36; }
html, body { margin:0; min-height:100%; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; color:var(--ink); background:var(--cream); }
body { background-image: radial-gradient(circle at 85% 15%, rgba(104,173,169,.14), transparent 28%); }
h1,h2,strong { letter-spacing:-.035em; } h1 { font-size:clamp(2.2rem,5vw,4.6rem); font-weight:750; } h2 { font-size:1.55rem; }
.eyebrow { margin:0 0 .5rem; color:#4e777b; font-size:.72rem; font-weight:800; letter-spacing:.16em; }
.hero { margin:5vh 0; padding:clamp(3rem,8vw,7rem); min-height:520px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; color:white; border-radius:28px; background:linear-gradient(120deg,rgba(5,31,40,.96),rgba(5,31,40,.65)),radial-gradient(circle at 80% 30%,#1c7f85,#071c25 60%); box-shadow:0 28px 70px rgba(6,31,40,.18); }
.hero .eyebrow { color:#8cc7c5; }.hero .lead { max-width:690px; margin:1rem 0 2rem; color:#d7e3e2; font-size:1.2rem; line-height:1.7; }
.btn { border-radius:9px; font-weight:650; }.btn-primary { background:var(--red); border-color:var(--red); }.btn-primary:hover { background:#c43c2a; border-color:#c43c2a; }.btn-dark { background:var(--ink); border-color:var(--ink); }
.auth-card { max-width:460px; margin:7vh auto; padding:2.5rem; border:1px solid #dce4e1; border-radius:20px; background:rgba(255,255,255,.86); box-shadow:0 20px 55px rgba(19,49,55,.08); }.auth-card h1 { font-size:2.5rem; }.auth-card label { display:grid; gap:.45rem; margin:1.1rem 0; font-size:.84rem; font-weight:700; }
.form-control,.form-select { border-color:#cddad7; border-radius:9px; padding:.72rem .85rem; background:#fff; }.form-control:focus,.form-select:focus { border-color:#4e8989; box-shadow:0 0 0 .2rem rgba(78,137,137,.12); }
.dashboard-header { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:2rem; }.dashboard-header h1 { margin:0; font-size:3rem; }.team-picker { min-width:260px; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.25rem; }.stat { padding:1.2rem 1.4rem; border-radius:14px; color:white; background:var(--teal); }.stat:nth-child(2) { background:#173943; }.stat:nth-child(3) { background:#4d7778; }.stat:nth-child(4) { background:var(--red); }.stat span { display:block; opacity:.72; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; }.stat strong { font-size:1.8rem; }
.workspace-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }.panel { padding:1.5rem; border:1px solid #dae3e0; border-radius:16px; background:rgba(255,255,255,.9); box-shadow:0 10px 35px rgba(15,48,54,.045); }.panel-title h2 { margin:0 0 1rem; }.full-width { grid-column:1/-1; }.empty-state { max-width:700px; padding:3rem; }
.stack-form { display:grid; gap:.75rem; padding:1rem; border-radius:12px; background:var(--ice); }.inline-form,.form-row { display:flex; gap:.75rem; }.inline-form .form-control { flex:1; }.form-row>* { min-width:0; flex:1; }
.item-list { margin-top:1rem; }.list-item { display:flex; align-items:center; gap:.8rem; padding:.9rem .25rem; border-bottom:1px solid #e7ecea; }.list-item:last-child { border:0; }.list-item small { display:block; color:#708287; }.avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--teal); font-weight:800; }.match-item { justify-content:space-between; }
.member-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.7rem; margin-top:1rem; }.member-card { display:flex; justify-content:space-between; padding:.9rem 1rem; border-radius:10px; background:var(--ice); font-size:.82rem; }.member-card strong { color:var(--teal); }.muted { color:#728488; }
#blazor-error-ui { display:none; position:fixed; bottom:0; left:0; right:0; z-index:1000; padding:.8rem; background:#ffe7a8; }.loading-progress { display:block; margin:20vh auto; }
@media(max-width:800px){.stats-grid{grid-template-columns:1fr 1fr}.workspace-grid{grid-template-columns:1fr}.full-width{grid-column:auto}.dashboard-header{align-items:stretch;flex-direction:column}.team-picker{min-width:0}.inline-form{flex-direction:column}}

.practice-create { display:flex; align-items:center; justify-content:space-between; gap:2rem; }.practice-create h2 { margin:0; }.practice-create form { flex:1; max-width:620px; }
.session-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }.session-card { padding:1.3rem; text-align:left; border:1px solid #d8e3df; border-radius:14px; background:white; color:var(--ink); transition:.18s ease; }.session-card:hover { transform:translateY(-2px); border-color:#83aaa7; box-shadow:0 12px 30px rgba(15,48,54,.09); }.session-card div { display:flex; align-items:center; gap:.55rem; }.session-card p { margin:.8rem 0; }.session-card small { color:#74868a; }
.status-dot { width:9px; height:9px; border-radius:50%; background:#91a0a2; }.status-active { background:#34a273; box-shadow:0 0 0 4px rgba(52,162,115,.13); }
.practice-actions { display:flex; gap:.65rem; }.degraded-banner { padding:1rem 1.2rem; border:1px solid #edce84; border-radius:12px; background:#fff6db; color:#725517; }
.camera-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.camera-tile { display:flex; align-items:center; gap:1rem; min-height:105px; padding:1.1rem; border:1px dashed #aebfbd; border-radius:14px; background:rgba(255,255,255,.55); }.camera-tile.ready { border-style:solid; border-color:#67a38f; background:#edf8f2; }.camera-icon { width:44px; height:44px; display:grid; place-items:center; color:#7c918f; border-radius:12px; background:#dde8e5; }.camera-tile.ready .camera-icon { color:#16805d; background:#cfeadd; }.camera-tile small { display:block; color:#718488; margin-top:.2rem; }
.stack-form label { display:grid; gap:.35rem; color:#52676b; font-size:.75rem; font-weight:700; }.shot-controller { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; padding:1rem; border:1px solid #d8e2df; border-radius:12px; }.shot-controller>div { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:.5rem; }.shot-controller small { grid-column:2; color:#708287; }
.record-dot { display:inline-block; width:11px; height:11px; border-radius:50%; background:#9aa8a9; }.record-dot.pulse { background:#e14432; animation:pulse 1.25s infinite; } @keyframes pulse { 50% { box-shadow:0 0 0 7px rgba(225,68,50,0); } 0% { box-shadow:0 0 0 0 rgba(225,68,50,.35); } }
.shot-list { display:grid; gap:.5rem; }.shot-row { display:grid; grid-template-columns:1fr 1fr; gap:.2rem .5rem; width:100%; padding:.8rem; text-align:left; border:1px solid transparent; border-radius:9px; background:#f1f5f3; color:var(--ink); }.shot-row small { grid-column:1/-1; color:#748589; }.shot-row.selected { border-color:#5c918d; background:#e7f2ef; }
.clip-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; }.clip-card { display:grid; gap:.35rem; }.clip-card video { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; background:#06191f; }.clip-card small { color:#718488; }
.camera-page { max-width:760px; margin:0 auto; text-align:center; }.camera-page h1 { font-size:3rem; }.camera-join { margin:2rem auto; text-align:left; }.phone-monitor { display:none; position:relative; overflow:hidden; border-radius:22px; background:#06191f; box-shadow:0 25px 60px rgba(4,23,30,.25); }.phone-monitor.visible { display:block; }.phone-monitor video { display:block; width:100%; max-height:70vh; object-fit:contain; }.monitor-overlay { position:absolute; top:1rem; left:1rem; display:flex; align-items:center; gap:.55rem; padding:.55rem .75rem; border-radius:99px; color:white; background:rgba(4,22,29,.68); font-size:.72rem; letter-spacing:.08em; }.camera-telemetry { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-top:1rem; }.camera-telemetry span { padding:.4rem .65rem; border-radius:7px; background:#e4eeeb; color:#426267; font-size:.75rem; }
.phone-monitor.portrait { width:min(100%,430px); margin-inline:auto; }.phone-monitor.landscape { width:100%; }.clip-card.portrait { width:min(100%,430px); justify-self:center; }.clip-card.portrait video,.clip-card.landscape video { object-fit:contain; background:#06191f; }
@media(max-width:800px){.practice-create{align-items:stretch;flex-direction:column}.practice-create form{max-width:none}.camera-grid{grid-template-columns:1fr}.practice-actions{flex-direction:column}.shot-controller{align-items:stretch;flex-direction:column}.camera-page{margin-top:-1.5rem}}

.live-invite { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; margin-bottom:1rem; }.director-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(380px,1fr); gap:1.25rem; }.live-mosaic { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.live-source { overflow:hidden; color:white; border:2px solid transparent; border-radius:15px; background:#06191f; cursor:grab; transition:opacity .15s ease,transform .15s ease,border-color .15s ease; }.live-source.online { border-color:#2aa978; }.live-source.dragging { opacity:.55; transform:scale(.985); border-color:#efb348; }.live-source video { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; background:#020b0e; }.source-label { display:flex; justify-content:space-between; padding:.7rem .8rem .2rem; }.live-source small { display:block; padding:0 .8rem .65rem; color:#9bb2b6; }.preview-actions { display:flex; gap:.45rem; padding:0 .8rem .65rem; }.preview-actions .btn { flex:1; }.camera-controls { display:flex; align-items:center; justify-content:center; gap:.7rem; padding:.55rem; border-top:1px solid #16323a; font-size:.75rem; }.empty-live { grid-column:1/-1; padding:4rem 2rem; text-align:center; border:1px dashed #9db2af; border-radius:15px; color:#6d8285; }.program-panel { align-self:start; position:sticky; top:1rem; }.program-panel h2 { margin:0; }.studio-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; margin-bottom:.65rem; }.studio-status { flex:none; padding:.3rem .48rem; border-radius:5px; color:white; font-size:.62rem; font-weight:800; letter-spacing:.06em; }.studio-status.preview { background:#2d72d2; }.studio-status.program { background:#c93434; }.layout-picker { display:flex; gap:.5rem; margin-bottom:.65rem; }.preview-compositor,.program-placeholder,.program-description { position:relative; min-height:180px; overflow:hidden; display:grid; grid-template-columns:1fr; margin-bottom:1rem; border-radius:13px; color:white; background:linear-gradient(145deg,#071b23,#123d46); }.preview-compositor.two-up,.program-description.two-up { grid-template-columns:1fr 1fr; }.preview-slot { position:relative; display:grid; place-items:center; min-width:0; min-height:180px; overflow:hidden; border:2px solid #2d72d2; background:#020b0e; }.preview-slot + .preview-slot { border-left-width:1px; }.preview-slot.empty { border-style:dashed; background:repeating-linear-gradient(135deg,#071b23,#071b23 12px,#0a222b 12px,#0a222b 24px); color:#9bb2b6; }.preview-slot video,.program-description video { width:100%; height:100%; min-height:180px; object-fit:contain; background:#020b0e; }.preview-slot span { position:absolute; left:.45rem; bottom:.45rem; z-index:1; padding:.28rem .4rem; border-radius:5px; background:rgba(3,18,24,.78); font-size:.68rem; }.preview-slot.empty span { position:static; background:transparent; }.studio-cut { width:100%; margin-bottom:.4rem; font-weight:800; letter-spacing:.04em; }.studio-hint { display:block; margin-bottom:.7rem; color:#74878a; }.program-caption { position:absolute; left:.6rem; bottom:.6rem; display:flex; gap:.4rem; padding:.35rem .5rem; border-radius:6px; background:rgba(3,18,24,.72); font-size:.68rem; }.program-panel label { display:grid; gap:.4rem; font-size:.78rem; font-weight:700; }.scene-button { width:100%; display:flex; justify-content:space-between; margin:.4rem 0; padding:.7rem .8rem; border:1px solid #cfddda; border-radius:9px; background:white; color:var(--ink); }.scene-button.active { border-color:var(--red); box-shadow:inset 4px 0 var(--red); }.scene-button small { color:#74878a; }.publishing-state { display:flex; align-items:center; gap:.7rem; }.publishing-state small { display:block; color:#77898d; }
@media(max-width:900px){.director-layout{grid-template-columns:1fr}.program-panel{position:static}.live-mosaic{grid-template-columns:1fr}}
.facebook-page-row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.55rem; padding:.65rem; border-radius:9px; background:var(--ice); }.facebook-page-row small { display:block; color:#718488; font-size:.7rem; }

/* Studio live 1920x1080 */
.studio-shell{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);gap:1.25rem;align-items:start}.studio-sources{position:sticky;top:1rem}.studio-section-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:.7rem}.studio-section-title h2{margin:0}.studio-section-title small{color:#718488}.studio-shell .live-mosaic{grid-template-columns:1fr}.source-monitor{position:relative}.source-state{position:absolute;right:.5rem;top:.5rem;padding:.25rem .4rem;border-radius:5px;background:rgba(3,18,24,.78);font-size:.62rem;text-transform:uppercase}.source-stream-error{margin:.35rem .7rem;padding:.45rem .55rem;border-radius:6px;background:#6f2525;color:#fff2f2;font-size:.7rem}.studio-workspace{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.studio-monitor-panel{min-width:0}.studio-controls-panel{grid-column:1/-1}.scene-toolbar{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.65rem}.scene-canvas{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background-color:#02090c;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:5% 8.888%;box-shadow:inset 0 0 0 1px #1d3942}.preview-canvas{box-shadow:0 0 0 3px #2d72d2,inset 0 0 0 1px #1d3942}.program-canvas{box-shadow:0 0 0 3px #c93434,inset 0 0 0 1px #1d3942}.canvas-safe-area{position:absolute;inset:5%;z-index:999;pointer-events:none;border:1px dashed rgba(255,255,255,.16)}.scene-layer{position:absolute;overflow:hidden;background:#07171d;box-shadow:0 2px 12px rgba(0,0,0,.4);touch-action:none}.scene-layer.selected{box-shadow:0 0 0 3px #59a6ff,0 4px 18px rgba(0,0,0,.55)}.scene-layer video{display:block;width:100%;height:100%;background:#02090c}.scene-layer-title{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding:.3rem .45rem;color:#fff;background:linear-gradient(rgba(3,12,16,.92),rgba(3,12,16,.35));font-size:.65rem;cursor:move;user-select:none}.scene-layer-title small{color:#bdd0d5}.scene-resize-handle{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 45%,#59a6ff 46%,#59a6ff 58%,transparent 59%,transparent 68%,#59a6ff 69%)}.program-layer .scene-layer-title,.program-layer .scene-resize-handle{display:none}.layer-offline{position:absolute;inset:0;display:grid;place-items:center;color:#d6e0e2;background:repeating-linear-gradient(135deg,rgba(5,22,28,.9),rgba(5,22,28,.9) 14px,rgba(12,42,51,.9) 14px,rgba(12,42,51,.9) 28px);font-size:.7rem;font-weight:800;letter-spacing:.08em}.canvas-empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#8da3a8;font-weight:700}.canvas-empty small{font-weight:400}.canvas-ruler{display:flex;justify-content:space-between;margin:.35rem 0 .65rem;color:#718488;font-size:.63rem}.program-bug{position:absolute;right:.5rem;top:.5rem;z-index:9999;padding:.25rem .4rem;border-radius:4px;color:#fff;background:#c93434;font-size:.58rem;font-weight:900;letter-spacing:.08em}.layer-inspector{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.65rem;margin:.5rem 0;border-radius:9px;background:#edf3f2}.layer-inspector small{display:block;color:#718488}.inspector-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35rem}.cut-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(220px,1.2fr);gap:.7rem;align-items:end;margin-top:.7rem}.cut-row label,.studio-controls-panel label{display:grid;gap:.35rem;font-size:.75rem;font-weight:700}.studio-cut{height:42px;margin:0}.studio-control-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.check-label{display:flex!important;align-items:center;gap:.5rem}.scene-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.45rem}.scene-list .scene-button{margin:0}
@media(max-width:1200px){.studio-workspace{grid-template-columns:1fr}.studio-controls-panel{grid-column:auto}}@media(max-width:850px){.studio-shell{grid-template-columns:1fr}.studio-sources{position:static}.studio-shell .live-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.studio-shell .live-mosaic{grid-template-columns:1fr}.cut-row,.studio-control-grid{grid-template-columns:1fr}.layer-inspector{align-items:flex-start;flex-direction:column}.inspector-actions{justify-content:flex-start}}

/* Live cameras are intentionally portrait-only for now. Device rotation is ignored. */
.studio-shell .live-source video{aspect-ratio:9/16}
.live-camera-page .phone-monitor{width:min(100%,430px);aspect-ratio:9/16;margin-inline:auto}
.live-camera-page .phone-monitor video{width:100%;height:100%;max-height:none;object-fit:contain}
.phone-camera-controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.7rem;width:min(100%,430px);margin:.85rem auto 0;padding:.8rem;border:1px solid #cddfdd;border-radius:14px;background:#f5f8f7;box-shadow:0 8px 24px rgba(4,23,30,.08)}
.phone-zoom-button{width:46px;height:46px;padding:0;font-size:1.35rem;font-weight:800}
.phone-zoom-slider{display:grid;gap:.35rem;color:#17363d;font-size:.8rem;font-weight:700}
.phone-zoom-slider input{width:100%;min-height:28px;accent-color:var(--teal)}
.phone-muted-state{grid-column:1/-1;padding:.45rem .65rem;border-radius:8px;color:#fff;background:#b93434;font-size:.75rem;font-weight:800}