/* ==========================================================================
   TooLab.io desktop shell
   ========================================================================== */
:root {
  --ink: #0d1726;
  --surface: #152031;
  --surface-2: #1c2a3f;
  --surface-3: #25364f;
  --line: rgba(148, 172, 214, 0.16);
  --line-strong: rgba(148, 172, 214, 0.28);
  --text: #e8eef8;
  --text-2: #aab9ce;
  --text-3: #7487a1;
  --accent: #47c6e8;
  --accent-ink: #052330;
  --pass: #45d49a;
  --warn: #f3b94d;
  --fail: #f2706d;
  --taskbar-h: 52px;
  --radius-win: 12px;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans Hebrew", sans-serif;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --shadow-win: 0 28px 70px -18px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.07);
  --glass: rgba(16, 25, 40, 0.8);
  --glass-border: rgba(255, 255, 255, 0.08);
  --flyout-bg: rgba(20, 31, 48, 0.93);
  --menu-bg: rgba(22, 33, 51, 0.96);
  --widget-bg: rgba(8, 15, 27, 0.56);
  --hover: rgba(255, 255, 255, 0.08);
  --hover-strong: rgba(255, 255, 255, 0.11);
  --field-bg: rgba(0, 0, 0, 0.28);
  --well: rgba(0, 0, 0, 0.22);
  --frame-bg: #121b29;
  --flag-ring: rgba(255, 255, 255, 0.18);
  --badge-ink: #062014;
  color-scheme: dark;
}

/* Light theme: the same tokens, switched with <html data-theme="light"> (js/theme.js). */
:root[data-theme="light"] {
  --ink: #e9eef5;
  --surface: #ffffff;
  --surface-2: #f1f4f9;
  --surface-3: #e3e9f1;
  --line: rgba(20, 40, 80, 0.12);
  --line-strong: rgba(20, 40, 80, 0.22);
  --text: #152033;
  --text-2: #46566d;
  --text-3: #6d7c92;
  --accent: #0b7ea3;
  --accent-ink: #ffffff;
  --pass: #14895c;
  --warn: #a66a00;
  --fail: #c83a35;
  --shadow-win: 0 28px 70px -18px rgba(10, 20, 40, 0.38), 0 0 0 1px rgba(20, 40, 80, 0.1);
  --glass: rgba(242, 246, 251, 0.84);
  --glass-border: rgba(20, 40, 80, 0.1);
  --flyout-bg: rgba(248, 250, 253, 0.95);
  --menu-bg: rgba(255, 255, 255, 0.97);
  --widget-bg: rgba(250, 252, 255, 0.74);
  --hover: rgba(20, 40, 80, 0.07);
  --hover-strong: rgba(20, 40, 80, 0.11);
  --field-bg: #ffffff;
  --well: rgba(20, 40, 80, 0.05);
  --frame-bg: #f3f5f9;
  --flag-ring: rgba(0, 0, 0, 0.15);
  --badge-ink: #ffffff;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  background: var(--ink);
  color: var(--text);
  font: 14px/1.4 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: default; }
