/* KJC Collector · Professional UI — Dual Theme + Data Visualization */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root, [data-theme="dark"] {
  --font: 'DM Sans', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --bg-0: #06090f; --bg-1: #0c1220; --bg-2: #131c2e; --bg-3: #1a2540; --bg-hover: #1f2e4a;
  --border: #1c2b42; --border-light: #253550;
  --text: #eaf0f9; --text-2: #8fa3be; --text-3: #4e6580;
  --accent: #00ddb8; --accent-bg: rgba(0,221,184,.08); --accent-border: rgba(0,221,184,.25);
  --blue: #5b9cff; --red: #ff5c72; --amber: #ffb547; --green: #4ceda0;
  --card-shadow: 0 2px 12px rgba(0,0,0,.3);
  --sidebar-w: 240px;
}
[data-theme="light"] {
  --bg-0: #f4f7fb; --bg-1: #ffffff; --bg-2: #f8fafc; --bg-3: #eef2f7; --bg-hover: #e8eef6;
  --border: #dfe6ee; --border-light: #e8eef5;
  --text: #1a2b3f; --text-2: #5a6f85; --text-3: #8fa3b8;
  --accent: #00a88e; --accent-bg: rgba(0,168,142,.06); --accent-border: rgba(0,168,142,.2);
  --blue: #3b7ddb; --red: #e04458; --amber: #d4930a; --green: #1a9e5c;
  --card-shadow: 0 2px 8px rgba(0,0,0,.06);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); background: var(--bg-0); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; transition: background .3s, color .3s; }

/* ─── LOGIN ─── */
#login { min-height:100vh; display:flex; align-items:center; justify-content:center; background: radial-gradient(ellipse at 30% 30%, var(--accent-bg), transparent 60%), var(--bg-0); }
.login-container { width:400px; background:var(--bg-1); border:1px solid var(--border); border-radius:16px; padding:44px 40px; box-shadow: var(--card-shadow), 0 0 60px rgba(0,221,184,.03); animation: fadeUp .5s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
.login-brand { text-align:center; margin-bottom:32px; }
.brand-icon { color:var(--accent); margin-bottom:14px; }
.login-brand h1 { font-family:var(--mono); font-size:20px; font-weight:700; letter-spacing:1.5px; }
.brand-sub { color:var(--text-3); font-size:13px; margin-top:6px; }
.login-form { display:flex; flex-direction:column; gap:18px; }
.input-group { display:flex; flex-direction:column; gap:5px; }
.input-group label { font-size:11px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:.8px; }
.input-group input { background:var(--bg-0); border:1px solid var(--border); border-radius:8px; padding:12px 14px; color:var(--text); font-family:var(--mono); font-size:14px; outline:none; transition: border .2s, box-shadow .2s; }
.input-group input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }
.login-footer { margin-top:28px; text-align:center; font-size:11px; color:var(--text-3); display:flex; align-items:center; justify-content:center; gap:8px; }
.msg-error { color:var(--red); font-size:12px; min-height:16px; }

/* ─── BUTTONS ─── */
.btn-primary { background:var(--accent); color:#fff; border:none; padding:12px 24px; border-radius:8px; font-family:var(--font); font-size:14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition: transform .15s, box-shadow .2s, opacity .2s; }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,221,184,.25); }
[data-theme="light"] .btn-primary { color:#fff; }
.btn-full { width:100%; justify-content:center; }
.btn-sm { background:var(--bg-3); color:var(--text-2); border:1px solid var(--border); padding:6px 14px; border-radius:6px; font-size:12px; font-weight:500; cursor:pointer; transition:all .2s; }
.btn-sm:hover { border-color:var(--accent); color:var(--accent); }
.btn-outline { display:inline-flex; align-items:center; background:transparent; color:var(--text-2); border:1px dashed var(--border); padding:10px 18px; border-radius:8px; font-size:13px; cursor:pointer; transition:all .2s; }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); border-style:solid; }

