/* ── Color Theory XP shell ─────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }
html, body { height: 100%; overflow: hidden; }
body { font-family: Tahoma, "Segoe UI", Verdana, sans-serif; font-size: 12px; background: #000; }
button { font-family: inherit; }
a { color: #0645ad; }
.fullscreen { position: fixed; inset: 0; z-index: 9000; }
[hidden] { display: none !important; }

/* ── Boot screen ── */
#boot { background: #000; color: #fff; display: flex; align-items: center; justify-content: center; }
.boot-inner { text-align: center; }
.boot-flag { display: inline-block; line-height: 0; transform: skewY(-6deg); margin-bottom: 10px; }
.boot-flag .fl { display: inline-block; width: 22px; height: 22px; margin: 2px; border-radius: 4px 10px 4px 10px; }
.boot-flag.big .fl { width: 30px; height: 30px; }
.fl.r { background: linear-gradient(135deg,#ff5f52,#c62828); }
.fl.g { background: linear-gradient(135deg,#9ccc65,#33691e); }
.fl.b { background: linear-gradient(135deg,#64b5f6,#1565c0); }
.fl.y { background: linear-gradient(135deg,#ffd54f,#f57f17); }
.boot-title { font-size: 34px; font-weight: bold; letter-spacing: -1px; }
.boot-title sup { font-size: 14px; color: #ff8c00; }
.boot-sub { color: #aaa; margin-top: 4px; font-size: 11px; letter-spacing: 2px; }
.boot-bar { width: 200px; height: 16px; border: 2px solid #7a7a7a; border-radius: 8px; margin: 42px auto 0; overflow: hidden; position: relative; }
.boot-blocks { position: absolute; display: flex; gap: 3px; animation: bootmove 1.6s linear infinite; }
.boot-blocks i { width: 10px; height: 10px; margin-top: 1px; background: linear-gradient(#7ab7ff,#1c5fbf); border-radius: 2px; }
@keyframes bootmove { from { left: -50px; } to { left: 210px; } }
.boot-foot { position: fixed; bottom: 24px; left: 0; right: 0; color: #888; font-size: 11px; }

/* ── Login ── */
#login { display: flex; flex-direction: column; background: linear-gradient(#5a7edc 0%, #3f65c8 8%, #7ba2e7 50%, #3f65c8 92%, #27418f 100%); }
.login-top, .login-bottom { height: 78px; background: linear-gradient(#1c3a8c, #27418f); flex: none; }
.login-top { border-bottom: 3px solid #e6a33c; }
.login-bottom { border-top: 3px solid #e6a33c; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; color: #fff; }
.login-off { cursor: pointer; } .login-off:hover { text-decoration: underline; }
.login-tip { color: #cfe0ff; font-size: 11px; }
.login-mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 60px; color: #fff; }
.login-left { text-align: right; }
.login-brand { font-size: 28px; font-weight: bold; }
.login-brand sup { font-size: 12px; color: #ffb347; }
.login-hint { margin-top: 16px; color: #dce8ff; font-size: 13px; }
.login-sep { width: 2px; height: 260px; background: linear-gradient(transparent, #fff8, transparent); }
.login-user { display: flex; gap: 12px; align-items: center; padding: 12px 18px; border-radius: 8px; cursor: pointer; width: 300px; }
.login-user:hover, .login-user:focus { background: #ffffff2e; outline: none; }
.login-user.ghost { opacity: .75; }
.login-avatar { width: 52px; height: 52px; border-radius: 8px; border: 2px solid #fff; background: linear-gradient(#ffd27a,#e08c3c); display: flex; align-items: center; justify-content: center; font-size: 28px; flex: none; }
.login-user.patron .login-avatar { background: linear-gradient(#8fd66f,#2f8f2f); }
.login-name { font-size: 17px; font-weight: bold; }
.login-desc { font-size: 11px; color: #dce8ff; }
.login-user.shake { animation: loginShake 0.45s; }
@keyframes loginShake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } }
.login-pw { display: flex; gap: 5px; margin-top: 7px; }
.login-pw input { width: 150px; padding: 4px 7px; border: 1px solid #2a4a8c; border-radius: 3px; font-size: 12px; }
.login-pw-go { width: 26px; border: 1px solid #2a4a8c; border-radius: 3px; cursor: pointer; font-weight: bold; background: linear-gradient(#8fd66f,#3f9f3f); color: #fff; }
.login-pw-go:hover { filter: brightness(1.08); }

/* ── Desktop / wallpapers ── */
#desktop { position: fixed; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 90% 45% at 25% 108%, #7db83c 0%, #55941f 42%, transparent 43%),
    radial-gradient(ellipse 130% 60% at 80% 118%, #4c8a1d 0%, #3a7312 48%, transparent 49%),
    radial-gradient(ellipse 60% 24% at 68% 30%, #ffffff5c, transparent 70%),
    radial-gradient(ellipse 40% 16% at 30% 18%, #ffffff4f, transparent 70%),
    linear-gradient(#2a63c8 0%, #5b93dd 45%, #9dc3ec 62%, #cfe4f5 72%, #55941f 73%, #38680f 100%);
}
#desktop.wp-magenta { background: radial-gradient(ellipse at 30% 110%, #b53fa0 0%, transparent 55%), linear-gradient(#2b0f3a, #7a1f6e); }
#desktop.wp-midnight { background: radial-gradient(ellipse at 70% 115%, #16324f 0%, transparent 60%), linear-gradient(#04070f, #10233d); }
#desktop.wp-teal { background: radial-gradient(ellipse at 50% 120%, #1d7a74 0%, transparent 60%), linear-gradient(#062b29, #0f5450); }
#desktop.blink { filter: invert(.08); }

#icons { position: absolute; top: 8px; left: 8px; bottom: 40px; display: flex; flex-direction: column; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.dicon { width: 86px; padding: 6px 2px; text-align: center; cursor: pointer; border-radius: 3px; }
.dicon-img { display: block; width: 40px; height: 40px; margin: 0 auto 4px; filter: drop-shadow(1px 2px 2px #0006); }
.dicon-img svg { width: 40px; height: 40px; }
.dicon-label { color: #fff; text-shadow: 1px 1px 2px #000, 0 0 4px #0009; font-size: 11px; line-height: 1.25; display: block; word-wrap: break-word; }
.dicon.sel .dicon-label { background: #316ac5; box-shadow: 0 0 0 1px #316ac5; }
.dicon:hover .dicon-img { filter: drop-shadow(1px 2px 2px #0006) brightness(1.12); }

/* ── Taskbar ── */
#taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: 34px; display: flex; align-items: stretch; z-index: 8000;
  background: linear-gradient(#3a81e8 0%, #2a67d4 8%, #2258c9 45%, #1b47ad 95%); border-top: 1px solid #6ea6f0; }
#startBtn { display: flex; align-items: center; gap: 7px; border: none; cursor: pointer; color: #fff; font-size: 16px; font-weight: bold; font-style: italic; padding: 0 22px 0 12px;
  background: linear-gradient(#7ebc5a 0%, #48a029 40%, #3c8c1f 95%); border-radius: 0 12px 12px 0; text-shadow: 1px 1px 2px #0007; box-shadow: inset 0 1px 0 #b6e39c; }
#startBtn:hover { filter: brightness(1.08); }
#startBtn:active { filter: brightness(.92); }
.start-flag { width: 20px; height: 20px; border-radius: 50%; background:
  conic-gradient(from 0deg, #e33 0 90deg, #3a3 90deg 180deg, #fc0 180deg 270deg, #36c 270deg 360deg);
  transform: skewY(-6deg); box-shadow: 0 0 4px #0006; }
#quickLaunch { display: flex; align-items: center; gap: 2px; padding: 0 8px; border-right: 1px solid #1b47ad; }
.ql-btn { width: 24px; height: 24px; cursor: pointer; border-radius: 3px; padding: 2px; }
.ql-btn:hover { background: #ffffff33; }
.ql-btn svg { width: 100%; height: 100%; }
#taskButtons { flex: 1; display: flex; align-items: center; gap: 4px; padding: 4px 6px; overflow: hidden; }
.taskbtn { display: flex; align-items: center; gap: 6px; max-width: 160px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 26px; padding: 0 10px; border: none; border-radius: 3px; cursor: pointer; color: #fff; font-size: 11px;
  background: linear-gradient(#5591e8, #3e78d8); box-shadow: inset 0 1px 0 #7fb0f0; }
.taskbtn.active { background: linear-gradient(#1e4fa8, #17408f); box-shadow: inset 0 2px 4px #00114488; }
.taskbtn .t-icon svg { width: 14px; height: 14px; }
#tray { display: flex; align-items: center; gap: 9px; padding: 0 12px 0 14px; color: #fff;
  background: linear-gradient(#25a5e8 0%, #1583cc 50%, #0f6ab3 100%); border-left: 1px solid #6ec6f5; box-shadow: inset 2px 0 3px #00336655; }
#tray span { cursor: pointer; font-size: 12px; }
#clock { font-size: 11px; cursor: default !important; }

/* ── Start menu ── */
#startMenu { position: fixed; left: 0; bottom: 34px; width: 400px; z-index: 8500; border-radius: 6px 6px 0 0; overflow: hidden;
  border: 1px solid #1b47ad; box-shadow: 3px -3px 12px #0006; }
.sm-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: #fff; font-size: 14px; font-weight: bold;
  background: linear-gradient(#3a81e8, #1e50b0); text-shadow: 1px 1px 2px #0007; }
.sm-avatar { width: 34px; height: 34px; border: 2px solid #fff9; border-radius: 5px; background: linear-gradient(#ffd27a,#e08c3c); display: flex; align-items: center; justify-content: center; font-size: 19px; }
.sm-cols { display: flex; }
.sm-left { width: 55%; background: #fff; padding: 6px 0; }
.sm-right { width: 45%; background: #d3e5fa; border-left: 1px solid #96b9e6; padding: 6px 0; }
.sm-item { display: flex; align-items: center; gap: 9px; padding: 6px 12px; cursor: pointer; font-size: 12px; color: #0a246a; }
.sm-right .sm-item { color: #1a3c7a; font-weight: bold; font-size: 11px; }
.sm-item small { color: #888; font-weight: normal; }
.sm-item:hover { background: #316ac5; color: #fff !important; }
.sm-item:hover small { color: #cfe0ff; }
.sm-ic svg { width: 24px; height: 24px; display: block; }
.sm-right .sm-ic svg { width: 20px; height: 20px; }
.sm-sep { height: 1px; background: #d5dbe8; margin: 5px 10px; }
.sm-all { font-weight: bold; justify-content: center; }
.sm-foot { display: flex; justify-content: flex-end; gap: 16px; padding: 8px 14px; background: linear-gradient(#3a81e8, #1e50b0); color: #fff; }
.sm-off { cursor: pointer; font-size: 11px; }
.sm-off:hover { text-decoration: underline; }

/* ── Windows ── */
.window { position: absolute; min-width: 200px; background: #ece9d8; border-radius: 8px 8px 3px 3px; z-index: 100;
  border: 1px solid #0831d9; box-shadow: 1px 1px 0 #0831d9 inset, -1px -1px 0 #0831d9 inset, 2px 4px 14px #0008; display: flex; flex-direction: column; }
.window.maximized { left: 0 !important; top: 0 !important; width: 100vw !important; height: calc(100vh - 34px) !important; border-radius: 0; }
.titlebar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 8px; cursor: default; border-radius: 7px 7px 0 0; color: #fff; font-weight: bold; font-size: 12px; text-shadow: 1px 1px 1px #0008; flex: none;
  background: linear-gradient(180deg, #2a63d4 0%, #124fce 8%, #0a44c8 40%, #0d3ba8 88%, #0831d9 100%); }
.window.inactive .titlebar { background: linear-gradient(#8ba9e8, #7691cf); }
.t-icon svg, .t-icon img { width: 16px; height: 16px; vertical-align: -3px; }
.t-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.t-btns { display: flex; gap: 2px; }
.tb { width: 21px; height: 21px; border-radius: 3px; border: 1px solid #fff9; color: #fff; font-size: 10px; font-weight: bold; cursor: pointer; line-height: 1;
  background: linear-gradient(#4d84ea, #2a5ccc); }
.tb:hover { filter: brightness(1.15); }
.tb.close { background: linear-gradient(#e8927c, #d3502c 45%, #b53c1c); }
.menubar { display: flex; gap: 2px; background: #ece9d8; border-bottom: 1px solid #d4d0c8; padding: 1px 4px; flex: none; }
.menu-item { padding: 3px 9px; cursor: pointer; border-radius: 2px; }
.menu-item:hover { background: #316ac5; color: #fff; }
.win-body { flex: 1; overflow: auto; display: flex; flex-direction: column; min-height: 0; }
.win-body > * { flex: 1; min-height: 0; }

/* dropdown + context menu */
.dropdown { position: fixed; z-index: 9500; background: #fff; border: 1px solid #8a94a5; box-shadow: 3px 3px 8px #0005; min-width: 190px; padding: 2px; font-size: 12px; }
.dd-item { padding: 5px 18px 5px 24px; cursor: pointer; }
.dd-item:hover { background: #316ac5; color: #fff; }
.dd-item.disabled { color: #999; cursor: default; }
.dd-item.disabled:hover { background: none; color: #999; }
.menu-sep { height: 1px; background: #d5dbe8; margin: 3px 6px; }

/* dialogs */
.window.dialog { min-width: 300px; }
.dlg-body { padding: 14px 16px 12px; }
.dlg-row { display: flex; gap: 14px; align-items: flex-start; }
.dlg-icon { font-size: 30px; line-height: 1; }
.dlg-icon svg { width: 32px; height: 32px; }
.dlg-text { font-size: 12px; line-height: 1.5; user-select: text; }
.dlg-btns { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.xp-btn { min-width: 74px; padding: 4px 12px; font-size: 11px; cursor: pointer; border-radius: 3px; border: 1px solid #003c74;
  background: linear-gradient(#fff, #ece9d8 45%, #dcd8c8); }
.xp-btn:hover { box-shadow: inset 0 0 0 2px #f8b636aa; }
.xp-btn:active { background: #dcd8c8; }
.xp-btn.default { box-shadow: inset 0 0 0 2px #5b9be2aa; }
.run-body { padding: 12px 14px; }
.run-line { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.run-line input { flex: 1; padding: 4px 6px; border: 1px solid #7f9db9; font-size: 12px; }

/* balloon tip */
#balloon { position: fixed; right: 12px; bottom: 44px; width: 280px; background: #ffffe1; border: 1px solid #000; border-radius: 8px; padding: 10px 12px; z-index: 8600; font-size: 11px; cursor: pointer; box-shadow: 2px 3px 8px #0006; line-height: 1.5; }
#balloon::after { content: ""; position: absolute; bottom: -12px; right: 40px; border: 7px solid transparent; border-top-color: #ffffe1; }
#balloon b { display: block; margin-bottom: 3px; font-size: 12px; }
.bal-close { position: absolute; top: 4px; right: 7px; font-size: 10px; color: #666; }

/* clippy */
#clippy { position: fixed; right: 30px; bottom: 60px; z-index: 8700; width: 260px; }
.clippy-body { font-size: 54px; text-align: right; filter: drop-shadow(2px 3px 3px #0006); animation: clipbounce 2.2s ease-in-out infinite; }
@keyframes clipbounce { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg) translateY(-6px); } }
.clippy-bubble { background: #ffffcf; border: 1.5px solid #333; border-radius: 10px; padding: 12px; font-size: 12px; line-height: 1.5; box-shadow: 2px 3px 8px #0005; margin-bottom: 8px; }
.clippy-btns { display: flex; gap: 6px; margin-top: 10px; }

/* BSOD */
#bsod { background: #0827f5; color: #fff; font-family: "Lucida Console", Consolas, monospace; font-size: 14px; cursor: pointer; }
.bsod-inner { white-space: pre-wrap; padding: 8vh 10vw; line-height: 1.65; }

/* screensaver */
#screensaver { background: #000; cursor: none; }
#ssLogo { position: absolute; font-size: 40px; font-weight: bold; letter-spacing: 4px; font-family: Impact, sans-serif; color: #3af; will-change: transform; }

/* shutdown */
#shutdown { background: #000; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.shutdown-msg { color: #ffa500; font-size: 26px; font-weight: bold; text-align: center; font-family: "Lucida Console", monospace; }
.shutdown-sub { font-size: 13px; color: #888; }