Restyle to a clean, flat look and rename brand to SCOPENET

- Brand is now SCOPENET everywhere (defaults, UI, installer, docs)
- Launcher: solid backgrounds (no animated orbs/grain), flat Play button
  without gradient/shine/glow, quieter rail with a simple active
  indicator, smaller type scale, Inter as default font, glass off by
  default, restyled sliders
- Panel: same flat treatment; live preview mirrors the new launcher
- New flat scope-reticle logo and app icons
- Calmer default palette
- Fix: lock the shared cargo cache in the Docker build (amd64/arm64 raced)
- Fix: Windows-only clippy lint in sys.rs

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011ARcGWxLx21FwXJ3yfGriS

panel/web/src/app.css

@@ -1,24 +1,24 @@
 :root {
-  --bg: #090a12;
-  --bg-2: #0e1019;
-  --surface: #12141f;
-  --surface-2: #181b29;
-  --surface-3: #20243a;
+  --bg: #0d0e12;
+  --bg-2: #111217;
+  --surface: #16181e;
+  --surface-2: #1c1e25;
+  --surface-3: #25272f;
   --line: rgba(255, 255, 255, 0.07);
-  --line-strong: rgba(255, 255, 255, 0.13);
-  --text: #eef0ff;
-  --text-2: #b7bbdb;
-  --muted: #7d82a8;
-  --accent: #8b6cff;
-  --accent-2: #22d3ee;
-  --accent-soft: rgba(139, 108, 255, 0.14);
-  --good: #34d399;
-  --warn: #fbbf24;
-  --bad: #f43f5e;
-  --radius: 14px;
-  --radius-sm: 9px;
-  --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
-  --font: 'Outfit Variable', system-ui, sans-serif;
+  --line-strong: rgba(255, 255, 255, 0.12);
+  --text: #ecedf1;
+  --text-2: #b4b7c0;
+  --muted: #8b8f9a;
+  --accent: #6d6af5;
+  --accent-2: #8b88f8;
+  --accent-soft: rgba(109, 106, 245, 0.14);
+  --good: #3fb97c;
+  --warn: #e2a336;
+  --bad: #e5484d;
+  --radius: 10px;
+  --radius-sm: 7px;
+  --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
+  --font: 'Inter Variable', system-ui, sans-serif;
   --mono: 'JetBrains Mono Variable', ui-monospace, monospace;
   color-scheme: dark;
 }
@@ -34,17 +34,11 @@ body {
   background: var(--bg);
   color: var(--text);
   font-family: var(--font);
-  font-size: 15px;
+  font-size: 14.5px;
   -webkit-font-smoothing: antialiased;
 }
 
-body {
-  background:
-    radial-gradient(1200px 600px at 110% -10%, rgba(139, 108, 255, 0.12), transparent 60%),
-    radial-gradient(900px 500px at -10% 110%, rgba(34, 211, 238, 0.07), transparent 60%),
-    var(--bg);
-  background-attachment: fixed;
-}
+body { background: var(--bg); }
 
 a {
   color: var(--accent-2);
@@ -53,11 +47,11 @@ a {
 
 h1, h2, h3, h4 {
   margin: 0;
-  font-weight: 650;
+  font-weight: 600;
   letter-spacing: -0.01em;
 }
 
-h1 { font-size: 1.75rem; }
+h1 { font-size: 1.5rem; }
 h2 { font-size: 1.2rem; }
 h3 { font-size: 1rem; }
 
@@ -69,7 +63,7 @@ code, .mono {
 }
 
 ::selection {
-  background: rgba(139, 108, 255, 0.4);
+  background: rgba(109, 106, 245, 0.4);
 }
 
 ::-webkit-scrollbar { width: 10px; height: 10px; }
@@ -109,20 +103,16 @@ code, .mono {
 .tiny { font-size: 0.75rem; }
 
 .card {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)), var(--surface);
+  background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 20px;
 }
 
 .card.hover {
-  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
-}
-.card.hover:hover {
-  border-color: var(--line-strong);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow);
+  transition: border-color 0.15s;
 }
