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

launcher/src/components/Background.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  // Full-window backdrop: instance banner → admin background → animated gradient.
+  // Full-window backdrop: instance banner → admin image/video → plain colour.
   import { abs, app, selectedInstance } from '../lib/store.svelte';
 
   const b = $derived(app.manifest?.branding);
@@ -7,44 +7,30 @@
   const image = $derived(abs(inst?.banner_url) ?? (b?.background.kind === 'image' ? abs(b.background.url) : null));
   const video = $derived(!inst?.banner_url && b?.background.kind === 'video' && app.settings?.background_video !== false && !app.running ? abs(b.background.url) : null);
   const blur = $derived(b?.background.blur ?? 0);
-  const dim = $derived((b?.background.dim ?? 45) / 100);
+  const dim = $derived((b?.background.dim ?? 55) / 100);
   let hidden = $state(false);
 </script>
 
 <svelte:document onvisibilitychange={() => (hidden = document.hidden)} />
 
 <div class="bg" aria-hidden="true">
-  {#key image ?? video ?? 'gradient'}
-    <div class="layer">
-      {#if video && !hidden}
-        <video src={video} autoplay muted loop playsinline style:filter="blur({blur}px)"></video>
-      {:else if image}
-        <div class="img" style:background-image="url(&quot;{image}&quot;)" style:filter="blur({blur}px)"></div>
-      {:else}
-        <div class="gradient"><span class="o1"></span><span class="o2"></span><span class="o3"></span></div>
-      {/if}
-    </div>
-  {/key}
-  <div class="shade" style:--dim={dim}></div>
-  <div class="grain"></div>
+  {#if video && !hidden}
+    {#key video}<video src={video} autoplay muted loop playsinline style:filter="blur({blur}px)"></video>{/key}
+    <div class="shade" style:--dim={dim}></div>
+  {:else if image}
+    {#key image}<div class="img" style:background-image="url(&quot;{image}&quot;)" style:filter="blur({blur}px)"></div>{/key}
+    <div class="shade" style:--dim={dim}></div>
+  {/if}
 </div>
 
 <style>
   .bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--bg); }
-  .layer { position: absolute; inset: 0; animation: fade 0.6s ease; }
-  video, .img { position: absolute; inset: -2rem; width: calc(100% + 4rem); height: calc(100% + 4rem); object-fit: cover; background-size: cover; background-position: center; }
-  .gradient { position: absolute; inset: 0; }
-  .gradient span { position: absolute; border-radius: 50%; filter: blur(5rem); opacity: 0.55; will-change: transform; }
-  .o1 { width: 55vw; height: 55vw; right: -12vw; top: -22vw; background: var(--accent); animation: drift 22s ease-in-out infinite alternate; }
-  .o2 { width: 45vw; height: 45vw; left: -10vw; bottom: -25vw; background: var(--accent-2); opacity: 0.3 !important; animation: drift 28s ease-in-out infinite alternate-reverse; }
-  .o3 { width: 30vw; height: 30vw; left: 35vw; top: 30vh; background: color-mix(in srgb, var(--accent) 50%, var(--accent-2)); opacity: 0.18 !important; animation: drift 34s ease-in-out infinite alternate; }
-  @keyframes drift { to { transform: translate(-6vw, 5vh) scale(1.15); } }
+  video, .img { position: absolute; inset: -1.5rem; width: calc(100% + 3rem); height: calc(100% + 3rem); object-fit: cover; background-size: cover; background-position: center; animation: fade 0.4s ease; }
+  /* Keep text readable: darken, strongest on the left where the title sits. */
   .shade {
     position: absolute; inset: 0;
     background:
-      linear-gradient(90deg, color-mix(in srgb, var(--bg) calc(var(--dim) * 100% + 30%), transparent) 0%, color-mix(in srgb, var(--bg) calc(var(--dim) * 100%), transparent) 45%, transparent 80%),
-      linear-gradient(0deg, color-mix(in srgb, var(--bg) 85%, transparent) 0%, transparent 45%),
-      color-mix(in srgb, var(--bg) calc(var(--dim) * 60%), transparent);
+      linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) calc(var(--dim) * 100%), transparent) 55%, color-mix(in srgb, var(--bg) calc(var(--dim) * 70%), transparent) 100%),
+      linear-gradient(0deg, var(--bg) 0%, transparent 40%);
   }
