:root {
  color-scheme: dark;
  --bg: #050b15;
  --surface: #0b1628;
  --line: rgba(139, 166, 205, 0.15);
  --text: #f7f9ff;
  --muted: #91a2ba;
  --cyan: #2caaf4;
  --blue: #347ef8;
  --violet: #5a39f5;
  --green: #45e0a8;
  --amber: #ffbd59;
  --red: #ff6478;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--text); background: radial-gradient(circle at 75% 8%, rgba(52, 126, 248, 0.13), transparent 29rem), linear-gradient(145deg, #050b15, #07111f 55%, #080c18); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.ambient { position: fixed; z-index: 0; width: 25rem; height: 25rem; border-radius: 50%; filter: blur(100px); opacity: .12; pointer-events: none; }
.ambient-one { top: 15%; right: -9rem; background: var(--violet); }
.ambient-two { bottom: -12rem; left: -8rem; background: var(--cyan); }

.login-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .65fr); gap: clamp(56px, 10vw, 150px); align-items: center; width: min(1180px, calc(100% - 48px)); min-height: 100vh; margin: auto; padding: 52px 0; }
.login-copy { max-width: 650px; }
.public-brand img, .sidebar-brand img { display: block; width: 138px; height: 55px; object-fit: cover; filter: drop-shadow(1px 0 #fff) drop-shadow(-1px 0 #fff) drop-shadow(0 1px #fff) drop-shadow(0 -1px #fff); }
.login-copy .eyebrow { margin-top: 72px; }
.eyebrow { margin: 0 0 12px; color: #63bafc; font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.login-copy h1 { margin: 0; font-size: clamp(48px, 5.4vw, 76px); line-height: .98; letter-spacing: -.055em; }
.login-copy h1 em { color: transparent; background: linear-gradient(100deg, #61c8ff, #4f88ff 48%, #8b6cff); background-clip: text; font-style: normal; }
.login-lead { max-width: 590px; margin: 28px 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.security-note { display: flex; gap: 10px; align-items: center; color: #bad0ec; font-size: 13px; }
.security-note span { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(69,224,168,.26); border-radius: 50%; color: var(--green); background: rgba(69,224,168,.08); }

.login-panel { padding: 36px; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(145deg, rgba(17,31,53,.94), rgba(8,18,32,.94)); box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.panel-kicker { display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.panel-kicker span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.login-panel h2 { margin: 34px 0 8px; font-size: 32px; letter-spacing: -.035em; }
.login-panel > p { margin: 0 0 30px; color: var(--muted); font-size: 14px; }
label { display: block; margin: 18px 0 8px; color: #c9d5e5; font-size: 12px; font-weight: 700; }
input, select { width: 100%; border: 1px solid rgba(139,166,205,.2); border-radius: 12px; outline: none; color: var(--text); background: rgba(5,13,25,.72); transition: border-color .18s, box-shadow .18s; }
input { height: 48px; padding: 0 14px; }
input:focus, select:focus { border-color: rgba(68,139,255,.72); box-shadow: 0 0 0 3px rgba(52,126,248,.12); }
.password-field { position: relative; }
.password-field input { padding-right: 58px; }
.password-field button { position: absolute; top: 0; right: 0; width: 58px; height: 48px; border: 0; color: #7ebdff; background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.form-error { min-height: 18px; margin: 12px 0 4px !important; color: #ff8c9b !important; font-size: 12px !important; line-height: 1.45; }
.form-error.success { color: #70e8bb !important; }
.primary-button, .secondary-button, .icon-button { border: 0; cursor: pointer; }
.primary-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px; margin-top: 8px; padding: 0 18px; border-radius: 12px; color: #fff; background: linear-gradient(100deg, var(--blue), var(--violet)); box-shadow: 0 14px 28px rgba(52,126,248,.18); font-weight: 750; }
.primary-button:disabled { cursor: wait; opacity: .65; }
.primary-button.compact { width: auto; min-height: 42px; gap: 10px; margin: 0; padding: 0 16px; font-size: 12px; }
.secondary-button { min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; color: #cbd7e7; background: rgba(255,255,255,.025); font-size: 12px; font-weight: 700; }
.first-access { margin: 24px 0 0 !important; padding-top: 20px; border-top: 1px solid var(--line); font-size: 11px !important; line-height: 1.6; }

.dashboard { position: relative; z-index: 1; display: grid; grid-template-columns: 238px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 26px 20px 18px; border-right: 1px solid var(--line); background: rgba(5,12,22,.88); backdrop-filter: blur(22px); }
.sidebar-brand { display: block; padding: 0 8px 26px; border-bottom: 1px solid var(--line); }
.sidebar-brand img { width: 126px; height: 50px; }
.sidebar nav { margin-top: 24px; }
.sidebar nav > p { margin: 24px 10px 9px; color: #667991; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.nav-item { display: flex; gap: 11px; align-items: center; min-height: 43px; margin: 4px 0; padding: 0 11px; border-radius: 10px; color: #899bb4; font-size: 12px; font-weight: 650; text-decoration: none; }
.nav-item span { width: 20px; color: #6d82a0; font-size: 16px; text-align: center; }
.nav-item small { margin-left: auto; color: #5d6f87; font-size: 8px; text-transform: uppercase; }
.nav-item.active { color: #fff; background: linear-gradient(100deg, rgba(52,126,248,.17), rgba(90,57,245,.12)); }
.nav-item.active span { color: #61baff; }
.nav-item.disabled { cursor: default; }
.sidebar-footer { display: flex; gap: 10px; align-items: center; margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--line); }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.sidebar-footer div { display: grid; gap: 2px; }
.sidebar-footer strong { font-size: 11px; }
.sidebar-footer small { color: #70839c; font-size: 9px; }

.workspace { min-width: 0; }
.workspace-header { display: flex; align-items: center; justify-content: space-between; min-height: 106px; padding: 22px clamp(24px,4vw,56px); border-bottom: 1px solid var(--line); background: rgba(6,14,25,.36); }
.workspace-header h1 { margin: 0; font-size: 27px; letter-spacing: -.035em; }
.workspace-header .eyebrow { margin-bottom: 5px; }
.account { display: flex; gap: 16px; align-items: center; }
.account-copy { display: grid; gap: 3px; text-align: right; }
.account-copy strong { max-width: 260px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; }
.account-copy small { color: var(--muted); font-size: 10px; }
.icon-button { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: #cbd7e7; background: rgba(255,255,255,.03); font-size: 20px; }
.menu-button { display: none; }
.workspace-body { padding: 32px clamp(24px,4vw,56px) 60px; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.summary-grid article { display: flex; gap: 14px; align-items: center; min-height: 94px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(15,29,49,.78), rgba(8,18,31,.72)); }
.summary-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 12px; font-size: 16px; }
.summary-icon.blue { color: #75c8ff; background: rgba(44,170,244,.12); }
.summary-icon.green { color: var(--green); background: rgba(69,224,168,.1); }
.summary-icon.amber { color: var(--amber); background: rgba(255,189,89,.1); }
.summary-icon.gray { color: #9baabd; background: rgba(155,170,189,.1); }
.summary-grid article div { display: grid; gap: 3px; }
.summary-grid small { color: var(--muted); font-size: 10px; }
.summary-grid strong { font-size: 25px; letter-spacing: -.04em; }

.content-card { margin-top: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgba(9,20,35,.76); }
.users-card { margin-top: 0; }
.card-heading { display: flex; align-items: center; justify-content: space-between; padding: 24px; border-bottom: 1px solid var(--line); }
.card-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.025em; }
.filters { display: flex; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.search-field { position: relative; flex: 1; margin: 0; }
.search-field span { position: absolute; top: 12px; left: 13px; color: #71849d; font-size: 20px; }
.search-field input { height: 42px; padding-left: 40px; }
.select-field { display: flex; gap: 10px; align-items: center; margin: 0; }
.select-field > span { color: var(--muted); font-size: 10px; }
.select-field select { width: 145px; height: 42px; padding: 0 11px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 13px 20px; color: #71839b; background: rgba(5,13,23,.42); font-size: 9px; letter-spacing: .12em; text-align: left; text-transform: uppercase; }
td { padding: 16px 20px; border-top: 1px solid rgba(139,166,205,.09); color: #bcc9da; font-size: 12px; }
td:first-child { color: #f5f8ff; font-weight: 750; }
td:last-child { text-align: right; white-space: nowrap; }
.tenant-identity { display: flex; gap: 11px; align-items: center; }
.tenant-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(91,146,255,.2); border-radius: 10px; color: #76c8ff; background: rgba(52,126,248,.1); font-weight: 800; }
.status-badge { display: inline-flex; gap: 6px; align-items: center; padding: 6px 9px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-active { color: #70e8bb; background: rgba(69,224,168,.09); }
.status-suspended { color: #ffd07d; background: rgba(255,189,89,.09); }
.status-inactive { color: #9cabbf; background: rgba(156,171,191,.09); }
.status-online { color: #70e8bb; background: rgba(69,224,168,.09); }
.status-offline { color: #ff9aa7; background: rgba(255,100,120,.09); }
.status-warning { color: #ffd07d; background: rgba(255,189,89,.09); }
.status-unknown { color: #9cabbf; background: rgba(156,171,191,.09); }
.status-pending { color: #ffd07d; background: rgba(255,189,89,.09); }
.status-approved { color: #70e8bb; background: rgba(69,224,168,.09); }
.status-rejected, .status-revoked { color: #ff9aa7; background: rgba(255,100,120,.09); }
.status-expired { color: #9cabbf; background: rgba(156,171,191,.09); }
.device-filters .select-field select { width: 170px; }
.device-identity { display: flex; gap: 11px; align-items: center; min-width: 210px; }
.device-identity > span:last-child { display: grid; gap: 4px; }
.device-identity strong { color: #f5f8ff; font-size: 12px; }
.device-identity small { color: #71849d; font-size: 9px; font-weight: 500; }
.device-icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(91,146,255,.22); border-radius: 11px; color: #75c8ff; background: linear-gradient(145deg, rgba(52,126,248,.13), rgba(90,57,245,.08)); font-size: 18px; }
.activation-code { color: #8ed1ff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 850; letter-spacing: .12em; }
#device-pending-badge:not(:empty) { display: grid; min-width: 19px; height: 19px; margin-left: auto; padding: 0 5px; place-items: center; border-radius: 999px; color: #08111e; background: var(--amber); font-size: 9px; font-weight: 900; }
.provider-identity { display: grid; gap: 4px; min-width: 180px; }
.provider-identity strong { color: #f5f8ff; font-size: 12px; }
.provider-identity small { max-width: 250px; overflow: hidden; color: #71849d; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
#provider-table-wrap table { min-width: 1120px; }
#provider-table-wrap th:last-child { width: 350px; }
.provider-actions { display: grid; grid-template-columns: repeat(3, max-content); gap: 7px; align-items: center; justify-content: end; min-width: 350px; white-space: normal; }
.provider-actions .row-action { margin-left: 0; }
.managed-label { padding: 7px 10px; border: 1px solid rgba(99,186,252,.18); border-radius: 999px; color: #85caff; background: rgba(52,126,248,.07); font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.catalog-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px 24px 0; }
.catalog-tab { display: flex; gap: 12px; align-items: center; min-height: 68px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; color: #aebdd0; background: rgba(5,13,23,.4); text-align: left; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.catalog-tab:hover { transform: translateY(-1px); border-color: rgba(99,186,252,.32); }
.catalog-tab.active { border-color: rgba(68,139,255,.56); color: #fff; background: linear-gradient(135deg, rgba(52,126,248,.16), rgba(90,57,245,.1)); box-shadow: inset 0 0 0 1px rgba(85,145,255,.08); }
.catalog-tab > span:last-child { display: grid; gap: 3px; }
.catalog-tab strong { font-size: 12px; }
.catalog-tab small { color: #7f91a9; font-size: 9px; }
.catalog-tab-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 11px; font-size: 14px; }
.catalog-tab-icon.channel { color: var(--green); background: rgba(69,224,168,.1); }
.catalog-tab-icon.movie { color: var(--amber); background: rgba(255,189,89,.1); }
.catalog-tab-icon.series { color: #a894ff; background: rgba(90,57,245,.12); }
.catalog-results { padding: 22px 24px 24px; }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.catalog-grid[data-type="CHANNEL"] { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.catalog-card { min-width: 0; overflow: hidden; border: 1px solid rgba(139,166,205,.14); border-radius: 15px; background: linear-gradient(155deg, rgba(15,29,49,.88), rgba(7,16,29,.92)); transition: border-color .18s, transform .18s, box-shadow .18s; }
.catalog-card:hover { transform: translateY(-2px); border-color: rgba(92,151,255,.34); box-shadow: 0 14px 30px rgba(0,0,0,.22); }
.catalog-card-filler { pointer-events: none; border-style: dashed; opacity: .38; }
.catalog-card-filler:hover { transform: none; box-shadow: none; }
.catalog-filler-artwork { color: var(--green); background: linear-gradient(145deg, rgba(69,224,168,.08), rgba(52,126,248,.08)); }
.catalog-card-filler .catalog-card-copy { min-height: 102px; align-content: start; }
.catalog-card-artwork { position: relative; display: grid; aspect-ratio: 2 / 3; overflow: hidden; place-items: center; color: #76c8ff; background: radial-gradient(circle at 50% 35%, rgba(52,126,248,.18), rgba(5,13,23,.9)); font-size: 24px; font-weight: 850; }
.catalog-card-artwork::after { position: absolute; inset: 0; content: ""; background: linear-gradient(105deg, transparent 30%, rgba(104,186,255,.11) 46%, rgba(104,186,255,.18) 50%, transparent 66%); transform: translateX(-100%); animation: catalog-artwork-loading 1.25s ease-in-out infinite; }
.catalog-grid[data-type="CHANNEL"] .catalog-card-artwork { aspect-ratio: 16 / 9; padding: 18px; }
.catalog-card-artwork img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .16s ease; }
.catalog-grid[data-type="CHANNEL"] .catalog-card-artwork img { padding: 12px; object-fit: contain; }
.catalog-card-artwork.has-image img { opacity: 1; }
.catalog-card-artwork.has-image::after, .catalog-card-artwork.artwork-failed::after { display: none; }
.catalog-artwork-fallback { display: none; opacity: .62; }
.catalog-card-artwork.artwork-failed .catalog-artwork-fallback { display: block; }
.catalog-play-button { position: absolute; z-index: 3; right: 10px; bottom: 10px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; background: linear-gradient(135deg, rgba(39,139,255,.94), rgba(91,55,255,.94)); box-shadow: 0 8px 20px rgba(0,0,0,.28); font-size: 10px; font-weight: 800; cursor: pointer; }
.catalog-play-button:hover { filter: brightness(1.12); }
dialog.player-modal { width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow-x: hidden; overflow-y: auto; border-color: rgba(96,157,255,.28); border-radius: 20px; background: linear-gradient(165deg, #0d1d31, #081524 72%); box-shadow: 0 32px 100px rgba(0,0,0,.72), 0 0 0 1px rgba(87,148,255,.06); }
.series-modal { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto; border: 1px solid rgba(96,157,255,.28); border-radius: 22px; color: var(--text); background: linear-gradient(155deg, #0c1a2d, #071321 72%); box-shadow: 0 34px 110px rgba(0,0,0,.76), 0 0 0 1px rgba(87,148,255,.05); }
.series-modal .modal-heading { position: sticky; z-index: 5; top: 0; margin: 0; padding: 20px 24px 17px; border-bottom: 1px solid rgba(139,166,205,.12); background: linear-gradient(90deg, rgba(14,35,60,.96), rgba(7,19,33,.96)); backdrop-filter: blur(18px); }
.series-modal .modal-heading h2 { max-width: 700px; margin-top: 3px; overflow: hidden; font-size: 27px; text-overflow: ellipsis; white-space: nowrap; }
.series-overview { display: grid; grid-template-columns: 94px 1fr; gap: 18px; align-items: center; margin: 20px 24px 0; padding: 16px; border: 1px solid rgba(112,174,246,.15); border-radius: 16px; background: radial-gradient(circle at 10% 15%, rgba(52,126,248,.14), transparent 35%), rgba(5,14,25,.56); }
.series-overview img { width: 94px; height: 118px; border: 1px solid rgba(157,200,255,.18); border-radius: 11px; object-fit: cover; background: #081322; box-shadow: 0 14px 28px rgba(0,0,0,.36); }
.series-overview img:not([src]) { display: none; }
.series-overview > div { display: grid; gap: 7px; }
.series-overview span { color: #74c8ff; font-size: 8px; font-weight: 900; letter-spacing: .19em; }
.series-overview strong { font-size: 17px; letter-spacing: -.02em; }
.series-overview small { color: #8296af; font-size: 10px; line-height: 1.5; }
.series-season-field { display: flex; gap: 12px; align-items: center; justify-content: flex-end; margin: 18px 24px 12px; }
.series-season-field span { color: #8fa4bd; font-size: 10px; font-weight: 800; }
.series-season-field select { width: 210px; height: 40px; padding: 0 12px; }
.series-episodes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 0 24px 24px; }
.series-episode { display: grid; grid-template-columns: 118px minmax(0,1fr); min-height: 112px; overflow: hidden; border: 1px solid rgba(139,166,205,.13); border-radius: 14px; background: linear-gradient(145deg, rgba(14,28,47,.88), rgba(6,15,27,.94)); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.series-episode:hover { border-color: rgba(95,169,255,.35); box-shadow: 0 14px 30px rgba(0,0,0,.24); transform: translateY(-2px); }
.series-episode-art { display: grid; min-height: 112px; place-items: center; color: #6bbfff; background: radial-gradient(circle, rgba(52,126,248,.2), rgba(5,13,23,.9)); font-size: 20px; font-weight: 900; }
.series-episode-art img { width: 100%; height: 100%; object-fit: cover; }
.series-episode-copy { display: grid; grid-template-rows: auto auto 1fr auto; gap: 5px; min-width: 0; padding: 12px; }
.series-episode-copy span { color: #6fc6ff; font-size: 8px; font-weight: 850; letter-spacing: .1em; }
.series-episode-copy strong { overflow: hidden; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.series-episode-copy small { overflow: hidden; color: #7f93ab; font-size: 9px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.series-episode-copy button { justify-self: start; min-height: 30px; padding: 0 11px; border: 1px solid rgba(97,186,255,.3); border-radius: 8px; color: #fff; background: linear-gradient(100deg,#347ef8,#5a39f5); font-size: 9px; font-weight: 850; cursor: pointer; }
.series-error { margin: 0 24px 22px; }
.player-modal .modal-heading { margin: 0; padding: 18px 22px 15px; border-bottom: 1px solid rgba(139,166,205,.12); background: radial-gradient(circle at 12% 0, rgba(52,126,248,.15), transparent 42%); }
.player-modal .modal-heading h2 { margin-top: 3px; font-size: clamp(22px, 2.5vw, 28px); line-height: 1.1; }
.player-modal .icon-button { align-self: start; }
.player-stage { position: relative; width: calc(100% - 40px); margin: 18px 20px 0; aspect-ratio: 16 / 9; max-height: 58vh; overflow: hidden; border: 1px solid rgba(139,166,205,.2); border-radius: 14px; background: radial-gradient(circle at 50% 38%, #17365a, #06101d 64%, #02060c); box-shadow: 0 16px 36px rgba(0,0,0,.4); }
.player-stage video { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: #02060c; opacity: 0; transition: opacity .22s ease; }
.player-placeholder { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; overflow: hidden; opacity: 1; transition: opacity .22s ease; }
.player-placeholder::after { position: absolute; inset: 0; content: ""; background: linear-gradient(108deg, transparent 28%, rgba(102,182,255,.08) 46%, rgba(102,182,255,.14) 50%, transparent 70%); transform: translateX(-100%); animation: player-stage-shimmer 1.4s ease-in-out infinite; }
.player-placeholder > img:not(.player-backdrop) { position: absolute; inset: 14% 25%; width: 50%; height: 48%; object-fit: contain; opacity: .2; filter: saturate(.8) drop-shadow(0 12px 28px rgba(0,0,0,.55)); }
.player-placeholder > img:not([src]) { display: none; }
.player-backdrop, .player-content-badge, .player-cinematic-progress { display: none; }
.player-placeholder-copy { position: relative; z-index: 2; display: grid; justify-items: center; align-self: end; gap: 5px; padding-bottom: 24px; color: #eef7ff; text-align: center; }
.player-loading-status { display: grid; gap: 5px; justify-items: center; }
.player-placeholder-copy strong { font-size: 12px; }
.player-placeholder-copy small { margin: 0; color: #86a1bf; font-size: 9px; }
.player-loader { width: 22px; height: 22px; margin-bottom: 3px; border: 2px solid rgba(117,197,255,.18); border-top-color: #73c8ff; border-radius: 50%; animation: player-stage-spin .72s linear infinite; }
.player-stage.is-playing video { opacity: 1; }
.player-stage.is-playing .player-placeholder { pointer-events: none; opacity: 0; }
.player-watermark { position: absolute; z-index: 3; top: 14px; width: clamp(88px, 12%, 118px); max-height: 62px; object-fit: contain; opacity: .96; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(1.5px 1.5px 0 #fff) drop-shadow(-1.5px 1.5px 0 #fff) drop-shadow(1.5px -1.5px 0 #fff) drop-shadow(-1.5px -1.5px 0 #fff) drop-shadow(0 4px 10px rgba(0,0,0,.88)); pointer-events: none; transition: opacity .2s ease; }
.player-watermark.watermark-left { left: 16px; }
.player-watermark.watermark-right { right: 16px; }
.player-watermark[hidden] { display: none; }
.player-stage:fullscreen .player-watermark, .player-stage:-webkit-full-screen .player-watermark { top: 20px; width: clamp(150px, 18%, 240px); max-height: 118px; }
.player-stage:fullscreen .player-watermark.watermark-left, .player-stage:-webkit-full-screen .player-watermark.watermark-left { left: 26px; }
.player-stage:fullscreen .player-watermark.watermark-right, .player-stage:-webkit-full-screen .player-watermark.watermark-right { right: 26px; }
.player-modal.vod-mode .player-stage:fullscreen #player-artwork, .player-modal.vod-mode .player-stage:-webkit-full-screen #player-artwork { position: absolute; z-index: 3; top: 13%; right: clamp(68px,9vw,170px); bottom: auto; left: auto; display: block; width: auto; max-width: 31vw; height: 68%; padding: 0; object-fit: cover; border: 1px solid rgba(176,214,255,.24); border-radius: 18px; opacity: .96; filter: saturate(1.04) contrast(1.02) drop-shadow(0 35px 58px rgba(0,0,0,.72)); transform: none; animation: vod-poster-arrival .85s cubic-bezier(.16,.78,.2,1) both, vod-poster-float 6s 1s ease-in-out infinite alternate; }
.player-modal.vod-mode .player-stage:fullscreen .player-backdrop, .player-modal.vod-mode .player-stage:-webkit-full-screen .player-backdrop { inset: -8%; width: 116%; height: 116%; object-position: center 28%; opacity: .62; filter: blur(46px) saturate(1.38) brightness(.47) contrast(1.08); transform: scale(1.13); animation: vod-backdrop-drift 12s cubic-bezier(.2,.65,.3,1) both; }
.player-modal.vod-mode .player-stage:fullscreen .player-placeholder::before, .player-modal.vod-mode .player-stage:-webkit-full-screen .player-placeholder::before { background: radial-gradient(circle at 77% 43%, rgba(66,139,232,.16), transparent 28%), radial-gradient(circle at 34% 76%, rgba(90,57,245,.11), transparent 25%), linear-gradient(90deg, rgba(1,6,13,.98) 0, rgba(2,9,18,.91) 36%, rgba(3,11,21,.5) 65%, rgba(1,6,13,.76) 100%); }
.player-modal.vod-mode .player-stage:fullscreen .player-placeholder::after, .player-modal.vod-mode .player-stage:-webkit-full-screen .player-placeholder::after { background: linear-gradient(115deg, transparent 0 57%, rgba(102,190,255,.04) 57.1% 57.25%, transparent 57.35% 100%), radial-gradient(ellipse at 73% 46%, transparent 7%, rgba(1,5,11,.14) 53%, rgba(1,5,11,.84)), linear-gradient(180deg, rgba(1,5,10,.22), transparent 40%, rgba(1,5,10,.9)); animation: vod-grid-breathe 5.8s ease-in-out infinite alternate; }
.player-modal.vod-mode .player-stage:fullscreen .player-placeholder-copy, .player-modal.vod-mode .player-stage:-webkit-full-screen .player-placeholder-copy { position: absolute; top: auto; bottom: clamp(74px,10vh,118px); left: clamp(54px,7vw,132px); align-self: auto; justify-items: start; width: min(43vw,650px); min-width: 0; margin: 0; padding: 0 0 0 22px; border: 0; border-left: 1px solid rgba(92,187,255,.36); border-radius: 0; background: transparent; box-shadow: none; text-align: left; backdrop-filter: none; transform: none; animation: vod-copy-arrival .72s cubic-bezier(.2,.72,.2,1) both; }
.player-modal.vod-mode .player-stage:fullscreen .player-placeholder-copy::after, .player-modal.vod-mode .player-stage:-webkit-full-screen .player-placeholder-copy::after { position: absolute; top: 0; bottom: 0; left: -1px; width: 1px; background: linear-gradient(180deg, transparent, #57c6ff 42%, #7657ff 68%, transparent); box-shadow: 0 0 18px rgba(76,184,255,.8); content: ""; animation: vod-rail-scan 2.6s ease-in-out infinite; }
.player-modal.vod-mode .player-stage:fullscreen .player-content-badge, .player-modal.vod-mode .player-stage:-webkit-full-screen .player-content-badge { order: 1; display: inline-flex; gap: 8px; align-items: center; padding: 6px 10px; border: 1px solid rgba(102,194,255,.27); border-radius: 999px; color: #9bdcff; background: rgba(4,18,34,.42); box-shadow: inset 0 0 18px rgba(55,144,231,.07), 0 0 24px rgba(52,126,248,.08); font-size: 9px; letter-spacing: .2em; backdrop-filter: blur(10px); }
.player-modal.vod-mode .player-stage:fullscreen .player-content-badge::before, .player-modal.vod-mode .player-stage:-webkit-full-screen .player-content-badge::before { width: 6px; height: 6px; margin: 0; border-radius: 50%; background: #58d3ff; box-shadow: 0 0 11px #58d3ff; content: ""; animation: vod-signal-pulse 1.45s ease-in-out infinite; }
.player-modal.vod-mode .player-stage:fullscreen .player-placeholder-copy strong, .player-modal.vod-mode .player-stage:-webkit-full-screen .player-placeholder-copy strong { order: 2; max-width: 100%; margin-top: 15px; overflow: visible; color: #f7faff; font-size: clamp(30px,3.25vw,52px); font-weight: 710; line-height: 1.04; letter-spacing: -.04em; text-overflow: clip; white-space: normal; text-wrap: balance; text-shadow: 0 14px 44px rgba(0,0,0,.86); animation: vod-title-arrival .86s .08s cubic-bezier(.2,.72,.2,1) both; }
.player-modal.vod-mode .player-stage:fullscreen .player-loading-status, .player-modal.vod-mode .player-stage:-webkit-full-screen .player-loading-status { position: relative; order: 3; display: inline-flex; gap: 10px; align-items: center; justify-items: start; margin-top: 19px; padding: 8px 13px 8px 10px; overflow: hidden; border: 1px solid rgba(118,195,255,.14); border-radius: 9px; background: linear-gradient(90deg, rgba(7,25,44,.66), rgba(8,17,31,.38)); box-shadow: inset 0 0 24px rgba(45,136,228,.045), 0 12px 32px rgba(0,0,0,.24); backdrop-filter: blur(14px); animation: vod-status-arrival .7s .18s cubic-bezier(.2,.72,.2,1) both; }
.player-modal.vod-mode .player-stage:fullscreen .player-loading-status::after, .player-modal.vod-mode .player-stage:-webkit-full-screen .player-loading-status::after { position: absolute; right: 0; bottom: 0; left: 0; display: block; height: 1px; background: linear-gradient(90deg, transparent, #48b9ff, #6d50ff, transparent); content: ""; animation: vod-status-scan 1.7s ease-in-out infinite; }
.player-modal.vod-mode .player-stage:fullscreen .player-placeholder-copy small, .player-modal.vod-mode .player-stage:-webkit-full-screen .player-placeholder-copy small { margin: 0; color: #c9d9e9; font-size: clamp(12px,1vw,15px); font-weight: 560; letter-spacing: .02em; }
.player-modal.vod-mode .player-stage:fullscreen .player-loader, .player-modal.vod-mode .player-stage:-webkit-full-screen .player-loader { width: 20px; height: 20px; margin: 0; border: 2px solid rgba(107,198,255,.14); border-top-color: #67d0ff; border-right-color: #6750ff; box-shadow: 0 0 14px rgba(70,174,255,.2); }
.player-modal.vod-mode .player-stage:fullscreen .player-cinematic-progress, .player-modal.vod-mode .player-stage:-webkit-full-screen .player-cinematic-progress { right: 7%; bottom: 5%; left: 7%; display: block; height: 1px; background: rgba(111,182,236,.1); }
.player-modal.vod-mode .player-stage:fullscreen .player-cinematic-progress i, .player-modal.vod-mode .player-stage:-webkit-full-screen .player-cinematic-progress i { width: 22%; background: linear-gradient(90deg, transparent, #4ac5ff, #7354ff, transparent); box-shadow: 0 0 12px rgba(79,184,255,.7); animation-duration: 1.8s; }
.live-player-controls { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; display: flex; gap: 9px; align-items: center; min-height: 48px; padding: 16px 14px 10px; color: #fff; background: linear-gradient(transparent, rgba(1,5,10,.9)); opacity: 0; transform: translateY(5px); transition: opacity .18s ease, transform .18s ease; }
.player-stage.is-playing:hover .live-player-controls, .player-stage.is-playing:focus-within .live-player-controls { opacity: 1; transform: translateY(0); }
.player-modal.vod-mode .live-player-controls { display: none; }
.player-modal.vod-mode .player-stage video { object-fit: contain; }
.player-modal.vod-mode .player-placeholder { isolation: isolate; background: #06101c; }
.player-modal.vod-mode .player-placeholder::before { position: absolute; z-index: 1; inset: 0; content: ""; background: radial-gradient(circle at 68% 42%, rgba(62,139,225,.12), transparent 38%), linear-gradient(100deg, rgba(2,8,16,.86) 0, rgba(4,13,24,.62) 38%, rgba(6,18,33,.28) 66%, rgba(2,8,16,.7) 100%); }
.player-modal.vod-mode .player-placeholder::after { z-index: 2; background: radial-gradient(ellipse at center, transparent 28%, rgba(2,7,14,.16) 68%, rgba(2,7,14,.66)), linear-gradient(180deg, rgba(1,6,12,.04), transparent 58%, rgba(1,6,12,.68)); transform: none; animation: none; }
.player-modal.vod-mode .player-backdrop { position: absolute; z-index: 0; inset: -12%; display: block; width: 124%; height: 124%; object-fit: cover; opacity: .72; filter: blur(38px) saturate(1.4) brightness(.76); transform: scale(1.14); }
.player-modal.vod-mode #player-artwork { z-index: 3; top: 8%; right: auto; bottom: auto; left: 50%; width: auto; max-width: 34%; height: 65%; padding: 0; object-fit: cover; border: 1px solid rgba(178,211,255,.22); border-radius: 11px; opacity: .96; filter: saturate(.96) drop-shadow(0 20px 34px rgba(0,0,0,.72)); transform: translateX(-50%); }
.player-modal.vod-mode .player-placeholder-copy { z-index: 4; align-self: end; min-width: 210px; margin-bottom: 27px; padding: 9px 16px 10px; border: 1px solid rgba(134,189,255,.16); border-radius: 14px; background: rgba(5,15,27,.68); box-shadow: 0 12px 30px rgba(0,0,0,.28); backdrop-filter: blur(12px); }
.player-modal.vod-mode .player-placeholder-copy strong { max-width: 360px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.player-modal.vod-mode .player-placeholder-copy small { color: #9eb5cf; }
.player-modal.vod-mode .player-loading-status { gap: 4px; }
.player-modal.vod-mode .player-content-badge { display: inline-flex; color: #73c8ff; font-size: 7px; font-weight: 900; letter-spacing: .18em; }
.player-modal.vod-mode .player-loader { width: 17px; height: 17px; margin-bottom: 1px; border-width: 2px; }
.player-modal.vod-mode .player-cinematic-progress { position: absolute; z-index: 5; right: 17%; bottom: 12px; left: 17%; display: block; height: 2px; overflow: hidden; border-radius: 999px; background: rgba(119,174,231,.12); }
.player-modal.vod-mode .player-cinematic-progress i { display: block; width: 34%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, #58bbff, #6447ff, transparent); animation: cinematic-progress 1.35s ease-in-out infinite; }
.vod-player-controls { position: absolute; z-index: 5; right: 0; bottom: 0; left: 0; display: none; padding: 30px 15px 11px; color: #fff; background: linear-gradient(transparent, rgba(1,5,10,.94) 38%); opacity: 0; transform: translateY(5px); transition: opacity .18s ease, transform .18s ease; }
.player-modal.vod-mode .player-stage.is-playing .vod-player-controls { display: grid; gap: 8px; }
.player-modal.vod-mode .player-stage.is-playing:hover .vod-player-controls, .player-modal.vod-mode .player-stage.is-playing:focus-within .vod-player-controls { opacity: 1; transform: translateY(0); }
.vod-progress-row { display: grid; grid-template-columns: 42px minmax(0,1fr) 42px; gap: 9px; align-items: center; }
.vod-progress-row span { font-size: 9px; font-variant-numeric: tabular-nums; font-weight: 750; text-align: center; }
.vod-progress-row input, .vod-actions-row input { height: 4px; padding: 0; accent-color: #5abaff; cursor: pointer; }
.vod-actions-row { display: flex; gap: 8px; align-items: center; }
.vod-actions-row button { position: relative; display: grid; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; color: #fff; background: rgba(4,12,22,.72); font-size: 13px; place-items: center; cursor: pointer; }
.vod-actions-row button:hover { border-color: rgba(118,200,255,.55); background: rgba(28,71,118,.78); }
.vod-actions-row button small { position: absolute; top: 11px; font-size: 7px; font-weight: 900; }
.vod-actions-row .vod-play-toggle { border-color: rgba(99,186,252,.45); background: linear-gradient(135deg, #347ef8, #5a39f5); }
.vod-actions-row input[type="range"] { width: 80px; }
.live-indicator { display: inline-flex; gap: 7px; align-items: center; padding: 5px 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(4,12,22,.62); font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.live-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #ff4965; box-shadow: 0 0 10px rgba(255,73,101,.85); }
.live-controls-spacer { flex: 1; }
.live-player-controls button { display: grid; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; color: #fff; background: rgba(4,12,22,.66); place-items: center; cursor: pointer; }
.live-player-controls button:hover { border-color: rgba(118,200,255,.5); background: rgba(28,71,118,.72); }
.live-player-controls input[type="range"] { width: 84px; height: 4px; padding: 0; accent-color: #63baff; cursor: pointer; }
.player-modal .connection-result { display: flex; gap: 9px; align-items: center; min-height: 40px; margin: 13px 20px 0; padding: 9px 12px; border-radius: 11px; }
.player-modal .connection-result::before { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 999px; background: currentColor; box-shadow: 0 0 14px currentColor; content: ""; }
.player-modal .modal-description { margin: 10px 20px 17px; padding-top: 10px; border-top: 1px solid rgba(139,166,205,.09); color: #8295ae; font-size: 10px; line-height: 1.5; }
@media (max-width: 700px) {
  .series-modal { width: calc(100vw - 20px); }
  .series-modal .modal-heading { padding: 17px 16px 14px; }
  .series-overview { margin: 16px 16px 0; }
  .series-season-field { margin-right: 16px; margin-left: 16px; }
  .series-episodes { grid-template-columns: 1fr; padding-right: 16px; padding-left: 16px; }
  dialog.player-modal { width: calc(100vw - 20px); max-height: calc(100vh - 20px); border-radius: 18px; }
  .player-modal .modal-heading { padding: 18px 16px 14px; }
  .player-stage { width: calc(100% - 32px); margin: 16px 16px 0; border-radius: 13px; }
  .live-player-controls { opacity: 1; transform: none; }
  .live-player-controls input[type="range"] { width: 68px; }
  .vod-player-controls { padding-right: 10px; padding-left: 10px; opacity: 1; transform: none; }
  .vod-progress-row { grid-template-columns: 38px minmax(0,1fr) 38px; gap: 5px; }
  .vod-actions-row input[type="range"] { width: 62px; }
  .player-modal.vod-mode #player-artwork { top: 10%; max-width: 38%; height: 58%; }
  .player-modal.vod-mode .player-placeholder-copy { min-width: 190px; margin-bottom: 20px; padding: 7px 12px 8px; }
  .player-watermark { top: 10px; width: 84px; max-height: 48px; }
  .player-watermark.watermark-left { left: 13px; }
  .player-watermark.watermark-right { right: 13px; }
  .player-modal .connection-result { margin: 12px 16px 0; }
  .player-modal .modal-description { margin: 10px 16px 18px; }
}
@keyframes catalog-artwork-loading { to { transform: translateX(100%); } }
@keyframes player-stage-spin { to { transform: rotate(360deg); } }
@keyframes player-stage-shimmer { to { transform: translateX(100%); } }
@keyframes cinematic-progress { from { transform: translateX(-110%); } to { transform: translateX(300%); } }
@keyframes cinema-status-pulse { from { opacity: .38; transform: scaleX(.55); } to { opacity: 1; transform: scaleX(1); } }
@keyframes vod-backdrop-drift { from { transform: scale(1.14) translate3d(1%,0,0); } to { transform: scale(1.08) translate3d(0,0,0); } }
@keyframes vod-grid-breathe { from { opacity: .72; } to { opacity: 1; } }
@keyframes vod-copy-arrival { from { opacity: 0; transform: translate3d(-26px,10px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes vod-title-arrival { from { opacity: 0; filter: blur(8px); transform: translateY(16px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes vod-status-arrival { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vod-poster-arrival { from { opacity: 0; transform: perspective(1200px) translate3d(44px,12px,0) rotateY(-7deg) scale(.96); } to { opacity: .96; transform: perspective(1200px) translate3d(0,0,0) rotateY(-2deg) scale(1); } }
@keyframes vod-poster-float { from { transform: perspective(1200px) translateY(0) rotateY(-2deg); } to { transform: perspective(1200px) translateY(-7px) rotateY(0deg); } }
@keyframes vod-rail-scan { 0%,100% { opacity: .28; transform: scaleY(.28) translateY(-90%); } 50% { opacity: 1; transform: scaleY(.72) translateY(24%); } }
@keyframes vod-signal-pulse { 0%,100% { opacity: .45; transform: scale(.78); } 50% { opacity: 1; transform: scale(1); } }
@keyframes vod-status-scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .player-modal.vod-mode .player-stage:fullscreen .player-backdrop,
  .player-modal.vod-mode .player-stage:fullscreen #player-artwork,
  .player-modal.vod-mode .player-stage:fullscreen .player-placeholder::after,
  .player-modal.vod-mode .player-stage:fullscreen .player-placeholder-copy,
  .player-modal.vod-mode .player-stage:fullscreen .player-placeholder-copy::after,
  .player-modal.vod-mode .player-stage:fullscreen .player-content-badge::before,
  .player-modal.vod-mode .player-stage:fullscreen .player-placeholder-copy strong,
  .player-modal.vod-mode .player-stage:fullscreen .player-loading-status,
  .player-modal.vod-mode .player-stage:fullscreen .player-loading-status::after,
  .player-modal.vod-mode .player-stage:fullscreen .player-cinematic-progress i { animation: none; }
}
.catalog-card-copy { display: grid; gap: 7px; padding: 13px; }
.catalog-card-copy strong { min-height: 34px; overflow: hidden; color: #f5f8ff; font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.catalog-card-copy small { overflow: hidden; color: #71849d; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.catalog-card-category { overflow: hidden; color: #68baff; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.catalog-card-footer { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 3px; padding-top: 10px; border-top: 1px solid rgba(139,166,205,.09); }
.catalog-pagination { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 22px; }
.catalog-pagination .secondary-button { min-height: 38px; padding: 0 14px; }
.catalog-pagination .secondary-button:disabled { cursor: default; opacity: .38; }
.catalog-pagination span { color: var(--muted); font-size: 10px; }
.scope-badge { display: inline-flex; padding: 6px 9px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.scope-global { color: #85caff; background: rgba(52,126,248,.1); }
.scope-tenant { color: #c1afff; background: rgba(90,57,245,.1); }
.row-action { min-height: 31px; margin-left: 5px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: #b9c8da; background: rgba(255,255,255,.025); font-size: 10px; font-weight: 700; cursor: pointer; }
.row-action.danger { color: #ff9aa7; }
.empty-state { display: grid; min-height: 230px; place-items: center; align-content: center; color: var(--muted); font-size: 12px; text-align: center; }
.empty-state span { margin-bottom: 10px; color: #568fdc; font-size: 30px; }
.empty-state strong { margin-bottom: 5px; color: #e9f0fb; font-size: 14px; }
.empty-state p { margin: 0; }

.modal { width: min(470px, calc(100% - 28px)); padding: 0; border: 1px solid rgba(139,166,205,.22); border-radius: 20px; color: var(--text); background: #0b1728; box-shadow: 0 30px 90px rgba(0,0,0,.65); }
.provider-modal { width: min(690px, calc(100% - 28px)); }
.onboarding-modal { width: min(720px, calc(100% - 28px)); max-height: calc(100vh - 36px); overflow-y: auto; }
.onboarding-modal form { padding: 30px; }
.onboarding-admin-group { margin-top: 22px; }
.section-divider { display: flex; align-items: center; margin: 4px 0 18px; color: #6caee9; font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.section-divider::after { height: 1px; flex: 1; margin-left: 12px; background: var(--line); content: ""; }
.section-divider small { margin: 0 0 0 10px; color: #607795; font-size: 9px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.branding-intro { max-width: 520px; margin: -8px 0 16px; color: #8da3bf; font-size: 12px; line-height: 1.5; }
.branding-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.branding-upload-card { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 11px; align-items: center; min-height: 104px; margin: 0; padding: 13px; border: 1px solid rgba(115,167,228,.2); border-radius: 14px; background: linear-gradient(145deg, rgba(23,48,79,.72), rgba(9,22,39,.78)); cursor: pointer; transition: border-color .18s ease, transform .18s ease, background .18s ease; }
.branding-upload-card:hover { border-color: rgba(105,184,255,.55); background: linear-gradient(145deg, rgba(28,61,98,.85), rgba(9,24,42,.9)); transform: translateY(-1px); }
.branding-upload-card input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.branding-preview { display: grid; width: 58px; height: 58px; place-items: center; overflow: hidden; border: 1px solid rgba(129,184,248,.2); border-radius: 12px; background: radial-gradient(circle at 30% 25%, rgba(80,157,255,.22), transparent 52%), #09182b; }
.branding-logo-preview { border-radius: 10px; }
.branding-preview img { width: 100%; height: 100%; object-fit: contain; }
.branding-icon-preview img { object-fit: cover; }
.branding-preview img:not([hidden]) + .branding-placeholder { display: none; }
.branding-placeholder { color: #76bcf4; font-size: 22px; opacity: .9; }
.branding-upload-copy { display: grid; min-width: 0; gap: 4px; }
.branding-upload-copy strong { color: #edf6ff; font-size: 12px; }
.branding-upload-copy small { margin: 0; color: #7289a4; font-size: 9px; line-height: 1.35; }
.branding-upload-action { grid-column: 2; justify-self: start; padding: 5px 8px; border: 1px solid rgba(102,187,255,.3); border-radius: 7px; color: #91d2ff; background: rgba(57,126,227,.12); font-size: 9px; font-weight: 800; }
.branding-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.branding-color-field { display: flex; gap: 10px; align-items: center; min-height: 64px; margin: 0; padding: 10px 12px; border: 1px solid rgba(115,167,228,.17); border-radius: 12px; background: rgba(5,17,31,.42); cursor: pointer; }
.branding-color-field input[type="color"] { width: 35px; height: 35px; flex: 0 0 35px; padding: 2px; border: 1px solid rgba(201,231,255,.34); border-radius: 9px; background: transparent; cursor: pointer; }
.branding-color-field span { display: grid; gap: 3px; }
.branding-color-field strong { color: #dcecff; font-size: 11px; }
.branding-color-field small { margin: 0; color: #6e86a3; font-size: 9px; line-height: 1.3; }
.branding-note { margin: 12px 0 0; color: #6f88a5; font-size: 10px; line-height: 1.45; }
.onboarding-password-field input { padding-right: 92px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.onboarding-password-field button { width: 76px; font-size: 10px; }
.onboarding-result-modal { width: min(640px, calc(100% - 28px)); }
.onboarding-result-content { padding: 28px; }
.onboarding-result-content h2 { margin: 5px 0 8px; font-size: 25px; }
.onboarding-success-icon { display: grid; width: 48px; height: 48px; margin-bottom: 18px; place-items: center; border: 1px solid rgba(69,224,168,.3); border-radius: 15px; color: #8df0cb; background: rgba(69,224,168,.1); box-shadow: 0 0 28px rgba(69,224,168,.08); font-size: 22px; font-weight: 900; }
.onboarding-access-list { display: grid; gap: 9px; margin-top: 20px; }
.onboarding-access-list > div { display: grid; grid-template-columns: 138px minmax(0,1fr) 62px; gap: 12px; align-items: center; min-height: 52px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: rgba(4,12,22,.45); }
.onboarding-access-list span { color: #778ba5; font-size: 9px; font-weight: 750; text-transform: uppercase; }
.onboarding-access-list a, .onboarding-access-list strong { overflow: hidden; color: #d9e8fa; font-size: 11px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.onboarding-access-list a:hover { color: #78c8ff; text-decoration: underline; }
.onboarding-access-list button { min-height: 30px; padding: 0 8px; border: 1px solid rgba(99,186,252,.2); border-radius: 8px; color: #8ed1ff; background: rgba(52,126,248,.08); font-size: 9px; font-weight: 800; cursor: pointer; }
.onboarding-note { margin: 14px 0 0; color: #71849d; font-size: 10px; line-height: 1.5; }
.delete-tenant-modal { width: min(520px, calc(100% - 28px)); }
.danger-eyebrow { color: #ff8292; }
.destructive-warning { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 20px; padding: 14px; border: 1px solid rgba(255,100,120,.22); border-radius: 12px; color: #ffb4be; background: rgba(255,100,120,.06); }
.destructive-warning > span { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #07111f; background: #ff8292; font-size: 13px; font-weight: 900; }
.destructive-warning p { margin: 0; font-size: 11px; line-height: 1.55; }
.destructive-warning strong { color: #fff; }
.destructive-button { background: linear-gradient(135deg, #e7455c, #a92f4b); }
.tenant-access-modal { width: min(650px, calc(100% - 28px)); }
.tenant-access-links { display: grid; gap: 9px; margin-bottom: 24px; }
.tenant-access-links > div { display: grid; grid-template-columns: 130px minmax(0,1fr) 58px; gap: 10px; align-items: center; min-height: 48px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(4,12,22,.45); }
.tenant-access-links span { color: #778ba5; font-size: 9px; font-weight: 750; text-transform: uppercase; }
.tenant-access-links a { overflow: hidden; color: #8ed1ff; font-size: 10px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.tenant-access-links button { min-height: 29px; padding: 0 7px; border: 1px solid rgba(99,186,252,.2); border-radius: 7px; color: #8ed1ff; background: rgba(52,126,248,.08); font-size: 9px; font-weight: 800; cursor: pointer; }
.modal::backdrop { background: rgba(1,5,10,.72); backdrop-filter: blur(6px); }
.modal form { padding: 25px; }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
.modal-heading h2 { margin: 0; font-size: 23px; }
.modal small { display: block; margin-top: 7px; color: #73869f; font-size: 10px; }
.modal-description { margin: 0 0 20px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.modal-description strong { color: var(--text); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grid .full-field { grid-column: 1 / -1; }
.form-grid .url-field { grid-column: span 1; }
.form-grid select { height: 48px; padding: 0 12px; }
.connection-result { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; font-size: 11px; line-height: 1.5; }
.connection-result.success { border-color: rgba(69,224,168,.22); color: #9df0d1; background: rgba(69,224,168,.06); }
.connection-result.failure { border-color: rgba(255,100,120,.22); color: #ffb0ba; background: rgba(255,100,120,.06); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.toast { position: fixed; z-index: 20; right: 24px; bottom: 24px; max-width: 360px; padding: 13px 16px; border: 1px solid rgba(69,224,168,.2); border-radius: 12px; color: #c9f9e7; background: rgba(10,35,32,.96); box-shadow: 0 16px 45px rgba(0,0,0,.35); font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (max-width: 950px) {
  .login-layout { grid-template-columns: 1fr; gap: 42px; max-width: 620px; }
  .login-copy .eyebrow { margin-top: 48px; }
  .dashboard { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 10; width: 238px; transform: translateX(-100%); transition: transform .2s; }
  .dashboard.menu-open .sidebar { transform: translateX(0); }
  .menu-button { display: grid; }
  .workspace-header { justify-content: flex-start; gap: 16px; }
  .account { margin-left: auto; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 600px) {
  .login-layout { width: min(100% - 28px, 1180px); padding: 24px 0; }
  .login-copy { display: none; }
  .login-panel { padding: 26px 20px; border-radius: 20px; }
  .login-panel::before { content: ""; display: block; width: 116px; height: 47px; margin-bottom: 28px; background: url('/assets/global-energy-logo.png') center/cover no-repeat; filter: drop-shadow(1px 0 #fff) drop-shadow(-1px 0 #fff) drop-shadow(0 1px #fff) drop-shadow(0 -1px #fff); }
  .workspace-header { min-height: 82px; padding: 14px; }
  .workspace-header h1 { font-size: 20px; }
  .workspace-header .eyebrow, .account-copy { display: none; }
  .account { margin-left: auto; }
  .account #change-password-button { display: none; }
  .workspace-body { padding: 18px 14px 40px; }
  .summary-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .summary-grid article { min-height: 76px; padding: 12px; }
  .summary-icon { width: 34px; height: 34px; }
  .summary-grid strong { font-size: 20px; }
  .card-heading { align-items: flex-start; gap: 16px; padding: 18px 14px; }
  .card-heading h2 { font-size: 16px; }
  .card-heading .primary-button { width: 42px; overflow: hidden; padding: 0 12px; white-space: nowrap; }
  .filters { flex-direction: column; padding: 12px 14px; }
  .catalog-tabs { gap: 7px; padding: 12px 14px 0; }
  .catalog-tab { min-height: 54px; padding: 9px; }
  .catalog-tab-icon { width: 31px; height: 31px; }
  .catalog-tab small { display: none; }
  .catalog-results { padding: 14px; }
  .catalog-grid, .catalog-grid[data-type="CHANNEL"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .select-field { justify-content: space-between; }
  th, td { padding: 13px 14px; }
  th:nth-child(2), td:nth-child(2), th:nth-child(4), td:nth-child(4) { display: none; }
  td:last-child { min-width: 155px; }
  .provider-actions { grid-template-columns: repeat(2, max-content); min-width: 245px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full-field, .form-grid .url-field { grid-column: auto; }
  .provider-modal .modal-actions { flex-wrap: wrap; }
  .onboarding-access-list > div { grid-template-columns: 1fr 58px; }
  .onboarding-access-list span { grid-column: 1 / -1; }
  .tenant-access-links > div { grid-template-columns: 1fr 58px; }
  .tenant-access-links span { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
.tenant-line-description { margin-bottom: 16px; }
.tenant-line-grid { margin-bottom: 8px; }
.tenant-line-grid select { width: 100%; }

.programmed-intro { margin: 0; padding: 18px 24px; color: var(--muted); border-bottom: 1px solid var(--line); }
.programmed-channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; padding: 22px; }
.programmed-channel-card { padding: 20px; border: 1px solid #21436d; border-radius: 18px; background: linear-gradient(145deg, #0b1b30, #071321); }
.programmed-channel-card header { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.programmed-channel-card img, .programmed-channel-mark { width:54px; height:54px; object-fit:contain; border:1px solid #28568a; border-radius:14px; background:#07111f; display:grid; place-items:center; color:#5cbcff; font-size:24px; }
.programmed-channel-card h3 { margin:0; font-size:18px; }
.programmed-channel-card small { color:var(--muted); }
.programmed-channel-card .programmed-status { color:#5ef1b5; font-weight:800; font-size:12px; letter-spacing:.08em; }
.programmed-channel-card .programmed-actions { display:flex; gap:10px; margin-top:16px; }
.programmed-channel-card .programmed-actions button { flex:1; }
.programmed-movie-select { width:100%; min-height:180px; padding:8px; }
.programmed-channel-modal { width:min(720px, calc(100vw - 28px)); }
.programmed-channel-modal textarea { width:100%; resize:vertical; }
.programmed-channel-artwork-field{display:grid;grid-template-columns:minmax(0,1fr) auto 82px;align-items:end;gap:10px}.programmed-channel-artwork-field>div{display:grid;gap:7px}.programmed-channel-artwork-field>img{width:82px;height:64px;object-fit:cover;border:1px solid rgba(105,168,238,.3);border-radius:12px;background:#061322}.programmed-channel-artwork-field>small{grid-column:1/-1}.programmed-channel-upload{display:grid;place-items:center;min-height:44px;padding:0 14px;border:1px solid rgba(102,164,232,.3);border-radius:11px;cursor:pointer;background:#0a2038}.programmed-channel-upload input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}@media(max-width:620px){.programmed-channel-artwork-field{grid-template-columns:1fr 82px}.programmed-channel-artwork-field>div{grid-column:1/-1}}
.global-welcome-strip { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:18px 0 22px; padding:16px 18px; border:1px solid #244767; border-radius:18px; background:linear-gradient(110deg,#07172b,#0a1430); }
.global-welcome-strip > div { display:flex; align-items:center; gap:13px; }
.global-welcome-strip > div > span { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; color:#64cfff; background:#123665; }
.global-welcome-strip strong,.global-welcome-strip small { display:block; }
.global-welcome-strip small { margin-top:4px; color:#93a7c0; }
.welcome-presentation-dialog { width:min(980px,calc(100vw - 32px)); }
.welcome-admin-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:20px 0; }
.welcome-admin-grid label { position:relative; display:grid; gap:9px; padding:11px; border:1px solid #274766; border-radius:17px; background:#061425; cursor:pointer; }
.welcome-admin-grid label:has(input:checked) { border-color:#3a9cff; box-shadow:0 0 0 3px rgba(55,125,255,.2),0 12px 30px rgba(0,62,167,.25); }
.welcome-admin-grid input { position:absolute; right:12px; top:12px; width:19px; height:19px; accent-color:#428cff; }
.welcome-admin-grid img,.welcome-admin-custom > span { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px; background:#020817; }
.welcome-admin-custom > span { display:grid; place-items:center; color:#56c7ff; font-size:46px; }
.welcome-admin-inherit { padding:13px 16px; border:1px solid #294a68; border-radius:14px; background:#09192b; }
.welcome-admin-inherit input { accent-color:#438dff; }
.welcome-admin-file { display:grid; gap:8px; margin:15px 0; font-weight:800; }
.welcome-admin-file input { padding:14px; border:1px dashed #365b7c; border-radius:13px; color:#b9cce1; background:#061425; }
.welcome-admin-file small { color:#91a6bf; }
.welcome-admin-preview { display:grid; gap:9px; padding:15px; border:1px solid #244563; border-radius:18px; background:#020a16; }
.welcome-admin-preview > span { color:#5bc7ff; font-size:12px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.welcome-admin-preview img { width:min(100%,440px); max-height:440px; margin:auto; border-radius:14px; object-fit:contain; animation:admin-welcome-preview 3.8s ease-in-out infinite alternate; }
@keyframes admin-welcome-preview { from { transform:scale(.99); filter:drop-shadow(0 0 8px rgba(41,139,255,.15)); } to { transform:scale(1.01); filter:drop-shadow(0 0 24px rgba(91,92,255,.35)); } }
@media(max-width:720px){.welcome-admin-grid{grid-template-columns:1fr}.global-welcome-strip{align-items:stretch;flex-direction:column}}

.channel-order-dialog { width:min(880px,calc(100vw - 32px)); }
.channel-order-list { display:grid; gap:10px; max-height:min(58vh,640px); overflow:auto; padding:4px 8px 4px 2px; }
.channel-order-row { display:grid; grid-template-columns:56px minmax(0,1fr) 130px; align-items:center; gap:14px; padding:10px 12px; border:1px solid #244563; border-radius:15px; background:#061425; }
.channel-order-row img,.channel-order-placeholder { width:56px; height:56px; object-fit:contain; border:1px solid #28527d; border-radius:12px; background:#08172a; }
.channel-order-placeholder { display:grid; place-items:center; color:#58bdff; font-weight:900; }
.channel-order-copy { min-width:0; }
.channel-order-copy strong,.channel-order-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.channel-order-copy small { margin-top:4px; color:#8fa5be; }
.channel-order-row label { display:grid; grid-template-columns:auto 72px; align-items:center; justify-content:end; gap:8px; color:#9db0c7; font-size:12px; font-weight:800; }
.channel-order-row input { width:72px; padding:10px 8px; text-align:center; }
@media(max-width:620px){.channel-order-row{grid-template-columns:48px minmax(0,1fr) 82px}.channel-order-row img,.channel-order-placeholder{width:48px;height:48px}.channel-order-row label{grid-template-columns:1fr}.channel-order-row label span{display:none}.channel-order-row input{width:100%}}

.template-lifecycle { display:flex; align-items:center; justify-content:center; gap:10px; padding:18px 24px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,rgba(33,122,255,.05),rgba(115,62,255,.08)); overflow:auto; }
.template-lifecycle span { flex:0 0 auto; padding:8px 12px; border:1px solid #294f7c; border-radius:999px; color:#bcd5ef; background:#081a2e; font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.template-lifecycle i { color:#4f92e8; font-style:normal; }
.template-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:18px; padding:22px; }
.template-card { overflow:hidden; border:1px solid #24496f; border-radius:20px; background:linear-gradient(150deg,#0b1c31,#071321); box-shadow:0 18px 42px rgba(0,0,0,.18); }
.template-card-preview { display:grid; place-items:center; width:100%; aspect-ratio:16/8; overflow:hidden; border-bottom:1px solid #24496f; background:radial-gradient(circle at 60% 30%,rgba(75,88,255,.3),transparent 40%),linear-gradient(135deg,#071426,#102b55); }
.template-card-preview img { width:100%; height:100%; object-fit:cover; }
.template-card-preview span { color:#64cfff; font-size:52px; text-shadow:0 0 30px rgba(53,114,255,.8); }
.template-card-body { display:grid; gap:14px; padding:18px; }
.template-card-body header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.template-card-body h3 { margin:0; font-size:18px; }
.template-card-body header small { margin-top:5px; color:#8098b5; }
.template-card-body p { min-height:38px; margin:0; color:#90a6bf; font-size:12px; line-height:1.55; }
.template-metadata { display:flex; gap:7px; flex-wrap:wrap; }
.template-metadata span { padding:6px 9px; border:1px solid #244563; border-radius:9px; color:#9db5ce; background:#061425; font-size:10px; font-weight:800; }
.template-status { display:inline-flex; align-items:center; flex:0 0 auto; padding:7px 10px; border:1px solid #31557e; border-radius:999px; color:#acd1f7; background:rgba(41,116,204,.1); font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.template-status.status-testing,.template-status.status-qa { border-color:#806125; color:#ffd276; background:rgba(183,126,20,.12); }
.template-status.status-approved { border-color:#2b7566; color:#7ce8c6; background:rgba(33,158,120,.12); }
.template-status.status-published { border-color:#31805d; color:#66efad; background:rgba(31,180,105,.14); }
.template-modal { width:min(820px,calc(100vw - 28px)); }
.template-modal textarea { width:100%; resize:vertical; }
.template-compatibility { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0; padding:16px; border:1px solid #264765; border-radius:15px; }
.template-compatibility legend { padding:0 8px; color:#b9cce1; font-size:11px; font-weight:900; }
.template-compatibility label { display:flex; align-items:center; gap:7px; padding:7px 9px; border:1px solid #234563; border-radius:9px; color:#9fb4cc; background:#071526; font-size:10px; cursor:pointer; }
.template-compatibility input { width:auto; margin:0; accent-color:#438cff; }
.template-preview-upload { display:grid; gap:7px; margin-top:18px; }
.template-preview-upload input { padding:13px; border:1px dashed #365b7c; border-radius:12px; background:#061425; }
.template-preview-wrap { margin-top:12px; padding:10px; border:1px solid #244563; border-radius:15px; background:#020a16; }
.template-preview-wrap img { display:block; width:min(100%,520px); max-height:290px; margin:auto; border-radius:10px; object-fit:contain; }
.template-detail-modal { width:min(780px,calc(100vw - 28px)); }
.template-detail-summary-card { display:flex; align-items:center; gap:14px; padding:16px; border:1px solid #274b70; border-radius:16px; background:linear-gradient(110deg,#07182b,#0c1933); }
.template-detail-summary-card strong,.template-detail-summary-card small { display:block; }
.template-detail-summary-card small { margin-top:5px; }
.template-detail-actions { display:flex; justify-content:flex-end; gap:10px; margin:16px 0 20px; }
.template-version-heading { margin:0 0 12px; color:#dceaff; font-size:14px; }
.template-version-list { display:grid; gap:9px; max-height:42vh; overflow:auto; }
.template-version-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px; border:1px solid #213e5c; border-radius:13px; background:#061322; }
.template-version-row.active { border-color:#387bc7; box-shadow:inset 3px 0 #438cff; }
.template-version-row strong,.template-version-row small { display:block; }
.template-version-row small { margin-top:4px; }
.template-version-row p { margin:8px 0 0; color:#5fa8e9; font-size:9px; font-weight:800; letter-spacing:.04em; }
@media(max-width:620px){.template-grid{grid-template-columns:1fr;padding:14px}.template-lifecycle{justify-content:flex-start}.template-detail-actions{align-items:stretch;flex-direction:column}.template-version-row{align-items:stretch;flex-direction:column}}

.membership-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:22px; border-bottom:1px solid var(--line); }
.membership-plan-card { display:grid; gap:12px; padding:18px; border:1px solid #264a71; border-radius:18px; background:linear-gradient(145deg,#0b1d34,#071323); }
.membership-plan-card header { display:flex; justify-content:space-between; gap:10px; }
.membership-plan-card h3 { margin:0; font-size:17px; }
.membership-plan-card header small,.membership-plan-card > small { color:#87a0bc; }
.membership-plan-card p { min-height:38px; margin:0; color:#9bb0c8; font-size:11px; line-height:1.55; }
.membership-plan-price { color:#67cfff; font-size:22px; }
.membership-heading { display:flex; justify-content:space-between; padding:20px 24px 4px; }
.membership-heading strong,.membership-heading small { display:block; }
.membership-heading small { margin-top:5px; color:#8096af; }
.plan-modal,.membership-modal { width:min(820px,calc(100vw - 28px)); }
.plan-modal textarea { width:100%; resize:vertical; }
.plan-all-templates { display:flex; align-items:center; gap:9px; margin-top:18px; padding:13px; border:1px solid #2b5279; border-radius:12px; background:#07182a; }
.plan-all-templates input { width:auto; margin:0; accent-color:#438cff; }
.plan-template-options { display:flex; flex-wrap:wrap; gap:8px; width:100%; }
.plan-template-options label { display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid #284c6e; border-radius:10px; color:#abc1d9; background:#071526; }
.plan-template-options input { width:auto; margin:0; accent-color:#438cff; }
.membership-payment-box { margin-top:20px; padding:16px; border:1px solid #285178; border-radius:15px; background:linear-gradient(120deg,#07182b,#0a1830); }
.membership-payment-box > strong { display:block; margin-bottom:12px; color:#64cfff; }
.membership-history-box { margin-top:14px; padding:16px; border:1px solid #274967; border-radius:15px; background:#061322; }
.membership-history-box > strong { display:block; margin-bottom:11px; color:#d8e8fb; }
.membership-history-list { display:grid; gap:8px; max-height:190px; overflow:auto; }
.membership-history-list > div { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 10px; border:1px solid #1f3e5b; border-radius:10px; background:#07172a; }
.membership-history-list strong,.membership-history-list small { display:block; }
.membership-history-list time { flex:0 0 auto; color:#7890aa; font-size:9px; }
.memberships-card td:first-child strong,.memberships-card td:first-child small { display:block; }
.memberships-card td:first-child small { margin-top:4px; color:#758ca7; }
.status-badge.status-grace_period { color:#ffd175; background:rgba(225,157,33,.12); }
.status-badge.status-cancelled,.status-badge.status-expired { color:#a8b4c5; background:rgba(126,141,160,.1); }
@media(max-width:850px){.membership-plan-grid{grid-template-columns:1fr}.membership-heading{padding:18px 14px 4px}}

.application-flow { display:flex; align-items:center; justify-content:center; gap:10px; padding:18px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,rgba(22,119,255,.08),rgba(91,57,255,.1)); }
.application-flow span { padding:7px 11px; border:1px solid #2a527e; border-radius:999px; color:#b9d4ef; background:#07182b; font-size:9px; font-weight:900; text-transform:uppercase; }
.application-flow i { color:#4c9bf1; font-style:normal; }
.application-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(350px,1fr)); gap:16px; padding:22px; border-bottom:1px solid var(--line); }
.application-card { display:grid; grid-template-columns:74px 1fr; gap:16px; padding:18px; border:1px solid #254a72; border-radius:18px; background:linear-gradient(145deg,#0a1d35,#061323); }
.application-card-mark { display:grid; place-items:center; width:70px; height:70px; border:1px solid #3477bd; border-radius:18px; color:#67ceff; background:radial-gradient(circle at 50% 20%,rgba(89,72,255,.38),transparent 55%),#081a31; font-size:30px; }
.application-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.application-card h3 { margin:0; font-size:17px; }
.application-card > div > small { color:#7f98b4; }
.application-card p { margin:10px 0; color:#93abc3; font-size:10px; overflow-wrap:anywhere; }
.application-actions { display:flex; gap:8px; margin-top:13px; }
.application-actions button { flex:1; }
.application-modal { width:min(820px,calc(100vw - 28px)); }
.application-artifact { display:inline-block; max-width:180px; overflow:hidden; color:#69d4ff; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.domains-intro { margin:0 0 18px;color:#879ab4;font-size:12px; }.domain-token { display:block;max-width:260px;overflow:hidden;color:#70d6ff;font-size:10px;text-overflow:ellipsis;white-space:nowrap; }.domains-card td:last-child { display:flex;flex-wrap:wrap;gap:6px; }.domain-modal { max-width:760px; }
.monitoring-summary { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:22px;border-bottom:1px solid var(--line); }.monitoring-summary article { display:grid;gap:7px;padding:16px;border:1px solid #244968;border-radius:15px;background:linear-gradient(145deg,#0a1c32,#061321); }.monitoring-summary small { color:#7f96af;font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase; }.monitoring-summary strong { color:#f2f7ff;font-size:21px; }.monitoring-summary article[data-metric="api"] strong,.monitoring-summary article[data-metric="database"] strong,.monitoring-summary article[data-metric="onlineProviders"] strong { color:#65e6b2; }.monitoring-summary article[data-metric="offlineProviders"] strong,.monitoring-summary article[data-metric="suspendedTenants"] strong { color:#ffb06d; }.monitoring-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0 22px; }.monitoring-list { display:grid;gap:8px;padding:14px 0 20px; }.monitoring-list article { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid #1f3d58;border-radius:12px;background:#061321; }.monitoring-list article div { min-width:0; }.monitoring-list strong,.monitoring-list small { display:block; }.monitoring-list small { max-width:520px;margin-top:4px;overflow:hidden;color:#7890a9;font-size:9px;text-overflow:ellipsis;white-space:nowrap; }.monitoring-syncs { padding:14px 22px 24px; }.status-badge.status-online,.status-badge.status-completed { color:#71e9b7;background:rgba(40,185,118,.12); }.status-badge.status-offline,.status-badge.status-warning,.status-badge.status-unknown { color:#ffb274;background:rgba(221,132,43,.12); }.status-badge.status-running { color:#74c8ff;background:rgba(40,132,221,.12); }
@media(max-width:1050px){.monitoring-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.monitoring-grid{grid-template-columns:1fr}}@media(max-width:620px){.monitoring-summary{grid-template-columns:1fr;padding:14px}.monitoring-grid{padding:0 14px}.monitoring-syncs{padding:14px}.monitoring-list article{align-items:flex-start;flex-direction:column}}
.status-badge.status-queued { color:#83c9ff; background:rgba(52,142,235,.12); }
.status-badge.status-building { color:#ffd174; background:rgba(230,161,36,.12); }
.status-badge.status-succeeded,.status-badge.status-published { color:#75e6b7; background:rgba(48,191,126,.12); }
.status-badge.status-failed { color:#ff9aab; background:rgba(225,70,95,.12); }
.audit-actions{display:flex;gap:10px;align-items:center}.audit-actions input{min-width:290px}.audit-card td:nth-child(2) strong,.audit-card td:nth-child(2) small,.audit-card td:nth-child(4) strong,.audit-card td:nth-child(4) small{display:block}.audit-card td small{max-width:240px;margin-top:4px;overflow:hidden;color:#7890a9;text-overflow:ellipsis;white-space:nowrap}@media(max-width:720px){.audit-actions{align-items:stretch;flex-direction:column}.audit-actions input{min-width:0}}
.connection-scope-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;font-size:9px;font-weight:900;white-space:nowrap}.connection-scope-badge::before{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;content:""}.connection-local{color:#70e4b3;background:rgba(44,190,128,.12)}.connection-remote{color:#72caff;background:rgba(47,139,224,.12)}.connection-unknown{color:#8ca0b7;background:rgba(113,133,155,.1)}
.now-playing{display:grid;gap:3px;min-width:150px;max-width:240px}.now-playing strong{overflow:hidden;color:#f3f8ff;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.now-playing small{color:#60e7ba;font-size:8px;font-weight:900;letter-spacing:.08em}.now-playing.is-active::before{color:#55e6b3;content:"● EN REPRODUCCIÓN";font-size:8px;font-weight:900;letter-spacing:.08em}.now-playing.is-idle{color:#71849d;font-size:9px}
.now-playing-elapsed{color:#8ed1ff;font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}
.device-last-seen{display:inline-flex;align-items:center;gap:6px;min-width:116px;color:#9dafc4;font-size:9px;line-height:1.35}.device-last-seen.is-online{color:#70e4b3;font-weight:850}.device-last-seen.is-online::before{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;content:""}
.tenant-workflow-modal{width:min(920px,calc(100vw - 28px))}.tenant-workflow-content{padding:24px}.tenant-workflow-summary{display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,1fr) auto;gap:18px;align-items:center;margin:20px 0;padding:18px;border:1px solid #2b5379;border-radius:16px;background:linear-gradient(120deg,#0b213b,#0a1730)}.tenant-workflow-summary div:first-child{display:grid;gap:4px}.tenant-workflow-summary small{color:#6fcaff;font-size:9px;font-weight:900;letter-spacing:.1em}.tenant-workflow-summary strong{color:#f4f8ff;font-size:16px}.tenant-workflow-summary span{color:#849bb6;font-size:10px}.tenant-workflow-summary b{color:#68d5ff;font-size:23px}.workflow-meter{height:8px;overflow:hidden;border-radius:999px;background:#142b43}.workflow-meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2b94ff,#6845ff)}.tenant-workflow-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-height:52vh;overflow:auto;padding-right:4px}.workflow-step{display:flex;gap:11px;align-items:center;padding:12px;border:1px solid #203d58;border-radius:12px;background:#071525}.workflow-step>span{display:grid;width:30px;height:30px;flex:0 0 auto;place-items:center;border-radius:9px;color:#7891ad;background:#10243a;font-size:9px;font-weight:900}.workflow-step strong,.workflow-step small{display:block}.workflow-step strong{color:#dbe9f8;font-size:11px}.workflow-step small{margin-top:3px;color:#738ba6;font-size:9px}.workflow-completed{border-color:rgba(62,194,139,.25);background:rgba(25,108,82,.08)}.workflow-completed>span{color:#6ee7b7;background:rgba(47,190,132,.14)}.workflow-current{border-color:#347dd2;box-shadow:inset 3px 0 #3d9cff;background:linear-gradient(110deg,rgba(23,99,185,.16),#071525)}.workflow-current>span{color:#081321;background:#64cfff}.workflow-current small{color:#6fcaff}.workflow-loader{grid-column:1/-1!important;color:#8aa3bf!important}.tenant-workflow-modal .modal-actions{margin-top:20px}@media(max-width:650px){.tenant-workflow-content{padding:16px}.tenant-workflow-summary{grid-template-columns:1fr}.tenant-workflow-steps{grid-template-columns:1fr}}
@media(max-width:680px){.application-flow{justify-content:flex-start;overflow:auto}.application-grid{grid-template-columns:1fr;padding:14px}.application-card{grid-template-columns:54px 1fr}.application-card-mark{width:54px;height:54px}.application-actions{flex-direction:column}}