:root {
  --font-family: "Segoe UI", system-ui, sans-serif;
  --gradient-body: radial-gradient(
    circle at 20% 20%,
    #0b1229 0,
    #050816 30%,
    #020617 55%,
    #020617 100%
  );
  --color-text: #e2e8f0;
  --color-muted: #cbd5e1;
  --color-muted-strong: #d6d3d1;
  --color-muted-subtle: #94a3b8;
  --color-bg-panel: rgba(39, 28, 18, 0.96);
  --color-bg-panel-alt: rgba(23, 16, 10, 0.96);
  --color-bg-panel-deep: rgba(21, 14, 8, 0.95);
  --color-bg-glass: rgba(31, 25, 18, 0.9);
  --color-border-panel: rgba(202, 138, 4, 0.3);
  --color-border-panel-strong: rgba(202, 138, 4, 0.35);
  --color-border-highlight: rgba(248, 180, 76, 0.35);
  --color-gold: #fcd34d;
  --color-gold-strong: #f59e0b;
  --color-gold-soft: rgba(248, 180, 76, 0.18);
  --color-gold-warning: rgba(248, 180, 76, 0.45);
  --color-blue: rgba(56, 189, 248, 0.35);
  --color-blue-soft: rgba(56, 189, 248, 0.12);
  --color-red-soft: rgba(248, 113, 113, 0.16);
  --color-green: #22c55e;
  --color-green-dark: #15803d;
  --color-red: #f87171;
  --color-drop-zone: rgba(2, 6, 23, 0.35);
  --card-radius: 10px;
  --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-panel: 0 8px 22px rgba(0, 0, 0, 0.3);
  --panel-gap: 8px;
  --border-focus: 0 0 0 2px rgba(56, 189, 248, 0.65), 0 0 16px rgba(56, 189, 248, 0.35);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}