:root {
  --red: #ed1c24;
  --red-dark: #a70f15;
  --black: #050505;
  --panel: #0c0c0d;
  --panel-2: #121214;
  --line: #29292d;
  --muted: #96969e;
  --white: #f6f6f7;
  --sidebar: 250px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--black); color: var(--white); font-family: "Poppins", sans-serif; font-size: 14px; }
button, input, textarea, select { font: inherit; }
button, a, label[for] { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

.app { min-height: 100vh; background: var(--black); }
.nav-toggle { position: fixed; opacity: 0; pointer-events: none; }
.sb { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar); display: flex; flex-direction: column; background: #080809; border-right: 1px solid var(--line); box-shadow: 14px 0 35px rgba(0,0,0,.24); }
.sb-brand { min-height: 86px; display: flex; align-items: center; padding: 0 25px; border-bottom: 1px solid var(--line); font-size: 27px; font-weight: 900; letter-spacing: -1.5px; }
.sb-brand span, .top-logo span, .logo span { color: var(--white); }
.sb-brand b, .top-logo b, .logo b { color: var(--red); }
.sb-tag { margin-left: 9px; padding: 3px 7px; color: #fff; background: var(--red); border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.sidebar-close { display: none; margin: 0 0 0 auto; width: 34px; height: 34px; align-items: center; justify-content: center; color: #aaa; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; font-size: 14px; }
.sb nav { flex: 1; overflow-y: auto; padding: 18px 12px; scrollbar-width: thin; scrollbar-color: #36363b transparent; }
.sb nav a { position: relative; display: flex; align-items: center; gap: 14px; min-height: 47px; padding: 0 15px; margin: 3px 0; color: #b8b8bf; border: 1px solid transparent; border-radius: 5px; cursor: pointer; font-size: 13px; font-weight: 500; transition: .18s ease; }
.sb nav a i { width: 18px; color: #707078; text-align: center; font-size: 15px; }
.sb nav a:hover { color: #fff; background: #141416; border-color: #242428; }
.sb nav a.active { color: #fff; background: linear-gradient(90deg, rgba(237,28,36,.2), rgba(237,28,36,.04)); border-color: rgba(237,28,36,.38); }
.sb nav a.active::before { content: ""; position: absolute; left: -13px; top: 8px; bottom: 8px; width: 3px; background: var(--red); box-shadow: 0 0 13px rgba(237,28,36,.85); }
.sb nav a.active i { color: var(--red); }
.logout { min-height: 62px; margin: 0; padding: 0 27px; color: #aaaab1; background: #0b0b0c; border: 0; border-top: 1px solid var(--line); text-align: left; cursor: pointer; }
.logout i { margin-right: 12px; color: var(--red); }
.logout:hover { color: #fff; background: #131315; }

.main { min-height: 100vh; margin-left: var(--sidebar); display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; min-height: 86px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 0 32px; background: rgba(7,7,8,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.topbar-left { display: flex; align-items: center; gap: 18px; }
.hamburger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; color: #fff; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.top-logo { display: none; font-size: 21px; font-weight: 900; letter-spacing: -1px; }
.topbar h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: .2px; text-align: center; }
.who { justify-self: end; display: grid; grid-template-columns: 35px auto; align-items: center; column-gap: 10px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .8px; }
.who .profile-icon { grid-row: 1 / 3; width: 35px; height: 35px; display: grid; place-items: center; color: #fff; background: #171719; border: 1px solid #35353a; border-radius: 50%; }
.who b { color: #fff; font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.content { flex: 1; width: 100%; max-width: 1500px; margin: 0 auto; padding: 32px; }
.footer { min-height: 58px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 0 32px; color: #66666e; background: #080809; border-top: 1px solid var(--line); font-size: 10px; letter-spacing: .4px; }
.footer span:first-child { color: #9999a0; font-weight: 600; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.stat, .table { background: linear-gradient(145deg, #111113, #0b0b0c); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.stat { position: relative; min-height: 128px; padding: 22px; overflow: hidden; }
.stat::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 2px; background: var(--red); }
.stat-icon { position: absolute; right: 20px; top: 20px; width: 36px; height: 36px; display: grid; place-items: center; color: var(--red); background: rgba(237,28,36,.08); border: 1px solid rgba(237,28,36,.22); border-radius: 4px; }
.stat-label { color: #898990; font-size: 11px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; }
.stat-value { margin-top: 15px; font-size: 29px; font-weight: 700; }
.toolbar { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.search { max-width: 420px; }
.table { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 15px 16px; border-bottom: 1px solid #242427; text-align: left; white-space: nowrap; }
th { color: #777780; background: #0a0a0b; font-size: 10px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; }
td { color: #d2d2d6; font-size: 12px; }
tbody tr:hover { background: rgba(255,255,255,.018); }
.thumb { width: 64px; height: 38px; background: #19191b center/cover no-repeat; border: 1px solid #313136; border-radius: 3px; }
.pager { min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; color: var(--muted); font-size: 11px; }
.pager button, .row-actions button { min-width: 33px; height: 32px; color: #c5c5ca; background: #151517; border: 1px solid #333338; border-radius: 3px; cursor: pointer; }
.pager button:disabled, .row-actions button:disabled { opacity: .35; cursor: default; }
.row-actions { display: flex; align-items: center; gap: 6px; }
.row-actions .del, button.del { color: #ff6469; }
.pill { display: inline-flex; padding: 4px 8px; color: #ddd; background: #222225; border: 1px solid #343439; border-radius: 20px; font-size: 9px; font-weight: 600; text-transform: uppercase; }
.pill.green { color: #6ce89a; border-color: rgba(64,190,112,.35); background: rgba(64,190,112,.09); }
.pill.gray { color: #888891; }

input, textarea, select { width: 100%; min-height: 43px; padding: 10px 12px; color: #f1f1f2; background: #0b0b0c; border: 1px solid #343439; border-radius: 4px; outline: 0; }
textarea { min-height: 110px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--red); box-shadow: 0 0 0 2px rgba(237,28,36,.09); }
label { display: block; margin: 14px 0 7px; color: #aaaab1; font-size: 11px; font-weight: 500; }
label.check { display: flex; align-items: center; gap: 9px; }
label.check input { width: 15px; min-height: 15px; accent-color: var(--red); }
.btn-red, .save, .auth-card button[type="submit"] { min-height: 42px; padding: 0 17px; color: #fff; background: var(--red); border: 1px solid #ff3e45; border-radius: 4px; cursor: pointer; font-weight: 600; }
.btn-red:hover, .save:hover { background: #ff252d; }
.cancel, .uploadbtn { min-height: 40px; padding: 0 15px; color: #d6d6da; background: #171719; border: 1px solid #39393e; border-radius: 4px; cursor: pointer; }
.upload-row, .modal-row { display: flex; gap: 12px; }
.upload-row input { flex: 1; }
.upload-row button { flex: 0 0 auto; }
.modal-row > * { flex: 1; min-width: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.empty { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 12px; color: #777780; text-align: center; }
.empty i { color: var(--red); font-size: 24px; }

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.78); backdrop-filter: blur(7px); }
.modal-card { width: min(720px,100%); max-height: 90vh; overflow: auto; padding: 26px; background: #101012; border: 1px solid #3a3a3f; border-top: 2px solid var(--red); border-radius: 6px; box-shadow: 0 25px 70px #000; }
.modal-card h2 { margin: 0 0 18px; font-size: 20px; }
.toast { position: fixed; z-index: 120; right: 24px; bottom: 24px; max-width: 360px; padding: 13px 16px; color: #fff; background: #19191c; border: 1px solid #3b3b40; border-left: 3px solid var(--red); border-radius: 4px; box-shadow: 0 14px 40px #000; }
.toast.ok { border-left-color: #35c873; }
.toast.err, .err { color: #ff7479; }

.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 20%, #1d080a, #050505 45%); }
.auth-card { width: min(410px,100%); padding: 38px; background: #0d0d0f; border: 1px solid #343438; border-top: 3px solid var(--red); border-radius: 7px; box-shadow: 0 28px 80px #000; }
.auth-card .logo { font-size: 34px; font-weight: 900; letter-spacing: -2px; text-align: center; }
.auth-card .sub, .auth-card .foot { color: var(--muted); text-align: center; }
.auth-card .sub { margin: 2px 0 25px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.auth-card button[type="submit"] { width: 100%; margin-top: 20px; }
.auth-card .foot { margin: 25px 0 0; font-size: 9px; }

.modal-card:has(.news-form) { width: min(1120px,100%); padding: 28px 30px 26px; background: linear-gradient(135deg,#0d1014,#090b0e); border-color: #30343a; border-top-width: 1px; }
.modal-card:has(.news-form) > h2 { margin: 0 0 24px; font-size: 24px; font-weight: 600; }
.news-form-grid { display: grid; grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr); gap: 34px; }
.news-form-left { padding-right: 34px; border-right: 1px solid #292d32; }
.news-form label { margin-top: 0; margin-bottom: 9px; color: #f0f0f2; font-size: 12px; }
.news-form-left input, .news-form-left textarea, .news-media-url { margin-bottom: 22px; background: rgba(7,9,12,.7); border-color: #30343a; }
.news-form-left textarea { min-height: 144px; }
.news-media-field { margin-bottom: 23px; }
.news-media-field .news-media-url { min-height: 39px; margin-bottom: 9px; font-size: 11px; }
.news-upload-box { position: relative; aspect-ratio: 16/9; min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; color: #eee; background: rgba(12,15,19,.72); border: 1px dashed #62666d; border-radius: 7px; text-align: center; transition: border-color .18s, background .18s; }
.news-upload-box.dragging { background: rgba(237,28,36,.08); border-color: var(--red); }
.news-media-empty { display: flex; flex-direction: column; align-items: center; padding: 20px; pointer-events: none; }
.news-media-empty > i { margin-bottom: 8px; color: #e7e7e9; font-size: 34px; }
.news-media-empty > strong { font-size: 13px; font-weight: 500; }
.news-media-empty > small { margin-top: 5px; color: #858891; font-size: 10px; }
.news-media-preview { position: absolute; inset: 0; background: #050607; }
.news-media-preview img, .news-media-preview video { width: 100%; height: 100%; display: block; object-fit: contain; }
.news-file-preview { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 16px; color: #ddd; }
.news-file-preview i { color: var(--red); font-size: 30px; }
.news-file-preview strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.news-file-preview small { color: #888b92; font-size: 9px; }
.news-media-actions { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: flex; gap: 7px; }
.news-media-actions label, .news-media-actions button { min-height: 34px; margin: 0; padding: 8px 12px; color: #fff; background: rgba(10,10,12,.9); border: 1px solid #555960; border-radius: 4px; cursor: pointer; font-size: 10px; }
.news-media-actions label:hover { border-color: var(--red); }
.news-media-remove { color: #ff777c !important; }
.news-form .save:disabled { opacity: .58; cursor: progress; }
.news-featured { width: fit-content; margin-top: 2px !important; font-size: 12px !important; }
.news-form > .modal-actions { padding-top: 22px; border-top: 1px solid #24282d; }
.news-form > .modal-actions .cancel { min-width: 118px; }
.news-form > .modal-actions .save { min-width: 190px; background: linear-gradient(135deg,#f20e18,#c90009); }
.shorts-form-grid { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); }
.shorts-media-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; align-items: start; }
.shorts-media-grid .news-media-field { min-width: 0; }
.news-upload-box.portrait { width: min(100%,260px); aspect-ratio: 9/16; min-height: 0; margin: 0 auto; }
.shorts-form .news-media-url { margin-bottom: 9px; }
.live-form-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 30px 34px; }
.live-form-details { padding-right: 34px; border-right: 1px solid #292d32; }
.live-form-details input, .live-form-details textarea, .live-form-details select { margin-bottom: 20px; }
.live-form-details textarea { min-height: 128px; }
.live-form-media .news-media-field { margin: 0; }
.live-form-stream { grid-column: 1 / -1; }
.live-form-stream > label { margin: 0 0 9px; }
.live-form-stream > label span { color: #777b83; font-size: 9px; }
.live-form-stream > input { margin-bottom: 20px; }
.stream-type-segments { display: grid; grid-template-columns: repeat(4,1fr); margin-bottom: 18px; border: 1px solid #34383e; border-radius: 5px; overflow: hidden; }
.stream-type-segments label { margin: 0; }
.stream-type-segments input { position: absolute; opacity: 0; pointer-events: none; }
.stream-type-segments span { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #c4c5c9; background: #0b0d10; border-right: 1px solid #34383e; cursor: pointer; font-size: 11px; }
.stream-type-segments label:last-child span { border-right: 0; }
.stream-type-segments input:checked + span { color: #fff; background: linear-gradient(90deg,rgba(237,28,36,.22),rgba(237,28,36,.07)); box-shadow: inset 0 0 0 1px var(--red); }
.stream-type-segments i { color: #eee; }
.live-stream-warning { margin: -7px 0 16px; font-size: 10px; }
.live-toggle { width: fit-content; display: grid !important; grid-template-columns: 42px auto; align-items: center; column-gap: 10px; cursor: pointer; }
.live-toggle > input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track { grid-row: 1 / 3; position: relative; width: 42px; height: 23px; background: #343840; border-radius: 20px; transition: .18s; }
.toggle-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; background: #f4f4f5; border-radius: 50%; transition: .18s; }
.live-toggle input:checked + .toggle-track { background: var(--red); }
.live-toggle input:checked + .toggle-track::after { transform: translateX(19px); }
.live-toggle b { color: #eee; font-size: 11px; font-weight: 500; }
.live-toggle small { grid-column: 2; color: #858891; font-size: 9px; }
.programs-form-grid { grid-template-columns: minmax(0,.84fr) minmax(0,1.16fr); }
.programs-form-details select { margin-bottom: 22px; background: rgba(7,9,12,.7); border-color: #30343a; }
.programs-media-list { display: grid; gap: 17px; }
.programs-media-list .news-media-field { margin: 0; }
.programs-media-list .news-upload-box { min-height: 150px; }
.programs-media-list .news-upload-box.banner { aspect-ratio: 16/5; min-height: 112px; }
.programs-media-list .news-media-empty { padding: 13px; }
.programs-media-list .news-media-empty > i { font-size: 27px; }
.backup-panel { max-width: 760px; margin: 0 auto; display: grid; gap: 16px; }
.backup-option { min-height: 128px; display: flex; align-items: center; gap: 18px; padding: 24px; background: linear-gradient(145deg,#111113,#0b0b0c); border: 1px solid var(--line); border-radius: 6px; }
.backup-option > i { width: 50px; height: 50px; flex: 0 0 auto; display: grid; place-items: center; color: var(--red); background: rgba(237,28,36,.08); border: 1px solid rgba(237,28,36,.25); border-radius: 5px; font-size: 20px; }
.backup-option input[type="file"] { flex: 1; min-width: 0; }
.backup-option .save { flex: 0 0 auto; min-width: 170px; }

@media (max-width: 1050px) {
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sb { transform: translateX(-100%); transition: transform .22s ease; }
  .nav-toggle:checked ~ .sb { transform: translateX(0); }
  .nav-toggle:checked ~ .main::before { content: ""; position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,.64); }
  .main { margin-left: 0; }
  .hamburger, .top-logo { display: flex; }
  .sidebar-close { display: flex; }
}

@media (max-width: 680px) {
  .topbar { min-height: 72px; grid-template-columns: 1fr auto; padding: 0 16px; }
  .topbar h1 { grid-column: 1 / -1; position: absolute; left: 50%; transform: translateX(-50%); max-width: 36vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
  .who > span:not(.profile-icon), .who b { display: none; }
  .content { padding: 18px 14px; }
  .stats { grid-template-columns: 1fr; gap: 12px; }
  .toolbar, .modal-row { flex-direction: column; }
  .search { max-width: none; }
  .footer { padding: 14px 16px; flex-direction: column; align-items: flex-start; }
  .auth-card { padding: 28px 22px; }
  .modal-card:has(.news-form) { padding: 22px 17px; }
  .news-form-grid { grid-template-columns: 1fr; gap: 4px; }
  .news-form-left { padding-right: 0; border-right: 0; }
  .news-upload-box { min-height: 150px; }
  .news-form > .modal-actions { flex-direction: column-reverse; }
  .news-form > .modal-actions button { width: 100%; }
  .shorts-media-grid { grid-template-columns: 1fr; }
  .news-upload-box.portrait { width: min(100%,300px); }
  .live-form-grid { grid-template-columns: 1fr; gap: 5px; }
  .live-form-details { padding-right: 0; border-right: 0; }
  .live-form-stream { grid-column: auto; }
  .stream-type-segments { grid-template-columns: repeat(2,1fr); }
  .programs-form-grid { grid-template-columns: 1fr; }
  .programs-media-list .news-upload-box.banner { min-height: 100px; }
  .backup-option { align-items: stretch; flex-direction: column; }
  .backup-option .save { width: 100%; }
}