/* ThoccOS shell chrome. Every selector is scoped to os- classes (plus .app-setup for the shell-owned wizard). */
html:has(.os-root), html:has(.os-root) body { overflow: hidden; overscroll-behavior: none; height: 100%; }

.os-root {
  --os-tb: 34px;
  --os-sat: env(safe-area-inset-top, 0px);
  --os-sab: env(safe-area-inset-bottom, 0px);
  --os-sal: env(safe-area-inset-left, 0px);
  --os-sar: env(safe-area-inset-right, 0px);
  --os-font: Tahoma, Verdana, "Segoe UI", sans-serif;
  --os-title-font: "Trebuchet MS", Tahoma, Verdana, sans-serif;
  --os-sel: #316AC5;
  --os-gcol: 300px;   /* gadget column (gadget 280 + margins) */
  --os-pbh: 46px;     /* phone Thoccy bar */
  --os-swc: #7B4FC4; --os-swc2: #7B4FC4;
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh;
  overflow: hidden; color-scheme: light; color: #000; background: #2C7FE6;
  font: 12px/1.3 var(--os-font);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased; text-align: left;
}
.os-root *, .os-root *::before, .os-root *::after { box-sizing: border-box; }
.os-root [hidden] { display: none !important; }
.os-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.os-ico { display: block; width: 48px; height: 48px; flex: none; overflow: visible; }

/* wallpaper */
.os-wall { position: absolute; inset: 0; transform: translateZ(0); pointer-events: none; }
.os-wall-svg { display: block; width: 100%; height: 100%; }

/* work area: everything above the taskbar */
.os-work { position: absolute; top: var(--os-sat); left: var(--os-sal); right: var(--os-sar); bottom: calc(var(--os-tb) + var(--os-sab)); }

/* windows: the work area minus the gadget column / pill strip / phone bar */
.os-wins { position: absolute; top: var(--os-sat); left: var(--os-sal); right: var(--os-sar); bottom: calc(var(--os-tb) + var(--os-sab)); pointer-events: none; }
.os-wins > .os-win { pointer-events: auto; }
.os-gm-dock .os-wins { right: calc(var(--os-sar) + var(--os-gcol)); }
.os-gm-top .os-wins { top: calc(var(--os-sat) + 46px); }
.os-gm-phone .os-wins { bottom: calc(var(--os-tb) + var(--os-sab) + var(--os-pbh)); }