-  .grain { position: absolute; inset: 0; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
 </style>

launcher/src/components/Console.svelte

@@ -38,7 +38,7 @@
 </div>
 
 <style>
-  .console { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; height: 42%; display: flex; flex-direction: column; z-index: 25; background: color-mix(in srgb, var(--bg) 97%, transparent); box-shadow: 0 -1rem 3rem -1rem rgba(0, 0, 0, 0.6); animation: fade-up 0.25s var(--ease); overflow: hidden; }
+  .console { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; height: 42%; display: flex; flex-direction: column; z-index: 25; background: var(--bg); border-color: var(--line-strong); animation: fade 0.15s ease; overflow: hidden; }
   header { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem 0.5rem 1rem; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
   .search { display: flex; align-items: center; gap: 0.3rem; color: var(--muted); }
   .search input { width: 10rem; padding: 0.3rem 0.5rem; font-size: 0.8rem; }

launcher/src/components/Modal.svelte

@@ -21,10 +21,10 @@
 {/if}
 
 <style>
-  .backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1.5rem; background: color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter: blur(6px); animation: fade 0.15s ease; }
-  .modal { width: 100%; max-height: calc(100vh - 4rem); overflow: auto; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 2rem 5rem -1rem rgba(0, 0, 0, 0.7); animation: pop 0.22s var(--ease); }
+  .backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1.5rem; background: color-mix(in srgb, var(--bg) 70%, transparent); animation: fade 0.12s ease; }
+  .modal { width: 100%; max-height: calc(100vh - 4rem); overflow: auto; background: var(--surface); border-color: var(--line-strong); box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.5); animation: pop 0.15s ease; }
   header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem 0; }
   .body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; }
   footer { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 0.9rem 1.25rem; border-top: 1px solid var(--line); }
-  @keyframes pop { from { opacity: 0; transform: translateY(0.8rem) scale(0.97); } }
+  @keyframes pop { from { opacity: 0; transform: translateY(0.3rem); } }
 </style>

launcher/src/components/NewsFeed.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Newspaper, Pin, ArrowUpRight } from '@lucide/svelte';
+  import { Pin, ArrowUpRight } from '@lucide/svelte';
   import { abs } from '../lib/store.svelte';
   import { niceDate } from '../lib/format';
   import { openUrl } from '../lib/tauri';
@@ -10,10 +10,10 @@
 </script>
 
 <section class="news">
-  <h4 class="head"><Newspaper size={14} /> Latest news</h4>
+  <h4 class="head">News</h4>
   <div class="list">
-    {#each sorted as n, i (n.id)}
-      <article class="card glass" style:animation-delay="{i * 60}ms" class:link={!!n.link}>
+    {#each sorted as n (n.id)}
+      <article class="card glass" class:link={!!n.link}>
         {#if n.image_url}<img src={abs(n.image_url)} alt="" loading="lazy" />{/if}
         <div class="body">
           <div class="meta">
@@ -35,16 +35,16 @@
 
 <style>
   .news { display: flex; flex-direction: column; min-height: 0; gap: 0.7rem; }
-  .head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 750; padding-left: 0.2rem; }
-  .list { display: flex; flex-direction: column; gap: 0.7rem; overflow-y: auto; padding-right: 0.3rem; min-height: 0; mask-image: linear-gradient(180deg, black 85%, transparent); padding-bottom: 2rem; }
-  .card { overflow: hidden; flex-shrink: 0; animation: fade-up 0.35s var(--ease) both; transition: border-color 0.2s, transform 0.2s var(--ease); }
+  .head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.75rem; color: var(--muted); font-weight: 560; padding-left: 0.1rem; }
+  .list { display: flex; flex-direction: column; gap: 0.7rem; overflow-y: auto; padding-right: 0.3rem; min-height: 0; padding-bottom: 1rem; }
+  .card { overflow: hidden; flex-shrink: 0; background: var(--surface); transition: border-color 0.15s; }
   .card:hover { border-color: var(--line-strong); }
   .card img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; }
   .body { padding: 0.85rem 1rem 0.9rem; display: flex; flex-direction: column; gap: 0.35rem; }
