:root {
    color-scheme: dark;
    --bg: #0b0d14; --panel: #131722; --line: #252c3c; --text: #f4f6fb; --muted: #8e98ad; --faint: #5e687e;
    --violet: #9078ff; --violet-2: #6c52ee; --green: #32d583; --red: #f06f7d; --blue: #54a8ff; --shadow: 0 18px 48px rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { background-image: radial-gradient(circle at 85% -20%, rgba(109,82,238,.15), transparent 35rem), radial-gradient(circle at 15% 110%, rgba(50,213,131,.05), transparent 28rem); }
button, input, textarea, select { font: inherit; } button { cursor: pointer; } .hidden { display: none !important; }
.app-shell { max-width: 1680px; margin: 0 auto; min-height: 100vh; padding: 0 28px 42px; }
.topbar { height: 86px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.06); }
.brand { display: flex; gap: 12px; align-items: center; }.brand-mark { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg,var(--violet),#5b3be0); box-shadow: 0 7px 22px rgba(108,82,238,.32); font-size: 17px; padding-left: 2px; }.brand strong,.brand span { display:block; }.brand strong { letter-spacing:-.02em; font-size:16px; }.brand span { margin-top:2px; color:var(--muted); font-size:11px; }
.button { border: 0; border-radius: 9px; padding: 10px 15px; color: var(--text); font-size: 13px; font-weight: 650; transition: transform .15s, background .15s, opacity .15s; }.button:hover { transform: translateY(-1px); }.button:disabled { cursor: wait; opacity: .65; transform: none; }.button-primary { background: linear-gradient(135deg,var(--violet),var(--violet-2)); box-shadow: 0 8px 22px rgba(108,82,238,.22); }.button-ghost { color:#b8bfd0; background:#1b2130; border:1px solid #293146; }.button-icon { font-size:16px; vertical-align:-1px; margin-right:5px; }.danger-text { color:#e98a96; }
.layout { display:grid; grid-template-columns:295px minmax(0,1fr); gap:22px; padding-top:23px; }.panel { background:rgba(19,23,34,.92); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow); }.sidebar { min-height:calc(100vh - 132px); padding:21px 14px 15px; display:flex; flex-direction:column; }.sidebar-heading { display:flex; justify-content:space-between; align-items:flex-start; padding:0 7px 17px; }.eyebrow { color:#8f7cff; text-transform:uppercase; letter-spacing:.14em; font-size:10px; font-weight:750; margin:0 0 6px; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:0; font-size:18px; letter-spacing:-.03em; } h2 { margin-bottom:9px; font-size:clamp(24px,3vw,34px); line-height:1.1; letter-spacing:-.045em; } h3 { margin-bottom:0; font-size:16px; letter-spacing:-.02em; }.count-pill,.heading-count { color:#b9adff; background:rgba(144,120,255,.12); border-radius:20px; padding:3px 8px; font-size:11px; font-weight:700; }
.list-search { display:flex; gap:8px; align-items:center; color:var(--faint); margin:0 1px 12px; padding:9px 11px; background:#0e121c; border:1px solid #202738; border-radius:8px; }.list-search input,.channel-toolbar input,.channel-toolbar select { width:100%; border:0; outline:0; color:var(--text); background:transparent; font-size:12px; }.playlist-list { flex:1; overflow:auto; padding-right:2px; }.playlist-item { width:100%; display:flex; align-items:center; gap:10px; padding:11px 9px; border:1px solid transparent; border-radius:9px; color:var(--text); background:transparent; text-align:left; }.playlist-item:hover { background:#181e2d; }.playlist-item.selected { background:rgba(108,82,238,.14); border-color:rgba(144,120,255,.22); }.playlist-icon { display:grid; place-items:center; flex:0 0 29px; height:29px; color:#aa9bff; background:#282143; border-radius:8px; }.playlist-item-copy { flex:1; min-width:0; }.playlist-item-copy strong,.playlist-item-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.playlist-item-copy strong { font-size:12px; font-weight:650; }.playlist-item-copy small { margin-top:3px; color:var(--muted); font-size:10px; }.mini-status,.pulse-dot { display:block; width:7px; height:7px; border-radius:50%; background:#657087; }.mini-status.has-online,.pulse-dot { background:var(--green); box-shadow:0 0 0 4px rgba(50,213,131,.09); }.mini-status.all-offline { background:var(--red); }.sidebar-note { display:flex; gap:9px; align-items:flex-start; padding:14px 8px 0; color:var(--faint); font-size:10px; line-height:1.45; }
.content { min-width:0; }.welcome-panel { min-height:calc(100vh - 132px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; text-align:center; }.welcome-panel .muted { max-width:510px; line-height:1.7; }.welcome-art { position:relative; display:grid; place-items:center; width:82px; height:82px; margin-bottom:28px; border:1px solid rgba(144,120,255,.26); border-radius:25px; background:linear-gradient(140deg,#262042,#161b2c); color:#b7aaff; font-size:27px; padding-left:3px; }.welcome-art i { position:absolute; width:5px; height:5px; background:var(--violet); border-radius:50%; opacity:.6; }.welcome-art i:nth-child(2){top:14px;right:17px}.welcome-art i:nth-child(3){bottom:17px;left:14px;background:var(--green)}.welcome-art i:nth-child(4){bottom:11px;right:25px;background:var(--blue)}.muted { color:var(--muted); font-size:13px; }.welcome-panel .button { margin-top:14px; }
.detail-header { display:flex; gap:18px; align-items:flex-end; justify-content:space-between; margin:4px 2px 21px; }.breadcrumb { display:flex; gap:9px; align-items:center; margin-bottom:12px; color:var(--faint); font-size:11px; }.breadcrumb b { color:#4c566d; }.breadcrumb span:last-child { color:#a7afbf; }.detail-header h2 { margin-bottom:9px; font-size:28px; }.detail-meta { display:flex; gap:8px; color:var(--muted); font-size:11px; }.detail-meta b { color:#4a5367; }.detail-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }.stat-card { display:flex; align-items:center; gap:11px; padding:15px 16px; background:rgba(19,23,34,.8); border:1px solid var(--line); border-radius:11px; }.stat-card small,.stat-card strong { display:block; }.stat-card small { color:var(--muted); font-size:10px; }.stat-card strong { margin-top:5px; font-size:19px; letter-spacing:-.04em; }.stat-card .stat-date { font-size:12px; letter-spacing:-.02em; }.stat-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; font-size:13px; }.stat-icon.violet{color:#b8aaff;background:#272041}.stat-icon.green{color:var(--green);background:#17392e}.stat-icon.red{color:var(--red);background:#3d2028}.stat-icon.blue{color:var(--blue);background:#1b3149}
.player-grid { display:grid; grid-template-columns:minmax(360px,.93fr) minmax(420px,1.07fr); gap:16px; align-items:stretch; }.player-panel,.channels-panel { min-height:535px; padding:18px; }.section-heading { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:15px; }.live-badge { color:#eb7d89; font-size:10px; font-weight:750; letter-spacing:.08em; padding-top:4px; }.online-summary { color:var(--muted); font-size:10px; padding-top:5px; }.video-wrap { position:relative; aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden; border:1px solid #252c3d; border-radius:9px; background:#090b11; }.video-wrap video { width:100%; height:100%; display:none; object-fit:contain; background:#05060a; }.video-wrap video.visible { display:block; }.video-placeholder { text-align:center; color:var(--faint); font-size:11px; }.video-placeholder p { margin:12px 0 0; }.play-disc { display:grid; place-items:center; width:46px; height:46px; margin:auto; padding-left:2px; color:#c3baff; background:#272042; border:1px solid #403371; border-radius:50%; font-size:14px; }.player-footer { display:flex; justify-content:space-between; gap:10px; align-items:center; padding-top:12px; color:var(--muted); font-size:11px; }.player-footer span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.player-links { display:flex; align-items:center; gap:12px; white-space:nowrap; } .player-footer a { color:#a89bff; text-decoration:none; white-space:nowrap; } .copy-button { padding:0; color:#a89bff; background:transparent; border:0; font-size:11px; } .copy-button:hover:not(:disabled) { color:#c9c0ff; } .copy-button:disabled { color:#59647a; cursor:not-allowed; }.player-hint { margin:12px 0 0; padding:9px 10px; color:#c2b8ff; background:#211c3c; border:1px solid #3a3161; border-radius:7px; font-size:10px; line-height:1.45; }
.channel-toolbar { display:grid; grid-template-columns:1fr 145px; gap:8px; margin-bottom:9px; }.channel-toolbar input,.channel-toolbar select { min-width:0; padding:9px 10px; color:#aab2c3; background:#0e121c; border:1px solid #222a3b; border-radius:7px; outline:0; font-size:11px; }.channel-toolbar select { cursor:pointer; }.channel-list { max-height:422px; overflow-y:auto; padding-right:2px; }.channel-row { width:100%; display:flex; align-items:center; gap:9px; padding:9px 7px; border:1px solid transparent; border-radius:8px; color:var(--text); background:transparent; text-align:left; }.channel-row:hover,.channel-row.active { background:#1a2030; border-color:#293247; }.channel-number { width:20px; color:#566176; font-size:10px; }.channel-logo { flex:0 0 27px; width:27px; height:27px; object-fit:contain; border-radius:6px; }.placeholder-logo { display:grid; place-items:center; color:#a698ff; background:#282143; font-size:10px; }.channel-copy { flex:1; min-width:0; }.channel-copy strong,.channel-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.channel-copy strong { font-size:11px; }.channel-copy small { margin-top:3px; color:var(--faint); font-size:10px; }.channel-status { display:flex; align-items:center; gap:5px; color:#7a8498; font-size:9px; }.channel-status i { width:6px; height:6px; border-radius:50%; background:#657087; }.channel-status.online { color:var(--green); }.channel-status.online i { background:var(--green); box-shadow:0 0 0 3px rgba(50,213,131,.1); }.channel-status.offline { color:var(--red); }.channel-status.offline i { background:var(--red); }
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:180px; color:var(--faint); text-align:center; }.empty-state.compact { min-height:110px; }.empty-state p { margin:8px 0 0; font-size:11px; }.empty-icon { color:#5d6780; font-size:22px; }
.playlist-dialog { width:min(580px,calc(100% - 30px)); padding:0; color:var(--text); background:#151a27; border:1px solid #30384c; border-radius:14px; box-shadow:0 30px 90px rgba(0,0,0,.55); }.playlist-dialog::backdrop { background:rgba(4,6,12,.78); backdrop-filter:blur(4px); }.playlist-dialog form { padding:23px; }.modal-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; }.modal-header h2 { margin:0; font-size:22px; }.icon-button { width:29px; height:29px; color:#8e98ad; background:#22293a; border:0; border-radius:7px; font-size:21px; line-height:1; }.playlist-dialog label { display:block; margin-bottom:16px; color:#b9c0ce; font-size:11px; font-weight:650; }.optional { color:var(--faint); font-weight:400; }.playlist-dialog input[type=text],.playlist-dialog input[type=url],.playlist-dialog textarea { width:100%; margin-top:7px; padding:11px 12px; color:var(--text); background:#0e121c; border:1px solid #293247; border-radius:7px; outline:0; resize:vertical; font-size:12px; }.playlist-dialog input:focus,.playlist-dialog textarea:focus { border-color:var(--violet); }.source-tabs { display:flex; gap:6px; margin:6px 0 15px; border-bottom:1px solid #293146; }.source-tab { padding:9px 12px; color:var(--muted); background:transparent; border:0; border-bottom:2px solid transparent; font-size:11px; font-weight:650; }.source-tab.active { color:#c1b8ff; border-bottom-color:var(--violet); }.source-pane { display:none; min-height:106px; }.source-pane.active { display:block; }.file-drop { min-height:126px; display:flex !important; flex-direction:column; justify-content:center; align-items:center; gap:5px; padding:14px; background:#0e121c; border:1px dashed #3a4560; border-radius:9px; text-align:center; cursor:pointer; }.file-drop input { display:none; }.file-drop strong { font-size:12px; }.file-drop small,.field-help { color:var(--faint); font-size:10px; font-weight:400; }.file-drop-icon { color:#a99cff; font-size:22px; }.modal-footer { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:20px; }.form-error { flex:1; color:#f49aa4; font-size:11px; line-height:1.4; }
.toast-stack { position:fixed; right:22px; bottom:22px; z-index:10; display:flex; flex-direction:column; gap:8px; }.toast { display:flex; align-items:center; gap:9px; max-width:360px; padding:11px 14px; color:#dce2ed; background:#222a3a; border:1px solid #35405a; border-radius:8px; box-shadow:var(--shadow); font-size:11px; animation:toast-in .2s ease-out; }.toast span { display:grid; place-items:center; width:17px; height:17px; color:#0b0d14; background:var(--green); border-radius:50%; font-size:11px; font-weight:800; }.toast.error span { color:#fff; background:var(--red); }.spinner { display:inline-block; width:12px; height:12px; margin-right:6px; vertical-align:-2px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes toast-in { from { transform:translateY(6px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@media (max-width:1100px) { .layout { grid-template-columns:255px minmax(0,1fr); } .player-grid { grid-template-columns:1fr; } .player-panel,.channels-panel { min-height:auto; } .channel-list { max-height:440px; } }
@media (max-width:760px) { .app-shell { padding:0 13px 25px; } .topbar { height:72px; } .layout { display:block; } .sidebar { min-height:auto; margin-bottom:14px; } .playlist-list { max-height:205px; } .sidebar-note { display:none; } .detail-header { align-items:flex-start; flex-direction:column; } .detail-actions { justify-content:flex-start; } .stats-grid { grid-template-columns:repeat(2,1fr); } .stat-card { padding:12px; } .stat-card strong { font-size:16px; } .stat-card .stat-date { font-size:10px; } .welcome-panel { min-height:560px; padding:25px; } .channel-toolbar { grid-template-columns:1fr; } .player-panel,.channels-panel { padding:13px; } .detail-header h2 { font-size:24px; } }