/* WinOops shell: boot, login, desktop, taskbar, start menu */
.boot { position: absolute; inset: 0; background: #050a24; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.boot .logo { width: min(420px, 80vw); height: auto; }
.boot .tagline { margin-top: 10px; font: italic 15px var(--font-title); color: var(--cobalt-300); letter-spacing: .5px; }
.boot .loading { margin-top: 38px; font: 12px var(--font-ui); color: #9fb2e8; }
.boot .bar { margin-top: 12px; width: 180px; height: 12px; border: 1px solid #5b7bd8; border-radius: 3px; padding: 1px; overflow: hidden; }
.boot .bar i { display: block; width: 44px; height: 100%; border-radius: 2px; background: linear-gradient(180deg, #8fe08a, #43a043 55%, #2f8a37); animation: wo-boot 1.5s linear infinite; box-shadow: -16px 0 0 -2px #2f8a37, -32px 0 0 -2px #1f6a2a; }
@keyframes wo-boot { from { transform: translateX(-90px); } to { transform: translateX(190px); } }
.boot .foot { position: absolute; bottom: 22px; left: 28px; right: 28px; display: flex; justify-content: space-between; font: 11px var(--font-ui); color: #7d90cf; }
.boot .poweron { cursor: pointer; font: 14px var(--font-mono); color: #9fb2e8; animation: wo-blink 1.2s steps(1) infinite; padding: 12px; background: none; border: 0; }
.boot .options { margin-top: 18px; display: flex; gap: 14px; font: 12px var(--font-ui); color: #9fb2e8; }
.boot .options label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
@keyframes wo-blink { 50% { opacity: .25; } }

.login { position: absolute; inset: 0; background: var(--cobalt-600); display: flex; flex-direction: column; color: #fff; font-family: var(--font-ui); }
.login .top { height: 82px; background: var(--cobalt-900); border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--cobalt-900), #fff 50%, var(--cobalt-900)) 1; flex: none; }
.login .mid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; background: linear-gradient(90deg, #3a62d8 0 50%, #2f52c4 50%); position: relative; }
.login .left { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding-right: 36px; border-right: 2px solid transparent; border-image: linear-gradient(180deg, #3a62d8, #fff 50%, #3a62d8) 1; }
.login .left .xp { display: flex; align-items: center; gap: 14px; font: bold 46px var(--font-title); text-shadow: 2px 2px 3px var(--cobalt-900); }
.login .left .xp small { font-size: 20px; display: block; letter-spacing: 1px; font-weight: normal; }
.login .left .hint { font-size: 20px; margin-top: 26px; text-shadow: 1px 1px 2px var(--cobalt-900); }
.login .right { display: flex; align-items: center; padding-left: 36px; }
.login .usr { display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-radius: 6px; cursor: pointer; background: none; border: 0; color: #fff; text-align: left; }
.login .usr:hover, .login .usr:focus-visible { background: rgba(12, 31, 107, .5); }
.login .usr .av { width: 66px; height: 66px; border: 2px solid #fff; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: var(--cobalt-300); }
.login .usr .av .ico, #startmenu .hd .av .ico { width: 100%; height: 100%; }
.login .usr .nm { font: 22px var(--font-ui); text-shadow: 1px 1px 2px var(--cobalt-900); }
.login .usr .sub { font-size: 12px; opacity: .9; }
.login .bot { height: 86px; background: var(--cobalt-900); border-top: 2px solid transparent; border-image: linear-gradient(90deg, var(--cobalt-900), var(--amber) 50%, var(--cobalt-900)) 1; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; flex: none; }
.login .bot .offbtn { display: flex; align-items: center; gap: 8px; font-size: 16px; cursor: pointer; background: none; border: 0; color: #fff; }
.login .bot .note { font-size: 12px; max-width: 360px; }
.login .welcome { position: absolute; inset: 0; background: var(--cobalt-600); display: none; align-items: center; justify-content: center; font: italic 44px var(--font-title); text-shadow: 2px 2px 3px var(--cobalt-900); }
.login.entering .welcome { display: flex; }

#desktop { position: absolute; inset: 0 0 var(--taskbar-h) 0; background: var(--cobalt-700) var(--wallpaper, url("../assets/wallpapers/broken-hills.svg")) center / cover no-repeat; overflow: hidden; }
#desktop.dim { filter: grayscale(1); }
#desktop .dicon { position: absolute; width: 84px; display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; text-shadow: 1px 1px 2px #000; padding: 2px; background: none; border: 0; font: inherit; }
#desktop .dicon .lbl { margin-top: 3px; padding: 1px 3px; max-width: 82px; overflow-wrap: anywhere; line-height: 1.15; }
#desktop .dicon.sel .lbl, #desktop .dicon:focus-visible .lbl { background: var(--select); text-shadow: none; outline: 1px dotted #ffe9a6; }
#desktop .dicon.sel .ico { filter: drop-shadow(0 0 0 var(--select)) brightness(.85) saturate(1.3); }
#desktop .dicon .ico { filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .45)); }
#desktop .dicon:focus-visible { outline: none; }
#desktop .rubber { position: absolute; border: 1px dotted #fff; background: rgba(42, 86, 198, .35); pointer-events: none; }

#taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--taskbar-h); display: flex; z-index: 90000;
  background: var(--task-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
#startbtn {
  height: calc(var(--taskbar-h) - 4px); margin: 2px 6px 2px 3px; padding: 0 16px 0 8px; border: 1px solid var(--green-800); border-radius: 14px; display: flex; align-items: center; gap: 6px; flex: none;
  background: linear-gradient(180deg, var(--green-600) 0%, var(--green-700) 50%, var(--green-800) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 1px 1px 3px rgba(0, 0, 0, .45);
  color: #fff; font: bold 16px var(--font-title); text-shadow: 1px 1px 1px var(--green-800);
}
#startbtn:hover { filter: brightness(1.1); }
#startbtn.on { filter: brightness(.82); }
#quick { display: flex; align-items: center; gap: 4px; padding: 0 6px; border-right: 1px solid var(--cobalt-900); box-shadow: 1px 0 0 rgba(255, 255, 255, .25); margin-right: 4px; }
#quick .q { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 2px; background: none; border: 0; padding: 0; }
#quick .q:hover { background: rgba(255, 255, 255, .25); }
#tasks { flex: 1; display: flex; gap: 3px; align-items: center; padding: 0 3px; min-width: 0; }
.task {
  flex: 0 1 160px; min-width: 40px; height: 24px; display: flex; align-items: center; gap: 4px; padding: 0 6px;
  background: linear-gradient(180deg, #5b8cff, #2f63e6 30%, #2a56c6);
  border: 1px solid var(--cobalt-900); border-radius: 3px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.task:hover { filter: brightness(1.1); }
.task.active { background: linear-gradient(180deg, #14349a, #1a3fae); box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .55); }
.task span { overflow: hidden; text-overflow: ellipsis; }
#tray {
  display: flex; align-items: center; gap: 6px; padding: 0 10px 0 12px; flex: none; color: #fff; position: relative;
  background: linear-gradient(180deg, #0f2a85, #1a46b8 12%, #153a9f); border-left: 1px solid var(--cobalt-900); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25);
}
#tray .clock { padding-left: 6px; font-size: 11px; }
#tray .trayicon { background: none; border: 0; padding: 0; display: grid; place-items: center; }

#startmenu { position: absolute; left: 0; bottom: var(--taskbar-h); width: 390px; z-index: 89999; border-radius: 8px 8px 0 0;
  background: var(--cream-50); border: 1px solid var(--cobalt-900); box-shadow: 3px -2px 8px rgba(0, 0, 0, .45); display: none; flex-direction: column; }
#startmenu.open { display: flex; }
#startmenu .hd { height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 10px; color: #fff; border-radius: 7px 7px 0 0;
  background: var(--title-grad); border-bottom: 3px solid var(--amber); font: bold 17px var(--font-title); text-shadow: 1px 1px 2px var(--cobalt-900); }
#startmenu .hd .av { width: 44px; height: 44px; border: 2px solid #fff; border-radius: 4px; overflow: hidden; display: grid; place-items: center; background: var(--cobalt-300); }
#startmenu .hd .brand { margin-left: auto; font: 11px var(--font-ui); opacity: .85; text-align: right; line-height: 1.2; }
#startmenu .cols { display: flex; min-height: 380px; }
#startmenu .lc { width: 196px; background: var(--cream-50); padding: 6px 2px 0; display: flex; flex-direction: column; }
#startmenu .rc { flex: 1; background: var(--cobalt-100); border-left: 1px solid var(--cobalt-300); padding: 6px 2px 0; }
#startmenu .sm { display: flex; align-items: center; gap: 6px; padding: 5px 6px; min-height: 32px; line-height: 1.2; position: relative; background: none; border: 0; width: 100%; text-align: left; font: inherit; color: inherit; }
#startmenu .sm:hover, #startmenu .sm.hot, #startmenu .sm:focus-visible { background: var(--select); color: var(--select-text); }
#startmenu .sm b { display: block; }
#startmenu .sm small { display: block; color: var(--text-dim); }
#startmenu .sm:hover small, #startmenu .sm.hot small { color: #dce8ff; }
#startmenu .rc .sm { color: var(--cobalt-900); }
#startmenu .rc .sm.b { font-weight: bold; }
#startmenu .rc .sm:hover { color: #fff; }
#startmenu .rc .sm.arrow::after, #startmenu .lc .sm.arrow::after { content: "\25B6"; position: absolute; right: 6px; font-size: 8px; }
#startmenu .sep { height: 1px; margin: 4px 10px; background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent); }
#startmenu .rc .sep { background: linear-gradient(90deg, transparent, var(--cobalt-500) 20%, var(--cobalt-500) 80%, transparent); }
#startmenu .lc .sp { flex: 1; }
#startmenu .allp { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 6px; font-weight: bold; border-top: 1px solid var(--cream-300); margin-top: 4px; position: relative; background: none; border-left: 0; border-right: 0; border-bottom: 0; font-family: inherit; font-size: inherit; color: inherit; }
#startmenu .allp:hover, #startmenu .allp.hot { background: var(--select); color: #fff; }
#startmenu .allp .go { width: 18px; height: 18px; background: linear-gradient(180deg, #8fe08a, #2f8a37); border-radius: 4px; color: #fff; display: grid; place-items: center; font-size: 11px; }
#startmenu .ft { height: 42px; display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 0 10px; background: var(--title-grad); color: #fff; }
#startmenu .ft .fb { display: flex; align-items: center; gap: 4px; padding: 3px 4px; border-radius: 3px; background: none; border: 0; color: #fff; font: inherit; }
#startmenu .ft .fb:hover, #startmenu .ft .fb:focus-visible { background: rgba(255, 255, 255, .22); }
.fly { position: fixed; background: var(--cream-50); border: 1px solid var(--cobalt-700); box-shadow: 3px 3px 6px rgba(0, 0, 0, .4); z-index: 99991; padding: 2px; min-width: 196px; }
.fly .sm { display: flex; align-items: center; gap: 6px; padding: 4px 18px 4px 6px; position: relative; min-height: 24px; white-space: nowrap; }
.fly .sm:hover { background: var(--select); color: #fff; }
.fly .sm.arrow::after { content: "\25B6"; position: absolute; right: 6px; font-size: 8px; }

.balloon { position: absolute; right: 12px; bottom: calc(var(--taskbar-h) + 6px); width: 290px; background: #fffbe0; border: 1px solid var(--ink); border-radius: 7px; padding: 8px 10px 10px; z-index: 89990; box-shadow: 2px 2px 5px rgba(0, 0, 0, .4); color: #000; }
.balloon::after { content: ""; position: absolute; right: 36px; bottom: -9px; border: 8px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.balloon::before { content: ""; position: absolute; right: 37px; bottom: -7px; border: 7px solid transparent; border-top-color: #fffbe0; border-bottom: 0; z-index: 1; }
.balloon .bh { display: flex; align-items: center; gap: 6px; font-weight: bold; margin-bottom: 4px; }
.balloon .bx { margin-left: auto; font-weight: normal; padding: 0 4px; background: none; border: 0; }
.shutdown-dim { position: absolute; inset: 0; z-index: 99999; backdrop-filter: grayscale(1) brightness(.75); }
.bye { position: absolute; inset: 0; z-index: 100000; background: var(--cobalt-600); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; font: italic 34px var(--font-title); text-shadow: 2px 2px 3px var(--cobalt-900); }
.poweroff { position: absolute; inset: 0; z-index: 100001; background: #050a24; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; color: #9fb2e8; font: 14px var(--font-mono); text-align: center; padding: 20px; }
.poweroff .btn { margin-top: 12px; color: var(--text); font: 12px var(--font-ui); }

.tobox { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 400px; max-width: 94vw; background: var(--cobalt-600); border: 1px solid var(--cobalt-900); border-radius: 4px; color: #fff; font: bold 15px var(--font-title); }
.tohd, .toft { background: var(--cobalt-900); padding: 8px 12px; }
.toft { text-align: right; }
.tobody { display: flex; justify-content: space-around; padding: 28px 10px; }
.tochoice { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; color: #fff; font: 12px var(--font-ui); padding: 8px; border-radius: 4px; }
.tochoice:hover, .tochoice:focus-visible { background: rgba(255, 255, 255, .22); }
.boot .poweron:focus-visible { outline: 2px solid var(--focus); }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
.volpop { position: absolute; right: 8px; bottom: var(--taskbar-h); z-index: 89995; background: var(--cream-100); border: 1px solid var(--cobalt-900); border-radius: 4px 4px 0 0; padding: 10px 14px 12px; box-shadow: 2px -2px 6px rgba(0, 0, 0, .4); display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 120px; }
.volpop input[type=range] { width: 100px; accent-color: var(--green-600); }
.volpop label { display: flex; align-items: center; gap: 4px; }
#desktop.small .dicon .ico { width: 24px; height: 24px; }
#desktop.hide-icons .dicon { display: none; }