/* ─── SIDEBAR ─── */
.sidebar { position:fixed; left:0; top:0; bottom:0; width:var(--sidebar-w); background:var(--bg-1); border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:100; transition: background .3s; }
.sidebar-brand { padding:22px 20px 18px; border-bottom:1px solid var(--border); }
.brand-mark { font-family:var(--mono); font-size:22px; font-weight:700; color:var(--accent); letter-spacing:2px; }
.sidebar-user { display:block; font-size:11px; color:var(--text-3); margin-top:4px; }
.sidebar-nav { flex:1; padding:14px 12px; display:flex; flex-direction:column; gap:3px; overflow-y:auto; }
.nav-item { display:flex; align-items:center; gap:11px; padding:10px 14px; border-radius:8px; border:none; background:transparent; color:var(--text-2); font-family:var(--font); font-size:13px; font-weight:500; cursor:pointer; transition:all .15s; text-align:left; width:100%; position:relative; }
.nav-item svg { flex-shrink:0; opacity:.55; transition:opacity .15s; }
.nav-item:hover { background:var(--bg-hover); color:var(--text); }
.nav-item:hover svg { opacity:.9; }
.nav-item.active { background:var(--accent-bg); color:var(--accent); border:1px solid var(--accent-border); }
.nav-item.active svg { opacity:1; color:var(--accent); }
.nav-badge { margin-left:auto; background:var(--red); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:9px; }
.nav-divider { height:1px; background:var(--border); margin:8px 14px; }
.nav-logout { margin-top:auto; color:var(--text-3); }
.nav-logout:hover { color:var(--red); }
.sidebar-footer { padding:14px 16px; border-top:1px solid var(--border); }
.theme-toggle { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; border:1px solid var(--border); background:var(--bg-0); color:var(--text-2); font-size:12px; cursor:pointer; width:100%; transition:all .2s; }
.theme-toggle:hover { border-color:var(--accent); color:var(--accent); }

/* ─── MAIN ─── */
.main-content { margin-left:var(--sidebar-w); min-height:100vh; padding:28px 32px; transition: margin .3s; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.page-header h2 { font-size:22px; font-weight:700; }
.header-meta { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-3); }
.page { animation: pageIn .25s ease; }
.page[hidden] { display:none; }
@keyframes pageIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ─── KPI CARDS ─── */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
.kpi-card { background:var(--bg-1); border:1px solid var(--border); border-radius:12px; padding:20px; position:relative; overflow:hidden; transition: border-color .2s, box-shadow .2s; }
.kpi-card:hover { border-color:var(--accent-border); box-shadow: var(--card-shadow); }
.kpi-label { font-size:11px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:.8px; margin-bottom:8px; }
.kpi-value { font-family:var(--mono); font-size:28px; font-weight:700; color:var(--text); line-height:1.2; }
.kpi-value .unit { font-size:14px; font-weight:500; color:var(--text-3); margin-left:2px; }
.kpi-sub { font-size:11px; color:var(--text-3); margin-top:6px; }
.kpi-ring { position:absolute; right:16px; top:50%; transform:translateY(-50%); width:48px; height:48px; }
.kpi-ring svg { width:48px; height:48px; transform:rotate(-90deg); }
.kpi-ring circle { fill:none; stroke-width:4; }
.kpi-ring .track { stroke:var(--border); }
.kpi-ring .fill { stroke:var(--accent); stroke-linecap:round; transition: stroke-dashoffset .8s ease; }
.kpi-card.warn .kpi-value { color:var(--amber); }
.kpi-card.warn .kpi-ring .fill { stroke:var(--amber); }
.kpi-card.danger .kpi-value { color:var(--red); }
.kpi-card.danger .kpi-ring .fill { stroke:var(--red); }

/* ─── SERVICES ─── */
.services-bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.charts-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:24px; }
.chart-panel { min-height:auto; }
.chart-box { width:100%; height:220px; }
@media(max-width:1024px) { .charts-row { grid-template-columns:1fr 1fr; } }
@media(max-width:640px) { .charts-row { grid-template-columns:1fr; } }
.chip { padding:6px 14px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:.3px; transition: all .2s; }
.chip.on { background:rgba(76,237,160,.08); color:var(--green); border:1px solid rgba(76,237,160,.2); }
.chip.off { background:rgba(255,92,114,.08); color:var(--red); border:1px solid rgba(255,92,114,.2); }

