:root {
  --bg: #15171c; --bg2: #1c1f26; --bg3: #252932; --line: #2e333d;
  --fg: #e6e8ec; --mut: #8b93a1; --acc: #2f8cff; --acc2: #1f6fd6; --ok: #33c27f; --warn: #f5a524; --bad: #e5534b;
  --r: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--fg); font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
input[type=date], input[type=time], input[type=datetime-local] { color-scheme: dark; }
a { color: var(--acc); text-decoration: none; }
.hidden { display: none !important; }
.mut { color: var(--mut); }
.small { font-size: 12px; }
.spacer { flex: 1; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stack > * + * { margin-top: 12px; }

/* ---------- кнопки и поля ---------- */
.btn { background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { border-color: var(--acc); }
.btn.primary { background: var(--acc); border-color: var(--acc); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--acc2); }
.btn.danger { color: #ffb3ae; }
.btn.danger:hover { border-color: var(--bad); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 5px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }
.icon { background: none; border: 0; color: var(--mut); min-width: 32px; height: 32px; border-radius: 6px; cursor: pointer; font-size: 15px; }
.icon:hover { background: var(--bg3); color: var(--fg); }
label.f { display: flex; flex-direction: column; gap: 5px; color: var(--mut); font-size: 12px; }
.inp, select.inp, textarea.inp { background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; color: var(--fg); width: 100%; outline: none; }
.inp:focus { border-color: var(--acc); }
textarea.inp { min-height: 80px; resize: vertical; }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* ---------- вход ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(1200px 600px at 50% -10%, #1d2b44 0%, var(--bg) 60%); }
.auth-box { width: 100%; max-width: 380px; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.auth-box h1 { margin: 0 0 4px; font-size: 22px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; }
.logo i { width: 12px; height: 12px; border-radius: 3px; background: var(--acc); box-shadow: 0 0 12px var(--acc); }
.err { color: #ffb3ae; font-size: 13px; min-height: 18px; }

/* ---------- каркас ---------- */
.shell { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.side { background: var(--bg2); border-right: 1px solid var(--line); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.side .logo { padding: 0 8px 18px; }
.nav { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--fg); }
.nav:hover { background: var(--bg3); }
.nav.on { background: #22324a; color: #fff; }
.nav .ic { width: 20px; text-align: center; }
.side .who { margin-top: auto; padding: 10px 12px; font-size: 12px; color: var(--mut); border-top: 1px solid var(--line); }
.main { padding: 24px 28px 90px; max-width: 1200px; width: 100%; min-width: 0; }
.page-h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.page-h h1 { margin: 0; font-size: 22px; }
.back { color: var(--mut); font-size: 13px; }

.card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.card h3 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--mut); }

/* ---------- экраны ---------- */
.devs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.dev { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; cursor: pointer; transition: border-color .15s; }
.dev:hover { border-color: var(--acc); }
.dev-name { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #5b6472; flex: none; }
.dot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dev-now { margin: 10px 0; padding: 10px; background: var(--bg3); border-radius: 8px; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.b-ok { background: #15301f; color: #7ee2a8; } .b-bad { background: #3a1f22; color: #ffb3ae; } .b-mut { background: var(--bg3); color: var(--mut); } .b-warn { background: #3a2f15; color: #ffd27a; }
.b-play { background: var(--ok); color: #000; } .b-pause { background: var(--warn); color: #000; }
.add-dev { display: grid; place-items: center; text-align: center; color: var(--mut); border-style: dashed; min-height: 150px; }

/* ---------- страница экрана ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; color: var(--mut); cursor: pointer; font-weight: 600; white-space: nowrap; }
.tab.on { color: var(--fg); border-bottom-color: var(--acc); }
.offline-bar { background: #3a2f15; color: #ffd27a; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }
.now-card { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.now-title { font-size: 20px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prog { height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; margin: 12px 0 6px; }
.prog i { display: block; height: 100%; background: var(--acc); width: 0; transition: width .25s linear; }
.transport { display: flex; gap: 10px; align-items: center; }
.round { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg3); cursor: pointer; font-size: 17px; display: grid; place-items: center; }
.round.big { width: 62px; height: 62px; font-size: 22px; background: var(--acc); border-color: var(--acc); color: #fff; }
.pls-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.pls-quick .btn.on { border-color: var(--bad); }

.items { list-style: none; margin: 0; padding: 0; }
.items li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 10px 6px; border-bottom: 1px solid #23272f; }
.items li.cur { background: #17263b; border-radius: 6px; }
.items li.off .nm { opacity: .45; text-decoration: line-through; }
.items .n { color: var(--mut); text-align: right; font-size: 12px; }
.items .nm { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.items .sc { font-size: 12px; color: var(--mut); }
.items .sc.offs { color: var(--warn); }
.items .acts { display: flex; gap: 0; }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.media { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.media .th { aspect-ratio: 16/9; background: #000; display: grid; place-items: center; overflow: hidden; }
.media .th img, .media .th video { width: 100%; height: 100%; object-fit: cover; }
.media .meta { padding: 8px 10px; font-size: 13px; }
.media .meta .nm { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.media .ma { display: flex; gap: 6px; padding: 0 10px 10px; }
.media.pick { cursor: pointer; }
.media.pick.sel { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc) inset; }
.drop { border: 2px dashed var(--line); border-radius: var(--r); padding: 22px; text-align: center; color: var(--mut); margin-bottom: 16px; cursor: pointer; }
.drop.over { border-color: var(--acc); background: #1a2230; }
.upl { margin-bottom: 12px; }
.upl .bar { height: 5px; background: var(--bg3); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.upl .bar i { display: block; height: 100%; background: var(--acc); }

.days { display: flex; gap: 6px; flex-wrap: wrap; }
.days input { display: none; }
.days span { display: inline-block; min-width: 42px; text-align: center; padding: 7px 0; border-radius: 6px; border: 1px solid var(--line); background: var(--bg3); color: var(--mut); cursor: pointer; font-size: 13px; }
.days input:checked + span { background: var(--acc); border-color: var(--acc); color: #fff; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 6px 11px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg3); cursor: pointer; font-size: 13px; }
.chip.on { background: var(--acc); border-color: var(--acc); color: #fff; }

table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th, table.t td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #262a33; white-space: nowrap; }
table.t th { color: var(--mut); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
table.t td.wrap { white-space: normal; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }
.tbl { overflow-x: auto; }
.stats-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.stat .k { color: var(--mut); font-size: 12px; } .stat .v { font-size: 24px; font-weight: 700; }
.keybox { font: 600 14px ui-monospace, Menlo, Consolas, monospace; background: var(--bg3); padding: 10px 12px; border-radius: 8px; user-select: all; white-space: pre-wrap; }
.big-num { font-size: 32px; font-weight: 800; }

/* ---------- виджеты ---------- */
.wg { display: grid; grid-template-columns: 1fr 300px; gap: 16px; }
.wg-stage-wrap { background: #0d0f13; border-radius: var(--r); padding: 12px; }
.wg-stage { position: relative; background: linear-gradient(135deg, #10141c, #1a2233); width: 100%; overflow: hidden; touch-action: none; }
.wg-overlay { position: absolute; inset: 0; z-index: 3; }
.wg-frame { position: absolute; outline: 1px dashed rgba(255,255,255,.25); cursor: move; }
.wg-frame.sel { outline: 2px solid var(--acc); }
.wg-frame .h { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; background: var(--acc); border: 2px solid #fff; border-radius: 4px; display: none; cursor: nwse-resize; }
.wg-frame.sel .h { display: block; }
.wg-list { list-style: none; margin: 10px 0 0; padding: 0; }
.wg-list li { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.wg-list li.sel { background: #22324a; }
.wg-list li.off .wn { opacity: .45; }
.wg-list .wn { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- модальное окно, уведомления ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal-box { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 20px; width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.modal-box h2 { margin: 0 0 14px; font-size: 18px; }
.modal-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(30px); background: #22324a; border: 1px solid var(--acc); color: #fff; padding: 10px 16px; border-radius: 8px; opacity: 0; transition: .25s; pointer-events: none; z-index: 100; max-width: 90vw; }
#toast.show { opacity: 1; transform: translateX(-50%); }
#toast.bad { background: #3a1f22; border-color: var(--bad); }

/* ---------- телефон ---------- */
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; bottom: 0; top: auto; left: 0; right: 0; height: auto; flex-direction: row; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); z-index: 20; border-right: 0; border-top: 1px solid var(--line); justify-content: space-around; }
  .side .logo, .side .who { display: none; }
  .nav { flex-direction: column; gap: 2px; font-size: 11px; padding: 6px 8px; }
  .nav .ic { font-size: 18px; }
  .main { padding: 16px 14px 100px; }
  .now-card { grid-template-columns: 1fr; }
  .transport { justify-content: center; }
  .stats-cards { grid-template-columns: 1fr 1fr; }
  .wg { grid-template-columns: 1fr; }
  .grid3 { grid-template-columns: 1fr 1fr; }
  .items .acts .opt { display: none; }
}
@media (max-width: 480px) { .grid2 { grid-template-columns: 1fr; } }