/* ==========================================================================
   dotvoid — shell: desktop, icons, taskbar, start menu, menus, gadgets
   ========================================================================== */

/* ------------------------------------------------------------------ desktop */
#desktop {
  position: fixed; inset: 0;
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}

#wallpaper {
  position: absolute; inset: 0;
  background: #3b8fe0 center 62% / cover no-repeat;
  transition: opacity .6s ease;
}
#wallpaper.aurora {
  background:
    radial-gradient(120% 70% at 20% 110%, rgba(120, 255, 200, .55), transparent 60%),
    radial-gradient(90% 60% at 85% -10%, rgba(120, 200, 255, .65), transparent 60%),
    conic-gradient(from 210deg at 55% 60%, #0a2c6e, #1a64c8, #23b5d8, #48d6a6, #1a64c8, #0a2c6e),
    #0b3a7c;
}
#wallpaper.aurora::before,
#wallpaper.aurora::after {
  content: ""; position: absolute; inset: -20%;
  background: repeating-radial-gradient(ellipse at 30% 120%, transparent 0 38px, rgba(255, 255, 255, .07) 40px, transparent 46px);
  filter: blur(2px);
}
#wallpaper.aurora::after {
  background: radial-gradient(60% 18% at 50% 58%, rgba(255, 255, 255, .45), transparent 70%);
  transform: rotate(-12deg); filter: blur(10px);
}

