:root {
  --bg: #e8f1f2;
  --bg-end: #dde9eb;
  --bg-glow-a: rgba(15, 114, 132, 0.17);
  --bg-glow-b: rgba(72, 121, 131, 0.14);
  --ink: #15232a;
  --muted: #60727a;
  --panel: rgba(250, 253, 254, 0.91);
  --panel-strong: #ffffff;
  --line: rgba(44, 76, 84, 0.16);
  --line-strong: rgba(44, 76, 84, 0.24);
  --accent: #0f7284;
  --accent-strong: #0a5663;
  --accent-ink: #f4fdff;
  --accent-soft: rgba(15, 114, 132, 0.1);
  --shadow: 0 30px 72px rgba(21, 35, 42, 0.1);
  --surface-shadow: 0 22px 46px rgba(21, 35, 42, 0.08);
  --shell-bg: rgba(243, 249, 250, 0.65);
  --shell-sidebar: rgba(247, 251, 252, 0.84);
  --shell-content: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 250, 251, 0.94));
  --surface-bg: rgba(255, 255, 255, 0.96);
  --surface-outline: rgba(44, 76, 84, 0.08);
  --surface-shadow-soft: 0 10px 24px rgba(21, 35, 42, 0.06);
  --placeholder-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(240, 248, 249, 0.9)),
    radial-gradient(circle at top right, rgba(15, 114, 132, 0.1), transparent 18rem);
  --modal-bg: rgba(252, 254, 255, 0.98);
  --modal-overlay: rgba(16, 28, 35, 0.42);
  --toast-bg: rgba(255, 255, 255, 0.96);
  --toast-shadow: 0 16px 36px rgba(21, 35, 42, 0.14);
}

body[data-theme="atlas"] {
  --bg: #e9eef8;
  --bg-end: #e2e8f2;
  --bg-glow-a: rgba(48, 95, 167, 0.18);
  --bg-glow-b: rgba(92, 114, 149, 0.14);
  --ink: #172235;
  --muted: #5a6a80;
  --panel: rgba(249, 252, 254, 0.9);
  --panel-strong: #ffffff;
  --line: rgba(56, 79, 114, 0.18);
  --line-strong: rgba(56, 79, 114, 0.28);
  --accent: #305fa7;
  --accent-strong: #234577;
  --accent-ink: #f5f9ff;
  --accent-soft: rgba(48, 95, 167, 0.11);
  --shadow: 0 30px 72px rgba(23, 34, 53, 0.12);
  --surface-shadow: 0 22px 46px rgba(23, 34, 53, 0.1);
  --shell-bg: rgba(241, 246, 252, 0.68);
  --shell-sidebar: rgba(247, 250, 254, 0.86);
  --shell-content: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(243, 246, 252, 0.95));
  --surface-bg: rgba(255, 255, 255, 0.97);
  --surface-outline: rgba(56, 79, 114, 0.1);
  --surface-shadow-soft: 0 10px 24px rgba(23, 34, 53, 0.08);
  --placeholder-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(240, 245, 251, 0.9)),
    radial-gradient(circle at top right, rgba(48, 95, 167, 0.1), transparent 18rem);
  --modal-bg: rgba(252, 254, 255, 0.98);
  --modal-overlay: rgba(18, 28, 41, 0.46);
  --toast-bg: rgba(255, 255, 255, 0.97);
  --toast-shadow: 0 16px 36px rgba(23, 34, 53, 0.16);
}

body[data-theme="copper"] {
  --bg: #f5efe2;
  --bg-end: #eee4d5;
  --bg-glow-a: rgba(180, 70, 43, 0.14);
  --bg-glow-b: rgba(125, 92, 66, 0.14);
  --ink: #201512;
  --muted: #6e5b52;
  --panel: rgba(255, 250, 244, 0.92);
  --panel-strong: #fffdfa;
  --line: rgba(73, 49, 38, 0.16);
  --line-strong: rgba(73, 49, 38, 0.22);
  --accent: #b4462b;
  --accent-strong: #8f341d;
  --accent-ink: #fff6f0;
  --accent-soft: rgba(180, 70, 43, 0.1);
  --shadow: 0 28px 70px rgba(58, 37, 28, 0.12);
  --surface-shadow: 0 24px 48px rgba(58, 37, 28, 0.09);
  --shell-bg: rgba(255, 251, 245, 0.58);
  --shell-sidebar: rgba(255, 249, 241, 0.78);
  --shell-content: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 252, 247, 0.94));
  --surface-bg: rgba(255, 255, 255, 0.94);
  --surface-outline: rgba(73, 49, 38, 0.08);
  --surface-shadow-soft: 0 10px 24px rgba(58, 37, 28, 0.06);
  --placeholder-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 248, 240, 0.88)),
    radial-gradient(circle at top right, rgba(180, 70, 43, 0.1), transparent 18rem);
  --modal-bg: rgba(255, 252, 247, 0.98);
  --modal-overlay: rgba(24, 17, 14, 0.46);
  --toast-bg: rgba(255, 255, 255, 0.94);
  --toast-shadow: 0 16px 36px rgba(31, 22, 19, 0.14);
}

