/* ═══════════════════════════════════════════════════════════════════════
   The Windows 11 shell's look (with win-shell.js): Mica and Acrylic
   surfaces, caption buttons, the taskbar, Start, Quick Settings, the
   Notification Centre and calendar, context menus, Task View, snapping,
   the lock screen's curtain. Light blur only (school PCs).
   ═══════════════════════════════════════════════════════════════════════ */
.screen { --sh-acr: rgba(40,40,40,.9); --sh-acr2: rgba(44,44,44,.96); --sh-edge: rgba(255,255,255,.08); --sh-hover: rgba(255,255,255,.06); --sh-press: rgba(255,255,255,.04); --sh-acc: #4cc2ff; --sh-acc-ink: #000; font-family: 'Segoe UI Variable Text', 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; }
.sh-g { width: 12px; height: 12px; display: inline-block; vertical-align: middle; flex: none; }
.sh-fxs .win { animation: none !important; }
/* the stand-ins that play out what has just left the screen */
.sh-px { position: absolute; pointer-events: none; overflow: hidden; border-radius: 8px; background: #272727; box-shadow: 0 24px 56px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); }
.sh-px-win::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 34px; background: #1d2430; }
.sh-px-fly { background: rgba(40,40,40,.92); box-shadow: 0 32px 64px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08); }
.sh-px-tv { border-radius: 0; background: rgba(14,18,28,.6); box-shadow: none; }
.sh-px-lock { border-radius: 0; box-shadow: none; background: #0b1a3a url(wall-default.svg?v=2) center / cover no-repeat; }
.sh-px-lock::before { content: ''; position: absolute; inset: 0; background: rgba(6,12,30,.6); }

/* ── windows: Mica title bars, shadows, caption buttons ─────────────── */
.win { border-radius: 8px; box-shadow: 0 8px 22px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.07); }
.win.focus { box-shadow: 0 32px 64px rgba(0,0,0,.5), 0 2px 21px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.1); }
.win.max, .win.sh-snapped { border-radius: 0; }
.titlebar { background: #202020; }
.win.focus .titlebar { background: #1d2430; }
.titlebar .ti { display: inline-flex; align-items: center; }
.wc span { width: 46px; height: 34px; font-size: 0 !important; color: var(--w-ink); position: relative; transition: background-color .1s; }
.win:not(.focus) .wc span { color: #8d8d8d; }
.wc span::before { content: ''; width: 10px; height: 10px; background: currentColor; -webkit-mask: var(--sh-m) center / 10px 10px no-repeat; mask: var(--sh-m) center / 10px 10px no-repeat; }
.wc span[data-act="win-min"] { --sh-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0 5.5h10' stroke='black' stroke-width='1'/%3E%3C/svg%3E"); }
.wc span[data-act="win-max"] { --sh-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='.5' y='.5' width='9' height='9' rx='1.6' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E"); }
.win.max .wc span[data-act="win-max"] { --sh-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='.5' y='2.5' width='7' height='7' rx='1.3' fill='none' stroke='black' stroke-width='1'/%3E%3Cpath d='M2.5 2.4V1.9c0-.8.6-1.4 1.4-1.4h4.2c.8 0 1.4.6 1.4 1.4v4.2c0 .8-.6 1.4-1.4 1.4h-.6' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E"); }
.wc span.x { --sh-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M.6.6l8.8 8.8M9.4.6L.6 9.4' stroke='black' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E"); }
.wc span:hover { background: rgba(255,255,255,.08); } .wc span:active { background: rgba(255,255,255,.04); }
.wc span.x:hover { background: #c42b1c; color: #fff; } .wc span.x:active { background: #b22a1b; }
/* File Explorer: its location sits in a tab, as in Windows 11 */
.win[data-app="explorer"] .titlebar { gap: 0; padding-left: 8px; align-items: flex-end; }
.win[data-app="explorer"] .titlebar .ti { height: 28px; padding: 0 8px 0 12px; background: #2b2b2b; border-radius: 8px 0 0 0; }
.win[data-app="explorer"] .titlebar .ttl { flex: 0 1 220px; height: 28px; line-height: 28px; padding-right: 30px; background: #2b2b2b; border-radius: 0 8px 0 0; color: var(--w-ink); position: relative; }
.win[data-app="explorer"] .titlebar .wc { align-self: stretch; margin-left: auto; }
.win[data-app="explorer"] .ex-tb { background: #2b2b2b; border-bottom: 1px solid rgba(0,0,0,.35); padding: 6px 10px 8px; }
.win[data-app="explorer"] .ex-tb .addr { background: #1f1f1f; border: 1px solid rgba(255,255,255,.06); border-radius: 4px; }
.win[data-app="explorer"] .ex-tb .btn { background: transparent; border-color: transparent; border-radius: 4px; }
.win[data-app="explorer"] .ex-tb .btn:hover { background: var(--sh-hover); border-color: rgba(255,255,255,.06); }
.win[data-app="explorer"] .body { background: #191919; }
.win[data-app="explorer"] .nav { background: #191919; border-right: 1px solid rgba(255,255,255,.05); }
.win[data-app="explorer"] .fi, .win[data-app="explorer"] .drv { border: 1px solid transparent; border-radius: 4px; }
.win[data-app="explorer"] .fi:hover, .win[data-app="explorer"] .drv:hover { background: rgba(255,255,255,.05); }
.win[data-app="explorer"] .fi.sel, .win[data-app="explorer"] .drv.sel { background: rgba(76,194,255,.16); border-color: rgba(76,194,255,.35); }

/* ── taskbar ───────────────────────────────────────────────────────── */
.taskbar { background: rgba(28,28,28,.84); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-top: 1px solid rgba(255,255,255,.07); }
.taskbar .tray { margin-right: 8px; }
.tb-btn { border-radius: 4px; transition: background-color .1s; }
.tb-btn:hover { background: var(--sh-hover); } .tb-btn.on, .tb-btn:active { background: rgba(255,255,255,.09); }
.tb-btn > :not(.tip) { transition: transform .14s cubic-bezier(.1,.9,.2,1); }
.tb-btn:active > :not(.tip) { transform: scale(.84); }
.tb-btn.run::after { bottom: 2px; width: 6px; height: 3px; margin-left: -3px; border-radius: 2px; background: #9d9d9d; transition: width .2s cubic-bezier(.1,.9,.2,1), margin .2s cubic-bezier(.1,.9,.2,1), background-color .2s; }
.tb-btn.focus::after { width: 16px; margin-left: -8px; background: var(--sh-acc); }
.tb-btn .tip { background: rgba(44,44,44,.97); border: 1px solid var(--sh-edge); box-shadow: 0 8px 16px rgba(0,0,0,.35); border-radius: 4px; }
.taskbar.sh-thumbing .tb-btn .tip { display: none !important; }
.tb-search { height: 32px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.07); color: #c5c5c5; }
.tb-search:hover { background: rgba(255,255,255,.09); }
.tray .ti { border-radius: 4px; } .tray .ti:hover { background: var(--sh-hover); }
.sh-trayg .sh-g { width: 15px; height: 15px; }
.sh-showdesk { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: default; }
.sh-showdesk:hover { box-shadow: inset 1px 0 0 rgba(255,255,255,.35); }

/* hover thumbnails */
.sh-thumbs { position: absolute; bottom: 54px; z-index: 78; display: flex; gap: 4px; padding: 6px; background: var(--sh-acr2); border: 1px solid var(--sh-edge); border-radius: 8px; box-shadow: 0 16px 32px rgba(0,0,0,.42); }
.sh-th { width: 216px; padding: 2px 8px 8px; border-radius: 6px; cursor: default; }
.sh-th:hover { background: var(--sh-hover); }
.sh-th-h, .sh-tv-h { display: flex; align-items: center; gap: 8px; height: 28px; font-size: 12px; color: var(--w-ink); }
.sh-th-h .t, .sh-tv-h .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-th-h .ic, .sh-tv-h .ic { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.sh-th-h .ic svg, .sh-th-h .ic img, .sh-tv-h .ic svg, .sh-tv-h .ic img { width: 16px !important; height: 16px !important; }
.sh-th-x, .sh-tv-x { width: 26px; height: 26px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; visibility: hidden; flex: none; }
.sh-th:hover .sh-th-x, .sh-tv-card:hover .sh-tv-x { visibility: visible; }
.sh-th-x:hover, .sh-tv-x:hover { background: #c42b1c; color: #fff; }
.sh-th-pv { position: relative; width: 200px; height: 112px; overflow: hidden; border-radius: 4px; }

/* ── flyouts: Acrylic ──────────────────────────────────────────────── */
.flyout { background: var(--sh-acr); backdrop-filter: blur(20px) saturate(1.35); -webkit-backdrop-filter: blur(20px) saturate(1.35); border: 1px solid var(--sh-edge); border-radius: 8px; box-shadow: 0 32px 64px rgba(0,0,0,.42), 0 2px 21px rgba(0,0,0,.3); }
/* Start */
.start { width: 642px; padding: 30px 32px 0; }
.start .srch { height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 17px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.07); border-bottom-color: rgba(255,255,255,.18); color: #b5b5b5; }
.start .srch:hover { background: rgba(0,0,0,.36); }
.start h4 { align-items: center; padding: 0 22px; }
.start h4 button { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 4px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: var(--w-ink); font-size: 12px; font-family: inherit; cursor: default; }
.start h4 button:hover { background: rgba(255,255,255,.1); }
.start h4 button .sh-g { width: 10px; height: 10px; }
.start .pins { padding: 0 6px; }
.start .pin { border-radius: 4px; transition: background-color .1s; } .start .pin:hover { background: var(--sh-hover); }
.start .pin .ic { transition: transform .14s cubic-bezier(.1,.9,.2,1); } .start .pin:active .ic { transform: scale(.88); }
.start .rec { padding: 0 6px; } .start .rec .r { border-radius: 4px; }
.start .foot { height: 64px; padding: 0 48px; background: rgba(0,0,0,.2); border-top: 1px solid rgba(255,255,255,.06); border-radius: 0 0 8px 8px; }
.sh-apps { height: 432px; overflow-y: auto; margin: 0 -10px 16px; padding: 0 22px 0 30px; scrollbar-width: thin; }
.sh-letter { font-size: 13px; font-weight: 600; color: var(--w-ink); padding: 14px 10px 6px; }
.sh-app { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 10px; border-radius: 4px; font-size: 13px; cursor: default; }
.sh-app:hover { background: var(--sh-hover); }
.sh-app .ic { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.sh-app .ic svg, .sh-app .ic img { width: 24px !important; height: 24px !important; }
.start.sh-morev .rec { grid-template-columns: 1fr 1fr; min-height: 432px; align-content: start; margin-bottom: 16px; }
/* the power and user menus */
.pmenu { background: var(--sh-acr2); border: 1px solid var(--sh-edge); border-radius: 8px; box-shadow: 0 16px 32px rgba(0,0,0,.4); }
.pmenu .it { border-radius: 4px; height: 32px; align-items: center; padding: 0 12px; }
.pmenu .it:hover { background: var(--sh-hover); }

/* Quick Settings */
.qs { width: 360px; padding: 0; }
.qs .grid { grid-template-columns: repeat(3, 1fr); gap: 14px 12px; padding: 22px 22px 6px; margin: 0; }
.qs .q { display: grid; grid-template-columns: 1fr 30px; grid-template-areas: "i i" "l l"; gap: 7px 0; height: auto; padding: 0; background: none !important; color: var(--w-ink) !important; font-size: 12px; }
.qs .q .i { grid-area: i; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.07); transition: background-color .12s; }
.qs .q:hover .i, .qs .q .sh-qchev:hover { background: rgba(255,255,255,.1); }
.qs .q.sh-split .i { grid-column: 1; border-radius: 6px 0 0 6px; border-right: 0; }
.qs .q .sh-qchev { grid-row: 1; grid-column: 2; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 0 6px 6px 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.07); border-left: 1px solid rgba(0,0,0,.28); }
.qs .q.on .i, .qs .q.on .sh-qchev { background: var(--sh-acc); color: var(--sh-acc-ink); border-color: var(--sh-acc); }
.qs .q.on .sh-qchev { border-left-color: rgba(0,0,0,.18); }
.qs .q.on:hover .i, .qs .q.on .sh-qchev:hover { background: #47b1e8; }
.qs .q .i svg, .qs .q .i img { width: 16px !important; height: 16px !important; }
.qs .q .ql { grid-area: l; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.qs .q .i, .qs .q .ql { font-size: 12px; }
.qs .row { padding: 4px 22px; gap: 14px; }
.qs .row .i { width: 20px; display: inline-flex; justify-content: center; }
.qs .sl { height: 20px; margin: 4px 10px 4px 0; overflow: visible; border-radius: 0; background: linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.42)) center / 100% 4px no-repeat; cursor: default; }
.qs .sl i { position: absolute; left: 0; top: 8px; height: 4px; border-radius: 2px; background: var(--sh-acc); }
.qs .sl i::after { content: ''; position: absolute; right: -10px; top: -8px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle, var(--sh-acc) 0 4.6px, #454545 5.2px); box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.4); transition: background-size .1s; }
.qs .sl:hover i::after { background: radial-gradient(circle, var(--sh-acc) 0 5.8px, #454545 6.4px); }
.qs .foot { margin: 12px 0 0; padding: 0 22px; height: 48px; background: rgba(0,0,0,.2); border-top: 1px solid rgba(255,255,255,.06); border-radius: 0 0 8px 8px; color: var(--w-ink); }
.qs .foot > span[data-act] { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; }
.qs .foot > span[data-act]:hover { background: var(--sh-hover); }
/* the Wi-Fi list: Back to Quick Settings */
.netfly { padding: 10px 8px; }
.sh-back { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; margin-right: 6px; }
.sh-back:hover { background: var(--sh-hover); }
.netfly > div:first-child > b.sh-nethd { margin-right: auto; font-size: 14px; }
.netfly > div:first-child { justify-content: flex-start !important; }
.netfly .nw { border-radius: 4px; }

/* Notification Centre, and the calendar flyout below it */
.flyout.nc { width: 364px; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; display: flex; flex-direction: column; gap: 10px; max-height: 632px; }
.sh-ncp, .sh-cal { background: var(--sh-acr); backdrop-filter: blur(20px) saturate(1.35); -webkit-backdrop-filter: blur(20px) saturate(1.35); border: 1px solid var(--sh-edge); border-radius: 8px; box-shadow: 0 32px 64px rgba(0,0,0,.42); }
.sh-ncp { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 12px 6px; scrollbar-width: thin; }
.sh-nchd { display: flex; align-items: center; gap: 6px; padding: 2px 4px 10px; font-size: 14px; }
.sh-nchd .sp, .sh-calhd .sp, .sh-calnav .sp, .sh-focus .sp { flex: 1; }
.sh-lnk { border: 0; background: rgba(255,255,255,.06); color: var(--w-ink); font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 4px; cursor: default; }
.sh-lnk:hover { background: rgba(255,255,255,.1); }
.sh-dndb { width: 30px; height: 28px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; }
.sh-dndb .sh-g { width: 15px; height: 15px; } .sh-dndb:hover { background: var(--sh-hover); } .sh-dndb.on { color: var(--sh-acc); }
.sh-ncnote { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--w-dim); padding: 0 4px 10px; }
.sh-ncempty { color: var(--w-dim); font-size: 13px; text-align: center; padding: 18px 0 16px; }
.flyout.nc .n { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.05); border-radius: 6px; padding: 10px 40px 12px 12px; margin-bottom: 8px; font-size: 13px; }
.flyout.nc .n b { display: block; font-weight: 600; margin: 6px 0 2px; } .flyout.nc .n > span { color: #c8c8c8; display: block; }
.sh-nh { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--w-dim); }
.sh-nic { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.sh-nic svg, .sh-nic img { width: 16px !important; height: 16px !important; }
.flyout.nc .n .x { top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 4px; display: none; align-items: center; justify-content: center; color: var(--w-ink); }
.flyout.nc .n:hover .x { display: flex; } .flyout.nc .n .x:hover { background: var(--sh-hover); }
.sh-cal { flex: none; padding: 0; font-size: 13px; }
.sh-calhd { display: flex; align-items: center; gap: 8px; padding: 11px 18px; border-bottom: 1px solid rgba(255,255,255,.06); cursor: default; }
.sh-calhd b { font-weight: 600; }
.sh-calnav { display: flex; align-items: center; gap: 4px; padding: 6px 14px 0 18px; }
.sh-ib { width: 30px; height: 28px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; cursor: default; }
.sh-ib:hover { background: var(--sh-hover); }
.sh-grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 12px 6px; text-align: center; }
.sh-wd { font-size: 12px; color: var(--w-ink); height: 28px; line-height: 28px; }
.sh-d { height: 32px; line-height: 30px; margin: 0 auto; width: 32px; border-radius: 50%; border: 1px solid transparent; font-size: 12.5px; }
.sh-d:hover { background: var(--sh-hover); }
.sh-d.out { color: #7a7a7a; }
.sh-d.today { background: var(--sh-acc); color: var(--sh-acc-ink); font-weight: 600; }
.sh-focus { display: flex; align-items: center; gap: 4px; padding: 8px 14px 8px 18px; border-top: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.12); border-radius: 0 0 8px 8px; }
.sh-focus .sh-ft { display: inline-flex; align-items: center; gap: 8px; min-width: 64px; justify-content: center; }
.sh-focus .btn { display: inline-flex; align-items: center; gap: 8px; }

/* ── context menus: Windows 11 ─────────────────────────────────────── */
.ctxmenu { display: flex; flex-wrap: wrap; min-width: 240px; padding: 4px; background: var(--sh-acr2); backdrop-filter: blur(20px) saturate(1.35); -webkit-backdrop-filter: blur(20px) saturate(1.35); border: 1px solid var(--sh-edge); border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,.36); }
.ctxmenu .it { flex: 0 0 100%; display: flex; align-items: center; gap: 12px; height: 30px; padding: 0 12px 0 10px; border-radius: 4px; font-size: 13px; white-space: nowrap; }
.ctxmenu .it:hover { background: rgba(255,255,255,.07); }
.sh-mi { width: 16px; height: 16px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--w-ink); }
.sh-mi .sh-g, .sh-mi svg, .sh-mi img { width: 16px !important; height: 16px !important; }
.ctxmenu.sh-hasrow::before { content: ''; order: -1; flex: 0 0 calc(100% - 8px); height: 1px; margin: 4px 4px; background: rgba(255,255,255,.08); }
.ctxmenu .it.sh-icobtn { order: -2; flex: 0 0 38px; width: 38px; height: 36px; padding: 0; gap: 0; justify-content: center; font-size: 0; }
.ctxmenu .it.sh-icobtn .sh-mi { width: 16px; }
.sh-more { order: 9; flex: 0 0 100%; display: flex; align-items: center; gap: 12px; height: 30px; padding: 0 12px 0 10px; margin-top: 5px; border-radius: 4px; font-size: 13px; position: relative; cursor: default; }
.sh-more::before { content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 1px; background: rgba(255,255,255,.08); }
.sh-more:hover { background: rgba(255,255,255,.07); }
.sh-more kbd { margin-left: auto; font: inherit; font-size: 12px; color: var(--w-dim); padding-left: 24px; }
/* Show more options: the classic menu */
.ctxmenu.sh-classic { display: block; min-width: 260px; padding: 3px 2px; border-radius: 0; background: #2b2b2b; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: #555; box-shadow: 2px 2px 6px rgba(0,0,0,.45); }
.ctxmenu.sh-classic .it { height: 26px; padding: 0 22px 0 34px; font-size: 12px; border-radius: 0; }
.ctxmenu.sh-classic .it:hover { background: #414141; }
/* Win+X: a plain list; the jump list: a little flyout */
.ctxmenu.sh-winx { display: block; min-width: 230px; }
.ctxmenu.sh-winx .it { height: 28px; }
.ctxmenu.sh-jump { min-width: 260px; padding: 6px; }

/* ── banners and dialogs ───────────────────────────────────────────── */
.toast { width: 364px; right: 12px; bottom: 60px; padding: 14px 16px; background: var(--sh-acr2); backdrop-filter: blur(20px) saturate(1.35); -webkit-backdrop-filter: blur(20px) saturate(1.35); border: 1px solid var(--sh-edge); border-radius: 8px; box-shadow: 0 16px 32px rgba(0,0,0,.42); gap: 12px; }
.toast b { font-weight: 600; margin-bottom: 2px; }
.dlg .box { border-radius: 8px; background: #2b2b2b; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 32px 64px rgba(0,0,0,.55), 0 2px 21px rgba(0,0,0,.35); }
.dlg .box .hd { font-size: 20px; padding: 22px 24px 8px; }
.dlg .box .bd { padding: 4px 24px 20px; font-size: 13px; color: #d0d0d0; }
.dlg .box .ft { padding: 22px 24px; background: #202020; border-top: 1px solid rgba(255,255,255,.06); }
.dlg .box .ft .btn { min-width: 120px; height: 32px; }
.dlg.uac .box .hd { font-size: 13px; padding: 12px 24px; }

/* ── snapping ──────────────────────────────────────────────────────── */
.sh-snap { position: absolute; z-index: 79; width: 300px; padding: 10px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; background: var(--sh-acr2); border: 1px solid var(--sh-edge); border-radius: 8px; box-shadow: 0 16px 32px rgba(0,0,0,.45); }
.sh-lay { position: relative; height: 74px; }
.sh-z { position: absolute; box-sizing: border-box; border: 2px solid #2c2c2c; border-radius: 6px; background: rgba(255,255,255,.2); background-clip: padding-box; transition: background-color .1s; cursor: default; }
.sh-z:hover { background-color: var(--sh-acc); }
.sh-snapprev { position: absolute; z-index: 68; pointer-events: none; border-radius: 8px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 16px 32px rgba(0,0,0,.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: left .2s cubic-bezier(.1,.9,.2,1), top .2s cubic-bezier(.1,.9,.2,1), width .2s cubic-bezier(.1,.9,.2,1), height .2s cubic-bezier(.1,.9,.2,1); }

/* ── Task View and Alt+Tab ─────────────────────────────────────────── */
.sh-tv { position: absolute; left: 0; right: 0; top: 0; bottom: 48px; z-index: 66; }
.sh-tv-bg { position: absolute; inset: 0; background: rgba(14,18,28,.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.sh-tv-grid { position: absolute; inset: 30px 50px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 22px 26px; pointer-events: none; }
.sh-tv-card { pointer-events: auto; width: 300px; padding: 4px 6px 8px; border-radius: 8px; border: 2px solid transparent; cursor: default; }
.sh-tv-card:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.sh-tv-pv { position: relative; width: 284px; height: 168px; border-radius: 6px; overflow: hidden; }
.sh-tv-grid.many .sh-tv-card { width: 236px; } .sh-tv-grid.many .sh-tv-pv { width: 220px; height: 130px; }
.sh-tv-none { color: #dcdcdc; font-size: 14px; }
.sh-at { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -60%); }
.sh-at .sh-tv-grid { position: static; inset: auto; flex-wrap: nowrap; padding: 14px; gap: 10px; background: var(--sh-acr2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--sh-edge); border-radius: 8px; box-shadow: 0 32px 64px rgba(0,0,0,.5); }
.sh-at .sh-tv-card { width: 200px; } .sh-at .sh-tv-pv { width: 184px; height: 108px; }
.sh-at .sh-tv-card.sel { border-color: #fff; background: rgba(255,255,255,.08); }

/* ── the lock screen: curtain, then sign-in ────────────────────────── */
.lockscr > .clock, .lockscr > .date { display: none; }
.lockscr .avatar { width: 156px; height: 156px; font-size: 70px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.lockscr .avatar svg, .lockscr .avatar img { width: 66px !important; height: 66px !important; }
.lockscr .name { font-size: 26px; margin: 10px 0 8px; }
.lockscr .pw { position: relative; }
.lockscr input { width: 296px; height: 36px; padding: 0 44px 0 12px; border-radius: 4px; background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.14); border-bottom: 2px solid var(--sh-acc); font-family: inherit; }
.lockscr .go { position: absolute; right: 4px; top: 4px; width: 32px; height: 28px; border-radius: 3px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.lockscr .go:hover { background: rgba(255,255,255,.18); }
.lockscr .hint { margin-top: 4px; }
.sh-opts { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; }
.sh-opts .sh-lnk { background: none; color: #fff; font-size: 13px; padding: 4px 8px; }
.sh-opts .sh-lnk:hover { background: rgba(255,255,255,.08); }
.sh-optrow { display: none; gap: 10px; } .sh-opts.open .sh-optrow { display: flex; }
.sh-opt { width: 44px; height: 44px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.18); }
.sh-opt .sh-g { width: 18px; height: 18px; } .sh-opt.on { border-color: #fff; background: rgba(255,255,255,.1); } .sh-opt:hover { background: rgba(255,255,255,.12); }
.sh-curtain { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; color: #fff; background: #0a1a3a url(wall-default.svg?v=2) center / cover no-repeat; cursor: default; }
.sh-curtain::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,0) 46%, rgba(0,0,0,.18)); }
.sh-ct-time { position: relative; margin-top: 70px; font-family: 'Segoe UI Variable Display', 'Segoe UI', sans-serif; font-size: 124px; font-weight: 600; letter-spacing: -.02em; line-height: 1; text-shadow: 0 2px 18px rgba(0,0,0,.22); }
.sh-ct-date { position: relative; margin-top: 10px; font-size: 22px; font-weight: 500; text-shadow: 0 1px 10px rgba(0,0,0,.25); }
.sh-ct-foot { position: absolute; right: 26px; bottom: 22px; display: flex; gap: 18px; align-items: center; }
.sh-ct-foot svg, .sh-ct-foot img { width: 18px !important; height: 18px !important; }

/* ── booting: the dots that chase each other ───────────────────────── */
.boot .spin.sh-dots { width: 42px; height: 42px; border: 0; border-radius: 0; position: relative; animation: none; }
.boot .spin.sh-dots i { position: absolute; inset: 0; animation: sh-orbit 5.4s infinite; opacity: 0; }
.boot .spin.sh-dots i::before { content: ''; position: absolute; left: 50%; top: 0; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #fff; }
.boot .spin.sh-dots i:nth-child(2) { animation-delay: .24s; } .boot .spin.sh-dots i:nth-child(3) { animation-delay: .48s; } .boot .spin.sh-dots i:nth-child(4) { animation-delay: .72s; } .boot .spin.sh-dots i:nth-child(5) { animation-delay: .96s; }
@keyframes sh-orbit {
    0% { transform: rotate(225deg); opacity: 1; animation-timing-function: ease-out; }
    7% { transform: rotate(345deg); animation-timing-function: linear; }
    30% { transform: rotate(455deg); animation-timing-function: ease-in-out; }
    39% { transform: rotate(690deg); animation-timing-function: linear; }
    70% { transform: rotate(815deg); opacity: 1; animation-timing-function: ease-out; }
    75% { transform: rotate(945deg); animation-timing-function: ease-out; }
    76%, 100% { transform: rotate(945deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sh-snapprev, .tb-btn > :not(.tip), .tb-btn.run::after, .start .pin .ic, .wc span, .qs .q .i { transition: none !important; }
    .tb-btn:active > :not(.tip), .start .pin:active .ic { transform: none; }
}

/* 2026-10-30 (user: "why is the Windows menu so wide"): a wrapping flex container takes the width of all its items
   on one line, so the modern menu had no limit; Windows 11 menus are about 280px. The classic and Win+X menus keep
   their own block layout and widths. */
.ctxmenu { width: 280px; max-width: calc(100% - 16px); box-sizing: border-box; }
.ctxmenu.sh-classic, .ctxmenu.sh-winx { width: auto; }