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

:root {
  --bg:          #17171a;
  --bg2:         #1f1f22;
  --bg3:         #282829;
  --bg4:         #313135;
  --border:      #2e2e32;
  --border-soft: #26262a;
  --text:        #e8e8ea;
  --muted:       #7a7a82;
  --accent:      #d47a3a;
  --accent-dim:  #9e5a24;
  --accent-glow: rgba(212,122,58,0.15);
  --gold:        #c9a84c;
  --gold-bg:     rgba(240,220,100,0.12);
  --green:       #4caf7d;
  --yellow:      #f0c040;
  --red:         #e05555;
  --danger-hover-bg: rgba(224,85,85,0.12);
  --radius:      6px;
  --radius-sm:   4px;
  --font:        'Inter', system-ui, sans-serif;
  --shadow:      0 8px 32px rgba(0,0,0,0.55);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.3);
  --sidebar-w:   270px;
  --control-h:   28px;
}

[data-theme="light"] {
  --bg:          #f5f4f1;
  --bg2:         #ffffff;
  --bg3:         #ededea;
  --bg4:         #e2e1dd;
  --border:      #d5d3cd;
  --border-soft: #e0deda;
  --text:        #1a1a1c;
  --muted:       #6b6b72;
  --accent:      #bf6a2a;
  --accent-dim:  #a85820;
  --accent-glow: rgba(191,106,42,0.18);
  --gold:        #8a6c1e;
  --gold-bg:     rgba(160,130,40,0.10);
  --green:       #2a7a52;
  --yellow:      #8a6b00;
  --red:         #c03030;
  --danger-hover-bg: rgba(192,48,48,0.10);
  --shadow:      0 8px 32px rgba(0,0,0,0.14);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.08);
}

* { scrollbar-width: thin; scrollbar-color: var(--muted) var(--bg3); }
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--bg3); }
::-webkit-scrollbar-thumb  { background: var(--muted); border-radius: 4px; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
}

[data-wallpaper="1"] body {
  background: var(--bg) url("https://d3qqidoz8mm2hm.cloudfront.net/wp-content/uploads/wallpapers/88063gw2-ex5-jw-qr3-wallpaper-1920x1080.jpg") center center / cover no-repeat fixed;
}

[data-theme="light"][data-wallpaper="1"] body {
  background: var(--bg) url("https://d3qqidoz8mm2hm.cloudfront.net/wp-content/uploads/wallpapers/ae70fvoe-annouce-wallpaper-1920x1080.jpg") center center / cover no-repeat fixed;
}

[data-wallpaper="1"] #sidebar,
[data-wallpaper="1"] .view,
[data-wallpaper="1"] #main-topbar {
  background: color-mix(in srgb, var(--bg2) 75%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-theme="light"][data-wallpaper="1"] #sidebar,
[data-theme="light"][data-wallpaper="1"] .view,
[data-theme="light"][data-wallpaper="1"] #main-topbar {
  background: color-mix(in srgb, var(--bg2) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#app { display: flex; height: 100vh; overflow: hidden; }