:root {
  color-scheme: light;
  --bg: #f3f5fa;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f8fc;
  --surface-3: #edf0f7;
  --border: #d9dfeb;
  --text: #131827;
  --muted: #667085;
  --accent: #8b5cf6;
  --accent-2: #7543e8;
  --accent-soft: rgba(139,92,246,.10);
  --success: #13996b;
  --warning: #a86b00;
  --danger: #d7425d;
  --shadow: 0 22px 60px rgba(44,55,88,.12);
  --radius: 22px;
  --nav-height: 84px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070a12;
  --bg-elevated: #0c1220;
  --surface: #111827;
  --surface-2: #151e31;
  --surface-3: #1b263b;
  --border: #26334a;
  --text: #f7f8fc;
  --muted: #9aa7bd;
  --accent: #8b5cf6;
  --accent-2: #a78bfa;
  --accent-soft: rgba(139,92,246,.16);
  --success: #35d399;
  --warning: #f5b942;
  --danger: #fb7185;
  --shadow: 0 24px 80px rgba(0,0,0,.32);
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% -10%, rgba(139,92,246,.15), transparent 35%), var(--bg); color: var(--text); }
button,input,select,textarea { font: inherit; }
button { color: inherit; }
a { color: var(--accent-2); }
.app-shell { min-height: 100vh; padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 24px); }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(14px + env(safe-area-inset-top)) 18px 14px; background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(20px); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.topbar h1 { margin: 2px 0 0; font-size: 1.55rem; letter-spacing: -.03em; }
.eyebrow { margin: 0; color: var(--accent-2); font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.icon-button { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); cursor: pointer; font-size: 1.25rem; }
.icon-button:active { transform: scale(.96); }
.main-content { width: min(1120px, 100%); margin: 0 auto; padding: 18px 16px 32px; display: grid; gap: 18px; align-content: start; }
.bottom-nav { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); height: var(--nav-height); display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; padding: 8px; border: 1px solid var(--border); border-radius: 24px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(22px); box-shadow: var(--shadow); }
.nav-item { min-width: 0; border: 0; border-radius: 18px; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-size: .72rem; font-weight: 700; cursor: pointer; }
.nav-item.active { color: #fff; background: linear-gradient(145deg,var(--accent),#7347e8); }
.nav-icon { font-size: 1.35rem; line-height: 1; }
.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: 1fr; }
.card { background: linear-gradient(150deg,var(--surface),color-mix(in srgb,var(--surface-2) 86%,var(--accent) 4%)); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: 0 14px 45px rgba(0,0,0,.08); overflow: hidden; }
.card h2,.card h3 { margin: 0; letter-spacing: -.025em; }
.card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-title p { margin: 5px 0 0; }
.hero { padding: 22px; background: linear-gradient(145deg,rgba(139,92,246,.22),var(--surface) 54%); }
.hero h2 { font-size: 1.7rem; }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 99px; margin-right: 7px; background: var(--muted); }
.status-dot.online { background: var(--success); box-shadow: 0 0 0 5px rgba(53,211,153,.12); }
.status-dot.offline { background: var(--danger); }
.metric-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 18px; }
.metric { padding: 14px; border: 1px solid var(--border); border-radius: 17px; background: color-mix(in srgb,var(--surface-2) 90%,transparent); min-width: 0; }
.metric strong { display: block; font-size: 1.08rem; overflow-wrap: anywhere; }
.metric span { color: var(--muted); font-size: .78rem; }
.muted { color: var(--muted); }
.tiny { font-size: .76rem; }
.center { text-align: center; }
.stack { display: grid; gap: 14px; }
.section-title { margin: 7px 2px 12px; font-size: 1.05rem; }
.field { display: grid; gap: 7px; min-width: 0; }
.field > span,.field-label { color: var(--muted); font-size: .82rem; font-weight: 700; }
input,select,textarea { width: 100%; min-height: 48px; border: 1px solid var(--border); border-radius: 15px; padding: 11px 13px; background: var(--surface-2); color: var(--text); outline: none; }
textarea { resize: vertical; min-height: 150px; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; line-height: 1.5; }
input:focus,select:focus,textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid color-mix(in srgb,var(--border) 65%,transparent); }
.switch-row:last-child { border-bottom: 0; }
.switch-copy { min-width: 0; }
.switch-copy strong { display: block; }
.switch-copy small { display: block; margin-top: 4px; color: var(--muted); }
.switch { position: relative; width: 54px; height: 31px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: #3a465b; transition: .2s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; width: 25px; height: 25px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(23px); }
.button { min-height: 46px; border: 1px solid transparent; border-radius: 15px; padding: 10px 16px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.button:disabled { opacity: .55; cursor: wait; }
.button.primary { background: linear-gradient(145deg,var(--accent),#7447e8); color: #fff; box-shadow: 0 10px 28px rgba(139,92,246,.24); }
.button.secondary { background: var(--surface-3); border-color: var(--border); }
.button.ghost { background: transparent; border-color: var(--border); }
.button.danger { background: rgba(251,113,133,.13); color: var(--danger); border-color: rgba(251,113,133,.28); }
.button.success { background: rgba(53,211,153,.12); color: var(--success); border-color: rgba(53,211,153,.28); }
.button.full { width: 100%; }
.button.compact { min-height:38px; padding:7px 11px; font-size:.82rem; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.button-row > * { flex: 1 1 130px; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--border); background: var(--surface-2); border-radius: 99px; padding: 8px 11px; color: var(--muted); cursor: pointer; }
.chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2); }
.channel-list { display: grid; gap: 10px; }
.channel-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); }
.channel-item strong { overflow-wrap: anywhere; }
.channel-add { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
#account-content,#system-content { display:grid; gap:18px; }
.loading-inline,.empty-state { min-height:150px; display:grid; place-content:center; text-align:center; color:var(--muted); padding:18px; }
.loading-inline .spinner { margin-bottom:10px; }
.empty-state strong { color:var(--text); }
.empty-state p { max-width:600px; margin:8px auto 0; }
#live-channels { display:grid; gap:28px; }
.channel-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.channel-view-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:end; padding:14px; border:1px solid var(--border); border-radius:18px; background:var(--surface-2); }
.channel-sort-field { min-width:0; }
.channel-view-toolbar select { min-height:44px; }
.view-segment { display:grid; grid-template-columns:repeat(2,52px); gap:6px; padding:4px; border:1px solid var(--border); border-radius:15px; background:var(--surface); }
.view-choice { min-height:36px; border:0; border-radius:11px; background:transparent; color:var(--muted); font-weight:850; cursor:pointer; }
.view-choice span { font-size:.72rem; }
.view-choice.active { background:var(--accent); color:#fff; box-shadow:0 8px 18px rgba(139,92,246,.24); }
.live-channel-list { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }
.live-channel-list.columns-2 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.live-channel-card { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:20px; background:var(--surface-2); box-shadow:0 10px 28px rgba(26,34,56,.07); }
.live-channel-card.is-online { border-color:color-mix(in srgb,var(--success) 55%,var(--border)); box-shadow:0 12px 34px color-mix(in srgb,var(--success) 12%,transparent); }
.channel-art { position:relative; height:118px; overflow:hidden; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 62%,#111827),color-mix(in srgb,var(--accent-2) 32%,#111827)); }
.channel-banner-fallback,.channel-banner,.channel-art-shade { position:absolute; inset:0; width:100%; height:100%; }
.channel-banner-fallback { background:radial-gradient(circle at 75% 15%,rgba(255,255,255,.22),transparent 30%),linear-gradient(125deg,var(--accent),#26304d 75%); }
.channel-banner { object-fit:cover; }
.channel-art-shade { background:linear-gradient(180deg,rgba(5,8,17,.08),rgba(5,8,17,.72)); }
.channel-avatar-shell { position:absolute; left:14px; bottom:12px; width:62px; height:62px; border:3px solid rgba(255,255,255,.92); border-radius:18px; overflow:hidden; background:linear-gradient(145deg,var(--accent),#6e43dc); box-shadow:0 9px 24px rgba(0,0,0,.28); }
.channel-avatar,.channel-avatar-fallback { position:absolute; inset:0; width:100%; height:100%; }
.channel-avatar { object-fit:cover; }
.channel-avatar-fallback { display:grid; place-items:center; color:#fff; font-weight:900; letter-spacing:.03em; }
.channel-live-badge { position:absolute; right:11px; top:11px; padding:6px 8px; border-radius:99px; color:#fff; background:rgba(14,20,33,.78); backdrop-filter:blur(8px); font-size:.62rem; font-weight:900; letter-spacing:.07em; }
.channel-live-badge.online { background:color-mix(in srgb,var(--success) 88%,#07130e); }
.channel-card-body { display:grid; gap:11px; padding:15px; }
.live-channel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.channel-name { display:flex; align-items:center; min-width:0; }
.channel-name strong { overflow-wrap:anywhere; }
.points-pill { flex:0 0 auto; padding:7px 10px; border-radius:99px; color:var(--accent-2); background:var(--accent-soft); font-weight:800; font-size:.78rem; }
.channel-title { margin:0; color:var(--text); font-size:.88rem; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.channel-meta { display:flex; flex-wrap:wrap; gap:8px 14px; color:var(--muted); font-size:.77rem; }
.drop-row { display:grid; gap:6px; }
.drop-row > div:first-child { display:flex; justify-content:space-between; gap:10px; font-size:.76rem; }
.channel-link { justify-self:start; text-decoration:none; font-weight:800; font-size:.8rem; }
.live-channel-list.columns-2 .channel-art { height:88px; }
.live-channel-list.columns-2 .channel-avatar-shell { width:48px; height:48px; left:10px; bottom:9px; border-radius:14px; border-width:2px; }
.live-channel-list.columns-2 .channel-live-badge { top:8px; right:8px; padding:5px 6px; font-size:.52rem; }
.live-channel-list.columns-2 .channel-card-body { gap:8px; padding:11px; }
.live-channel-list.columns-2 .live-channel-head { display:grid; gap:7px; }
.live-channel-list.columns-2 .points-pill { justify-self:start; padding:5px 7px; font-size:.67rem; }
.live-channel-list.columns-2 .channel-name strong { font-size:.92rem; }
.live-channel-list.columns-2 .tiny { font-size:.64rem; }
.live-channel-list.columns-2 .channel-title { font-size:.76rem; -webkit-line-clamp:2; }
.live-channel-list.columns-2 .channel-meta { display:grid; gap:4px; font-size:.67rem; }
.live-channel-list.columns-2 .drop-row { display:none; }
.live-channel-list.columns-2 .channel-link { font-size:.7rem; }

.alert { border: 1px solid var(--border); border-radius: 16px; padding: 13px 14px; background: var(--surface-2); overflow-wrap: anywhere; }
.alert.success { border-color: rgba(53,211,153,.32); color: var(--success); background: rgba(53,211,153,.08); }
.alert.warning { border-color: rgba(245,185,66,.35); color: var(--warning); background: rgba(245,185,66,.08); }
.alert.danger { border-color: rgba(251,113,133,.35); color: var(--danger); background: rgba(251,113,133,.08); }
.log-view { max-height: 440px; overflow: auto; border: 1px solid var(--border); border-radius: 16px; background: #050811; padding: 12px; font: .75rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; color: #c7d2fe; white-space: pre-wrap; overflow-wrap: anywhere; }
.log-line.stderr { color: #fda4af; }
.log-line.system { color: #6ee7b7; }
.tabs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; }
.tab { border: 1px solid var(--border); border-radius: 13px; padding: 9px 13px; background: var(--surface-2); color: var(--muted); font-weight: 750; white-space: nowrap; cursor: pointer; }
.tab.active { background: var(--accent-soft); color: var(--accent-2); border-color: var(--accent); }
.progress { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg,var(--accent),var(--success)); }
.toast-region { position: fixed; z-index: 60; left: 14px; right: 14px; bottom: calc(var(--nav-height) + 24px + env(safe-area-inset-bottom)); display: grid; gap: 8px; pointer-events: none; }
.toast { justify-self: center; width: min(520px,100%); max-height:160px; overflow:auto; padding: 13px 15px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow); animation: toast-in .2s ease-out; }
.toast.error { border-color: rgba(251,113,133,.4); }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }
.dialog { border: 0; padding: 0; background: transparent; color: var(--text); }
.dialog::backdrop { background: rgba(2,4,10,.72); backdrop-filter: blur(5px); }
.dialog-card { width: min(460px,calc(100vw - 28px)); border: 1px solid var(--border); border-radius: 22px; padding: 20px; background: var(--surface); box-shadow: var(--shadow); }
.loading-card { min-height: 260px; display: grid; place-content: center; text-align: center; color: var(--muted); }
.spinner { width: 34px; height: 34px; margin: 0 auto 12px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.login-body { display: grid; place-items: center; padding: 20px; }
.login-shell { width: min(460px,100%); }
.login-card { padding: 28px; border: 1px solid var(--border); border-radius: 28px; background: linear-gradient(150deg,var(--surface),var(--surface-2)); box-shadow: var(--shadow); }
.login-card h1 { margin: 8px 0 10px; font-size: clamp(1.8rem,8vw,2.5rem); letter-spacing: -.05em; }
.brand-mark { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(145deg,var(--accent),#6d3fdc); font-weight: 900; color: white; box-shadow: 0 14px 30px rgba(139,92,246,.25); margin-bottom: 20px; }
.form-error { margin: 0; color: var(--danger); }
.kv { display: grid; grid-template-columns: minmax(100px,.7fr) 1fr; gap: 8px 14px; align-items: baseline; }
.kv dt { color: var(--muted); font-size: .82rem; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.code { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; }
hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
@media (min-width: 680px) {
  :root { --nav-height: 76px; }
  .main-content { padding: 24px 22px 40px; }
  .grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metric-grid { grid-template-columns: repeat(4,1fr); }
  .bottom-nav { left: 50%; right: auto; transform: translateX(-50%); width: min(650px,calc(100% - 28px)); }
  .card { padding: 22px; }
}
@media (min-width: 1000px) {
  .app-shell { padding-left: 230px; padding-bottom: 0; }
  .topbar { padding-left: 30px; }
  .bottom-nav { top: 0; left: 0; bottom: 0; transform: none; width: 220px; height: 100vh; border-radius: 0; border-width: 0 1px 0 0; grid-template-columns: 1fr; grid-template-rows: repeat(5,74px); align-content: center; padding: 20px; }
  .nav-item { flex-direction: row; justify-content: flex-start; padding: 0 18px; font-size: .9rem; }
  .nav-icon { width: 28px; text-align: center; }
  .toast-region { left: 250px; bottom: 24px; }
}

@media (max-width: 430px) {
  .channel-summary { grid-template-columns:1fr; }
  .channel-view-toolbar { grid-template-columns:1fr; }
  .view-segment { grid-template-columns:repeat(2,1fr); }
  .live-channel-list:not(.columns-2) .live-channel-head { align-items:stretch; flex-direction:column; }
  .live-channel-list:not(.columns-2) .points-pill { align-self:flex-start; }
  .card-title { flex-wrap:wrap; }
}
@media (max-width: 340px) {
  .live-channel-list.columns-2 { grid-template-columns:1fr; }
}
@media (display-mode: standalone) {
  .topbar { padding-top:calc(10px + env(safe-area-inset-top)); }
}

.telegram-hero { background: linear-gradient(145deg,var(--accent-soft),var(--surface) 58%); }
.telegram-options-grid { display:grid; gap:0; }
.telegram-options-grid .switch-row { min-height:72px; }
.notification-events .chip { font-size:.78rem; }
.telegram-preview { border:1px solid var(--border); border-radius:20px; padding:14px; background:linear-gradient(155deg,#e9f5ff,#f5fbff); color:#17212b; }
.telegram-bubble { max-width:560px; display:grid; gap:10px; padding:15px; border-radius:16px 16px 16px 5px; background:#fff; box-shadow:0 8px 28px rgba(39,75,110,.12); }
.telegram-preview-title { font-size:.94rem; }
.telegram-preview-lines { display:grid; gap:4px; font-size:.82rem; line-height:1.42; }
.telegram-preview-buttons { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:7px; margin-top:4px; }
.telegram-preview-buttons span { display:block; padding:9px 10px; border-radius:9px; text-align:center; color:#2381cc; background:#edf6fd; font-weight:750; font-size:.76rem; }
:root[data-theme="dark"] .telegram-preview { background:linear-gradient(155deg,#172535,#12202d); color:#e8f3fb; }
:root[data-theme="dark"] .telegram-bubble { background:#182533; box-shadow:0 8px 28px rgba(0,0,0,.2); }
:root[data-theme="dark"] .telegram-preview-buttons span { background:#20384b; color:#65b9f3; }
@media (min-width:680px) {
  .telegram-options-grid { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; }
}