/* FIX6900 — Windows XP "Luna" theme, layered over vista.css (same layout and behaviour):
   blue title bars, the green start button, the blue taskbar, beige buttons, block progress
   bars, and the black XP boot screen. */

:root { --blue: #0b3fae; --link: #0b5ed7; --ui: Tahoma, "Segoe UI", Verdana, sans-serif; --title: "Trebuchet MS", Tahoma, sans-serif; }
body { font-size: 12px; padding-bottom: 36px; }

/* ── windows ── */
.win { padding: 0 3px 3px; background: #0a5be8; border: 1px solid #0831d9; border-radius: 8px 8px 0 0;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 1px 0 0 #3d8bff, inset -1px 0 0 #0040c0, 3px 4px 12px rgba(0, 0, 0, .45); }
.win::before { display: none; }
.win-t { height: 29px; margin: 0 -3px; padding: 0 84px 0 7px; border-radius: 7px 7px 0 0;
  background: linear-gradient(#0997ff 0%, #0053ee 9%, #0050ee 40%, #0066ff 86%, #0066ff 92%, #005bff 94%, #003dd7 97%, #003dd7 100%); }
.win-t h2 { font: 700 13px var(--title); color: #fff; text-shadow: 1px 1px 0 #0a1883; }
.win-t img { filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .35)); }
.win-b { top: 4px; right: 5px; gap: 2px; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
.win-b button, .win-b .cl { width: 21px; height: 21px; border: 1px solid #fff; border-radius: 3px; border-right: 1px solid #fff;
  background: linear-gradient(135deg, #5a9bff 0%, #2266f3 45%, #0d47d0 100%); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .35), inset -1px -1px 0 rgba(0, 0, 0, .25); }
.win-b button:hover { background: linear-gradient(135deg, #79b0ff 0%, #3a7bff 45%, #1a59e8 100%); }
.win-b .cl { background: linear-gradient(135deg, #f19b7c 0%, #e05a35 45%, #c03410 100%); }
.win-b .cl:hover { background: linear-gradient(135deg, #ffb497 0%, #f06a42 45%, #d4401c 100%); }
.win-b .mn::after { width: 7px; height: 3px; background: #fff; border: 0; top: auto; bottom: 4px; left: 5px; transform: none; }
.win-b .mx::after { width: 9px; height: 8px; border: 1px solid #fff; border-top-width: 3px; background: transparent; box-shadow: none; }
.win-b .cl::after { font: 700 13px/1 Tahoma, sans-serif; text-shadow: none; }
.win-c { border: 0; border-radius: 0; box-shadow: none; background: #fff; }
.win-c h1 { font: 700 clamp(26px, 3.2vw, 38px)/1.12 var(--title); color: #0b3fae; letter-spacing: -.01em; }
.win-c h1 b { color: #2a8d22; }
.win-c h3, .rules dt { font-family: var(--title); }
.win.flash { animation: none; }
.win.max { inset: 0 0 32px; }

/* ── buttons, fields, progress bars ── */
.vbtn { font: 12px var(--ui); color: #000; border: 1px solid #003c74; border-radius: 3px; padding: 4px 14px; min-height: 23px;
  background: linear-gradient(#ffffff 0%, #f4f3ee 60%, #e3e0d6 100%); box-shadow: inset -1px -1px 0 #c9c4b5; }
.vbtn:hover { border-color: #003c74; background: linear-gradient(#ffffff 0%, #f4f3ee 60%, #e3e0d6 100%); box-shadow: inset 0 0 0 1px #fdd889, inset 0 0 0 2px #f8b33f; }
.vbtn:active { background: linear-gradient(#e5e4dd, #efeee8); box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .2); }
.vbtn.go { color: #fff; border-color: #1d5e14; text-shadow: 1px 1px 0 rgba(0, 0, 0, .35); background: linear-gradient(#7fd06a 0%, #3c9b28 45%, #2a8d22 100%); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .35); }
.vbtn.go:hover { background: linear-gradient(#97e083 0%, #48b030 45%, #339a28 100%); box-shadow: inset 0 0 0 1px #fdd889, inset 0 0 0 2px #f8b33f; }
.vfield { font: 12px var(--mono); border: 1px solid #7f9db9; border-radius: 0; }
.vfield:hover, .vfield:focus { border-color: #316ac5; }
.vbar { height: 16px; border: 1px solid #686868; border-radius: 3px; background: #fff; padding: 1px; box-shadow: inset 1px 1px 0 #d6d6d6; }
.vbar i { inset: 1px auto 1px 1px; background: repeating-linear-gradient(90deg, #36c043 0 8px, transparent 8px 10px); box-shadow: none; }
.vbar i::after { display: none; }
.gadget .vbar { background: #0b1426; border-color: #000; }
.chip { font: 700 11px var(--ui); border-color: #7f9db9; border-radius: 2px; color: #0b3fae; background: linear-gradient(#ffffff, #e9e7dd); }
.chip.first, .now .now-chip { border-color: #1d5e14; background: linear-gradient(#7fd06a, #3c9b28 50%, #2a8d22); }
.tbl th { color: #000; font-weight: 400; background: linear-gradient(#ffffff, #f5f4ee 80%, #ebeadb); border-bottom: 3px solid #e2decd; border-right: 1px solid #d0cbbb; }
.tbl tbody tr:hover td, .round:hover { background: #dce8fb; }
.list, .rounds, .w-out ul { border-color: #7f9db9; border-radius: 0; }
.numbers div, .cstats > div { border-color: #c9c4b5; border-radius: 0; background: linear-gradient(#ffffff, #f4f3ee); }
.numbers dd, .cstats b { font-family: var(--title); }
.steps li::before { background: linear-gradient(#5a9bff, #1d5ee8); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .4), 1px 1px 1px rgba(0, 0, 0, .3); }
.simbar { border-radius: 0; border-color: #e0c200; background: #ffffe1; }

/* ── taskbar + start ── */
.taskbar { height: 32px; padding: 0 0 0 112px; gap: 4px; border-top: 1px solid #0c3fb8; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  background: linear-gradient(#1f2f86 0%, #3165c4 3%, #3682e5 6%, #4490e6 10%, #3883e5 12%, #2b71e0 15%, #2663da 18%, #235bd6 20%, #2258d5 23%, #2157d6 38%, #245ddb 54%, #2562df 86%, #245fdc 89%, #2158d4 92%, #1d4ec0 95%, #1941a5 98%); }
.orb { left: 0; bottom: 0; top: 0; width: 104px; height: auto; display: flex; align-items: center; gap: 6px; padding: 0 0 0 8px; border: 0; border-radius: 0 14px 14px 0;
  background: linear-gradient(#5fb946 0%, #3c9b28 15%, #2f9324 50%, #2a8d22 85%, #3a8f2c 100%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), inset -2px 0 3px rgba(0, 0, 0, .3), 2px 0 3px rgba(0, 0, 0, .3); }
.orb::after { content: "start"; color: #fff; font: italic 700 19px/1 var(--title); text-shadow: 1px 1px 2px rgba(0, 0, 0, .6); letter-spacing: .01em; }
.orb img { width: 22px; height: 22px; margin: 0; filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .5)); }
.orb:hover { background: linear-gradient(#7ad25d 0%, #49b232 15%, #3aa52e 50%, #33a028 85%, #45a336 100%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), inset -2px 0 3px rgba(0, 0, 0, .3), 2px 0 3px rgba(0, 0, 0, .3); }
.tasks button { height: 24px; border: 1px solid #1c3fa3; border-radius: 3px; font: 11px var(--ui); color: #fff;
  background: linear-gradient(#5aa0ff 0%, #3c87f5 10%, #3178ee 50%, #2a6be2 100%); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .3); }
.tasks button:hover { background: linear-gradient(#73b1ff 0%, #4f97ff 10%, #4189fb 50%, #397bee 100%); }
.tasks button.off { opacity: 1; background: linear-gradient(#1e5bd1, #1648b8); box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .35); }
.tray { height: 100%; padding: 0 12px; gap: 10px; border-left: 1px solid #092f7d; box-shadow: inset 1px 0 0 #1aa3f5;
  background: linear-gradient(#0c59b9 0%, #139ee9 4%, #18b5f2 8%, #139beb 12%, #1290e8 50%, #0d8dea 85%, #0d5fc6 100%); }
.tray a { color: #fff; }
.status i { box-shadow: none; }
.start { left: 0; bottom: 32px; width: 300px; padding: 0; border: 1px solid #0831d9; border-radius: 8px 8px 0 0; background: #fff; color: #000;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 3px 3px 10px rgba(0, 0, 0, .5); overflow: hidden; }
.start-h { margin: 0; padding: 8px 10px; border: 0; color: #fff; background: linear-gradient(#1868ce 0%, #0e60cb 12%, #0e60cb 20%, #1164cf 32%, #1667cf 33%, #1b6cd3 47%, #1e6cd3 54%, #1f6fd5 60%, #1f71d6 65%, #2279d8 77%, #2678d7 79%, #2a7cd8 82%, #2d7ad9 85%, #2b7ad9 92%, #3c79d7 94%, #3b7bd6 97%, #0c59c4 100%); }
.start-h b { font: 700 15px var(--title); text-shadow: 1px 1px 1px rgba(0, 0, 0, .4); }
.start a { color: #000; border-radius: 0; padding: 6px 14px; }
.start a:hover { background: #316ac5; color: #fff; }

/* ── XP boot screen ── */
.intro { background: #000; }
.intro h1 { font: 400 clamp(22px, 4vw, 34px)/1.15 var(--title); }
.intro h1 b { color: #7fe06a; }
.intro .xp-name { margin: -6px 0 0; font: 700 clamp(28px, 5vw, 46px)/1 var(--title); letter-spacing: -.01em; color: #fff; }
.intro .xp-name sup { font: italic 700 .55em var(--title); color: #ff8a1e; margin-left: 3px; vertical-align: super; }
.xpload { position: relative; width: 156px; height: 20px; border: 2px solid #b2b2b2; border-radius: 5px; overflow: hidden; background: #000; }
.xpload span { position: absolute; top: 3px; width: 9px; height: 10px; border-radius: 2px; left: -40px;
  background: linear-gradient(#a8c8ff, #3264d6 50%, #1a40a8); animation: xpload 2s linear infinite; }
.xpload span:nth-child(2) { animation-delay: .12s; } .xpload span:nth-child(3) { animation-delay: .24s; }
@keyframes xpload { from { left: -40px; } to { left: 170px; } }
@media (prefers-reduced-motion: reduce) { .xpload span { animation: none; left: 70px; } }

/* ── CA window ── */
.ca-box { display: flex; gap: 6px; align-items: stretch; }
.ca-box code { flex: 1; min-width: 0; font: 700 13px var(--mono); padding: 8px 10px; border: 1px solid #7f9db9; background: #fff; overflow-wrap: anywhere; color: #0b3fae; }
.ca-box code.pending { color: #8a8a8a; font-weight: 400; font-style: italic; }

/* ── docs ── */
.toc { background: linear-gradient(90deg, #6f8fd8, #4565c0 3%, #d6dff7 3.2%, #eef2fc); }
.toc b { color: #0b3fae; font-family: var(--title); }
.toc a:hover { background: #dce8fb; box-shadow: none; }
.doc h1, .doc h2 { font-family: var(--title); }

@media (max-width: 640px) {
  .taskbar { padding-left: 98px; }
  .orb { width: 92px; } .orb::after { font-size: 16px; }
  .win-t { padding-right: 76px; }
  .win-b button, .win-b .cl { width: 19px; height: 19px; }
}

/* docs taskbar */
a.orb { text-decoration: none; }
.tasks .vbtn.back { height: 24px; min-height: 0; padding: 0 12px; color: #fff; border: 1px solid #1c3fa3; text-decoration: none;
  background: linear-gradient(#5aa0ff 0%, #3c87f5 10%, #3178ee 50%, #2a6be2 100%); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .3); }

/* ── XP desktop icons (left edge, like the real desktop) ── */
.icons { position: fixed; left: 8px; top: 12px; z-index: 1; display: flex; flex-direction: column; gap: 14px; width: 84px; }
.icons a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 3px; border: 1px dotted transparent; text-decoration: none; color: #fff; text-align: center; font: 11px/1.25 Tahoma, sans-serif; text-shadow: 1px 1px 1px #000, 0 0 2px #000; }
.icons img { width: 44px; height: 44px; filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, .45)); }
.icons a:hover span, .icons a:focus span { background: #316ac5; text-shadow: none; }
.icons a:focus { border-color: #fff; outline: none; }
@media (min-width: 1200px) { .desk { padding-left: 108px; } }
@media (max-width: 1199px) { .icons { display: none; } }

/* ── XP's beige window colour; lists, tables and inputs stay white, like XP ── */
.win-c { background: #ece9d8; }
.win-c .list, .win-c .rounds, .win-c .w-out ul, .win-c .ca-box code, .win-c .vfield { background: #fff; }
.numbers div, .cstats > div { background: linear-gradient(#fdfdfb, #f2f0e6); }
.docswin .docs-c { background: linear-gradient(90deg, #d6dff7 200px, #fff 200px); }

/* ── Next drop + FIX6900 FM: plain XP dialogs, like the windows around them ── */
.gadget .win-c, .fm .win-c { background: #ece9d8; color: #000; border: 0; }
.gadget .win-c { padding: 10px 12px 12px; }
.gadget .label { display: inline-block; font: 11px Tahoma, sans-serif; color: #0046d5; text-transform: none; }
.gadget .drop { border: 1px solid #d0d0bf; border-radius: 3px; padding: 6px 12px 12px; margin-top: -6px; box-shadow: inset 0 0 0 1px #fff; }
.gadget .drop legend { padding: 0 4px; font: 11px Tahoma, sans-serif; color: #0046d5; }
.countdown { font: 700 46px/1.05 "Trebuchet MS", Tahoma, sans-serif; color: #0b3fae; text-shadow: 1px 1px 0 #fff; letter-spacing: 0; margin: 2px 0 4px; }
.gadget #s-nextcoin { color: #333; font: 12px Tahoma, sans-serif; margin-bottom: 8px; }
.gadget .vbar { background: #fff; border-color: #686868; }

.fm .win-c { padding: 10px 12px 12px; }
.fm-lcd { font: 12px Tahoma, sans-serif; color: #000; background: #fff; border: 1px solid #7f9db9; border-radius: 0; box-shadow: none; padding: 5px 8px; }
.fm-lcd.idle span { color: #808080; }
.fm-viz { height: 40px; margin-top: 6px; background: #000; border: 1px solid #fff; border-radius: 0; box-shadow: inset 1px 1px 0 #808080, 1px 1px 0 #808080; outline: 1px solid #aca899; }
.fm-ctl { gap: 6px; margin-top: 8px; }
.fm-ctl button { width: 34px; height: 26px; border-radius: 3px; border: 1px solid #003c74; font-size: 11px; color: #000;
  background: linear-gradient(#ffffff 0%, #f4f3ee 60%, #e3e0d6 100%); box-shadow: inset -1px -1px 0 #c9c4b5; }
.fm-ctl button:hover:not([disabled]) { box-shadow: inset 0 0 0 1px #fdd889, inset 0 0 0 2px #f8b33f; }
.fm-ctl .play { width: 46px; height: 26px; font-size: 12px; color: #fff; border-color: #1d5e14; text-shadow: 1px 1px 0 rgba(0, 0, 0, .35);
  background: linear-gradient(#7fd06a 0%, #3c9b28 45%, #2a8d22 100%); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .35); }
.fm-ctl .play:hover:not([disabled]) { background: linear-gradient(#97e083 0%, #48b030 45%, #339a28 100%); }
.fm-ctl input[type=range] { accent-color: #316ac5; }
.fm-ctl .vol-label { font: 11px Tahoma, sans-serif; color: #000; margin-left: 4px; }