+.card.hover:hover { border-color: var(--line-strong); }
 
 .section-title {
   display: flex;
@@ -151,29 +141,28 @@ button, .btn {
   align-items: center;
   justify-content: center;
   gap: 8px;
-  font-weight: 550;
-  transition: background 0.15s, border-color 0.15s, transform 0.08s, box-shadow 0.15s, opacity 0.15s;
+  font-weight: 520;
+  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
   white-space: nowrap;
 }
 button:hover { background: var(--surface-3); }
-button:active { transform: translateY(1px); }
 button:disabled { opacity: 0.5; cursor: not-allowed; }
 button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
 }
 
-button.primary {
-  background: linear-gradient(135deg, var(--accent), #6a4cf0);
+button.primary, a.btn.primary {
+  background: var(--accent);
   border-color: transparent;
-  box-shadow: 0 8px 24px -10px rgba(139, 108, 255, 0.8);
+  color: white;
 }
-button.primary:hover { filter: brightness(1.1); }
+button.primary:hover, a.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); }
 
 button.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
 button.ghost:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
-button.danger { color: #ff8a9e; border-color: rgba(244, 63, 94, 0.3); background: rgba(244, 63, 94, 0.08); }
-button.danger:hover { background: rgba(244, 63, 94, 0.16); }
+button.danger { color: #f2999c; border-color: rgba(229, 72, 77, 0.3); background: rgba(229, 72, 77, 0.08); }
+button.danger:hover { background: rgba(229, 72, 77, 0.15); }
 button.icon { padding: 8px; }
 button.sm { padding: 6px 11px; font-size: 0.85rem; }
 
@@ -194,7 +183,10 @@ select { appearance: none; background-image: linear-gradient(45deg, transparent
 input[type='color'] { padding: 0; width: 42px; height: 42px; border-radius: 10px; cursor: pointer; overflow: hidden; }
 input[type='color']::-webkit-color-swatch-wrapper { padding: 0; }
 input[type='color']::-webkit-color-swatch { border: none; }
-input[type='range'] { padding: 0; accent-color: var(--accent); border: none; background: transparent; }
+input[type='range'] { -webkit-appearance: none; appearance: none; padding: 0; height: 18px; border: none; background: transparent; cursor: pointer; }
+input[type='range']::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: var(--surface-3); }
+input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--text); border: 3px solid var(--accent); }
+input[type='range']:hover, input[type='range']:focus { background: transparent; }
 input[type='checkbox'] { width: auto; accent-color: var(--accent); }
 
 label.field {
@@ -212,15 +204,15 @@ label.field .help { color: var(--muted); font-weight: 400; font-size: 0.78rem; }
   align-items: center;
   gap: 5px;
   padding: 3px 9px;
-  border-radius: 999px;
+  border-radius: 5px;
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 520;
   background: rgba(255, 255, 255, 0.06);
   color: var(--text-2);
   border: 1px solid var(--line);
   white-space: nowrap;
 }
-.badge.accent { background: var(--accent-soft); color: #c4b5ff; border-color: rgba(139, 108, 255, 0.3); }
+.badge.accent { background: var(--accent-soft); color: #b9b7fb; border-color: rgba(109, 106, 245, 0.28); }
 .badge.good { background: rgba(52, 211, 153, 0.12); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.25); }
 .badge.warn { background: rgba(251, 191, 36, 0.12); color: #fcd34d; border-color: rgba(251, 191, 36, 0.25); }
 .badge.bad { background: rgba(244, 63, 94, 0.12); color: #fda4af; border-color: rgba(244, 63, 94, 0.25); }
@@ -241,7 +233,7 @@ label.field .help { color: var(--muted); font-weight: 400; font-size: 0.78rem; }
   color: var(--muted);
   font-size: 0.88rem;
 }
-.segmented button.active { background: var(--surface-3); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
+.segmented button.active { background: var(--surface-3); color: var(--text); }
 
 .tabs {
   display: flex;
@@ -271,8 +263,6 @@ table.table {
   color: var(--muted);
   font-weight: 500;
   font-size: 0.78rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
   padding: 10px 14px;
   border-bottom: 1px solid var(--line);
 }
@@ -304,7 +294,7 @@ table.table {
 .spin { animation: spin 0.9s linear infinite; }
 
 @keyframes spin { to { transform: rotate(360deg); } }
-@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
 
 @media (max-width: 900px) {
   .page { padding: 20px 16px 48px; }