-  .meta { display: flex; align-items: center; gap: 0.4rem; color: var(--accent); }
-  .tag { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
-  h3 { font-size: 1rem; font-weight: 680; line-height: 1.3; }
-  p { font-size: 0.84rem; line-height: 1.5; color: color-mix(in srgb, var(--text) 68%, transparent); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+  .meta { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); }
+  .tag { font-size: 0.72rem; font-weight: 560; color: var(--accent); }
+  h3 { font-size: 0.95rem; font-weight: 600; line-height: 1.35; }
+  p { font-size: 0.83rem; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
   .more { align-self: flex-start; padding-left: 0; color: var(--accent); margin-top: 0.1rem; }
   .more:hover { background: transparent; color: var(--text); }
 </style>

launcher/src/components/PlayButton.svelte

@@ -40,13 +40,13 @@
   {:else if running}
     <button class="play running" onclick={kill} title="Force-close Minecraft">
       <span class="pulse"></span>
-      <span class="lbl">PLAYING</span>
+      <span class="lbl">Playing</span>
       <span class="stop"><Square size={13} fill="currentColor" /> Stop</span>
     </button>
   {:else}
     <button class="play" onclick={() => play(inst.id)} disabled={otherRunning || noAccount} title={noAccount ? 'Sign in first' : otherRunning ? 'Another instance is running' : 'Ctrl + Enter'}>
-      <Play size={22} fill="currentColor" />
-      <span class="lbl">PLAY</span>
+      <Play size={18} fill="currentColor" />
+      <span class="lbl">Play</span>
     </button>
   {/if}
   {#if mine && l.state === 'error'}
@@ -59,33 +59,28 @@
 </div>
 
 <style>
-  .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
+  .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
   .play {
-    position: relative; overflow: hidden; height: 4.2rem; min-width: 19rem; padding: 0 2.6rem; border: none; border-radius: var(--radius);
-    background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: white; font-size: 1.35rem; font-weight: 800; letter-spacing: 0.12em;
-    box-shadow: 0 1rem 2.6rem -0.9rem var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.25); gap: 0.8rem;
-    transition: transform 0.2s var(--ease), box-shadow 0.25s, filter 0.2s;
+    height: 3.3rem; min-width: 14rem; padding: 0 2rem; border: none; border-radius: var(--radius);
+    background: var(--accent); color: white; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em; gap: 0.65rem;
   }
-  .play::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.7s var(--ease); }
-  .play:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 1.4rem 3rem -0.9rem var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.3); filter: brightness(1.05); }
-  .play:hover:not(:disabled)::before { transform: translateX(100%); }
-  .play:active:not(:disabled) { transform: translateY(0) scale(0.985); }
-  .play:disabled { filter: grayscale(0.7) brightness(0.7); }
+  .play:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, white); }
+  .play:active:not(:disabled) { background: color-mix(in srgb, var(--accent) 85%, black); }
+  .play:disabled { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--muted); }
   .lbl { position: relative; }
-  .running { background: linear-gradient(120deg, color-mix(in srgb, var(--success) 70%, var(--bg)), color-mix(in srgb, var(--success) 45%, var(--accent-2))); box-shadow: 0 1rem 2.6rem -1rem var(--success); padding: 0 1.6rem 0 2rem; }
-  .pulse { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: white; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); animation: ping 1.6s infinite; }
-  @keyframes ping { 70% { box-shadow: 0 0 0 0.7rem rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
-  .stop { font-size: 0.78rem; letter-spacing: 0.04em; font-weight: 650; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border-radius: 99rem; background: rgba(0, 0, 0, 0.2); opacity: 0.85; }
-  .running:hover .stop { background: rgba(0, 0, 0, 0.35); opacity: 1; }
-  .progress { width: 28rem; max-width: 100%; padding: 0.95rem 1.1rem 0.85rem; display: flex; flex-direction: column; gap: 0.6rem; animation: fade-up 0.25s var(--ease); }
+  .running { background: color-mix(in srgb, var(--success) 16%, var(--surface)); color: var(--text); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); padding: 0 0.6rem 0 1.4rem; }
+  .running:hover:not(:disabled) { background: color-mix(in srgb, var(--success) 22%, var(--surface)); }
+  .pulse { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--success); }
+  .stop { font-size: 0.8rem; font-weight: 520; letter-spacing: 0; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--text) 8%, transparent); color: color-mix(in srgb, var(--text) 80%, transparent); margin-left: 0.6rem; }
+  .progress { width: 26rem; max-width: 100%; padding: 0.85rem 1rem 0.8rem; display: flex; flex-direction: column; gap: 0.55rem; background: var(--surface); }
   .top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