img { display: block; }
.ic { width: 20px; height: 20px; flex: none; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- accessibility ---------- */
/* Read by screen readers and search engines, not shown on screen (the page's h1, the clock's name before the script runs) */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* "Skip to the desktop icons": the first stop of the Tab key, shown only while it has focus */
.skip-link {
  position: fixed;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-win);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
#icon-layer:focus { outline: none; }

/* ---------- app tiles (desktop, start menu, window bars) ---------- */
.tile {
  --tile: #47c6e8;
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  color: #fff;
  background:
    radial-gradient(120% 90% at 30% 0%, color-mix(in oklab, var(--tile) 55%, white) 0%, transparent 60%),
    linear-gradient(160deg, var(--tile), color-mix(in oklab, var(--tile) 62%, #061020));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 8px 18px -8px rgba(0, 0, 0, 0.7);
}
.tile .ic { width: 28px; height: 28px; stroke-width: 1.9; }
.tile-sm { width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.tile-sm .ic { width: 16px; height: 16px; stroke-width: 2.1; }
.tile-lg { width: 46px; height: 46px; border-radius: 13px; }
.tile-lg .ic { width: 26px; height: 26px; }

/* ---------- wallpaper ---------- */
#wallpaper { position: fixed; inset: 0; z-index: 0; background-color: #0b1626; }
.wp-circuit {
  background:
    radial-gradient(1100px 700px at 82% 8%, rgba(71, 198, 232, 0.17), transparent 62%),
    radial-gradient(900px 620px at 6% 96%, rgba(69, 212, 154, 0.09), transparent 60%),
    url("../assets/circuit.svg"),
    linear-gradient(165deg, #10243b 0%, #0b1727 55%, #091220 100%);
}
.wp-dusk {
  background:
    radial-gradient(900px 600px at 18% 18%, rgba(255, 145, 110, 0.28), transparent 62%),
    radial-gradient(1000px 700px at 88% 80%, rgba(126, 92, 230, 0.35), transparent 60%),
    linear-gradient(160deg, #2a1838 0%, #1a1530 50%, #0f1124 100%);
}
.wp-graphite {
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(255, 255, 255, 0.08), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #24282f 0%, #17191e 100%);
}
.wp-ocean {
  background:
    radial-gradient(900px 600px at 75% 20%, rgba(40, 210, 200, 0.28), transparent 60%),
    radial-gradient(1100px 800px at 10% 100%, rgba(30, 110, 230, 0.4), transparent 62%),
    linear-gradient(170deg, #06324a 0%, #072338 50%, #04162a 100%);
}

/* Photo wallpaper: the image is set inline by js/desktop.js. A light shade keeps icon labels readable. */
.wp-image { background: #0b1626 center / cover no-repeat; }
.wp-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 10, 20, 0.12), rgba(4, 10, 20, 0.32));
}
/* A photo can be bright right behind an icon name, so on photo wallpapers each name gets a dark backing */
#wallpaper.wp-image ~ #desktop .d-label {
  max-width: calc(100% + 8px);
  margin-inline: -4px;
  padding: 1px 4px;
  border-radius: 5px;
  background: rgba(4, 10, 20, 0.5);
}

/* ---------- desktop ---------- */
#desktop { position: fixed; inset: 0 0 var(--taskbar-h) 0; overflow: hidden; z-index: 1; }
#icon-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#icon-layer > * { pointer-events: auto; }
/* More icons than fit on the screen: the icon area scrolls (desktop.js adds .is-scroll) */
#icon-layer.is-scroll { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; scrollbar-width: thin; }
#icon-layer.is-scroll .d-icon { touch-action: pan-y; }
#icon-layer > .d-spacer { position: absolute; inset-inline-start: 0; width: 1px; height: 1px; pointer-events: none; }
.icons-scroll #info-widget { z-index: 4; }
#window-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }

.d-icon {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 9px 4px 6px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  text-align: center;
  touch-action: none;
  transition: inset-inline-start 0.22s ease, top 0.22s ease, background-color 0.12s;
}
.d-icon.no-anim, .d-icon.is-dragging { transition: none; }
.d-icon:hover { background: rgba(255, 255, 255, 0.07); }
.d-icon.is-selected { background: rgba(71, 198, 232, 0.17); border-color: rgba(71, 198, 232, 0.42); }
.d-icon.is-dragging { z-index: 4; opacity: 0.88; }
.d-icon.is-dragging .tile { box-shadow: 0 18px 30px -10px rgba(0, 0, 0, 0.8); }
.d-label {
  max-width: 100%;
  font-size: 12.5px;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.45);
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.d-badge {
  position: absolute;
  top: 3px;
  inset-inline-end: calc(50% - 38px);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #0d1726;
  color: var(--badge-ink);
}
.d-badge .ic { width: 12px; height: 12px; stroke-width: 3; }
.d-badge.pass { background: var(--pass); }
.d-badge.fail { background: var(--fail); color: #2a0606; }
:root[data-theme="light"] .d-badge.fail { color: #fff; }
/* Kind of tool (test / utility / app), opposite the V / X */
.d-kind {
  position: absolute;
  top: 3px;
  inset-inline-start: calc(50% - 38px);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #0d1726;
  background: #16233a;
  color: var(--kind);
}
.d-kind .ic { width: 12px; height: 12px; stroke-width: 2.4; }
#drop-cell {
  position: absolute;
  border-radius: 10px;
  border: 1.5px dashed rgba(71, 198, 232, 0.6);
  background: rgba(71, 198, 232, 0.08);
  pointer-events: none;
}

/* ---------- "This computer" panel ---------- */
#info-widget {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-end: 18px;
  width: 312px;
  padding: 16px 18px 10px;
  border-radius: 16px;
  background: var(--widget-bg);
  border: 1px solid var(--glass-border);
  color: var(--text);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  font-size: 12.5px;
  z-index: 2;
  -webkit-user-select: text;
  user-select: text;
}
.iw-time { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; }
.iw-clock { font-size: 40px; font-weight: 300; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; text-align: start; }
.iw-date { color: var(--text-2); font-size: 13px; }
.iw-ip {
  display: grid;
  gap: 1px;
  padding: 10px 12px;
  margin: 0 -4px 8px;
  border-radius: 10px;
  background: rgba(71, 198, 232, 0.09);
  border: 1px solid rgba(71, 198, 232, 0.22);
}
.iw-ip-label { color: var(--accent); font-size: 11.5px; font-weight: 600; }
.iw-ip-value { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: start; unicode-bidi: isolate; }
[dir="rtl"] .iw-ip-value { text-align: right; }
.iw-ip-note { color: var(--text-3); font-size: 11px; }
.iw-ip6 { color: var(--text-2); font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: start; unicode-bidi: isolate; overflow-wrap: anywhere; }
.iw-ip6 { margin-top: 4px; }
.iw-ip6 b { display: block; color: var(--text-3); font-size: 10.5px; font-weight: 600; }
[dir="rtl"] .iw-ip6 { text-align: right; }
.iw-rows { margin: 0; display: grid; gap: 1px; }
.iw-row { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 3px 0; }
.iw-row dt { color: var(--text-3); }
.iw-row dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.iw-dim { color: var(--text-3); }
.iw-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px -6px 0;
  padding: 5px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
}
.iw-toggle:hover { color: var(--text); background: var(--hover); }
.iw-toggle .ic { width: 15px; height: 15px; }
#info-widget.is-collapsed .iw-rows { display: none; }
/* On phones the panel stays closed until the network button opens it (desktop.js) */
#info-widget.is-away { display: none; }
#info-widget.is-popped { z-index: 4; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.7); animation: iw-pop 0.2s ease-out; }
@keyframes iw-pop { from { opacity: 0; transform: translateY(10px); } }

/* ---------- windows ---------- */
.win {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 300px;
  min-height: 200px;
  background: var(--surface);
  border-radius: var(--radius-win);
  box-shadow: var(--shadow-win);
  overflow: hidden;
  pointer-events: auto;
  transition: opacity 0.16s ease, transform 0.18s ease, visibility 0.18s;
}
.win.is-opening { opacity: 0; transform: scale(0.96) translateY(10px); }
.win.is-closing { opacity: 0; transform: scale(0.96); pointer-events: none; }
.win.is-min { opacity: 0; transform: scale(0.85) translateY(40%); visibility: hidden; pointer-events: none; }
.win.is-max, .win.snap-left, .win.snap-right {
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  border-radius: 0;
}
.win.snap-left, .win.snap-right { width: 50% !important; }
.win.snap-right { left: 50% !important; }
.win-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding-inline-start: 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  touch-action: none;
}
.win-tile { width: 24px; height: 24px; border-radius: 7px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.win-tile .ic { width: 15px; height: 15px; stroke-width: 2.1; }
.win-title {
  flex: 1;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win:not(.is-active) .win-bar { background: var(--surface); }
.win:not(.is-active) .win-title { color: var(--text-3); }
.win:not(.is-active) .win-tile { filter: saturate(0.45) brightness(0.85); }
.win-actions { display: flex; height: 100%; }
.win-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text-2);
}
.win-btn .ic { width: 16px; height: 16px; }
.win-btn:hover { background: var(--hover-strong); color: var(--text); }
.win-btn.win-close:hover { background: #d8433e; color: #fff; }
.win-body { position: relative; flex: 1; min-height: 0; background: var(--surface); }
.win-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--frame-bg); }
.win-loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--frame-bg); }
.spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(71, 198, 232, 0.2);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.wm-busy iframe { pointer-events: none; }
.wm-busy, .wm-busy * { -webkit-user-select: none; user-select: none; }

