:root {
  color-scheme: dark;
  --bg: #0b1016;
  --sidebar: #0d131b;
  --surface: #121a23;
  --surface-raised: #17212c;
  --surface-input: #0d141c;
  --border: #202c38;
  --border-soft: #19242f;
  --text: #edf3f8;
  --muted: #8998a8;
  --quiet: #607081;
  --green: #46d6a2;
  --blue: #62aaff;
  --violet: #aa8bff;
  --amber: #f2bc62;
  --pink: #f380a7;
  --cyan: #4dc9d7;
  --red: #f16d79;
  --radius: 13px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.login-screen { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; padding: 24px; isolation: isolate; background: radial-gradient(ellipse at 50% 45%, #061b16 0, #07110f 38%, #050807 76%); }
.login-screen::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(#30ff9010 1px, transparent 1px), linear-gradient(90deg, #30ff900b 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, #000 10%, transparent 78%); content: ""; }
.matrix-rain { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; opacity: .43; pointer-events: none; }
.login-card { position: relative; width: min(430px, 100%); padding: 38px; border: 1px solid #49e98a42; border-radius: 18px; background: linear-gradient(150deg, #0d1714f2, #09100ff5); box-shadow: 0 30px 110px #000c, 0 0 45px #00e76512, inset 0 1px #a2ffc510; backdrop-filter: blur(15px); }
.login-card::before { position: absolute; top: -1px; right: 28px; left: 28px; height: 1px; background: linear-gradient(90deg, transparent, #55ff93b5, transparent); content: ""; }
.login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 27px; }
.login-brand-label { display: grid; gap: 4px; color: #dfffea; font-size: 13px; font-weight: 820; letter-spacing: .16em; }
.login-brand-label small { color: #50d981; font-size: 9px; font-weight: 680; letter-spacing: .2em; }
.login-eyebrow { color: #76bd8d; font-size: 9px; letter-spacing: .12em; }
.login-eyebrow span { color: #49e98a; }
.login-card h1 { margin-bottom: 7px; color: #f1fff5; font-size: 27px; letter-spacing: -.035em; }
.login-card > .muted { margin-bottom: 0; color: #9bb2a2; }
.login-card label { color: #c3d8c9; }
.login-card input { border-color: #274435; background: #08110c; }
.login-card input:focus { border-color: #43e883; box-shadow: 0 0 0 3px #43e88320; }
.login-card input:-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 1000px #08110c inset; }
.login-card .login-submit { display: flex; justify-content: space-between; align-items: center; border-color: #39db73; background: linear-gradient(135deg, #18a84c, #087c38); color: #f2fff5; font-weight: 760; letter-spacing: .08em; box-shadow: 0 8px 24px #0dbb4a25; }
.login-card .login-submit:hover { border-color: #75ffa1; background: linear-gradient(135deg, #1dc75a, #0c9142); box-shadow: 0 9px 28px #0dbb4a3b; }
.login-footnote { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 23px 0 0; color: #718c79; font-size: 10px; letter-spacing: .025em; }
.login-lock { color: #4bdb7d; }
.login-card .error { min-height: 0; margin: 0; color: #ff8890; }
.brand-mark.small { width: 38px; height: 38px; border-radius: 12px; font-size: 15px; }
@media (max-width: 480px) { .login-card { padding: 29px 24px; } .login-brand { margin-bottom: 23px; } }
@media (prefers-reduced-motion: reduce) { .matrix-rain { display: none; } }
.eyebrow { margin: 0 0 6px; color: #76899d; font-size: 10px; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.025em; }
h1 { margin-bottom: 4px; font-size: 23px; font-weight: 700; }
h2 { margin-bottom: 5px; font-size: 22px; }
h3 { margin-bottom: 0; font-size: 15px; font-weight: 650; }
.muted { color: var(--muted); }
.small-copy { font-size: 12px; }
.form-stack { display: grid; gap: 15px; margin-top: 25px; }
label { display: grid; gap: 7px; color: #b8c4d0; font-size: 12px; font-weight: 620; }
input, select { min-width: 0; height: 40px; padding: 0 11px; border: 1px solid #293746; border-radius: 8px; outline: 0; background: var(--surface-input); color: var(--text); }
input:focus, select:focus { border-color: #6489fa; box-shadow: 0 0 0 3px #6489fa1f; }
input::placeholder { color: #59697a; }
.error { min-height: 17px; margin: -5px 0 0; color: #ff8792; font-size: 12px; }
.button { min-height: 38px; padding: 8px 13px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; font-weight: 670; transition: background .15s, border-color .15s, transform .15s; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: #657bf0; color: #fff; box-shadow: 0 4px 12px #5168d92a; }
.button.primary:hover { background: #7487fa; }
.button.secondary { border-color: var(--border); background: #141e28; color: #d4e0ea; }
.button.secondary:hover { background: #1a2835; border-color: #334557; }
.button.danger { border-color: #68404a; background: #2c1d24; color: #f2a2ad; }
.button.danger:hover { border-color: #90515e; background: #3a232b; }
.full-width { width: 100%; }
.app-layout { min-height: 100vh; display: grid; grid-template-columns: 238px minmax(0, 1fr); }
.sidebar { height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; padding: 24px 14px 13px; border-right: 1px solid #1b2732; background: var(--sidebar); }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 0 35px 8px; color: var(--text); text-decoration: none; font-size: 16px; font-weight: 760; }
.brand-wordmark { display: block; color: #f3f7ff; font-size: 14px; font-weight: 820; letter-spacing: .075em; text-shadow: 0 0 18px #4db9ff35; }
.brand .brand-mark { border-color: #42648a; background: linear-gradient(145deg, #213b5a, #121f31); color: #9ce9ff; box-shadow: inset 0 0 14px #43b8ff1c, 0 0 18px #2476bc24; }
.brand-subtitle { display: block; margin-top: 2px; color: var(--quiet); font-size: 9px; font-weight: 700; letter-spacing: .17em; }
.sidebar-label { margin: 0 11px 9px; color: #586a7c; font-size: 9px; font-weight: 760; letter-spacing: .14em; }
.side-nav { display: grid; gap: 5px; }
.nav-item { min-height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 11px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #91a0af; text-align: left; font-size: 12px; font-weight: 590; white-space: nowrap; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.nav-item:hover { background: #141e28; color: #dbe5ef; }
.nav-item.active { border-color: #2b3b50; background: linear-gradient(90deg, #1c2a3a, #18232e); color: #fff; }
.nav-icon { width: 17px; color: #7c8e9e; text-align: center; font-size: 17px; }
.nav-item.active .nav-icon { color: #91a7ff; }
.nav-count { min-width: 20px; min-height: 20px; display: grid; place-items: center; margin-left: auto; border-radius: 7px; background: #1f3a39; color: var(--green); font-size: 10px; font-weight: 750; }
.sidebar-bottom { margin-top: auto; }
.server-indicator { display: flex; align-items: center; gap: 10px; padding: 12px 9px; border: 1px solid #20302f; border-radius: 9px; background: linear-gradient(120deg, #111e1e, #111a21); }
.server-indicator strong, .server-indicator small { display: block; }
.server-indicator strong { font-size: 11px; font-weight: 650; }
.server-indicator small { margin-top: 4px; color: #718579; font-size: 10px; }
.pulse { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px #46d6a218; }
.pulse.offline { background: var(--red); box-shadow: 0 0 0 4px #f16d7920; }
.profile { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 12px 4px 2px; border-top: 1px solid #1d2934; }
.avatar { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 1px solid #34455b; border-radius: 10px; background: #202e40; color: #b2c7ff; font-size: 13px; font-weight: 730; }
.avatar-live { border-color: #317860; background: #173b32; color: var(--green); }
.avatar .brand-play-icon { width: 76%; height: 76%; }
.profile-info { min-width: 0; flex: 1; }
.profile-info strong, .profile-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-info strong { font-size: 11px; }
.profile-info small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.sidebar-logout { display: flex; min-width: 66px; height: 34px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 1px solid #76513e; border-radius: 9px; background: linear-gradient(145deg, #34232a, #211a24); color: #f0c28c; font-size: 10px; font-weight: 720; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease; }
.sidebar-logout svg { width: 17px; height: 17px; }
.sidebar-logout:hover { transform: translateX(2px); border-color: #d19a6e; background: linear-gradient(145deg, #49303a, #2b202b); color: #ffe3bd; }
.sidebar-logout:focus-visible { outline: 2px solid #e2b375; outline-offset: 3px; }
.icon-button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #8999aa; font-size: 18px; }
.icon-button:hover { background: #1b2732; color: #fff; }
.workspace { width: min(1540px, 100%); min-width: 0; padding: 29px clamp(20px, 3vw, 46px) 14px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--border-soft); }
.topbar .eyebrow { margin-bottom: 7px; }
.topbar h1 { font-size: 23px; }
.topbar-actions { display: flex; align-items: center; gap: 13px; }
.notice { min-height: 18px; margin: 11px 0 4px; color: var(--green); font-size: 12px; }
.notice.bad { color: #ff8792; }
.welcome-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 15px 0 20px; }
.welcome-row h2 { font-size: 20px; }
.welcome-row p { margin-bottom: 0; font-size: 12px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 14px; }
.stat-card, .panel { position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg, #141e28, #111821); }
.stat-card { min-height: 138px; overflow: hidden; padding: 16px 17px 14px; }
.stat-icon, .panel-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; font-size: 16px; }
.stat-icon { float: right; }
.violet { background: #27243d; color: var(--violet); }
.amber { background: #3a3021; color: var(--amber); }
.green { background: #18352e; color: var(--green); }
.blue { background: #1b2e45; color: var(--blue); }
.pink { background: #3d2632; color: var(--pink); }
.cyan { background: #183438; color: var(--cyan); }
.stat-label { display: block; padding-top: 5px; color: #9baaba; font-size: 11px; font-weight: 580; }
.stat-number { display: block; margin-top: 12px; font-size: 25px; font-weight: 740; letter-spacing: -.04em; }
.stat-detail { display: block; margin-top: 3px; color: #728295; font-size: 10px; }
.card-pulse { width: 6px; height: 6px; position: absolute; top: 27px; right: 27px; border-radius: 50%; background: var(--green); }
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.panel { min-width: 0; padding: 17px; margin-bottom: 14px; }
.dashboard-grid .panel { min-height: 205px; margin-bottom: 0; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.panel-heading > div:first-child { display: flex; align-items: center; gap: 10px; }
.panel-heading .eyebrow { margin-bottom: 4px; font-size: 9px; }
.panel-heading h3 { font-size: 13px; }
.panel-value { color: var(--green); font-size: 15px; font-weight: 700; }
.progress-track { height: 8px; overflow: hidden; border-radius: 9px; background: #27323e; }
.progress-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6178eb, #4cd5a2); transition: width .4s ease; }
.storage-summary { display: flex; justify-content: space-between; gap: 14px; margin-top: 12px; color: #8090a0; font-size: 10px; }
.storage-summary strong { margin-left: 4px; color: #d7e1ea; font-size: 10px; }
.dot { width: 6px; height: 6px; display: inline-block; margin-right: 5px; border-radius: 50%; }
.used-dot { background: #7384f0; }
.free-dot { background: #4bd2a0; }
.subtle-divider { height: 1px; margin: 13px 0 7px; background: var(--border-soft); }
.root-list { display: grid; gap: 6px; }
.root-row { display: flex; justify-content: space-between; gap: 12px; color: #aab6c2; font-size: 10px; }
.root-name { color: #d6e0e9; }
.root-space { color: var(--muted); }
.live-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid #20503f; border-radius: 7px; color: var(--green); font-size: 9px; font-weight: 750; letter-spacing: .08em; }
.live-tag .pulse { width: 6px; height: 6px; flex-basis: 6px; box-shadow: none; }
.traffic-current { display: grid; gap: 3px; padding: 3px 0 12px; }
.traffic-current strong { font-size: 25px; font-weight: 730; letter-spacing: -.04em; }
.traffic-current span, .footnote { color: #768697; font-size: 10px; }
.traffic-stats { display: flex; gap: 33px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.traffic-stats span, .traffic-stats strong { display: block; }
.traffic-stats span { margin-bottom: 4px; color: #8191a2; font-size: 10px; }
.traffic-stats strong { color: #dce5ed; font-size: 12px; }
.footnote { margin: 12px 0 0; line-height: 1.5; }
.connection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.connection-card { min-width: 0; display: grid; grid-template-columns: 34px minmax(100px, .8fr) minmax(120px, 1.2fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border-soft); border-radius: 9px; background: #101821; }
.connection-info { min-width: 0; }
.connection-info strong, .connection-info span, .connection-playback span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection-info strong { margin-bottom: 4px; font-size: 11px; }
.connection-info span { color: var(--muted); font-size: 9px; }
.badge { width: fit-content; display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 6px; background: #202c39; color: #9daaba; font-size: 9px; font-weight: 700; white-space: nowrap; }
.badge.active { background: #19372e; color: var(--green); }
.badge.online { background: #1b2b41; color: #82b9ff; }
.badge.failed { background: #3a2026; color: #ff929b; }
.connection-playback .badge { margin-bottom: 4px; }
.playback-title { color: #d1dce6; font-size: 10px; }
.connection-time { color: #738396; font-size: 9px; white-space: nowrap; }
.text-button { padding: 4px 0; border: 0; background: none; color: #9bb3ff; font-size: 10px; font-weight: 620; }
.text-button:hover { color: #c4d0ff; }
.section-intro { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 12px 0; }
.section-intro p { margin: 0; font-size: 11px; }
.section-badge, .credit-chip, .unlimited-chip { padding: 7px 10px; border: 1px solid #263747; border-radius: 8px; background: #121d27; color: #aebdcb; font-size: 10px; white-space: nowrap; }
.credit-chip { border-color: #504128; background: #292419; color: var(--amber); }
.credit-chip strong { margin: 0 3px; color: #ffe3a8; font-size: 13px; }
.unlimited-chip { border-color: #264438; color: var(--green); }
.flush-panel { padding: 0; overflow: hidden; }
.panel-inset { margin: 0; padding: 16px 17px; border-bottom: 1px solid var(--border-soft); }
.user-form, .reseller-form { display: grid; grid-template-columns: 1.1fr 1.1fr .9fr .95fr .75fr auto; align-items: end; gap: 11px; }
.user-form label, .reseller-form label { font-size: 10px; }
.user-form input, .user-form select, .reseller-form input { height: 38px; font-size: 11px; }
.user-form .form-toggle { display: flex; align-items: center; gap: 8px; min-height: 38px; white-space: nowrap; }
.user-form .form-toggle input { width: 17px; height: 17px; margin: 0; accent-color: #657bf0; }
.panel:has(> .user-form), .panel:has(> .reseller-form) { padding: 17px; }
.table-scroll { overflow-x: auto; }
.m3u-account-url { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
th { padding: 10px 14px; color: #728395; font-size: 9px; font-weight: 690; letter-spacing: .07em; text-transform: uppercase; }
td { padding: 12px 14px; border-top: 1px solid var(--border-soft); color: #b9c5d0; font-size: 10px; }
td strong { display: block; color: #e1e8ee; font-size: 11px; font-weight: 630; }
.table-caption { display: block; max-width: 250px; overflow: hidden; margin-top: 4px; color: #738396; font-size: 9px; text-overflow: ellipsis; }
.device-count { color: #9cabc0; }
.tv-permission.enabled { border-color: #27523f; background: #172b24; color: #77dbac; }
.tv-control-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px; border: 1px solid var(--border-soft); border-radius: 9px; background: #101821; }
.tv-control-copy { min-width: 0; }
.tv-control-copy strong, .tv-control-copy small { display: block; }
.tv-control-copy strong { color: #e1e8ee; font-size: 12px; }
.tv-control-copy small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.tv-control-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.tv-enable-button { border-color: #27523f; background: #172b24; color: #77dbac; }
.tv-enable-button:hover, .tv-enable-button.selected { border-color: #38815e; background: #1d3a2e; }
.tv-disable-button { border-color: #51313b; background: #291b21; color: #f1919a; }
.tv-disable-button:hover, .tv-disable-button.selected { border-color: #8a404e; background: #40232a; }
.tv-control-actions .button:disabled { cursor: default; opacity: .72; transform: none; }
.tv-source-notice { margin: 13px 0 0; color: var(--amber); font-size: 10px; line-height: 1.5; }
.actions, .credit-actions { display: flex; align-items: center; gap: 5px; }
.mini-button { min-height: 27px; padding: 5px 8px; border: 1px solid #2a3948; border-radius: 6px; background: #18232e; color: #c1cfda; font-size: 9px; font-weight: 620; white-space: nowrap; }
.mini-button:hover { border-color: #566a7f; color: #fff; }
.mini-button.danger { border-color: #51313b; background: #291b21; color: #f1919a; }
.credit-add { border-color: #27523f; background: #172b24; color: #77dbac; }
.credit-number { color: var(--amber) !important; font-size: 14px !important; }
.credit-input { width: 70px; height: 28px; padding: 0 7px; font-size: 10px; }
.empty-state { padding: 27px 16px; color: #8292a2; text-align: center; font-size: 11px; }
.search-input { width: 190px; height: 34px; font-size: 10px; }
.library-filters { display: flex; gap: 8px; }
.library-filters select { height: 34px; font-size: 10px; }
.library-list { display: grid; gap: 8px; padding: 13px; }
.download-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin: 0 0 14px; }
.downloads-retry-all { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 15px; border-bottom: 1px solid var(--border-soft); background: #111a24; }
.downloads-retry-all > div { display: grid; gap: 4px; }
.downloads-retry-all strong { color: #e8eef4; font-size: 11px; }
.downloads-retry-all span { color: #8c9cac; font-size: 10px; }
.downloads-retry-all .button { min-height: 34px; padding: 7px 11px; font-size: 10px; white-space: nowrap; }
.downloads-retry-all .button:disabled { cursor: default; opacity: .5; transform: none; }
.download-row .m3u-details { align-self: center; }
.download-updated { margin-top: 4px; color: #718194; font-size: 9px; }
.downloads-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 13px 13px; font-size: 10px; }
.downloads-pagination > div { display: flex; gap: 7px; }
.downloads-pagination .button { min-height: 31px; padding: 6px 9px; font-size: 10px; }
.downloads-pagination .button:disabled { cursor: default; opacity: .45; transform: none; }
.media-row { display: grid; grid-template-columns: 48px minmax(160px, 1fr) 80px auto; align-items: center; gap: 11px; padding: 8px; border: 1px solid var(--border-soft); border-radius: 9px; background: #101821; }
.m3u-category-tabs { display: flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 8px; background: #0d141c; }
.m3u-category { min-height: 28px; padding: 5px 9px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #91a0af; font-size: 10px; font-weight: 620; white-space: nowrap; }
.m3u-category:hover { color: #e8eef4; }
.m3u-category.active { border-color: #334964; background: #1a2a3b; color: #dce8ff; }
.m3u-import-form { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: 12px; }
.m3u-import-form .button { min-height: 40px; }
.m3u-import-form .button:disabled, .m3u-actions .button:disabled { cursor: wait; opacity: .65; transform: none; }
.m3u-loaded-playlists { display: grid; gap: 9px; margin-top: 16px; padding: 12px; border: 1px solid var(--border-soft); border-radius: 9px; background: #101821; }
.m3u-loaded-playlists-heading, .m3u-loaded-playlist-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.m3u-loaded-playlists-heading .eyebrow { margin-bottom: 4px; font-size: 9px; }
.m3u-loaded-playlists-heading h4 { color: #e8eef4; font-size: 12px; }
.m3u-loaded-playlists-list { display: grid; gap: 7px; }
.m3u-loaded-playlist-row { min-width: 0; padding: 9px; border: 1px solid var(--border-soft); border-radius: 7px; background: #0d141c; }
.m3u-loaded-playlist-details { min-width: 0; display: grid; gap: 5px; }
.m3u-loaded-playlist-status { display: flex; align-items: center; gap: 6px; color: #78d9a9; font-size: 9px; font-weight: 650; }
.m3u-loaded-playlist-status::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.m3u-loaded-playlist-url { overflow: hidden; color: #c1cfda; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.m3u-loaded-playlist-meta { color: #8797a7; font-size: 9px; }
.m3u-loaded-playlist-row .button { min-height: 30px; padding: 5px 9px; font-size: 9px; white-space: nowrap; }
.m3u-loaded-playlist-row .button:disabled { cursor: wait; opacity: .55; }
.m3u-loaded-playlists-empty { color: #8797a7; font-size: 10px; }
.m3u-movie-import-form label { display: grid; gap: 7px; color: var(--text); font-size: 10px; }
.m3u-movie-import-form textarea { width: 100%; min-height: 104px; resize: vertical; padding: 10px 11px; border: 1px solid var(--border); border-radius: 8px; outline: 0; background: #0e151d; color: var(--text); font: inherit; font-size: 11px; line-height: 1.5; }
.m3u-movie-import-form textarea:focus { border-color: #526c87; box-shadow: 0 0 0 3px #526c8724; }
.m3u-stream-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; padding: 13px; }
.m3u-stream-list { display: grid; gap: 8px; padding: 13px; }
.m3u-playlist-list { display: grid; gap: 10px; padding: 13px; }
.proxy-stream-list { display: grid; gap: 8px; padding: 13px; }
.proxy-stream-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--border-soft); border-radius: 9px; background: #101821; }
.proxy-stream-details { min-width: 0; display: grid; gap: 5px; }
.proxy-stream-details strong { overflow: hidden; color: #e1e8ee; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.proxy-stream-meta { color: #9eacba; font-size: 10px; line-height: 1.5; }
.m3u-stream-card { position: relative; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--border-soft); border-radius: 10px; background: #101821; }
.m3u-stream-card > .m3u-select-checkbox { position: absolute; z-index: 1; top: 13px; left: 13px; width: 19px; height: 19px; }
.m3u-stream-poster { width: 100%; aspect-ratio: 2 / 3; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: #212c38; color: #8593a1; font-size: 9px; text-align: center; }
.m3u-stream-poster img { width: 100%; height: 100%; object-fit: cover; }
.m3u-stream-card-details { min-width: 0; display: grid; gap: 5px; }
.m3u-stream-title { overflow: hidden; color: #e1e8ee; font-size: 10px; line-height: 1.4; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.m3u-stream-card .m3u-category-tag { margin-top: 0; }
.m3u-stream-card > .badge { align-self: flex-start; }
.m3u-stream-list > .m3u-stream-card {
  display: grid;
  grid-template-columns: 20px 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px;
  border-radius: 9px;
}
.m3u-stream-list > .m3u-stream-card > .m3u-select-checkbox {
  position: static;
  width: 16px;
  height: 16px;
}
.m3u-stream-list > .m3u-stream-card > .m3u-stream-poster {
  width: 48px;
  height: 68px;
  aspect-ratio: auto;
}
.m3u-stream-list > .m3u-stream-card > .m3u-stream-card-details { min-width: 0; }
.m3u-stream-list > .m3u-stream-card > .badge { justify-self: end; }
.m3u-stream-list > .m3u-active-card > .m3u-active-actions { grid-column: 4; justify-self: end; }
.m3u-active-panel { margin-top: 15px; }
.m3u-active-panel .library-filters { flex-wrap: wrap; align-items: center; }
.m3u-active-actions { display: grid; gap: 6px; }
.m3u-page-controls { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 13px 16px; }
.m3u-page-controls .button { min-height: 34px; padding: 6px 12px; }
.m3u-page-controls .button:disabled { cursor: default; opacity: .5; }
.m3u-active-actions .mini-button { min-height: 31px; }
.m3u-selection-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px 0; }
.m3u-selection-actions, .m3u-selection-submit { display: flex; align-items: center; gap: 8px; }
.m3u-selection-tools .button { min-height: 32px; padding: 6px 10px; font-size: 10px; }
.m3u-selection-tools .button:disabled { cursor: default; opacity: .55; transform: none; }
.m3u-auto-retry { display: flex; align-items: center; gap: 7px; max-width: 290px; color: #9eacba; font-size: 10px; line-height: 1.4; cursor: pointer; }
.m3u-auto-retry input { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: #657bf0; }
.m3u-title-line { min-width: 0; display: flex; align-items: center; gap: 9px; }
.m3u-title-line .media-title { min-width: 0; }
.m3u-select-label { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; color: #9eacba; font-size: 9px; white-space: nowrap; }
.m3u-select-checkbox { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: #657bf0; cursor: pointer; }
.m3u-select-checkbox:disabled { cursor: default; opacity: .45; }
.m3u-series-group { overflow: hidden; border: 1px solid #273648; border-radius: 9px; background: #111a24; }
.m3u-series-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; background: #141e29; }
.m3u-series-poster { width: 42px; height: 60px; flex: 0 0 42px; border-radius: 5px; object-fit: cover; }
.m3u-series-heading details { min-width: 0; flex: 1; }
.m3u-series-heading summary { display: flex; min-height: 37px; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.m3u-series-heading summary::-webkit-details-marker { display: none; }
.m3u-series-title-block { min-width: 0; display: grid; gap: 4px; }
.m3u-series-title-block strong { overflow: hidden; color: #dfe8f1; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.m3u-series-count { color: #8292a2; font-size: 9px; }
.m3u-chevron { flex: 0 0 auto; color: #8ca6c4; font-size: 18px; transition: transform .15s; }
.m3u-series-card[open] .m3u-chevron { transform: rotate(180deg); }
.m3u-episode-list { display: none; gap: 6px; padding: 9px; border-top: 1px solid var(--border-soft); }
.m3u-series-card[open] .m3u-episode-list { display: grid; }
.m3u-row { display: grid; grid-template-columns: 48px minmax(180px, 1fr) 110px minmax(150px, auto); align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--border-soft); border-radius: 9px; background: #101821; }
.m3u-episode-row { grid-template-columns: 42px minmax(180px, 1fr) 100px minmax(130px, auto); padding: 8px 10px; background: #0e161f; }
.m3u-poster { width: 48px; height: 68px; }
.m3u-episode-row .m3u-poster { width: 42px; height: 60px; }
.m3u-details { min-width: 0; }
.m3u-category-tag { width: fit-content; max-width: 100%; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; margin-top: 6px; padding: 4px 8px; border: 1px solid #31465c; border-radius: 999px; background: linear-gradient(100deg, #192b3d, #17232f); color: #a9d9ff; font-size: 9px; font-weight: 650; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.m3u-category-icon { color: #70d4ff; font-size: 10px; }
.m3u-category-label { overflow: hidden; text-overflow: ellipsis; }
.m3u-series-title-block .m3u-category-tag { margin-top: 1px; }
.m3u-actions { display: flex; min-width: 150px; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; }
.m3u-progress { width: 100%; color: #9eacba; font-size: 9px; text-align: right; }
.m3u-progress .progress-track { height: 4px; margin-top: 5px; }
.m3u-progress .progress-fill { height: 100%; transition: width .3s ease; }
.m3u-saved-size { color: #85d9b2; font-size: 10px; }
.m3u-queued-text { color: #9cbaf1; font-size: 10px; }
.m3u-error { grid-column: 1 / -1; color: #f1919a; font-size: 10px; }
.footnote { margin: 12px 0 0; color: #7d8d9e; font-size: 10px; line-height: 1.5; }
.poster { width: 45px; height: 58px; overflow: hidden; display: grid; place-items: center; border-radius: 5px; background: #212c38; color: #718194; font-size: 8px; }
.poster img { width: 100%; height: 100%; object-fit: cover; }
.media-title { overflow: hidden; color: #e1e8ed; font-size: 11px; font-weight: 630; text-overflow: ellipsis; white-space: nowrap; }
.media-subtitle { margin-top: 4px; color: #8494a4; font-size: 9px; }
.platform-select { width: min(100%, 220px); height: 30px; margin-top: 7px; font-size: 10px; }
.platform-groups { display: grid; gap: 16px; padding: 16px; }
.platform-group { padding: 16px; border: 1px solid var(--border-soft); border-radius: 12px; background: #101821; }
.platform-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
.platform-group-heading h4 { margin: 0; color: var(--text); font-size: 16px; }
.platform-kind-heading { margin: 15px 0 8px; color: #9ba9b7; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.platform-media-row { display: grid; grid-template-columns: 58px minmax(120px, 1fr) 100px minmax(155px, 220px); align-items: center; gap: 10px; min-height: 42px; padding: 6px 0; border-bottom: 1px solid #202b36; }
.platform-media-row:last-child { border-bottom: 0; }
.platform-media-kind { color: #a5b3c1; font-size: 9px; font-weight: 700; letter-spacing: .06em; }
.platform-media-title { overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.platform-media-count, .platform-media-assignment { color: #8998a7; font-size: 10px; }
.platform-media-row select { width: 100%; height: 32px; font-size: 10px; }
.transaction-list { display: grid; }
.transaction-row { display: grid; grid-template-columns: 45px minmax(120px, 1fr) 90px 150px; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border-soft); font-size: 10px; }
.transaction-amount { font-weight: 750; }
.transaction-amount.positive { color: var(--green); }
.transaction-amount.negative { color: var(--red); }
.transaction-note { color: #c8d3dd; }
.transaction-balance, .transaction-date { color: #8493a1; }
.workspace-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 0 8px; color: #566577; font-size: 9px; }
.workspace-footer .button { min-height: 31px; padding: 5px 10px; font-size: 10px; }
@media (prefers-reduced-motion: reduce) {
  .sidebar-logout { transition: none; }
  .sidebar-logout:hover { transform: none; }
}

@media (min-width: 1500px) {
  .stats-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .app-layout { grid-template-columns: 205px minmax(0, 1fr); }
  .connection-card { grid-template-columns: 34px minmax(90px, 1fr) minmax(115px, 1.2fr); }
  .connection-time { display: none; }
  .user-form, .reseller-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .app-layout { display: block; }
  .sidebar { width: 100%; height: auto; position: relative; padding: 11px 13px 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .brand { margin: 0 0 10px 3px; }
  .sidebar-label { display: none; }
  .sidebar-bottom { display: block; padding: 0 3px 8px; }
  .profile { margin-top: 0; padding: 8px 4px 4px; }
  .side-nav { display: flex; overflow-x: auto; gap: 6px; padding: 2px 1px 9px; scrollbar-width: thin; }
  .nav-item { min-height: 37px; flex: 0 0 auto; gap: 7px; padding: 0 10px; border-color: #28232d; border-radius: 9px; background: #17151b; font-size: 10px; }
  .nav-item.active { border-color: #664653; background: linear-gradient(105deg, #3b2632, #261d29); }
  .nav-icon { font-size: 14px; }
  .workspace { padding: 20px 16px 12px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-grid .panel { min-height: 175px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download-stats { grid-template-columns: 1fr; gap: 8px; }
  .download-stats .stat-card { min-height: 100px; }
  .connection-grid { grid-template-columns: 1fr; }
  .connection-card { grid-template-columns: 34px minmax(85px, .8fr) minmax(100px, 1.2fr) auto; }
  .connection-time { display: block; }
  .tv-control-row { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
  .login-card { padding: 27px 22px; }
  .workspace { padding: 16px 11px 8px; }
  .topbar { align-items: flex-end; }
  .topbar h1 { font-size: 18px; }
  .topbar-actions { flex-direction: column; align-items: flex-end; gap: 5px; }
  .topbar-actions .button { min-height: 32px; padding: 5px 8px; }
  .welcome-row { align-items: flex-start; }
  .welcome-row h2 { font-size: 17px; }
  .welcome-row .button { max-width: 130px; font-size: 10px; }
  .stat-card { min-height: 120px; padding: 12px; }
  .stat-number { font-size: 21px; }
  .stat-icon { width: 27px; height: 27px; }
  .panel { padding: 13px; }
  .panel:has(> .user-form), .panel:has(> .reseller-form) { padding: 13px; }
  .panel-inset { padding: 13px; }
  .user-form, .reseller-form { grid-template-columns: 1fr; }
  .credit-chip, .unlimited-chip { font-size: 8px; }
  .search-input { width: 120px; }
  .connection-card { grid-template-columns: 31px minmax(75px, .8fr) minmax(80px, 1.2fr); gap: 7px; padding: 8px; }
  .connection-time { display: none; }
  .connection-info span { max-width: 110px; }
  .playback-title { max-width: 130px; }
  .library-filters { width: 100%; }
  .library-filters select { flex: 0 0 115px; }
  .library-filters .search-input { width: 100%; }
  .panel-inset:has(.library-filters) { align-items: flex-start; flex-direction: column; }
  .panel-inset .library-filters { flex-wrap: wrap; }
  .m3u-loaded-playlist-row { align-items: flex-start; }
  .downloads-pagination { align-items: flex-start; flex-direction: column; }
  .downloads-retry-all { align-items: flex-start; flex-direction: column; }
  .m3u-category-tabs { max-width: 100%; }
  .m3u-category { padding-inline: 7px; font-size: 9px; }
  .m3u-selection-tools { align-items: flex-start; flex-direction: column; }
  .m3u-selection-actions, .m3u-selection-submit { width: 100%; flex-wrap: wrap; justify-content: space-between; }
  .m3u-auto-retry { max-width: 100%; }
  .m3u-selection-tools .button { padding-inline: 8px; font-size: 9px; }
  .m3u-series-heading > .m3u-select-label { align-self: flex-start; }
  .m3u-import-form { grid-template-columns: 1fr; }
  .m3u-stream-grid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 8px; padding: 9px; }
  .m3u-stream-list { gap: 7px; padding: 9px; }
  .m3u-stream-list > .m3u-stream-card { grid-template-columns: 18px 38px minmax(0, 1fr); gap: 8px; padding: 7px; }
  .m3u-stream-list > .m3u-stream-card > .m3u-stream-poster { width: 38px; height: 54px; grid-row: 1 / span 2; }
  .m3u-stream-list > .m3u-stream-card > .badge,
  .m3u-stream-list > .m3u-active-card > .m3u-active-actions { grid-column: 3; justify-self: start; }
  .m3u-page-controls { flex-wrap: wrap; gap: 8px; }
  .m3u-stream-card { gap: 6px; padding: 6px; }
  .m3u-stream-card > .m3u-select-checkbox { top: 10px; left: 10px; }
  .m3u-row, .m3u-episode-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 7px; }
  .m3u-poster, .m3u-episode-row .m3u-poster { width: 38px; height: 54px; grid-row: 1 / span 2; }
  .m3u-series-heading { align-items: flex-start; flex-direction: column; }
  .m3u-series-heading details { width: 100%; }
  .m3u-series-heading > .mini-button { align-self: flex-start; }
  .m3u-row > .badge { grid-column: 3; grid-row: 1; }
  .m3u-actions { grid-column: 2 / -1; justify-content: flex-start; }
  .m3u-progress { text-align: left; }
  .media-row { grid-template-columns: 41px minmax(90px, 1fr) auto; gap: 7px; }
  .poster { width: 38px; height: 49px; }
  .media-row > .badge { display: none; }
  .media-row .actions { flex-wrap: wrap; justify-content: flex-end; }
  .media-row .mini-button { padding: 5px 6px; font-size: 8px; }
  .platform-groups { padding: 8px; }
  .platform-group { padding: 10px; }
  .platform-group-heading { align-items: flex-start; flex-direction: column; }
  .platform-media-row { grid-template-columns: 40px minmax(80px, 1fr) 74px; gap: 6px; }
  .platform-media-row select, .platform-media-assignment { grid-column: 2 / -1; }
  .transaction-row { grid-template-columns: 35px minmax(80px, 1fr) 65px; }
  .transaction-date { display: none; }
  .workspace-footer { font-size: 8px; }
}

/* Refined administration workspace */
:root {
  --bg: #0b0f16;
  --sidebar: #0d131d;
  --surface: #121a25;
  --surface-raised: #182332;
  --border: #263343;
  --border-soft: #202b39;
  --text: #f2f5fa;
  --muted: #9aa8b8;
  --quiet: #758497;
}

.app-layout { grid-template-columns: 252px minmax(0, 1fr); background: radial-gradient(ellipse at 78% 0, #19283a55, transparent 34%), var(--bg); }
.sidebar { padding: 27px 16px 17px; border-color: #202b39; background: rgba(12, 18, 27, .96); }
.brand { gap: 12px; margin: 0 0 42px 8px; }
.brand .brand-mark { width: 40px; height: 40px; border: 1px solid #42648a; border-radius: 13px; }
.brand-wordmark { font-size: 13px; letter-spacing: .09em; }
.sidebar-label { margin-bottom: 11px; color: #78879a; }
.side-nav { gap: 5px; }
.nav-item { min-height: 44px; padding-inline: 12px; border-radius: 10px; font-size: 13px; }
.nav-item.active { border-color: #31445c; background: linear-gradient(100deg, #20334a, #182534); box-shadow: inset 3px 0 #84a5ff; }
.nav-item.active .nav-icon { color: #a7c0ff; }
.server-indicator { padding: 13px 10px; border-color: #244334; background: linear-gradient(120deg, #12241f, #111a22); }
.server-indicator strong { font-size: 12px; }
.server-indicator small { font-size: 11px; }
.profile { padding-top: 14px; }
.profile-info strong { font-size: 12px; }
.profile-info small { font-size: 11px; }
.workspace { width: min(1640px, 100%); padding: 33px clamp(24px, 4vw, 60px) 18px; }
.topbar { padding-bottom: 23px; border-color: #202b39; }
.topbar .eyebrow { color: #8b9bb0; }
.topbar h1 { font-size: 25px; font-weight: 720; letter-spacing: -.04em; }
.button { min-height: 40px; border-radius: 9px; font-size: 13px; }
.button.primary { background: linear-gradient(135deg, #6684f5, #536bd5); box-shadow: 0 7px 20px #536bd526; }
.button.primary:hover { background: linear-gradient(135deg, #7893ff, #647bea); }
.button.secondary { border-color: #2d3c4e; background: #17212d; }
.notice { margin-top: 14px; font-size: 13px; }
.welcome-row { margin: 20px 0 21px; }
.welcome-row .eyebrow { margin-bottom: 8px; color: #8ea5c3; }
.welcome-row h2 { margin-bottom: 7px; font-size: 25px; font-weight: 720; letter-spacing: -.045em; }
.welcome-row p.muted { font-size: 13px; }
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 16px; }
.stat-card, .panel { border-color: #273444; border-radius: 15px; background: linear-gradient(145deg, #151f2b, #111923); box-shadow: 0 12px 34px #00000012; }
.stat-card { min-height: 145px; padding: 18px 19px; }
.stat-icon { width: 35px; height: 35px; border: 1px solid #ffffff0d; border-radius: 11px; }
.stat-label { padding-top: 8px; color: #a7b4c3; font-size: 12px; }
.stat-number { margin-top: 13px; font-size: 27px; }
.stat-detail { margin-top: 5px; color: #8594a5; font-size: 11px; }
.dashboard-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; margin-bottom: 16px; }
.dashboard-grid .panel { min-height: 238px; }
.panel { padding: 20px; margin-bottom: 16px; }
.panel-heading { margin-bottom: 20px; }
.panel-heading > div:first-child { gap: 12px; }
.panel-icon { width: 36px; height: 36px; border: 1px solid #ffffff0d; border-radius: 11px; font-size: 17px; }
.panel-heading .eyebrow { color: #8c9db0; font-size: 10px; }
.panel-heading h3 { font-size: 15px; font-weight: 670; }
.panel-value { font-size: 17px; }
.progress-track { height: 10px; background: #293646; }
.progress-fill { background: linear-gradient(90deg, #7186fa, #4bd3a0); }
.storage-summary { margin-top: 14px; color: #9aa8b8; font-size: 11px; }
.storage-summary strong { color: #e3eaf2; font-size: 11px; }
.subtle-divider { margin: 16px 0 12px; }
.root-list { gap: 12px; max-height: 200px; overflow: auto; padding-right: 3px; }
.root-row { display: grid; grid-template-columns: minmax(100px, .75fr) minmax(180px, 1.25fr); align-items: center; gap: 12px; padding: 10px 11px; border: 1px solid #253343; border-radius: 10px; background: #0f1721; color: #aab7c6; font-size: 11px; }
.root-details, .root-usage { min-width: 0; display: grid; gap: 4px; }
.root-name { overflow: hidden; color: #e3eaf2; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.root-path { overflow: hidden; color: #8291a2; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.root-space { color: #a2afbd; font-size: 10px; }
.root-progress { height: 5px; overflow: hidden; border-radius: 99px; background: #293646; }
.root-progress-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7186fa, #4bd3a0); }
.live-tag { padding: 6px 9px; border-radius: 999px; font-size: 10px; }
.traffic-current { gap: 5px; padding: 9px 0 17px; }
.traffic-current strong { font-size: clamp(28px, 3vw, 38px); letter-spacing: -.05em; }
.traffic-current span, .footnote { color: #8998a9; font-size: 11px; }
.traffic-stats { justify-content: space-between; gap: 20px; margin-top: 9px; padding-top: 16px; }
.traffic-stats span { color: #9aa8b8; font-size: 11px; }
.traffic-stats strong { font-size: 14px; }
.footnote { margin-top: 15px; }
.recent-panel { padding: 20px; }
.recent-movies { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.recent-movie { min-width: 0; overflow: hidden; border: 1px solid #263343; border-radius: 12px; background: #101821; transition: transform .18s ease, border-color .18s ease; }
.recent-movie:hover { transform: translateY(-2px); border-color: #455b77; }
.recent-movie-poster { height: 180px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at top, #27374c, #121a25 72%); color: #91a1b4; }
.recent-movie-poster img { width: 100%; height: 100%; object-fit: cover; }
.recent-movie-poster span { color: #8594a5; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-align: center; white-space: pre-line; }
.recent-movie-details { min-width: 0; display: grid; gap: 6px; padding: 12px; }
.recent-movie-title { overflow: hidden; color: #edf2f8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.recent-movie-meta, .recent-movie-date { color: #92a0b0; font-size: 10px; }
.recent-movie-date { color: #7f91a5; }
.connection-grid { gap: 10px; }
.connection-card { gap: 12px; padding: 12px; border-color: #263343; border-radius: 11px; background: #101821; }
.connection-info strong { font-size: 12px; }
.connection-info span, .connection-time { font-size: 10px; }
.playback-title { font-size: 11px; }
.section-intro { margin: 16px 0; }
.section-intro p { font-size: 13px; }
.section-badge, .credit-chip, .unlimited-chip { padding: 8px 11px; font-size: 11px; }
.panel-inset { padding: 18px 20px; }
.workspace-footer { padding-top: 20px; color: #718094; font-size: 10px; }

@media (min-width: 1500px) {
  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (max-width: 1100px) {
  .app-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .recent-movies { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .app-layout { display: block; }
  .sidebar { padding: 13px 14px 0; }
  .brand { margin: 0 0 11px 3px; }
  .nav-item { min-height: 38px; font-size: 11px; }
  .workspace { padding: 21px 17px 13px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-grid .panel { min-height: unset; }
  .recent-movies { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recent-movie-poster { height: 155px; }
}
@media (max-width: 520px) {
  .workspace { padding: 16px 12px 9px; }
  .topbar h1 { font-size: 20px; }
  .welcome-row { margin: 17px 0; }
  .welcome-row h2 { font-size: 21px; }
  .stats-grid { gap: 9px; }
  .stat-card { min-height: 122px; padding: 13px; }
  .stat-label { font-size: 11px; }
  .stat-number { font-size: 23px; }
  .stat-detail { font-size: 10px; }
  .panel, .recent-panel { padding: 15px; }
  .dashboard-grid .panel { min-height: 0; }
  .root-row { grid-template-columns: 1fr; gap: 9px; }
  .recent-movies { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .recent-movie-poster { height: 145px; }
  .recent-movie-details { padding: 10px; }
  .recent-movie-title { font-size: 11px; }
  .recent-movie-meta, .recent-movie-date { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .recent-movie { transition: none; }
  .recent-movie:hover { transform: none; }
}

/* TVSPAINZONE cinema dashboard */
:root {
  color-scheme: dark;
  --bg: #100d12;
  --sidebar: #120f16;
  --surface: #1a151d;
  --surface-raised: #241b26;
  --surface-input: #151119;
  --border: #382b39;
  --border-soft: #2b222e;
  --text: #f6f0f4;
  --muted: #b4a6b2;
  --quiet: #897b88;
  --green: #8bd1a2;
  --blue: #8ca9ed;
  --violet: #c39ade;
  --amber: #efc27d;
  --pink: #ec9cb4;
  --cyan: #9ac9cc;
}

body { background: radial-gradient(ellipse at 73% -10%, #592d3b40, transparent 37%), #100d12; }
.login-screen { background: radial-gradient(ellipse at 52% 45%, #412431 0, #1c151e 43%, #100d12 82%); }
.login-screen::before { background: linear-gradient(#e4b37b0b 1px, transparent 1px), linear-gradient(90deg, #e4b37b0b 1px, transparent 1px); }
.login-card { border-color: #81565b80; background: linear-gradient(150deg, #211820f5, #151118f8); box-shadow: 0 30px 110px #000b, 0 0 65px #b85e7420, inset 0 1px #f7dfbd10; }
.login-card::before { background: linear-gradient(90deg, transparent, #e5b77c, transparent); }
.login-brand-label { color: #fff5eb; }
.login-brand-label small { color: #d9ad82; }
.login-eyebrow { color: #c49b8d; }
.login-eyebrow span { color: #e7bd85; }
.login-card h1 { color: #fff7f0; }
.login-card > .muted { color: #b7a8ac; }
.login-card label { color: #d4c5c8; }
.login-card input { border-color: #49333d; background: #171117; }
.login-card input:focus { border-color: #d6a875; box-shadow: 0 0 0 3px #d6a87520; }
.login-card input:-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 1000px #171117 inset; }
.login-card .login-submit { border-color: #d5a879; background: linear-gradient(135deg, #9e5660, #743d50); box-shadow: 0 8px 24px #a34f5c30; }
.login-card .login-submit:hover { border-color: #f4d1a0; background: linear-gradient(135deg, #b96a70, #87475b); }
.login-lock { color: #dfb780; }
.brand { gap: 12px; margin-left: 5px; }
.brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 1px solid #a9755c;
  border-radius: 13px;
  background: linear-gradient(145deg, #72404a, #30202c);
  color: #f5d5a5;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .035em;
  box-shadow: inset 0 0 16px #efb98120, 0 5px 22px #d07d4d1a;
}
.brand-mark.small { width: 42px; height: 42px; border-radius: 13px; font-size: 13px; }
.brand-mark.small > span { display: block; line-height: 1; transform: translateX(.02em); }
.login-brand .brand-mark { width: 49px; height: 49px; flex-basis: 49px; border-radius: 15px; font-size: 15px; }
.brand-play-icon { width: 76%; height: 76%; filter: drop-shadow(0 3px 5px #05030988); transform-style: preserve-3d; animation: brand-play-float 3.8s ease-in-out infinite; transition: transform .4s ease; }
.brand:hover .brand-play-icon, .login-brand:hover .brand-play-icon { transform: perspective(130px) rotateY(-12deg) rotateX(7deg) scale(1.04); }
@keyframes brand-play-float {
  0%, 100% { transform: perspective(130px) rotateY(-5deg) translateY(0); }
  50% { transform: perspective(130px) rotateY(5deg) translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-play-icon { animation: none; }
  .brand:hover .brand-play-icon, .login-brand:hover .brand-play-icon { transform: none; }
}
.brand .brand-mark { border-color: #a9755c; background: linear-gradient(145deg, #72404a, #30202c); color: #f5d5a5; box-shadow: inset 0 0 16px #efb98120, 0 5px 22px #d07d4d1a; }
.brand-wordmark { color: #fff7ef; font-size: 13px; letter-spacing: .08em; text-shadow: none; }
.brand-subtitle { color: #c19c8a; letter-spacing: .18em; }
.sidebar { border-color: #322633; background: rgba(18, 15, 22, .97); }
.sidebar-label { color: #a38c98; }
.nav-item { color: #b5aab5; }
.nav-item:hover { background: #211922; color: #fff4ed; }
.nav-item.active { border-color: #5d3d49; background: linear-gradient(100deg, #3b2632, #261d29); box-shadow: inset 3px 0 #e2b375; color: #fff8f0; }
.nav-icon, .nav-item.active .nav-icon { color: #d4a779; }
.nav-count { background: #302331; color: #ecc38d; }
.server-indicator { border-color: #3d3730; background: linear-gradient(120deg, #211d1a, #19171b); }
.server-indicator small { color: #aa9885; }
.pulse { background: #8bd1a2; box-shadow: 0 0 0 4px #8bd1a21a; }
.workspace { width: min(1700px, 100%); padding: 30px clamp(22px, 3.4vw, 54px) 16px; }
.topbar { border-color: #302531; }
.topbar .eyebrow { color: #c39f82; }
.topbar h1 { font-size: 27px; letter-spacing: -.05em; }
.button.primary { background: linear-gradient(135deg, #b16b71, #844759); color: #fff8f2; box-shadow: 0 6px 20px #a34f5c2b; }
.button.primary:hover { background: linear-gradient(135deg, #c17b7c, #975468); }
.button.secondary { border-color: #493746; background: #211a24; color: #e4d7df; }
.button.secondary:hover { border-color: #6b4b5c; background: #2a202b; }
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; }
.stat-card, .panel { border-color: #382b39; background: linear-gradient(145deg, #211a24, #19151d); box-shadow: 0 12px 32px #0002; }
.stat-card { min-height: 132px; padding: 16px 17px; border-radius: 14px; }
.stat-icon, .panel-icon { border: 1px solid #ffffff0c; }
.violet { background: #342538; color: #d6a9dc; }
.amber { background: #382d23; color: #efc27d; }
.green { background: #203329; color: #9bd5a7; }
.blue { background: #232c3b; color: #a1baf0; }
.pink { background: #3c2630; color: #efa2b5; }
.cyan { background: #233435; color: #a3d3ce; }
.stat-label { color: #c3b5c1; font-size: 11px; }
.stat-number { color: #fff4ee; font-size: 26px; }
.stat-detail { color: #9d8d9d; font-size: 10px; }
.dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 14px; }
.dashboard-grid .panel { min-height: 0; border-radius: 15px; }
.panel { padding: 19px; border-radius: 15px; }
.panel-heading h3 { color: #f6edf1; font-size: 14px; }
.panel-heading .eyebrow { color: #b79b91; }
.panel-value { color: #efc27d; }
.progress-track, .root-progress { background: #392e3a; }
.progress-fill, .root-progress-fill { background: linear-gradient(90deg, #a96c91, #e7bd7e); }
.storage-summary { color: #b9aeb9; }
.storage-summary strong { color: #f0e5e9; }
.root-row { border-color: #382b39; background: #17131a; }
.root-row-offline { border-color: #624047; background: #261b21; }
.storage-offline { color: #f09ba3; font-size: 10px; line-height: 1.5; }
.root-name { color: #f1e8ed; }
.root-path, .root-space { color: #b09eac; }
.live-tag { border-color: #496148; background: #1b261e; color: #b6d6a6; }
.traffic-current strong { color: #f4e2cc; }
.traffic-current span, .traffic-stats span, .footnote { color: #b09eac; }
.traffic-stats { border-color: #382b39; }
.traffic-stats strong { color: #f2e7ec; }
.traffic-chart-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 1px 0 4px; color: #d8c9d2; font-size: 10px; font-weight: 650; }
.traffic-chart-heading span:last-child { color: #a58f9f; font-size: 9px; font-weight: 500; }
.bandwidth-chart { width: 100%; height: 116px; overflow: visible; }
.chart-gridline { stroke: #463744; stroke-width: 1; stroke-dasharray: 3 5; }
.chart-area { fill: #e9bb7c20; }
.chart-line { fill: none; stroke: #e9bb7c; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1200; animation: chart-trace 1.1s ease-out both; }
.chart-point { fill: #f4d19a; stroke: #46313b; stroke-width: 3; animation: chart-pulse 2.4s ease-in-out infinite; }
.resource-panel { margin: 0 0 14px; border-color: #332a3a; background: radial-gradient(ellipse at 8% 0%, #3b2c3d55, transparent 48%), #151219; }
.resource-panel .panel-heading { margin-bottom: 18px; }
.resource-updated { color: #a894a9; font-size: 10px; }
.resource-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.resource-metric { min-width: 0; min-height: 118px; padding: 20px; border: 1px solid #392f3d; border-radius: 12px; background: #19151d; }
.resource-metric-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: #d4c6d4; font-size: 14px; }
.resource-metric-heading strong { color: #fff7fb; font-size: 22px; font-variant-numeric: tabular-nums; }
.resource-track { height: 6px; margin: 10px 0 8px; overflow: hidden; border-radius: 999px; background: #312837; }
.resource-fill { height: 100%; width: 0; border-radius: inherit; transition: width .45s ease; }
.cpu-fill { background: linear-gradient(90deg, #9571f5, #c5a2ff); }
.memory-fill { background: linear-gradient(90deg, #3baeb2, #76e0d5); }
.resource-metric small { display: block; min-height: 17px; overflow: hidden; color: #ad9fb0; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.resource-chart-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 3px; color: #d8c9d2; font-size: 10px; font-weight: 650; }
.resource-chart-heading > span:last-child { color: #a58f9f; font-size: 9px; font-weight: 500; }
.resource-legend { display: flex; align-items: center; gap: 6px; }
.resource-legend i { width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; }
.resource-legend i:first-child { margin-left: 0; }
.legend-cpu { background: #b99aff; }
.legend-memory { background: #65d9d0; }
.resource-chart { width: 100%; height: 150px; overflow: visible; }
.resource-gridline { stroke: #443747; stroke-width: 1; stroke-dasharray: 3 5; }
.resource-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1200; animation: chart-trace 1.1s ease-out both; }
.resource-line-cpu { stroke: #b99aff; }
.resource-line-memory { stroke: #65d9d0; }
@keyframes chart-trace { from { stroke-dashoffset: 1200; opacity: .35; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes chart-pulse { 0%, 100% { filter: drop-shadow(0 0 0 #f4d19a00); } 50% { filter: drop-shadow(0 0 6px #f4d19a9c); } }
.resource-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 10px; padding: 15px 0 2px; border-top: 1px solid #392f3d; color: #b9aabc; font-size: 12px; }
.resource-summary span { min-height: 60px; padding: 11px 13px; border: 1px solid #392f3d; border-radius: 9px; background: #19151d; }
.resource-summary strong { display: block; margin-top: 6px; color: #fff1f8; font-size: 15px; font-variant-numeric: tabular-nums; }
.recent-panel { padding: 20px; }
.recent-movies { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 14px; }
.recent-movie { border-color: #382b39; border-radius: 12px; background: #17131a; }
.recent-movie:hover { border-color: #a16b69; box-shadow: 0 10px 28px #0004; }
.recent-movie-poster { position: relative; height: 224px; background: linear-gradient(145deg, #4d303d, #211b26 70%); }
.recent-movie-poster::after { position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, #100d12aa); content: ""; pointer-events: none; }
.recent-movie-poster img { transition: transform .4s ease; }
.recent-movie:hover .recent-movie-poster img { transform: scale(1.045); }
.recent-poster-placeholder { z-index: 1; display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid #e1b77d88; border-radius: 50%; color: #edc78e !important; font-size: 9px !important; letter-spacing: .08em; }
.recent-movie-details { gap: 6px; padding: 12px; }
.recent-movie-title { color: #f6eef2; font-size: 12px; }
.recent-movie-meta, .recent-movie-date { color: #ae9eab; font-size: 10px; }
.recent-movie-episode { overflow: hidden; color: #ddc6d0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.recent-movie-hidden { width: fit-content; padding: 4px 6px; border-radius: 5px; background: #392426; color: #f0a5a0; font-size: 8px; font-weight: 750; letter-spacing: .06em; }
.connection-card { border-color: #382b39; background: #17131a; }
.connection-info strong { color: #f4eaf0; }
.badge.active { background: #25352b; color: #b2d8ad; }
.badge.online { background: #282b3a; color: #b2c2ee; }
.text-button { color: #e8b97c; font-size: 11px; }
.text-button:hover { color: #ffdda9; }
.section-badge, .credit-chip, .unlimited-chip { border-color: #493746; background: #211a24; color: #d1c2cf; }
.empty-state { color: #ad9ca9; }
.workspace-footer { color: #8e7c8d; }
.announcement-editor { max-width: 860px; }
.announcement-form { display: grid; gap: 10px; }
.announcement-form label { color: #e6dce4; }
.announcement-form textarea {
  width: 100%;
  min-height: 170px;
  resize: vertical;
  padding: 12px;
  border: 1px solid #493746;
  border-radius: 9px;
  outline: 0;
  background: #151119;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  line-height: 1.6;
}
.announcement-form textarea:focus { border-color: #b16b71; box-shadow: 0 0 0 3px #b16b7124; }
.announcement-form textarea::placeholder { color: #857583; }
.announcement-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.announcement-form-actions { display: flex; align-items: center; gap: 8px; }
.announcement-form-footer .muted { font-size: 10px; }
.announcement-list-panel { margin-top: 14px; }
.announcement-list { display: grid; gap: 10px; padding: 13px; }
.announcement-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px 16px;
  padding: 14px;
  border: 1px solid #493746;
  border-radius: 10px;
  background: #17131a;
}
.announcement-item-text {
  grid-column: 1;
  margin: 0;
  color: #f0dfc9;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.announcement-item-date { grid-column: 1; color: #a58f9f; font-size: 9px; }
.announcement-item-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 7px; }
.reseller-announcements { display: grid; gap: 10px; }
.storage-drive-tools { margin-top: 15px; padding-top: 14px; border-top: 1px solid #382b39; }
.storage-drive-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.storage-drive-heading strong { color: #f1e8ed; font-size: 11px; }
.storage-drive-tools > .footnote { margin: 8px 0 10px; }
.storage-drive-list { display: grid; gap: 7px; max-height: 180px; overflow: auto; }
.storage-drive-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 10px; padding: 9px 10px; border: 1px solid #382b39; border-radius: 8px; background: #17131a; }
.storage-drive-details, .storage-drive-space { min-width: 0; display: grid; gap: 4px; }
.storage-drive-details strong { overflow: hidden; color: #f1e8ed; font-size: 10px; text-overflow: ellipsis; }
.storage-drive-details span, .storage-drive-space span { color: #ae9eab; font-size: 9px; }
.storage-drive-space { justify-items: end; }
.storage-drive-space strong { color: #e7bd7e; font-size: 10px; }
.storage-drive-configured { grid-column: 1 / -1; color: #b6d6a6; font-size: 9px; }
.storage-drive-warning { grid-column: 1 / -1; color: #f09ba3 !important; font-size: 9px; }
.storage-drive-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin-top: 10px; }
.storage-drive-form label { min-width: 0; color: #c5b6c3; font-size: 9px; }
.storage-drive-form select { width: 100%; min-width: 0; height: 34px; font-size: 9px; }
.storage-drive-form .button { min-height: 34px; padding: 6px 9px; font-size: 9px; white-space: nowrap; }
.storage-drive-form .button:disabled { cursor: wait; opacity: .6; transform: none; }
.reseller-announcement {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #594532;
  border-radius: 10px;
  background: linear-gradient(120deg, #30261d, #211a20);
  color: #f0dfc9;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 520px) {
  .storage-drive-form { grid-template-columns: 1fr; }
  .storage-drive-form .button { width: 100%; white-space: normal; }
  .announcement-item { grid-template-columns: minmax(0, 1fr); }
  .announcement-item-actions { grid-column: 1; grid-row: auto; }
  .announcement-form-footer { align-items: flex-start; flex-direction: column; }
  .announcement-form-actions { width: 100%; justify-content: flex-end; }
}

@media (min-width: 1500px) {
  .recent-movies { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .recent-movies { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); }
  .recent-movie-poster { height: 200px; }
}
@media (max-width: 760px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .resource-metrics { grid-template-columns: 1fr; }
  .recent-movies { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
  .recent-movie-poster { height: 190px; }
}
@media (max-width: 520px) {
  .brand { margin-left: 2px; }
  .brand-mark.small { width: 37px; height: 37px; flex-basis: 37px; }
  .workspace { padding: 15px 11px 10px; }
  .topbar h1 { font-size: 21px; }
  .topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
  .topbar-actions #refresh { min-height: 34px; padding: 7px 9px; font-size: 10px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { min-height: 117px; }
  .dashboard-grid .panel, .panel, .recent-panel { padding: 14px; }
  .recent-movies { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .recent-movie-poster { height: 165px; }
  .recent-movie-details { padding: 9px; }
  .recent-movie-title { font-size: 11px; }
  .recent-movie-meta, .recent-movie-date, .recent-movie-episode { font-size: 9px; }
  .bandwidth-chart { height: 95px; }
}
@media (prefers-reduced-motion: reduce) {
  .chart-line, .chart-point, .resource-line { animation: none; }
  .recent-movie-poster img { transition: none; }
  .recent-movie:hover .recent-movie-poster img { transform: none; }
}

.workspace {
  background:
    radial-gradient(ellipse at 72% 0%, #421b2b45, transparent 42%),
    radial-gradient(ellipse at 6% 38%, #16121d, transparent 44%),
    linear-gradient(180deg, #09080b, #100c11 58%, #0b090d);
}
.page-section[data-section="overview"] {
  max-width: 1480px;
  margin-inline: auto;
  padding: clamp(13px, 2vw, 26px);
  border: 1px solid #35232d;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 82% 0%, #7a34351a, transparent 36%),
    linear-gradient(145deg, #0d0b0fef, #130e14f5 58%, #0c0a0df5);
  box-shadow: 0 24px 70px #0007, inset 0 1px #f1d7bd0b;
}
.dashboard-cinema-hero {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 30px clamp(20px, 4vw, 54px);
  border: 1px solid #67404a;
  border-radius: 18px;
  background:
    linear-gradient(100deg, #100c11 0%, #1c1119e8 47%, #371b27bb 100%),
    #110d12;
  box-shadow: inset 0 1px #f6dfd10c, 0 16px 40px #0005;
}
.dashboard-cinema-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(ellipse at 80% 54%, #d08c5a24, transparent 34%),
    linear-gradient(110deg, transparent 15%, #f0c28408 48%, transparent 78%);
  pointer-events: none;
}
.dashboard-cinema-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .16;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px, transparent 5px 8px);
  mask-image: linear-gradient(90deg, #000, transparent 70%);
  pointer-events: none;
}
.dashboard-cinema-copy { position: relative; z-index: 1; }
.dashboard-cinema-copy .eyebrow { margin-bottom: 11px; color: #d9aa78; font-size: 10px; font-weight: 750; letter-spacing: .2em; }
.dashboard-cinema-copy .eyebrow span { color: #f3d3a6; }
.dashboard-cinema-copy h2 { margin: 0; color: #fff3eb; font-size: clamp(25px, 3.2vw, 42px); font-weight: 760; line-height: 1.12; letter-spacing: -.055em; text-shadow: 0 4px 22px #0008; }
.dashboard-cinema-copy > p:last-child { margin: 12px 0 0; color: #c5aeb5; font-size: 13px; }
.cinema-reel-art {
  position: relative;
  z-index: 1;
  width: 150px;
  height: 150px;
  flex: 0 0 150px;
  display: grid;
  place-items: center;
  perspective: 700px;
  background: radial-gradient(ellipse, #d08c5a20, transparent 68%);
}
.cinema-reel-art::before, .cinema-reel-art::after { content: none; }
.cinema-reel-image {
  width: min(100%, 142px);
  height: auto;
  filter: drop-shadow(0 8px 16px #0009);
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.2, .75, .25, 1);
  animation: dashboard-emblem-float 3.2s ease-in-out infinite;
}
.cinema-reel-art:hover .cinema-reel-image {
  transform: rotateY(360deg) rotateX(10deg);
}
@keyframes dashboard-emblem-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}
.page-section[data-section="overview"] > #stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin: 0 auto 20px;
}
.page-section[data-section="overview"] .stat-card {
  min-height: 155px;
  padding: 21px 23px;
  border-color: #42303a;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 100% 0%, #d29a6812, transparent 40%),
    linear-gradient(145deg, #1d171f, #100e13);
  box-shadow: 0 13px 32px #0005, inset 0 1px #fff1;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.page-section[data-section="overview"] .stat-card:hover { transform: translateY(-3px); border-color: #87604f; box-shadow: 0 18px 36px #0007, 0 0 28px #a5574820; }
.page-section[data-section="overview"] .stat-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; }
.page-section[data-section="overview"] .stat-label { padding-top: 10px; color: #d5c5cf; font-size: 13px; }
.page-section[data-section="overview"] .stat-number { margin-top: 14px; color: #fff7f1; font-size: clamp(27px, 2.5vw, 34px); font-variant-numeric: tabular-nums; }
.page-section[data-section="overview"] .stat-detail { margin-top: 7px; color: #aa98a5; font-size: 11px; }
.page-section[data-section="overview"] .dashboard-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; margin-bottom: 18px; }
.page-section[data-section="overview"] .dashboard-grid > .panel,
.page-section[data-section="overview"] > .panel { border-color: #392a36; background: linear-gradient(145deg, #1b151e, #100e13); box-shadow: 0 14px 38px #0005; }
.library-usage-panel { min-height: 0 !important; }
.library-usage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.library-usage-card { min-width: 0; display: grid; gap: 11px; padding: 17px; border: 1px solid #3e303d; border-radius: 12px; background: linear-gradient(145deg, #211923, #151119); }
.library-usage-heading { display: flex; align-items: center; gap: 9px; color: #e4d8e1; font-size: 13px; }
.library-usage-icon { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #c39ade25; border-radius: 9px; background: #342538; color: #d6a9dc; }
.library-usage-size { overflow: hidden; color: #fff4ee; font-size: clamp(21px, 2vw, 28px); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.library-usage-detail { min-height: 30px; color: #ad9eaa; font-size: 10px; line-height: 1.5; }
.library-usage-track { height: 6px; overflow: hidden; border-radius: 99px; background: #362b39; }
.library-usage-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9c6389, #e7bd7e); transition: width .35s ease; }
.library-usage-panel > .footnote { margin-top: 15px; color: #a897a4; }
.disk-capacity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.disk-capacity-panel { min-width: 0; margin: 0; padding: 20px 22px; border-color: #473640; background: linear-gradient(115deg, #211922, #151219); }
.disk-capacity-track { height: 12px; overflow: hidden; margin: 17px 0 14px; border: 1px solid #44313e; border-radius: 99px; background: #100e13; }
.disk-capacity-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b638e, #d2a46e); box-shadow: 0 0 14px #b47c8344; transition: width .4s ease; }
.system-disk-fill { background: linear-gradient(90deg, #5c78a2, #72c6cc); box-shadow: 0 0 14px #72c6cc44; }
.disk-capacity-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.disk-capacity-values > div { display: grid; gap: 5px; }
.disk-capacity-values span { color: #ad9eaa; font-size: 10px; }
.disk-capacity-values strong { overflow: hidden; color: #fff4ee; font-size: clamp(16px, 2vw, 22px); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.disk-capacity-panel > .footnote { margin: 13px 0 0; color: #a897a4; }
.shared-disk-list { display: grid; gap: 7px; max-height: 150px; overflow-y: auto; margin-top: 13px; }
.shared-disk-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid #44313e; border-radius: 8px; background: #100e13; }
.shared-disk-name { min-width: 0; display: grid; gap: 4px; }
.shared-disk-name strong { overflow: hidden; color: #f3e9ef; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.shared-disk-name span, .shared-disk-space span { color: #a897a4; font-size: 9px; }
.shared-disk-space { flex: 0 0 auto; display: grid; justify-items: end; gap: 4px; }
.shared-disk-space strong { color: #e7bd7e; font-size: 10px; }
.shared-disk-empty { margin: 0; color: #a897a4; font-size: 10px; line-height: 1.5; }
.library-root-config { margin-bottom: 18px; }
.library-root-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .42fr) auto; align-items: end; gap: 10px; padding: 16px 20px 8px; }
.library-root-field { min-width: 0; display: grid; gap: 7px; }
.library-root-field label { color: #d9cbd5; font-size: 11px; }
.library-root-field input, .library-root-field select { min-width: 0; width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid #44313e; border-radius: 8px; background: #100e13; color: #f3e9ef; font: inherit; font-size: 11px; }
.library-root-form > .button { min-height: 40px; padding: 9px 14px; font-size: 11px; }
.library-root-config > .footnote { margin: 6px 20px 10px; line-height: 1.55; }
.library-source-roots { display: grid; padding: 0 20px 14px; }
.library-source-root { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid #44313e80; }
.library-source-root > div { min-width: 0; display: grid; gap: 4px; }
.library-source-root strong { color: #e8dce4; font-size: 11px; }
.library-source-root code { overflow-wrap: anywhere; color: #a897a4; font-size: 10px; }
.library-source-root-status { flex: 0 0 auto; color: #a897a4; font-size: 9px; }
.app-installations-panel, .app-security-events-panel { margin-bottom: 18px; }
.app-installations-panel td .table-caption, .app-security-events-panel td .table-caption { max-width: 240px; overflow-wrap: anywhere; }
.security-event-critical td { color: #ffc1c1; }
.page-section[data-section="overview"] .traffic-panel { min-height: 260px; }
.page-section[data-section="overview"] .resource-panel { margin-bottom: 18px; }

@media (max-width: 1000px) {
  .page-section[data-section="overview"] > #stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-section[data-section="overview"] .dashboard-grid { grid-template-columns: 1fr; }
  .disk-capacity-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .page-section[data-section="overview"] { padding: 10px; border-radius: 16px; }
  .dashboard-cinema-hero { min-height: 178px; padding: 21px 17px; }
  .dashboard-cinema-copy h2 { font-size: 25px; }
  .dashboard-cinema-copy > p:last-child { max-width: 250px; font-size: 11px; line-height: 1.5; }
  .cinema-reel-art { width: 90px; height: 90px; flex-basis: 90px; margin-right: -10px; }
  .cinema-reel-image { width: 82px; }
  .page-section[data-section="overview"] > #stats { gap: 9px; margin-bottom: 12px; }
  .page-section[data-section="overview"] .stat-card { min-height: 130px; padding: 13px; }
  .page-section[data-section="overview"] .stat-icon { width: 31px; height: 31px; border-radius: 9px; font-size: 15px; }
  .page-section[data-section="overview"] .stat-label { padding-top: 7px; font-size: 11px; }
  .page-section[data-section="overview"] .stat-number { margin-top: 12px; font-size: 23px; }
  .page-section[data-section="overview"] .stat-detail { font-size: 9px; line-height: 1.4; }
  .library-usage-grid { gap: 8px; }
  .library-usage-card { gap: 8px; padding: 11px; }
  .library-usage-heading { gap: 6px; font-size: 11px; }
  .library-usage-icon { width: 25px; height: 25px; }
  .library-usage-size { font-size: 19px; }
  .library-usage-detail { font-size: 9px; }
  .disk-capacity-panel { padding: 15px; }
  .disk-capacity-values { gap: 8px; }
  .disk-capacity-values span { font-size: 9px; }
  .disk-capacity-values strong { font-size: 15px; }
  .library-root-form { grid-template-columns: 1fr; padding-inline: 14px; }
  .library-root-config > .footnote { margin-inline: 14px; }
  .library-source-roots { padding-inline: 14px; }
  .library-source-root { align-items: flex-start; flex-direction: column; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-section[data-section="overview"] .stat-card,
  .library-usage-fill,
  .disk-capacity-fill { transition: none; }
  .page-section[data-section="overview"] .stat-card:hover { transform: none; }
  .cinema-reel-image { animation: none; transition: none; }
}

.page-section[data-section="overview"] { max-width: 1760px; padding: clamp(18px, 2.5vw, 34px); }
.dashboard-performance-grid > .panel { min-height: 390px; padding: clamp(20px, 2vw, 30px); }
.dashboard-performance-grid .resource-chart { min-height: 160px; }
.dashboard-performance-grid .bandwidth-chart { min-height: 170px; }
.page-section[data-section="overview"] .traffic-panel { min-height: 390px; }
.disk-capacity-grid { gap: 18px; }
.disk-capacity-panel { min-height: 300px; padding: clamp(20px, 2vw, 30px); }
.shared-storage-panel { display: flex; flex-direction: column; }
.shared-disk-list { max-height: none; overflow: visible; gap: 10px; }
.shared-disk-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(100px, .55fr) auto;
  align-items: center;
  gap: 16px;
  padding: 13px 14px;
  border-color: #50404a;
  background: linear-gradient(110deg, #1b151e, #120f15);
}
.shared-disk-name { gap: 6px; }
.shared-disk-name strong { font-size: 12px; }
.shared-disk-name span, .shared-disk-space span { font-size: 10px; }
.shared-disk-space strong { font-size: 12px; }
.shared-disk-track {
  height: 8px;
  overflow: hidden;
  border: 1px solid #463642;
  border-radius: 999px;
  background: #0e0b10;
}
.shared-disk-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #926487, #e9bb7f);
  box-shadow: 0 0 12px #d5a46c42;
  transition: width .45s ease;
}
.disk-activity-heading { margin-top: 20px; }
.disk-activity-list { gap: 9px; }
.library-usage-panel { min-height: 250px !important; padding: clamp(20px, 2vw, 30px); }
.library-usage-card { min-height: 158px; align-content: start; padding: 20px; }
.library-usage-detail { min-height: 34px; font-size: 11px; }
.library-usage-track { height: 8px; }
.page-section[data-section="overview"] > #stats { gap: 18px; }
.page-section[data-section="overview"] .stat-card { min-height: 165px; padding: 24px; }
.resource-metric { min-height: 110px; }
@media (max-width: 760px) {
  .page-section[data-section="overview"] { padding: 12px; }
  .dashboard-performance-grid > .panel, .disk-capacity-panel, .library-usage-panel { min-height: 0; padding: 17px; }
  .page-section[data-section="overview"] .stat-card { min-height: 140px; padding: 15px; }
  .library-usage-card { min-height: 140px; padding: 13px; }
  .shared-disk-item { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; }
  .shared-disk-track { grid-column: 1 / -1; grid-row: 2; }
  .shared-disk-space { grid-column: 2; grid-row: 1; }
}
@media (max-width: 420px) {
  .disk-capacity-values { grid-template-columns: 1fr 1fr; }
  .disk-capacity-values > div:last-child { grid-column: 1 / -1; }
  .shared-disk-item { grid-template-columns: 1fr; }
  .shared-disk-track, .shared-disk-space { grid-column: 1; grid-row: auto; }
  .shared-disk-space { justify-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .shared-disk-fill { transition: none; }
}

.login-screen {
  background:
    radial-gradient(ellipse at 18% 22%, #b651372b, transparent 34%),
    radial-gradient(ellipse at 82% 76%, #3974a72a, transparent 38%),
    radial-gradient(ellipse at 50% 46%, #241a20 0, #0c0c11 58%, #07090e 100%);
}
.login-screen::before {
  background:
    linear-gradient(120deg, transparent 20%, #f0bd7a0c 48%, transparent 74%),
    radial-gradient(ellipse at 50% 48%, transparent 10%, #02040acc 100%);
  mask-image: none;
}
.login-screen::after {
  position: absolute;
  z-index: -1;
  inset: -25%;
  background: conic-gradient(from 225deg at 50% 50%, transparent 0 30%, #bd644610 42%, transparent 55% 72%, #5a8bc016 83%, transparent 94%);
  animation: login-cinema-glow 18s ease-in-out infinite alternate;
  content: "";
  pointer-events: none;
}
.matrix-rain { opacity: .72; mix-blend-mode: screen; }
.login-card {
  width: min(470px, 100%);
  padding: clamp(30px, 5vw, 42px);
  border-color: #c18e6a57;
  background: linear-gradient(145deg, #19151af2, #0c1016f7 72%);
  box-shadow: 0 32px 120px #000c, 0 0 65px #cf83501a, inset 0 1px #ffe2c716;
}
.login-card::before {
  background: linear-gradient(90deg, transparent, #f4ce9bd9 38%, #83d4e6ad 68%, transparent);
}
.login-brand-label { color: #fff1e3; }
.login-brand-label small { color: #d8ad80; }
.login-eyebrow { color: #c7a58d; }
.login-eyebrow span, .login-lock { color: #e6b779; }
.login-card h1 { color: #fff5ed; }
.login-card > .muted { color: #c2b6b5; }
.login-card label { color: #e0d3d0; }
.login-card input { border-color: #55414a; background: #100e13; }
.login-card input:focus { border-color: #e0a96f; box-shadow: 0 0 0 3px #e0a96f24; }
.login-card input:-webkit-autofill { box-shadow: 0 0 0 1000px #100e13 inset; }
.login-card .login-submit {
  border-color: #cb986b;
  background: linear-gradient(115deg, #9c4f42, #bd754f 54%, #3d7481);
  box-shadow: 0 9px 28px #b25b4238;
}
.login-card .login-submit:hover {
  border-color: #f4d09b;
  background: linear-gradient(115deg, #b75a4a, #d38a5b 54%, #4d91a0);
}
.login-footnote { color: #a99799; }
.client-activity-tabs {
  display: flex;
  gap: 8px;
  margin: 16px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #352a34;
}
.client-activity-tab {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #342d37;
  border-radius: 9px;
  background: #15121a;
  color: #b4a8b0;
  font-size: 11px;
  font-weight: 650;
}
.client-activity-tab:hover { border-color: #765448; color: #fff0e1; }
.client-activity-tab.active {
  border-color: #a87455;
  background: linear-gradient(120deg, #38242a, #24202a);
  color: #ffe2c2;
  box-shadow: inset 0 1px #fff2;
}
.client-activity-tab:focus-visible { outline: 2px solid #e2b375; outline-offset: 2px; }
.disk-activity-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 8px;
  color: #e4d3c3;
  font-size: 10px;
}
.disk-activity-heading span { color: #a897a4; font-weight: 450; }
.disk-activity-list { display: grid; gap: 6px; }
.disk-activity-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #3e3039;
  border-radius: 8px;
  background: #151219;
}
.disk-activity-item > strong {
  overflow: hidden;
  color: #e9dce3;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.disk-activity-state {
  color: #a897a4;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .08em;
}
.disk-activity-state.reading { color: #62e0b0; }
.disk-activity-rate {
  min-width: 65px;
  color: #e7bd7e;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.app-installations-panel td .table-caption,
.app-security-events-panel td .table-caption { max-width: 360px; }
@keyframes login-cinema-glow {
  from { transform: rotate(-4deg) scale(.96); opacity: .62; }
  to { transform: rotate(5deg) scale(1.04); opacity: 1; }
}
@media (max-width: 600px) {
  .login-screen { padding: 15px; }
  .login-card { padding: 28px 23px; }
  .client-activity-tabs { overflow-x: auto; }
  .client-activity-tab { flex: 0 0 auto; }
  .disk-activity-item { gap: 7px; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-screen::after { animation: none; }
}

.permission-fieldset {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px 14px;
  min-width: 0;
  margin: 3px 0;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.permission-fieldset legend { padding: 0 6px; color: #d4c5c8; font-size: 11px; font-weight: 700; }
.permission-fieldset label, .permission-options label {
  display: grid;
  grid-template-columns: 17px auto;
  align-items: center;
  justify-content: start;
  gap: 4px 9px;
  color: #e6dce4;
  font-size: 11px;
  cursor: pointer;
}
.permission-fieldset input, .permission-options input { width: 16px; height: 16px; grid-row: span 2; margin: 0; accent-color: #bd866d; }
.permission-fieldset label span, .permission-options label span { color: var(--muted); font-size: 9px; font-weight: 450; }
.permissions-dialog {
  width: min(460px, calc(100% - 28px));
  padding: 0;
  border: 1px solid #5b4354;
  border-radius: 15px;
  background: #1a151d;
  color: var(--text);
  box-shadow: 0 25px 80px #0009;
}
.permissions-dialog::backdrop { background: #08060bcc; backdrop-filter: blur(4px); }
.permissions-dialog form { padding: 22px; }
.permissions-dialog h2 { margin-bottom: 6px; font-size: 21px; }
.permissions-dialog form > .muted { margin-bottom: 17px; font-size: 12px; }
.permission-options { display: grid; gap: 12px; padding: 15px; border: 1px solid var(--border); border-radius: 10px; background: #151119; }
.permission-options label { grid-template-columns: 18px 1fr; font-size: 12px; }
.permission-options label span { grid-column: 2; }
.permission-options input { grid-row: span 2; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.read-only-badge { border: 1px solid #514044; background: #282027; color: #d8c2b7; }
@media (max-width: 760px) {
  .permission-fieldset { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .permission-fieldset { grid-template-columns: 1fr; }
}

.dashboard-performance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: 14px;
  margin: 0 0 14px;
  align-items: stretch;
}
.dashboard-performance-grid > .panel {
  min-width: 0;
  margin: 0;
  border-color: #403244;
  background: radial-gradient(ellipse at 8% 0%, #49374a45, transparent 54%), linear-gradient(145deg, #211a24, #19151d);
  box-shadow: 0 14px 36px #0003;
}
.dashboard-performance-grid .panel-heading { min-height: 38px; }
.dashboard-performance-grid .resource-panel { display: flex; flex-direction: column; }
.dashboard-performance-grid .resource-chart { min-height: 118px; flex: 1; }
.dashboard-performance-grid .resource-summary { grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); }
.dashboard-performance-grid .resource-summary span { min-height: 54px; padding: 9px 10px; font-size: 10px; }
.dashboard-performance-grid .resource-summary strong { font-size: 13px; }
.dashboard-performance-grid .traffic-panel { display: flex; flex-direction: column; }
.dashboard-performance-grid .bandwidth-chart { min-height: 128px; flex: 1; }
.dashboard-grid { grid-template-columns: minmax(0, 1fr); }
.dashboard-grid .library-usage-panel { min-height: 0; }
.stats-grid { margin-bottom: 14px; }
@media (max-width: 1050px) {
  .dashboard-performance-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-performance-grid .resource-chart, .dashboard-performance-grid .bandwidth-chart { min-height: 105px; }
}
@media (max-width: 760px) {
  .dashboard-performance-grid { gap: 10px; margin-bottom: 10px; }
  .dashboard-performance-grid .panel-heading { align-items: flex-start; }
  .dashboard-performance-grid .resource-metrics { gap: 9px; }
  .dashboard-performance-grid .resource-metric { min-height: 96px; padding: 14px; }
  .dashboard-performance-grid .resource-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-performance-grid .resource-chart { min-height: 90px; height: 110px; }
  .dashboard-performance-grid .bandwidth-chart { min-height: 90px; height: 105px; }
  .dashboard-grid .panel { min-height: 0; }
}
@media (max-width: 520px) {
  .dashboard-performance-grid .resource-metrics { grid-template-columns: 1fr; }
  .dashboard-performance-grid .resource-metric { min-height: 80px; }
  .dashboard-performance-grid .resource-summary { grid-template-columns: 1fr 1fr; }
  .dashboard-performance-grid .resource-summary span { min-height: 48px; }
  .dashboard-performance-grid .traffic-current strong { font-size: 24px; }
}

.topbar-server-indicator { min-width: 174px; padding: 8px 11px; }
.topbar-server-indicator strong { font-size: 11px; }
.topbar-server-indicator small { font-size: 9px; }
.m3u-stream-select-all-note { color: var(--muted); font-size: 10px; }
@media (max-width: 760px) {
  .topbar-server-indicator { min-width: 0; }
}
@media (max-width: 520px) {
  .topbar-server-indicator { width: 100%; justify-content: flex-start; }
}

.side-nav .nav-item,
.side-nav .nav-item:hover,
.side-nav .nav-item:focus-visible {
  background-image: none;
}
.side-nav .nav-item::before,
.side-nav .nav-item::after,
.side-nav .nav-item:hover::before,
.side-nav .nav-item:hover::after {
  content: none;
}
.side-nav .nav-item img,
.side-nav .nav-item picture {
  display: none;
}

.process-matrix-panel {
  position: relative;
  overflow: hidden;
  margin: 0 0 18px;
  padding: clamp(20px, 2.2vw, 32px);
  border-color: #28574d;
  background:
    radial-gradient(ellipse at 92% 0%, #18d99e1c, transparent 38%),
    linear-gradient(145deg, #101b1b, #0d1217 62%, #141019);
  box-shadow: 0 18px 48px #0007, inset 0 1px #8ffff012;
}
.process-matrix-panel::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .22;
  background-image:
    linear-gradient(#45d8a50c 1px, transparent 1px),
    linear-gradient(90deg, #45d8a50c 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(115deg, #000, transparent 78%);
  pointer-events: none;
}
.process-matrix-panel::after {
  position: absolute;
  z-index: 0;
  top: -12%;
  right: 0;
  left: 0;
  height: 2px;
  content: "";
  opacity: .65;
  background: linear-gradient(90deg, transparent, #52f7ba, #52cfff, transparent);
  box-shadow: 0 0 15px #52f7ba80;
  animation: matrix-sweep 8s linear infinite;
  pointer-events: none;
}
@keyframes matrix-sweep {
  from { transform: translateY(0); }
  to { transform: translateY(520px); }
}
.process-matrix-heading,
.process-matrix-grid { position: relative; z-index: 1; }
.process-matrix-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.process-matrix-heading h3 { color: #eafff6; font-size: clamp(18px, 2vw, 23px); }
.process-matrix-heading .eyebrow { margin-bottom: 6px; color: #62d9b0; }
.process-matrix-caption { margin: 7px 0 0; color: #a5bdb5; font-size: 12px; line-height: 1.5; }
.process-matrix-status { display: grid; justify-items: end; gap: 7px; text-align: right; }
.process-matrix-live { display: inline-flex; align-items: center; gap: 7px; color: #69efb5; font-size: 10px; letter-spacing: .12em; }
.process-matrix-live .pulse { width: 7px; height: 7px; border-radius: 50%; background: #69efb5; box-shadow: 0 0 12px #69efb5; }
.process-matrix-countdown, .process-matrix-updated { color: #9db4ae; font-size: 10px; font-variant-numeric: tabular-nums; }
.process-matrix-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.process-matrix-cell {
  min-width: 0;
  min-height: 112px;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 15px;
  border: 1px solid #27463f;
  border-radius: 12px;
  background: linear-gradient(145deg, #12201dE8, #0d1418f2);
  box-shadow: inset 0 1px #8ffff009;
}
.process-matrix-cell > span { overflow: hidden; color: #adc5bb; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.process-matrix-cell > strong { overflow: hidden; color: #eafff5; font-size: clamp(18px, 1.7vw, 25px); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.process-matrix-cell > small { overflow: hidden; color: #86a199; font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.process-matrix-track { height: 6px; overflow: hidden; border-radius: 99px; background: #23332f; }
.process-matrix-track > i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2ebd8f, #63eac2, #7ecbff); box-shadow: 0 0 11px #5be8b277; transition: width .45s ease; }
.process-matrix-cell.is-warning { border-color: #b6854f; }
.process-matrix-cell.is-warning .process-matrix-track > i { background: linear-gradient(90deg, #bd8150, #ffd47f); }
.process-matrix-cell.is-critical { border-color: #a54e61; }
.process-matrix-cell.is-critical .process-matrix-track > i { background: linear-gradient(90deg, #a54e61, #ff828d); }
.process-matrix-live.is-warning { color: #ffd47f; }
.process-matrix-live.is-critical { color: #ff828d; }
@media (max-width: 1120px) { .process-matrix-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .process-matrix-panel { padding: 17px; }
  .process-matrix-heading { flex-direction: column; }
  .process-matrix-status { justify-items: start; text-align: left; }
  .process-matrix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .process-matrix-cell { min-height: 104px; padding: 12px; }
}
@media (max-width: 420px) {
  .process-matrix-grid { grid-template-columns: 1fr; }
  .process-matrix-cell { min-height: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .process-matrix-panel::after { animation: none; }
  .process-matrix-track > i { transition: none; }
}

.workspace { width: min(1840px, 100%); padding: 22px clamp(18px, 2.4vw, 38px) 20px; }
.page-section[data-section="overview"] {
  width: 100%;
  max-width: none;
  display: grid;
  gap: 15px;
  padding: clamp(14px, 1.7vw, 24px);
  border-color: #342a36;
  background:
    radial-gradient(ellipse at 82% 0%, #7a343512, transparent 36%),
    linear-gradient(145deg, #0d0b0ff5, #100d12f7 58%, #0b0a0ef7);
}
.dashboard-cinema-hero {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 13px 20px;
  margin: 0;
  padding: clamp(20px, 2.2vw, 32px);
  border-color: #67404a;
}
.dashboard-cinema-copy { grid-column: 1; grid-row: 1; }
.dashboard-cinema-copy h2 { font-size: clamp(27px, 3vw, 40px); }
.dashboard-cinema-copy h2 span { color: #e8bd91; }
.dashboard-cinema-copy > p:last-of-type { max-width: 650px; line-height: 1.55; }
.dashboard-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 15px; color: #b89e9e; font-size: 10px; }
.dashboard-clock { display: inline-flex; align-items: center; gap: 8px; color: #f0d2ae; font-variant-numeric: tabular-nums; text-transform: capitalize; }
.dashboard-clock i { width: 7px; height: 7px; border-radius: 50%; background: #e8bd91; box-shadow: 0 0 12px #e8bd9180; }
.dashboard-quick-actions { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dashboard-action {
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid #4a3740;
  background: #171219d9;
  color: #dccad0;
  text-align: left;
}
.dashboard-action:hover { border-color: #9b725e; background: #211820; }
.dashboard-action-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: #37242b; color: #e5b984; font-size: 14px; }
.dashboard-action > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.dashboard-action strong { overflow: hidden; color: #f6e8e4; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-action small { overflow: hidden; color: #9f8e99; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-action > span:last-child { color: #bb8b6b; font-size: 14px; }
.cinema-reel-art { grid-column: 2; grid-row: 1 / 3; width: 132px; height: 132px; justify-self: center; }
.cinema-reel-image { width: 118px; }
.page-section[data-section="overview"] > #stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin: 0;
}
.page-section[data-section="overview"] .stat-card {
  min-height: 112px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(145deg, #19151c, #100e13);
  box-shadow: inset 0 1px #fff1;
}
.page-section[data-section="overview"] .stat-card:hover { transform: translateY(-2px); }
.page-section[data-section="overview"] .stat-icon { width: 31px; height: 31px; border-radius: 9px; font-size: 15px; }
.page-section[data-section="overview"] .stat-label { padding-top: 3px; font-size: 11px; }
.page-section[data-section="overview"] .stat-number { margin-top: 8px; font-size: clamp(21px, 2vw, 27px); }
.page-section[data-section="overview"] .stat-detail { margin-top: 3px; font-size: 9px; line-height: 1.4; }
.dashboard-operations {
  min-width: 0;
  padding: 17px;
  border: 1px solid #342a36;
  border-radius: 14px;
  background: linear-gradient(145deg, #17131a, #100e13);
}
.dashboard-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dashboard-section-heading .eyebrow { margin-bottom: 4px; color: #be967f; font-size: 9px; }
.dashboard-section-heading h3 { color: #f1e7e5; font-size: 14px; }
.dashboard-overall-state { display: inline-flex; align-items: center; gap: 7px; color: #81dbad; font-size: 9px; font-weight: 720; letter-spacing: .07em; text-transform: uppercase; }
.dashboard-overall-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.dashboard-overall-state.is-warning { color: #ffc477; }
.dashboard-operations-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.operation-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 12px;
  border: 1px solid #302833;
  border-radius: 10px;
  background: #100e13;
}
.operation-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: #29212b; color: #c4a1b8; font-size: 14px; }
.operation-card > div { min-width: 0; display: grid; gap: 4px; }
.operation-card > div > span { color: #9e909f; font-size: 9px; }
.operation-card strong { overflow: hidden; color: #f0e9ec; font-size: 13px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.operation-card small { overflow: hidden; color: #827986; font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.operation-state { grid-column: 2; width: fit-content; padding: 3px 6px; border: 1px solid #344139; border-radius: 5px; color: #8ed7ad; font-size: 8px; font-style: normal; font-weight: 740; letter-spacing: .06em; }
.operation-card.is-warning .operation-icon { background: #392a20; color: #ffbe73; }
.operation-card.is-warning .operation-state { border-color: #745337; color: #ffc477; }
.operation-card.is-neutral .operation-icon { background: #27212b; color: #b49aaa; }
.operation-card.is-neutral .operation-state { border-color: #453a48; color: #b49aaa; }
.dashboard-attention { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 10px; margin-top: 10px; padding: 9px 11px; border: 1px solid #684631; border-radius: 8px; background: #271b17; color: #f6c88c; font-size: 10px; }
.dashboard-attention strong { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.dashboard-attention span { color: #d9b49a; }
.dashboard-performance-grid { gap: 12px; margin: 0; }
.dashboard-performance-grid > .panel { min-height: 0; padding: 18px; }
.dashboard-performance-grid .panel-heading { margin-bottom: 12px; }
.dashboard-performance-grid .resource-chart { min-height: 118px; max-height: 155px; flex: 0 1 155px; }
.dashboard-performance-grid .bandwidth-chart { min-height: 118px; max-height: 155px; flex: 0 1 155px; }
.dashboard-performance-grid .resource-metric { min-height: 74px; padding: 11px; }
.dashboard-performance-grid .resource-summary { gap: 7px; }
.dashboard-performance-grid .resource-summary span { min-height: 42px; padding: 7px 8px; }
.page-section[data-section="overview"] .traffic-panel { min-height: 0; }
.process-matrix-panel { margin: 0; padding: 18px; }
.process-matrix-heading { margin-bottom: 13px; }
.process-matrix-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.process-matrix-cell { min-height: 90px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 11px; }
.process-matrix-cell > span { grid-column: 1; }
.process-matrix-cell > strong { grid-column: 2; grid-row: 1; font-size: 18px; }
.process-matrix-cell > .process-matrix-track { grid-column: 1 / -1; grid-row: 2; }
.process-matrix-cell > small { grid-column: 1 / -1; }
.disk-capacity-grid { gap: 12px; margin: 0; }
.disk-capacity-panel { min-height: 0; padding: 17px; }
.disk-capacity-panel .panel-heading { margin-bottom: 12px; }
.shared-storage-panel .disk-activity-heading { margin-top: 12px; }
.page-section[data-section="overview"] .dashboard-grid { gap: 12px; margin: 0; }
.page-section[data-section="overview"] .library-usage-panel { min-height: 0 !important; padding: 17px; }
.page-section[data-section="overview"] .library-usage-card { min-height: 0; padding: 14px; }
.page-section[data-section="overview"] .recent-panel { margin: 0; }
@media (max-width: 1000px) {
  .dashboard-operations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-matrix-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .workspace { padding: 14px 12px; }
  .page-section[data-section="overview"] { gap: 11px; padding: 12px; }
  .dashboard-cinema-hero { grid-template-columns: minmax(0, 1fr) 76px; gap: 10px; padding: 18px 15px; }
  .dashboard-cinema-copy h2 { font-size: 25px; }
  .dashboard-cinema-copy > p:last-of-type { font-size: 11px; }
  .dashboard-hero-meta { gap: 7px; margin-top: 10px; font-size: 9px; }
  .cinema-reel-art { width: 76px; height: 76px; flex-basis: 76px; margin: 0; }
  .cinema-reel-image { width: 72px; }
  .dashboard-quick-actions { grid-column: 1 / -1; }
  .dashboard-action { grid-template-columns: 26px minmax(0, 1fr); gap: 7px; padding: 7px; }
  .dashboard-action > span:last-child { display: none; }
  .dashboard-action-icon { width: 25px; height: 25px; }
  .page-section[data-section="overview"] > #stats { gap: 8px; }
  .page-section[data-section="overview"] .stat-card { min-height: 100px; padding: 11px; }
  .page-section[data-section="overview"] .stat-number { font-size: 21px; }
  .dashboard-operations { padding: 13px; }
  .dashboard-performance-grid > .panel { padding: 15px; }
  .process-matrix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .dashboard-cinema-hero { grid-template-columns: minmax(0, 1fr) 54px; padding: 16px 12px; }
  .dashboard-cinema-copy h2 { font-size: 21px; }
  .dashboard-cinema-copy .eyebrow { font-size: 8px; letter-spacing: .12em; }
  .cinema-reel-art { width: 54px; height: 54px; }
  .cinema-reel-image { width: 54px; }
  .dashboard-quick-actions { grid-template-columns: 1fr; }
  .dashboard-action { min-height: 39px; grid-template-columns: 26px minmax(0, 1fr) auto; }
  .dashboard-action > span:last-child { display: inline; }
  .page-section[data-section="overview"] > #stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-operations-grid { grid-template-columns: 1fr; }
  .dashboard-section-heading { align-items: flex-start; flex-direction: column; }
  .process-matrix-grid { grid-template-columns: 1fr; }
  .process-matrix-heading { flex-direction: column; }
  .process-matrix-status { justify-items: start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-action, .page-section[data-section="overview"] .stat-card { transition: none; }
  .page-section[data-section="overview"] .stat-card:hover { transform: none; }
}

.page-section[data-section="overview"] { gap: 12px; }
.dashboard-command-bar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, .8fr) minmax(0, 1.8fr);
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  border: 1px solid #3d303b;
  border-radius: 12px;
  background: linear-gradient(100deg, #1a151c, #110f14);
}
.dashboard-command-title .eyebrow { margin-bottom: 4px; color: #c29b7f; font-size: 8px; }
.dashboard-command-title h2 { margin: 0 0 6px; color: #f5eae7; font-size: 18px; }
.dashboard-command-title > span { display: flex; align-items: center; gap: 8px; color: #a99ca6; font-size: 9px; }
.dashboard-command-title > span > strong { color: #dfc5ac; font-weight: 550; text-transform: capitalize; }
.dashboard-command-title > span > i { width: 3px; height: 3px; border-radius: 50%; background: #876f7b; }
.dashboard-quick-actions { grid-column: auto; grid-row: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dashboard-action {
  min-height: 33px;
  display: flex;
  justify-content: flex-start;
  gap: 7px;
  padding: 5px 8px;
  border-color: #302a35;
  border-radius: 7px;
  background: #141219;
  color: #c9bbc5;
  font-size: 9px;
  white-space: nowrap;
}
.dashboard-action > span { color: #d9ad81; font-size: 12px; }
.page-section[data-section="overview"] > #stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.page-section[data-section="overview"] .stat-card {
  min-height: 88px;
  padding: 10px 12px;
  border-color: #352d38;
  border-radius: 10px;
}
.page-section[data-section="overview"] .stat-icon { float: right; width: 27px; height: 27px; font-size: 13px; }
.page-section[data-section="overview"] .stat-label { max-width: calc(100% - 34px); padding-top: 3px; font-size: 9px; line-height: 1.3; }
.page-section[data-section="overview"] .stat-number { margin-top: 5px; font-size: 20px; }
.page-section[data-section="overview"] .stat-detail { margin-top: 2px; font-size: 8px; }
.dashboard-catalog-panel {
  min-width: 0;
  padding: 13px 16px 11px;
  border: 1px solid #342a36;
  border-radius: 12px;
  background: linear-gradient(145deg, #17131a, #100e13);
}
.dashboard-catalog-panel .dashboard-section-heading { margin-bottom: 9px; }
.dashboard-catalog-panel .dashboard-section-heading .eyebrow { margin-bottom: 3px; }
.dashboard-catalog-total { color: #d8b28f; font-size: 10px; font-variant-numeric: tabular-nums; }
.dashboard-catalog-rows { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 14px; }
.dashboard-catalog-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 9px; }
.dashboard-catalog-row > span { overflow: hidden; color: #b4a8b2; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-catalog-row > strong { color: #eee3e7; font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dashboard-catalog-track { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 99px; background: #302833; }
.dashboard-catalog-track > i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #986caa, #e2b27f); transition: width .35s ease; }
#dashboard-catalog-movies-fill { background: linear-gradient(90deg, #6386d6, #8fc0ef); }
#dashboard-catalog-series-fill { background: linear-gradient(90deg, #926cc0, #c8a1e6); }
#dashboard-catalog-episodes-fill { background: linear-gradient(90deg, #aa638b, #e592b5); }
#dashboard-catalog-m3u-movies-fill { background: linear-gradient(90deg, #b57b51, #ecc482); }
#dashboard-catalog-m3u-series-fill { background: linear-gradient(90deg, #498e89, #84c9b7); }
.dashboard-catalog-panel > .footnote { margin-top: 8px; font-size: 8px; }
.dashboard-operations { padding: 13px 15px; }
.dashboard-operations-grid { gap: 7px; }
.operation-card { padding: 9px; }
.dashboard-performance-grid > .panel { padding: 14px; }
.dashboard-performance-grid .resource-chart, .dashboard-performance-grid .bandwidth-chart { min-height: 88px; max-height: 112px; flex-basis: 112px; }
.process-matrix-panel { padding: 14px; }
.process-matrix-cell { min-height: 77px; padding: 9px; }
.disk-capacity-panel { padding: 14px; }
.disk-capacity-values strong { font-size: 16px; }
.page-section[data-section="overview"] .library-usage-panel { padding: 14px; }
.page-section[data-section="overview"] .library-usage-card { padding: 11px; }
@media (max-width: 1120px) {
  .dashboard-command-bar { grid-template-columns: minmax(170px, .7fr) minmax(0, 1.5fr); }
  .dashboard-quick-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-section[data-section="overview"] > #stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-catalog-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .dashboard-command-bar { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  .dashboard-quick-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-action { min-height: 32px; display: flex; justify-content: center; padding: 5px 4px; font-size: 8px; }
  .dashboard-action > span { display: inline !important; }
  .page-section[data-section="overview"] > #stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .page-section[data-section="overview"] .stat-card { min-height: 78px; padding: 8px; }
  .page-section[data-section="overview"] .stat-label { font-size: 8px; }
  .page-section[data-section="overview"] .stat-number { font-size: 18px; }
  .page-section[data-section="overview"] .stat-detail { font-size: 7px; }
  .dashboard-catalog-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .dashboard-operations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .dashboard-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-action { justify-content: flex-start; padding-inline: 8px; font-size: 9px; }
  .page-section[data-section="overview"] > #stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-section[data-section="overview"] .stat-card { min-height: 78px; }
  .dashboard-catalog-rows, .dashboard-operations-grid { grid-template-columns: 1fr; }
  .dashboard-catalog-row { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-catalog-track > i { transition: none; }
}

.app-layout { grid-template-columns: 266px minmax(0, 1fr); }
.side-nav { min-height: 0; overflow-y: auto; gap: 10px; padding: 0 3px 8px; scrollbar-width: thin; }
.nav-group { display: grid; gap: 4px; }
.nav-group + .nav-group { padding-top: 8px; border-top: 1px solid #241f28; }
.nav-group-label { padding: 0 10px 3px; color: #827685; font-size: 8px; font-weight: 780; letter-spacing: .14em; }
.nav-item { min-height: 41px; white-space: normal; line-height: 1.25; }
.nav-item .nav-icon { flex: 0 0 17px; }
.profile { margin-top: 8px; padding: 11px 0 0; }
.sidebar-logout {
  width: 100%;
  min-width: 0;
  height: 46px;
  justify-content: center;
  gap: 9px;
  border-color: #68483f;
  border-radius: 10px;
  background: linear-gradient(110deg, #35232c, #211a24);
  font-size: 12px;
  letter-spacing: .015em;
}
.sidebar-logout svg { width: 19px; height: 19px; }
.dashboard-grid { grid-template-columns: minmax(0, 1fr); }
.disk-capacity-grid { display: block; margin: 0; }
.library-disks-panel { padding: 18px; }
.library-disk-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 11px; }
.library-disk-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: 12px 18px;
  padding: 15px;
  border: 1px solid #3b303c;
  border-radius: 11px;
  background: linear-gradient(145deg, #19151c, #100e13);
}
.library-disk-heading { min-width: 0; display: flex; align-items: center; justify-content: space-between; grid-column: 1 / -1; gap: 12px; }
.library-disk-title { min-width: 0; display: grid; gap: 5px; }
.library-disk-title strong { overflow: hidden; color: #f0e7ed; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.library-disk-title small { overflow: hidden; color: #938895; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.library-disk-state { flex: 0 0 auto; padding: 5px 7px; border: 1px solid #46404a; border-radius: 6px; color: #a79ba9; font-size: 8px; font-weight: 780; letter-spacing: .06em; white-space: nowrap; }
.library-disk-state.is-reading { border-color: #28684e; background: #153126; color: #7ce0ad; box-shadow: 0 0 14px #5fe0a01a; }
.library-disk-state.is-streaming { border-color: #665137; background: #302519; color: #f0c17f; }
.library-disk-state.is-offline { border-color: #75454c; background: #351e24; color: #f28c95; }
.library-disk-usage { min-width: 0; display: grid; align-content: center; gap: 6px; }
.library-disk-space { color: #e7dce5; font-size: 10px; font-variant-numeric: tabular-nums; }
.library-disk-track { height: 7px; overflow: hidden; border-radius: 99px; background: #332b37; }
.library-disk-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b638e, #d2a46e); transition: width .4s ease; }
.library-disk-fill.is-high { background: linear-gradient(90deg, #d58c61, #f06d77); }
.library-disk-capacity { color: #857a89; font-size: 8px; }
.library-disk-metrics { display: grid; align-content: center; justify-items: end; gap: 7px; }
.library-disk-metrics span { color: #a99eaa; font-size: 9px; text-align: right; }
.library-disk-metrics strong { color: #9de0bb; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.library-disk-activity { grid-column: 1 / -1; display: grid; gap: 4px; padding-top: 9px; border-top: 1px solid #302833; color: #c9bac7; font-size: 9px; }
.library-disk-activity small { overflow: hidden; color: #938895; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.library-disks-panel > .footnote { margin-top: 11px; font-size: 9px; }
.library-disk-empty { grid-column: 1 / -1; }
.page-section[data-section="overview"] .dashboard-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; }
.dashboard-recent-panel { width: 100%; min-height: 0 !important; padding: 18px; }
.dashboard-recent-panel .panel-heading { margin-bottom: 14px; }
.dashboard-recent-list { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 13px; }
.dashboard-recent-list .recent-movie { min-width: 0; }
.dashboard-recent-list .recent-movie-poster { height: 224px; aspect-ratio: auto; }
.dashboard-recent-list .recent-movie-details { min-height: 88px; padding: 12px; }
.dashboard-recent-list .recent-movie-title { font-size: 12px; }
.dashboard-recent-panel > .empty-state { padding: 26px 12px; }
@media (max-width: 1100px) {
  .app-layout { grid-template-columns: 230px minmax(0, 1fr); }
  .library-disk-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
  .dashboard-recent-list { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
  .dashboard-recent-list .recent-movie-poster { height: 200px; }
}
@media (max-width: 760px) {
  .side-nav { display: flex; overflow-x: auto; gap: 7px; padding: 2px 1px 9px; }
  .nav-group { display: flex; flex: 0 0 auto; gap: 6px; }
  .nav-group + .nav-group { padding: 0 0 0 7px; border-top: 0; border-left: 1px solid #302833; }
  .nav-group-label { display: none; }
  .nav-item { min-height: 37px; flex: 0 0 auto; gap: 7px; padding: 0 10px; font-size: 10px; }
  .profile { padding: 8px 4px 4px; }
  .library-disk-list { grid-template-columns: 1fr; }
  .dashboard-recent-list { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 10px; }
  .dashboard-recent-list .recent-movie-poster { height: 190px; }
}
@media (max-width: 480px) {
  .library-disk-card { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
  .library-disk-metrics { grid-template-columns: 1fr auto; justify-items: start; }
  .dashboard-recent-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-recent-list .recent-movie-poster { height: 165px; }
}