-  .stage { display: flex; align-items: center; gap: 0.5rem; font-weight: 620; font-size: 0.95rem; }
-  .bar { height: 0.5rem; border-radius: 99rem; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; position: relative; }
-  .bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.2s linear; box-shadow: 0 0 1rem var(--accent); }
-  .bar.indeterminate span { width: 35% !important; animation: slide 1.2s ease-in-out infinite; }
-  @keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
+  .stage { display: flex; align-items: center; gap: 0.5rem; font-weight: 560; font-size: 0.9rem; }
+  .bar { height: 0.3rem; border-radius: 99rem; background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; position: relative; }
+  .bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.2s linear; }
+  .bar.indeterminate span { width: 30% !important; animation: slide 1.3s ease-in-out infinite; }
+  @keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
   .meta { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
-  .error { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem; max-width: 34rem; font-size: 0.87rem; border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 14%, var(--panel)); line-height: 1.4; }
+  .error { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.8rem; max-width: 34rem; font-size: 0.85rem; background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 30%, transparent); line-height: 1.4; }
   .error :global(svg) { color: var(--danger); flex-shrink: 0; }
   .error span { flex: 1; }
 </style>

launcher/src/components/Rail.svelte

@@ -59,30 +59,31 @@
 </nav>
 
 <style>
-  .rail { width: 4.8rem; margin: 0 0 0.8rem 0.8rem; display: flex; flex-direction: column; align-items: center; padding: 0.8rem 0; gap: 0.5rem; border-radius: calc(var(--radius) + 4px); position: relative; z-index: 20; flex-shrink: 0; }
+  .rail { width: 4.4rem; display: flex; flex-direction: column; align-items: center; padding: 0.6rem 0 0.8rem; gap: 0.5rem; border: none; border-right: 1px solid var(--line); border-radius: 0; background: color-mix(in srgb, var(--surface) 70%, transparent); position: relative; z-index: 20; flex-shrink: 0; }
   .list { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; overflow-y: auto; overflow-x: visible; flex: 1; width: 100%; padding: 0.2rem 0; scrollbar-width: none; }
   .inst {
-    width: 3.1rem; height: 3.1rem; padding: 0; border-radius: var(--radius); position: relative; flex-shrink: 0; overflow: visible;
-    background: color-mix(in srgb, var(--surface) 80%, var(--text) 6%); border-color: var(--line); font-weight: 750; font-size: 0.95rem;
-    transition: transform 0.2s var(--ease), box-shadow 0.2s, border-radius 0.2s;
+    width: 2.9rem; height: 2.9rem; padding: 0; border-radius: var(--radius); position: relative; flex-shrink: 0; overflow: visible;
+    background: color-mix(in srgb, var(--text) 6%, transparent); border-color: transparent; font-weight: 600; font-size: 0.85rem;
+    color: color-mix(in srgb, var(--text) 75%, transparent);
   }
   .inst img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
