Index: lan-frontend/src/styles/theme.css
===================================================================
--- lan-frontend/src/styles/theme.css	(revision 2058e5c694bb6097866a5fe6503c519e8f74970f)
+++ lan-frontend/src/styles/theme.css	(revision 2058e5c694bb6097866a5fe6503c519e8f74970f)
@@ -0,0 +1,403 @@
+/* =========================
+   LAN Security Monitor Theme
+   Dark Navy + Light Blue
+   ========================= */
+
+:root{
+  --bg0: #070b16;
+  --bg1: #0a1020;
+  --bg2: #0e1730;
+
+  --panel: rgba(15,23,42,0.62);
+  --panel2: rgba(2,6,23,0.35);
+
+  --border: rgba(96,165,250,0.18);
+  --border2: rgba(147,197,253,0.28);
+
+  --text: rgba(255,255,255,0.92);
+  --muted: rgba(191,219,254,0.82);
+  --dim: rgba(148,163,184,0.85);
+
+  --accent: rgba(96,165,250,0.95);   /* light blue */
+  --accent2: rgba(34,211,238,0.80);  /* cyan */
+  --danger: rgba(239,68,68,0.95);
+  --warn: rgba(245,158,11,0.95);
+  --ok: rgba(34,197,94,0.95);
+
+  --shadow: 0 18px 45px rgba(0,0,0,0.32);
+  --shadow2: 0 10px 25px rgba(0,0,0,0.22);
+
+  --r12: 12px;
+  --r16: 16px;
+  --r18: 18px;
+}
+
+*{ box-sizing: border-box; }
+html, body { height: 100%; }
+body{
+  margin:0;
+  color: var(--text);
+  background:
+    radial-gradient(900px 460px at 20% -10%, rgba(96,165,250,0.18), transparent 60%),
+    radial-gradient(800px 420px at 80% 0%, rgba(34,211,238,0.10), transparent 55%),
+    radial-gradient(1000px 700px at 50% 120%, rgba(30,64,175,0.16), transparent 60%),
+    linear-gradient(180deg, var(--bg0), var(--bg1) 45%, #060913 100%);
+  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
+}
+
+/* Layout */
+.app-wrap{
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 16px 18px 40px;
+}
+
+/* =========================
+   Panels
+   ========================= */
+.panel{
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--r18);
+  box-shadow: var(--shadow2);
+  overflow: hidden;
+  backdrop-filter: blur(10px);
+}
+.panel-head{
+  display:flex;
+  align-items:center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid rgba(96,165,250,0.14);
+  background: linear-gradient(180deg, rgba(2,6,23,0.32), rgba(2,6,23,0.12));
+}
+.panel-title{
+  font-weight: 900;
+  letter-spacing: 0.3px;
+  color: rgba(255,255,255,0.95);
+}
+.panel-body{
+  padding: 16px;
+}
+
+/* small helpers */
+.pill{
+  display:inline-flex;
+  align-items:center;
+  gap: 10px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(30,41,59,0.60);
+  border: 1px solid rgba(96,165,250,0.22);
+  color: rgba(255,255,255,0.92);
+  font-weight: 800;
+  font-size: 12px;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
+}
+.small{
+  font-size: 12px;
+  color: var(--dim);
+  line-height: 1.35;
+}
+.dim{ color: var(--dim); font-weight: 700; }
+
+/* =========================
+   Inputs / Selects / Buttons
+   ========================= */
+.input, .select{
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: var(--r12);
+  border: 1px solid rgba(96,165,250,0.18);
+  background: rgba(2,6,23,0.35);
+  color: rgba(255,255,255,0.92);
+  outline: none;
+  font-weight: 700;
+  transition: border-color .12s ease, background .12s ease, transform .12s ease;
+}
+.input::placeholder{ color: rgba(148,163,184,0.75); }
+.input:focus, .select:focus{
+  border-color: rgba(96,165,250,0.42);
+  background: rgba(2,6,23,0.46);
+}
+
+.btn{
+  appearance: none;
+  border: 1px solid rgba(96,165,250,0.22);
+  background: rgba(15,23,42,0.55);
+  color: rgba(255,255,255,0.92);
+  padding: 9px 12px;
+  border-radius: var(--r12);
+  font-weight: 900;
+  font-size: 13px;
+  cursor: pointer;
+  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
+  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
+}
+.btn:hover{
+  transform: translateY(-1px);
+  background: rgba(30,41,59,0.65);
+  border-color: rgba(96,165,250,0.38);
+}
+.btn:disabled{
+  opacity: .6;
+  cursor: not-allowed;
+  transform: none;
+}
+.btn.primary{
+  background: linear-gradient(135deg, rgba(37,99,235,0.95), rgba(56,189,248,0.70));
+  border-color: rgba(147,197,253,0.35);
+  color: rgba(5,12,24,0.95);
+}
+.btn.primary:hover{
+  background: linear-gradient(135deg, rgba(59,130,246,0.95), rgba(34,211,238,0.75));
+}
+
+/* Filters row */
+.filters{
+  display:grid;
+  grid-template-columns: 1.6fr 0.6fr auto;
+  gap: 10px;
+}
+@media (max-width: 820px){
+  .filters{ grid-template-columns: 1fr; }
+}
+
+/* =========================
+   Stats grid
+   ========================= */
+.stats-grid{
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin: 14px 0;
+}
+@media (max-width: 900px){
+  .stats-grid{ grid-template-columns: 1fr; }
+}
+
+.stat-card{
+  background:
+    radial-gradient(500px 180px at 20% 0%, rgba(96,165,250,0.16), transparent 55%),
+    rgba(15,23,42,0.58);
+  border: 1px solid rgba(96,165,250,0.18);
+  border-radius: var(--r18);
+  padding: 14px 16px;
+  box-shadow: var(--shadow2);
+  backdrop-filter: blur(10px);
+}
+.stat-card .label{
+  color: var(--dim);
+  font-size: 12px;
+  font-weight: 900;
+  letter-spacing: .8px;
+  text-transform: uppercase;
+}
+.stat-card .value{
+  font-size: 28px;
+  font-weight: 1000;
+  margin: 8px 0 2px;
+  color: rgba(255,255,255,0.95);
+}
+.stat-card .sub{
+  color: var(--muted);
+  font-size: 12px;
+}
+
+/* =========================
+   Computers grid + Card
+   ========================= */
+.computers-grid{
+  display:grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+@media (max-width: 980px){
+  .computers-grid{ grid-template-columns: 1fr; }
+}
+
+.card{
+  width:100%;
+  text-align:left;
+  border-radius: var(--r18);
+  border: 1px solid rgba(96,165,250,0.18);
+  background:
+    radial-gradient(520px 220px at 20% 0%, rgba(96,165,250,0.14), transparent 55%),
+    rgba(15,23,42,0.54);
+  box-shadow: var(--shadow2);
+  padding: 14px;
+  cursor: pointer;
+  transition: transform .14s ease, border-color .14s ease, background .14s ease;
+  backdrop-filter: blur(10px);
+}
+.card:hover{
+  transform: translateY(-3px);
+  border-color: rgba(96,165,250,0.38);
+  background:
+    radial-gradient(520px 220px at 20% 0%, rgba(34,211,238,0.12), transparent 55%),
+    rgba(15,23,42,0.62);
+}
+.card:active{ transform: translateY(-1px); }
+
+.card-head{
+  display:flex;
+  justify-content: space-between;
+  align-items:center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+.card-title{
+  font-weight: 1000;
+  color: rgba(255,255,255,0.95);
+  letter-spacing: .2px;
+}
+.dot{
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  box-shadow: 0 0 0 4px rgba(255,255,255,0.04);
+}
+.dot.online{ background: var(--ok); box-shadow: 0 0 0 4px rgba(34,197,94,0.12); }
+.dot.idle{ background: var(--warn); box-shadow: 0 0 0 4px rgba(245,158,11,0.12); }
+.dot.offline{ background: rgba(148,163,184,0.8); box-shadow: 0 0 0 4px rgba(148,163,184,0.10); }
+
+.meta{
+  display:grid;
+  gap: 6px;
+  color: rgba(226,232,240,0.92);
+  font-size: 13px;
+  line-height: 1.25;
+}
+
+.kpis{
+  display:grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(96,165,250,0.14);
+}
+.kpi{
+  border-radius: var(--r16);
+  border: 1px solid rgba(96,165,250,0.14);
+  background: rgba(2,6,23,0.30);
+  padding: 10px 10px;
+}
+.kpi .k{
+  font-size: 11px;
+  color: var(--dim);
+  font-weight: 900;
+  letter-spacing: .6px;
+  text-transform: uppercase;
+}
+.kpi .v{
+  margin-top: 6px;
+  font-size: 18px;
+  font-weight: 1000;
+  color: rgba(255,255,255,0.95);
+}
+
+/* =========================
+   Modal (shared classes)
+   ========================= */
+.backdrop{
+  position: fixed;
+  inset: 0;
+  background: rgba(2,6,23,0.72);
+  backdrop-filter: blur(6px);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  padding: 20px;
+  z-index: 60;
+}
+.modal{
+  width: min(920px, 96vw);
+  border-radius: var(--r18);
+  background:
+    radial-gradient(900px 420px at 20% 0%, rgba(96,165,250,0.18), transparent 60%),
+    radial-gradient(700px 350px at 80% 10%, rgba(34,211,238,0.10), transparent 55%),
+    rgba(10,16,32,0.92);
+  border: 1px solid rgba(96,165,250,0.22);
+  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
+  overflow: hidden;
+}
+.modal-head{
+  padding: 14px 16px;
+  display:flex;
+  align-items:center;
+  justify-content: space-between;
+  gap: 10px;
+  border-bottom: 1px solid rgba(96,165,250,0.18);
+}
+.modal-title{
+  font-weight: 1000;
+  color: rgba(255,255,255,0.95);
+  letter-spacing: .2px;
+}
+.modal-sub{
+  margin-top: 2px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+/* If you have drawer classes */
+.ai-drawer{
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  width: min(420px, 92vw);
+  background:
+    radial-gradient(700px 400px at 20% 0%, rgba(96,165,250,0.18), transparent 55%),
+    rgba(10,16,32,0.94);
+  border-left: 1px solid rgba(96,165,250,0.20);
+  box-shadow: -20px 0 60px rgba(0,0,0,0.35);
+  z-index: 70;
+  padding: 14px;
+}
+.ai-header{
+  font-weight: 1000;
+  color: rgba(255,255,255,0.95);
+  margin-bottom: 10px;
+}
+.ai-messages{
+  height: calc(100vh - 160px);
+  overflow: auto;
+  border-radius: var(--r16);
+  border: 1px solid rgba(96,165,250,0.14);
+  background: rgba(2,6,23,0.28);
+  padding: 10px;
+}
+.ai-msg{
+  color: rgba(226,232,240,0.92);
+  font-size: 13px;
+  line-height: 1.35;
+  padding: 10px;
+  border-radius: 12px;
+  border: 1px solid rgba(96,165,250,0.12);
+  background: rgba(15,23,42,0.45);
+  margin-bottom: 10px;
+}
+.ai-input{
+  width: 100%;
+  margin-top: 10px;
+  padding: 10px 12px;
+  border-radius: var(--r12);
+  border: 1px solid rgba(96,165,250,0.18);
+  background: rgba(2,6,23,0.35);
+  color: rgba(255,255,255,0.92);
+  outline: none;
+  font-weight: 700;
+}
+.ai-input::placeholder{ color: rgba(148,163,184,0.75); }
+
+/* Scrollbars (nice) */
+*::-webkit-scrollbar{ width: 10px; height: 10px; }
+*::-webkit-scrollbar-thumb{
+  background: rgba(96,165,250,0.20);
+  border: 2px solid rgba(2,6,23,0.35);
+  border-radius: 999px;
+}
+*::-webkit-scrollbar-track{ background: rgba(2,6,23,0.25); }