.rz { position: absolute; z-index: 3; }
.rz-n { top: 0; left: 10px; right: 10px; height: 5px; cursor: ns-resize; }
.rz-s { bottom: 0; left: 10px; right: 10px; height: 6px; cursor: ns-resize; }
.rz-e { right: 0; top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
.rz-w { left: 0; top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
.rz-ne { top: 0; right: 0; width: 12px; height: 12px; cursor: nesw-resize; }
.rz-nw { top: 0; left: 0; width: 12px; height: 12px; cursor: nwse-resize; }
.rz-se { bottom: 0; right: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.rz-sw { bottom: 0; left: 0; width: 14px; height: 14px; cursor: nesw-resize; }
.win.is-max .rz, .win.snap-left .rz, .win.snap-right .rz { display: none; }
.win.snap-left .rz-e, .win.snap-right .rz-w { display: block; }

#snap-preview {
  position: absolute;
  z-index: 4;
  top: 8px;
  bottom: 8px;
  left: 8px;
  right: 8px;
  border-radius: 14px;
  background: rgba(71, 198, 232, 0.12);
  border: 1.5px solid rgba(71, 198, 232, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
  transition: opacity 0.14s, transform 0.14s, left 0.14s, right 0.14s;
}
#snap-preview.is-on { opacity: 1; transform: none; }
#snap-preview.snap-left { right: calc(50% + 4px); }
#snap-preview.snap-right { left: calc(50% + 4px); }

/* ---------- taskbar ---------- */
#taskbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--taskbar-h);
  padding: 0 0 0 8px;
  padding-inline: 8px 0;
  background: var(--glass);
  border-top: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
}
#start-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding-inline: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-weight: 650;
  font-size: 14px;
}
.start-logo { width: 28px; height: 28px; transition: transform 0.18s; }
#start-btn:hover, #start-btn[aria-expanded="true"] { background: var(--hover-strong); }
#start-btn:active .start-logo { transform: scale(0.9); }
#home-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
}
#home-btn:hover { background: var(--hover-strong); }
#home-btn .ic { width: 20px; height: 20px; transition: transform 0.18s; }
#home-btn:active .ic { transform: scale(0.9); }
#task-list {
  flex: 1;
  display: flex;
  gap: 4px;
  min-width: 0;
  height: 100%;
  align-items: center;
  overflow: hidden;
}
.tb-sep { flex: none; align-self: stretch; width: 1px; background: var(--line); }
.task-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 1 190px;
  min-width: 46px;
  height: 40px;
  padding-inline: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
}
.task-btn:hover { background: var(--hover); }
.task-btn.is-active { background: var(--hover-strong); color: var(--text); }
.task-btn::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 8px;
  height: 3px;
  margin-left: -4px;
  border-radius: 2px;
  background: var(--text-3);
  transition: width 0.18s, margin 0.18s, background-color 0.18s;
}
.task-btn.is-active::after { width: 22px; margin-left: -11px; background: var(--accent); }
.task-name { min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tray { display: flex; align-items: center; gap: 2px; height: 100%; }
.tray-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  white-space: nowrap;
}
.tray-btn:hover, .tray-btn[aria-expanded="true"] { background: var(--hover-strong); }
.tray-btn .ic { width: 18px; height: 18px; }
.tray-ip, .tray-pct { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text-2); }
#tray-net.is-off { color: var(--fail); }
.flag { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px var(--flag-ring); }
.lang-code { font-size: 12.5px; font-weight: 650; }
#clock-btn { flex-direction: column; justify-content: center; gap: 1px; line-height: 1.15; padding: 0 10px; }
.clk-time { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.clk-date { font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
#show-desktop {
  width: 10px;
  height: 100%;
  margin-inline-start: 4px;
  border: 0;
  border-inline-start: 1px solid var(--line-strong);
  background: transparent;
}
#show-desktop:hover { background: var(--hover-strong); }

/* ---------- flyouts ---------- */
.flyout {
  position: fixed;
  z-index: 60;
  bottom: calc(var(--taskbar-h) + 10px);
  background: var(--flyout-bg);
  border: 1px solid var(--glass-border);
  color: var(--text);
  border-radius: 16px;
  box-shadow: 0 34px 80px -24px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  backdrop-filter: blur(26px) saturate(1.3);
  animation: fly-in 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes fly-in { from { opacity: 0; transform: translateY(12px); } }
.fly-end { inset-inline-end: 10px; }
.fly-title { padding: 6px 10px 8px; font-size: 12px; font-weight: 600; color: var(--text-3); }

#start-menu {
  inset-inline-start: 10px;
  display: flex;
  flex-direction: column;
  width: min(580px, calc(100vw - 20px));
  max-height: calc(100vh - var(--taskbar-h) - 24px);
  max-height: calc(100dvh - var(--taskbar-h) - 24px);
  padding: 18px 18px 0;
  overflow: hidden;
}
.sm-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  border-radius: 21px;
  background: var(--field-bg);
  border: 1px solid var(--line);
  color: var(--text-3);
}
.sm-search:focus-within { border-color: var(--accent); }
.sm-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}
.sm-search input::placeholder { color: var(--text-3); }
.sm-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(71, 198, 232, 0.28);
  background: linear-gradient(100deg, rgba(71, 198, 232, 0.16), rgba(71, 198, 232, 0.04));
  text-align: start;
}
.sm-hero:hover { background: linear-gradient(100deg, rgba(71, 198, 232, 0.24), rgba(71, 198, 232, 0.08)); }
.sm-hero-text { flex: 1; display: grid; gap: 2px; }
.sm-hero-text strong { font-size: 15px; }
.sm-hero-text small { color: var(--text-2); font-size: 12.5px; }
.sm-hero-arrow { color: var(--accent); }
.sm-head { margin: 18px 4px 8px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.sm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 4px;
  overflow-y: auto;
  padding-bottom: 12px;
  margin: 0 -6px;
  min-height: 0;
}
.sm-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 6px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 12.5px;
  text-align: center;
}
.sm-item:hover, .sm-item:focus-visible { background: var(--hover); }
.sm-item .tile { width: 44px; height: 44px; border-radius: 13px; }
.sm-item .tile .ic { width: 24px; height: 24px; }
.sm-empty { margin: 6px 4px 18px; color: var(--text-3); }
.sm-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 -18px;
  padding: 12px 18px;
  background: var(--well);
  border-top: 1px solid var(--line);
}
.sm-brand { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.sm-brand img { width: 32px; height: 32px; }
.sm-brand span { display: grid; line-height: 1.25; }
.sm-brand small { color: var(--text-3); font-size: 11.5px; }
.sm-actions { display: flex; align-items: center; gap: 4px; }
.sm-langs { display: flex; padding-inline-end: 6px; margin-inline-end: 4px; border-inline-end: 1px solid var(--line); }
.sm-act {
  display: grid;
  place-items: center;
  width: 38px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
}
.sm-act:hover { background: var(--hover); color: var(--text); }
/* language dropdown */
.sm-langsel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding-inline: 9px 7px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--text-2);
  cursor: pointer;
}
.sm-langsel:hover { background: var(--hover); color: var(--text); }
.sm-langsel:focus-within { border-color: var(--accent); }
.sm-langsel img { width: 24px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px var(--flag-ring); }
.sm-langsel select {
  max-width: 108px;
  height: 100%;
  padding: 0 18px 0 0;
  border: 0;
  outline: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f93b0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0 center / 14px;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
[dir="rtl"] .sm-langsel select { padding: 0 0 0 18px; background-position: left 0 center; }
.sm-langsel option { background: var(--surface); color: var(--text); }

/* wallpaper picker */
#wp-picker {
  top: 0;
  bottom: var(--taskbar-h);
  left: 0;
  right: 0;
  margin: auto;
  width: min(640px, calc(100vw - 20px));
  height: fit-content;
  max-height: calc(100vh - var(--taskbar-h) - 24px);
  max-height: calc(100dvh - var(--taskbar-h) - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#wp-picker[hidden] { display: none; }
.wp-head { display: flex; align-items: center; gap: 10px; padding: 16px 12px 6px 20px; padding-inline: 20px 12px; }
.wp-head h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 650; }
.wp-close { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); }
.wp-close:hover { background: var(--hover-strong); color: var(--text); }
.wp-close .ic { width: 17px; height: 17px; }
.wp-body { overflow-y: auto; padding: 0 20px 20px; }
.wp-sec { margin: 14px 0 10px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.wp-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #0b1626;
  overflow: hidden;
  transition: border-color 0.12s, transform 0.12s;
}
.wp-thumb:hover { border-color: var(--line-strong); }
.wp-thumb.is-on { border-color: var(--accent); }
.wp-thumb img, .wp-swatch { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wp-swatch.wp-circuit { background-size: auto, auto, 120px 120px, auto; }
.wp-check {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  display: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
}
.wp-check .ic { width: 13px; height: 13px; stroke-width: 3; }
.wp-thumb.is-on .wp-check { display: grid; }
.wp-empty { margin: 0; padding: 14px; border-radius: 10px; background: var(--well); color: var(--text-3); font-size: 13px; }

#legal-menu { width: 290px; padding: 8px; }
.legal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 13.5px;
}
.legal-name { flex: 1; }
.legal-item > .ic { width: 15px; height: 15px; color: var(--text-3); }
.legal-item:hover, .legal-item:focus-visible { background: var(--hover); outline: none; }
.legal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 2px 0;
  padding: 8px 8px 2px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 12px;
}
.legal-about { padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--accent); font-size: 12.5px; font-weight: 600; }
.legal-about:hover { background: rgba(71, 198, 232, 0.12); }
#legal-btn .ic { width: 19px; height: 19px; }