/* backgrounds drawn in CSS (also used by the Personalization previews) */
.wp-harmony {
  background:
    radial-gradient(140% 60% at 50% 115%, rgba(255, 255, 255, .55), transparent 55%),
    linear-gradient(170deg, transparent 38%, rgba(255, 255, 255, .28) 44%, transparent 52%),
    linear-gradient(160deg, transparent 50%, rgba(140, 230, 255, .35) 58%, transparent 68%),
    linear-gradient(180deg, #0d3f94, #1f74d6 45%, #6cc0f2) !important;
}
.wp-lagoon {
  background:
    radial-gradient(70% 45% at 25% 85%, rgba(255, 255, 255, .5), transparent 70%),
    radial-gradient(90% 60% at 80% 100%, rgba(40, 210, 180, .7), transparent 70%),
    linear-gradient(180deg, #6fd0ff 0%, #a8ecff 45%, #3fd0c0 75%, #0f9a9a) !important;
}
.wp-sunrise {
  background:
    radial-gradient(28% 22% at 50% 78%, #fff6d0, rgba(255, 210, 120, .85) 35%, transparent 70%),
    linear-gradient(180deg, #3a3f8f 0%, #b5649a 38%, #ff9a6a 62%, #ffd27a 80%, #ffe9b8) !important;
}
.wp-space {
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 28% 62%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 47% 31%, #fff, transparent),
    radial-gradient(1px 1px at 66% 74%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 82% 22%, #fff, transparent),
    radial-gradient(1px 1px at 91% 58%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 5% 84%, #fff, transparent),
    radial-gradient(45% 35% at 70% 40%, rgba(190, 80, 255, .45), transparent 70%),
    radial-gradient(40% 30% at 30% 70%, rgba(40, 140, 255, .4), transparent 70%),
    radial-gradient(30% 25% at 55% 55%, rgba(255, 90, 180, .3), transparent 70%),
    linear-gradient(180deg, #05051a, #120a33 60%, #1a0f40) !important;
  background-size: 260px 260px, 340px 340px, 420px 420px, 300px 300px, 380px 380px, 220px 220px, 500px 500px, auto, auto, auto, auto !important;
}
#wallpaper.custom { background-position: center; background-size: cover; }

/* Personalization › "Turn off window animations" */
.no-anim *, .no-anim *::before, .no-anim *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
.no-anim #clouds .cloud, .no-anim #meadow-world * { animation-duration: revert !important; animation-iteration-count: revert !important; }
.no-quick-launch #quick-launch { display: none; }

/* drifting clouds */
#clouds { position: absolute; inset: 0; pointer-events: none; overflow: hidden; transition: opacity .6s; }
#clouds .cloud {
  position: absolute; left: 0; width: 46vmax; max-width: 820px; opacity: .92;
  will-change: transform; animation: drift linear infinite;
  filter: var(--cloud-filter, none);
}
#clouds .c1 { top: 4%;  width: 40vmax; animation-duration: 190s; animation-delay: -40s; }
#clouds .c2 { top: 17%; width: 30vmax; animation-duration: 260s; animation-delay: -170s; opacity: .8; }
#clouds .c3 { top: 30%; width: 22vmax; animation-duration: 330s; animation-delay: -90s; opacity: .7; }
@keyframes drift {
  from { transform: translateX(-60vmax); }
  to   { transform: translateX(calc(100vw + 10vmax)); }
}
.no-clouds #clouds { opacity: 0; }
.no-clouds #clouds .cloud { animation-play-state: paused; }

#fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* -------------------------------------------------------------------- icons */
#icons {
  position: absolute; inset: 0 0 var(--taskbar-h) 0;
}
.hide-icons #icons .d-icon { display: none; }

.d-icon {
  position: absolute; top: 0; left: 0;
  width: var(--cell-w);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 2px 5px;
  border: 1px solid transparent; border-radius: 4px;
  outline: none;
  transition: background .12s, border-color .12s;
  touch-action: none;
}
.d-icon .d-img {
  width: var(--icon-size); height: var(--icon-size);
  display: grid; place-items: center;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
.d-icon .d-img img { width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
/* shortcut files get the little curved arrow */
.d-icon.link .d-img { position: relative; }
.d-icon.link .d-img::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 36%; height: 36%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='.5' y='.5' width='15' height='15' rx='2' fill='%23fff' stroke='%237a8796'/%3E%3Cpath d='M4 12c0-4 2-6 6-6V3.5L13.5 7 10 10.5V8c-3 0-5 1-6 4z' fill='%231b5fc4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.d-icon .d-label {
  max-width: 100%; padding: 0 2px;
  color: #fff; font-size: 12px; line-height: 1.3; text-align: center;
  text-shadow: 0 0 3px rgba(0, 0, 0, .9), 0 1px 2px rgba(0, 0, 0, .9), 0 0 1px #000;
  overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.d-icon.selected .d-label,
.d-icon:focus-visible .d-label { -webkit-line-clamp: 6; }

@media (hover: hover) {
  .d-icon:hover {
    border-color: rgba(255, 255, 255, .35);
    background: linear-gradient(to bottom, rgba(220, 238, 255, .25), rgba(170, 210, 250, .18));
  }
}
.d-icon.selected {
  border-color: rgba(190, 225, 255, .75);
  background: linear-gradient(to bottom, rgba(170, 215, 255, .52), rgba(110, 175, 240, .42));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
.d-icon:focus-visible { border-color: rgba(255, 255, 255, .85); }
.d-icon.dragging { opacity: .72; transition: none; z-index: 5; pointer-events: none; }
.d-icon.drop-target {
  border-color: rgba(255, 255, 255, .9);
  background: linear-gradient(to bottom, rgba(150, 230, 190, .55), rgba(80, 190, 140, .45));
}
.d-icon.cut .d-img { opacity: .5; }
.d-icon.appear { animation: icon-pop .35s var(--ease-out) both; }
@keyframes icon-pop { from { transform: scale(.4); opacity: 0; } }
.d-icon.settling { transition: left .18s var(--ease-out), top .18s var(--ease-out); }

.d-icon textarea.rename {
  width: 100%; resize: none; overflow: hidden; text-align: center;
  font-size: 12px; line-height: 1.3; padding: 1px 2px;
  border: 1px solid #000; background: #fff; color: #000; outline: none;
}

#selection-rect {
  position: absolute; z-index: 6; pointer-events: none;
  border: 1px solid rgba(160, 210, 255, .95);
  background: rgba(80, 150, 230, .28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
}

/* ------------------------------------------------------------ context menu */
.menu {
  position: fixed; z-index: 2000; min-width: 180px; max-width: 320px;
  padding: 2px;
  border: 1px solid #979797; border-radius: 2px;
  background: #f0f0f0 linear-gradient(to right, #f1f1f1 0 26px, #e2e3e3 26px 27px, #fff 27px 28px, #f5f5f5 28px);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .3);
  font-size: 12.5px; color: #111;
  animation: menu-in .12s ease-out;
  outline: none;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-3px); } }
.menu-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 24px; padding: 2px 22px 2px 4px;
  border: 1px solid transparent; border-radius: 3px;
  white-space: nowrap; user-select: none;
}
.menu-item .mi-icon { width: 20px; height: 16px; display: grid; place-items: center; flex: none; }
.menu-item .mi-icon img,
.menu-item .mi-icon svg { width: 16px; height: 16px; }
.menu-item .mi-label { flex: 1; padding-left: 6px; }
.menu-item .mi-key { color: #6d6d6d; padding-left: 18px; }
.menu-item.bold .mi-label { font-weight: 700; }
.menu-item.disabled { color: #8d8d8d; }
.menu-item.has-sub::after {
  content: ""; position: absolute; right: 8px; top: 50%; margin-top: -4px;
  border: 4px solid transparent; border-left: 4px solid #222; border-right: 0;
}
.menu-item.active:not(.disabled),
.menu-item.open {
  border-color: var(--menu-hl-border);
  background: var(--menu-hl-bg);
}
.menu-item.disabled.active { border-color: #dcdcdc; background: rgba(0, 0, 0, .03); }
.menu-check { width: 16px; height: 16px; color: #1b1b1b; }
.menu-bullet { width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8fc1ef, #18487c); }
.menu-sep { height: 1px; margin: 3px 2px 3px 30px; background: #e0e0e0; border-bottom: 1px solid #fff; }

/* -------------------------------------------------------------------- taskbar */
#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  height: var(--taskbar-h);
  display: flex; align-items: center; gap: 4px;
  padding: 0 0 0 64px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .26) 0, rgba(255, 255, 255, .1) 1px, rgba(255, 255, 255, .08) 48%, rgba(0, 0, 0, .18) 52%, rgba(0, 0, 0, .3) 100%),
    rgba(14, 22, 38, .58);
  border-top: 1px solid rgba(0, 0, 0, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 -1px 8px rgba(0, 0, 0, .25);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  color: #fff;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
#taskbar::before { /* subtle colour from the glass tint */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--glass-rgb), .18), rgba(var(--glass-rgb), .04));
}

/* start orb */
#start-orb {
  position: absolute; left: 6px; bottom: 1px; z-index: 2;
  width: 50px; height: 50px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .85);
  background:
    radial-gradient(circle at 50% 118%, rgba(60, 220, 255, .85), rgba(30, 120, 220, .35) 38%, transparent 62%),
    radial-gradient(circle at 50% 42%, #2a4f7d 0, #0f2546 48%, #050b18 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .35),
    inset 0 -6px 12px rgba(40, 170, 255, .35),
    0 0 6px rgba(0, 0, 0, .55);
  transition: box-shadow .25s, filter .25s;
}
#start-orb::before { /* top gloss */
  content: ""; position: absolute; left: 7px; right: 7px; top: 2px; height: 46%;
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .75), rgba(255, 255, 255, .08));
  pointer-events: none;
}
#start-orb svg { position: relative; width: 30px; height: 30px; margin: auto; filter: drop-shadow(0 0 4px rgba(120, 255, 220, .6)); }
@media (hover: hover) {
  #start-orb:hover {
    filter: brightness(1.25) saturate(1.2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 -6px 14px rgba(60, 220, 255, .65), 0 0 14px rgba(80, 210, 255, .85);
  }
}
#start-orb[aria-expanded="true"],
#start-orb:active { filter: brightness(.9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), inset 0 3px 10px rgba(0, 0, 0, .6), 0 0 10px rgba(80, 210, 255, .7); }

/* quick launch */
#quick-launch {
  display: flex; align-items: center; gap: 1px; padding: 0 6px 0 2px; height: 100%;
  border-right: 1px solid rgba(0, 0, 0, .45);
  box-shadow: 1px 0 0 rgba(255, 255, 255, .12);
}
.ql-btn {
  width: 28px; height: 28px; padding: 0; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 3px; background: transparent;
}
.ql-btn img { width: 20px; height: 20px; }
@media (hover: hover) {
  .ql-btn:hover { border-color: rgba(255, 255, 255, .35); background: linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .06) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .12)); box-shadow: 0 0 6px rgba(140, 200, 255, .5); }
}
.ql-btn:active { background: rgba(0, 0, 0, .25); }

/* task buttons */
#task-buttons {
  flex: 1; min-width: 0; height: 100%;
  display: flex; align-items: center; gap: 3px; padding: 0 4px;
  overflow: hidden;
}
.task-btn {
  position: relative; flex: 0 1 168px; min-width: 40px; height: 32px;
  display: flex; align-items: center; gap: 7px; padding: 0 9px;
  border: 1px solid rgba(0, 0, 0, .65); border-radius: 3px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .07) 49%, rgba(0, 0, 0, .06) 51%, rgba(255, 255, 255, .1) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  color: #fff; text-align: left; white-space: nowrap;
  transition: background .15s, box-shadow .15s;
}
.task-btn img { width: 20px; height: 20px; flex: none; }
.task-btn span { overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 6px rgba(0, 0, 0, .8); }
@media (hover: hover) {
  .task-btn:hover {
    background: linear-gradient(to bottom, rgba(255, 255, 255, .34) 0, rgba(255, 255, 255, .14) 49%, rgba(140, 200, 255, .1) 51%, rgba(140, 210, 255, .32) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 0 8px rgba(140, 200, 255, .45);
  }
}
.task-btn.active {
  background: linear-gradient(to bottom, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .1) 49%, rgba(90, 170, 255, .14) 51%, rgba(110, 200, 255, .38) 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .15);
}
.task-btn.minimized span { opacity: .8; }
.task-btn.flash { animation: task-flash .8s ease-in-out 4; }
@keyframes task-flash { 50% { background: linear-gradient(rgba(255, 190, 80, .7), rgba(240, 140, 30, .7)); } }
.task-btn.enter { animation: task-in .2s var(--ease-out); }
@keyframes task-in { from { opacity: 0; transform: translateY(8px); } }

