/* Midnight amethyst with restrained metallic gold, inspired by the reference.
   The shared layout remains in styles.css. This layer covers every surface. */
:root {
  --navy: #251137;
  --navy-light: #3a2054;
  --gold: #dcb777;
  --gold-light: #ffe2a2;
  --paper: #160e22;
  --ink: #f4edf9;
  --muted: #c1afcf;
  --line: #503761;
  --shadow: 0 12px 30px #08020f30, inset 0 1px 0 #e9cef509;
  color-scheme: dark;
}
body {
  background:
    radial-gradient(ellipse at 76% 0%, #54257830, transparent 53%),
    radial-gradient(ellipse at 6% 80%, #35204b35, transparent 55%),
    #160e22;
  color: var(--ink);
}
::selection { background: #b990545c; color: #fff3da; }
.skip-link { background: #342043; color: #fff2d5; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid #f5d695;
  outline-offset: 4px;
}
.sidebar {
  background:
    radial-gradient(ellipse at 0% 12%, #48206055, transparent 70%),
    linear-gradient(160deg, #21132f, #140b20 68%, #1c112b);
  border-right: 1px solid #b38b5330;
  box-shadow: 12px 0 36px #09020f20;
}
.brand { color: #f2d291; }
.brand-emblem {
  border-color: #ca9f626b;
  background: linear-gradient(145deg, #57395350, #251733);
  box-shadow: inset 0 1px 0 #f5d59d35, 0 3px 15px #09010d38;
  color: #ffe3a7;
}
.brand-word { text-shadow: 0 2px 10px #d9ac5818; }
.brand-rule { background: linear-gradient(90deg, #f4d398, #b6834100); }
.nav-caption { color: #b5a3c4; }
.tabs button { color: #d1c4df; font-weight: 500; }
.tabs button > span[data-i18n] { font-weight: 600; text-shadow: 0 2px 4px #08001370; }
.tabs button:hover { background: #64477c30; color: #fff8ed; }
.tabs button.active {
  background: linear-gradient(100deg, #6f488844, #5135622e);
  color: #ffe0a0;
  box-shadow: inset 3px 0 0 #e9c787, inset 0 0 0 1px #d1a86435, 0 4px 14px #09010f24;
}
.tabs button.active .icon { filter: drop-shadow(0 1px 4px #ffc76f24); }
.active .nav-indicator { background: #efcf91; box-shadow: 0 0 8px #e1b96a38; }
.sidebar-footer p { color: #c1adce; }
.sidebar-medallion { color: #e2bc7b; border-color: #ca9d5c4d; background: #3d25482b; }
.sidebar-divider { background: linear-gradient(90deg, transparent, #a782464d, transparent); }
.demo-tag { color: #c5b2d1; }
.demo-tag i { background: #e2bd83; }
.topbar {
  background: #211430ed;
  border-color: #7c5a903a;
  box-shadow: 0 5px 20px #09020d15;
}
.breadcrumb { color: #e5d9ee; }
.breadcrumb-brand { color: #d7b77c; }
.breadcrumb-slash { color: #9d86b0; }
.clock-wrap { color: #ccbcd9; }
.language-control { border-color: #73517a6b; }
.language-control > .icon { color: #d5b67d; }
.language-control select { color: #f4e9fa; background: #2a193b; border: 1px solid #8467484a; }
select option { background: #2a193b; color: #f3eaf8; }
.eyebrow { color: #c2a4d2; }
.page-heading h1 { color: #fff3da; text-shadow: 0 2px 15px #0a010e70; }
.page-status { color: #edd49f; border-color: #d0ac6555; background: #3f294138; }
.status-dot { background: #ddba77; box-shadow: 0 0 0 3px #ddba7712; }
.welcome-banner {
  background:
    radial-gradient(ellipse at 80% 25%, #8b40b349, transparent 48%),
    radial-gradient(ellipse at 88% 100%, #b7884330, transparent 48%),
    linear-gradient(110deg, #271139, #361947 64%, #241134);
  border: 1px solid #c89b5d69;
  box-shadow: inset 0 1px 0 #f8d9a542, 0 16px 32px #09010e50;
}
.welcome-banner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #b8874300, #d2aa65, #fff0c4, #c69d57, #b8874300);
  opacity: .8;
  pointer-events: none;
}
.banner-kicker { color: #edcf96; }
.gold-line { background: linear-gradient(90deg, #cf9c58, #ffe8b0); }
.welcome-copy h2 { color: #ffe8b4; text-shadow: 0 2px 4px #08000db0, 0 0 22px #ba893012; }
.welcome-copy > p { color: #e1d2ec; }
.btn.gold, .btn.primary {
  color: #28162c;
  background: linear-gradient(112deg, #c39857 0%, #efcd8c 24%, #ffedc6 45%, #e9c486 62%, #b88a4d 100%);
  border: 1px solid #ffe7af91;
  box-shadow: inset 0 1px 0 #fff5ddc0, inset 0 -1px 0 #71501b45, 0 4px 14px #05010c50;
  font-weight: 700;
  text-shadow: 0 1px 0 #fff0cc30;
}
.btn.gold:hover, .btn.primary:hover {
  background: linear-gradient(112deg, #d5ae6b, #ffe4aa 35%, #fff3d4 49%, #e9c58a 68%, #cc9f5c);
  box-shadow: inset 0 1px 0 #fff4d5, 0 6px 18px #d6ab5222;
}
.btn.ghost { color: #f5e5c8; border: 1px solid #d5b67450; background: #2c163b46; }
.btn.ghost:hover { background: #6b4a6738; border-color: #e6c38190; }
.award-medal {
  background: radial-gradient(circle at 35% 15%, #a775a350, #71447714 58%), linear-gradient(145deg, #4d2b62, #241134);
  border-color: #efd398b3;
  box-shadow: 0 0 0 8px #d6af6f0b, 0 0 0 9px #d9af6742, inset 0 2px 12px #e3b77012, 0 15px 30px #09010d80;
}
.award-medal svg { stroke: #f4d496; filter: drop-shadow(0 2px 2px #110514); }
.award-medal > span { color: #f9db9f; text-shadow: 0 2px 3px #110514; }
.orbit { border-color: #bc965a26; }
.laurel { color: #ddbd8466; }
.art-caption { color: #ecd0a0; }
.medal-plinth { border-color: #d5b2786b; background: linear-gradient(180deg, #d9b36d18, transparent); }
.section-heading h2 { color: #f0e6f8; }
.section-heading .icon { color: #c1a368; }
.section-rule { background: linear-gradient(90deg, #89634070, #68427820); }
.metric-card {
  background: linear-gradient(135deg, #352245, #281b38);
  border-color: #79517b60;
  box-shadow: inset 0 1px 0 #eed7fe0d, 0 9px 23px #0a011d30;
}
.metric-top { color: #e4d5ee; }
.metric-icon { background: #79573935; color: #f0ce91; border: 1px solid #d5ae6e28; }
.metric-icon.blue { background: #4e39733d; color: #c6b3ef; border-color: #a283c63d; }
.metric-icon.violet { background: #6d387646; color: #e6b5eb; border-color: #c684c63d; }
.metric-icon.green { background: #38584937; color: #b5d4c0; border-color: #7eaa8e38; }
.metric { color: #ffe1a5; font-weight: 600; text-shadow: 0 2px 7px #0d031d66; }
.metric-caption { color: #c4b0d3; }
.card {
  background: linear-gradient(135deg, #30203f, #271a36);
  border-color: #845b844f;
  box-shadow: inset 0 1px 0 #f0d4ff09, 0 10px 28px #09011a35;
}
.card-heading h2 { color: #fff0cf; }
.card-heading p { color: #c9b7d7; }
.heading-icon { color: #eac68c; background: #7c563128; border: 1px solid #cdaa6550; }
.field > span { color: #e4d4ee; }
input, select {
  background: #1e122d;
  border-color: #79558185;
  color: #faf0ff;
  box-shadow: inset 0 2px 3px #07011020;
}
input::placeholder { color: #b5a0c4; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: #faf0ff;
  -webkit-box-shadow: 0 0 0 1000px #281638 inset;
  caret-color: #faf0ff;
}
input:hover, select:hover { border-color: #b590a9; }
input:focus, select:focus {
  background: #281638;
  border-color: #f1d39b;
  box-shadow: 0 0 0 3px #e0b56b1f, inset 0 1px 4px #0701101a;
}
th {
  background: #21152f;
  color: #e1c48c;
  border-color: #78577746;
  font-weight: 600;
}
td { color: #eee1f6; border-color: #68467642; }
tbody tr:hover { background: #815a9721; }
.empty-cell:hover { background: transparent; }
.badge { background: #425a462e; color: #c1ddba; border: 1px solid #8caa7744; }
.badge.pending { background: #b58b3c14; color: #e9cd9a; border-color: #ba985345; }
code { color: #e0cee9; background: #1d102e; border: 1px solid #6643726b; }
.person-avatar {
  background: linear-gradient(145deg, #6b487b, #392445);
  color: #ffe1a3;
  border: 1px solid #cda56450;
}
.empty-state { color: #d2bfdf; }
.empty-symbol { border-color: #a5805152; background: #9a744215; color: #d5b77f; }
.feedback { background: #b0853214; color: #ffe1aa; border: 1px solid #d2aa6a4f; }
.demo-notice { background: #23162f; border-color: #7c607147; color: #d2bde0; }
.demo-notice .icon { color: #debd86; }
.demo-notice summary:hover { color: #f9e6c0; }
.main-footer { color: #beacce; }
.main-footer > span:first-child { color: #cfaf77; }
.score-field {
  background: radial-gradient(ellipse at top, #5e357244, transparent 80%), #20122e;
  border-color: #d0ac6555;
}
.score-field input { background: transparent; color: #ffe4ad; border-color: transparent; }
.score-field input:focus { background: #3a224744; border-color: #c6a46590; }
.score-field input::placeholder { color: #a489b8; }
.judge-note {
  background: radial-gradient(ellipse at top right, #73458932, transparent 70%), linear-gradient(155deg, #3a204f, #21112f);
  border: 1px solid #b18a5457;
  color: #f6deb0;
  box-shadow: inset 0 1px 0 #e5c39217;
}
.judge-note > .icon { color: #efd49c; }
.judge-note .eyebrow { color: #e4be7e; }
.judge-note p { color: #d5c2e2; }
.note-rule { background: linear-gradient(90deg, #f4d293, #a67848); }
.stage-card {
  background: radial-gradient(ellipse at top right, #7940933b, transparent 58%), radial-gradient(ellipse at bottom left, #86622b1a, transparent 55%), linear-gradient(145deg, #2e173f, #190d28);
  border: 1px solid #c8a36370;
  color: #faefff;
  box-shadow: inset 0 1px 0 #ecd1a333, 0 15px 35px #09001066;
}
.stage-heading h2 { color: #ffe6ae; text-shadow: 0 2px 3px #09000f80; }
.stage-heading > div > p:last-child { color: #d0bade; }
.stage-brand { color: #efce90; }
.stage-button { background: #60416a35; color: #ffe0a4; border-color: #cdac6877; }
.stage-button:hover { background: #7d598044; }
.score-row { background: #51306325; border-color: #9872aa35; }
.score-row:first-child {
  background: linear-gradient(112deg, #c5964d23, #65376e32 60%, #66357c24);
  border-color: #e1bc7682;
  box-shadow: inset 0 1px 0 #f9ddad17, 0 4px 16px #1303152e;
}
.rank-number { color: #d0b5df; }
.score-row:first-child .rank-number { color: #ffdfa0; }
.score-person b { color: #fff4fc; }
.score-person .muted { color: #d1bddf; }
.score { color: #ffdfa0; text-shadow: 0 2px 5px #0b00165e; }
.stage-card .empty-state { color: #d2bfdf; }
.stage-card .empty-symbol { color: #e2c188; background: #92653612; border-color: #d2aa6557; }
.stage-footer { color: #cdb5d9; }
.stage-footer-line { background: linear-gradient(90deg, #c29c5e50, #8957a03a); }
.stage-card:fullscreen { background-color: #190d28; }
.personal-result {
  border-color: #c4a26577;
  background: radial-gradient(ellipse at top, #6c3c7d48, transparent 75%), linear-gradient(145deg, #3b224b, #241332);
  box-shadow: inset 0 1px 0 #f1d6a424;
}
.personal-result .score { color: #ffe5b0; }
.personal-result p { color: #d4bfe2; }
.result-person { color: #f4e7fc; }
.result-caption { color: #edcb91; }
@media (max-width: 700px) {
  .sidebar { box-shadow: 0 4px 20px #07010d4a; border-bottom: 1px solid #bf985447; }
  .tabs button.active { box-shadow: inset 0 -2px 0 #ebc887, inset 0 0 0 1px #d1a86435; }
  .language-control select { padding: 6px 4px; }
}
@media (forced-colors: active) {
  .tabs button.active { outline: 2px solid Highlight; }
  input, select, .card, .metric-card, .welcome-banner, .stage-card { border: 1px solid CanvasText; }
}