/* Windows XP "Luna" look, hand-rolled. Shared by the site and the admin panel. */

:root {
  --xp-face: #ece9d8;
  --xp-blue: #0054e3;
  --xp-frame: #0831d9;
  --xp-select: #316ac5;
  --xp-text: #000;
  --xp-muted: #4d4d4d;
  --xp-input-border: #7f9db9;
  --xp-link: #0033cc;
  --taskbar-h: 30px;
  --font-ui: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
  --font-title: "Trebuchet MS", Tahoma, "Segoe UI", sans-serif;
  color-scheme: light;
}

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

html, body { height: 100%; margin: 0; }

body {
  font: 12px/1.4 var(--font-ui);
  color: var(--xp-text);
  background: #3a6ea5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-title); margin: 0 0 .4em; }
a { color: var(--xp-link); }
a:hover { color: #3366ff; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Window ---------- */

.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 280px;
  min-height: 180px;
  background: var(--xp-face);
  border: 3px solid #0058ee;
  border-top: 0;
  border-radius: 8px 8px 0 0;
  box-shadow: 2px 3px 14px rgba(0, 0, 0, .45);
  resize: both;
  overflow: hidden;
  outline: none;
}

.window.inactive { border-color: #7a96df; }

.title-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 4px 0 6px;
  margin: 0 -3px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #0066ff 88%, #0066ff 93%, #005bff 95%, #003dd7 96%, #003dd7 100%);
  color: #fff;
  font: bold 13px/1 var(--font-title);
  text-shadow: 1px 1px #0f1089;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: default;
}

.window.inactive .title-bar {
  background: linear-gradient(180deg, #7697e7 0%, #7e9ee3 3%, #94afe8 6%, #97b4e9 8%, #82a5e4 14%, #7c9fe2 17%, #7996de 25%, #7b99e1 56%, #82a9e9 81%, #80a5e7 89%, #7b96e1 94%, #7a93df 97%, #abbae3 100%);
  color: #d8e4f8;
  text-shadow: none;
}

.title-icon { width: 16px; height: 16px; flex: none; }

.title-bar-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: .2px;
}

.title-bar-controls { display: flex; gap: 2px; flex: none; }

.tb-btn {
  position: relative;
  width: 21px;
  height: 21px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 3px;
  background: radial-gradient(circle at 90% 90%, #0054e9 0%, #2263d5 55%, #4479e4 70%, #a3bbec 90%, #fff 100%);
  box-shadow: inset -1px -1px rgba(0, 0, 0, .15);
  cursor: pointer;
}
.tb-btn:hover { filter: brightness(1.15); }
.tb-btn:active { filter: brightness(.85); }
.window.inactive .tb-btn { opacity: .75; }

.tb-close {
  background: radial-gradient(circle at 90% 90%, #cc4600 0%, #dc6527 55%, #cd7546 70%, #ffccb2 90%, #fff 100%);
}

.tb-min::before {
  content: ""; position: absolute; left: 4px; bottom: 4px;
  width: 8px; height: 3px; background: #fff;
}
.tb-max::before {
  content: ""; position: absolute; left: 4px; top: 4px; width: 11px; height: 11px;
  border: 1px solid #fff; border-top-width: 3px;
}
.window.maximized .tb-max::before { left: 6px; top: 3px; width: 8px; height: 8px; }
.window.maximized .tb-max::after {
  content: ""; position: absolute; left: 3px; top: 7px; width: 8px; height: 8px;
  border: 1px solid #fff; border-top-width: 2px;
  background: #2a65d8;
}
.tb-close::before, .tb-close::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 13px; height: 2px; background: #fff; border-radius: 1px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.tb-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.window-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.window.maximized {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0;
  resize: none;
}
.window.maximized .title-bar { border-radius: 0; }

/* Menu bar / toolbars inside windows */
.menubar {
  flex: none;
  display: flex;
  gap: 2px;
  padding: 1px 2px;
  border-bottom: 1px solid #d6d2c2;
  background: var(--xp-face);
}
.menubar span { padding: 2px 6px; color: #000; }

.toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  border-bottom: 1px solid #d6d2c2;
  background: linear-gradient(#fbfbf9, #ece9d8);
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  font: inherit;
  color: #000;
  cursor: pointer;
}
.tool-btn:hover:not(:disabled) { border-color: #cecece; background: #fff; box-shadow: inset 0 -1px #e3e3db; }
.tool-btn:disabled { color: #9d9d9d; cursor: default; }
.tool-btn .arrow {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a6e3a6, #2f9e2f 60%, #1a6e1a);
  color: #fff; font-weight: bold; font-size: 12px;
}
.tool-btn:disabled .arrow { background: radial-gradient(circle at 35% 30%, #eee, #b7b7b7 60%, #8d8d8d); }

.addressbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  border-bottom: 1px solid #d6d2c2;
  background: var(--xp-face);
  color: var(--xp-muted);
}
.addressbar .address {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 22px;
  padding: 0 4px;
  border: 1px solid var(--xp-input-border);
  background: #fff;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.addressbar .address img { width: 16px; height: 16px; }

.status-bar {
  flex: none;
  display: flex;
  gap: 2px;
  padding: 2px 3px;
  border-top: 1px solid #d6d2c2;
  background: var(--xp-face);
  color: #222;
  font-size: 11px;
}
.status-bar > * {
  flex: 1;
  padding: 1px 6px;
  box-shadow: inset 1px 1px #a5a29a, inset -1px -1px #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-bar > :last-child { flex: none; min-width: 120px; }

/* ---------- Explorer layout: blue task pane + white content ---------- */

.explorer { flex: 1; min-height: 0; display: flex; }

.taskpane {
  flex: none;
  width: 210px;
  padding: 12px 10px;
  overflow-y: auto;
  background: linear-gradient(180deg, #7ba2e7 0%, #6375d6 100%);
}

.pane-box { margin-bottom: 12px; border-radius: 4px 4px 0 0; overflow: hidden; }
.pane-box > h3 {
  margin: 0;
  padding: 5px 10px;
  background: linear-gradient(90deg, #fff 0%, #c6d3f7 100%);
  color: #215dc6;
  font: bold 11px var(--font-ui);
}
.pane-box > div {
  padding: 8px 10px;
  background: #d6dff7;
  border: 1px solid #fff;
  border-top: 0;
  color: #000;
  font-size: 11px;
}
.pane-box a, .pane-box .link-btn { color: #215dc6; text-decoration: none; }
.pane-box a:hover, .pane-box .link-btn:hover { color: #428eff; text-decoration: underline; }
.pane-box ul { margin: 0; padding: 0; list-style: none; }
.pane-box li + li { margin-top: 5px; }
.pane-box label { display: block; margin: 4px 0 2px; }

.content {
  flex: 1;
  min-width: 0;
  overflow: auto;
  background: #fff;
  padding: 16px 18px;
}

/* ---------- Controls ---------- */

.btn {
  min-width: 75px;
  min-height: 23px;
  padding: 0 12px;
  border: 1px solid #003c74;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff 0%, #ecebe6 86%, #d6d0c5 100%);
  font: 11px var(--font-ui);
  color: #000;
  cursor: pointer;
}
.btn:hover:not(:disabled) {
  box-shadow: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a;
}
.btn:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
  box-shadow: inset -1px 1px #cee7ff, inset 1px 2px #98b8ea, inset -2px 2px #bcd4f6, inset 1px -1px #89ade4, inset 2px -2px #89ade4;
}
.btn:active:not(:disabled) {
  background: linear-gradient(180deg, #cdcac3 0%, #e3e3db 8%, #e5e5de 94%, #f2f2f1 100%);
  box-shadow: none;
}
.btn:disabled { color: #a1a192; border-color: #c9c7ba; background: #f4f4f0; cursor: default; }
.btn.primary { font-weight: bold; }
.btn.danger { color: #a00; }

.link-btn {
  padding: 0; border: 0; background: none; font: inherit;
  color: var(--xp-link); text-decoration: underline; cursor: pointer; text-align: left;
}

input[type="text"], input[type="search"], input[type="password"], input[type="number"], input[type="url"], textarea, select {
  font: 12px var(--font-ui);
  color: #000;
  padding: 3px 4px;
  border: 1px solid var(--xp-input-border);
  border-radius: 0;
  background: #fff;
  width: 100%;
}
input:focus, textarea:focus, select:focus { outline: 1px solid #316ac5; outline-offset: -1px; }
textarea { resize: vertical; line-height: 1.45; }

input[type="radio"], input[type="checkbox"] { accent-color: #21a121; margin: 0 6px 0 0; }

fieldset.group {
  margin: 0 0 12px;
  padding: 8px 10px 10px;
  border: 1px solid #d0d0bf;
  border-radius: 4px;
}
fieldset.group > legend { padding: 0 4px; color: #0046d5; }

/* Progress bar: green XP blocks */
.progress {
  height: 16px;
  padding: 2px;
  border: 1px solid #686868;
  border-radius: 3px;
  background: #fff;
  box-shadow: inset 1px 1px #d0d0d0;
}
.progress > span {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(90deg, transparent 0 8px, #fff 8px 10px),
              linear-gradient(180deg, #acedad 0%, #7be47d 14%, #4cda50 28%, #2ed330 42%, #42d845 57%, #76e275 71%, #8fe791 85%, #fff 100%);
  transition: width .25s;
}

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; padding-left: 4px; position: relative; z-index: 1; }
.tab {
  margin-right: -1px;
  padding: 3px 12px 2px;
  border: 1px solid #919b9c;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #fff 0%, #ecebe5 75%, #d8d2bd 100%);
  font: 11px var(--font-ui);
  cursor: pointer;
  margin-top: 2px;
}
.tab:hover { border-top: 2px solid #f9b131; padding-top: 2px; }
.tab[aria-selected="true"] {
  position: relative;
  margin-top: 0;
  margin-bottom: -1px;
  padding: 4px 14px 5px;
  border-top: 3px solid #e68b2c;
  background: #fcfcfe;
}
.tab-panel {
  border: 1px solid #919b9c;
  background: #fcfcfe;
  box-shadow: 1px 1px #c0bfb5;
}

/* Scrollbars, roughly XP */
.window ::-webkit-scrollbar { width: 17px; height: 17px; }
.window ::-webkit-scrollbar-track { background: #f4f4f0; }
.window ::-webkit-scrollbar-thumb {
  border: 1px solid #fff;
  border-radius: 3px;
  background: linear-gradient(90deg, #c8d6fb, #b9cbf9 50%, #a9bff6);
  box-shadow: inset 0 0 0 1px #98b0e7;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}