:root { --bg:#0f172a; --win:#1e293b; --panel:#111827; --accent:#38bdf8; --text:#e2e8f0; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center;
  background: radial-gradient(circle at 30% 20%, #1e293b, #0f172a);
  font-family: -apple-system, Segoe UI, Roboto, sans-serif; color: var(--text); }
.desktop { position: relative; width: 100%; max-width: 860px; padding: 16px; }
.window { background: var(--win); border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.titlebar { display:flex; align-items:center; gap:12px; padding:10px 14px;
  background:#0b1220; border-bottom:1px solid #000; }
.dots { display:flex; gap:6px; }
.dots i { width:12px; height:12px; border-radius:50%; background:#ef4444; display:block; }
.dots i:nth-child(2){ background:#f59e0b; } .dots i:nth-child(3){ background:#22c55e; }
.title { font-weight:600; opacity:.9; }
.score { margin-left:auto; font-variant-numeric: tabular-nums; }
.workspace { display:flex; min-height:0; }
.sidebar { width:150px; background:var(--panel); padding:10px; display:flex; flex-direction:column; gap:4px; }
.nav { padding:8px 10px; border-radius:8px; opacity:.7; font-size:14px; }
.nav.active { background:#1f2937; opacity:1; }
.stage { position:relative; flex:1; display:grid; place-items:center; padding:12px; }
canvas { width:100%; max-width:600px; aspect-ratio:1/1; height:auto;
  background:#0b1220; border-radius:8px; touch-action:none; }
.overlay { position:absolute; inset:12px; display:grid; place-items:center;
  background:rgba(2,6,23,.82); border-radius:8px; }
.overlay.hidden { display:none; }
.card { text-align:center; max-width:420px; padding:24px; }
.card h1 { margin:0 0 10px; font-size:28px; }
.card .hint { opacity:.6; font-size:13px; }
button { margin-top:14px; padding:10px 18px; border:0; border-radius:999px;
  background:var(--accent); color:#052430; font-weight:700; cursor:pointer; }
.toasts { position:absolute; right:26px; bottom:26px; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
@media (max-width: 620px) {
  .sidebar { display:none; }
  .desktop { padding:8px; }
}

.toast { display:flex; align-items:center; gap:10px; max-width:280px;
  padding:10px 14px; border-radius:10px; background:#0b1220;
  border:1px solid #1f2937; box-shadow:0 8px 24px rgba(0,0,0,.4);
  transform:translateX(120%); opacity:0; transition:transform .3s, opacity .3s; }
.toast.show { transform:translateX(0); opacity:1; }
.toast-icon { font-size:20px; }
.toast-msg { font-size:13px; line-height:1.3; }
.toast-rejection { border-color:#7f1d1d; }
.toast-spam { border-color:#78350f; }
.toast-ghost { border-color:#4c1d95; }
.letter { text-align:left; background:#f8fafc; color:#0f172a; border-radius:6px; }
.letter h1 { text-align:center; }
.letter button { display:block; margin:16px auto 0; }