/* ─── PANELS ─── */
.panel { background:var(--bg-1); border:1px solid var(--border); border-radius:12px; margin-bottom:20px; overflow:hidden; transition: border-color .2s; }
.panel:hover { border-color:var(--border-light); }
.panel-header { display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--border); }
.panel-header h3 { font-size:14px; font-weight:600; color:var(--text-2); }
.tag { font-family:var(--mono); font-size:10px; font-weight:600; padding:3px 9px; border-radius:4px; letter-spacing:.8px; }
.tag-live { background:var(--accent-bg); color:var(--accent); border:1px solid var(--accent-border); animation: blink 2s infinite; }
.tag-warn { background:rgba(255,181,71,.1); color:var(--amber); border:1px solid rgba(255,181,71,.25); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ─── DATA TABLE ─── */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { font-size:10px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.8px; padding:12px 22px; text-align:left; border-bottom:1px solid var(--border); }
.data-table td { font-size:13px; padding:13px 22px; border-bottom:1px solid var(--border); color:var(--text-2); transition: background .15s; }
.data-table tbody tr:hover td { background:var(--bg-hover); }
.data-table td.on { color:var(--green); font-weight:600; }
.data-table td.off { color:var(--red); font-weight:600; }
.data-table .val { font-family:var(--mono); font-weight:600; color:var(--accent); font-size:14px; }
.data-table .quality-ok { color:var(--green); }
.data-table .quality-bad { color:var(--red); }
.data-table .time { color:var(--text-3); font-family:var(--mono); font-size:12px; }

/* ─── DEVICE CARDS ─── */
.device-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:16px; }
.device-card { background:var(--bg-1); border:1px solid var(--border); border-radius:12px; padding:20px; display:flex; align-items:center; gap:16px; transition: border-color .2s, box-shadow .2s; }
.device-card:hover { border-color:var(--accent-border); box-shadow:var(--card-shadow); }
.device-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.device-dot.online { background:var(--green); box-shadow:0 0 8px rgba(76,237,160,.4); animation: breathe 2s infinite; }
.device-dot.offline { background:var(--red); box-shadow:0 0 8px rgba(255,92,114,.3); }
@keyframes breathe { 0%,100%{opacity:1} 50%{opacity:.5} }
.device-info { flex:1; }
.device-name { font-weight:600; font-size:14px; margin-bottom:4px; }
.device-meta { font-size:12px; color:var(--text-3); display:flex; gap:12px; }
.device-meta span { display:flex; align-items:center; gap:4px; }

/* ─── ALARM CARDS ─── */
.alarm-list { display:flex; flex-direction:column; gap:10px; padding:16px 22px; }
.alarm-card { display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:10px; border-left:4px solid; background:var(--bg-2); transition: background .15s; }
.alarm-card:hover { background:var(--bg-hover); }
.alarm-card.level-4 { border-color:var(--red); }
.alarm-card.level-3 { border-color:var(--amber); }
.alarm-card.level-2 { border-color:var(--blue); }
.alarm-card.level-1 { border-color:var(--text-3); }
.alarm-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.alarm-card.level-4 .alarm-icon { background:rgba(255,92,114,.12); color:var(--red); }
.alarm-card.level-3 .alarm-icon { background:rgba(255,181,71,.12); color:var(--amber); }
.alarm-card.level-2 .alarm-icon { background:rgba(91,156,255,.12); color:var(--blue); }
.alarm-body { flex:1; }
.alarm-name { font-weight:600; font-size:13px; margin-bottom:3px; }
.alarm-detail { font-size:12px; color:var(--text-3); font-family:var(--mono); }

/* ─── FORMS ─── */
.form-body { padding:22px; }
.form-row { display:flex; gap:14px; margin-bottom:16px; }
.form-field { flex:1; display:flex; flex-direction:column; gap:6px; }
.form-field label { font-size:11px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:.5px; }
.form-field input { background:var(--bg-0); border:1px solid var(--border); border-radius:8px; padding:10px 13px; color:var(--text); font-family:var(--mono); font-size:13px; outline:none; transition: border .2s, box-shadow .2s; }
.form-field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }
.form-check { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-2); cursor:pointer; margin-bottom:14px; }
.form-actions { display:flex; align-items:center; gap:12px; margin-top:18px; }
.msg-ok { font-size:12px; color:var(--green); }
.config-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.tools-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.code-output { background:var(--bg-0); border:1px solid var(--border); border-radius:8px; padding:16px; font-family:var(--mono); font-size:12px; color:var(--accent); overflow:auto; max-height:200px; margin-top:14px; line-height:1.7; }

/* ─── PULSE DOT ─── */
.pulse-dot { width:7px; height:7px; background:var(--accent); border-radius:50%; display:inline-block; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(0,221,184,.4)} 50%{box-shadow:0 0 0 6px rgba(0,221,184,0)} }

/* ─── RESPONSIVE ─── */
@media(max-width:1100px) { .config-grid,.tools-grid{grid-template-columns:1fr} }
@media(max-width:768px) { .sidebar{width:64px} .sidebar .nav-item span,.sidebar-user,.sidebar-footer span{display:none} .main-content{margin-left:64px;padding:20px 16px} .kpi-grid{grid-template-columns:repeat(2,1fr)} .form-row{flex-direction:column} }

/* ─── VALUE FLASH ─── */
@keyframes valFlash { 0%{background:var(--accent-bg)} 100%{background:transparent} }
.val-flash { animation: valFlash .6s ease; }

