:root { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#fff; background:#080808; font-synthesis:none; --surface:#131313; --surface-2:#202020; --red:#b5121b; --red-dark:#7f0c13; --red-soft:#8f1118; --red-bright:#b5121b; --line:rgba(255,255,255,.12); --muted:#b8b8b8; --radius:8px; }
* { box-sizing:border-box; }
html,body { margin:0; min-width:320px; min-height:100%; background:#080808; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
button { color:inherit; font:inherit; }
button:focus-visible,a:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.app-shell { width:100%; max-width:480px; min-height:100vh; margin:auto; padding-bottom:78px; overflow:hidden; background:#090909; }
.topbar { position:absolute; top:0; z-index:5; width:100%; max-width:480px; min-height:104px; padding:25px 18px 0; display:flex; justify-content:center; align-items:flex-start; }
.brand { display:flex; flex-direction:column; align-items:center; color:#fff; text-decoration:none; line-height:1; }.brand b { font-size:29px; font-weight:900; letter-spacing:.055em; }.brand small { margin-top:7px; color:#fff; font-size:11px; font-weight:800; letter-spacing:.22em; }
.avatar { position:absolute; top:25px; right:18px; width:39px; height:39px; display:grid; place-items:center; color:#fff; background:#0007; border:1px solid #ffffff3b; border-radius:50%; font-size:12px; font-weight:800; cursor:pointer; }.avatar i { position:absolute; right:-1px; bottom:1px; width:8px; height:8px; background:#28b96b; border:2px solid #191919; border-radius:50%; }
.home { padding:0 17px 40px; background:#090909; }
.hero { min-height:595px; margin:0 -17px; padding:128px 17px 80px; display:flex; align-items:flex-start; justify-content:center; background:linear-gradient(180deg,#4d0710aa 0%,#5e0813d9 17%,#26070be8 61%,#090909 100%),var(--team-background, url('/media/showcase/team-demo/pattern.svg')) center top/auto 530px no-repeat; }
.match-stage { width:100%; padding-top:34px; text-align:center; }.section-label { color:var(--red-bright); font-size:10px; font-weight:900; letter-spacing:.2em; }.match-stage h1 { margin:8px 0 4px; color:#fff; font-size:22px; font-weight:850; letter-spacing:-.025em; }.competition { color:#c3a9ad; font-size:11px; font-weight:600; }.matchup { display:grid; grid-template-columns:1fr 54px 1fr; align-items:center; max-width:365px; margin:44px auto 0; }.club { min-width:0; display:flex; flex-direction:column; align-items:center; }.club img,.opponent-mark { width:92px; height:92px; margin-bottom:14px; object-fit:contain; }.club img { border-radius:50%; }.opponent-mark { display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#bb1529,#5c0712); clip-path:polygon(50% 0,94% 16%,84% 76%,50% 100%,16% 76%,6% 16%); font-size:35px; font-weight:950; }.club strong { font-size:16px; font-weight:900; }.club span { margin-top:3px; color:#b7aaac; font-size:10px; font-weight:650; }.match-center b { color:#fff; font-size:13px; font-weight:900; letter-spacing:.17em; }
.calendar-section { position:relative; margin-top:-55px; padding:25px 0 34px; border-top:4px solid var(--red-soft); border-bottom:1px solid var(--line); background:rgba(0,0,0,.38); }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:10px; }.section-head h2 { margin:0; font-size:21px; font-weight:900; letter-spacing:-.025em; }.week-copy { display:block; margin-top:4px; color:var(--muted); font-size:10px; font-weight:700; }.calendar-actions { display:flex; gap:6px; }.calendar-actions button { min-width:36px; height:36px; padding:0 8px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); border-radius:6px; cursor:pointer; }.calendar-actions .today-button { color:#fff; font-size:9px; font-weight:850; }
.day-strip { display:flex; gap:8px; margin:20px -17px 0; padding:3px calc(50% - 68px) 8px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }.day-strip::-webkit-scrollbar { display:none; }.day { flex:0 0 136px; min-height:170px; padding:8px; color:#fff; background:var(--surface-2); border:2px solid transparent; border-radius:var(--radius); scroll-snap-align:center; }.day.active { border-color:#fff; box-shadow:inset 0 0 0 2px var(--red-soft); }.date-pill { min-height:42px; padding:6px; display:grid; place-items:center; background:linear-gradient(90deg,rgba(82,0,6,.84),rgba(143,17,24,.82)); border-radius:var(--radius); text-transform:uppercase; }.date-pill span { font-size:9px; font-weight:800; }.date-pill strong { margin-top:1px; font-size:14px; font-weight:900; }.day-events { display:grid; align-content:start; gap:8px; margin-top:8px; }.day-event { min-height:58px; padding:8px; display:grid; align-content:center; gap:3px; background:rgba(255,255,255,.07); border-radius:var(--radius); }.day-event strong { font-size:10px; line-height:1.25; }.day-event time { color:var(--muted); font-size:9px; }.day-event.match { background:var(--red-dark); }.day-event.free { place-items:center; color:var(--muted); }.month-button { margin:17px auto 0; padding:10px 18px; display:flex; align-items:center; gap:8px; color:#fff; background:var(--red-dark); border:1px solid var(--red); border-radius:var(--radius); font-size:10px; font-weight:850; cursor:pointer; }
.content-section { padding:34px 0 10px; }.content-section .section-head { margin-bottom:14px; }.content-section .section-head h2 { margin-top:4px; }.notice-card { padding:18px 0; display:grid; grid-template-columns:39px 1fr 22px; gap:12px; border-top:1px solid #4a0b13; border-bottom:1px solid #4a0b13; }.notice-icon,.resource-icon { width:39px; height:39px; display:grid; place-items:center; color:#fff; background:#6f0b17; }.notice-card span,.resource-card span { color:var(--red-bright); font-size:8px; font-weight:900; letter-spacing:.13em; }.notice-card h3,.resource-card h3 { margin:4px 0 5px; font-size:14px; }.notice-card p,.resource-card p { margin:0; color:var(--muted); font-size:10px; line-height:1.45; }.notice-card>button { padding:0; color:#777; background:none; border:0; }.important-head { margin-top:36px!important; }.text-button { display:flex; align-items:center; padding:0; color:var(--red-bright); background:none; border:0; font-size:10px; font-weight:850; }.resource-card { min-height:88px; padding:14px 0; display:grid; grid-template-columns:59px 1fr 35px; align-items:center; gap:13px; color:#fff; border-bottom:1px solid var(--line); text-decoration:none; }.resource-card:first-of-type { border-top:1px solid var(--line); }.resource-art { height:59px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#9b0d1f,#430810); font-size:25px; font-weight:950; }.resource-icon { width:59px; height:59px; }.round-arrow { width:33px; height:33px; display:grid; place-items:center; color:#fff!important; background:#5d0913; border-radius:50%; }
.editable { cursor:pointer; }.match-stage.editable:hover .edit-hint,.match-stage.editable:focus .edit-hint { color:#fff; }.edit-hint { display:block; width:max-content; margin:20px auto 0; padding:6px 9px; color:#c89ca3; background:#0006; border:1px solid #ffffff24; border-radius:5px; font-size:8px; font-weight:800; }.edit-button { padding:6px 9px; color:#d8afb5; background:#520a13; border:1px solid #7f0c13; border-radius:5px; font-size:8px; font-weight:850; cursor:pointer; }.inline-editor { margin:15px 0 22px; padding:15px; display:grid; gap:12px; background:var(--surface); border:1px solid #69101b; border-top:3px solid var(--red-soft); border-radius:var(--radius); }.editor-head { display:flex; align-items:center; justify-content:space-between; }.editor-head strong { font-size:13px; }.editor-head button { width:30px; height:30px; color:#fff; background:#292929; border:0; border-radius:50%; font-size:18px; }.inline-editor label { display:grid; gap:6px; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; }.inline-editor input,.inline-editor select,.inline-editor textarea { width:100%; min-height:43px; padding:9px 10px; color:#fff; background:#080808; border:1px solid var(--line); border-radius:6px; font:inherit; text-transform:none; }.inline-editor textarea { resize:vertical; }.editor-columns { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.publish-button { min-height:46px; color:#fff; background:var(--red-dark); border:1px solid var(--red); border-radius:6px; font-weight:900; cursor:pointer; }.publish-button:disabled { opacity:.55; }.existing-items { display:grid; gap:5px; padding:9px; color:var(--muted); background:#ffffff08; font-size:9px; }.existing-items span { display:flex; justify-content:space-between; gap:7px; }.info-points { display:grid; gap:5px; margin:6px 0 0; padding-left:17px; color:var(--muted); font-size:10px; line-height:1.4; }.resource-image { width:59px; height:59px; object-fit:cover; border-radius:5px; }.resource-featured { grid-template-columns:1fr 35px; }.resource-featured .resource-image { grid-column:1 / -1; width:100%; height:auto; max-height:210px; object-fit:cover; }.resource-featured>div:nth-of-type(1) { grid-column:1; }
.bottom-nav { position:fixed; bottom:0; left:50%; z-index:20; width:100%; max-width:480px; height:69px; padding:4px 18px max(6px,env(safe-area-inset-bottom)); display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:#0c0c0cf2; border-top:1px solid #292929; backdrop-filter:blur(16px); transform:translateX(-50%); }.bottom-nav button { position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#747474; background:none; border:0; font-size:9px; font-weight:800; }.bottom-nav button.active { color:#bc1228; }.bottom-nav button.active::before { content:""; position:absolute; top:-4px; width:31px; height:2px; background:#bc1228; }.bottom-nav.five-items { padding-right:8px; padding-left:8px; }.bottom-nav.five-items button { font-size:8px; }
.placeholder { min-height:calc(100vh - 69px); padding:180px 35px 40px; text-align:center; background:linear-gradient(180deg,#4b0710,#090909 50%); }.placeholder-icon { width:70px; height:70px; margin:0 auto 20px; display:grid; place-items:center; background:#6d0b16; }.placeholder h1 { margin:8px 0; font-size:36px; }.placeholder p { color:#969696; font-size:13px; line-height:1.55; }
.subpage { min-height:calc(100vh - 69px); padding:132px 18px 40px; background:linear-gradient(180deg,rgba(75,7,16,.86),#090909 390px),var(--team-background, url('/media/showcase/team-demo/pattern.svg')) top center/auto 390px no-repeat; }.subpage-title { padding-bottom:26px; border-bottom:1px solid var(--line); }.subpage-title h1 { margin:7px 0 6px; font-size:36px; line-height:1; }.subpage-title p { max-width:310px; margin:0; color:var(--muted); font-size:12px; line-height:1.45; }.hub-section { padding-top:28px; }.hub-section h2 { margin:0 0 13px; font-size:19px; }.hub-row { width:100%; min-height:78px; padding:12px 0; display:grid; grid-template-columns:48px 1fr 35px; align-items:center; gap:12px; color:#fff; background:none; border:0; border-bottom:1px solid var(--line); text-align:left; text-decoration:none; cursor:pointer; }.hub-icon { width:48px; height:48px; display:grid; place-items:center; color:#fff; background:var(--red-dark); border-radius:var(--radius); }.hub-row>span:nth-child(2) { min-width:0; display:flex; flex-direction:column; }.hub-row strong { font-size:13px; }.hub-row small { margin-top:4px; color:var(--muted); font-size:9px; }.hub-link { width:32px; height:32px; display:grid; place-items:center; color:#fff; background:#ffffff0b; border-radius:50%; }.trainer-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:26px; }.trainer-grid button { min-height:125px; padding:16px 12px; display:flex; flex-direction:column; align-items:flex-start; color:#fff; background:linear-gradient(145deg,#271014,var(--surface)); border:1px solid #56101a; border-radius:var(--radius); text-align:left; }.trainer-grid button>span { width:38px; height:38px; margin-bottom:17px; display:grid; place-items:center; color:#fff; background:var(--red-dark); }.trainer-grid strong { font-size:13px; }.trainer-grid small { margin-top:4px; color:var(--muted); font-size:9px; }.trainer-note { margin:17px 0 0; color:#747474; font-size:9px; line-height:1.45; text-align:center; }
.profile-page { min-height:calc(100vh - 69px); background:#090909; }.profile-visual { min-height:610px; padding:132px 18px 78px; display:flex; flex-direction:column; align-items:center; background:linear-gradient(180deg,rgba(76,7,16,.68),rgba(29,5,9,.84) 64%,#090909),var(--team-background, url('/media/showcase/team-demo/pattern.svg')) top center/auto 520px no-repeat; }.profile-name { text-align:center; }.profile-name h1 { margin:7px 0 3px; font-size:28px; line-height:1; }.profile-name p { margin:0; color:#cfb8bc; font-size:11px; }.player-photo-wrap { position:relative; width:min(82vw,340px); height:390px; margin-top:28px; }.player-photo { width:100%; height:100%; display:block; object-fit:cover; object-position:center top; filter:drop-shadow(0 22px 30px #0008); }.player-photo-empty { width:100%; height:100%; display:grid; place-content:center; justify-items:center; gap:12px; color:#b78b92; background:linear-gradient(180deg,#430912,#160609); border:1px solid #70101c; }.player-photo-empty span { font-size:10px; font-weight:800; }.photo-edit { position:absolute; right:10px; bottom:10px; padding:9px 11px; display:flex; align-items:center; gap:6px; color:#fff; background:#080808d9; border:1px solid #ffffff33; border-radius:6px; font-size:9px; font-weight:850; }.profile-content { position:relative; margin-top:-45px; padding:26px 18px 42px; background:#090909; border-top:4px solid var(--red-soft); }.profile-section-head { display:flex; align-items:end; justify-content:space-between; gap:10px; }.profile-section-head h2,.profile-section-head h3 { margin:4px 0 0; }.profile-section-head h2 { font-size:21px; }.profile-section-head h3 { font-size:14px; }.player-switch { margin-bottom:27px; display:grid; gap:7px; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; }.player-switch select { min-height:44px; padding:0 10px; color:#fff; background:var(--surface); border:1px solid var(--line); border-radius:6px; }.training-task-list { display:grid; gap:9px; margin-top:15px; }.training-task-list details { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }.training-task-list summary { min-height:68px; padding:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; list-style:none; cursor:pointer; }.training-task-list summary::-webkit-details-marker { display:none; }.training-task-list summary>span { display:flex; flex-direction:column; }.training-task-list summary strong { font-size:12px; }.training-task-list summary small { margin-top:5px; color:var(--muted); font-size:8px; }.training-task-list details>p { margin:0; padding:0 12px 13px; color:var(--muted); font-size:10px; line-height:1.5; white-space:pre-line; }.task-video { margin:0 12px 13px; padding:9px 11px; display:flex; align-items:center; gap:6px; color:#fff; background:var(--red-dark); border:0; border-radius:5px; font-size:9px; font-weight:850; }.empty-copy { color:var(--muted); font-size:10px; }.profile-info-block { margin-top:28px; padding:16px; background:linear-gradient(110deg,#580a14,var(--surface)); border-left:4px solid #fff; }.profile-info-block h2 { margin:0 0 10px; font-size:16px; }.profile-info-block ul { display:grid; gap:7px; margin:0; padding-left:17px; color:#ddd; font-size:10px; }.profile-links { display:grid; gap:0; margin-top:29px; border-top:1px solid var(--line); }.profile-links>button { min-height:76px; padding:11px 0; display:grid; grid-template-columns:44px 1fr 22px; align-items:center; gap:11px; color:#fff; background:none; border:0; border-bottom:1px solid var(--line); text-align:left; }.profile-links>button>span { width:44px; height:44px; display:grid; place-items:center; background:var(--red-dark); }.profile-links>button>div { display:flex; flex-direction:column; }.profile-links strong { font-size:12px; }.profile-links small { margin-top:4px; color:var(--muted); font-size:8px; }.notes-area { margin-top:32px; }.notes-area>p,.trainer-note-box>p { color:var(--muted); font-size:10px; line-height:1.55; white-space:pre-line; }.trainer-note-box { margin-top:22px; padding:15px; background:var(--surface); border-top:3px solid var(--red-soft); }.profile-editor { margin:0 18px 24px; }.back-button { margin-bottom:24px; padding:0; display:flex; align-items:center; gap:4px; color:var(--muted); background:none; border:0; font-weight:800; }.athletics-note { margin-top:26px; padding:17px; background:var(--surface); border-top:4px solid var(--red-soft); }.athletics-note>p { min-height:130px; color:#ddd; font-size:11px; line-height:1.6; white-space:pre-line; }
.login-page { min-height:100vh; padding:72px 22px 40px; background:linear-gradient(180deg,rgba(77,7,16,.74),rgba(10,10,10,.92) 48%,#0a0a0a),var(--team-background, url('/media/showcase/team-demo/pattern.svg')) top center/auto 490px no-repeat; }.login-brand { display:flex; flex-direction:column; align-items:center; margin-bottom:105px; }.login-brand b { font-size:31px; font-weight:950; letter-spacing:.055em; }.login-brand span { margin-top:7px; font-size:11px; font-weight:850; letter-spacing:.22em; }.login-panel { padding:25px 20px; background:rgba(19,19,19,.94); border-top:4px solid var(--red-soft); box-shadow:0 24px 60px #0009; }.login-panel h1 { margin:7px 0 7px; font-size:29px; line-height:1.05; }.login-panel>p { margin:0 0 23px; color:var(--muted); font-size:12px; line-height:1.5; }.login-panel form { display:grid; gap:14px; }.login-panel label { display:grid; gap:7px; color:#ddd; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }.login-panel input { width:100%; min-height:49px; padding:0 13px; color:#fff; background:#080808; border:1px solid var(--line); border-radius:var(--radius); outline:none; }.login-panel input:focus { border-color:var(--red); box-shadow:0 0 0 2px #b5121b2e; }.login-panel form>button { min-height:51px; display:flex; align-items:center; justify-content:center; gap:8px; color:#fff; background:var(--red-dark); border:1px solid var(--red); border-radius:var(--radius); font-weight:900; cursor:pointer; }.forgot-link { display:block; width:100%; margin-top:17px; padding:0; background:none; border:0; cursor:pointer; color:var(--muted); text-align:center; font-size:10px; font-weight:750; }.login-error { padding:10px 12px; color:#ffd9de; background:#5b0a14; border-left:3px solid #e51d38; font-size:11px; line-height:1.4; }.login-notice { padding:10px 12px; color:#d9ffe3; background:#123d20; border-left:3px solid #38b85e; font-size:11px; line-height:1.4; }.setup-panel strong { color:#fff; }.loading-page { min-height:100vh; display:grid; place-content:center; justify-items:center; background:radial-gradient(circle,#4c0811,#090909 55%); }.loading-mark { width:72px; height:72px; display:grid; place-items:center; border:2px solid var(--red); border-radius:50%; font-weight:950; letter-spacing:.06em; animation:pulse 1.25s ease-in-out infinite; }.loading-page p { color:var(--muted); font-size:11px; }.logout-row { color:#e36c7a; }@keyframes pulse { 50% { transform:scale(.94); opacity:.62; } }
.overlay { position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center; background:#000c; backdrop-filter:blur(5px); }.sheet { position:relative; width:100%; max-width:480px; padding:28px 20px max(28px,env(safe-area-inset-bottom)); background:#141414; border-top:2px solid #7f0d1b; box-shadow:0 -20px 70px #000; }.sheet-handle { position:absolute; top:9px; left:50%; width:39px; height:3px; background:#555; transform:translateX(-50%); }.sheet-close { position:absolute; top:19px; right:18px; width:36px; height:36px; display:grid; place-items:center; background:#292929; border:0; border-radius:50%; }.profile-avatar { width:68px; height:68px; margin-bottom:17px; display:grid; place-items:center; background:#850d1c; border-radius:50%; font-size:20px; font-weight:900; }.sheet h2 { margin:7px 0 3px; font-size:27px; }.sheet>p { margin:0 0 22px; color:#888; font-size:12px; }.sheet-row { width:100%; padding:15px 2px; display:grid; grid-template-columns:26px 1fr 22px; text-align:left; background:none; border:0; border-top:1px solid #303030; font-size:13px; font-weight:700; }.month-sheet h2 { margin:7px 0 20px; }.month-weekdays,.month-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }.month-weekdays span { padding-bottom:7px; color:#777; text-align:center; font-size:9px; font-weight:800; }.month-grid button,.month-grid i { aspect-ratio:1; display:grid; place-items:center; color:#ddd; background:none; border:0; border-radius:50%; font-size:12px; }.month-grid button.has-event { position:relative; color:#fff; font-weight:900; }.month-grid button.has-event::after { content:""; position:absolute; bottom:4px; width:4px; height:4px; background:#ae1023; border-radius:50%; }.month-grid button.selected { background:#8c0d1c; }.month-grid button.selected::after { background:white; }.month-event { margin-top:18px; padding:13px; display:flex; align-items:center; gap:11px; background:#202020; }.month-event>i { width:4px; height:35px; background:#9d0e20; }.month-event div { display:flex; flex-direction:column; }.month-event span { color:#999; font-size:9px; }.month-event strong { margin-top:4px; font-size:12px; }
@media (min-width:481px) { .app-shell { box-shadow:0 0 80px #000; }.topbar { left:50%; transform:translateX(-50%); } }
@media (max-width:350px) { .club img,.opponent-mark { width:78px; height:78px; }.home { padding-left:12px; padding-right:12px; }.hero { margin-left:-12px; margin-right:-12px; }.bottom-nav { padding-left:35px; padding-right:35px; } }

/* Vertical video experience */
.videos-page { min-height:100vh; padding-top:104px; background:#050505; }.reels-head { position:absolute; top:104px; z-index:8; width:100%; max-width:480px; padding:13px 16px; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }.reels-head h1 { margin:3px 0 0; font-size:19px; text-shadow:0 2px 12px #000; }.reel-add { padding:8px 10px; color:#fff; background:#720b18d9; border:1px solid #b5121b; border-radius:6px; font-size:9px; font-weight:900; pointer-events:auto; }.reels { height:calc(100vh - 104px); overflow-y:auto; scroll-snap-type:y mandatory; scrollbar-width:none; }.reels::-webkit-scrollbar { display:none; }.reel { height:100%; min-height:100%; scroll-snap-align:start; scroll-snap-stop:always; }.reel-media { position:relative; width:100%; height:100%; overflow:hidden; background:#050505; }.reel-media video,.reel-media iframe { width:100%; height:100%; display:block; object-fit:contain; border:0; background:#050505; }.reel-shade { position:absolute; inset:0; background:linear-gradient(180deg,#0008 0,#0000 28%,#0000 55%,#000d 100%); pointer-events:none; }.reel-copy { position:absolute; right:72px; bottom:132px; left:18px; text-shadow:0 2px 8px #000; }.reel-copy>span { color:#e22037; font-size:9px; font-weight:950; letter-spacing:.17em; }.reel-copy h2 { margin:6px 0; font-size:21px; line-height:1.07; }.reel-copy p { margin:0; color:#eee; font-size:11px; line-height:1.45; white-space:pre-line; }.reel-copy small { display:block; margin-top:8px; color:#bbb; font-size:8px; }.reel-actions { position:absolute; right:12px; bottom:128px; display:grid; gap:17px; }.reel-actions button { width:52px; padding:0; display:grid; justify-items:center; gap:5px; color:#fff; background:none; border:0; filter:drop-shadow(0 2px 5px #000); }.reel-actions button.active { color:#e51b35; }.reel-actions span { font-size:7px; font-weight:800; }.reel-missing,.reels-empty { height:100%; display:grid; place-content:center; justify-items:center; gap:12px; color:#777; text-align:center; }.reels-empty { padding:30px; }.reels-empty h2 { margin:0; color:#fff; }.reels-empty p { max-width:270px; margin:0; font-size:11px; line-height:1.5; }.feed-tabs { position:fixed; bottom:69px; left:50%; z-index:18; width:100%; max-width:480px; padding:7px 8px; display:flex; gap:5px; overflow-x:auto; background:#080808eb; border-top:1px solid #ffffff17; transform:translateX(-50%); scrollbar-width:none; }.feed-tabs button { flex:0 0 auto; min-height:30px; padding:0 10px; color:#888; background:#171717; border:1px solid #292929; border-radius:999px; font-size:8px; font-weight:850; }.feed-tabs button.active { color:#fff; background:#730b17; border-color:#a31122; }.video-editor { position:relative; z-index:12; margin:64px 14px 15px; }.video-editor fieldset { margin:0; padding:10px; border:1px solid var(--line); }.video-editor legend { padding:0 5px; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; }.tag-player-list { max-height:150px; display:grid; grid-template-columns:1fr 1fr; gap:7px; overflow:auto; }.tag-player-list label,.check-row { display:flex!important; grid-template-columns:none!important; flex-direction:row!important; align-items:center; gap:7px!important; text-transform:none!important; }.tag-player-list input,.check-row input { width:16px!important; min-height:16px!important; accent-color:var(--red); }.comments-sheet { max-height:72vh; display:flex; flex-direction:column; }.comments-sheet h2 { margin:3px 0; }.comments-sheet>p { margin:0 0 13px; }.comment-list { min-height:120px; display:grid; align-content:start; gap:11px; overflow-y:auto; border-top:1px solid var(--line); }.comment-list article { padding:11px 0; border-bottom:1px solid var(--line); }.comment-list strong { font-size:9px; }.comment-list p { margin:4px 0; color:#ddd; font-size:11px; line-height:1.4; }.comment-list time,.comment-list>span { color:#777; font-size:8px; }.comments-sheet form { padding-top:12px; display:grid; grid-template-columns:1fr auto; gap:8px; }.comments-sheet form label { display:grid; gap:5px; color:#aaa; font-size:8px; font-weight:800; text-transform:uppercase; }.comments-sheet input { min-height:43px; padding:0 10px; color:#fff; background:#080808; border:1px solid var(--line); border-radius:6px; }.comments-sheet form button { align-self:end; min-height:43px; padding:0 13px; color:#fff; background:var(--red-dark); border:1px solid var(--red); border-radius:6px; font-weight:850; }
.upload-progress { position:relative; height:29px; overflow:hidden; background:#080808; border:1px solid var(--line); border-radius:5px; }.upload-progress i { position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,#670b16,#b5121b); transition:width .2s; }.upload-progress span { position:relative; height:100%; display:grid; place-items:center; color:#fff; font-size:9px; font-weight:900; }
.selected-video-list { max-height:330px; display:grid; gap:8px; padding:10px; overflow-y:auto; background:#090909; border:1px solid var(--line); border-radius:6px; }.selected-video-list>strong { color:#fff; font-size:10px; }.selected-video-list>small { color:var(--muted); font-size:9px; }.selected-video-list label { padding-top:8px; border-top:1px solid var(--line); }.selected-video-list label>span { overflow:hidden; color:#aaa; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }.selected-video-list input { min-height:39px!important; }
.staff-block { margin-top:27px; padding:16px 0; border-top:3px solid var(--red-soft); }.staff-block h2,.trainer-library h2 { margin:4px 0 0; font-size:19px; }.staff-week { display:flex; gap:8px; margin:16px -18px 0; padding:3px calc(50% - 68px) 8px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }.staff-day { flex:0 0 136px; min-height:145px; padding:9px; display:grid; align-content:start; gap:7px; background:var(--surface); border:2px solid transparent; border-radius:var(--radius); scroll-snap-align:center; }.staff-day.active { border-color:#fff; box-shadow:inset 0 0 0 2px var(--red-dark); }.staff-day>strong { font-size:10px; text-transform:uppercase; }.staff-day>span { padding:7px; border-radius:5px; font-size:8px; line-height:1.3; }.team-slot { color:#ccc; background:#2a2a2a; }.internal-slot { color:#fff; background:var(--red-dark); border:1px solid #a61224; }.staff-day small { color:#777; font-size:8px; }.staff-info { margin-top:14px; padding:14px; background:linear-gradient(110deg,#430911,var(--surface)); border-left:4px solid var(--red); }.staff-info p { margin:0 0 7px; color:#ddd; font-size:10px; line-height:1.45; }.trainer-library { padding-top:26px; }.trainer-library h2 { margin-top:25px; }.attendance-dates { display:flex; gap:7px; margin:22px -18px 0; padding:0 18px 8px; overflow-x:auto; }.attendance-dates button { flex:0 0 auto; min-height:38px; padding:0 12px; color:#999; background:var(--surface); border:1px solid var(--line); border-radius:6px; font-size:9px; font-weight:850; }.attendance-dates button.active { color:#fff; background:var(--red-dark); border-color:var(--red); }.attendance-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin:12px 0 18px; }.attendance-stats span { min-height:55px; padding:7px 3px; display:grid; place-content:center; justify-items:center; color:#888; background:var(--surface); font-size:7px; text-align:center; }.attendance-stats b { color:#fff; font-size:18px; }.attendance-list { display:grid; gap:8px; margin-bottom:14px; }.attendance-list article { padding:11px; display:grid; grid-template-columns:1fr 118px; gap:8px; background:var(--surface); border:1px solid var(--line); }.attendance-list strong { align-self:center; font-size:10px; }.attendance-list select,.attendance-list input { min-height:38px; padding:0 8px; color:#fff; background:#080808; border:1px solid var(--line); border-radius:5px; font-size:9px; }.attendance-list input { grid-column:1/-1; }.attendance-page .publish-button { width:100%; }
.managed-row { border-bottom:1px solid var(--line); }.managed-row .resource-card,.managed-row .hub-row { border-bottom:0; }.manage-actions { padding:0 0 9px; display:flex; justify-content:flex-end; gap:6px; }.manage-actions button,.attendance-toolbar button { min-height:30px; padding:0 9px; color:#bbb; background:#191919; border:1px solid var(--line); border-radius:5px; font-size:8px; font-weight:800; }.manage-actions button:last-child { color:#ff9eaa; background:#3b0910; }.status-options { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }.status-options input { position:absolute; opacity:0; pointer-events:none; }.status-options label { min-height:35px; display:grid; place-items:center; color:#888; background:#242424; border:1px solid transparent; border-radius:5px; font-size:7px; font-weight:850; text-align:center; }.status-options label.selected,.status-options label:has(input:checked) { color:#fff; background:var(--red-dark); border-color:var(--red); }.attendance-toolbar { margin-top:18px; display:flex; gap:7px; }.monthly-report { display:grid; gap:7px; margin:15px 0; }.monthly-report h3 { text-transform:capitalize; }.monthly-report article { padding:9px; display:grid; gap:4px; background:#202020; }.monthly-report strong { font-size:10px; }.monthly-report span { color:#aaa; font-size:8px; }.new-banner { position:fixed; top:12px; left:50%; z-index:45; width:min(calc(100% - 24px),456px); min-height:58px; padding:9px 12px; display:grid; grid-template-columns:35px 1fr 20px; align-items:center; gap:9px; color:#fff; background:#161616f5; border:1px solid #7f0c13; border-left:4px solid var(--red); box-shadow:0 10px 30px #000a; transform:translateX(-50%); text-align:left; }.new-banner>b { color:#e51b35; font-size:8px; }.new-banner>span { display:grid; gap:3px; }.new-banner strong { font-size:10px; }.new-banner small { color:#aaa; font-size:8px; }
.diagnostic-button { min-height:40px; color:#fff; background:#252525; border:1px solid var(--line); border-radius:6px; font-weight:850; }

/* Reliable opponent crest and landscape video mode */
.club img { border-radius:0; }
.club .club-logo { position:relative; width:92px; height:92px; margin:0 0 14px; display:block; overflow:visible; }
.club .club-logo img,.club .club-logo .opponent-mark { width:100%; height:100%; margin:0; object-fit:contain; }
.club .club-logo .opponent-mark { display:grid; place-items:center; color:#fff; font-size:35px; }
.club-logo [hidden] { display:none!important; }
.videos-page>.reel-add { position:absolute; top:112px; right:16px; z-index:12; }
.month-event-list { max-height:28vh; margin-top:12px; overflow-y:auto; }
.inline-editor input,.inline-editor select,.inline-editor textarea,.login-panel input,.comments-sheet input { font-size:16px; }
.info-points { font-size:12px; line-height:1.55; }
.topbar { min-height:calc(104px + env(safe-area-inset-top)); padding-top:calc(25px + env(safe-area-inset-top)); }
.avatar { top:calc(25px + env(safe-area-inset-top)); }
.new-banner { top:calc(12px + env(safe-area-inset-top)); }
.videos-page { height:100svh; min-height:100svh; padding-top:0; overflow:hidden; }
.videos-page .reels { height:100svh; }
.video-embed-frame { position:absolute; top:50%; left:50%; width:100%; max-width:177.7778svh; aspect-ratio:16/9; transform:translate(-50%,-50%); }
.video-embed-frame iframe { position:absolute; inset:0; width:100%; height:100%; }

@media (orientation:portrait) {
  .reel-media>video.is-portrait-fill { width:100%; height:100%; object-fit:cover; object-position:var(--portrait-focus-x,50%) center; }
  .reel-media>.video-embed-frame.is-portrait-fill { left:var(--portrait-focus-x,50%); width:auto; max-width:none; height:100%; aspect-ratio:16/9; transform:translate(calc(0% - var(--portrait-focus-x,50%)),-50%); }
}

@media (orientation:landscape) and (max-height:600px) {
  .app-shell { max-width:none; height:100svh; padding:0; overflow:hidden; }
  .videos-page { height:100svh; min-height:0; padding:0; }
  .videos-page~.bottom-nav,.videos-page+.bottom-nav { display:none; }
  .videos-page .reels { position:fixed; inset:0; width:100vw; height:100svh; }
  .videos-page .reel,.videos-page .reel-media { width:100vw; height:100svh; min-height:100svh; }
  .videos-page .reel-media { display:grid; place-items:center; }
  .videos-page .reel-media video { width:100vw; height:100svh; object-fit:contain; object-position:center center; }
  .videos-page .video-embed-frame { width:100vw; max-width:177.7778svh; }
  .videos-page .feed-tabs { bottom:0; max-width:100vw; display:flex; padding-bottom:max(7px,env(safe-area-inset-bottom)); }
  .videos-page>.reel-add { position:fixed; top:max(10px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); display:block; }
  .videos-page .reel-copy { right:90px; bottom:52px; left:18px; }
  .videos-page .reel-copy h2 { margin:0 0 4px; font-size:15px; }
  .videos-page .reel-copy p { max-width:65vw; overflow:hidden; font-size:9px; white-space:nowrap; text-overflow:ellipsis; }
  .videos-page .reel-copy small { display:none; }
  .videos-page .reel-actions { right:12px; bottom:51px; display:flex; gap:9px; }
  .videos-page .reel-actions button { width:40px; }
  .videos-page .reel-actions span { display:none; }
  body:has(.videos-page) .topbar { display:none; }
}

/* Four video areas keep the existing vertical reel and main navigation intact. */
.video-section-tabs { position:fixed; bottom:69px; left:50%; z-index:35; width:100%; max-width:480px; min-height:45px; padding:5px 6px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; background:#090909ed; border-top:1px solid #ffffff28; transform:translateX(-50%); }
.video-section-tabs button { min-width:0; min-height:35px; padding:4px 2px; color:#aaa; background:transparent; border:0; border-radius:6px; font-size:10px; font-weight:750; cursor:pointer; }
.video-section-tabs button.active { color:#fff; background:#8b1425; }
.videos-page .reel-copy { top:max(108px,calc(env(safe-area-inset-top) + 103px)); right:95px; bottom:auto; left:12px; width:max-content; max-width:calc(100% - 110px); padding:6px 8px; background:#050505aa; border-left:2px solid #a81124; text-shadow:0 1px 3px #000; }
.videos-page .reel-copy>span { margin:0 0 3px; color:#f2b5be; font-size:9px; letter-spacing:0; }
.videos-page .reel-copy .reel-title { margin:0; font-size:12px; line-height:1.25; }
.videos-page .reel-copy p { max-height:2.7em; margin-top:3px; font-size:10px; line-height:1.3; -webkit-line-clamp:2; }
.videos-page .reel-actions { top:max(178px,calc(env(safe-area-inset-top) + 172px)); right:9px; bottom:auto; display:grid; gap:6px; }
.videos-page .reel-actions button,.videos-page .reel-category-menu,.videos-page .reel-category-menu>summary { width:35px; min-height:35px; }
.videos-page .reel-actions span,.videos-page .reel-category-menu>summary span { display:none; }
.videos-page .reel-actions button svg,.videos-page .reel-category-menu svg { width:17px; height:17px; }
.video-context { position:fixed; top:max(104px,calc(env(safe-area-inset-top) + 98px)); left:max(12px,calc((100vw - 456px)/2)); z-index:30; max-width:calc(100vw - 210px); padding:5px 7px; overflow:hidden; color:#fff; background:#111c; border:0; border-radius:4px; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.video-context~.reels .reel-copy { top:max(139px,calc(env(safe-area-inset-top) + 133px)); }
.video-match-list { height:100svh; padding:165px 16px 135px; overflow-y:auto; color:#fff; }
.video-match-list h1 { margin:0 0 5px; font-size:22px; }
.video-match-list p { color:#aaa; font-size:12px; line-height:1.5; }
.video-match-list>button { width:100%; min-height:62px; margin-top:9px; padding:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:#fff; background:#1b1416; border:1px solid #5d3038; border-radius:8px; text-align:left; }
.video-match-list>button strong { font-size:13px; }
.video-match-list>button span { display:flex; align-items:center; gap:4px; color:#d9a9b0; font-size:10px; white-space:nowrap; }
.video-bulk-tools { display:grid; gap:8px; padding:9px; background:#1a1416; border:1px solid #513039; border-radius:7px; }
.video-bulk-tools[hidden],.video-new-match[hidden] { display:none; }
.video-bulk-tools button { min-height:36px; color:#fff; background:#371923; border:1px solid #7a3441; border-radius:5px; }
.video-upload-file { display:grid; gap:7px; padding:9px 0; border-top:1px solid var(--line); }
.video-upload-file>.check-row { margin:0; overflow-wrap:anywhere; }
.video-upload-file-options { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:end; }
.video-upload-file-options .check-row { padding-bottom:9px; }
.video-upload-file>small { color:#d6b3ba; font-size:10px; }
.portrait-crop-editor { display:grid; gap:9px; padding:10px!important; border:1px solid #55323a!important; border-radius:7px; background:#140e10; }
.portrait-crop-editor>p { margin:0; color:var(--muted); font-size:9px; line-height:1.45; }
.portrait-crop-controls { display:grid; gap:10px; }
.portrait-crop-controls[hidden] { display:none; }
.portrait-crop-controls>label { display:grid!important; grid-template-columns:1fr auto; gap:5px!important; padding:0!important; border:0!important; color:#ddd!important; font-size:9px!important; text-transform:none!important; }
.portrait-crop-controls output { color:#fff; font-variant-numeric:tabular-nums; }
.portrait-crop-controls input[type="range"] { grid-column:1/-1; width:100%; min-height:28px!important; padding:0; accent-color:var(--red-soft); }
.portrait-crop-controls>small { color:#9e8d90; font-size:8px; }
.portrait-crop-preview { position:relative; width:min(170px,55vw); aspect-ratio:9/16; justify-self:center; overflow:hidden; background:#030303; border:2px solid #777; border-radius:12px; box-shadow:0 8px 24px #000b; }
.portrait-crop-preview>video { width:100%; height:100%; object-fit:cover; object-position:var(--portrait-focus-x,50%) center; background:#050505; }
.portrait-crop-preview>.video-embed-frame { top:50%; left:var(--portrait-focus-x,50%); width:auto; max-width:none; height:100%; aspect-ratio:16/9; transform:translate(calc(0% - var(--portrait-focus-x,50%)),-50%); }
.video-upload-pickers { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.video-upload-folder-groups { display:grid; gap:8px; padding:10px; background:#1a1416; border:1px solid #513039; border-radius:7px; }
.video-upload-folder-groups[hidden] { display:none; }
.video-upload-folder-groups>strong { font-size:11px; }
.video-upload-folder-list { display:grid; gap:8px; }
.video-upload-folder { display:grid; grid-template-columns:minmax(0,1fr) minmax(145px,1fr); align-items:center; gap:10px; }
.video-upload-folder>span { min-width:0; display:grid; gap:3px; overflow-wrap:anywhere; }
.video-upload-folder>span strong { font-size:11px; }
.video-upload-folder>span small { color:var(--muted); font-size:9px; }
.video-upload-selection { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.video-upload-selection[hidden] { display:none; }
.video-upload-selection strong { font-size:10px; }
.video-upload-selection button { color:#fff; background:#282828; border:1px solid var(--line); border-radius:6px; padding:9px; }
.video-upload-selection-status { margin:0; color:var(--muted); font-size:10px; }
.selected-video-list { max-height:42svh; }
.video-upload-status { color:#e9d7da; font-size:11px; line-height:1.5; white-space:pre-wrap; }
.video-batches-panel article { margin:10px 0; padding:12px; display:grid; gap:7px; background:#1b1517; border:1px solid #56313a; border-radius:7px; }
.video-batches-panel article strong { font-size:12px; }
.video-batches-panel article span { color:#c4aeb2; font-size:10px; }
.video-batches-panel article button { min-height:38px; color:#fff; background:#811425; border:0; border-radius:5px; }
@media (orientation:landscape) and (max-height:600px) {
  .videos-page .reel-copy { top:55px; }
  .videos-page .reel-actions { top:92px; }
  .video-match-list { padding-top:70px; }
}

/* Comments, mentions, notification prominence and unrestricted club crests */
.club img { border-radius:0!important; clip-path:none!important; }
.club .club-logo { width:min(30vw,118px); height:108px; overflow:visible; }
.club .club-logo img,.club .club-logo .opponent-mark { width:100%; height:100%; object-fit:contain!important; object-position:center; border-radius:0!important; clip-path:none!important; }
.new-banner { min-height:76px; padding:13px 14px; grid-template-columns:42px 1fr 22px; }
.new-banner>b { font-size:10px; }
.new-banner strong { font-size:13px; }
.new-banner small { font-size:10px; line-height:1.35; }
.comments-overlay { z-index:80; }
.comments-sheet { max-height:min(82svh,720px); pointer-events:auto; }
.comments-sheet form>label,.comments-sheet .mention-picker { grid-column:1/-1; }
.comments-sheet input,.comments-sheet textarea { min-height:43px; padding:10px; color:#fff; background:#080808; border:1px solid var(--line); border-radius:6px; font-size:16px; }
.comments-sheet textarea { width:100%; resize:vertical; }
.mention-picker { display:grid; gap:7px; }
.mention-picker>strong { color:#aaa; font-size:9px; text-transform:uppercase; }
.mention-picker>div { max-height:92px; display:flex; flex-wrap:wrap; gap:5px; overflow-y:auto; }
.mention-picker button { min-height:30px; padding:0 8px; color:#bbb; background:#242424; border:1px solid var(--line); border-radius:999px; font-size:8px; }
.mention-picker button.selected { color:#fff; background:var(--red-dark); border-color:var(--red); }

/* Match ratings and private player self-assessment */
.self-rating-callout { margin:28px 0 24px; padding:20px; background:linear-gradient(135deg,#6f0b17,#1b0b0e); border:1px solid #8c1423; border-left:5px solid #fff; }
.self-rating-callout h2 { margin:6px 0; font-size:21px; }.self-rating-callout p { margin:0 0 16px; color:#d0bdc0; font-size:11px; line-height:1.5; }
.self-rating-callout button { width:100%; min-height:46px; padding:0 13px; display:flex; align-items:center; justify-content:space-between; color:#fff; background:#09090999; border:1px solid #ffffff31; border-radius:6px; font-weight:900; }
.rating-match-picker { margin:24px 0 14px; display:grid; grid-template-columns:1fr auto; align-items:end; gap:9px; }.rating-match-picker label { display:grid; gap:6px; color:var(--muted); font-size:9px; font-weight:850; text-transform:uppercase; }.rating-match-picker select { min-width:0; width:100%; height:46px; padding:0 10px; color:#fff; background:var(--surface); border:1px solid var(--line); border-radius:6px; }.rating-match-picker>button { height:46px; padding:0 11px; color:#fff; background:var(--red-dark); border:1px solid var(--red); border-radius:6px; font-size:9px; font-weight:900; }
.rating-tabs { display:flex; gap:6px; margin:18px -18px 16px; padding:0 18px 6px; overflow-x:auto; }.rating-tabs button { flex:0 0 auto; min-height:39px; padding:0 12px; color:#aaa; background:var(--surface); border:1px solid var(--line); border-radius:99px; font-size:9px; font-weight:850; }.rating-tabs button.active { color:#fff; background:var(--red-dark); border-color:var(--red); }
.rating-list { display:grid; gap:12px; }.rating-card { padding:15px; background:var(--surface); border:1px solid var(--line); border-top:3px solid #6e0b17; border-radius:var(--radius); }.rating-card h3 { margin:0 0 12px; font-size:15px; }.grade-scale { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }.grade-scale label { min-width:0; }.grade-scale input { position:absolute; opacity:0; pointer-events:none; }.grade-scale span { aspect-ratio:1; display:grid; place-items:center; color:#ccc; background:#090909; border:1px solid #3a3a3a; border-radius:5px; font-size:12px; font-weight:900; }.grade-scale label:has(input:checked) span,.grade-scale label.selected span { color:#fff; background:#8c0d1c; border-color:#d51b31; }
.rating-fields { display:grid; grid-template-columns:1.4fr .6fr; gap:8px; margin-top:12px; }.rating-card>label,.rating-fields label { display:grid; gap:5px; color:var(--muted); font-size:8px; font-weight:850; text-transform:uppercase; }.rating-card textarea,.rating-fields select,.rating-fields input { width:100%; min-height:42px; padding:8px 9px; color:#fff; background:#090909; border:1px solid var(--line); border-radius:5px; font:inherit; }.rating-card>label { margin-top:10px; }.rating-summary { margin:0 0 10px; color:var(--muted); font-size:10px; }.individual-ratings { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }.individual-ratings span { padding:6px 8px; display:flex; gap:5px; background:#090909; border:1px solid var(--line); color:#aaa; font-size:8px; }.individual-ratings span b { color:#fff; }.individual-ratings small { color:var(--muted); }
.rating-trends { display:grid; gap:10px; }.rating-trends>h2 { margin:4px 0 6px; }.rating-trends>article { min-height:91px; padding:12px; display:grid; grid-template-columns:1fr 130px; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); }.rating-trends article>div:first-child { display:flex; flex-direction:column; }.rating-trends small { margin-top:4px; color:var(--muted); font-size:8px; }.trend { position:relative; height:64px; }.trend svg { width:100%; height:52px; overflow:visible; }.trend polyline { fill:none; stroke:#e51d38; stroke-width:3; vector-effect:non-scaling-stroke; }.trend strong { position:absolute; right:0; bottom:0; font-size:10px; }.no-trend { color:var(--muted); font-size:9px; }
.self-rating-form { margin-top:16px; padding:17px; background:var(--surface); border-top:4px solid var(--red-soft); }.self-rating-form h2 { margin:0 0 17px; font-size:15px; line-height:1.35; }.self-not-played { margin:15px 0; min-height:42px; display:flex; align-items:center; gap:9px; color:#ddd; font-size:11px; }.self-not-played input { width:19px; height:19px; accent-color:var(--red); }.self-rating-form .publish-button { width:100%; }.self-history { margin-top:25px; padding:16px; background:#121212; border:1px solid var(--line); }.self-history h2 { margin:0 0 13px; }.self-history>.trend { height:82px; }.self-history>div:last-child { display:flex; gap:7px; overflow-x:auto; }.self-history>div:last-child span { min-width:58px; padding:8px; display:flex; flex-direction:column; align-items:center; background:#090909; }.self-history>div:last-child b { font-size:18px; }.self-history>div:last-child small { margin-top:3px; max-width:55px; overflow:hidden; color:var(--muted); font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:360px) { .rating-match-picker { grid-template-columns:1fr; }.rating-match-picker>button { width:100%; }.grade-scale { gap:3px; }.grade-scale span { font-size:10px; } }
.rating-trends>.trend-card { display:block; }.trend-main { display:grid; grid-template-columns:1fr 130px; align-items:center; gap:12px; }.trend-main>div:first-child { display:flex; flex-direction:column; }.trend-card details { margin-top:10px; padding-top:9px; border-top:1px solid var(--line); }.trend-card summary { color:#bbb; font-size:9px; font-weight:800; cursor:pointer; }.evaluator-trends { display:grid; gap:8px; margin-top:10px; }.evaluator-trends>div { display:grid; grid-template-columns:1fr 130px; align-items:center; gap:10px; }.evaluator-trends>div>span { overflow:hidden; color:var(--muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }

/* Focused match hero and centralized home editing */
.hero { min-height:100svh; padding-top:max(128px,calc(env(safe-area-inset-top) + 112px)); padding-bottom:72px; }
.match-stage { min-height:calc(100svh - 200px); padding-top:40px; display:flex; flex-direction:column; justify-content:center; }
.match-stage h1 { font-size:clamp(24px,7vw,33px); }.matchup { width:100%; max-width:420px; margin-top:54px; grid-template-columns:1fr 48px 1fr; }
.club img,.club-logo,.club .club-logo { width:min(31vw,126px)!important; height:min(31vw,126px)!important; }.club>img { clip-path:circle(49%); object-fit:cover; }.club strong { margin-top:3px; }
.info-points { gap:9px; font-size:13px; line-height:1.55; }.notice-card { padding-top:21px; padding-bottom:21px; }
.start-editor-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:24px 0; }.start-editor-actions button { min-height:70px; padding:12px; color:#fff; background:linear-gradient(145deg,#381018,var(--surface)); border:1px solid #68111d; border-radius:var(--radius); font-size:10px; font-weight:900; }.start-preview { margin-top:28px; }.start-preview h2 { font-size:20px; }

/* Cleaner trainer video controls and four focused feeds */
.video-manage-bar { position:absolute; top:122px; right:12px; left:12px; z-index:14; display:flex; justify-content:flex-end; gap:6px; pointer-events:none; }.video-manage-bar button { min-height:38px; padding:0 10px; color:#fff; background:#720b18e8; border:1px solid #b5121b; border-radius:6px; font-size:8px; font-weight:900; pointer-events:auto; }.video-manage-bar button:not(:first-child) { background:#171717e8; border-color:#454545; }.video-manage-bar button.danger { color:#ff9eaa; border-color:#6b1822; }.reel-copy { right:68px; }.reel-copy small { display:none; }.feed-tabs { justify-content:center; }.feed-tabs button { flex:1 1 0; text-align:center; }

/* Match-first rating navigation and descriptive self rating */
.rating-games { margin-top:25px; }.rating-games-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }.rating-games-head h2 { margin:0; }.rating-games-head button { min-height:39px; padding:0 11px; color:#fff; background:var(--red-dark); border:1px solid var(--red); border-radius:6px; font-size:9px; font-weight:900; }.rating-games>article { padding:12px 0; border-bottom:1px solid var(--line); }.rating-game-main { width:100%; padding:3px 0 10px; display:flex; flex-direction:column; align-items:flex-start; color:#fff; background:none; border:0; text-align:left; }.rating-game-main strong { font-size:13px; }.rating-game-main small { margin-top:5px; color:var(--muted); font-size:8px; }.rating-games>article>div { display:flex; gap:6px; }.rating-games>article>div button { min-height:32px; padding:0 8px; color:#bbb; background:#191919; border:1px solid var(--line); border-radius:5px; font-size:8px; font-weight:800; }.rating-games>article>div button.danger { color:#ff9eaa; background:#3b0910; }
.team-rating-overview { display:grid; gap:10px; }.team-rating-overview>article { padding:14px; background:var(--surface); border-top:3px solid var(--red-soft); }.team-rating-overview h3 { margin:0 0 10px; }.team-rating-overview article>div { padding:8px 0; display:grid; grid-template-columns:30px 1fr; gap:8px; border-top:1px solid var(--line); }.team-rating-overview article>div>b { width:27px; height:27px; display:grid; place-items:center; background:var(--red-dark); border-radius:50%; }.team-rating-overview article>div>span { display:flex; flex-direction:column; font-size:9px; }.team-rating-overview small,.team-rating-overview p { margin-top:3px; color:var(--muted); font-size:8px; }
.player-rating-overview { display:grid; gap:8px; }.player-rating-summary { margin-bottom:4px; padding:14px; display:flex; flex-direction:column; background:linear-gradient(135deg,#5d0914,var(--surface)); border-left:4px solid var(--red); }.player-rating-summary strong { font-size:18px; }.player-rating-summary span { margin-top:4px; color:#d2bfc2; font-size:9px; }.player-rating-row { min-height:64px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface); border:1px solid var(--line); }.player-rating-row>div { min-width:0; display:flex; flex-direction:column; }.player-rating-row strong { font-size:12px; }.player-rating-row small { margin-top:4px; color:var(--muted); font-size:8px; }.player-rating-row>b { flex:0 0 35px; width:35px; height:35px; display:grid; place-items:center; border-radius:50%; font-size:14px; }.player-rating-row>b.submitted { background:var(--red-dark); border:1px solid var(--red); }.player-rating-row>b.pending { color:#777; background:#090909; border:1px solid #333; }
.grade-scale.descriptive { grid-template-columns:1fr; gap:6px; }.grade-scale.descriptive span { min-height:44px; aspect-ratio:auto; display:flex; align-items:center; justify-content:flex-start; gap:12px; padding:0 12px; }.grade-scale.descriptive b { width:25px; font-size:16px; }.grade-scale.descriptive small { color:#bbb; font-size:10px; font-weight:750; }.grade-scale.descriptive label:has(input:checked) small { color:#fff; }
@media (max-height:720px) and (orientation:portrait) { .match-stage { min-height:calc(100svh - 170px); }.matchup { margin-top:38px; } }
.calendar-section { margin-top:0; }
.calendar-notice { position:fixed; top:max(12px,env(safe-area-inset-top)); left:50%; z-index:80; width:min(calc(100% - 24px),456px); padding:13px 14px; color:#d9ffe3; background:#123d20f5; border:1px solid #286d3b; border-left:4px solid #38b85e; box-shadow:0 10px 30px #000a; transform:translateX(-50%); font-size:11px; font-weight:800; line-height:1.4; }
.tomorrow-button { width:100%; margin-top:13px; padding:9px 12px; color:#fff; background:#3a0910; border:1px solid #74101c; border-radius:6px; font-size:9px; font-weight:850; }
.calendar-inline-confirmation { padding:11px 12px; color:#d9ffe3; background:#123d20; border-left:3px solid #38b85e; font-size:10px; font-weight:800; line-height:1.4; }
.calendar-form-status { min-height:16px; margin:0; color:#ffb7c0; font-size:9px; font-weight:750; line-height:1.4; }
.resource-text { grid-template-columns:1fr 35px; }.resource-text>.resource-image,.resource-text>.resource-art { display:none; }

.home-actions { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; padding-bottom:18px; }
.home-action-card { min-width:0; min-height:210px; padding:20px; display:flex; flex-direction:column; color:#fff; background:linear-gradient(135deg,#6f0b17,#1b0b0e); border:0; border-left:5px solid #fff; }
.home-action-card h2 { min-height:2.4em; margin:6px 0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:21px; line-height:1.2; overflow-wrap:anywhere; }
.home-action-card p { min-height:3em; margin:0 0 16px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; color:#d0bdc0; font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.home-action-card button { width:100%; min-height:46px; margin-top:auto; padding:0 13px; display:flex; align-items:center; justify-content:space-between; gap:10px; color:#fff; background:#09090999; border:1px solid #ffffff31; border-radius:6px; font-weight:900; cursor:pointer; }

/* Compact, dark RWE headers fade completely before the following content. */
.home { background:#090909; }
.hero,.profile-visual,.subpage.misc-page,.subpage.trainer-page {
  --header-art-height:100%;
  background:
    linear-gradient(180deg,rgba(76,7,16,.68),rgba(29,5,9,.84) 55%,#090909 100%) top center/100% var(--header-art-height) no-repeat,
    var(--team-background, url('/media/showcase/team-demo/pattern.svg')) center top/auto var(--header-art-height) no-repeat,
    #090909;
}
.hero { min-height:0; padding-bottom:58px; }
.match-stage { min-height:0; justify-content:flex-start; padding-top:20px; }
.match-stage h1 { margin-top:4px; }
.matchup { margin-top:34px; }
.subpage.misc-page,.subpage.trainer-page { --header-art-height:440px; }
.misc-page>.subpage-title,.trainer-page>.subpage-title { border-bottom:0; }
.profile-content { margin-top:0; padding-top:0; border-top:0; }
.profile-visual { padding-bottom:40px; }
.club { justify-self:center; width:100%; }
.club img { filter:drop-shadow(0 3px 5px #0009); }
.club>img,.club-logo,.club .club-logo {
  display:block;
  object-fit:contain!important;
  clip-path:none;
  border-radius:0;
  background:transparent;
}
.calendar-section,.content-section { background:#090909; }
.calendar-section { margin-right:-17px; margin-left:-17px; padding-right:17px; padding-left:17px; border-top:0; }
.content-section { margin-right:-17px; margin-left:-17px; padding-right:17px; padding-left:17px; }
.self-rating-form { min-height:calc(100svh - 245px); display:flex; flex-direction:column; justify-content:center; }
.self-rating-form .grade-scale.descriptive span { min-height:52px; }
.editor-sheet { max-height:min(88dvh,760px); overflow-y:auto; }.editor-sheet>.inline-editor { margin:0; }
.notes-card { margin-top:26px; padding:18px; background:linear-gradient(135deg,#480812,#151112); border-left:4px solid #fff; }.notes-card h2 { margin:0; font-size:18px; }.note-list { display:grid; gap:8px; margin-top:14px; }.note-list article { padding:12px; background:#09090980; border:1px solid var(--line); }.note-list p { margin:0; color:#eee; font-size:11px; line-height:1.55; white-space:pre-line; }.note-list small { display:block; margin-top:7px; color:#777; font-size:8px; }.note-list article>button { margin-top:7px; padding:0; color:#d57a86; background:none; border:0; font-size:8px; }.document-links { margin-top:24px; }.task-video { text-decoration:none; }

/* Einheitliche rote Inhaltsblöcke wie bei den Profilnotizen. */
.content-section .managed-row { margin:10px 0; padding:0 14px 10px 16px; overflow:hidden; background:linear-gradient(110deg,#520812 0%,#2a0b10 54%,#151112 100%); border:0; border-left:4px solid #fff; }
.content-section .resource-card { min-height:90px; padding:16px 0; display:grid; grid-template-columns:1fr 35px; border:0; background:transparent; }
.content-section .resource-card>.resource-icon,.content-section .resource-card>.resource-art { display:none; }
.content-section .resource-card>.resource-image { grid-column:1/-1; width:100%; height:auto; max-height:210px; margin-bottom:12px; object-fit:cover; }
.content-section .manage-actions { padding-top:2px; }
.training-task-list { gap:12px; }
.training-task-list details { overflow:hidden; background:linear-gradient(110deg,#520812 0%,#2a0b10 54%,#151112 100%); border:0; border-left:4px solid #fff; border-radius:0; }
.training-task-list summary { min-height:78px; padding:15px 14px; }
.training-task-list summary strong { font-size:14px; }
.training-task-list summary small { color:#d2bfc2; }
.training-task-list details>p { padding:0 14px 15px; color:#eee; font-size:11px; }

/* Desktop: Der lange Mehrfach-Upload scrollt innerhalb des Editors; Mobil bleibt unverändert. */
@media (min-width:768px) {
  .video-editor {
    max-height:calc(100dvh - 190px);
    padding-bottom:28px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
  .video-editor .publish-button { position:sticky; bottom:0; z-index:2; box-shadow:0 -12px 20px #131313; }
}

/* Interaktive Lernvideos */
.feed-tabs button { min-width:max-content; }
.interactive-editor { max-height:calc(100dvh - 150px); overflow-y:auto; overscroll-behavior:contain; }
.interactive-editor>form { display:grid; gap:12px; padding:13px; background:#0b0b0b; border:1px solid var(--line); }
.interactive-editor>form+form { margin-top:14px; }
.interaction-list { display:grid; gap:8px; margin:14px 0; }
.interaction-list>p { color:var(--muted); font-size:10px; }
.interaction-list article { padding:12px; display:grid; gap:7px; background:linear-gradient(110deg,#500812,#181112); border-left:3px solid #fff; }
.interaction-list article>b { font-size:11px; line-height:1.4; }.interaction-list article>small { color:#c6aeb2; font-size:8px; }
.interaction-list article>button { justify-self:end; padding:5px 8px; color:#ff9eaa; background:#2d090e; border:1px solid #661420; border-radius:4px; font-size:8px; }
.interaction-list details { color:#ccc; font-size:9px; }.interaction-list details p { margin:7px 0 0; line-height:1.35; }
.interaction-overlay { position:absolute; inset:0; z-index:9; display:grid; place-items:center; padding:22px; background:#050505d9; backdrop-filter:blur(6px); }
.interaction-overlay[hidden] { display:none; }
.interaction-overlay>section { width:min(100%,390px); max-height:80%; padding:20px; overflow-y:auto; background:linear-gradient(145deg,#530913,#151112); border:1px solid #8d1725; border-left:5px solid #fff; box-shadow:0 20px 70px #000; }
.interaction-overlay h3 { margin:9px 0 17px; font-size:20px; line-height:1.25; }
.interaction-choices { display:grid; gap:8px; }.interaction-choices button,.interaction-overlay form button,.interaction-feedback button { min-height:44px; padding:9px 12px; color:#fff; background:#090909b8; border:1px solid #ffffff42; border-radius:5px; text-align:left; font-weight:850; }
.interaction-choices button.selected { background:#971126; border-color:#fff; }
.interaction-overlay form { display:grid; gap:9px; }.interaction-overlay textarea { width:100%; padding:11px; color:#fff; background:#090909; border:1px solid #555; border-radius:5px; font-size:16px; resize:vertical; }
.interaction-feedback { margin-top:15px; padding-top:14px; border-top:1px solid #ffffff35; }.interaction-feedback strong { font-size:12px; }.interaction-feedback p { color:#eee; font-size:11px; line-height:1.5; white-space:pre-line; }.interaction-feedback button { width:100%; text-align:center; background:#8c0d1c; border-color:#d31b31; }
@media (orientation:landscape) and (max-height:600px) { .interaction-overlay { padding:10px 70px; }.interaction-overlay>section { max-height:88svh; padding:14px 18px; }.interaction-overlay h3 { margin:5px 0 9px; font-size:16px; }.interaction-choices { grid-template-columns:1fr 1fr; } }

/* Bearbeitbare Kalenderformulare und Trainer-Diktat */
.secondary-button { min-height:42px; color:#ddd; background:#202020; border:1px solid var(--line); border-radius:6px; font-weight:800; }
.dictation-button,.comments-sheet form .dictation-button { width:max-content; min-height:35px; margin-top:7px; padding:0 11px; display:inline-flex; align-items:center; gap:6px; color:#fff; background:#282828; border:1px solid #555; border-radius:999px; font-size:9px; font-weight:850; text-transform:none; }
.dictation-button.recording,.comments-sheet form .dictation-button.recording { background:#8c0d1c; border-color:#e51d38; box-shadow:0 0 0 4px #e51d3825; animation:dictationPulse 1.15s ease-in-out infinite; }
@keyframes dictationPulse { 50% { opacity:.65; } }

/* Video-Editor als zuverlässiges Sheet über dem Feed – mobil und Desktop. */
.videos-page>.video-editor { position:fixed; top:max(68px,calc(env(safe-area-inset-top) + 54px)); right:10px; bottom:max(78px,calc(env(safe-area-inset-bottom) + 70px)); left:50%; z-index:60; width:min(calc(100% - 20px),460px); max-height:none; margin:0; padding-bottom:28px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; transform:translateX(-50%); box-shadow:0 0 0 100vmax #000c,0 20px 70px #000; }
.videos-page>.video-editor .editor-head { position:sticky; top:-18px; z-index:4; padding:14px 0 10px; background:#131313; }
.videos-page>.video-editor .publish-button { position:sticky; bottom:-10px; z-index:3; box-shadow:0 -12px 22px #131313; }
.interactive-editor .editor-help { margin:0 0 12px; color:#bbb; font-size:10px; line-height:1.5; }
.interaction-info { display:grid; gap:12px; }.interaction-info p { margin:0; color:#eee; font-size:11px; line-height:1.5; }.interaction-info button { min-height:45px; color:#fff; background:#8c0d1c; border:1px solid #d31b31; border-radius:5px; font-weight:850; }
@media (min-width:768px) { .videos-page>.video-editor { top:24px; bottom:24px; } }

/* Titel, Beschreibung und Interaktiv-Kennzeichnung zuverlässig über dem Player. */
.videos-page .reel-copy { z-index:6; padding:10px 12px; background:linear-gradient(90deg,#050505c9,#05050570 72%,transparent); border-left:3px solid #a81124; }
.videos-page .reel-copy>span { display:block; margin-bottom:5px; color:#ff4057; font-size:8px; font-weight:950; letter-spacing:.16em; }
.videos-page .reel-copy h2 { margin:0; }
.videos-page .reel-copy p { display:-webkit-box; max-height:4.5em; margin-top:7px; overflow:hidden; color:#fff; font-size:11px; line-height:1.45; white-space:pre-line; -webkit-box-orient:vertical; -webkit-line-clamp:3; }

/* Beschreibung darf im Hochformat nicht vom unteren Feed abgeschnitten werden. */
@media (orientation:portrait) {
  .videos-page .reel-copy { right:76px; bottom:118px; max-height:190px; overflow-y:auto; }
  .videos-page .reel-copy p { display:block; max-height:7.3em; overflow-y:auto; -webkit-line-clamp:unset; }
}
.engagement-explainer { margin:24px 0 14px; padding:16px; background:#171717; border-left:4px solid var(--red-soft); }.engagement-explainer strong { font-size:13px; }.engagement-explainer p { margin:7px 0 0; color:var(--muted); font-size:10px; line-height:1.55; }.engagement-list { display:grid; gap:12px; }.engagement-card { padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }.engagement-player { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.engagement-player>div { display:flex; flex-direction:column; gap:5px; }.engagement-player strong { font-size:14px; }.engagement-player small,.engagement-interactions small { color:var(--muted); font-size:8px; }.engagement-player>b { flex:none; color:#fff; font-size:12px; }.engagement-metrics { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0; }.engagement-metrics span { padding:10px; display:flex; flex-direction:column; gap:3px; color:var(--muted); background:#0d0d0d; font-size:8px; }.engagement-metrics b { color:#fff; font-size:17px; }.engagement-card details { border-top:1px solid var(--line); }.engagement-card summary { padding:13px 0 0; color:#ddd; font-size:10px; font-weight:800; cursor:pointer; }.engagement-interactions { display:grid; gap:8px; padding-top:12px; }.engagement-interactions>div { padding:11px; background:#0d0d0d; }.engagement-interactions strong { font-size:10px; }.engagement-interactions p { margin:5px 0; color:#eee; font-size:10px; line-height:1.4; }
.survey-callout{margin:18px 16px;padding:22px;border:1px solid #66101b;border-left:5px solid var(--red-soft);border-radius:var(--radius);background:linear-gradient(135deg,#6f0b17,#1b0b0e);color:#fff;box-shadow:0 12px 30px #0005}.survey-callout h2{margin:7px 0}.survey-callout p{color:#d0bdc0;line-height:1.5}.survey-callout button,.survey-new{border:1px solid #ffffff31;border-radius:6px;background:#09090999;color:#fff;padding:13px 16px;font-weight:800}.survey-response,.survey-results,.survey-history,.survey-admin-list{color:#fff;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--red-soft);border-radius:var(--radius);padding:18px;margin:16px 0;box-shadow:0 8px 24px #0005}.survey-response>p,.survey-response>small,.survey-history small,.survey-admin-list small{color:var(--muted)}.survey-response fieldset,.audience-preview fieldset{border:0;border-top:1px solid var(--line);margin:18px 0;padding:18px 0 0}.survey-response legend,.audience-preview legend{color:#fff;font-weight:800;padding-right:8px}.survey-response textarea{width:100%;padding:11px;color:#fff;background:#090909;border:1px solid var(--line);border-radius:5px;font:inherit}.survey-number-scale,.survey-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.survey-number-scale input,.survey-choices input{position:absolute;opacity:0}.survey-number-scale span,.survey-choices span{display:block;min-width:42px;padding:11px;color:#ddd;background:#090909;border:1px solid #444;border-radius:5px;text-align:center;font-weight:700}.survey-number-scale input:checked+span,.survey-choices input:checked+span{background:var(--red-dark);border-color:var(--red);color:#fff}.survey-question-row{border:1px solid var(--line);border-radius:6px;padding:14px;margin:12px 0}.survey-admin-list article{display:flex;gap:8px;border-bottom:1px solid var(--line);padding:8px 0}.survey-admin-list article>button:first-child{flex:1;color:#fff;text-align:left;background:none;border:0;padding:10px}.survey-admin-list strong,.survey-admin-list small{display:block}.survey-admin-list .active{border-left:4px solid var(--red);padding-left:8px}.survey-results details{border-top:1px solid var(--line);padding:14px 0}.survey-results summary{display:flex;justify-content:space-between}.survey-results p{color:#ddd}.survey-history article{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:12px 0}.audience-preview{max-height:82vh;overflow-y:auto}.audience-preview>p,.audience-preview>small{color:var(--muted)}.audience-preview fieldset{pointer-events:none}.preview-note{margin:18px 0;padding:12px;color:#d9c4c7;background:#430911;border-left:4px solid var(--red);font-size:10px;line-height:1.5}.audience-preview .publish-button:disabled{opacity:.55}.preview-grade-scale{margin:20px 0}.check-row{display:flex!important;align-items:center;gap:9px}.check-row input{width:auto!important}

.video-collection-picker { position:absolute; top:110px; left:14px; right:14px; z-index:16; display:flex; align-items:center; gap:9px; padding:7px 9px; color:#fff; background:#090909e8; border:1px solid #ffffff24; border-radius:8px; backdrop-filter:blur(8px); }
.video-collection-picker span { flex:0 0 auto; color:#aaa; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.video-collection-picker select { min-width:0; flex:1; height:34px; padding:0 8px; color:#fff; background:#1b1b1b; border:1px solid #ffffff20; border-radius:5px; font-size:11px; }
@media (orientation:landscape) { .video-collection-picker { top:10px; max-width:330px; } }

/* Klare, kontrastreiche Dialogsteuerung im RWE-Layout. */
.sheet-close,.editor-head button { color:#fff; background:#650b17; border:1px solid #a9182a; box-shadow:0 3px 12px #0008; }
.sheet-close svg,.editor-head button svg { width:18px; height:18px; stroke-width:2.5; }
.sheet-close:hover,.sheet-close:focus-visible,.editor-head button:hover,.editor-head button:focus-visible { background:#8d1020; outline:2px solid #fff; outline-offset:2px; }
.survey-submit-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.video-category-panel { position:absolute; top:160px; right:14px; left:14px; z-index:13; padding:16px; color:#fff; background:#101010ed; border:1px solid #6d1420; border-left:4px solid var(--red-soft); border-radius:8px; backdrop-filter:blur(9px); }
.video-category-panel h2 { margin:0 0 5px; font-size:18px; }.video-category-panel p { margin:0 0 12px; color:var(--muted); font-size:9px; }
.video-category-panel>div { display:flex; flex-wrap:wrap; gap:7px; }.video-category-panel button { min-height:36px; padding:0 12px; color:#fff; background:#242424; border:1px solid #484848; border-radius:999px; font-size:9px; font-weight:850; }.video-category-panel button.active { background:#790d1b; border-color:#c51a30; }
@media (max-width:520px) { .feed-tabs { display:grid; grid-template-columns:repeat(3,1fr); overflow:visible; }.feed-tabs button { min-width:0; padding:0 4px; }.reels { height:calc(100vh - 139px); }.survey-submit-actions { grid-template-columns:1fr; } }

/* Umfrageaktionen und kompakte Trainer-Videomediathek. */
.survey-row-actions { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.survey-row-actions button { min-height:32px; padding:0 8px; color:#fff; background:#242424; border:1px solid #555; border-radius:5px; font-size:8px; font-weight:800; }
.survey-row-actions button:last-child { background:#650b17; border-color:#a9182a; }
.library-search { display:grid; gap:6px; margin:18px 0; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; }
.library-search input { min-height:44px; padding:0 12px; color:#fff; background:#101010; border:1px solid var(--line); border-radius:6px; font:inherit; }
#video-library-editor { display:grid; gap:16px; }.library-toolbar { display:flex; align-items:center; justify-content:space-between; }.library-toolbar button { min-height:36px; padding:0 11px; color:#fff; background:#650b17; border:1px solid #a9182a; border-radius:5px; font-weight:800; }.library-toolbar span { color:var(--muted); font-size:9px; }
.video-library-grid { display:grid; grid-template-columns:1fr; gap:10px; }.video-library-card { position:relative; min-width:0; padding:12px; display:grid; grid-template-columns:20px 1fr; align-items:start; gap:8px 10px; color:#fff; background:#131313; border:1px solid var(--line); border-radius:7px; cursor:pointer; }.video-library-card>input { width:17px; margin-top:2px; accent-color:var(--red); }.library-video-copy { min-width:0; display:grid; gap:5px; }.video-library-card strong { font-size:12px; }.video-library-card small { color:var(--muted); font-size:8px; }.video-library-card:has(input:checked) { border-color:#d51b32; box-shadow:0 0 0 2px #7d0c1a; }
.library-bulk { position:sticky; bottom:72px; z-index:5; padding:14px; display:grid; gap:9px; background:#151515f7; border:1px solid #71101d; border-top:4px solid var(--red-soft); border-radius:8px; box-shadow:0 -10px 30px #000a; }.library-bulk h2 { margin:0; font-size:15px; }.library-bulk label { display:grid; gap:5px; color:var(--muted); font-size:8px; font-weight:800; text-transform:uppercase; }.library-bulk select { min-height:40px; padding:0 8px; color:#fff; background:#080808; border:1px solid var(--line); border-radius:5px; }.library-bulk>div { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.library-bulk button { min-height:39px; padding:5px; color:#fff; background:#650b17; border:1px solid #a9182a; border-radius:5px; font-size:8px; font-weight:800; }.library-bulk button:nth-child(2) { background:#242424; border-color:#555; }
@media (min-width:700px) { .video-library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Kompakte Videotitel und bestehende Zuordnungen in der Mediathek. */
.video-library-card strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:1.35; }
.library-assignments { grid-column:2; display:grid; gap:8px; padding-top:8px; border-top:1px solid #292929; }
.library-assignments>div { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.library-assignments b { flex:0 0 100%; color:#aaa; font-size:7px; letter-spacing:.06em; text-transform:uppercase; }
.library-assignments span { padding:4px 6px; color:#f4dfe2; background:#4e0912; border:1px solid #77101d; border-radius:999px; font-size:7px; line-height:1.2; }
.library-assignments em { color:#777; font-size:8px; font-style:normal; }
.video-library-card[hidden] { display:none; }
.survey-row-actions button.danger { color:#ffb0b9; background:#39080d; border-color:#7e1521; }


/* Simplified video feed controls */
.video-manage-menu {
  position:absolute;
  top:122px;
  right:12px;
  z-index:40;
  width:min(190px,calc(100% - 24px));
  color:#fff;
}
.video-manage-menu>summary,
.reel-category-menu>summary,
.video-more-categories>summary {
  list-style:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.video-manage-menu>summary::-webkit-details-marker,
.reel-category-menu>summary::-webkit-details-marker,
.video-more-categories>summary::-webkit-details-marker { display:none; }
.video-manage-menu>summary {
  min-height:40px;
  padding:0 13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#fff;
  background:#171717e8;
  border:1px solid #eee;
  border-radius:7px;
  box-shadow:0 6px 20px #0009;
  font-size:9px;
  font-weight:900;
}
.video-manage-menu summary svg,
.video-more-categories summary svg { transition:transform .18s ease; }
.video-manage-menu[open]>summary svg,
.video-more-categories[open]>summary svg { transform:rotate(180deg); }
.video-manage-actions {
  margin-top:7px;
  padding:7px;
  display:grid;
  gap:6px;
  background:#0d0d0df2;
  border:1px solid #4a4a4a;
  border-radius:8px;
  box-shadow:0 12px 30px #000c;
}
.video-manage-actions button {
  min-height:40px;
  padding:0 12px;
  color:#fff;
  background:#1d1d1d;
  border:1px solid #555;
  border-radius:6px;
  font-size:9px;
  font-weight:850;
  text-align:left;
}
.video-manage-actions button.danger { color:#ff9eaa; border-color:#6b1822; }

.reel-copy,.reel-actions { z-index:6; }
.reel-category-menu { position:relative; width:52px; }
.reel-category-menu>summary {
  width:52px;
  padding:0;
  display:grid;
  justify-items:center;
  gap:5px;
  color:#fff;
  background:none;
  border:0;
  filter:drop-shadow(0 2px 5px #000);
}
.reel-category-menu>summary span {
  font-size:7px;
  font-weight:800;
}
.video-filter-panel {
  position:fixed;
  bottom:82px;
  left:50%;
  z-index:60;
  width:min(360px,calc(100vw - 28px));
  max-height:min(55svh,440px);
  padding:10px;
  display:grid;
  gap:9px;
  overflow-y:auto;
  color:#fff;
  background:#0d0d0df7;
  border:1px solid #555;
  border-radius:10px;
  box-shadow:0 15px 36px #000d;
  transform:translateX(-50%);
}
.video-filter-options {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}
.video-filter-options button,
.video-collection-options button {
  min-width:0;
  min-height:40px;
  padding:7px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#aaa;
  background:#1b1b1b;
  border:1px solid #3d3d3d;
  border-radius:7px;
  font-size:8px;
  font-weight:850;
  line-height:1.25;
  overflow-wrap:anywhere;
  text-align:center;
  white-space:normal;
}
.video-filter-options button.active,
.video-collection-options button.active {
  color:#fff;
  background:#730b17;
  border-color:#b5122a;
}
.video-more-categories {
  border-top:1px solid #333;
  padding-top:9px;
}
.video-more-categories>summary {
  min-height:36px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#fff;
  background:#171717;
  border:1px solid #3d3d3d;
  border-radius:7px;
  font-size:8px;
  font-weight:850;
}
.video-collection-options {
  margin-top:7px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:7px;
}
.video-collection-options small {
  grid-column:1/-1;
  padding:10px;
  color:#888;
  font-size:9px;
  text-align:center;
}

.bunny-video-frame iframe { pointer-events:none; }
.bunny-video-frame::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  background:#050505;
  opacity:1;
  transition:opacity .12s ease;
  pointer-events:none;
}
.bunny-video-frame.player-ready::after {
  opacity:0;
  visibility:hidden;
}
.reel-player-surface {
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  padding:0;
  display:block;
  color:#fff;
  background:transparent;
  border:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.reel-player-icon {
  position:absolute;
  top:50%;
  left:50%;
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--red-dark);
  border:1px solid var(--red-soft);
  border-radius:50%;
  box-shadow:0 6px 22px #000b;
  opacity:0;
  transform:translate(-50%,-50%) scale(.92);
  transition:opacity .12s ease,transform .12s ease;
}
.reel-player-icon svg { margin-left:4px; }
.reel-player-progress {
  position:absolute;
  right:5%;
  bottom:18px;
  left:5%;
  height:5px;
  overflow:hidden;
  background:#ffffff55;
  border-radius:999px;
  opacity:0;
}
.reel-player-progress i {
  width:var(--video-progress,0%);
  height:100%;
  display:block;
  background:var(--red-soft);
  border-radius:inherit;
}
.reel-player-surface.is-paused {
  background:linear-gradient(180deg,transparent 0,transparent 70%,#050505 94%);
}
.reel-player-surface.is-paused .reel-player-icon,
.reel-player-surface.is-paused .reel-player-progress { opacity:1; }
.reel-player-surface.is-paused .reel-player-icon {
  transform:translate(-50%,-50%) scale(1);
}

.reel-copy .reel-title {
  width:100%;
  min-width:0;
  min-height:0;
  margin:6px 0;
  padding:0;
  display:block;
  overflow:hidden;
  color:#fff;
  background:none;
  border:0;
  font:inherit;
  font-size:21px;
  font-weight:800;
  line-height:1.07;
  text-align:left;
  text-overflow:ellipsis;
  text-shadow:inherit;
  white-space:nowrap;
}
.reel-copy .reel-title.expanded {
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
}

@media (orientation:landscape) and (max-height:600px) {
  .video-manage-menu {
    position:fixed;
    top:max(10px,env(safe-area-inset-top));
    right:max(12px,env(safe-area-inset-right));
  }
  .video-filter-panel {
    bottom:max(10px,env(safe-area-inset-bottom));
    max-height:76svh;
  }
  .videos-page .reel-copy .reel-title {
    margin:0 0 4px;
    font-size:15px;
  }
  .reel-player-icon { width:54px; height:54px; }
  .reel-player-progress { bottom:12px; }
}

/* Reel content stays clear until the viewer explicitly opens its slim info strip. */
.videos-page .reel-shade { background:linear-gradient(180deg,#0005,transparent 22%,transparent 82%,#0006); }
.videos-page .reel-info { position:absolute; top:max(104px,calc(env(safe-area-inset-top) + 104px)); right:0; left:0; z-index:7; color:#fff; }
.videos-page .reel-info>summary { width:max-content; min-height:38px; padding:8px 13px; display:flex; align-items:center; gap:5px; color:#ddd; background:#0808089c; border-radius:0 0 7px 0; font-size:11px; font-weight:700; cursor:pointer; list-style:none; }
.videos-page .reel-info>summary::-webkit-details-marker { display:none; }
.videos-page .reel-info[open]>summary { background:#111e; }
.videos-page .reel-info-content { max-height:26svh; padding:10px 14px 12px; display:grid; gap:4px; overflow-y:auto; background:#111e; border-bottom:1px solid #ffffff29; box-shadow:0 8px 18px #0005; }
.videos-page .reel-info-content strong { font-size:13px; line-height:1.3; }
.videos-page .reel-info-content span { color:#ddd; font-size:11px; line-height:1.35; }
.videos-page .reel-info-content p { margin:3px 0 0; color:#ccc; font-size:11px; line-height:1.4; white-space:pre-line; }
.videos-page .reel-actions { top:auto; right:11px; bottom:125px; z-index:8; display:grid; gap:7px; }
.videos-page .reel-actions button { width:38px; min-height:38px; padding:0; display:grid; place-items:center; color:#fff; background:#090909a8; border:1px solid #ffffff30; border-radius:50%; }
.videos-page .reel-actions button.active { color:#ff3754; }
.videos-page .reel-actions button svg { width:18px; height:18px; }
.videos-page .reel-actions button span { display:none; }
.videos-page .reel-player-icon { width:44px; height:44px; background:#450b15ba; }
.library-search select { min-height:44px; padding:0 12px; color:#fff; background:#101010; border:1px solid var(--line); border-radius:6px; font:inherit; }
.library-bulk { max-height:55svh; overflow-y:auto; }
.library-bulk .video-library-new-match[hidden] { display:none; }
.library-bulk .video-library-new-match input { min-height:40px; padding:0 8px; color:#fff; background:#080808; border:1px solid var(--line); border-radius:5px; }
.video-library-page .library-bulk { top:calc(104px + env(safe-area-inset-top)); bottom:auto; z-index:12; max-height:min(45svh,340px); padding:10px; gap:8px; overflow-y:auto; border-top:1px solid #71101d; box-shadow:0 8px 24px #000a; }
.video-library-page .library-bulk .library-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:5px 10px; }
.video-library-page .library-bulk .library-toolbar [data-library-selected-count] { color:#fff; font-size:10px; }
.video-library-page .library-bulk .library-bulk-fields { display:flex; flex-wrap:wrap; align-items:end; gap:7px; }
.video-library-page .library-bulk .library-bulk-fields label { flex:1 1 175px; min-width:0; }
.video-library-page .library-bulk .library-bulk-fields button { flex:0 1 auto; min-width:90px; padding:5px 10px; }
.video-library-page .library-bulk .video-library-new-match { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
@media (orientation:landscape) and (max-height:600px) {
  .videos-page .reel-info { top:0; right:70px; left:0; }
  .videos-page .reel-info-content { max-height:45svh; }
  .videos-page .reel-actions { right:12px; bottom:12px; }
}

/* The same account controls are usable on narrow screens and with keyboard focus. */
.account-management .account-remove { min-height:44px; padding:10px 14px; border:1px solid #a33946; border-radius:6px; background:#261015; color:#fff; font:inherit; font-weight:700; cursor:pointer; }
.account-management button:disabled { opacity:.45; cursor:not-allowed; }
.account-management button:focus-visible { outline:2px solid #fff; outline-offset:3px; }

.maintenance-notice { padding: 14px 20px; background: #fff0d2; color: #4b3000; border-bottom: 1px solid #c89228; font-size: 14px; line-height: 1.5; }
.maintenance-page { max-width: 480px; margin: 12vh auto; padding: 28px; text-align: center; }
.maintenance-page h1 { font-size: 28px; margin-bottom: 16px; }
.maintenance-page p { line-height: 1.6; margin-bottom: 16px; }
.maintenance-page button { padding: 12px 20px; border-radius: 10px; background: #ba1430; color: white; font: inherit; border: 0; cursor: pointer; }