/* desktop icons */
.os-icons {
  position: absolute; top: 8px; left: 6px; bottom: 6px; right: 6px;
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 76px); grid-auto-columns: 84px;
  gap: 0 2px; align-content: start; justify-content: start; pointer-events: none;
}
.os-dicon {
  pointer-events: auto; appearance: none; -webkit-appearance: none; margin: 0; border: 0; background: none;
  width: 84px; height: 76px; padding: 1px 1px 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
  color: #fff; font: 12px/1.15 var(--os-font); cursor: default; outline: none; border-radius: 2px;
}
.os-dicon-i { position: relative; width: 48px; height: 48px; flex: none; transition: transform .14s cubic-bezier(.2,.8,.3,1); }
@media (hover: hover) {
  .os-dicon:hover .os-dicon-i { transform: translateY(-3px) scale(1.04); }
  .os-dicon:hover .os-dicon-i .os-ico { filter: drop-shadow(1px 5px 3px rgba(0, 0, 0, .38)); }
  .os-dicon:active .os-dicon-i { transform: translateY(0) scale(.97); transition-duration: .05s; }
  .os-dicon.os-sel:hover .os-dicon-i .os-ico { filter: url(#os-sel-f) drop-shadow(1px 5px 3px rgba(0, 0, 0, .38)); }
}
.os-dicon-i .os-ico { filter: drop-shadow(1px 2px 1.5px rgba(0, 0, 0, .35)); }
.os-dicon-l {
  max-width: 82px; padding: 0 3px 1px; text-align: center; overflow-wrap: anywhere;
  text-shadow: 1px 1px 1px #000, 0 0 3px rgba(0, 0, 0, .55);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.os-dicon.os-sel .os-dicon-i .os-ico { filter: url(#os-sel-f) drop-shadow(1px 2px 1.5px rgba(0, 0, 0, .35)); }
.os-dicon.os-sel .os-dicon-l { background: var(--os-sel); text-shadow: none; -webkit-line-clamp: 4; }
.os-dicon.os-sel:focus-visible .os-dicon-l { outline: 1px dotted #FFE79A; outline-offset: -1px; }

/* badges */
.os-badge {
  position: absolute; top: -5px; right: -9px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; border: 1.5px solid #fff; background: linear-gradient(180deg, #FF7357, #D8250E);
  color: #fff; font: bold 11px/16px var(--os-font); text-align: center; text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45); pointer-events: none;
}

/* ---------------- windows ---------------- */
.os-win {
  position: absolute; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  padding: 0 3px 3px; border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, #0A49C9 0, #1366EE 1px, #0B5AE4 3px, #0B5AE4 calc(100% - 3px), #0A44BC calc(100% - 1px), #062E8C 100%);
  border: 1px solid #0831A6; border-top: 0;
  box-shadow: 2px 4px 14px rgba(0, 20, 70, .38), 0 0 0 1px rgba(0, 0, 0, .06);
  transform-origin: 50% 100%;
}
.os-win.os-dragging { will-change: left, top; }
.os-wins > .os-win.os-leaving { pointer-events: none; }
.os-win.os-dragging .os-client { pointer-events: none; }
.os-titlebar {
  height: 30px; flex: none; display: flex; align-items: center; gap: 5px; padding: 0 5px 1px 6px; margin: 0 -4px;
  border-radius: 8px 8px 0 0; border: 1px solid #0831A6; border-bottom: 0;
  background: linear-gradient(180deg, #5BA6FF 0%, #1C7BFA 6%, #0A6AF5 12%, #0662F0 28%, #0458E6 52%, #0350D8 82%, #0452DB 90%, #0960E8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 1px 0 0 rgba(255, 255, 255, .22), inset -1px 0 0 rgba(0, 0, 60, .2);
  color: #fff; touch-action: none; cursor: default;
}
.os-ticon { width: 16px; height: 16px; margin-left: 1px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .3)); }
.os-title {
  flex: 1; min-width: 0; padding-left: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: bold 13px/1 var(--os-title-font); letter-spacing: .1px;
  text-shadow: 1px 1px 0 #0A1A7A, 0 0 2px rgba(0, 0, 40, .4);
}
.os-tbtns { display: flex; gap: 2px; flex: none; }
.os-tb {
  appearance: none; -webkit-appearance: none; margin: 0; width: 21px; height: 21px; padding: 0; flex: none;
  display: grid; place-items: center; border: 1px solid #fff; border-radius: 3px; cursor: default; outline: none;
  background: radial-gradient(120% 120% at 28% 22%, #8CC0FF 0%, #4790FA 30%, #1F68ED 62%, #1653D6 100%);
  box-shadow: inset -1px -1px 1px rgba(0, 0, 60, .3), inset 1px 1px 1px rgba(255, 255, 255, .45), 0 0 0 .5px rgba(0, 20, 90, .4);
}
.os-tb svg { width: 13px; height: 13px; display: block; }
.os-tb:hover { background: radial-gradient(120% 120% at 28% 22%, #A8D0FF 0%, #61A2FF 30%, #2F7BF8 62%, #1B5EE6 100%); }
.os-tb:active { background: radial-gradient(120% 120% at 70% 75%, #4A8AF0 0%, #1E5CD8 55%, #0F43B5 100%); box-shadow: inset 1px 1px 2px rgba(0, 0, 40, .5); }
.os-tb-close { background: radial-gradient(120% 120% at 28% 22%, #F8B496 0%, #EC7A52 30%, #DE5428 62%, #C6401A 100%); }
.os-tb-close:hover { background: radial-gradient(120% 120% at 28% 22%, #FFC9AE 0%, #F58C63 30%, #E9633A 62%, #D04A20 100%); }
.os-tb-close:active { background: radial-gradient(120% 120% at 70% 75%, #D45A30 0%, #B83D17 60%, #93300F 100%); }
.os-tb-max .os-g-res { display: none; }
.os-max .os-tb-max .os-g-max { display: none; }
.os-max .os-tb-max .os-g-res { display: block; }
.os-tb:focus-visible { outline: 1px dotted #fff; outline-offset: 1px; }

.os-client { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0, 25, 100, .35); }
.os-app {
  position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  color: #1F1F1F; background: #fff; text-align: left; -webkit-user-select: text; user-select: text; cursor: auto;
}
.os-grip {
  position: absolute; right: 3px; bottom: 3px; width: 14px; height: 14px; cursor: nwse-resize; z-index: 5; touch-action: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cg fill='%23fff'%3E%3Crect x='11' y='3' width='2' height='2'/%3E%3Crect x='7' y='7' width='2' height='2'/%3E%3Crect x='11' y='7' width='2' height='2'/%3E%3Crect x='3' y='11' width='2' height='2'/%3E%3Crect x='7' y='11' width='2' height='2'/%3E%3Crect x='11' y='11' width='2' height='2'/%3E%3C/g%3E%3Cg fill='%23A19D90'%3E%3Crect x='10' y='2' width='2' height='2'/%3E%3Crect x='6' y='6' width='2' height='2'/%3E%3Crect x='10' y='6' width='2' height='2'/%3E%3Crect x='2' y='10' width='2' height='2'/%3E%3Crect x='6' y='10' width='2' height='2'/%3E%3Crect x='10' y='10' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
}
.os-win.os-max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
.os-win.os-max .os-titlebar { border-radius: 0; }
.os-win.os-max .os-grip { display: none; }

/* inactive windows */
.os-win:not(.os-active) {
  background: linear-gradient(90deg, #7D94D8 0, #9FB3EA 1px, #8EA5E3 3px, #8EA5E3 calc(100% - 3px), #7C93D7 calc(100% - 1px), #6B83CC 100%);
  border-color: #7189D2;
}
.os-win:not(.os-active) .os-titlebar {
  background: linear-gradient(180deg, #B8CDF4 0%, #9AB4EE 8%, #7A96DF 30%, #7591DD 60%, #7490DC 88%, #829DE2 100%);
  border-color: #7189D2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.os-win:not(.os-active) .os-title { color: #DCE6FA; text-shadow: none; }
.os-win:not(.os-active) .os-tb { filter: saturate(.45) brightness(1.12); opacity: .92; }
.os-win:not(.os-active) .os-ticon { opacity: .8; }

/* ---------------- taskbar ---------------- */
.os-taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1000;
  height: calc(var(--os-tb) + var(--os-sab)); padding: 0 var(--os-sar) var(--os-sab) var(--os-sal);
  display: flex; align-items: stretch;
  background: linear-gradient(180deg, #2E5FC8 0%, #5797F0 4%, #3A7AE6 9%, #2763DB 20%, #2560D8 55%, #2560D8 80%, #1E52C4 94%, #183FA0 100%);
  border-top: 1px solid #0C2E86;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .12);
}
.os-start {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; height: var(--os-tb); display: flex; align-items: center; gap: 4px;
  padding: 0 22px 1px 9px; border: 0; border-radius: 0 14px 14px 0; cursor: default; outline: none;
  background: linear-gradient(180deg, #3A9A3A 0%, #6FD86F 5%, #4CBF4C 12%, #3AAB3A 30%, #36A336 55%, #2F952F 80%, #2C8B2C 90%, #22722A 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset -3px 0 4px -1px rgba(0, 0, 0, .3), 2px 0 4px rgba(0, 0, 0, .35);
  color: #fff; font: italic bold 19px/1 var(--os-title-font); letter-spacing: .3px;
  text-shadow: 1px 1px 2px rgba(0, 40, 0, .7);
}
.os-start span { margin-top: -1px; }
.os-start-logo { width: 25px; height: 25px; margin-right: 1px; filter: drop-shadow(1px 1px 1px rgba(0, 30, 0, .55)); transform: rotate(-6deg); }
.os-start:hover { filter: brightness(1.08); }
.os-start.os-pressed, .os-start:active {
  background: linear-gradient(180deg, #1F6E1F 0%, #2E8C2E 10%, #2E8F2E 60%, #2A852A 100%);
  box-shadow: inset 1px 2px 4px rgba(0, 0, 0, .5);
}
.os-start:focus-visible span { outline: 1px dotted #fff; outline-offset: 2px; }

.os-tasks { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; padding: 0 6px 0 10px; overflow: hidden; }
.os-task {
  appearance: none; -webkit-appearance: none; margin: 0; position: relative; flex: 0 1 164px; min-width: 38px; height: 26px;
  display: flex; align-items: center; gap: 5px; padding: 0 8px 0 7px; border: 0; border-radius: 3px; cursor: default; outline: none;
  color: #fff; font: 12px/1 var(--os-font); text-align: left;
  background: linear-gradient(180deg, #73B1FF 0%, #4C93F6 8%, #3C86F1 40%, #3880EE 70%, #3375E2 92%, #2A63CB 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 50, .25), 1px 1px 1px rgba(0, 0, 50, .35);
  text-shadow: 0 1px 0 rgba(0, 0, 60, .3);
}
.os-task .os-ico { width: 16px; height: 16px; }
.os-task-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-task:hover { background: linear-gradient(180deg, #8AC0FF 0%, #5FA1FA 8%, #4D93F5 40%, #498DF2 70%, #3F82E8 92%, #326FD2 100%); }
.os-task.os-on {
  background: linear-gradient(180deg, #1A4AAE 0%, #1E53BA 15%, #1F56BE 85%, #2259C2 100%);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 30, .55), inset -1px -1px 0 rgba(255, 255, 255, .12);
}
.os-task .os-badge { position: static; margin-left: 2px; flex: none; min-width: 17px; height: 17px; font-size: 10px; line-height: 14px; padding: 0 4px; }
.os-task.os-flash { animation: os-flash 1.1s linear 7 forwards; }
@keyframes os-flash {
  0%, 49.9% { background: linear-gradient(180deg, #73B1FF 0%, #4C93F6 8%, #3C86F1 40%, #3880EE 70%, #3375E2 92%, #2A63CB 100%); }
  50%, 100% { background: linear-gradient(180deg, #FFD08A 0%, #FBA53B 10%, #F59220 50%, #EE8414 85%, #D96E08 100%); }
}
.os-task:focus-visible .os-task-t { outline: 1px dotted #fff; }
.os-dicon.os-flash .os-dicon-l { animation: os-dflash 1.1s linear 7 forwards; }
@keyframes os-dflash { 0%, 49.9% { background: transparent; } 50%, 100% { background: #F08A12; text-shadow: none; } }

.os-tray {
  flex: none; display: flex; align-items: center; gap: 3px; padding: 0 10px 0 9px; margin-left: 2px;
  background: linear-gradient(180deg, #0B5BC0 0%, #1AA3EE 5%, #18B0F1 10%, #149EEC 18%, #1290E8 55%, #0F88E3 85%, #0C7BD6 95%, #0B66BC 100%);
  border-left: 1px solid #0B2E6C; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .4), -1px 0 2px rgba(0, 0, 0, .2);
}
.os-tray-b {
  appearance: none; -webkit-appearance: none; margin: 0; width: 24px; height: 24px; padding: 2px; border: 0; background: none;
  display: grid; place-items: center; border-radius: 3px; cursor: default; outline: none;
}
.os-tray-b:hover { background: rgba(255, 255, 255, .16); }
.os-tray-b:focus-visible { outline: 1px dotted #fff; }
.os-tray-b .os-ico { width: 19px; height: 19px; }
.os-tray-thoccy .os-ico { width: 20px; height: 20px; filter: drop-shadow(0 1px 1px rgba(0, 20, 60, .5)); transform-origin: 50% 90%; }
.os-tray-thoccy.os-off .os-ico { filter: grayscale(1) brightness(.85) drop-shadow(0 1px 1px rgba(0, 20, 60, .4)); opacity: .55; }
.os-tray-vol .os-ico { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(0, 20, 60, .45)); }
.os-tray-vol.os-muted::after { content: ""; position: absolute; width: 14px; height: 2px; background: #E8341C; transform: rotate(-45deg); box-shadow: 0 0 0 1px #fff; }
.os-tray-vol { position: relative; }
.os-clock { color: #fff; font: 12px/1 var(--os-font); white-space: nowrap; padding: 0 0 0 5px; text-shadow: 0 1px 0 rgba(0, 20, 70, .4); cursor: default; }

/* ---------------- start menu ---------------- */
.os-sm {
  position: absolute; z-index: 1300; left: var(--os-sal); bottom: calc(var(--os-tb) + var(--os-sab));
  width: 390px; max-width: 100%; max-height: calc(100% - var(--os-tb) - var(--os-sab) - var(--os-sat) - 4px);
  display: flex; flex-direction: column; border-radius: 8px 8px 0 0; background: #2668D6;
  border: 1px solid #0B48B8; box-shadow: 4px 4px 10px rgba(0, 0, 40, .45); transform-origin: 0 100%;
}
.os-sm-head {
  flex: none; height: 60px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, #1C6DD6 0%, #0F62CC 10%, #1466D0 30%, #1D6FD7 50%, #2A7FE0 70%, #3388E2 85%, #3A8DE2 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  position: relative;
}
.os-sm-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, rgba(255, 160, 60, 0), #F7A24C 30%, #F7A24C 70%, rgba(255, 160, 60, 0)); }
.os-sm-av { width: 44px; height: 44px; border-radius: 4px; border: 2px solid #fff; overflow: hidden; box-shadow: 1px 1px 3px rgba(0, 0, 40, .5); background: #fff; flex: none; }
.os-sm-av .os-ico { width: 40px; height: 40px; }
.os-sm-user { color: #fff; font: bold 16px/1 var(--os-title-font); text-shadow: 1px 1px 2px rgba(0, 0, 40, .6); }
.os-sm-body { flex: 1; min-height: 0; display: flex; margin-top: 2px; border-left: 1px solid #fff; }
.os-sm-left { flex: 1 1 56%; min-width: 0; background: #fff; padding: 6px 0 6px; overflow-y: auto; }
.os-sm-right { flex: 1 1 44%; min-width: 0; background: #D3E5FA; border-left: 1px solid #95BDEE; padding: 6px 0; overflow-y: auto; box-shadow: inset 1px 0 0 #fff; }
.os-sm-item {
  appearance: none; -webkit-appearance: none; margin: 0; width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 4px 9px; border: 0; background: none; color: #000; font: 12px/1.2 var(--os-font); text-align: left;
  cursor: default; outline: none; position: relative;
}
.os-sm-left .os-sm-item { min-height: 40px; }
.os-sm-left .os-sm-item .os-ico { width: 32px; height: 32px; }
.os-sm-name { flex: 1; min-width: 0; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-sm-item .os-badge { position: static; flex: none; min-width: 18px; height: 18px; line-height: 15px; font-size: 10px; }
.os-sm-r { min-height: 34px; color: #0A246A; }
.os-sm-r .os-ico { width: 24px; height: 24px; }
.os-sm-r > span:not(.os-chk):not(.os-sm-arrow) { flex: 1; min-width: 0; font-weight: bold; }
.os-sm-r small { display: block; font-weight: normal; font-size: 11px; color: #4D6185; margin-top: 1px; }
.os-sm-item:hover, .os-sm-item:focus-visible, .os-sm-sw[aria-expanded="true"] { background: var(--os-sel); color: #fff; }
.os-sm-item:hover small, .os-sm-item:focus-visible small, .os-sm-sw[aria-expanded="true"] small { color: #DCE8FF; }
.os-chk { flex: none; width: 13px; height: 13px; border: 1px solid #1C5180; background: linear-gradient(135deg, #DCDCD7, #fff); border-radius: 1px; position: relative; }
[aria-checked="true"] > .os-chk::after { content: ""; position: absolute; left: 3.5px; top: .5px; width: 4px; height: 8px; border: solid #21A121; border-width: 0 2px 2px 0; transform: rotate(40deg); }
.os-sm-arrow { flex: none; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.os-sm-sep { height: 1px; margin: 5px 10px; background: linear-gradient(90deg, rgba(149, 189, 238, 0), #95BDEE 20%, #95BDEE 80%, rgba(149, 189, 238, 0)); }
.os-sm-sep2 { height: 1px; margin: 4px 10px; background: linear-gradient(90deg, rgba(0, 0, 0, 0), #C4C4C4 25%, #C4C4C4 75%, rgba(0, 0, 0, 0)); }
.os-sm-foot {
  flex: none; height: 40px; display: flex; align-items: center; justify-content: flex-end; padding: 0 12px;
  background: linear-gradient(180deg, #4A8DE4 0%, #3B83E0 8%, #3A82DE 40%, #2F76D4 80%, #2A6CC8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.os-sm-met { display: flex; align-items: center; gap: 6px; color: #fff; font: 12px/1 var(--os-font); text-shadow: 0 1px 1px rgba(0, 0, 40, .5); }
.os-sm-met .os-ico { width: 20px; height: 20px; }
.os-sm-fly {
  position: absolute; left: calc(100% - 4px); top: 0; width: 170px; padding: 2px; z-index: 2;
  background: #fff; border: 1px solid #8C8C8C; box-shadow: 2px 2px 4px rgba(0, 0, 0, .35);
}

/* generic XP menu item (start flyout + tray menu) */
.os-mi {
  appearance: none; -webkit-appearance: none; margin: 0; width: 100%; display: flex; align-items: center; min-height: 22px;
  padding: 3px 10px 3px 24px; border: 0; background: none; color: #000; font: 12px/1.2 var(--os-font); text-align: left;
  cursor: default; outline: none; position: relative;
}
.os-mi:hover, .os-mi:focus-visible { background: var(--os-sel); color: #fff; }
.os-mi-radio[aria-checked="true"]::before { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: currentColor; }
.os-mi-t { flex: 1; }

/* ---------------- tray menu ---------------- */
.os-tm {
  position: absolute; z-index: 1300; right: calc(4px + var(--os-sar)); bottom: calc(var(--os-tb) + var(--os-sab) + 2px);
  width: 232px; max-width: calc(100% - 8px); max-height: calc(100% - var(--os-tb) - var(--os-sab) - var(--os-sat) - 6px); overflow-y: auto;
  padding: 2px; background: #fff; border: 1px solid #8C8C8C; box-shadow: 2px 3px 6px rgba(0, 0, 0, .38);
}
.os-tm-head {
  display: flex; align-items: center; gap: 7px; padding: 6px 6px 6px 7px; margin-bottom: 2px; color: #fff;
  background: linear-gradient(90deg, #0A3FA8, #2F7FE6); font: bold 12px/1 var(--os-font); text-shadow: 0 1px 0 rgba(0, 0, 40, .4);
}
.os-tm-ico { width: 22px; height: 22px; }
.os-tm-head b { flex: 1; font-size: 13px; font-family: var(--os-title-font); }
.os-pw {
  appearance: none; -webkit-appearance: none; margin: 0; display: flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px 0 3px;
  border: 1px solid #0B2E6C; border-radius: 10px; background: linear-gradient(180deg, #E9F9E6, #9BDB8F); color: #134A10;
  font: bold 11px/1 var(--os-font); cursor: default; outline: none; text-shadow: none; min-width: 50px;
}
.os-pw-k { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #A8FF9C, #2FAE22 60%, #1C7A14); border: 1px solid #145E0E; }
.os-pw[aria-checked="false"] { background: linear-gradient(180deg, #F3F3F3, #C9C9C9); color: #555; flex-direction: row-reverse; padding: 0 3px 0 7px; }
.os-pw[aria-checked="false"] .os-pw-k { background: radial-gradient(circle at 35% 30%, #fff, #A9A9A9 60%, #7C7C7C); border-color: #666; }
.os-pw:focus-visible { outline: 1px dotted #fff; outline-offset: 2px; }
.os-tm-sep { height: 1px; margin: 3px 2px; background: #C5C2B2; }
.os-tm-vol { display: flex; align-items: center; gap: 8px; padding: 6px 10px 4px 24px; font: 12px var(--os-font); color: #000; }
.os-tm-vol input { flex: 1; min-width: 0; }
.os-tm-keys { padding: 2px 10px 5px 24px; color: #6D6D6D; font: 11px var(--os-font); }
.os-tm-get { font-weight: bold; }

/* XP-ish range slider */
.os-tm-vol input[type="range"], .os-vp-r { -webkit-appearance: none; appearance: none; height: 20px; background: transparent; margin: 0; cursor: default; }
.os-tm-vol input[type="range"]::-webkit-slider-runnable-track, .os-vp-r::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: #ECEBE4; border: 1px solid #9D9C99; box-shadow: inset 1px 1px 0 #C9C7BA; }
.os-tm-vol input[type="range"]::-webkit-slider-thumb, .os-vp-r::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 19px; margin-top: -8px; border: 1px solid #1C5180; border-radius: 2px 2px 5px 5px;
  background: linear-gradient(180deg, #fff, #E6EEFC 50%, #C5D6F6); box-shadow: inset 0 -2px 0 #21A121;
}
.os-tm-vol input[type="range"]::-moz-range-track, .os-vp-r::-moz-range-track { height: 4px; border-radius: 2px; background: #ECEBE4; border: 1px solid #9D9C99; }
.os-tm-vol input[type="range"]::-moz-range-thumb, .os-vp-r::-moz-range-thumb { width: 10px; height: 18px; border: 1px solid #1C5180; border-radius: 2px 2px 5px 5px; background: linear-gradient(180deg, #fff, #C5D6F6); box-shadow: inset 0 -2px 0 #21A121; }
.os-tm-vol input[type="range"]:focus-visible, .os-vp-r:focus-visible { outline: 1px dotted #000; }

/* volume popup */
.os-vp {
  position: absolute; z-index: 1300; right: calc(56px + var(--os-sar)); bottom: calc(var(--os-tb) + var(--os-sab) + 2px);
  width: 82px; padding: 8px 8px 9px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: #ECE9D8; border: 1px solid #8C8C8C; box-shadow: 2px 3px 6px rgba(0, 0, 0, .38); font: 12px var(--os-font);
}
.os-vp-t { font-weight: bold; }
.os-vp .os-vp-r { writing-mode: vertical-lr; direction: rtl; width: 22px; height: 104px; }
.os-vp .os-vp-r::-webkit-slider-runnable-track { width: 4px; height: auto; }
.os-vp .os-vp-r::-webkit-slider-thumb { width: 19px; height: 11px; margin-top: 0; margin-left: -8px; border-radius: 2px 5px 5px 2px; box-shadow: inset -2px 0 0 #21A121; }
.os-vp-m { display: flex; align-items: center; gap: 4px; }
.os-vp-m input { margin: 0; accent-color: #2160D3; }

/* ---------------- balloons ---------------- */
.os-balloon {
  --os-tx: 200px;
  position: absolute; z-index: 1200; right: calc(8px + var(--os-sar)); bottom: calc(var(--os-tb) + var(--os-sab) + 17px);
  width: 312px; max-width: calc(100% - 16px); padding: 8px 9px 10px 10px;
  background: #FFFFE1; color: #000; border: 1px solid #000; border-radius: 8px;
  box-shadow: 3px 4px 7px rgba(0, 0, 0, .3); font: 12px/1.35 var(--os-font); cursor: default;
  transition: opacity .2s;
}
.os-balloon.os-out { opacity: 0; }
.os-balloon::before, .os-balloon::after { content: ""; position: absolute; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.os-balloon::before { left: calc(var(--os-tx) - 18px); bottom: -17px; width: 18px; height: 17px; background: #000; }
.os-balloon::after { left: calc(var(--os-tx) - 17px); bottom: -15px; width: 16px; height: 16px; background: #FFFFE1; }
.os-balloon.os-clickable { cursor: pointer; }
.os-bl-head { display: flex; align-items: center; gap: 6px; padding-right: 2px; }
.os-bl-ico { width: 18px; height: 18px; }
.os-bl-title { flex: 1; min-width: 0; font-weight: bold; }
.os-bl-mark { font-weight: bold; }
.os-bl-ok { color: #138A16; }
.os-bl-fail { color: #C0300F; }
.os-bl-x {
  appearance: none; -webkit-appearance: none; margin: -2px -3px 0 0; width: 16px; height: 16px; padding: 1px; flex: none;
  display: grid; place-items: center; border: 1px solid transparent; border-radius: 3px; background: none; cursor: default; outline: none;
}
.os-bl-x svg { width: 10px; height: 10px; }
.os-bl-x svg path { stroke: #444; stroke-width: 1.8; }
.os-bl-x:hover { background: linear-gradient(180deg, #F8B496, #DE5428); border-color: #fff; box-shadow: 0 0 0 1px #A9401C; }
.os-bl-x:hover svg path { stroke: #fff; }
.os-bl-body { margin: 5px 0 0 24px; }
.os-bl-extra { margin-top: 6px; }
.os-bl-action { margin-top: 5px; color: #0B4BD0; text-decoration: underline; font-weight: bold; }
.os-balloon.os-clickable:hover .os-bl-action { color: #E65C00; }

/* ---------------- XP button ---------------- */
.os-btn {
  appearance: none; -webkit-appearance: none; margin: 0; min-width: 75px; height: 23px; padding: 0 10px;
  border: 1px solid #003C74; border-radius: 3px; color: #000; font: 12px/1 var(--os-font); cursor: default; outline: none;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F5F1 45%, #ECEBE5 85%, #D6D0C5 100%);
  box-shadow: inset -1px -1px 0 rgba(170, 160, 140, .35), inset 1px 1px 0 #fff;
  white-space: nowrap;
}
.os-btn:hover:not(:disabled) { box-shadow: inset 0 0 0 1px #FFF0CF, inset 0 -2px 0 #F8B330, inset 0 2px 0 #FFE59C, inset 2px 0 0 #FDD889, inset -2px 0 0 #FDD889; }
.os-btn:active:not(:disabled) { background: linear-gradient(180deg, #E3E2DA, #EFEEE8 60%, #F7F7F3); box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .15); }
.os-btn:focus-visible, .os-btn.os-btn-def { box-shadow: inset 0 0 0 1px #CEE7FF, inset 0 -2px 0 #6982EE, inset 0 2px 0 #CEE7FF, inset 2px 0 0 #98B8F6, inset -2px 0 0 #98B8F6; }
.os-btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.os-btn:disabled { color: #A19F92; border-color: #C9C7BA; background: #F5F4EA; box-shadow: none; }

/* ---------------- turn off computer ---------------- */
.os-shut {
  position: absolute; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px;
  background: rgba(30, 30, 40, .28); -webkit-backdrop-filter: grayscale(1) brightness(.92); backdrop-filter: grayscale(1) brightness(.92);
}
.os-shut-box { width: 314px; max-width: 100%; border: 1px solid #0B2470; border-radius: 6px; overflow: hidden; box-shadow: 4px 6px 18px rgba(0, 0, 0, .5); }
.os-shut-top {
  height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 14px;
  background: linear-gradient(180deg, #0E3AA5, #08298A); color: #fff; font: 15px/1 var(--os-title-font); text-shadow: 1px 1px 0 rgba(0, 0, 0, .3);
}
.os-shut-logo { width: 28px; height: 28px; }
.os-shut-mid {
  display: flex; justify-content: space-around; padding: 22px 10px 18px;
  background: linear-gradient(180deg, #5B83E0 0%, #87A7EC 30%, #7898E8 100%); border-top: 2px solid #9AB6F2;
}
.os-shut-b {
  appearance: none; -webkit-appearance: none; margin: 0; width: 82px; padding: 4px 2px; border: 0; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 7px; color: #fff; font: 12px/1.1 var(--os-font);
  text-shadow: 1px 1px 1px rgba(0, 0, 40, .55); cursor: default; outline: none;
}
.os-shut-c { width: 34px; height: 34px; border-radius: 6px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .9); box-shadow: 1px 2px 3px rgba(0, 0, 40, .4), inset 0 1px 1px rgba(255, 255, 255, .5); }
.os-shut-c svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .25)); }
.os-c-stand { background: radial-gradient(120% 120% at 30% 25%, #FFE58A, #F0B21E 55%, #C78300); }
.os-c-off { background: radial-gradient(120% 120% at 30% 25%, #FFB08F, #E85B2C 55%, #B8360F); }
.os-c-re { background: radial-gradient(120% 120% at 30% 25%, #A4F09A, #3DB536 55%, #1F7F1B); }
.os-shut-b:hover .os-shut-c { filter: brightness(1.12); box-shadow: 0 0 0 2px rgba(255, 255, 255, .55), 1px 2px 3px rgba(0, 0, 40, .4); }
.os-shut-b:focus-visible span:last-child { outline: 1px dotted #fff; outline-offset: 2px; }
.os-shut-bot { display: flex; justify-content: flex-end; padding: 9px 12px; background: linear-gradient(180deg, #0B2F96, #08268A); }

.os-black { position: absolute; inset: 0; z-index: 3000; background: #000; display: grid; place-items: center; cursor: default; padding: 24px; }
.os-black-off, .os-black-boot { display: none; }
.os-black[data-mode="off"] .os-black-off { display: block; color: #F59A1D; font: bold 22px/1.3 Tahoma, Verdana, Arial, sans-serif; text-align: center; }
.os-black[data-mode="restart"] .os-black-boot { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.os-boot-logo { width: 72px; height: 72px; }
.os-boot-name { color: #fff; font: bold italic 30px/1 var(--os-title-font); }
.os-boot-name i { color: #F59A1D; font-style: italic; }
.os-boot-bar { width: 150px; height: 16px; margin-top: 18px; border: 2px solid #B4B4B4; border-radius: 4px; padding: 2px; overflow: hidden; position: relative; }
.os-boot-bar span { position: absolute; top: 2px; width: 9px; height: 8px; border-radius: 1px; background: linear-gradient(180deg, #6FA7FF, #1E5AD0 60%, #3B7BEE); animation: os-bootbar 1.7s linear infinite; }
.os-boot-bar span:nth-child(2) { animation-delay: .09s; }
.os-boot-bar span:nth-child(3) { animation-delay: .18s; }
@keyframes os-bootbar { from { left: -30px; } to { left: 160px; } }

/* ---------------- shell apps ---------------- */
/* XP menu bar row used by Recycle Bin and Notepad */
.os-xm { flex: none; display: flex; gap: 0; padding: 1px 2px; background: #ECE9D8; border-bottom: 1px solid #D5D2C2; font: 12px/1 var(--os-font); color: #000; -webkit-user-select: none; user-select: none; }
.os-xm span { padding: 4px 7px; cursor: default; }
.os-xm span:hover { background: var(--os-sel); color: #fff; }
.os-sb { flex: none; display: flex; justify-content: space-between; gap: 8px; padding: 3px 18px 3px 6px; background: #ECE9D8; border-top: 1px solid #D5D2C2; font: 11px var(--os-font); color: #333; }
.os-rb-addr { flex: none; display: flex; align-items: center; gap: 6px; padding: 3px 6px; background: #ECE9D8; border-bottom: 1px solid #D5D2C2; font: 12px var(--os-font); color: #555; }
.os-rb-box { flex: 1; display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 5px; background: #fff; border: 1px solid #7F9DB9; color: #000; }
.os-rb-box .os-ico { width: 16px; height: 16px; }
.os-rb-body { flex: 1; min-height: 0; overflow: auto; padding: 12px; display: flex; align-content: flex-start; flex-wrap: wrap; gap: 8px; background: #fff; }
.os-rb-file {
  appearance: none; -webkit-appearance: none; margin: 0; width: 92px; padding: 4px 2px; border: 0; background: none; border-radius: 2px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font: 12px/1.2 var(--os-font); color: #000; cursor: default; outline: none;
}
.os-rb-file span { padding: 1px 3px; text-align: center; overflow-wrap: anywhere; }
.os-rb-file.os-sel .os-ico { filter: url(#os-sel-f); }
.os-rb-file.os-sel span { background: var(--os-sel); color: #fff; }
.os-rb-file:focus-visible span { outline: 1px dotted #000; }
.os-np {
  flex: 1; min-height: 0; width: 100%; margin: 0; padding: 4px 6px; border: 0; border-top: 1px solid #fff; outline: none; resize: none;
  font: 13px/1.35 "Lucida Console", Consolas, "Courier New", monospace; color: #000; background: #fff; white-space: pre-wrap;
}

/* Thoccy Setup wizard */
.app-setup.os-app { background: #ECE9D8; font: 12px/1.4 var(--os-font); color: #000; -webkit-user-select: none; user-select: none; }
.os-wz-main { flex: 1; min-height: 0; display: flex; }
.os-wz-banner { flex: none; width: 164px; position: relative; overflow: hidden; background: linear-gradient(180deg, #0E46B8, #2B7FE4 50%, #8CCBF7); }
.os-wz-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.os-wz-mini { display: none; }
.os-wz-content { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; padding: 18px 20px 14px; overflow-y: auto; }
.os-wz-content h2 { margin: 0 0 14px; font: bold 16px/1.25 Verdana, Tahoma, sans-serif; color: #000; }
.os-wz-content p { margin: 0 0 12px; }
.os-wz-low { margin-top: 22px !important; }
.os-wz-list { flex: 1 1 auto; min-height: 96px; border: 1px solid #7F9DB9; background: #fff; overflow-y: auto; padding: 2px 0; }
.os-wz-opt { display: flex; align-items: flex-start; gap: 7px; padding: 4px 8px; cursor: default; }
.os-wz-opt:hover { background: #EEF4FD; }
.os-wz-opt input { margin: 2px 0 0; flex: none; accent-color: #2160D3; }
.os-wz-opt b { display: block; font-weight: bold; }
.os-wz-opt small { display: block; font-size: 11px; color: #555; }
.os-wz-opt:has(input:checked) { background: #DCE9FB; }
.os-wz-sum { border: 1px solid #7F9DB9; background: #F7F9FC; padding: 12px 12px; line-height: 1.75; }
.os-wz-sum > span { white-space: nowrap; }
.os-wz-sum b { font-size: 13px; }
.os-wz-foot { flex: none; display: flex; justify-content: flex-end; align-items: center; gap: 0; padding: 10px 12px 11px; border-top: 1px solid #ACA899; box-shadow: inset 0 1px 0 #fff; }
.os-wz-foot .os-wz-cancel { margin-left: 10px; }
.os-btn-wide { min-width: 120px; }
.os-win.os-fixed .os-titlebar { cursor: default; }

/* ---------------- phone ---------------- */
@media (max-width: 699px) {
  .os-root { --os-tb: 38px; }
  .os-win { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
  .os-win .os-titlebar { border-radius: 0; }
  .os-tb-max, .os-grip { display: none !important; }
  .os-tb { width: 25px; height: 25px; }
  .os-titlebar { height: 34px; gap: 6px; }
  .os-icons { grid-template-rows: none; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, 84px); justify-content: space-evenly; }
  .os-start { padding: 0 15px 1px 7px; font-size: 17px; }
  .os-start-logo { width: 22px; height: 22px; }
  .os-tasks { padding: 0 4px 0 6px; }
  .os-task { flex: 0 1 120px; min-width: 34px; padding: 0 6px; }
  .os-tray { padding: 0 7px; }
  .os-tray-vol { display: none !important; }
  .os-sm { width: 100%; }
  .os-sm-fly { left: auto; right: 4px; top: auto !important; bottom: 44px; width: min(200px, 62%); max-height: calc(100% - 110px); overflow-y: auto; }
  .os-wz-main { flex-direction: column; }
  .os-wz-banner { width: auto; height: 64px; }
  .os-wz-art { display: none; }
  .os-wz-mini { display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 14px; color: #fff; font: 15px var(--os-title-font); text-shadow: 1px 1px 1px rgba(0, 0, 40, .5); }
  .os-wz-mini .os-ico { width: 44px; height: 44px; }
  .os-wz-mini b { font-style: italic; font-size: 20px; }
  .os-balloon { width: auto; left: calc(8px + var(--os-sal)); }
}
@media (prefers-reduced-motion: reduce) {
  .os-dicon.os-flash .os-dicon-l { animation: none; background: #F08A12; text-shadow: none; }
  .os-task.os-flash { animation: none; background: linear-gradient(180deg, #FFD08A 0%, #FBA53B 10%, #F59220 50%, #EE8414 85%, #D96E08 100%); }
  .os-boot-bar span { animation-duration: 4s; }
  .os-balloon { transition: none; }
}

/* ---------------- phone taskbar app row ---------------- */
.os-dock { display: none; }
.os-dk {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; position: relative; width: 38px; height: 31px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 4px; background: none; cursor: default; outline: none;
}
.os-dk .os-ico { width: 25px; height: 25px; filter: drop-shadow(0 1px 1px rgba(0, 10, 50, .5)); }
.os-dk.os-open::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 12px; height: 2px; margin-left: -6px; border-radius: 1px; background: rgba(255, 255, 255, .8); }
.os-dk.os-on { background: linear-gradient(180deg, #1A4AAE 0%, #1E53BA 15%, #1F56BE 85%, #2259C2 100%); box-shadow: inset 1px 1px 2px rgba(0, 0, 30, .55), inset -1px -1px 0 rgba(255, 255, 255, .12); }
.os-dk.os-on::after { background: #FFC24D; }
.os-dk .os-badge { top: -1px; right: -1px; min-width: 15px; height: 15px; padding: 0 3px; font-size: 9px; line-height: 12px; border-width: 1px; }
.os-dk.os-flash { animation: os-dkflash 1.1s linear 7 forwards; }
@keyframes os-dkflash { 0%, 49.9% { background: transparent; } 50%, 100% { background: linear-gradient(180deg, #FFD08A, #F59220 50%, #D96E08); } }
.os-dk:focus-visible { outline: 1px dotted #fff; outline-offset: -2px; }

/* ---------------- Thoccy gadget ---------------- */
.os-gd, .os-gd-pill, .os-pb { display: none; }
.os-gm-dock .os-gd, .os-gm-float .os-gd { display: flex; }
.os-gm-pill .os-gd-pill { display: flex; }
.os-gm-phone .os-pb { display: flex; }

.os-gd {
  position: absolute; z-index: 900; top: calc(var(--os-sat) + 10px); right: calc(var(--os-sar) + 10px);
  width: 280px; max-height: calc(100% - var(--os-sat) - var(--os-tb) - var(--os-sab) - 20px);
  flex-direction: column; padding: 4px; border-radius: 15px; transform-origin: 100% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(222, 238, 255, .42) 38%, rgba(150, 196, 252, .45) 100%);
  -webkit-backdrop-filter: blur(9px) saturate(1.5); backdrop-filter: blur(9px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 14px 34px rgba(3, 28, 92, .42), 0 2px 6px rgba(3, 28, 92, .3), inset 0 0 0 1px rgba(28, 82, 178, .3), inset 0 1px 0 #fff;
}
.os-gm-float .os-gd { z-index: 950; top: calc(var(--os-sat) + 8px); right: calc(var(--os-sar) + 8px); box-shadow: 0 18px 44px rgba(3, 20, 70, .55), 0 2px 6px rgba(3, 28, 92, .3), inset 0 0 0 1px rgba(28, 82, 178, .3); }
.os-gd-in {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 11px; border: 1px solid #2F62C4; background: linear-gradient(180deg, #FFFFFF 0%, #F4F8FE 50%, #E4EEFB 100%);
  box-shadow: 0 1px 2px rgba(0, 30, 90, .25);
}
.os-gd-head {
  flex: none; height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 7px 1px 8px; color: #fff;
  background: linear-gradient(180deg, #67AFFF 0%, #2A86FB 7%, #0F6EF4 16%, #0662F0 34%, #0458E6 58%, #0350D8 86%, #0960E8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 30, 120, .45);
}
.os-gd-logo { width: 26px; height: 26px; filter: drop-shadow(0 1px 1px rgba(0, 20, 70, .55)); transform: rotate(-6deg); }
.os-gd-name { flex: 1; min-width: 0; font: italic bold 17px/1 var(--os-title-font); letter-spacing: .2px; text-shadow: 1px 1px 0 #0A1A7A, 0 0 3px rgba(0, 0, 50, .35); }
.os-gd-head .os-pw { box-shadow: 0 1px 1px rgba(0, 20, 70, .35); }
.os-gd-col { width: 22px; height: 22px; color: #fff; }
.os-gd-col .os-chev { width: 12px; height: 12px; transform: rotate(180deg); }
.os-gd-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 12px 11px; scrollbar-width: thin; }
.os-gd-h { margin: 0 0 5px; font: bold 17px/1.22 var(--os-title-font); color: #0B2D7A; letter-spacing: -.1px; }
.os-gd-sub { margin: 0 0 11px; font: 12px/1.42 var(--os-font); color: #3A4D72; }
.os-gd-lbl { display: flex; align-items: center; gap: 7px; margin: 0 0 5px; font: bold 11px/1 var(--os-font); color: #215DC6; letter-spacing: .2px; }
.os-gd-lbl::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #9DB9EB, rgba(157, 185, 235, 0)); }
.os-gd-sws { padding: 2px; border: 1px solid #A9C1E8; border-radius: 7px; background: #fff; box-shadow: inset 0 1px 2px rgba(20, 60, 140, .1); }

/* switch rows (gadget) */
.os-gsw {
  appearance: none; -webkit-appearance: none; margin: 0; width: 100%; height: 23px; padding: 0 7px 0 6px;
  display: grid; grid-template-columns: 12px 11px auto 1fr; align-items: center; gap: 6px;
  border: 1px solid transparent; border-radius: 5px; background: none; color: #10204A; font: 12px/1 var(--os-font); text-align: left; cursor: pointer; outline: none;
}
.os-gsw b { font-weight: bold; white-space: nowrap; }
.os-gsw small { min-width: 0; font-size: 11px; color: #6A7894; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-gsw:hover { background: #EEF4FE; border-color: #D3E1F8; }
.os-gsw[aria-checked="true"] { background: linear-gradient(180deg, #EEF5FF 0%, #D6E6FD 55%, #C6DCFB 100%); border-color: #7EA6E0; box-shadow: inset 0 1px 0 #fff; }
.os-gsw[aria-checked="true"] small { color: #2D4A80; }
.os-gsw:focus-visible { outline: 1px dotted #0B2D7A; outline-offset: -3px; }
.os-rd { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #1C5180; background: radial-gradient(circle at 40% 35%, #fff, #DCDCD7); position: relative; }
[aria-checked="true"] > .os-rd::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #A8FF9C, #2FAE22 60%, #1C7A14); }
.os-swt, .os-swt-cur {
  width: 11px; height: 11px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .38);
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .85) 0 16%, rgba(255, 255, 255, 0) 52%), linear-gradient(135deg, var(--c) 0 50%, var(--c2) 50% 100%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}
.os-swt-cur { --c: var(--os-swc); --c2: var(--os-swc2); flex: none; }

/* mini keyboard */
.os-gd-kb {
  margin: 11px 0 0; padding: 6px 6px 7px; display: flex; flex-direction: column; gap: 3px; border-radius: 8px;
  background: linear-gradient(180deg, #46536A 0%, #2A3343 45%, #1C2330 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 2px 5px rgba(10, 30, 70, .35);
}
.os-kr { display: flex; gap: 2px; }
.os-k {
  --u: 1; flex: none; width: calc((100% - 28px) / 15 * var(--u) + (var(--u) - 1) * 2px); height: 15px; border-radius: 3px;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F0E2 55%, #E4D9C0 100%);
  box-shadow: 0 1.5px 0 #9A8760, 0 2.5px 1.5px rgba(0, 0, 0, .4), inset 0 1px 0 #fff;
  transition: transform .07s ease-out, background-color .07s, box-shadow .07s;
}
.os-k i { font: normal 8px/1 var(--os-font); color: #5D513A; white-space: nowrap; }
.os-k-mod i { font-size: 6.5px; letter-spacing: .1px; color: #7A6D52; }
.os-k.os-k-on {
  transform: translateY(1.5px);
  background: linear-gradient(180deg, #FFF2C2 0%, #FFC94F 50%, #F59A1D 100%);
  box-shadow: 0 0 0 #9A8760, 0 0 8px 2px rgba(255, 176, 50, .85), inset 0 1px 0 rgba(255, 255, 255, .75);
  transition-duration: 0s;
}
.os-k.os-k-on i { color: #6B3A00; }
.os-thoccy-off .os-gd-kb { filter: saturate(.25) brightness(.92); }
.os-thoccy-off .os-gd-h, .os-thoccy-off .os-gd-sws { opacity: .7; }

.os-gd-keys { margin: 8px 1px 11px; font: 11px/1 var(--os-font); color: #5B6B8C; font-variant-numeric: tabular-nums; }
.os-gd-keys b { color: #0B2D7A; }
.os-gd-fine { margin-top: 7px; text-align: center; font: 11px/1.3 var(--os-font); color: #5B6B8C; }
.os-faq-btn { display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font: bold 11px/1 var(--os-font); color: #1550B8;
  background: linear-gradient(180deg, #FFFFFF, #ECF2FD); border: 1px solid #8FB0E6; border-radius: 4px; padding: 6px 10px; }
.os-faq-btn:hover { border-color: #1550B8; background: linear-gradient(180deg, #FFFFFF, #DCE8FC); }
.os-faq-btn:active { background: #DCE8FC; }
.os-faq-q { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: bold 10px/1 Tahoma, sans-serif;
  background: linear-gradient(180deg, #6FA7FF, #1E5AD0); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.os-gd-faq { margin: 8px auto 0; }
.os-sheet-faq { margin: 6px 12px 10px; }

/* the glossy green call to action (gadget + phone bar) */
.os-cta {
  appearance: none; -webkit-appearance: none; margin: 0; display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; height: 38px; padding: 0 12px; border: 1px solid #176217; border-radius: 8px; cursor: pointer; outline: none;
  color: #fff; font: bold 14px/1 var(--os-title-font); text-decoration: none; white-space: nowrap; text-shadow: 0 1px 1px rgba(0, 50, 0, .6);
  background: linear-gradient(180deg, #9BEB95 0%, #55C952 9%, #3CB23A 42%, #2F9C2F 56%, #2C922C 84%, #247D24 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 3px rgba(0, 60, 0, .22), 0 2px 5px rgba(20, 80, 20, .35);
}
.os-cta:hover { filter: brightness(1.07) saturate(1.05); }
.os-cta:active { background: linear-gradient(180deg, #23802A 0%, #2E922E 40%, #34A034 100%); box-shadow: inset 1px 2px 4px rgba(0, 40, 0, .5); }
.os-cta:focus-visible { outline: 2px dotted #0B2D7A; outline-offset: 2px; }
.os-cta-i { width: 18px; height: 18px; flex: none; filter: drop-shadow(0 1px 0 rgba(0, 50, 0, .45)); }

/* collapsed pill */
.os-gd-pill {
  appearance: none; -webkit-appearance: none; margin: 0; position: absolute; z-index: 900;
  top: calc(var(--os-sat) + 8px); right: calc(var(--os-sar) + 8px); height: 31px; align-items: center; gap: 6px; padding: 0 11px 0 5px;
  border: 1px solid #0B3EA8; border-radius: 16px; cursor: pointer; outline: none; color: #fff; font: bold 12px/1 var(--os-font);
  text-shadow: 0 1px 1px rgba(0, 20, 80, .5);
  background: linear-gradient(180deg, #97CBFF 0%, #569BF8 12%, #3381EF 46%, #1F65DB 82%, #2C71E2 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 9px rgba(0, 20, 80, .42);
}
.os-gd-pill:hover { filter: brightness(1.08); }
.os-gd-pico { width: 23px; height: 23px; filter: drop-shadow(0 1px 1px rgba(0, 20, 70, .5)); transform: rotate(-6deg); }
.os-gd-pill .os-chev { width: 12px; height: 12px; }
.os-gd-pill:focus-visible { outline: 1px dotted #fff; outline-offset: -4px; }

/* phone bar */
.os-pb {
  position: absolute; z-index: 990; left: 0; right: 0; bottom: calc(var(--os-tb) + var(--os-sab)); height: var(--os-pbh);
  padding: 0 calc(8px + var(--os-sar)) 0 calc(8px + var(--os-sal)); align-items: center; gap: 7px;
  background: linear-gradient(180deg, #FFFFFF 0%, #EDF4FD 45%, #D5E4F9 100%);
  border-top: 1px solid #6F96D8; box-shadow: 0 -2px 7px rgba(0, 25, 80, .22), inset 0 1px 0 #fff;
}
.os-pb-logo { width: 30px; height: 30px; transform: rotate(-6deg); }
.os-pb-name { font: italic bold 16px/1 var(--os-title-font); color: #0B3A9E; margin-left: -2px; }
.os-pb-sw {
  appearance: none; -webkit-appearance: none; margin: 0; min-width: 0; height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 9px 0 10px;
  border: 1px solid #7A9CD4; border-radius: 16px; background: linear-gradient(180deg, #FFFFFF, #E4EEFC); color: #10204A;
  font: bold 13px/1 var(--os-font); cursor: pointer; outline: none; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 30, 90, .2);
}
.os-pb-sw .os-swname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-pb-sw .os-chev { width: 12px; height: 12px; flex: none; color: #2F62C4; }
.os-pb-sp { flex: 1; }
.os-pb-cta { width: auto; flex: none; height: 33px; padding: 0 13px; border-radius: 17px; font-size: 13px; }
.os-pb-cta .os-cta-i { width: 16px; height: 16px; }
@media (max-width: 384px) { .os-pb-name { display: none; } }
@media (max-width: 374px) { .os-pb-cta .os-cta-i { display: none; } .os-pb-cta { padding: 0 11px; } }

/* switch sheet */
.os-sheet { position: absolute; inset: 0; z-index: 1400; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(6, 22, 62, .45); }
.os-sheet-box {
  max-height: 86%; display: flex; flex-direction: column; overflow: hidden; padding-bottom: var(--os-sab);
  background: #fff; border-radius: 14px 14px 0 0; border: 1px solid #2F62C4; border-bottom: 0; box-shadow: 0 -6px 26px rgba(0, 20, 70, .45);
}
.os-sheet-head {
  flex: none; height: 46px; display: flex; align-items: center; gap: 9px; padding: 0 9px 0 12px; color: #fff;
  background: linear-gradient(180deg, #67AFFF 0%, #2A86FB 7%, #0F6EF4 16%, #0662F0 34%, #0458E6 58%, #0350D8 86%, #0960E8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}
.os-sheet-ico { width: 28px; height: 28px; transform: rotate(-6deg); }
.os-sheet-head b { flex: 1; font: bold 17px/1 var(--os-title-font); text-shadow: 1px 1px 0 #0A1A7A; }
.os-sheet-x { width: 30px; height: 30px; }
.os-sheet-x svg { width: 15px; height: 15px; }
.os-sheet-list { overflow-y: auto; padding: 4px 0; overscroll-behavior: contain; }
.os-ssw {
  appearance: none; -webkit-appearance: none; margin: 0; width: 100%; min-height: 54px; padding: 8px 16px;
  display: grid; grid-template-columns: 18px 14px 1fr; grid-template-rows: auto auto; column-gap: 11px; row-gap: 3px; align-items: center;
  border: 0; border-bottom: 1px solid #E6ECF6; background: none; color: #10204A; text-align: left; cursor: pointer; outline: none;
}
.os-ssw .os-rd { width: 18px; height: 18px; grid-row: 1 / span 2; }
.os-ssw .os-swt { width: 14px; height: 14px; grid-row: 1 / span 2; }
.os-ssw b { font: bold 15px/1.2 var(--os-font); grid-column: 3; }
.os-ssw small { font: 13px/1.2 var(--os-font); color: #6A7894; grid-column: 3; }
.os-ssw[aria-checked="true"] { background: linear-gradient(180deg, #EEF5FF, #D6E6FD); }
.os-ssw:focus-visible { outline: 1px dotted #0B2D7A; outline-offset: -4px; }

@media (max-width: 699px) {
  .os-dock { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 2px; padding: 0 4px 0 6px; overflow-x: auto; overflow-y: hidden; position: relative; scrollbar-width: none; overscroll-behavior-x: contain; }
  .os-dock::-webkit-scrollbar { display: none; }
  .os-tasks { flex: none; padding: 0 3px 0 0; gap: 2px; }
  .os-task:not(.os-task-sys) { display: none; }
  .os-task.os-task-sys { flex: none; width: 38px; min-width: 0; padding: 0; justify-content: center; }
  .os-task-sys .os-task-t, .os-task-sys .os-badge { display: none; }
  .os-gm-phone .os-icons { bottom: calc(6px + var(--os-pbh)); }
}
@media (prefers-reduced-motion: reduce) {
  .os-dicon-i, .os-k { transition: none; }
  .os-dicon:hover .os-dicon-i, .os-dicon:active .os-dicon-i { transform: none; }
  .os-k.os-k-on { transform: none; }
  .os-dk.os-flash { animation: none; background: linear-gradient(180deg, #FFD08A, #F59220 50%, #D96E08); }
}

/* balloons: lifted clear of a window's resize grip (desktop) */
.os-balloon.os-bl-lifted { bottom: calc(var(--os-tb) + var(--os-sab) + 17px + var(--os-lift, 0px)); }
.os-balloon.os-bl-lifted::before, .os-balloon.os-bl-lifted::after { display: none; }
/* balloons on phone: a slim notification strip at the top */
.os-balloon.os-bl-strip {
  top: calc(var(--os-sat) + 6px); bottom: auto; left: calc(8px + var(--os-sal)); right: calc(8px + var(--os-sar)); width: auto; max-width: none;
  display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 7px 7px 7px 10px; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); touch-action: none; transition: opacity .2s;
}
.os-balloon.os-bl-strip::before, .os-balloon.os-bl-strip::after { display: none; }
.os-bl-strip .os-bl-ico { width: 24px; height: 24px; flex: none; }
.os-bl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.os-bl-one { font: 12px/1.3 var(--os-font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.os-bl-strip .os-bl-title { font-weight: bold; }
.os-bl-strip .os-bl-action { margin: 0; font-size: 12px; }
.os-bl-strip .os-bl-x { width: 26px; height: 26px; margin: 0; }
.os-bl-strip .os-bl-x svg { width: 12px; height: 12px; }

/* an app that failed to start */
.os-app.os-app-failed { background: #ECE9D8; align-items: center; justify-content: center; }
.os-app-err { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; font: 13px/1.4 var(--os-font, Tahoma, sans-serif); color: #222; text-align: center; }
.os-app-err-i { width: 40px; height: 40px; }

/* ---------------- welcome (log-on) screen ---------------- */
.os-wl { position: absolute; inset: 0; z-index: 2500; display: flex; flex-direction: column; cursor: default; user-select: none; -webkit-user-select: none;
  font: 13px/1.3 var(--os-font); color: #fff; background: #5A7EDC; }
.os-wl-top, .os-wl-bot { flex: none; position: relative; background: #00309C; }
.os-wl-top { height: calc(11vh + var(--os-sat)); }
.os-wl-top::after, .os-wl-bot::before { content: ""; position: absolute; left: 0; right: 0; height: 2px; }
.os-wl-top::after { bottom: 0; background: linear-gradient(90deg, #5A7EDC 0%, #fff 30%, #fff 50%, #5A7EDC 90%); opacity: .9; }
.os-wl-bot::before { top: 0; background: linear-gradient(90deg, #00309C 0%, #F5A623 30%, #F5A623 60%, #00309C 100%); }
.os-wl-bot { height: calc(13vh + var(--os-sab)); display: flex; align-items: center; justify-content: flex-end; padding: 0 calc(28px + var(--os-sar)) var(--os-sab) calc(28px + var(--os-sal)); }
.os-wl-tip { display: flex; align-items: center; gap: 8px; font-size: 12px; opacity: .92; }
.os-wl-tip .os-ico { width: 22px; height: 22px; flex: none; }
.os-wl-mid { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; gap: 0;
  background: radial-gradient(48% 70% at 16% 18%, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 100%), linear-gradient(180deg, #6D8FE6 0%, #5A7EDC 45%, #4F72D2 100%); }
.os-wl-left { flex: 1; display: flex; flex-direction: column; align-items: flex-end; text-align: right; padding-right: 38px; max-width: 460px; }
.os-wl-logo { width: 84px; height: 84px; filter: drop-shadow(0 3px 4px rgba(0,20,80,.35)); }
.os-wl-name { margin-top: 8px; font: bold italic 40px/1 var(--os-title-font); text-shadow: 1px 2px 3px rgba(0,20,80,.45); }
.os-wl-name i { color: #F5A623; }
.os-wl-begin { margin: 18px 0 0; font: 18px/1.3 var(--os-title-font); text-shadow: 1px 1px 2px rgba(0,20,80,.4); }
.os-wl-div { flex: none; width: 1px; height: 62%; max-height: 360px; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.85) 30%, rgba(255,255,255,.85) 70%, rgba(255,255,255,0)); }
.os-wl-right { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-left: 38px; max-width: 460px; }
.os-wl-user { display: flex; align-items: center; gap: 14px; padding: 8px 18px 8px 8px; border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; text-align: left;
  font: inherit; transition: background .15s; }
.os-wl-user:hover, .os-wl-user:focus-visible { background: linear-gradient(90deg, rgba(0,48,156,.55), rgba(0,48,156,0)); outline: none; }
.os-wl-pic { width: 64px; height: 64px; flex: none; border-radius: 8px; border: 3px solid #fff; background: linear-gradient(180deg, #FFF6E0, #FFE6A6); display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0,20,80,.4); overflow: hidden; }
.os-wl-user:hover .os-wl-pic, .os-wl-user:focus-visible .os-wl-pic { border-color: #FFCB4C; }
.os-wl-pic img { width: 54px; height: 54px; object-fit: contain; }
.os-wl-who b { display: block; font: bold 22px/1.1 var(--os-title-font); text-shadow: 1px 1px 2px rgba(0,20,80,.4); }
.os-wl-who span { display: block; margin-top: 5px; font-size: 13px; color: #DCE6FF; }
.os-wl-keys { display: flex; gap: 6px; margin-left: 8px; }
.os-wl-keys span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; font: bold 13px/1 var(--os-font); color: #3A2B16;
  background: linear-gradient(180deg, #FFFDF4, #F3E3BC); box-shadow: 0 3px 0 #B48E52, 0 4px 6px rgba(0,20,80,.35); animation: os-wl-key 2.4s ease-in-out infinite; }
.os-wl-keys span:nth-child(2) { animation-delay: .25s; }
.os-wl-keys span:nth-child(3) { animation-delay: .5s; }
.os-wl-keys span:nth-child(4) { animation-delay: .75s; }
@keyframes os-wl-key { 0%, 30%, 100% { transform: none; box-shadow: 0 3px 0 #B48E52, 0 4px 6px rgba(0,20,80,.35); } 12% { transform: translateY(3px); box-shadow: 0 0 0 #B48E52, 0 1px 2px rgba(0,20,80,.35); } }
.os-wl-hello { position: absolute; inset: 0; display: grid; place-items: center; font: italic bold 64px/1 var(--os-title-font); letter-spacing: .5px;
  text-shadow: 2px 3px 6px rgba(0,20,80,.45); opacity: 0; pointer-events: none; }
.os-wl-in .os-wl-left, .os-wl-in .os-wl-right, .os-wl-in .os-wl-div { opacity: 0; transition: opacity .25s; }
.os-wl-in .os-wl-hello { opacity: 1; transition: opacity .35s .1s; }
@media (max-width: 699px) {
  .os-wl-mid { flex-direction: column; justify-content: center; gap: 26px; padding: 0 24px; }
  .os-wl-left, .os-wl-right { flex: none; align-items: center; text-align: center; padding: 0; max-width: none; }
  .os-wl-div { width: 60%; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0)); }
  .os-wl-logo { width: 64px; height: 64px; }
  .os-wl-name { font-size: 32px; }
  .os-wl-begin { font-size: 16px; margin-top: 12px; }
  .os-wl-keys { display: none; }
  .os-wl-bot { justify-content: center; text-align: left; }
  .os-wl-hello { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) { .os-wl-keys span { animation: none; } .os-wl-in .os-wl-left, .os-wl-in .os-wl-right, .os-wl-in .os-wl-div, .os-wl-in .os-wl-hello { transition: none; } }