#lang-menu { width: 230px; padding: 8px; }
.lang-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: start;
}
.lang-opt span { flex: 1; }
.lang-opt:hover { background: var(--hover); }
.lang-opt.is-on { background: rgba(71, 198, 232, 0.12); }
.lang-opt .ic { width: 16px; height: 16px; color: var(--accent); }

#cal-menu { width: 320px; padding: 0 0 12px; overflow: hidden; }
.cal-now { padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.cal-time { font-size: 34px; font-weight: 300; font-variant-numeric: tabular-nums; line-height: 1.05; text-align: start; }
[dir="rtl"] .cal-time { text-align: right; }
.cal-date { margin-top: 4px; color: var(--accent); font-size: 13.5px; }
.cal-alt { margin-top: 2px; color: var(--text-2); font-size: 12.5px; }
.cal-head { display: flex; align-items: center; gap: 4px; padding: 12px 14px 6px 18px; padding-inline: 18px 12px; }
.cal-month { flex: 1; font-weight: 600; }
.cal-nav {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
}
.cal-nav:hover { background: var(--hover); color: var(--text); }
.cal-nav .ic { width: 16px; height: 16px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 0 12px; text-align: center; }
.cal-wd { padding: 6px 0; font-size: 11.5px; color: var(--text-3); }
.cal-day { display: grid; place-items: center; height: 36px; border-radius: 50%; font-size: 13px; font-variant-numeric: tabular-nums; }
.cal-day.is-today { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.cal-today {
  display: block;
  margin: 8px 12px 0 auto;
  margin-inline: auto 12px;
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font-weight: 600;
}
.cal-today:hover { background: rgba(71, 198, 232, 0.12); }

/* ---------- context menu ---------- */
.menu {
  position: fixed;
  z-index: 70;
  min-width: 220px;
  padding: 6px;
  border-radius: 12px;
  background: var(--menu-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 22px 50px -16px rgba(0, 0, 0, 0.8);
  color: var(--text);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  animation: fly-in 0.12s ease-out;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  text-align: start;
  font-size: 13.5px;
}
.menu-item .ic { width: 17px; height: 17px; color: var(--text-2); }
.menu-item:hover, .menu-item:focus-visible { background: var(--hover-strong); outline: none; }
.menu-sep { height: 1px; margin: 5px 6px; background: var(--line); }

/* ---------- notifications ---------- */
#toasts {
  position: fixed;
  z-index: 80;
  inset-inline-end: 14px;
  bottom: calc(var(--taskbar-h) + 14px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(360px, calc(100vw - 28px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 10px 12px 14px;
  padding-inline: 14px 8px;
  border-radius: 12px;
  background: var(--menu-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 44px -16px rgba(0, 0, 0, 0.8);
  color: var(--text);
  pointer-events: auto;
  animation: toast-in 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
  transition: opacity 0.2s, transform 0.2s;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.toast.is-leaving { opacity: 0; transform: translateY(8px); }
.toast-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(71, 198, 232, 0.16); color: var(--accent); flex: none; }
.toast-ic .ic { width: 17px; height: 17px; }
.toast.pass .toast-ic { background: rgba(69, 212, 154, 0.16); color: var(--pass); }
.toast.fail .toast-ic { background: rgba(242, 112, 109, 0.16); color: var(--fail); }
.toast-text { flex: 1; padding-top: 4px; font-size: 13.5px; line-height: 1.4; }
.toast-x { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--text-3); flex: none; }
.toast-x:hover { background: var(--hover); color: var(--text); }
.toast-x .ic { width: 15px; height: 15px; }

/* ---------- boot screen ---------- */
#boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: radial-gradient(800px 500px at 50% 40%, #0f2238, #060b14 70%);
  transition: opacity 0.36s ease;
  --text-2: #aab9ce;
  --text-3: #7487a1;
  --pass: #45d49a;
  --accent: #47c6e8;
}
#boot.is-done { opacity: 0; pointer-events: none; }
.boot-inner { display: grid; justify-items: center; gap: 26px; width: min(420px, 86vw); }
.boot-logo { width: 72px; height: 72px; filter: drop-shadow(0 10px 30px rgba(71, 198, 232, 0.35)); }
.boot-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 150px;
  font: 13px/1.9 var(--mono);
  color: var(--text-2);
}
.boot-lines li { display: flex; align-items: baseline; gap: 8px; animation: fly-in 0.18s ease-out; }
.boot-lines .bdots { flex: 1; border-bottom: 1px dotted rgba(148, 172, 214, 0.35); transform: translateY(-4px); }
.boot-lines .bv { color: var(--pass); max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boot-lines .boot-ready { color: var(--accent); }
.boot-skip { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; color: var(--text-3); font-size: 12px; }

/* light theme: lighter shadows on floating panels */
:root[data-theme="light"] .flyout { box-shadow: 0 30px 70px -24px rgba(10, 20, 40, 0.35), 0 0 0 1px rgba(20, 40, 80, 0.04); }
:root[data-theme="light"] .menu, :root[data-theme="light"] .toast { box-shadow: 0 18px 44px -16px rgba(10, 20, 40, 0.32); }
:root[data-theme="light"] #info-widget { box-shadow: 0 18px 44px -20px rgba(10, 20, 40, 0.35); }
#theme-btn .ic { width: 18px; height: 18px; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .tray-ip { display: none; }
}
@media (max-width: 720px) {
  #info-widget { width: 196px; inset-block-end: 10px; inset-inline-end: 10px; padding: 12px 14px; }
  #info-widget .iw-rows, #info-widget .iw-toggle, #info-widget .iw-ip-note, #info-widget .iw-ip6 { display: none; }
  .iw-time { padding-bottom: 8px; }
  .iw-clock { font-size: 28px; }
  .iw-date { font-size: 12px; }
  .iw-ip { margin: 0; padding: 8px 10px; }
  .iw-ip-value { font-size: 16px; }
  .task-name { display: none; }
  .task-btn { flex: none; padding-inline: 8px; }
  #start-btn span { display: none; }
  #start-btn { padding-inline: 8px; }
  .clk-date { display: none; }
  .win-btn { width: 42px; }
}
@media (max-height: 640px) {
  #info-widget { width: 196px; inset-block-end: 10px; inset-inline-end: 10px; padding: 12px 14px; }
  #info-widget .iw-rows, #info-widget .iw-toggle, #info-widget .iw-ip-note, #info-widget .iw-ip6 { display: none; }
  .iw-time { padding-bottom: 8px; }
  .iw-clock { font-size: 28px; }
  .iw-date { font-size: 12px; }
  .iw-ip { margin: 0; padding: 8px 10px; }
  .iw-ip-value { font-size: 16px; }
}
@media (max-width: 720px), (max-height: 640px) {
  #info-widget.is-popped .iw-ip6 { display: block; }
}
/* Phones: a more compact tray (the language shows its flag only), so the whole taskbar fits with the Accessibility button */
@media (max-width: 480px) {
  #tray { gap: 0; }
  .tray-btn, #clock-btn { padding-inline: 5px; }
  .lang-code { display: none; }
}
@media (max-width: 400px) {
  #taskbar { gap: 3px; }
  .tray-btn, #clock-btn { padding-inline: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}