/* My Little Desktop — Apple OS
   Layout: an apple-shaped monitor frame sits under a live desktop that is
   mapped into the frame's screen opening; "full desktop" removes the frame.
   One committed light look (apple scrapbook), themed by monitor color. */
:root {
  --cream: #fff8ec;
  --paper: #fffdf7;
  --ivory: #f8ecd9;
  --line: #ead7bd;
  --ink: #5b2b25;
  --ink-soft: #8a5b4f;
  --leaf: #6aa63a;
  --leaf-dark: #4a7e22;
  --sage: #b8c99a;
  --star: #f2c14e;
  --danger: #c0352d;
  --f-hand: 'Patrick Hand', 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive;
  --f-body: 'Nunito', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --tb-h: 46px;
  --apple-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 12c-4-3-12-2-12 8 0 8 6 14 9 14 1.5 0 2-1 3-1s1.5 1 3 1c3 0 9-6 9-14 0-10-8-11-12-8z' fill='%23d8313a'/%3E%3Cpath d='M20 12c0-3 1-6 3-7' stroke='%236b3e1f' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M22 9c3-4 8-4 9-2-3 3-6 3-9 2z' fill='%236fa83a'/%3E%3Cellipse cx='14' cy='18' rx='2' ry='3.5' fill='%23fff' opacity='.55'/%3E%3C/svg%3E");
  --apple-green-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 12c-4-3-12-2-12 8 0 8 6 14 9 14 1.5 0 2-1 3-1s1.5 1 3 1c3 0 9-6 9-14 0-10-8-11-12-8z' fill='%2394c447'/%3E%3Cpath d='M20 12c0-3 1-6 3-7' stroke='%236b3e1f' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M22 9c3-4 8-4 9-2-3 3-6 3-9 2z' fill='%234a7e22'/%3E%3Cellipse cx='14' cy='18' rx='2' ry='3.5' fill='%23fff' opacity='.55'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* ---------- Themes (monitor colors) ---------- */
.theme-red, [data-theme="red"] { --a: #d8313a; --a2: #a81e28; --a3: #f8d6d3; --a4: #fdecea; --tb1: #fbd9dc; --tb2: #f2b3b9; --on-a: #fff; }
.theme-green, [data-theme="green"] { --a: #6fa83a; --a2: #4a7e22; --a3: #dcebc8; --a4: #f0f6e6; --tb1: #e6f0d6; --tb2: #c4dba5; --on-a: #fff; }
.theme-orange, [data-theme="orange"] { --a: #e8742a; --a2: #b9520f; --a3: #fbdcc6; --a4: #fdf0e5; --tb1: #fde2cd; --tb2: #f6bf97; --on-a: #fff; }
.theme-pink, [data-theme="pink"] { --a: #e0688f; --a2: #b94770; --a3: #fadbe5; --a4: #fdeff3; --tb1: #fde0ea; --tb2: #f5b8cc; --on-a: #fff; }
.theme-yellow, [data-theme="yellow"] { --a: #e3a816; --a2: #a8780a; --a3: #fbecbf; --a4: #fdf7e2; --tb1: #fdf0c8; --tb2: #f3d77f; --on-a: #4b3305; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; color: var(--ink); font: 14px/1.4 var(--f-body);
  background-color: #fbf3e6;
  background-image:
    linear-gradient(90deg, rgba(216, 49, 58, .06) 50%, transparent 50%),
    linear-gradient(rgba(216, 49, 58, .06) 50%, transparent 50%);
  background-size: 28px 28px;
}
button { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--star); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- Stage / deskbar / monitor ---------- */
#stage { height: 100%; display: flex; flex-direction: column; }
#deskbar {
  flex: none; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 16px 6px; min-height: 52px;
}
.brand { display: flex; align-items: baseline; gap: 8px; font-family: var(--f-hand); font-size: 22px; color: var(--a2, #a81e28); }
.brand small { font-size: 15px; color: var(--ink-soft); }
.brand-apple { width: 22px; height: 22px; align-self: center; background: var(--apple-svg) center/contain no-repeat; }
.swatches { display: flex; gap: 8px; }
.swatch {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; cursor: pointer; padding: 0;
  box-shadow: 0 1px 3px rgba(91, 43, 37, .35), inset 0 -4px 6px rgba(0, 0, 0, .18), inset 0 4px 5px rgba(255, 255, 255, .55);
}
.swatch[aria-checked="true"] { outline: 3px solid var(--ink); outline-offset: 2px; }
.sw-red { background: #d8313a; } .sw-green { background: #6fa83a; } .sw-orange { background: #e8742a; } .sw-pink { background: #e0688f; } .sw-yellow { background: #e3b81e; }
.glossy-btn {
  border: 1px solid var(--a2, #a81e28); border-radius: 999px; padding: 6px 16px; cursor: pointer; font-weight: 700; color: #fff;
  background: linear-gradient(#f0767c, var(--a, #d8313a) 55%, var(--a2, #a81e28)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 4px rgba(91, 43, 37, .25);
}
#stage[data-theme="yellow"] .glossy-btn { color: #4b3305; background: linear-gradient(#fbe08a, #e3b81e 55%, #b8860f); }
#stage[data-theme="green"] .glossy-btn { background: linear-gradient(#a8d47a, #6fa83a 55%, #4a7e22); }
#stage[data-theme="orange"] .glossy-btn { background: linear-gradient(#f7a96f, #e8742a 55%, #b9520f); }
#stage[data-theme="pink"] .glossy-btn { background: linear-gradient(#f4a3bd, #e0688f 55%, #b94770); }

#monitorWrap { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
#monitor { position: relative; width: min(98vw, calc((100dvh - 70px) * var(--ar, 1.13))); max-width: 100%; }
#frameImg { display: block; width: 100%; height: auto; user-select: none; pointer-events: none; filter: drop-shadow(0 18px 24px rgba(91, 43, 37, .18)); }
#screen {
  position: absolute; left: var(--sl); top: var(--st); width: var(--sw); height: var(--sh);
  overflow: hidden; background: #1d1b1b; border-radius: 3px; z-index: 2;
}
#os { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; font-size: 14px; user-select: none; -webkit-user-select: none; outline: none; }
#os input, #os textarea, #os [contenteditable] { user-select: text; -webkit-user-select: text; }

/* full desktop mode: same live desktop, frame removed */
#stage.mode-full #deskbar, #stage.mode-full #frameImg { display: none; }
#stage.mode-full #monitorWrap { padding: 0; }
#stage.mode-full #screen {
  position: fixed; left: env(safe-area-inset-left, 0px); right: env(safe-area-inset-right, 0px);
  top: env(safe-area-inset-top, 0px); bottom: env(safe-area-inset-bottom, 0px); width: auto; height: auto; border-radius: 0;
}

/* ---------- Wallpapers ---------- */
#wallpaper { position: absolute; inset: 0; background-color: #f6ead8; }
#wallpaper.wall-photo { background-position: center; background-repeat: no-repeat; }
#wallpaper.fit-cover { background-size: cover; } #wallpaper.fit-contain { background-size: contain; background-color: #2d2422; } #wallpaper.fit-tile { background-size: auto; background-repeat: repeat; }
.wall-gingham-red { background-color: #fff6ea !important; background-image: linear-gradient(90deg, rgba(216, 49, 58, .42) 50%, transparent 50%), linear-gradient(rgba(216, 49, 58, .42) 50%, transparent 50%); background-size: 36px 36px; }
.wall-gingham-green { background-color: #fbf8ec !important; background-image: linear-gradient(90deg, rgba(106, 166, 58, .4) 50%, transparent 50%), linear-gradient(rgba(106, 166, 58, .4) 50%, transparent 50%); background-size: 36px 36px; }
.wall-cream { background-color: #fbf1e1 !important; background-image: radial-gradient(rgba(216, 49, 58, .22) 1.4px, transparent 1.6px), radial-gradient(rgba(106, 166, 58, .2) 1.4px, transparent 1.6px); background-size: 28px 28px; background-position: 0 0, 14px 14px; }
.wall-pink-apple { background-color: #fbd9e4 !important; background-image: var(--apple-svg), radial-gradient(#fff 1.5px, transparent 2px); background-size: 64px 64px, 22px 22px; background-position: 0 0, 8px 8px; }
.wall-vintage { background-color: #f4e6cc !important; background-image: var(--apple-svg), var(--apple-green-svg); background-size: 70px 70px; background-position: 0 0, 35px 35px; }
.wall-scrapbook {
  background-color: #efe2c8 !important;
  background-image: var(--apple-svg), repeating-linear-gradient(90deg, rgba(106, 166, 58, .22) 0 12px, transparent 12px 30px), repeating-linear-gradient(0deg, rgba(106, 166, 58, .22) 0 12px, transparent 12px 30px), repeating-linear-gradient(90deg, rgba(216, 49, 58, .1) 0 2px, transparent 2px 30px);
  background-size: 90px 90px, auto, auto, auto; background-position: 20px 20px, 0 0, 0 0, 6px 0;
}

/* ---------- Boot ---------- */
#boot { position: absolute; inset: 0; z-index: 9000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #fff6ea; }
#boot.run { display: flex; }
.boot-apple { width: 96px; height: 96px; background: var(--apple-svg) center/contain no-repeat; animation: bob 1.2s ease-in-out infinite; }
.boot-title { font: 40px var(--f-hand); color: var(--a); }
.boot-bar { width: 200px; height: 14px; border-radius: 99px; border: 2px solid var(--a); overflow: hidden; background: #fff; }
.boot-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--a) 0 12px, var(--a3) 12px 18px); animation: load 1.5s ease forwards; }
@keyframes load { to { width: 100%; } }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-4deg); } }

/* ---------- Desktop icons ---------- */
#desktopIcons {
  position: absolute; left: 10px; top: 10px; bottom: calc(var(--tb-h) + 8px); margin: 0; padding: 0; list-style: none;
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, var(--ic-cell, 96px)); grid-auto-columns: 92px; gap: 2px 4px; z-index: 1;
}
#os[data-icon-size="s"] { --ic: 42px; --ic-cell: 76px; }
#os[data-icon-size="m"] { --ic: 54px; --ic-cell: 90px; }
#os[data-icon-size="l"] { --ic: 68px; --ic-cell: 112px; }
.dicon {
  width: 90px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px; border: 1px solid transparent;
  background: none; cursor: pointer; border-radius: 10px; touch-action: manipulation;
}
.dicon img { width: var(--ic, 56px); height: var(--ic, 56px); object-fit: contain; filter: drop-shadow(0 3px 3px rgba(60, 30, 20, .3)); transition: transform .15s; }
.dicon span {
  font: 15px/1.1 var(--f-hand); color: var(--ink); background: rgba(255, 248, 236, .9); border-radius: 8px; padding: 1px 6px; text-align: center;
  box-shadow: 0 1px 2px rgba(60, 30, 20, .2);
}
.dicon:hover img { transform: translateY(-2px) scale(1.04); }
.dicon.selected { background: color-mix(in srgb, var(--a) 22%, transparent); border-color: color-mix(in srgb, var(--a) 55%, #fff); }
.dicon.selected span { background: var(--a); color: var(--on-a); }

/* ---------- Layers ---------- */
#widgetLayer, #windowLayer { position: absolute; left: 0; top: 0; right: 0; bottom: var(--tb-h); pointer-events: none; }
#widgetLayer { z-index: 2; } #windowLayer { z-index: 3; }
#widgetLayer > *, #windowLayer > * { pointer-events: auto; }
#toastLayer { position: absolute; right: 10px; top: 10px; z-index: 8000; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; max-width: min(320px, 80%); }

/* ---------- Windows ---------- */
.win {
  position: absolute; display: flex; flex-direction: column; min-width: 280px; min-height: 200px;
  background: var(--paper); border: 3px solid var(--a); border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7) inset, 0 14px 30px rgba(60, 25, 20, .28), 0 2px 6px rgba(60, 25, 20, .2);
  transition: opacity .16s, transform .16s;
}
.win:not(.active) { filter: saturate(.92); box-shadow: 0 8px 18px rgba(60, 25, 20, .18); }
.win.opening { opacity: 0; transform: scale(.94); }
.win.closing { opacity: 0; transform: scale(.94); }
.win.minimized { display: none; }
.win.dragging { transition: none; opacity: .96; }
.win.maximized, .win.compact-max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; border-width: 0 0 0 0; }
.win-title {
  position: relative; flex: none; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 10px; cursor: grab; touch-action: none;
  color: var(--on-a);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--a) 55%, #fff) 0%, var(--a) 48%, var(--a2) 100%);
}
.win-title::after { content: ''; position: absolute; left: 6px; right: 6px; top: 2px; height: 42%; border-radius: 10px 10px 40% 40%; background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .05)); pointer-events: none; }
.win.maximized .win-title, .compact .win-title { cursor: default; }
.dragging .win-title { cursor: grabbing; }
.win-icon { width: 26px; height: 26px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.win-title h2 { margin: 0; font: 21px/1 var(--f-hand); text-shadow: 0 1px 1px rgba(0, 0, 0, .25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.theme-yellow .win-title h2 { text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.win-bow {
  width: 34px; height: 22px; flex: none; margin-right: 4px;
  background: rgba(255, 255, 255, .92); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 28'%3E%3Cpath d='M23 12 C16 2 4 2 3 9 C2 16 12 18 21 14 L14 27 L19 26 L23 16 L27 26 L32 27 L25 14 C34 18 44 16 43 9 C42 2 30 2 23 12Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 28'%3E%3Cpath d='M23 12 C16 2 4 2 3 9 C2 16 12 18 21 14 L14 27 L19 26 L23 16 L27 26 L32 27 L25 14 C34 18 44 16 43 9 C42 2 30 2 23 12Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.win-ctrls { display: flex; gap: 5px; z-index: 1; }
.wc {
  width: 25px; height: 25px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .9); cursor: pointer; position: relative; padding: 0;
  background: radial-gradient(circle at 40% 30%, #fff, #fbeee2 60%, #ead6c3); box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.wc::before { content: ''; position: absolute; inset: 0; background: var(--a2); -webkit-mask: var(--g) center/13px no-repeat; mask: var(--g) center/13px no-repeat; }
.wc-min { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1' y='5' width='10' height='2.4' rx='1.2'/%3E%3C/svg%3E"); }
.wc-max { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1.5' y='1.5' width='9' height='9' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
.win.maximized .wc-max { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1' y='4' width='7' height='7' rx='1.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M4 3V1.5h6.5V8H9' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E"); }
.wc-close { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.wc:hover { background: radial-gradient(circle at 40% 30%, #fff, #fde2e2 60%, #f0b9b9); }
.compact .wc-max { display: none; }
.win-body { flex: 1; min-height: 0; overflow: auto; position: relative; background: var(--paper); }
.win-resize { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--a) 60%, transparent) 50% 58%, transparent 58% 68%, color-mix(in srgb, var(--a) 60%, transparent) 68% 76%, transparent 76%); }
.maximized .win-resize, .compact .win-resize { display: none; }

/* ---------- Taskbar ---------- */
#taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--tb-h); z-index: 5000; display: flex; align-items: center; gap: 6px; padding: 0 6px;
  background: linear-gradient(to bottom, #fff 0%, var(--tb1) 12%, var(--tb2) 100%); border-top: 2px solid var(--a);
  box-shadow: 0 -2px 6px rgba(60, 25, 20, .15);
}
#startBtn {
  display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px 0 8px; border-radius: 10px 18px 18px 10px; cursor: pointer; flex: none;
  font: 23px/1 var(--f-hand); color: #fff; border: 1px solid var(--a2); text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--a) 50%, #fff), var(--a) 50%, var(--a2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 3px rgba(60, 25, 20, .3);
}
.theme-yellow #startBtn { color: #4b3305; text-shadow: none; }
#startBtn.pressed { filter: brightness(.92); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3); }
.start-apple { width: 26px; height: 26px; background: var(--apple-green-svg) center/contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
#quickLaunch { display: flex; gap: 2px; padding: 0 6px; border-right: 2px dotted color-mix(in srgb, var(--a) 50%, transparent); flex: none; }
.ql { width: 36px; height: 36px; padding: 3px; border: 0; background: none; border-radius: 8px; cursor: pointer; }
.ql img { width: 100%; height: 100%; object-fit: contain; }
.ql:hover { background: rgba(255, 255, 255, .55); }
#taskButtons { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.task {
  display: flex; align-items: center; gap: 6px; height: 34px; min-width: 0; max-width: 170px; flex: 0 1 170px; padding: 0 10px 0 5px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--a) 55%, #fff); border-radius: 9px; background: linear-gradient(#fff, var(--a4)); font-weight: 700; font-size: 13px;
}
.task img { width: 24px; height: 24px; flex: none; }
.task span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task.active { background: linear-gradient(var(--a3), color-mix(in srgb, var(--a) 35%, #fff)); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15); }
.task.min { opacity: .75; font-style: italic; }
#tray { display: flex; align-items: center; gap: 4px; flex: none; padding-left: 6px; border-left: 2px dotted color-mix(in srgb, var(--a) 50%, transparent); }
.tray-btn { width: 30px; height: 30px; border: 0; background: none; cursor: pointer; border-radius: 8px; position: relative; color: var(--a2); }
.tray-btn::before { content: ''; position: absolute; inset: 5px; background: currentColor; -webkit-mask: var(--g) center/contain no-repeat; mask: var(--g) center/contain no-repeat; }
.tray-btn:hover { background: rgba(255, 255, 255, .55); }
#traySound { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
#traySound.muted { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
#trayMode { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#trayMode.is-full { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6c-2-1.8-8-1.5-8 5 0 5 3.5 9 6 9 1 0 1.3-.6 2-.6s1 .6 2 .6c2.5 0 6-4 6-9 0-6.5-6-6.8-8-5z'/%3E%3Cpath d='M12 6c0-2 .7-3.5 2-4.2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
#trayClock { display: flex; flex-direction: column; align-items: flex-end; border: 0; background: none; cursor: pointer; padding: 2px 6px; line-height: 1.1; border-radius: 8px; }
#clockTime { font: 17px/1 var(--f-hand); color: var(--a2); font-variant-numeric: tabular-nums; }
#clockDate { font-size: 11px; color: var(--ink-soft); }
#trayClock:hover { background: rgba(255, 255, 255, .55); }

/* ---------- Start menu ---------- */
#startMenu {
  position: absolute; left: 6px; bottom: calc(var(--tb-h) + 6px); z-index: 6000; width: 300px; max-height: calc(100% - var(--tb-h) - 16px);
  display: flex; flex-direction: column; background: var(--cream); border: 3px solid var(--a); border-radius: 18px 18px 14px 14px; overflow: hidden;
  box-shadow: 0 16px 34px rgba(60, 25, 20, .35); animation: pop .16s ease-out;
}
#startMenu::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 12px; background-color: #fff; background-image: linear-gradient(90deg, color-mix(in srgb, var(--a) 50%, transparent) 50%, transparent 50%), linear-gradient(color-mix(in srgb, var(--a) 50%, transparent) 50%, transparent 50%); background-size: 8px 8px; pointer-events: none; }
@keyframes pop { from { transform: translateY(10px); opacity: 0; } }
.start-head { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 22px 10px 14px; border-bottom: 2px dashed var(--a3); }
.start-logo { width: 46px; height: 46px; flex: none; background: var(--apple-svg) center/contain no-repeat; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)); }
.start-head strong { display: block; font: 30px/1 var(--f-hand); color: var(--a); }
.start-head small { font: 15px var(--f-hand); color: var(--ink-soft); }
.start-bow { position: absolute; right: 18px; top: 8px; width: 46px; height: 28px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .9) 0 4px, transparent 4px 8px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .9) 0 4px, transparent 4px 8px), var(--a); -webkit-mask: inherit; }
.start-bow { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 28'%3E%3Cpath d='M23 12 C16 2 4 2 3 9 C2 16 12 18 21 14 L14 27 L19 26 L23 16 L27 26 L32 27 L25 14 C34 18 44 16 43 9 C42 2 30 2 23 12Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 28'%3E%3Cpath d='M23 12 C16 2 4 2 3 9 C2 16 12 18 21 14 L14 27 L19 26 L23 16 L27 26 L32 27 L25 14 C34 18 44 16 43 9 C42 2 30 2 23 12Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.start-search { margin: 8px 22px 4px 12px; width: auto; }
.start-list { list-style: none; margin: 0; padding: 4px 18px 4px 8px; overflow-y: auto; flex: 1; min-height: 0; }
.start-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 4px 8px; border: 0; background: none; border-radius: 10px; cursor: pointer; text-align: left; font: 18px/1.2 var(--f-hand); }
.start-item img { width: 32px; height: 32px; flex: none; object-fit: contain; }
.start-item span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.start-item:hover, .start-item:focus-visible { background: var(--a3); color: var(--a2); }
.chev { width: 8px; height: 8px; border-right: 2px solid var(--ink-soft); border-top: 2px solid var(--ink-soft); transform: rotate(45deg); }
.start-sep { font: 14px var(--f-hand); color: var(--ink-soft); padding: 8px 8px 2px; border-top: 2px dashed var(--a3); margin-top: 4px; }
.start-empty { padding: 10px; color: var(--ink-soft); }
.start-extra { display: flex; gap: 6px; padding: 6px 22px 6px 12px; border-top: 2px dashed var(--a3); }
.start-mini { flex: 1; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 5px; cursor: pointer; font-weight: 700; font-size: 13px; }
.start-mini:hover { background: var(--a4); }
.start-foot { display: flex; gap: 8px; padding: 8px 22px 8px 10px; background: linear-gradient(var(--tb1), var(--tb2)); }
.power { flex: 1; display: flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; font: 17px var(--f-hand); padding: 3px 6px; border-radius: 8px; }
.power:hover { background: rgba(255, 255, 255, .6); }
.pw { width: 28px; height: 28px; border-radius: 50%; flex: none; position: relative; background: linear-gradient(color-mix(in srgb, var(--a) 60%, #fff), var(--a2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.pw::before { content: ''; position: absolute; inset: 6px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v8M6.5 6.5a8 8 0 1 0 11 0' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v8M6.5 6.5a8 8 0 1 0 11 0' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- Lock / shutdown ---------- */
.lock { position: absolute; inset: 0; z-index: 9500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 20px; }
.lock-welcome { background: linear-gradient(160deg, var(--a3), var(--cream) 60%); }
.lock-off { background: #2a1f1d; color: #f3dcc4; font: 24px var(--f-hand); }
.lock-title { font: 46px var(--f-hand); color: var(--a); }
.lock small { font-size: 13px; opacity: .8; }
.welcome-user { display: flex; align-items: center; gap: 12px; padding: 10px 22px 10px 12px; border-radius: 18px; border: 3px solid var(--a); background: #fff; font: 24px var(--f-hand); cursor: pointer; box-shadow: 0 6px 16px rgba(60, 25, 20, .2); }
.welcome-user:hover { background: var(--a4); }
.power-on { width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer; background: none; padding: 0; }
.power-on .pw { width: 72px; height: 72px; display: block; }
.power-on .pw::before { inset: 18px; }

/* ---------- Toasts, dialogs ---------- */
.toast { pointer-events: auto; background: var(--cream); border: 2px solid var(--a); border-radius: 12px; padding: 8px 12px; box-shadow: 0 6px 16px rgba(60, 25, 20, .22); font-weight: 600; transition: opacity .3s, transform .3s; animation: pop .2s; }
.toast-warn { border-color: var(--danger); background: #fff1ee; }
.toast.out { opacity: 0; transform: translateX(20px); }
.modal-wrap { position: absolute; inset: 0; z-index: 8500; display: grid; place-items: center; background: rgba(60, 25, 20, .25); padding: 16px; }
.modal { width: min(360px, 100%); background: var(--cream); border: 3px solid var(--a); border-radius: 16px; overflow: hidden; box-shadow: 0 16px 36px rgba(60, 25, 20, .35); animation: pop .16s; }
.modal-title { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font: 20px var(--f-hand); color: var(--on-a); background: linear-gradient(color-mix(in srgb, var(--a) 55%, #fff), var(--a) 50%, var(--a2)); }
.modal p, .modal-label { margin: 14px 16px; display: block; font-weight: 600; }
.modal-label .field { margin-top: 8px; width: 100%; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 14px 14px; }
.mini-apple { width: 20px; height: 20px; background: var(--apple-svg) center/contain no-repeat; }

/* ---------- Shared controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 4px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: linear-gradient(#fff, var(--ivory)); font-weight: 700; font-size: 13px; color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(60, 25, 20, .15); white-space: nowrap;
}
.btn:hover { border-color: var(--a); }
.btn-primary { color: var(--on-a); border-color: var(--a2); background: linear-gradient(color-mix(in srgb, var(--a) 55%, #fff), var(--a) 50%, var(--a2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 3px rgba(60, 25, 20, .2); }
.btn-danger { color: #fff; border-color: #8f1f19; background: linear-gradient(#e6766f, var(--danger) 55%, #8f1f19); }
.btn-sm { min-height: 26px; padding: 2px 10px; font-size: 12px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.icon-btn { width: 32px; height: 32px; padding: 0; border-radius: 50%; }
.field {
  font: inherit; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: 10px; padding: 6px 10px; min-height: 34px; width: 100%;
}
.field:focus { border-color: var(--a); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 22%, transparent); }
textarea.field { resize: vertical; line-height: 1.5; }
select.field { cursor: pointer; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { border: 1px solid color-mix(in srgb, var(--a) 40%, #fff); background: var(--a4); color: var(--a2); padding: 4px 16px; border-radius: 10px 10px 4px 4px; font: 17px var(--f-hand); cursor: pointer; }
.tab[aria-selected="true"] { background: linear-gradient(color-mix(in srgb, var(--a) 60%, #fff), var(--a)); color: var(--on-a); border-color: var(--a2); }
.empty { color: var(--ink-soft); text-align: center; padding: 24px 16px; font: 18px var(--f-hand); }
.hand { font-family: var(--f-hand); }
.muted { color: var(--ink-soft); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Two-pane app layout used by most apps */
.app { display: flex; height: 100%; min-height: 0; }
.side { width: 190px; flex: none; overflow-y: auto; padding: 10px 8px; background: linear-gradient(90deg, var(--a4), var(--cream)); border-right: 2px dashed var(--a3); }
.side h3 { margin: 10px 6px 4px; font: 16px var(--f-hand); color: var(--ink-soft); }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.side-item { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; padding: 5px 10px; border: 0; background: none; border-radius: 10px; cursor: pointer; font: 17px/1.2 var(--f-hand); }
.side-item .count { margin-left: auto; font: 12px var(--f-body); color: var(--ink-soft); }
.side-item:hover { background: rgba(255, 255, 255, .8); }
.side-item[aria-current="true"] { background: linear-gradient(color-mix(in srgb, var(--a) 50%, #fff), var(--a)); color: var(--on-a); }
.side-item[aria-current="true"] .count { color: inherit; }
.side-item .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--a); box-shadow: inset 0 -2px 2px rgba(0, 0, 0, .2); }
.main { flex: 1; min-width: 0; overflow: auto; padding: 12px 14px; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 12px; border-bottom: 2px dashed var(--a3); background: var(--cream); position: sticky; top: 0; z-index: 2; }
.compact .app { flex-direction: column; }
.compact .side { width: auto; max-height: 34%; border-right: 0; border-bottom: 2px dashed var(--a3); }
.compact .side-list { flex-direction: row; flex-wrap: wrap; }
.compact .side-item { width: auto; }