:root { color-scheme: light; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; color:#263442; background:#f4f7fa; }
* { box-sizing:border-box; }
body { margin:0; min-width:980px; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.hidden { display:none!important; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:190px 1fr; }
.sidebar { position:fixed; width:190px; height:100vh; background:#2d465e; color:#fff; display:flex; flex-direction:column; }
.brand { height:68px; padding:12px 10px; display:flex; align-items:center; gap:9px; background:#263c50; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; background:#f7fafc; color:#2d465e; border-radius:5px; font-weight:800; }
.brand strong,.brand small { display:block; }.brand strong { font-size:14px; }.brand small { opacity:.72; font-size:10px; margin-top:3px; }
nav { padding-top:8px; } nav button,.logout { width:100%; border:0; color:#fff; text-align:left; background:transparent; padding:15px 14px; }
nav button:hover,nav button.active { background:#435e77; }.logout { margin-top:auto; margin-bottom:10px; background:#ef4e43; text-align:center; width:calc(100% - 10px); align-self:center; border-radius:4px; padding:10px; }
main { grid-column:2; min-height:100vh; }
header { height:68px; background:#fff; border-bottom:1px solid #dbe2e9; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
header h1 { font-size:21px; margin:0; }.admin { font-size:13px; }.admin i { display:inline-block; width:8px; height:8px; border-radius:50%; background:#30a852; margin-right:6px; }
.content { padding:25px; }.panel { background:#fff; border:1px solid #dbe2e9; border-radius:5px; padding:20px; margin-bottom:16px; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }.stat { text-align:center; min-height:96px; }.stat span { display:block; font-weight:600; }.stat strong { display:block; font-size:30px; color:#2fa34a; margin-top:12px; }
.dashboard-grid { display:grid; grid-template-columns:1.45fr .9fr; gap:16px; }.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }.panel-head h2 { margin:0; font-size:17px; }.muted { color:#788898; font-size:12px; }
.list-scroll { max-height:470px; overflow:auto; }.alert-card { background:#fff3c9; border:1px solid #f2d687; border-left:4px solid #f3aa17; border-radius:5px; padding:14px; margin-bottom:9px; line-height:1.75; font-size:14px; white-space:pre-wrap; word-break:break-word; }
.device-card,.keyword-row { border:1px solid #dbe2e9; padding:14px; margin-bottom:9px; border-radius:5px; display:flex; justify-content:space-between; align-items:center; }.device-card strong,.keyword-row strong { display:block; margin-bottom:5px; }.danger-text { color:#ed493d; }
.badge { display:inline-block; border-radius:12px; padding:3px 9px; font-size:11px; }.badge.online { color:#228c41; background:#dcf7e4; }.badge.offline { color:#697887; background:#edf1f4; }
.form-row { display:grid; grid-template-columns:1fr 145px auto; gap:10px; align-items:end; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.form-grid .wide { grid-column:1/-1; }
label { display:grid; gap:7px; font-size:13px; color:#536475; }input,select { width:100%; border:1px solid #cfd9e2; border-radius:4px; padding:10px; background:#fff; color:#263442; }
button.primary,.button { border:0; border-radius:4px; padding:10px 16px; background:#2fa34a; color:#fff; }button.secondary { border:1px solid #cfd9e2; border-radius:4px; padding:9px 14px; background:#fff; }button.danger { border:0; border-radius:4px; padding:9px 14px; background:#ef4e43; color:#fff; }
.login-shell { min-height:100vh; display:grid; place-items:center; background:#edf2f6; }.login-card { width:360px; background:#fff; padding:34px; border-radius:8px; box-shadow:0 15px 45px rgba(35,55,75,.15); text-align:center; }.login-card .brand-mark { margin:auto; background:#2d465e; color:#fff; }.login-card h1 { margin:15px 0 5px; }.login-card p { margin:0 0 25px; color:#7b8996; }.login-card label { text-align:left; }.login-card button { width:100%; margin-top:18px; }.error { color:#e33f35; min-height:22px; margin-top:10px; font-size:13px; }
.toast { position:fixed; right:25px; bottom:25px; background:#263c50; color:#fff; padding:12px 18px; border-radius:5px; opacity:0; transform:translateY(12px); transition:.2s; pointer-events:none; }.toast.show { opacity:1; transform:none; }.toast.error-toast { background:#c0392b; }
@media(max-width:1200px){.dashboard-grid{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,1fr)}}