body[data-theme="emerald"] {
  --bg: #e3f4ee;
  --bg-end: #d8ece5;
  --bg-glow-a: rgba(15, 139, 114, 0.18);
  --bg-glow-b: rgba(63, 154, 121, 0.14);
  --ink: #10211c;
  --muted: #55716a;
  --panel: rgba(247, 255, 252, 0.92);
  --panel-strong: #ffffff;
  --line: rgba(33, 97, 82, 0.16);
  --line-strong: rgba(33, 97, 82, 0.24);
  --accent: #0f8b72;
  --accent-strong: #0a6855;
  --accent-ink: #f2fffb;
  --accent-soft: rgba(15, 139, 114, 0.11);
  --shadow: 0 28px 70px rgba(17, 65, 54, 0.12);
  --surface-shadow: 0 24px 48px rgba(17, 65, 54, 0.09);
  --shell-bg: rgba(245, 255, 251, 0.58);
  --shell-sidebar: rgba(247, 255, 252, 0.82);
  --shell-content: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(241, 253, 248, 0.94));
  --surface-bg: rgba(255, 255, 255, 0.96);
  --surface-outline: rgba(33, 97, 82, 0.08);
  --surface-shadow-soft: 0 10px 24px rgba(17, 65, 54, 0.06);
  --placeholder-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(236, 252, 246, 0.88)),
    radial-gradient(circle at top right, rgba(15, 139, 114, 0.12), transparent 18rem);
  --modal-bg: rgba(248, 255, 252, 0.98);
  --modal-overlay: rgba(11, 32, 27, 0.42);
  --toast-bg: rgba(255, 255, 255, 0.96);
  --toast-shadow: 0 16px 36px rgba(17, 65, 54, 0.14);
}

body[data-theme="iris"] {
  --bg: #efeaff;
  --bg-end: #e4def8;
  --bg-glow-a: rgba(106, 85, 217, 0.2);
  --bg-glow-b: rgba(105, 113, 216, 0.14);
  --ink: #1d1838;
  --muted: #645f86;
  --panel: rgba(251, 250, 255, 0.92);
  --panel-strong: #ffffff;
  --line: rgba(84, 70, 157, 0.16);
  --line-strong: rgba(84, 70, 157, 0.24);
  --accent: #6a55d9;
  --accent-strong: #4c3bb2;
  --accent-ink: #f7f4ff;
  --accent-soft: rgba(106, 85, 217, 0.1);
  --shadow: 0 28px 70px rgba(39, 33, 86, 0.12);
  --surface-shadow: 0 24px 48px rgba(39, 33, 86, 0.09);
  --shell-bg: rgba(248, 246, 255, 0.6);
  --shell-sidebar: rgba(250, 249, 255, 0.82);
  --shell-content: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 244, 255, 0.94));
  --surface-bg: rgba(255, 255, 255, 0.96);
  --surface-outline: rgba(84, 70, 157, 0.08);
  --surface-shadow-soft: 0 10px 24px rgba(39, 33, 86, 0.06);
  --placeholder-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(245, 241, 255, 0.9)),
    radial-gradient(circle at top right, rgba(106, 85, 217, 0.12), transparent 18rem);
  --modal-bg: rgba(252, 251, 255, 0.98);
  --modal-overlay: rgba(19, 15, 46, 0.44);
  --toast-bg: rgba(255, 255, 255, 0.96);
  --toast-shadow: 0 16px 36px rgba(39, 33, 86, 0.14);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, var(--bg-glow-a), transparent 28rem),
    radial-gradient(circle at bottom right, var(--bg-glow-b), transparent 24rem),
    linear-gradient(180deg, #f7fbfd 0%, var(--bg) 58%, var(--bg-end) 100%);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--surface-shadow);
  backdrop-filter: blur(16px);
}