:root { color-scheme: dark; --bg:#07111f; --panel:#101d30; --panel2:#14243a; --line:#27405e; --text:#f4f8ff; --muted:#94a9c2; --accent:#9cff3b; --blue:#3598ff; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 75% 15%,#15395a 0,transparent 36%),var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body.player-open { overflow:hidden; }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.65; }
.shell { min-height:100vh; padding:34px 48px; }
header { height:70px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:13px; }
.brand strong { display:block; font-size:25px; letter-spacing:.04em; }
.brand small,.provider small { display:block; color:var(--muted); margin-top:3px; }
.mark { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; color:#07111f; font-weight:900; background:linear-gradient(135deg,var(--accent),#e8ff47); }
.link { border:0; background:transparent; color:#d6e7fa; padding:10px 14px; }
.login-card { width:min(620px,100%); margin:12vh auto 0; padding:44px; border:1px solid var(--line); border-radius:24px; background:rgba(16,29,48,.92); box-shadow:0 26px 80px rgba(0,0,0,.35); }
h1 { font-size:clamp(34px,4vw,58px); margin:8px 0 14px; line-height:1.05; }
h2 { font-size:24px; }
.eyebrow { color:var(--accent); font-weight:800; font-size:12px; letter-spacing:.2em; }
.muted,.status-card p,.next-card p { color:var(--muted); line-height:1.6; }
label { display:block; margin:30px 0 9px; color:#c9d8e9; }
.login-row { display:grid; grid-template-columns:1fr auto; gap:10px; }
input { min-width:0; padding:15px 16px; border:1px solid #365371; border-radius:12px; background:#091525; color:white; outline:none; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(53,152,255,.18); }
.login-row button,.next-card button { border:0; border-radius:12px; padding:14px 20px; color:#06101d; background:var(--accent); font-weight:800; }
.next-card button:disabled { cursor:not-allowed; color:#8293a6; background:#22354c; }
.error { color:#ff8d8d; min-height:20px; }
.workspace { display:grid; grid-template-columns:270px 1fr; min-height:calc(100vh - 105px); }
aside { padding:38px 26px 0 0; border-right:1px solid var(--line); }
.provider { width:100%; display:flex; align-items:center; gap:13px; text-align:left; padding:13px; border:1px solid var(--line); border-radius:14px; color:var(--text); background:var(--panel); }
.provider.active { border-color:var(--blue); background:linear-gradient(100deg,#173154,#12243b); }
.provider-logo { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:#263951; color:#dcff43; font-size:12px; font-weight:900; }
article { padding:55px 7vw; }
.workspace > article { min-width:0; }
.status-card,.next-card { max-width:780px; padding:24px 26px; border:1px solid var(--line); border-radius:18px; background:rgba(16,29,48,.75); margin-top:24px; }
.status-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 15px var(--accent); margin-right:10px; }
.status-dot.offline { background:#70849a; box-shadow:none; }
.sky-login-grid { display:grid; grid-template-columns:260px 1fr; align-items:center; gap:28px; margin-top:20px; }
.sky-login-grid img { display:block; width:260px; height:260px; padding:8px; border-radius:16px; background:#fff; }
.action-link { display:inline-block; padding:14px 20px; border-radius:12px; color:#06101d; background:var(--accent); font-weight:800; text-decoration:none; }
.next-card button.secondary { color:#d6e7fa; background:#22354c; }
.next-card button.danger { color:#ffd0d0; border:1px solid #74404b; background:#33202b; }
.programme { max-width:1180px; margin-top:46px; }
.programme-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding-bottom:15px; }
.programme-heading h2 { margin:5px 0 0; font-size:34px; }
.programme-heading .eyebrow { margin:0; }
.programme-heading button.compact { border:1px solid var(--line); border-radius:10px; padding:10px 14px; color:#d6e7fa; background:#15263c; }
.catalogue-section { margin-top:38px; }
.catalogue-section h3 { font-size:25px; margin:0 0 17px; }
.catalogue-section h4 { color:#c9d8e9; margin:24px 0 11px; font-size:15px; letter-spacing:.02em; }
.card-rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(245px,290px); gap:15px; overflow-x:auto; padding:2px 2px 14px; scroll-snap-type:x proximity; scrollbar-color:#365371 transparent; }
.programme-card { padding:0; min-height:235px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--panel); scroll-snap-align:start; color:var(--text); text-align:left; }
.programme-card.playable { cursor:pointer; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.programme-card.playable:hover,.programme-card.playable:focus-visible { transform:translateY(-3px); border-color:var(--blue); box-shadow:0 12px 28px rgba(0,0,0,.28); outline:none; }
.programme-card.selected { border-color:var(--accent); box-shadow:0 0 0 2px rgba(156,255,59,.22); }
.programme-card img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:linear-gradient(135deg,#162944,#0b1728); }
.programme-card.image-missing img { visibility:hidden; }
.programme-card > div { display:grid; gap:8px; padding:14px; }
.programme-card strong { font-size:16px; line-height:1.3; }
.programme-card small { color:var(--muted); line-height:1.35; }
.event-badge { justify-self:start; padding:4px 7px; border-radius:6px; color:#bcd0e6; background:#213650; font-size:10px; font-weight:800; letter-spacing:.06em; }
.event-badge.live { color:#07111f; background:var(--accent); }
.selection-label { color:var(--accent) !important; font-weight:800; }
.empty-row { width:245px; min-height:105px; display:grid; place-items:center; margin:0; padding:18px; border:1px dashed #304762; border-radius:14px; color:var(--muted); text-align:center; }
.player-dock { position:fixed; left:50%; bottom:22px; z-index:20; transform:translateX(-50%); width:min(820px,calc(100vw - 32px)); display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; padding:14px 16px; border:1px solid #3d5a77; border-radius:17px; background:rgba(10,23,39,.97); box-shadow:0 18px 50px rgba(0,0,0,.45); }
.player-dock small { display:block; margin-top:3px; color:var(--muted); }
.player-dock button { border:0; border-radius:10px; padding:11px 15px; font-weight:800; }
.player-dock button.secondary { color:#d6e7fa; background:#22354c; }
.player-dock #openPlayerWall { color:#06101d; background:var(--accent); }
.player-overlay { position:fixed; inset:0; z-index:30; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:12px; padding:18px 22px; background:#020711; }
.player-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.player-toolbar h2 { margin:4px 0 0; }
.player-toolbar .eyebrow { margin:0; }
.player-toolbar small { color:var(--muted); }
.player-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.layout-picker { display:flex; align-items:center; gap:7px; margin:0; padding:0 4px 0 0; color:var(--muted); font-size:12px; }
.layout-picker select { border:1px solid var(--line); border-radius:10px; padding:9px 30px 9px 11px; color:var(--text); background:#15263c; }
.player-control,.player-close { border:1px solid var(--line); border-radius:10px; padding:9px 13px; color:var(--text); background:#15263c; }
.player-close { border-color:#74404b; color:#ffd0d0; background:#33202b; }
.player-grid { min-height:0; display:grid; gap:8px; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); }
.player-grid[data-layout="conference"],.player-grid[data-layout="pip"] { position:relative; display:block; }
.player-grid[data-layout="conference"] .player-tile,.player-grid[data-layout="pip"] .player-tile { position:absolute; transition:left .2s ease,top .2s ease,width .2s ease,height .2s ease; }
.player-grid[data-layout="pip"] .layout-secondary { border-color:#66829f; box-shadow:0 12px 28px rgba(0,0,0,.55); }
.player-grid[data-layout="conference"] .layout-main,.player-grid[data-layout="pip"] .layout-main { border-color:var(--accent); }
.player-grid[data-count="1"] { grid-template-columns:1fr; grid-template-rows:1fr; }
.player-grid[data-count="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:1fr; }
.player-grid[data-count="3"],.player-grid[data-count="4"] { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
.player-grid[data-count="5"],.player-grid[data-count="6"] { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
.player-tile { position:relative; min-width:0; min-height:0; overflow:hidden; border:2px solid #172b43; border-radius:12px; background:#000; }
.player-tile.active-audio { border-color:var(--accent); box-shadow:0 0 0 1px rgba(156,255,59,.28); }
.player-tile video { width:100%; height:100%; object-fit:contain; background:#000; }
.player-tile-header { position:absolute; top:0; left:0; right:0; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:9px; background:linear-gradient(180deg,rgba(0,0,0,.9),transparent); pointer-events:none; }
.player-tile-title { min-width:0; text-shadow:0 1px 3px #000; }
.player-tile-title strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.player-tile-title small { color:#c5d4e5; font-size:10px; }
.tile-actions { display:flex; gap:5px; pointer-events:auto; }
.tile-actions button { border:1px solid rgba(255,255,255,.22); border-radius:7px; padding:5px 8px; color:#fff; background:rgba(9,20,34,.88); font-size:11px; }
.player-message { position:absolute; inset:0; display:grid; place-items:center; padding:30px; background:#000; color:#d9e8f8; text-align:center; }
.player-message.error { color:#ff9b9b; }
.player-hint { margin:0; color:var(--muted); text-align:center; font-size:12px; }
.hidden { display:none !important; }
@media (max-width:760px) { .shell{padding:20px}.workspace{grid-template-columns:1fr}aside{border-right:0;border-bottom:1px solid var(--line);padding:24px 0}article{padding:36px 0}.login-card{padding:28px}.login-row,.sky-login-grid{grid-template-columns:1fr}.sky-login-grid img{width:min(260px,100%);height:auto}.player-dock{grid-template-columns:1fr 1fr}.player-dock>div{grid-column:1/-1}.player-overlay{padding:12px}.player-toolbar{align-items:flex-start;flex-direction:column}.player-actions{justify-content:flex-start}.player-grid{overflow:auto;grid-template-columns:1fr!important;grid-template-rows:none!important;grid-auto-rows:minmax(260px,60vh)} }