feat(ui): add rack-style UI mockups CSS

Author: TeamSPoon

server/static/css/mockups.css

@@ -0,0 +1,35 @@
+:root{
+  --bg:#1a1a1c; --panel:#23262c; --panel-hi:#2b2f36;
+  --led-off:#3a3d44; --led-ok:#19d18f; --led-warn:#f59e0b; --led-err:#ef4444; --led-info:#3aa0ff;
+  --cyan:#3aa0ff; --text:#e9eef4; --muted:#97a1af;
+  --bevel:inset 0 1px 0 rgba(255,255,255,.03), 0 1px 3px rgba(0,0,0,.6);
+  --bevel-hi:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.7);
+}
+.mockwrap{background:var(--bg);color:var(--text);padding:14px;border-radius:12px;}
+.rack{background:linear-gradient(#222831,#1d2127);border:1px solid #303440;border-radius:14px;box-shadow:var(--bevel);padding:16px;margin:12px 0;}
+.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
+.title{font-weight:700;letter-spacing:.4px}
+.btn{background:var(--panel);border:1px solid #3a3f48;border-radius:10px;box-shadow:var(--bevel);padding:6px 10px;color:var(--text);cursor:pointer}
+.btn:active{transform:translateY(1px)}
+.ledbar{display:flex;gap:8px}
+.led{width:12px;height:12px;border-radius:50%;background:var(--led-off);box-shadow:inset 0 0 4px rgba(0,0,0,.8),0 0 6px rgba(0,0,0,.35)}
+.led.ok{background:var(--led-ok);box-shadow:0 0 8px var(--led-ok)}
+.led.warn{background:var(--led-warn);box-shadow:0 0 8px var(--led-warn)}
+.led.err{background:var(--led-err);box-shadow:0 0 8px var(--led-err)}
+.led.info{background:var(--led-info);box-shadow:0 0 8px var(--led-info)}
+
+.row{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
+.card{background:var(--panel);border:1px solid #333844;border-radius:12px;box-shadow:var(--bevel);padding:12px;min-width:220px;flex:1}
+.card h4{margin:0 0 8px 0;font-weight:600;color:var(--muted)}
+.small{font-size:.875rem;color:var(--muted)}
+
+.knob{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#444 0,#2d3139 65%,#222 100%);position:relative;box-shadow:var(--bevel-hi);border:1px solid #404655}
+.knob:after{content:'';position:absolute;left:50%;top:6px;width:2px;height:16px;background:#b7c6d9;transform:translateX(-50%)}
+.slider{height:10px;background:#0e1218;border:1px solid #2f3440;border-radius:6px;box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
+.meter{height:36px;border:1px solid #2f3440;border-radius:6px;background:linear-gradient(90deg,#26c281, #ecf000, #ff5f5f)}
+.label{font-size:.8rem;color:var(--muted);margin-bottom:6px}
+.grid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:12px}
+.toolbar{display:flex;gap:8px;align-items:center}
+.input{background:#0e1218;border:1px solid #2f3440;border-radius:8px;color:var(--text);padding:6px 8px;box-shadow:var(--bevel);min-width:180px}
+.tag{background:#0e1218;border:1px solid #2f3440;border-radius:8px;padding:4px 8px;color:var(--muted);font-size:.8rem}
+hr.soft{border:none;border-top:1px solid #2f3440;margin:10px 0}