-  .inst:hover { transform: translateY(-1px); border-radius: calc(var(--radius) * 0.75); }
-  .inst.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent), 0 0.5rem 1.5rem -0.5rem var(--accent); color: white; }
-  .inst.running::after { content: ''; position: absolute; right: -0.2rem; bottom: -0.2rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--success); border: 2px solid var(--surface); box-shadow: 0 0 0.6rem var(--success); }
-  .tip { position: fixed; left: 6.4rem; transform: translateY(0); font-style: normal; font-size: 0.82rem; font-weight: 600; white-space: nowrap; padding: 0.35rem 0.7rem; border-radius: 0.5rem; background: var(--surface); border: 1px solid var(--line-strong); opacity: 0; pointer-events: none; transition: opacity 0.15s; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4); z-index: 50; color: var(--text); }
+  .inst:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
+  .inst.active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
+  .inst.active::before { content: ''; position: absolute; left: -0.75rem; top: 0.7rem; bottom: 0.7rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
+  .inst.running::after { content: ''; position: absolute; right: -0.2rem; bottom: -0.2rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--success); border: 2px solid var(--bg); }
+  .tip { position: fixed; left: 5rem; transform: translateY(0); font-style: normal; font-size: 0.82rem; font-weight: 600; white-space: nowrap; padding: 0.35rem 0.7rem; border-radius: 0.5rem; background: var(--surface); border: 1px solid var(--line-strong); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 50; color: var(--text); }
   .inst:hover .tip { opacity: 1; }
   .bottom { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
-  .big { width: 2.8rem; height: 2.8rem; position: relative; }
-  .big.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
-  .dot { position: absolute; top: 0.55rem; right: 0.55rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0.5rem var(--accent-2); }
+  .big { width: 2.6rem; height: 2.6rem; position: relative; }
+  .big.on { color: var(--text); background: color-mix(in srgb, var(--text) 9%, transparent); }
+  .dot { position: absolute; top: 0.55rem; right: 0.55rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); }
   .account { position: relative; margin-top: 0.3rem; }
   .me { padding: 0.15rem; border-radius: 30%; background: transparent; border-color: transparent; }
-  .me:hover { border-color: var(--accent); background: transparent; }
-  .menu { position: absolute; left: calc(100% + 0.9rem); bottom: 0; width: 17rem; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.25rem; background: color-mix(in srgb, var(--surface) 99%, var(--text) 1%); backdrop-filter: none; box-shadow: 0 1.5rem 4rem -1rem rgba(0, 0, 0, 0.7); animation: fade-up 0.18s var(--ease); z-index: 60; }
+  .me:hover { border-color: var(--line-strong); background: transparent; }
+  .menu { position: absolute; left: calc(100% + 0.9rem); bottom: 0; width: 17rem; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.25rem; background: var(--surface); backdrop-filter: none; border: 1px solid var(--line-strong); box-shadow: 0 0.8rem 2rem -1rem rgba(0, 0, 0, 0.6); animation: fade 0.12s ease; z-index: 60; }
   .head { padding: 0.2rem 0.5rem 0.4rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
   .acc { display: flex; align-items: center; gap: 0.2rem; border-radius: var(--radius-sm); }
-  .acc.current { background: color-mix(in srgb, var(--accent) 12%, transparent); }
+  .acc.current { background: color-mix(in srgb, var(--text) 6%, transparent); }
   .pick { flex: 1; justify-content: flex-start; background: transparent; border-color: transparent; padding: 0.45rem 0.5rem; gap: 0.65rem; min-width: 0; }
   .pick :global(svg) { color: var(--accent); }
   .who { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }

launcher/src/components/ServerStatus.svelte

@@ -61,26 +61,25 @@
 </div>
 
 <style>
-  .server { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 1rem 0.7rem 0.7rem; min-width: 20rem; max-width: 30rem; }
-  .fav { width: 2.6rem; height: 2.6rem; border-radius: calc(var(--radius-sm) - 2px); image-rendering: pixelated; flex-shrink: 0; }
+  .server { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.9rem 0.5rem 0.5rem; min-width: 18rem; max-width: 28rem; height: 2.75rem; background: var(--surface); }
+  .fav { width: 1.8rem; height: 1.8rem; border-radius: calc(var(--radius-sm) - 2px); image-rendering: pixelated; flex-shrink: 0; }
   .ph { background: color-mix(in srgb, var(--text) 8%, transparent); }
-  .ph.on { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 60%, transparent), color-mix(in srgb, var(--accent-2) 60%, transparent)); }
-  .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
+  .ph.on { background: color-mix(in srgb, var(--accent) 30%, transparent); }
+  .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
   .name { gap: 0.5rem; }
-  .name strong { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .state { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); display: inline-flex; align-items: center; gap: 0.3rem; }
+  .name strong { font-size: 0.85rem; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .state { font-size: 0.72rem; font-weight: 520; color: var(--muted); display: inline-flex; align-items: center; gap: 0.3rem; }
   .state::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
   .state.online { color: var(--success); }
-  .state.online::before { box-shadow: 0 0 0.5rem var(--success); }
-  .state.off { color: var(--danger); }
-  .motd { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--text) 75%, transparent); }
+    .state.off { color: var(--danger); }
+  .motd { font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--text) 75%, transparent); }
   .motd .b { font-weight: 700; }
   .motd .i { font-style: italic; }
   .addr { all: unset; cursor: pointer; font-size: 0.8rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--mono); }
   .addr:hover { color: var(--text); }