/* tray */
#tray {
  display: flex; align-items: center; gap: 2px; height: 100%; padding: 0 6px 0 10px;
  border-left: 1px solid rgba(0, 0, 0, .45);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .12);
}
.tray-icon {
  width: 24px; height: 28px; padding: 0; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 3px; background: transparent;
}
.tray-icon svg { width: 16px; height: 16px; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .6)); }
#clock {
  height: 32px; min-width: 64px; padding: 0 6px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0;
  border: 1px solid transparent; border-radius: 3px; background: transparent;
  color: #fff; line-height: 1.15; text-shadow: 0 0 5px rgba(0, 0, 0, .8);
}
#clock .clock-date { font-size: 11px; opacity: .85; }
@media (hover: hover) {
  .tray-icon:hover,
  #clock:hover { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .12); }
}
#clock[aria-expanded="true"] { background: rgba(0, 0, 0, .25); }

#peek {
  width: 14px; height: 100%; padding: 0; margin-left: 2px;
  border: 0; border-left: 1px solid rgba(0, 0, 0, .5);
  background: linear-gradient(to right, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .15);
}
@media (hover: hover) { #peek:hover { background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .12)); } }

/* --------------------------------------------------------------- start menu */
#start-menu {
  position: fixed; left: 2px; bottom: calc(var(--taskbar-h) + 2px); z-index: 1100;
  width: 444px; height: 520px; max-height: calc(100% - var(--taskbar-h) - 8px);
  display: flex; gap: 0; padding: 8px 8px 8px 8px;
  border: 1px solid rgba(0, 0, 0, .75); border-radius: 8px 8px 6px 6px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 30%, rgba(0, 0, 0, .12)),
    linear-gradient(rgba(var(--glass-rgb), calc(var(--glass-alpha) * .5)), rgba(var(--glass-rgb), calc(var(--glass-alpha) * .5))),
    rgba(8, 14, 28, .66);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), var(--shadow-lg);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  transform-origin: bottom left;
  animation: start-in .18s var(--ease-out);
  user-select: none; -webkit-user-select: none;
}
@keyframes start-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }

.sm-left {
  flex: 0 0 252px; width: 252px; min-width: 0; display: flex; flex-direction: column; min-height: 0;
  border: 1px solid rgba(0, 0, 0, .55); border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .45);
  padding: 6px 4px 0;
}
.sm-list { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.sm-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 38px; padding: 3px 6px; margin-bottom: 1px;
  border: 1px solid transparent; border-radius: 3px; background: transparent;
  text-align: left; color: #111;
}
.sm-item img { width: 32px; height: 32px; flex: none; }
.sm-item.small { min-height: 26px; }
.sm-item.small img { width: 20px; height: 20px; }
.sm-item .sm-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sm-item .sm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-item .sm-sub { font-size: 11px; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-item.pinned .sm-name { font-weight: 700; }
.sm-item.new .sm-name::after { content: "new"; margin-left: 6px; padding: 0 5px; border-radius: 6px; font-size: 10px; font-weight: 700; color: #fff; background: linear-gradient(#ffb44a, #f08a00); }
@media (hover: hover) { .sm-item:hover { border-color: var(--menu-hl-border); background: var(--menu-hl-bg); } }
.sm-item:focus-visible,
.sm-item.kbd { outline: none; border-color: var(--menu-hl-border); background: var(--menu-hl-bg); }
.sm-sep { height: 1px; margin: 4px 6px; background: linear-gradient(to right, transparent, #d5dbe3 15%, #d5dbe3 85%, transparent); }
.sm-heading { padding: 6px 8px 2px; font-size: 11px; color: #3b6aa1; font-weight: 600; }
.sm-empty { padding: 14px 10px; color: #666; font-style: italic; }

.sm-all {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; margin: 2px 0 4px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 3px; background: transparent; font-weight: 600; color: #111;
}
.sm-all svg { width: 9px; height: 9px; color: #2a8a2a; }
@media (hover: hover) { .sm-all:hover { border-color: var(--menu-hl-border); background: var(--menu-hl-bg); } }

.sm-search {
  margin: 0 -4px; padding: 7px 8px;
  border-top: 1px solid #d6e5f5;
  background: linear-gradient(#eef4fb, #dfe9f5);
  border-radius: 0 0 3px 3px;
}
.sm-search .input { width: 100%; height: 26px; }

.sm-right {
  flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 0 0 0 8px; position: relative;
}
.sm-pic {
  align-self: center; width: 64px; height: 64px; margin: -26px 0 8px; padding: 3px;
  border-radius: 6px;
  background: linear-gradient(to bottom, #fefefe, #c9d3de);
  border: 1px solid rgba(0, 0, 0, .55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .8);
}
.sm-pic img { width: 100%; height: 100%; border-radius: 3px; transition: opacity .15s; }
.sm-links { flex: 1; display: flex; flex-direction: column; gap: 1px; overflow: auto; min-height: 0; }
.sm-link {
  display: flex; align-items: center; height: 30px; padding: 0 10px; width: 100%;
  border: 1px solid transparent; border-radius: 3px; background: transparent;
  color: #fff; text-align: left; text-shadow: 0 0 8px rgba(0, 0, 0, .9), 0 1px 1px rgba(0, 0, 0, .6);
}
.sm-link.user { font-weight: 700; }
@media (hover: hover) {
  .sm-link:hover {
    border-color: rgba(255, 255, 255, .45);
    background: linear-gradient(to bottom, rgba(255, 255, 255, .32), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .02) 50%, rgba(255, 255, 255, .16));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 0 8px rgba(160, 220, 255, .4);
  }
}
.sm-link:focus-visible { outline: none; border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .18); }
.sm-link-sep { height: 1px; margin: 4px 10px; background: rgba(0, 0, 0, .35); box-shadow: 0 1px 0 rgba(255, 255, 255, .2); }

.sm-power { display: flex; align-items: center; gap: 4px; padding-top: 8px; justify-content: flex-start; }
.sm-pbtn {
  width: 42px; height: 30px; display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(0, 0, 0, .7); border-radius: 4px; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
  transition: filter .15s, box-shadow .15s;
}
.sm-pbtn svg { width: 16px; height: 16px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.sm-pbtn.power { background: linear-gradient(to bottom, #f6b28f 0%, #e07443 48%, #c94a14 52%, #e8854a 100%); }
.sm-pbtn.lock { background: linear-gradient(to bottom, #f6d98f 0%, #e6b440 48%, #c98a12 52%, #e8b84a 100%); }
.sm-pbtn.more { width: 26px; background: linear-gradient(to bottom, rgba(255, 255, 255, .4), rgba(255, 255, 255, .12) 48%, rgba(0, 0, 0, .1) 52%, rgba(255, 255, 255, .2)); }
.sm-pbtn.more svg { width: 9px; height: 9px; }
@media (hover: hover) { .sm-pbtn:hover { filter: brightness(1.15); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 10px rgba(255, 210, 160, .7); } }

/* ------------------------------------------------------------ tray flyouts */
.flyout {
  position: fixed; right: 6px; bottom: calc(var(--taskbar-h) + 6px); z-index: 1150;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, .7); border-radius: 7px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .3), rgba(255, 255, 255, .05) 40%),
    linear-gradient(rgba(var(--glass-rgb), calc(var(--glass-alpha) * .6)), rgba(var(--glass-rgb), calc(var(--glass-alpha) * .6))),
    rgba(20, 30, 50, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), var(--shadow-lg);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  animation: start-in .16s var(--ease-out);
  user-select: none; -webkit-user-select: none;
}
.flyout-inner { background: #fff; border: 1px solid rgba(0, 0, 0, .5); border-radius: 4px; padding: 12px 14px; color: #111; }
.cal-head { font-size: 14px; color: #1e3f6b; margin-bottom: 8px; }
.cal-head b { display: block; font-size: 26px; font-weight: 400; color: #0b2a54; letter-spacing: .5px; }
.cal-body { display: flex; gap: 14px; align-items: flex-start; }
.cal-clock { width: 112px; height: 112px; flex: none; }
.cal-month { min-width: 196px; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cal-nav button { width: 22px; height: 22px; padding: 0; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #2c5c94; display: grid; place-items: center; }
.cal-nav button svg { width: 8px; height: 8px; }
.cal-nav button.prev svg { transform: scaleX(-1); }
@media (hover: hover) { .cal-nav button:hover { border-color: var(--hover-border); background: var(--hover-bg); } }
.cal-nav span { font-weight: 600; color: #1e3f6b; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 28px); gap: 1px; text-align: center; font-size: 12px; }
.cal-grid .dow { color: #3c6aa0; font-size: 11px; padding-bottom: 3px; border-bottom: 1px solid #d8e4f2; margin-bottom: 2px; }
.cal-grid .day { height: 24px; line-height: 22px; border: 1px solid transparent; border-radius: 2px; }
.cal-grid .day.other { color: #aab3bf; }
.cal-grid .day.today { border-color: #6aa0d8; background: linear-gradient(#e8f2fd, #c9def7); font-weight: 700; color: #0b3c7a; }
.flyout-foot { margin-top: 8px; text-align: center; font-size: 12px; }
.flyout-foot a { color: #fff; text-shadow: 0 0 6px #000; }

.vol-flyout { width: 70px; text-align: center; }
.vol-flyout input[type="range"] { writing-mode: vertical-lr; direction: rtl; height: 120px; width: 24px; margin: 0 auto; display: block; }
.vol-flyout .vol-val { color: #fff; text-shadow: 0 0 6px #000; margin-top: 6px; font-weight: 600; }

/* ---------------------------------------------------------------- balloons */
#balloons {
  position: fixed; right: 10px; bottom: calc(var(--taskbar-h) + 10px); z-index: 1500;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.balloon {
  position: relative; width: 300px; max-width: calc(100vw - 20px);
  display: flex; gap: 10px; padding: 10px 28px 11px 11px;
  border: 1px solid #6f7f93; border-radius: 6px;
  background: linear-gradient(to bottom, #ffffff, #e8eef6);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  color: #111; pointer-events: auto;
  animation: balloon-in .28s var(--ease-out);
}
.balloon.out { animation: balloon-out .25s ease-in forwards; }
@keyframes balloon-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes balloon-out { to { opacity: 0; transform: translateY(8px); } }
.balloon img { width: 32px; height: 32px; flex: none; }
.balloon b { display: block; margin-bottom: 2px; color: #0b2a54; }
.balloon p { margin: 0; font-size: 12px; color: #333; }
.balloon .b-close {
  position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; padding: 0;
  border: 1px solid transparent; border-radius: 3px; background: transparent; color: #555; display: grid; place-items: center;
}
.balloon .b-close svg { width: 10px; height: 9px; fill: currentColor; }
@media (hover: hover) { .balloon .b-close:hover { border-color: #c56; background: linear-gradient(#f9b2a2, #e0573b); color: #fff; } }
.balloon.clickable { cursor: pointer; }

/* -------------------------------------------------------------------- gadgets */
#gadgets { position: absolute; inset: 0 0 var(--taskbar-h) 0; pointer-events: none; }
.no-gadgets #gadgets { display: none; }
.gadget {
  position: absolute; width: 150px; pointer-events: auto;
  touch-action: none; user-select: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
  animation: icon-pop .4s var(--ease-out) both;
}
.gadget.dragging { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); z-index: 3; }
.gadget .g-close {
  position: absolute; top: -6px; right: -6px; z-index: 2; width: 18px; height: 18px; padding: 0;
  border: 1px solid rgba(0, 0, 0, .6); border-radius: 50%;
  background: linear-gradient(#f0f4f8, #c7d1dc); color: #333;
  display: grid; place-items: center; opacity: 0; transition: opacity .15s;
}
.gadget .g-close svg { width: 9px; height: 8px; fill: currentColor; }
@media (hover: hover) { .gadget:hover .g-close { opacity: 1; } }
@media (hover: none) { .gadget .g-close { opacity: .85; } }

.g-clock { width: 150px; height: 150px; }
.g-clock svg { width: 100%; height: 100%; }

.g-glass {
  border-radius: 10px; padding: 10px 12px; color: #fff;
  border: 1px solid rgba(0, 0, 0, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.g-weather { background: linear-gradient(to bottom, #6bc3ff 0%, #2e8fe0 52%, #1a6dc4 53%, #3b9be8 100%); }
.g-weather .w-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.g-weather .w-temp { font-size: 34px; font-weight: 300; line-height: 1; }
.g-weather .w-icon,
.g-weather .w-icon svg { width: 58px; height: 46px; }
.g-weather .w-place { font-size: 11px; opacity: .95; margin-top: 4px; }
.g-weather .w-cond { font-size: 12px; font-weight: 600; }
.g-weather .w-days { display: flex; justify-content: space-between; gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .35); font-size: 10px; text-align: center; }
.g-weather .w-days > div { flex: 1; }
.g-weather .w-days svg { width: 22px; height: 18px; margin: 1px auto; }

.g-cpu { background: radial-gradient(circle at 50% 0%, #4a5462, #1b2029 70%); padding: 8px 8px 6px; }
.g-cpu svg { width: 100%; height: auto; }
.g-cpu .needle { transition: transform 1s cubic-bezier(.3, 1.3, .5, 1); }

.g-notes {
  background: linear-gradient(to bottom, #fff7b8, #ffe875);
  border-color: rgba(120, 100, 0, .55); color: #3a3000; text-shadow: none;
  padding: 0;
}
.g-notes textarea {
  display: block; width: 100%; height: 110px; resize: none; border: 0; background: transparent;
  padding: 10px 10px 8px; font: 13px/1.35 "Segoe Print", "Comic Neue", "Comic Sans MS", var(--font); color: #3a3000; outline: none;
}

/* --------------------------------------------------- boot / logon / shutdown */
.screen {
  position: fixed; inset: 0; z-index: 6000;
  display: grid; place-items: center;
  color: #fff; user-select: none; -webkit-user-select: none;
  animation: fade-in .4s ease both;
}
.screen.out { animation: fade-out .5s ease forwards; pointer-events: none; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

.screen-boot { background: #000; }
.boot-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.boot-logo { width: 120px; height: 120px; filter: drop-shadow(0 0 22px rgba(80, 230, 200, .55)); animation: boot-glow 2s ease-in-out infinite alternate; }
@keyframes boot-glow { from { filter: drop-shadow(0 0 10px rgba(80, 230, 200, .35)); } to { filter: drop-shadow(0 0 28px rgba(80, 230, 200, .8)); } }
.boot-name { font-size: 30px; font-weight: 300; letter-spacing: 2px; color: #e9f4ff; }
.boot-name b { font-weight: 600; color: #8ff0d8; }
.boot-bar {
  position: relative; width: 170px; height: 14px; overflow: hidden;
  border: 1px solid #555; border-radius: 3px; background: #050505;
  box-shadow: inset 0 0 0 1px #111;
}
.boot-bar i {
  position: absolute; top: 2px; width: 10px; height: 8px; border-radius: 1px;
  background: linear-gradient(#b6ffe0, #18c08a 55%, #0d8c63);
  box-shadow: 0 0 6px rgba(60, 255, 180, .9);
  animation: boot-slide 1.7s linear infinite;
}
.boot-bar i:nth-child(2) { animation-delay: .13s; }
.boot-bar i:nth-child(3) { animation-delay: .26s; }
@keyframes boot-slide { from { left: -30px; } to { left: 190px; } }
.boot-hint { position: absolute; bottom: 24px; font-size: 12px; color: #666; }

.screen-logon {
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(120, 255, 220, .45), transparent 55%),
    radial-gradient(80% 50% at 80% -10%, rgba(140, 210, 255, .55), transparent 60%),
    linear-gradient(160deg, #0a2c6e 0%, #1756b0 45%, #1c8bc4 75%, #1aa58e 100%);
  overflow: hidden;
}
.screen-logon::before,
.screen-logon::after {
  content: ""; position: absolute; left: -25%; right: -25%; height: 60%; top: 30%;
  border-radius: 50%;
  border-top: 2px solid rgba(255, 255, 255, .25);
  box-shadow: 0 -20px 60px rgba(160, 255, 230, .18) inset;
  transform: rotate(-8deg);
  animation: logon-wave 14s ease-in-out infinite alternate;
}
.screen-logon::after { top: 42%; transform: rotate(6deg); border-top-color: rgba(255, 255, 255, .15); animation-duration: 18s; }
@keyframes logon-wave { to { transform: rotate(4deg) translateY(-30px); } }
.logon-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.logon-tile {
  width: 132px; height: 132px; padding: 6px; border-radius: 10px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .85), rgba(200, 220, 240, .55));
  border: 1px solid rgba(0, 0, 0, .45);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .9);
}
.logon-tile img { width: 100%; height: 100%; border-radius: 6px; }
.logon-name { font-size: 24px; font-weight: 300; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.logon-status { font-size: 13px; opacity: .85; min-height: 18px; }
.logon-go {
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .55); color: #fff;
  background: linear-gradient(to bottom, #8fd0ff, #2e8be6 48%, #1468c4 52%, #3fa2f2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 14px rgba(120, 200, 255, .7);
  display: grid; place-items: center;
}
.logon-go svg { width: 18px; height: 18px; }
@media (hover: hover) { .logon-go:hover { filter: brightness(1.15); } }
.logon-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 20%, #9ff3ff 60%, #fff 100%);
  -webkit-mask: radial-gradient(circle, transparent 9px, #000 10px);
  mask: radial-gradient(circle, transparent 9px, #000 10px);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.logon-brand { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; font-size: 20px; font-weight: 300; letter-spacing: 2px; opacity: .85; }
.logon-brand b { font-weight: 600; color: #b5ffe9; }
.logon-power {
  position: absolute; right: 22px; bottom: 18px; width: 36px; height: 36px; padding: 0; border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center;
  background: linear-gradient(to bottom, #f6b28f 0%, #e07443 48%, #c94a14 52%, #e8854a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.logon-power svg { width: 18px; height: 18px; }

.screen-off { background: #000; }
.power-on {
  width: 84px; height: 84px; border-radius: 50%; padding: 0; color: #9ff3e0;
  border: 1px solid #222;
  background: radial-gradient(circle at 50% 35%, #2b333e, #07090c 70%);
  box-shadow: 0 0 0 4px #111, 0 0 24px rgba(80, 255, 200, .25), inset 0 2px 0 rgba(255, 255, 255, .15);
  display: grid; place-items: center; transition: box-shadow .3s, color .3s;
}
.power-on svg { width: 34px; height: 34px; filter: drop-shadow(0 0 6px rgba(80, 255, 200, .8)); }
@media (hover: hover) { .power-on:hover { color: #fff; box-shadow: 0 0 0 4px #111, 0 0 40px rgba(80, 255, 200, .6), inset 0 2px 0 rgba(255, 255, 255, .15); } }
.off-hint { margin-top: 16px; font-size: 13px; color: #556; text-align: center; }

/* --------------------------------------------------------------- screensaver */
#screensaver { position: fixed; inset: 0; z-index: 5000; cursor: none; }
#screensaver canvas { width: 100%; height: 100%; display: block; }

/* sparkle trail effect */
.sparkle {
  position: fixed; z-index: 4000; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none;
  background: radial-gradient(circle, #fff 0 18%, transparent 20%),
    conic-gradient(from 45deg, transparent 0 10%, rgba(255, 255, 255, .95) 12.5%, transparent 15% 35%, rgba(255, 255, 255, .95) 37.5%, transparent 40% 60%, rgba(255, 255, 255, .95) 62.5%, transparent 65% 85%, rgba(255, 255, 255, .95) 87.5%, transparent 90%);
  border-radius: 50%;
  filter: drop-shadow(0 0 3px var(--c, #7ff)) drop-shadow(0 0 6px var(--c, #7ff));
  animation: sparkle .8s ease-out forwards;
}
@keyframes sparkle {
  from { transform: scale(1) rotate(0); opacity: 1; }
  to { transform: translate(var(--dx, 0), var(--dy, 24px)) scale(.1) rotate(160deg); opacity: 0; }
}
.sparkle.burst { width: 20px; height: 20px; margin: -10px 0 0 -10px; animation-duration: 1.3s; animation-fill-mode: both; }

/* ------------------------------------------------- Admin Console preview tab */
.preview-banner {
  position: fixed; z-index: 6000; bottom: calc(var(--taskbar-h) + 10px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 6px 14px;
  border: 1px solid #a86a00; border-radius: 16px; pointer-events: none;
  background: linear-gradient(#fff4c8, #ffd970); box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  color: #5a3800; font-size: 12px; font-weight: 600;
}
.preview-banner .glyph { width: 13px; height: 13px; fill: #c07800; }
@media (max-width: 700px) { .preview-banner { width: max-content; font-size: 11px; padding: 4px 10px; } }