: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-danger: #ef4444;
  --color-info: #a5f3fc;
  --surface-glass: rgba(10, 11, 14, 0.58);
  --surface-velvet: rgba(14, 9, 5, 0.72);
  --surface-panel: rgba(24, 17, 11, 0.65);
  --surface-card: rgba(3, 7, 15, 0.46);
  --surface-chip: rgba(15, 23, 42, 0.48);
  --surface-chip-soft: rgba(15, 23, 42, 0.32);
  --border-weak: rgba(255, 255, 255, 0.05);
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);
  --border-amber-soft: rgba(248, 180, 76, 0.12);
  --border-amber-strong: rgba(245, 158, 11, 0.28);
  --gradient-panel-warm: linear-gradient(180deg, rgba(32, 18, 8, 0.92), rgba(12, 7, 4, 0.95));
  --gradient-panel-velvet: linear-gradient(180deg, rgba(16, 10, 6, 0.82), rgba(9, 5, 3, 0.93));
  --gradient-panel-amber: linear-gradient(180deg, rgba(34, 24, 14, 0.9), rgba(12, 7, 3, 0.95));
  --shadow-float-strong: 0 18px 40px rgba(0, 0, 0, 0.55);
  --shadow-float-soft: 0 12px 28px rgba(0, 0, 0, 0.4);
  --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;
  --floating-panel-gap: 12px;
  --floating-panel-padding: 14px;
  --floating-panel-border: 1px solid var(--color-border-panel);
  --floating-panel-transition: 0.25s ease;
  --panel-overlap-breakpoint: 700px;
  --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;
}