-  .stats { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
+  .stats { display: flex; flex-direction: column; align-items: flex-end; gap: 0.05rem; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
   .players { display: inline-flex; align-items: center; gap: 0.3rem; }
-  .players :global(svg) { color: var(--success); }
+  .players :global(svg) { color: var(--muted); }
   .ping { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.72rem; }
   .sig { display: inline-flex; align-items: flex-end; gap: 0.1rem; height: 0.7rem; }
   .sig i { width: 0.18rem; background: color-mix(in srgb, var(--text) 20%, transparent); border-radius: 1px; }

launcher/src/components/SignIn.svelte

@@ -147,12 +147,12 @@
   .inp { position: relative; }
   .inp .ic { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; }
   .inp input { padding-left: 2.4rem; }
-  .big { padding: 0.85rem; font-size: 1rem; }
-  .ms { background: #2f2f2f; box-shadow: none; }
-  .ms:hover { background: #3a3a3a; }
+  .big { padding: 0.75rem; font-size: 0.95rem; }
+  .ms { background: color-mix(in srgb, var(--text) 8%, transparent); border: 1px solid var(--line-strong); color: var(--text); }
+  .ms:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
   .switch { align-self: center; color: var(--muted); }
   .code { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; text-align: center; padding: 0.5rem 0; }
-  .usercode { font-family: var(--mono); font-size: 1.7rem; letter-spacing: 0.15em; padding: 0.7rem 1.4rem; font-weight: 700; border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
+  .usercode { font-family: var(--mono); font-size: 1.5rem; letter-spacing: 0.12em; padding: 0.6rem 1.2rem; font-weight: 600; }
   .wait { gap: 0.4rem; }
   .error { font-size: 0.87rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); color: color-mix(in srgb, var(--danger) 60%, white); background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
   .notice { display: flex; gap: 0.8rem; align-items: flex-start; padding: 1rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--success) 12%, transparent); }

launcher/src/components/TitleBar.svelte

@@ -25,9 +25,10 @@
 
 <style>
   header { height: 2.6rem; display: flex; align-items: center; justify-content: space-between; padding-left: 1rem; position: relative; z-index: 30; flex-shrink: 0; }
-  .brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 650; font-size: 0.9rem; pointer-events: none; }
+  .brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 650; font-size: 0.82rem; letter-spacing: 0.08em; pointer-events: none; }
   .brand img { height: 1.3rem; border-radius: 0.3rem; }
-  .mark { width: 0.95rem; height: 0.95rem; border-radius: 0.3rem; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 0.8rem var(--accent); }
+  .mark { width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 2px solid var(--accent); position: relative; }
+  .mark::after { content: ''; position: absolute; inset: 0.17rem; border-radius: 50%; background: var(--accent); }
   .offline { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); padding: 0.15rem 0.5rem; border-radius: 99rem; pointer-events: auto; }
   .controls { display: flex; height: 100%; }
   .ctl { height: 100%; width: 3rem; border: none; border-radius: 0; background: transparent; color: color-mix(in srgb, var(--text) 70%, transparent); padding: 0; }

launcher/src/components/Toasts.svelte

@@ -14,7 +14,7 @@
 
 <style>
   .toasts { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 100; display: flex; flex-direction: column; gap: 0.6rem; max-width: 26rem; }
-  .toast { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.75rem 1rem; font-size: 0.88rem; line-height: 1.4; background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.6); animation: fade-up 0.25s var(--ease); }
+  .toast { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.75rem 1rem; font-size: 0.88rem; line-height: 1.4; background: var(--surface); border-color: var(--line-strong); box-shadow: 0 0.6rem 1.5rem -0.8rem rgba(0, 0, 0, 0.5); animation: fade 0.15s ease; }
   .toast :global(svg) { flex-shrink: 0; margin-top: 0.1rem; }
   .ok :global(svg) { color: var(--success); }
   .error :global(svg) { color: var(--danger); }