/* index.html */
:root { --bg:#0f1115; --panel:#171a21; --muted:#9096a4; --text:#e8ebf2; --line:#2a2f3a; --accent:#7aa2f7; --good:#7bd88f; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--text); }
header { padding:16px 24px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.nav a { color:var(--text); text-decoration:none; padding:9px 12px; border:1px solid var(--line); border-radius:10px; margin-right:8px; background:linear-gradient(180deg,#151b25,#0f141d); box-shadow:0 1px 0 rgba(255,255,255,.03) inset; }
.nav a:hover { background:#1a2130; border-color:#3a4252; }
.nav a.active { background:linear-gradient(180deg,#89aef8,#6897f2); color:#08111f; border-color:#89aef8; box-shadow:0 1px 0 rgba(255,255,255,.25) inset; }
.sub { color:var(--muted); font-size:13px; }
.index-page .wrap { display:grid; grid-template-columns: 340px 1fr; min-height: calc(100vh - 68px); }
.index-page .sidebar { border-right:1px solid var(--line); background:#131720; padding:16px; }
.index-page .main { padding:16px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; }
.selectable-card { cursor:pointer; transition:background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.selectable-card:hover { border-color:#465164; }
.selectable-card.selected { background:#172131; border-color:#4c6ca7; box-shadow:0 0 0 1px rgba(122,162,247,.35) inset; }
select, input, textarea { width:100%; box-sizing:border-box; background:#0f131b; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
label { display:block; font-size:12px; color:var(--muted); margin:0 0 6px; }
.small { font-size:12px; color:var(--muted); }
.pill { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:4px 8px; font-size:12px; margin-right:6px; margin-bottom:6px; background:#202634; }
.table { width:100%; border-collapse:separate; border-spacing:0 6px; }
.table th { color:var(--muted); font-weight:600; font-size:12px; text-align:left; padding:0 10px 4px; }
.table td { vertical-align:top; padding:12px 10px; background:#0f131b; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.table td:first-child { border-left:1px solid var(--line); border-top-left-radius:6px; border-bottom-left-radius:6px; }
.table td:last-child { border-right:1px solid var(--line); border-top-right-radius:6px; border-bottom-right-radius:6px; }
.click { cursor:pointer; }
.click:hover td { background:#1b202a; }
.checked td { background:#11171f; border-top-color:#263244; border-bottom-color:#263244; }
.checked td:first-child { position:relative; }
.checked td:first-child::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, rgba(122,162,247,.9), rgba(122,162,247,.45)); border-top-left-radius:6px; border-bottom-left-radius:6px; }
.checked:hover td { background:#171d27; }
.locked td { background:#11181f; border-top-color:#314055; border-bottom-color:#314055; }
.locked td:first-child { position:relative; }
.locked td:first-child::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, rgba(198,168,107,.9), rgba(198,168,107,.45)); border-top-left-radius:6px; border-bottom-left-radius:6px; }
.locked:hover td { background:#19222b; }
.selected td { background:#172131; border-top-color:#4c6ca7; border-bottom-color:#4c6ca7; }
.split { display:grid; grid-template-columns: 1fr 480px; gap:12px; }
.kvs { display:grid; grid-template-columns: 130px 1fr; gap:8px 10px; font-size:13px; }
.kvs div:nth-child(odd) { color:var(--muted); }
.note { color:var(--muted); font-size:12px; margin-top:8px; }
.row { display:flex; gap:8px; align-items:center; }
.site-item { padding:8px 10px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; cursor:pointer; }
.site-item.active { border-color:var(--good); box-shadow: 0 0 0 1px var(--good) inset; }
.site-item .meta { color:var(--muted); font-size:12px; }
.filters-grid { display:grid; grid-template-columns: 1fr; gap:8px; }
.tabs { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.tab { padding:9px 12px; border:1px solid var(--line); background:linear-gradient(180deg,#151b25,#0f141d); color:var(--text); border-radius:10px; cursor:pointer; box-shadow:0 1px 0 rgba(255,255,255,.03) inset; }
.tab:hover { background:#1a2130; border-color:#3a4252; }
.tab.active { background:linear-gradient(180deg,#89aef8,#6897f2); color:#08111f; border-color:#89aef8; }
.btn, .btn.primary, .btn.danger, .btn.good { min-height:36px; font-weight:600; letter-spacing:.01em; border-radius:10px; transition:background .15s ease, border-color .15s ease, transform .05s ease, box-shadow .15s ease; }
.btn { background:linear-gradient(180deg,#171d28,#11161f); color:var(--text); border:1px solid #323948; box-shadow:0 1px 0 rgba(255,255,255,.03) inset; }
.btn:hover { background:#1c2331; border-color:#465164; }
.btn:active { transform:translateY(1px); }
.btn.primary { background:linear-gradient(180deg,#89aef8,#6897f2); color:#08111f; border-color:#89aef8; }
.btn.primary:hover { background:linear-gradient(180deg,#9abafc,#78a5fb); }
.btn.danger { background:linear-gradient(180deg,#3b1a20,#2a1114); color:#ffb6b6; border-color:#62303a; }
.btn.danger:hover { background:linear-gradient(180deg,#4b2027,#331519); }
.btn.good { background:linear-gradient(180deg,#173221,#122217); color:#c7f7d5; border-color:#2a5a3a; }
.btn.good:hover { background:linear-gradient(180deg,#1c3a27,#15301d); }
.icon-btn { width:36px; min-width:36px; padding:0; display:inline-grid; place-items:center; border-radius:10px; background:linear-gradient(180deg,#171d28,#11161f); color:var(--text); border:1px solid #323948; box-shadow:0 1px 0 rgba(255,255,255,.03) inset; }
.icon-btn:hover { background:#1c2331; border-color:#465164; }
.icon-btn.danger { color:#ffb6b6; }
.hidden { display:none !important; }
/* reports.html */
:root { --bg:#0f1115; --panel:#171a21; --muted:#9096a4; --text:#e8ebf2; --line:#2a2f3a; --accent:#7aa2f7; --good:#7bd88f; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--text); }
header { padding:16px 24px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.nav a { color:var(--text); text-decoration:none; padding:9px 12px; border:1px solid var(--line); border-radius:10px; margin-right:8px; background:linear-gradient(180deg,#151b25,#0f141d); }
.nav a.active { background:linear-gradient(180deg,#89aef8,#6897f2); color:#08111f; border-color:#89aef8; }
.wrap { max-width:1280px; margin:0 auto; padding:16px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; }
.grid { display:grid; grid-template-columns: 1.1fr 1fr 1.6fr 140px auto; gap:8px; align-items:end; }
.grid.two { grid-template-columns: 1.2fr 1.6fr 140px auto; }
.grid input, .grid select { width:100%; box-sizing:border-box; background:#0f131b; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.btn { background:linear-gradient(180deg,#171d28,#11161f); color:var(--text); border:1px solid #323948; border-radius:10px; padding:10px 12px; cursor:pointer; font-weight:600; }
.btn.primary { background:linear-gradient(180deg,#89aef8,#6897f2); color:#08111f; border-color:#89aef8; }
.small { color:var(--muted); font-size:12px; }
.tabs { display:flex; gap:8px; margin-bottom:12px; }
.tab-btn { background:#121722; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer; font-weight:600; }
.tab-btn.active { background:linear-gradient(180deg,#89aef8,#6897f2); color:#08111f; border-color:#89aef8; }
.table { width:100%; border-collapse:separate; border-spacing:0 8px; font-size:13px; }
.table th, .table td { border-bottom:1px solid var(--line); padding:8px 6px; text-align:left; vertical-align:top; }
.pill { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:3px 8px; font-size:12px; background:#202634; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.link { color:#8fb3ff; }
.muted-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }
.hidden { display:none; }
/* settings.html */
:root { --bg:#0f1115; --panel:#171a21; --muted:#9096a4; --text:#e8ebf2; --line:#2a2f3a; --accent:#7aa2f7; --good:#7bd88f; --warn:#f7c46c; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--text); }
header { padding:16px 24px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.nav a { color:var(--text); text-decoration:none; padding:9px 12px; border:1px solid var(--line); border-radius:10px; margin-right:8px; background:linear-gradient(180deg,#151b25,#0f141d); box-shadow:0 1px 0 rgba(255,255,255,.03) inset; }
.nav a:hover { background:#1a2130; border-color:#3a4252; }
.nav a.active { background:linear-gradient(180deg,#89aef8,#6897f2); color:#08111f; border-color:#89aef8; box-shadow:0 1px 0 rgba(255,255,255,.25) inset; }
.sub { color:var(--muted); font-size:13px; }
.wrap { padding:16px; width:min(1280px, calc(100vw - 32px)); margin:0 auto; box-sizing:border-box; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; }
.toolbar { display:grid; grid-template-columns: repeat(6, minmax(0, 1fr)) auto; gap:8px; align-items:end; }
.user-grid { display:grid; grid-template-columns: 1fr 1.1fr 1fr; gap:12px; align-items:start; }
.check-grid { display:flex; flex-wrap:wrap; gap:8px; }
.check-grid label { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:#0f131b; color:var(--text); }
.toolbar input, .toolbar select, .toolbar textarea { width:100%; box-sizing:border-box; background:#0f131b; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.toolbar button, .btn { background:linear-gradient(180deg,#171d28,#11161f); color:var(--text); border:1px solid #323948; border-radius:10px; padding:10px 12px; cursor:pointer; box-shadow:0 1px 0 rgba(255,255,255,.03) inset; font-weight:600; }
.toolbar button:hover, .btn:hover { background:#1c2331; border-color:#465164; }
.toolbar button:active, .btn:active { transform:translateY(1px); }
.btn.primary { background:linear-gradient(180deg,#89aef8,#6897f2); color:#08111f; border-color:#89aef8; }
.btn.primary:hover { background:linear-gradient(180deg,#9abafc,#78a5fb); }
.btn.danger { background:linear-gradient(180deg,#3b1a20,#2a1114); color:#ffb6b6; border-color:#62303a; }
.btn.danger:hover { background:linear-gradient(180deg,#4b2027,#331519); }
.btn.good { background:linear-gradient(180deg,#173221,#122217); color:#c7f7d5; border-color:#2a5a3a; }
.btn.good:hover { background:linear-gradient(180deg,#1c3a27,#15301d); }
.icon-btn { width:36px; min-width:36px; padding:0; display:inline-grid; place-items:center; border-radius:10px; background:linear-gradient(180deg,#171d28,#11161f); color:var(--text); border:1px solid #323948; box-shadow:0 1px 0 rgba(255,255,255,.03) inset; }
.icon-btn:hover { background:#1c2331; border-color:#465164; }
.icon-btn.danger { color:#ffb6b6; }
.small { color:var(--muted); font-size:12px; }
.topline { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.notice { border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#111723; }
.notice.warn { border-color:#6b5531; background:#221a10; color:#f4cf8b; }
.notice.good { border-color:#224e2c; background:#111c14; color:#b8f1c5; }
.sensor-card { border:1px solid var(--line); border-radius:12px; padding:12px; background:#0f131b; margin-bottom:10px; }
.sensor-head { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:flex-start; }
.sensor-head strong { font-size:15px; }
.sensor-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.badge { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:3px 8px; font-size:12px; background:#202634; }
.rule-row { display:grid; grid-template-columns: 90px 1.2fr 120px 1fr 100px; gap:8px; align-items:start; margin-top:10px; }
.field-label { font-size:11px; color:var(--muted); margin:0 0 4px 2px; }
.field-help { font-size:11px; color:var(--muted); margin:4px 0 0 2px; line-height:1.3; }
.rule-field { display:flex; flex-direction:column; }
.rule-row input, .rule-row textarea, .rule-row select, textarea { width:100%; box-sizing:border-box; background:#0f131b; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.rule-row button { background:#10141c; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px 10px; cursor:pointer; }
.rule-row button:hover { background:#1b202a; }
.cards { display:grid; gap:10px; }
.sensor-grid { display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 110px; gap:8px; margin-top:10px; }
.sensor-grid input { width:100%; box-sizing:border-box; background:#0f131b; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.sensor-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.table { width:100%; border-collapse:separate; border-spacing:0 8px; font-size:12px; }
.table th, .table td { border-bottom:1px solid var(--line); padding:8px 6px; text-align:left; vertical-align:top; }
.table th { color:var(--muted); font-weight:600; }
.table-wrap { overflow:auto; max-height:360px; }
.muted { color:var(--muted); }
.hidden { display:none !important; }
.banner { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; }
.tabs { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.tab-btn { background:linear-gradient(180deg,#171d28,#11161f); color:var(--text); border:1px solid #323948; border-radius:999px; padding:9px 14px; cursor:pointer; font-weight:700; }
.tab-btn.active { background:linear-gradient(180deg,#89aef8,#6897f2); color:#08111f; border-color:#89aef8; }
.settings-layout,
.reports-layout { display:flex; gap:12px; align-items:flex-start; width:100%; box-sizing:border-box; }
.settings-tabbar,
.reports-tabbar { position:sticky; top:0; z-index:20; margin:0; width:300px; flex:0 0 300px; box-sizing:border-box; }
.settings-tabs,
.reports-tabs { display:flex; flex-direction:column; gap:10px; }
.settings-tabs .tab-btn,
.reports-tabs .tab-btn { width:100%; border-radius:14px; min-height:66px; padding:12px 14px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; text-align:left; white-space:normal; }
.settings-tabs .tab-title,
.reports-tabs .tab-title { font-size:14px; line-height:1.15; }
.settings-tabs .tab-sub,
.reports-tabs .tab-sub { font-size:12px; font-weight:500; color:var(--muted); }
.settings-tabs .tab-btn.active .tab-sub,
.reports-tabs .tab-btn.active .tab-sub { color:#10213d; }
.settings-main,
.reports-main { display:grid; gap:12px; min-width:0; width:100%; flex:1 1 auto; }
.settings-main > *,
.reports-main > * { min-width:0; width:100%; box-sizing:border-box; }
.devices-page .wrap { width:min(1280px, calc(100vw - 32px)); margin:0 auto; box-sizing:border-box; }
.devices-layout { display:flex; gap:12px; align-items:flex-start; width:100%; box-sizing:border-box; }
.devices-tabbar { position:sticky; top:0; z-index:20; margin:0; width:300px; flex:0 0 300px; box-sizing:border-box; }
.devices-tabs { display:flex; flex-direction:column; gap:10px; }
.devices-tabs .tab-btn { width:100%; border-radius:14px; min-height:66px; padding:12px 14px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; text-align:left; white-space:normal; }
.devices-tabs .tab-title { font-size:14px; line-height:1.15; }
.devices-tabs .tab-sub { font-size:12px; font-weight:500; color:var(--muted); }
.devices-tabs .tab-btn.active .tab-sub { color:#10213d; }
.devices-main { display:grid; gap:12px; min-width:0; width:100%; flex:1 1 auto; }
.devices-main > * { min-width:0; width:100%; box-sizing:border-box; }
@media (max-width: 980px) {
.settings-layout,
.reports-layout,
.devices-layout { flex-direction:column; }
.settings-tabbar,
.reports-tabbar,
.devices-tabbar { position:static; width:100%; flex:0 0 auto; }
.settings-tabs,
.reports-tabs,
.devices-tabs { flex-direction:row; flex-wrap:wrap; }
.settings-tabs .tab-btn,
.reports-tabs .tab-btn,
.devices-tabs .tab-btn { flex:1 1 180px; }
}
@media (max-width: 620px) {
.settings-tabs .tab-btn,
.reports-tabs .tab-btn,
.devices-tabs .tab-btn { flex-basis:100%; }
}
.modal-overlay { position:fixed; inset:0; background:rgba(2,5,10,.72); display:grid; place-items:center; padding:16px; z-index:50; }
.modal-card { width:min(1160px, 100%); max-height:calc(100vh - 32px); overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.modal-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:16px 16px 0; }
.modal-body { display:grid; gap:14px; padding:16px; }
.modal-grid { display:grid; grid-template-columns: 1.2fr 1fr .75fr; gap:12px; }
.modal-actions { justify-content:flex-end; flex-wrap:wrap; }
.inline-toggle { display:flex; align-items:center; gap:8px; margin:0; padding:10px 12px; min-height:42px; border:1px solid var(--line); border-radius:10px; background:#0f131b; }
.picker-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
.picker-panel { border:1px solid var(--line); border-radius:12px; padding:12px; background:#0f131b; display:grid; gap:10px; }
.permissions-panel { grid-column:1 / -1; }
.picker-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.picker-panel input { width:100%; box-sizing:border-box; background:#0f131b; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; min-height:34px; max-height:76px; overflow:auto; padding-right:4px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#202634; border:1px solid var(--line); font-size:12px; }
.chip button { border:0; background:transparent; color:inherit; cursor:pointer; padding:0; font-size:14px; line-height:1; }
.permission-list { display:grid; gap:8px; }
.perm-row { display:flex; align-items:flex-start; gap:10px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#0f131b; cursor:pointer; }
.perm-row input { margin-top:3px; width:16px; height:16px; accent-color:#89aef8; }
.perm-row strong { display:block; font-size:13px; }
.perm-row small { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.perm-row.active { background:#18273a; border-color:#5c7fbc; }
.perm-row.dimmed { opacity:.45; }
.picker-panel.disabled { opacity:.55; }
.picker-panel.disabled input,
.picker-panel.disabled button,
.picker-panel.disabled .result-item,
.picker-panel.disabled .chip button { pointer-events:none; }
.picker-results { max-height:220px; overflow:auto; display:grid; gap:6px; }
.schedule-user-list { max-height:260px; }
.schedule-user-option { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#0c1017; }
.schedule-user-option .small { grid-column:2; color:var(--muted); }
.result-item { width:100%; text-align:left; border:1px solid var(--line); border-radius:10px; background:#111722; color:var(--text); padding:9px 10px; cursor:pointer; }
.result-item:hover { background:#182030; border-color:#465164; }
.result-item small { color:var(--muted); display:block; margin-top:2px; }
.result-item.selected { background:#18273a; border-color:#5c7fbc; }
@media (max-width: 980px) {
.picker-grid { grid-template-columns: 1fr; }
.modal-grid { grid-template-columns: 1fr; }
}
/* login page */
.login-page { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:#0f1115; color:#e8ebf2; display:grid; place-items:center; min-height:100vh; }
.login-card { width:min(390px,90vw); background:#171a21; border:1px solid #2a2f3a; border-radius:16px; padding:24px; display:grid; gap:16px; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.login-card input, .login-card button { width:100%; box-sizing:border-box; padding:12px; border-radius:10px; border:1px solid #2a2f3a; background:#0f131b; color:#e8ebf2; }
.login-card button { background:#7aa2f7; color:#08111f; font-weight:700; cursor:pointer; }
.login-card button:hover { background:#8cb1fb; }
.login-muted { color:#9096a4; font-size:12px; line-height:1.45; }
.login-error { color:#ff8f8f; font-size:13px; margin-top:4px; }
.login-brand { display:grid; justify-items:center; text-align:center; gap:10px; margin-bottom:4px; }
.login-logo { width:96px; height:96px; object-fit:contain; background:none; border:none; padding:0; border-radius:0; }
.login-title { margin:0; font-size:26px; line-height:1.05; }
.login-fields { display:grid; gap:12px; }
.login-link { font-size:13px; display:inline-block; color:#8fb3ff; text-decoration:none; }
.login-link:hover { text-decoration:underline; }
.login-error[hidden] { display:none; }