/* ─── NOTIFICATION TOAST ─── */
.toast-container { position:fixed; top:20px; right:20px; z-index:10000; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { background:var(--bg-2); border:1px solid var(--border); border-left:4px solid var(--red); border-radius:8px; padding:12px 18px; font-size:13px; color:var(--text); box-shadow:0 8px 32px rgba(0,0,0,.3); animation: toastIn .3s ease, toastOut .3s ease 4s forwards; pointer-events:auto; max-width:360px; }
.toast-title { font-weight:600; margin-bottom:3px; }
.toast-body { font-size:12px; color:var(--text-2); }
@keyframes toastIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }
@keyframes toastOut { from{opacity:1} to{opacity:0;transform:translateX(20px)} }

/* ─── SPARKLINE (SVG Line Chart) ─── */
.sparkline-container { margin-top:16px; padding:16px 22px; border-top:1px solid var(--border); }
.sparkline-label { font-size:11px; color:var(--text-3); margin-bottom:8px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.sparkline-chart { width:100%; height:60px; }
.sparkline-chart path.line { fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sparkline-chart path.area { fill:url(#sparkGrad); opacity:.3; }

/* ─── TOP STATUS BAR ─── */
.topbar { position:fixed; top:0; left:var(--sidebar-w); right:0; height:42px; background:var(--bg-1); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 28px; gap:20px; z-index:90; transition: left .3s, background .3s; }
.topbar-item { font-size:12px; color:var(--text-3); display:flex; align-items:center; gap:6px; }
.topbar-item .dot { width:6px; height:6px; border-radius:50%; }
.topbar-item .dot.green { background:var(--green); box-shadow:0 0 6px rgba(76,237,160,.4); }
.topbar-item .dot.red { background:var(--red); }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:16px; }
.topbar-clock { font-family:var(--mono); font-size:12px; color:var(--text-2); }
.topbar-alarm { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--red); }
.main-content { margin-left:var(--sidebar-w); min-height:100vh; padding:62px 32px 28px; transition: margin .3s; }

/* ─── VALUE BAR (inline mini bar chart) ─── */
.val-bar { position:relative; display:inline-block; }
.val-bar::after { content:''; position:absolute; left:0; bottom:-3px; height:3px; border-radius:2px; background:var(--accent); opacity:.3; transition: width .4s ease; }
.val-bar[data-pct]::after { width: attr(data-pct); }

/* ─── EMPTY STATE ─── */
.empty-state { padding:40px; text-align:center; color:var(--text-3); }
.empty-state svg { margin-bottom:12px; opacity:.4; }
.empty-state p { font-size:13px; }

/* ─── SPLASH SCREEN (开场动画) ─── */
#splash { position:fixed; inset:0; z-index:99999; background:var(--bg-0); display:none; align-items:center; justify-content:center; }
#splash.show { display:flex; }
.splash-content { text-align:center; animation: splashIn .8s ease; }
@keyframes splashIn { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
.splash-logo { color:var(--accent); margin-bottom:24px; }
.splash-logo svg { width:80px; height:80px; }
.splash-rect { stroke-dasharray:280; stroke-dashoffset:280; animation: drawRect 1.5s ease forwards .3s; }
.splash-circle { stroke-dasharray:76; stroke-dashoffset:76; animation: drawRect 1s ease forwards .8s; }
.splash-dot { opacity:0; animation: fadeIn .3s ease forwards 1.5s; }
.splash-cross { opacity:0; animation: fadeIn .5s ease forwards 1.2s; }
@keyframes drawRect { to{stroke-dashoffset:0} }
@keyframes fadeIn { to{opacity:1} }
.splash-title { font-family:var(--mono); font-size:28px; font-weight:700; color:var(--text); letter-spacing:2px; margin-bottom:8px; }
.splash-sub { font-size:14px; color:var(--text-3); margin-bottom:32px; }
.splash-progress { width:240px; height:3px; background:var(--border); border-radius:2px; margin:0 auto 20px; overflow:hidden; }
.splash-bar { height:100%; width:0; background:var(--accent); border-radius:2px; animation: progressFill 2.5s ease forwards .5s; }
@keyframes progressFill { to{width:100%} }
.splash-steps { font-family:var(--mono); font-size:11px; color:var(--text-3); min-height:16px; }

/* ─── FULLSCREEN MODE ─── */
body.fullscreen .sidebar { transform:translateX(-100%); }
body.fullscreen .main-content { margin-left:0; }
body.fullscreen .topbar { left:0; }
.exit-fullscreen-btn { display:none; position:fixed; top:16px; right:16px; z-index:9999; background:rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.2); border-radius:8px; padding:8px; color:#fff; cursor:pointer; opacity:0.5; transition:opacity .2s; }
.exit-fullscreen-btn:hover { opacity:1; }
body.fullscreen .exit-fullscreen-btn { display:block; }