/* SOOPLAY ver359: visual theme only. Layout, dock transforms, visibility,
   pointer events and controller behavior remain owned by existing styles. */
@font-face{font-family:SooplayNanum;src:url('/web/fonts/NanumGothic.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:SooplayNanum;src:url('/web/fonts/NanumGothicBold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--noir-bg:#101010;--noir-panel:#1b1b1d;--noir-raised:#242426;--noir-line:#56565b;--noir-text:#f4f1ec;--noir-muted:#b9b6b3;--noir-red:#df173b;--noir-red-hover:#f02b4d}
body.noir-login,body.group-layout{color-scheme:dark;font-family:SooplayNanum,system-ui,sans-serif;color:var(--noir-text);background:var(--noir-bg)}
button,input,select,textarea{font-family:inherit}
body.noir-login{--teal:var(--noir-red);--line:var(--noir-line);background:#101010}
.noir-login .hero{border-radius:0;background:#101010}
.noir-login .brand,.noir-login .brand .soop-brand>span{color:var(--noir-text)}
.noir-login .brand::after{content:'';height:3px;width:24px;background:var(--noir-red);position:absolute;bottom:-6px;left:0;border-radius:3px}
.noir-login .hero-copy{pointer-events:none;text-shadow:0 2px 18px #000}
.noir-login .hero h1{color:var(--noir-text)}
.noir-login .hero-copy p{color:#e3dfdc}
.noir-login .hero-dots{display:none}
.noir-login .illustration{inset:0;width:100%;height:100%;mask-image:none}
.noir-login .illustration img{width:100%;height:100%;object-fit:cover;object-position:68% center;display:block}
.noir-login .illustration::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#101010e8 0%,#101010b8 35%,#10101015 73%),linear-gradient(180deg,#10101065,transparent 60%,#10101040)}
.noir-login .entry-card{background:linear-gradient(140deg,#202022,#171719);border-color:#4b4b50;box-shadow:0 16px 42px #0005}
.noir-login .entry-card h2{color:var(--noir-text)}
.noir-login .roles{background:#171719}
.noir-login .roles span{color:var(--noir-muted)}
.noir-login .roles input:checked+span{background:#24171c;color:#ff607a;border-color:var(--noir-red)}
.noir-login .field label,.noir-login .login-profile legend,.noir-login .login-profile label,.noir-login .device-options legend{color:var(--noir-text)}
.noir-login .input-wrap,.noir-login .member-options input,.noir-login .login-profile select{background:#151517;border-color:var(--noir-line);color:var(--noir-text)}
.noir-login .input-wrap input{color:var(--noir-text)}
.noir-login .input-wrap svg{color:var(--noir-muted)}
.noir-login input::placeholder{color:#aaa7a4;opacity:1}
.noir-login .input-wrap:focus-within,.noir-login .login-profile input:focus,.noir-login .login-profile select:focus{border-color:var(--noir-red)}
.noir-login .member-options small,.noir-login .device-options small,.noir-login .permissions-note,.noir-login .member-options p{color:var(--noir-muted)}
.noir-login .device-options label>span{background:#19191b;color:var(--noir-text);border-color:var(--noir-line)}
.noir-login .device-options input:checked+span{background:#29151c;color:var(--noir-text);border-color:var(--noir-red);box-shadow:inset 0 0 0 1px var(--noir-red)}
.noir-login .device-options input:checked+span strong{color:#ff607a}
.noir-login .join-button{background:var(--noir-red);color:white}
.noir-login .join-button:hover{background:var(--noir-red-hover)}
.noir-login .member-options details{color:var(--noir-muted)}
.noir-login #entryStatus{color:#e2dfdb}
.noir-login #entryStatus.error{color:#ff8196}
.noir-login :is(button,input,a,select):focus-visible,.noir-login .roles input:focus-visible+span,.noir-login .device-options input:focus-visible+span{outline:2px solid #ff718b;outline-offset:3px}
@media(max-width:780px){.noir-login .hero{background:none}.noir-login .illustration{display:none}}
/* Classroom: retain the original grid and slide-out docks. No transform,
   display, opacity, visibility or positioning rules for either dock here. */
body.group-layout{--soop-green:var(--noir-red);--soop-ink:var(--noir-text);--soop-paper:var(--noir-bg);--soop-line:var(--noir-line)}
.group-layout .gridChat>.tile{background:#161618!important;border-color:#626267!important;box-shadow:none}
.group-layout .tile>video,.group-layout .soop-video{background:#111!important}
.group-layout .soop-label,.group-layout button.soop-label{background:rgba(15,15,17,.88);color:var(--noir-text);border:1px solid #77777b}
.group-layout .soop-selected{border-color:var(--noir-red)!important;box-shadow:inset 0 0 0 1px var(--noir-red)!important}
.group-layout .soop-wait{color:var(--noir-muted)}
.group-layout .soop-video-empty{background:#18181a;color:var(--noir-muted)}
.group-layout .soop-dock{background:rgba(17,17,19,.97);border-color:#65656a;color:var(--noir-text);box-shadow:0 6px 24px #0007}
.group-layout .soop-edge-top,.group-layout .soop-edge-bottom{border-color:#56565b}
.group-layout .soop-edge::before{background:linear-gradient(#ddd,#ddd) center 3px/14px 1px no-repeat,linear-gradient(#ddd,#ddd) center 5px/14px 1px no-repeat,#38383d}
.group-layout .soop-dock .soop-brand,.group-layout .soop-brand>span{color:var(--noir-text)}
.group-layout .soop-dock .soop-live{color:#ff6a84;background:#36131e}
.group-layout .soop-divider{background:#626267}
.group-layout #soopCount,.group-layout .soop-collapse-hint{color:var(--noir-muted)}
.group-layout .soop-popup-options{background:#1b1b1e;border-color:#66666b;box-shadow:0 10px 24px #0008}
.group-layout :is(.soop-dock,.soop-popup-options) button,
.group-layout .btn,.group-layout .tabBtn,.group-layout .duration-btn,
.group-layout .exercise-floating-controls .playlist-nav button{background:#242427;color:var(--noir-text);border-color:#646469}
.group-layout :is(.soop-dock,.soop-popup-options) button:hover,
.group-layout .btn:hover,.group-layout .duration-btn:hover{background:#38383d;color:white}
.group-layout button:disabled{color:#aaa7a4;cursor:default}
.group-layout #soopExerciseToggle,.group-layout #soopExerciseToggle.is-running,
.group-layout .tabBtn.active,.group-layout .exercise-floating-controls .playlist-nav .btn-pl-play{background:var(--noir-red);border-color:var(--noir-red);color:white}
.group-layout #soopExerciseToggle:hover{background:var(--noir-red-hover)}
.group-layout .soop-metric-strip{background:rgba(18,18,20,.9);border-color:#737377;color:var(--noir-text)}
.group-layout .soop-hr{color:#ff718b}
.group-layout .soop-kcal{color:var(--noir-text)}
.group-layout :is(.soop-details,.soop-stat,.soop-charts figure,.soop-personal-panel,.soop-name-note,.exercise-floating-controls){background:#1b1b1e;color:var(--noir-text);border-color:var(--noir-line);box-shadow:0 5px 22px #0005}
.group-layout :is(.soop-personal-info,.soop-signal,.soop-charts figcaption){color:var(--noir-muted)}
.group-layout :is(.soop-stat strong,.soop-note-name){color:var(--noir-text)}
.group-layout .soop-member-goal-hint{color:#e4dfda}
.group-layout :is(input,select,textarea),.group-layout .soop-personal-panel :is(input,textarea),
.group-layout .soop-name-note textarea,.group-layout .soop-name-goals .soop-personal-targets input,
.group-layout .participant-inputs :is(input,select,textarea){background:#131315;color:var(--noir-text);border-color:#646469}
.group-layout input::placeholder,.group-layout textarea::placeholder{color:#aaa7a4;opacity:1}
.group-layout .soop-name-note .soop-note-name{background:transparent}
.group-layout #sessionPanel,.group-layout #toolbarPanel,.group-layout #settingsPanel,
.group-layout #motionSettingsPanel,.group-layout #recordingPanel{background:#1b1b1e!important;color:var(--noir-text)!important;border-color:var(--noir-line)!important;box-shadow:0 8px 35px #0007!important}
.group-layout :is(.panel-header,.session-panel-header,.session-history-title,.motion-menu,.settings){background:#252528!important;color:var(--noir-text)!important;border-color:var(--noir-line)!important}
.group-layout :is(.panel-section,.session-item,.session-note-input,.general-notes){border-color:#444449}
.group-layout :is(.panel-close,.panel-section-title,.hint,.session-item-details,.session-item-note,.session-item-duration){color:var(--noir-muted)}
.group-layout :is(.session-item,.session-summary,.session-note-input,.general-notes,.recording-status,.upload-progress-box){background:#202023;color:var(--noir-text);border-color:var(--noir-line)}
.group-layout .motion-menu :is(button,.menu-divider,.menu-group,.menu-subgroup){background:#252528;color:var(--noir-text);border-color:var(--noir-line)}
.group-layout #sessionPanel .soop-session-close{background:#29292d;color:var(--noir-text);border-color:var(--noir-line)}
.group-layout #contentTile .tabButtonsInner{background:rgba(24,24,27,.98)!important;border-color:var(--noir-line)!important}
.group-layout .soop-source-title{background:#45454a}
.group-layout .soop-source-title::before{background:linear-gradient(#ddd,#ddd) center 4px/14px 1px no-repeat,linear-gradient(#ddd,#ddd) center 6px/14px 1px no-repeat,#45454a}
/* Keep drawing colors, heart-rate zones and camera streams untouched. */
.group-layout .soop-member-analysis{background:#171719;color:var(--noir-text)}
.group-layout :is(.soop-analysis-heading,.soop-analysis-tabs,.soop-analysis-table th,.soop-analysis-table td){border-color:#45454a}
.group-layout .soop-analysis-tabs button{background:#242427;color:var(--noir-text);border-color:#626267}
.group-layout .soop-analysis-tabs button[aria-selected="true"]{background:var(--noir-red);color:white;border-color:var(--noir-red)}
.group-layout :is(.soop-analysis-table thead th,.soop-analysis-table td small,.soop-muscle-direction>span,.soop-analysis-midline>span,.soop-analysis-footnote,.soop-goal-rank){color:var(--noir-muted)}
.group-layout .soop-analysis-midline strong{color:var(--noir-text)}
.group-layout .soop-analysis-table progress{accent-color:var(--noir-red)}
.group-layout .soop-analysis-table progress::-webkit-progress-bar{background:#444449}
.group-layout .soop-analysis-table progress::-webkit-progress-value{background:var(--noir-red)}
.group-layout .soop-analysis-table progress::-moz-progress-bar{background:var(--noir-red)}
.group-layout .soop-pip-handle{color:var(--noir-text)}
.group-layout .soop-pip-handle>button{background:rgba(30,30,33,.95);color:var(--noir-text)}
.group-layout .soop-resize{border-color:var(--noir-red)}
.group-layout :is(button,input,select,textarea):focus-visible{outline:2px solid #ff718b;outline-offset:2px}

.group-layout .soop-charts canvas{--soop-chart-label:#c9c5c2;--soop-chart-grid:#45454a;--soop-chart-target:#c9c5c2;--soop-chart-kcal:#efefef;--soop-chart-hr:#ff718b}
.group-layout .soop-goal-item progress{accent-color:var(--noir-red)}
.group-layout .soop-goal-item progress::-webkit-progress-bar{background:#444449}
.group-layout .soop-goal-item progress::-webkit-progress-value{background:var(--noir-red)}
.group-layout .soop-goal-item progress::-moz-progress-bar{background:var(--noir-red)}
.group-layout #btnHRDisplay.active{background:#34131e;border-color:var(--noir-red);color:#ff718b}
.group-layout .soop-source-label{color:var(--noir-text)}

/* ver362: the ver361 game panel keeps its layout and receives the Noir skin. */
.group-layout .soop-game {
  --soop-game-accent: var(--noir-red);
  --soop-game-label: var(--noir-muted);
  --soop-game-grid: #45454a;
  color: var(--noir-text);
}
.group-layout .soop-game-modes button {
  background: #242427;
  color: var(--noir-text);
  border-color: #626267;
}
.group-layout .soop-game-modes button[aria-pressed="true"] {
  background: var(--noir-red);
  color: white;
  border-color: var(--noir-red);
}
.group-layout .soop-game-runner { background: #252528; }
.group-layout .soop-game-tag { background: #424247; color: var(--noir-text); }
.group-layout .soop-game-trail { background: #66666c; }
.group-layout .soop-game-runner.is-me .soop-game-tag,
.group-layout .soop-game-runner.is-me .soop-game-trail {
  background: var(--noir-red);
  color: white;
}
.group-layout .soop-game-event { background: #29292d; color: var(--noir-muted); }
.group-layout .soop-game-event.is-overtake { background: #481723; color: var(--noir-text); }
.group-layout .soop-game-empty,
.group-layout .soop-game-rank,
.group-layout .soop-game-heading > span:last-child,
.group-layout .soop-game-power,
.group-layout .soop-game-signals,
.group-layout .soop-game-calories,
.group-layout .soop-game-formula { color: var(--noir-muted); }
.group-layout .soop-game-score,
.group-layout .soop-game-power strong,
.group-layout .soop-game-calories strong { color: var(--noir-text); }
.group-layout .soop-game-calories { border-color: var(--noir-line); }

/* ver385: every surface in session management follows the surrounding dark panel. */
.group-layout #sessionPanel :is(.participant-inputs,.session-control,.playlist-container,.session-panel-footer,.general-notes,.report-member-selection){background:var(--noir-panel)!important;background-image:none!important;color:var(--noir-text)!important;border-color:var(--noir-line)!important}
.group-layout #sessionPanel :is(input:not([type=checkbox]):not([type=radio]),select,textarea){background:#151517!important;background-image:none!important;color:var(--noir-text)!important;border-color:#56565b!important;caret-color:var(--noir-text)}
.group-layout #sessionPanel :is(.session-load-btn,#btnLoadComparison,#btnClearComparison,#btnLoadExercises,#btnAddExercise){background:var(--noir-raised)!important;background-image:none!important;color:var(--noir-text)!important;border-color:var(--noir-line)!important}
.group-layout #sessionPanel :is(.session-load-btn,#btnLoadComparison,#btnClearComparison,#btnLoadExercises,#btnAddExercise):hover{background:#343439!important;border-color:#85858a!important}
.group-layout #sessionPanel :is(.participant-row label,.session-control-label,.general-notes label,.playlist-waiting,.playlist-name){color:var(--noir-text)!important}
.group-layout #sessionPanel .playlist-item{background:var(--noir-panel);color:var(--noir-text);border-color:#414146}
.group-layout #sessionPanel .playlist-item:hover{background:#303035}
.group-layout #sessionPanel .playlist-item.playlist-selected{background:#351920;border-left-color:var(--noir-red)}
.group-layout #sessionPanel .playlist-item.playlist-active{background:#3d1924;border-left-color:var(--noir-red);animation:none}
.group-layout #sessionPanel .playlist-item.playlist-done{background:#232326;color:var(--noir-muted)}
.group-layout #sessionPanel input[type=checkbox]{accent-color:var(--noir-red)}

/* Review controls specify both foreground and surface, including unselected speeds. */
.group-layout #videoControls{opacity:1}
.group-layout #videoControls button,.group-layout #videoControls select{background:#2b2b30;color:#f4f1ec;border:1px solid #737378}
.group-layout #videoControls button:hover{background:#424248;color:#fff}
.group-layout #videoControls .speedBtn.active{background:var(--noir-red);color:#fff;border-color:var(--noir-red)}
.group-layout #videoControls button:disabled{background:#252529;color:#b9b6b3;opacity:.7}