/* ============================================================
   Windows 7 Aero replica — win7.css
   ============================================================ */
:root {
  --glass-top: rgba(120, 160, 200, .38);
  --glass-bottom: rgba(20, 35, 55, .55);
  --hairline: rgba(255, 255, 255, .45);
  --sel-bg: rgba(51, 120, 190, .38);
  --sel-border: rgba(125, 184, 234, .55);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: "Segoe UI", "SegoeUI", Tahoma, "Liberation Sans", Arial, sans-serif;
  font-size: 12px;
  -webkit-user-select: none; user-select: none;
  cursor: default;
}

input, textarea { -webkit-user-select: text; user-select: text; }

body {
  background: #0a2c50 url('wallpaper.jpg') center center / cover no-repeat fixed;
}

body.wallpaper-alt {
  background-image: url('Microsoft_Nostalgic_Windows_Wallpaper_4k.jpg');
}

.hidden { display: none !important; }

/* ============================================================
   DESKTOP
   ============================================================ */
#desktop-root {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 40px;
}

.dicon {
  position: absolute;
  width: 78px;
  padding: 4px 2px 2px;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 2px;
  z-index: 10;
}
.dicon:hover:not(.sel) {
  background: rgba(120, 170, 220, .18);
  border-color: rgba(150, 200, 240, .30);
}
.dicon.sel {
  background: var(--sel-bg);
  border-color: var(--sel-border);
}
.dicon.cut { opacity: .55; }

.dicon-img {
  height: 48px;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
.dicon-img img {
  max-width: 48px; max-height: 48px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
.dicon-img svg { width: 46px; height: 46px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.dicon.smicon .dicon-img { height: 32px; }
.dicon.smicon .dicon-img img { max-width: 32px; max-height: 32px; }
.dicon.smicon .dicon-img svg { width: 30px; height: 30px; }
.dicon.smicon { width: 64px; }

.dicon-label {
  margin-top: 2px;
  font-size: 11px;
  line-height: 13px;
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0,0,0,.9),
    0 0 3px rgba(0,0,0,.65),
    1px 1px 1px rgba(0,0,0,.8);
  overflow-wrap: break-word;
  max-height: 26px;
  overflow: hidden;
  pointer-events: none;
  padding: 0 1px;
}
.dicon.sel .dicon-label { max-height: 40px; overflow: visible; }

.dicon-label-input {
  width: 72px;
  font-size: 11px;
  font-family: inherit;
  border: 1px solid #5f8fc4;
  outline: none;
  text-align: center;
}

/* selection marquee */
#marquee {
  position: fixed;
  background: rgba(120, 170, 225, .30);
  border: 1px solid rgba(99, 160, 230, .75);
  z-index: 50;
  display: none;
  pointer-events: none;
}

/* ============================================================
   TASKBAR
   ============================================================ */
#taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 40px;
  display: flex;
  align-items: stretch;
  z-index: 9000;
  background: linear-gradient(to bottom,
      rgba(58, 93, 121, .45) 0%,
      rgba(30, 52, 72, .55) 49%,
      rgba(12, 22, 33, .72) 50%,
      rgba(6, 12, 19, .80) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  border-top: 1px solid rgba(255,255,255,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 -1px 12px rgba(0,0,0,.35);
}

/* --- start orb --- */
#start-orb {
  width: 54px;
  flex: 0 0 54px;
  position: relative;
  border: 0; background: transparent;
  cursor: pointer;
  outline: none;
}
#start-orb .orb {
  position: absolute;
  left: 4px; top: -10px;
  width: 54px; height: 54px;
  background: url('start_button_default.png') center center / 44px 44px no-repeat;
  border-radius: 50%;
}
#start-orb:hover .orb, #start-orb.open .orb {
  background-image: url('start_button_hover.png');
}
#start-orb:active .orb { background-image: url('start_button_click.png'); }

/* --- taskbar buttons --- */
#task-items {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  padding-left: 2px;
}
.task-btn {
  position: relative;
  height: 32px;
  min-width: 56px;
  max-width: 160px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  margin: 3px 0;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.25);
  background: linear-gradient(to bottom,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.04) 45%,
      rgba(0,0,0,.06) 50%,
      rgba(0,0,0,.12) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 1px 0 0 rgba(255,255,255,.07),
    inset -1px 0 0 rgba(255,255,255,.07);
  color: #fff;
  font-size: 11px;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
}
.task-btn.pinned { width: 44px; min-width: 44px; max-width: 44px; justify-content: center; padding: 0; }
.task-btn img { width: 22px; height: 22px; flex: 0 0 22px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.task-btn .tb-svg { width: 22px; height: 22px; flex: 0 0 22px; display: block; }
.task-btn .tb-svg svg { width: 100%; height: 100%; }
.task-btn .tb-label { overflow: hidden; text-overflow: ellipsis; }

.task-btn::after { /* glow accent strip */
  content: '';
  position: absolute;
  left: 2px; right: 2px; bottom: 0;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(to right,
      transparent, rgba(140, 205, 250, .55) 25%, rgba(140, 205, 250, .55) 75%, transparent);
  opacity: 0;
}

.task-btn:hover {
  background: radial-gradient(ellipse 120% 130% at 50% 115%, rgba(255,255,255,.30), rgba(255,255,255,.08) 55%, rgba(255,255,255,.02)),
    linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,.04) 45%, rgba(0,0,0,.02) 50%, rgba(0,0,0,.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 1px 0 0 rgba(255,255,255,.10),
    inset -1px 0 0 rgba(255,255,255,.10),
    0 0 6px rgba(120,190,240,.4);
}
.task-btn.active {
  background: linear-gradient(to bottom,
      rgba(180, 215, 240, .28) 0%,
      rgba(150, 195, 235, .18) 45%,
      rgba(60, 110, 160, .22) 50%,
      rgba(30, 70, 110, .35) 100%);
  border-color: rgba(0,0,0,.5);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.35),
    inset 0 0 8px rgba(100,170,235,.30),
    inset 1px 0 0 rgba(255,255,255,.10);
}
.task-btn.active::after { opacity: 1; }
.task-btn.flash { animation: tbflash 1s ease 2; }
@keyframes tbflash {
  0%,100% { background-color: transparent; }
  50% { background-color: rgba(255,220,120,.35); }
}

/* --- notification area --- */
#tray {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 6px 0 10px;
  margin: 3px 4px 3px 2px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.18);
  background: linear-gradient(to bottom, rgba(255,255,255,.06), rgba(0,0,0,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  gap: 7px;
  cursor: default;
}
#tray svg { display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.7)); }
#tray .tray-ico { padding: 2px 1px; border-radius: 2px; }
#tray .tray-ico:hover { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }

#clock {
  flex: 0 0 auto;
  padding: 0 10px 0 4px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
#clock .clk-time { font-size: 12px; line-height: 15px; }
#clock .clk-date { font-size: 11px; line-height: 14px; }

#show-desktop {
  flex: 0 0 15px;
  border-left: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,.03));
  cursor: pointer;
  position: relative;
}
#show-desktop:hover {
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(120,190,255,.75), rgba(120,190,255,.15) 70%, transparent),
    linear-gradient(to bottom, rgba(255,255,255,.14), rgba(255,255,255,.04));
  box-shadow: 0 0 10px rgba(130,195,255,.6);
}
#show-desktop:hover::before {
  content: 'Show desktop';
  position: absolute;
  bottom: 46px; right: -4px;
  background: linear-gradient(#f9fcfe, #e8f0f7);
  border: 1px solid #6a7580;
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 11px;
  color: #222;
  box-shadow: 2px 2px 6px rgba(0,0,0,.4);
  white-space: nowrap;
}

/* Aero Peek outlines */
body.peek .wnd { opacity: 0; }
body.peek .wnd-ghostline { display: block; }
.wnd-ghostline {
  display: none;
  position: absolute;
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), 0 0 8px rgba(0,0,0,.5);
  border-radius: 6px;
  z-index: 8000;
  pointer-events: none;
  opacity: 1;
}

/* ============================================================
   START MENU
   ============================================================ */
#start-menu {
  position: fixed;
  left: 6px;
  bottom: 46px;
  width: 404px;
  border-radius: 6px 6px 3px 3px;
  border: 1px solid rgba(10, 25, 40, .85);
  background: linear-gradient(to bottom, rgba(90,130,170,.55), rgba(35,65,95,.65));
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 1px 0 0 rgba(255,255,255,.15),
    3px 4px 18px rgba(0,0,0,.55);
  z-index: 9500;
  overflow: visible;
}
.sm-body { display: flex; }

.sm-left {
  width: 246px;
  background: linear-gradient(to right, #ffffff 0%, #f3f7fb 92%, rgba(190,210,230,.35) 100%);
  border-radius: 5px 0 0 2px;
  margin: 3px 0 3px 3px;
  border: 1px solid rgba(140,160,180,.5);
  border-right: 0;
  display: flex;
  flex-direction: column;
  min-height: 380px;
}
.sm-items {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 330px;
  padding: 3px 2px;
}
.sm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  margin: 0 2px;
  font-size: 12px;
  color: #2a2a2a;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  min-height: 38px;
}
.sm-item img { width: 30px; height: 30px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.sm-item.sm-allprog { min-height: 0; padding: 5px 6px; justify-content: center; font-weight: 600; color: #1c3d5a; }
.sm-item:hover {
  background: linear-gradient(to bottom, #e3f1fc, #c7e2f7);
  border-color: #aed6f4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.sm-item .sm-item-sub { font-size: 10px; color: #8a8a8a; }
.sm-sep { height: 1px; background: linear-gradient(to right, transparent, #c9d6e2 15%, #c9d6e2 85%, transparent); margin: 2px 8px; }
.sm-recent-head { padding: 5px 8px 2px; font-size: 10px; color: #6d7d8c; }

.sm-search {
  flex: 1 1 auto;
  margin: 0;
  position: relative;
}
.sm-search input {
  width: 100%;
  height: 27px;
  border: 1px solid rgba(30,60,90,.6);
  border-radius: 11px;
  background: linear-gradient(to bottom, #e6edf3, #f7fafc 30%, #ffffff);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.6);
  padding: 0 26px 0 10px;
  font-size: 12px;
  font-style: italic;
  color: #333;
  outline: none;
}
.sm-search::after {
  content: '';
  position: absolute;
  right: 9px; top: 7px;
  width: 12px; height: 12px;
  border: 2px solid #5a7d9c;
  border-radius: 50%;
}
.sm-search::before {
  content: '';
  position: absolute;
  right: 4px; top: 17px;
  width: 8px; height: 2.5px;
  background: #5a7d9c;
  transform: rotate(45deg);
  border-radius: 2px;
  z-index: 2;
}

.sm-right {
  flex: 1 1 auto;
  padding: 40px 6px 6px 8px;
  position: relative;
}
.sm-right .sm-ritem {
  display: block;
  padding: 5px 10px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.85);
  font-size: 12px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
}
.sm-right .sm-ritem.sm-user { font-weight: 700; font-size: 13px; margin-bottom: 7px; padding-top: 4px; }
.sm-right .sm-ritem:hover {
  background: linear-gradient(to bottom, rgba(255,255,255,.35), rgba(210,230,250,.15) 50%, rgba(120,165,210,.25));
  border-color: rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.sm-right .sm-rsep { height: 1px; background: linear-gradient(to right, rgba(255,255,255,.0), rgba(255,255,255,.4), rgba(255,255,255,0)); margin: 4px 10px; }
.sm-ritem.disabled { opacity: .55; }

.sm-user-pic {
  position: absolute;
  top: -12px; right: 6px;
  width: 62px; height: 62px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,.75);
  background: linear-gradient(to bottom, #dfe9f2, #b8cbd9);
  box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.8);
  overflow: hidden;
  z-index: 9600;
  background-size: cover !important;
  cursor: pointer;
}
.sm-user-pic:hover { box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 10px rgba(140,200,255,.8); }

.sm-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
}
.sm-shutdown {
  display: flex;
  align-items: stretch;
  border-radius: 4px;
  overflow: visible;
}
.sm-shut-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 12px 3px 14px;
  border-radius: 4px 0 0 4px;
  border: 1px solid rgba(15,30,50,.75);
  border-right: 0;
  background: linear-gradient(to bottom, #f6a035 0%, #e87a13 45%, #d5650b 50%, #c25408 100%);
  color: #fff;
  font-size: 12px;
  text-shadow: 0 1px 1px rgba(0,0,0,.7);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.sm-shut-btn svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.sm-shut-btn:hover { filter: brightness(1.12); }
.sm-shut-btn:active { filter: brightness(.92); box-shadow: inset 0 1px 3px rgba(0,0,0,.4); }
.sm-shut-arrow {
  width: 20px;
  border: 1px solid rgba(15,30,50,.75);
  border-radius: 0 4px 4px 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.5), rgba(190,215,240,.35) 50%, rgba(120,160,205,.45));
  color: #fff;
  cursor: pointer;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
}
.sm-shut-arrow:hover { filter: brightness(1.15); }
.sm-shut-arrow::after {
  content: '';
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid #fff;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.7));
}

/* shutdown flyout */
#shut-flyout {
  position: fixed;
  z-index: 9600;
  width: 150px;
}

/* ============================================================
   CONTEXT MENU
   ============================================================ */
.ctx {
  position: fixed;
  min-width: 200px;
  padding: 2px;
  background: linear-gradient(to bottom, #f5f7f9, #eef1f4);
  border: 1px solid #979797;
  border-radius: 2px;
  box-shadow: 3px 3px 10px rgba(0,0,0,.4);
  z-index: 9800;
  font-size: 12px;
  color: #1e1e1e;
}
.ctx-item {
  display: flex;
  align-items: center;
  padding: 4px 22px 4px 12px;
  margin-left: 26px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.ctx-item .ctx-ico {
  position: absolute;
  left: -24px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
}
.ctx-item .ctx-ico img { max-width: 18px; max-height: 18px; }
.ctx-item:hover:not(.disabled) {
  background: linear-gradient(to bottom, #edf6fd, #d9ecfb);
  border-color: #b3d7f2;
}
.ctx-item.disabled { color: #8f9aa3; cursor: default; }
.ctx-item .ctx-arrow {
  position: absolute; right: 6px;
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid #33506b;
}
.ctx-sep {
  height: 1px;
  margin: 3px 2px 3px 28px;
  background: linear-gradient(to right, #d4dbe2, #c3ccd4 80%);
}
.ctx::before { /* left band */
  content: '';
  position: absolute;
  top: 2px; bottom: 2px; left: 2px;
  width: 24px;
  background: linear-gradient(to bottom, rgba(214,228,242,.5), rgba(196,216,234,.5));
  border-right: 1px solid #ccd6e0;
}

/* ============================================================
   WINDOWS
   ============================================================ */
.wnd {
  position: absolute;
  border-radius: 6px;
  border: 1px solid rgba(12, 26, 40, .75);
  background: linear-gradient(to bottom,
      rgba(196, 220, 240, .62),
      rgba(152, 188, 218, .55) 40%,
      rgba(175, 205, 228, .60));
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 1px 0 0 rgba(255,255,255,.30),
    inset -1px 0 0 rgba(255,255,255,.30),
    0 3px 18px rgba(0,0,0,.45),
    0 8px 40px rgba(0,0,0,.30);
  padding: 0 8px 8px;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  min-height: 120px;
}
.wnd.inactive {
  background: linear-gradient(to bottom,
      rgba(230, 235, 240, .55),
      rgba(215, 222, 228, .50) 40%,
      rgba(224, 229, 233, .55));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 1px 0 0 rgba(255,255,255,.25),
    inset -1px 0 0 rgba(255,255,255,.25),
    0 2px 10px rgba(0,0,0,.28);
}
.wnd.maximized {
  border-radius: 0;
  border-left: 0; border-right: 0; border-top: 0;
  padding: 0 0 1px;
}

.wnd-titlebar {
  height: 30px;
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  position: relative;
}
.wnd-titlebar .wnd-ico {
  width: 16px; height: 16px;
  margin: 0 6px 0 2px;
  flex: 0 0 16px;
}
.wnd-titlebar .wnd-ico img { width: 16px; height: 16px; }
.wnd-title {
  flex: 1 1 auto;
  font-size: 12px;
  color: #1c3a57;
  text-shadow: 0 0 12px rgba(255,255,255,.95), 0 0 4px rgba(255,255,255,.9), 0 1px 2px rgba(255,255,255,.8);
  letter-spacing: .2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 6px;
}
.wnd.inactive .wnd-title { color: #4c555e; }

.wnd-caps {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 0;
  margin-right: -5px;
  border: 1px solid rgba(20, 40, 60, .65);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  background: rgba(255,255,255,.28);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.12);
  overflow: hidden;
}
.wnd-cap {
  width: 28px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-left: 1px solid rgba(255,255,255,.35);
  box-shadow: inset -1px 0 0 rgba(40,70,100,.25);
  position: relative;
}
.wnd-cap:first-child { border-left: 0; }
.wnd-cap.close { width: 45px; border-radius: 0 0 4px 0; }
.wnd-cap.max { }
.wnd-cap.min { border-radius: 0 0 0 4px; }
.wnd-cap svg { display: block; filter: drop-shadow(0 0 2px rgba(255,255,255,.85)); }
.wnd-cap.close:hover svg path { stroke: #fff; filter: drop-shadow(0 0 2px rgba(0,0,0,.7)); }
.wnd-cap:hover {
  background:
    radial-gradient(ellipse 90% 80% at 50% 115%, rgba(120, 190, 250, .85), rgba(70, 140, 210, .45) 60%, rgba(70,140,210,.2));
  box-shadow: inset 0 0 4px rgba(160, 215, 255, .9);
}
.wnd-cap.close:hover {
  background:
    radial-gradient(ellipse 90% 80% at 50% 115%, rgba(250, 130, 110, .9), rgba(210, 70, 40, .65) 60%, rgba(190,50,20,.35));
  box-shadow: inset 0 0 4px rgba(255, 180, 160, .9);
}
.wnd-cap:active { filter: brightness(.85); }

.wnd-body {
  flex: 1 1 auto;
  background: #f0f0f0;
  border: 1px solid rgba(50, 70, 90, .55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.wnd-body iframe {
  flex: 1 1 auto;
  border: 0;
  width: 100%; height: 100%;
  background: #fff;
}
.wnd.maximized .wnd-body { border-left: 0; border-right: 0; }

/* resize handles */
.wnd-res { position: absolute; z-index: 5; }
.wnd-res.n  { top: -4px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
.wnd-res.s  { bottom: -4px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
.wnd-res.e  { right: -4px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
.wnd-res.w  { left: -4px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
.wnd-res.ne { top: -4px; right: -4px; width: 12px; height: 12px; cursor: nesw-resize; }
.wnd-res.nw { top: -4px; left: -4px; width: 12px; height: 12px; cursor: nwse-resize; }
.wnd-res.se { bottom: -4px; right: -4px; width: 12px; height: 12px; cursor: nwse-resize; }
.wnd-res.sw { bottom: -4px; left: -4px; width: 12px; height: 12px; cursor: nesw-resize; }
.wnd.maximized .wnd-res { display: none; }

/* snap ghost preview */
#snap-ghost {
  position: fixed;
  background: rgba(120, 180, 235, .25);
  border: 1px solid rgba(200, 230, 255, .8);
  border-radius: 6px;
  box-shadow: inset 0 0 22px rgba(160, 210, 250, .5), 0 0 14px rgba(120,180,235,.6);
  z-index: 8500;
  display: none;
  pointer-events: none;
  transition: all .12s ease-out;
}

/* minimize/maximize easing */
.wnd {
  transition: opacity .18s ease;
}
.wnd.animating {
  transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease, opacity .18s ease;
}

/* ============================================================
   EXPLORER
   ============================================================ */
.exp { display: flex; flex-direction: column; height: 100%; background: #f0f0f0; }

.exp-cmd {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  background: linear-gradient(to bottom, #fafcfd, #e6eef4);
  border-bottom: 1px solid #cfd9e2;
}
.exp-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  font-size: 12px;
  color: #1e3c5a;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
  font-family: inherit;
}
.exp-btn svg { display: block; }
.exp-btn:hover:not(.disabled) {
  background: linear-gradient(to bottom, #ebf5fd, #d8ecfa);
  border-color: #b8d8f0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.exp-btn.disabled { opacity: .45; cursor: default; }
.exp-btn .exp-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #33506b; }

.exp-addr {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  background: linear-gradient(to bottom, #f4f8fb, #e8eff5);
  border-bottom: 1px solid #cfd9e2;
}
.exp-crumbs {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #aeb9c2;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
  min-height: 26px;
  padding: 0 4px;
  overflow: hidden;
  white-space: nowrap;
}
.exp-crumb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px;
  font-size: 12px;
  color: #2a4a68;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
}
.exp-crumb img { width: 16px; height: 16px; }
.exp-crumb .c-svg { width: 16px; height: 16px; display: inline-flex; }
.exp-crumb .c-svg svg { width: 100%; height: 100%; }
.exp-crumb:hover { background: #e0f0fc; border-color: #add6f5; }
.exp-crumb-sep { color: #7f93a6; padding: 0 1px; font-size: 11px; }
.exp-crumb:hover + .exp-crumb-sep { }

.exp-refresh {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #aeb9c2;
  border-radius: 3px;
  background: linear-gradient(#fdfefe, #e6edf2);
  cursor: pointer;
  flex: 0 0 auto;
}
.exp-refresh:hover { filter: brightness(1.05); }
.exp-search {
  flex: 0 0 190px;
  height: 26px;
  border: 1px solid #aeb9c2;
  border-radius: 2px;
  padding: 0 22px 0 6px;
  font-size: 12px;
  outline: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='5' cy='5' r='3.4' fill='none' stroke='%238a9aa8' stroke-width='1.6'/%3E%3Cline x1='7.6' y1='7.6' x2='11' y2='11' stroke='%238a9aa8' stroke-width='1.6'/%3E%3C/svg%3E") right 5px center no-repeat;
}

.exp-main { flex: 1 1 auto; display: flex; min-height: 0; }

.exp-nav {
  flex: 0 0 172px;
  background: linear-gradient(to right, #f2f6f9, #eaf0f5);
  border-right: 1px solid #d4dde5;
  overflow-y: auto;
  padding: 6px 4px;
  font-size: 12px;
}
.exp-nav-head {
  padding: 3px 6px;
  color: #4c6781;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.exp-nav-item {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 6px 3px 16px;
  color: #2b4c6d;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exp-nav-item img { width: 15px; height: 15px; }
.exp-nav-item:hover { background: #e2eef8; border-color: #c4ddf0; }
.exp-nav-item.current { background: #cdecfc; border-color: #98d1f2; }

.exp-view {
  flex: 1 1 auto;
  background: #fff;
  overflow: auto;
  position: relative;
  padding: 8px;
}
.exp-marquee {
  position: absolute;
  background: rgba(120, 170, 225, .30);
  border: 1px solid rgba(99, 160, 230, .75);
  pointer-events: none;
  display: none;
  z-index: 3;
}
.exp-empty { color: #9aa8b3; font-size: 12px; padding: 20px; text-align: center; }

/* file drag & drop */
.drop-target { outline: 2px dashed #3d7fbd !important; outline-offset: -2px; background: rgba(120,180,235,.18) !important; }
.exp-item.drop-target, .exp-nav-item.drop-target, .exp-crumb.drop-target, .dicon.drop-target { outline: 1px dotted #3d7fbd !important; outline-offset: -1px; background: rgba(120,180,235,.35) !important; border-radius: 2px; }
#desktop-root.drop-target { outline: none !important; }

/* while dragging/resizing a window, iframes must not swallow mouse events */
body.dragging iframe { pointer-events: none !important; }

/* winamp floats chromeless over the desktop (its own classic skin) */
#webamp-host { position: fixed; inset: 0; z-index: 8900; pointer-events: none; }
#webamp-host > * { pointer-events: auto; }
.task-btn.winamp-task img { width: 22px; height: 22px; }

/* Win7 copy progress dialog */
.cp-body { padding: 14px 16px 40px; font-size: 12px; color: #1e1e1e; display: flex; flex-direction: column; gap: 7px; height: 100%; box-sizing: border-box; position: relative; }
.cp-head { font-size: 13px; color: #1e1e1e; }
.cp-head::before { content: ''; }
.cp-sub { color: #444; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-eta { color: #444; min-height: 15px; }
.cp-bar { flex: 0 0 auto; height: 16px; min-height: 16px; border: 1px solid #9a9a9a; border-radius: 3px; background: linear-gradient(#f4f4f4, #e9e9e9); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.12); }
.cp-fill { height: 100%; width: 0; background: linear-gradient(#afe2ad, #35b95c 45%, #25a348 55%, #74ce84); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); transition: width .15s; }
.cp-more { background: none; border: none; color: #22506d; font-size: 11px; cursor: pointer; padding: 0; text-align: left; width: fit-content; font-family: inherit; }
.cp-more:hover { color: #2a6ea0; }
.cp-detail { font-size: 11px; color: #333; padding: 4px 8px; border: 1px solid #d9d9d9; background: #fbfbfb; border-radius: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-cancel { position: absolute; right: 12px; bottom: 10px; min-width: 74px; }

.exp-grid { display: flex; flex-wrap: wrap; gap: 2px; align-content: flex-start; }
.exp-item {
  width: 88px;
  padding: 6px 2px 4px;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.exp-item:hover:not(.sel) { background: #e8f3fc; border-color: #d1e8f8; }
.exp-item.sel { background: #cce8ff; border-color: #99d1ff; }
.exp-item img { width: 46px; height: 46px; object-fit: cover; }
.exp-item-name {
  font-size: 11px;
  color: #222;
  margin-top: 3px;
  line-height: 14px;
  overflow-wrap: break-word;
  max-height: 28px;
  overflow: hidden;
}
.exp-item.sel .exp-item-name { max-height: 56px; overflow: visible; }

.exp-status {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 4px 10px;
  background: linear-gradient(to bottom, #eef3f7, #e2eaf0);
  border-top: 1px solid #cfd9e2;
  font-size: 11px;
  color: #30475c;
  gap: 14px;
}

/* explorer drive bars (Computer view) */
.exp-item.drive-item {
  width: 238px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  text-align: left;
  padding: 9px;
}
.drive-ico svg { width: 42px; height: 42px; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.drive-meta { flex: 1; min-width: 0; }
.drive-item .exp-item-name {
  margin-top: 1px;
  font-size: 12px;
  max-height: none;
  overflow: visible;
  white-space: normal;
}
.drive-bar {
  width: 100%; height: 9px;
  border: 1px solid #aebdc9;
  border-radius: 2px;
  background: linear-gradient(#f2f6f9, #e2eaf0);
  margin: 5px 0 3px;
  overflow: hidden;
}
.drive-bar .fill { height: 100%; background: linear-gradient(to bottom, #8cc8f2, #4a9dd8); }
.drive-free { font-size: 11px; color: #6a7686; }

/* ============================================================
   NOTEPAD LITE (built-in editor for FS text files)
   ============================================================ */
.npl { display: flex; flex-direction: column; height: 100%; background: #f0f0f0; }
.npl-menu {
  flex: 0 0 auto;
  display: flex; gap: 2px;
  padding: 1px 3px;
  background: #f0f0f0;
  border-bottom: 1px solid #d4d9de;
  font-size: 12px;
}
.npl-menu span { padding: 3px 7px; cursor: pointer; border-radius: 2px; }
.npl-menu span:hover { background: #dcebfc; outline: 1px solid #b8d6f2; }
.npl textarea {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  resize: none;
  padding: 5px 7px;
  font-family: Consolas, "Lucida Console", monospace;
  font-size: 13px;
  background: #fff;
  color: #111;
}

/* ============================================================
   MESSAGE BOX / DIALOG
   ============================================================ */
#dlg-overlay {
  position: fixed; inset: 0;
  background: rgba(30, 50, 70, .18);
  z-index: 9600;
  display: none;
}
.wnd.dlg { z-index: 9900; }
.dlg .wnd-cap.min, .dlg .wnd-cap.max { display: none; }
.dlg .wnd-cap.close { border-radius: 0 0 4px 4px; }
.dlg .wnd-body { background: #f0f0f0; }
.dlg-content {
  display: flex;
  gap: 14px;
  padding: 18px 18px 12px;
  align-items: flex-start;
  font-size: 12px;
  color: #222;
}
.dlg-content .dlg-icon { flex: 0 0 40px; }
.dlg-content .dlg-icon svg { width: 40px; height: 40px; }
.dlg-main { max-width: 300px; line-height: 17px; }
.dlg-main b { display: block; color: #003399; font-size: 13px; margin-bottom: 4px; }
.dlg-buttons {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 14px;
  background: #f0f0f0;
  border-top: 1px solid #dfe4e9;
}
.w7btn {
  min-width: 74px;
  padding: 4px 14px;
  font-family: inherit;
  font-size: 12px;
  border: 1px solid #6f6f6f;
  border-radius: 3px;
  background: linear-gradient(to bottom, #f4f4f4, #ececec 45%, #dcdcdc 50%, #cfcfcf);
  color: #1e1e1e;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.w7btn:hover {
  border-color: #3c7fb1;
  background: linear-gradient(to bottom, #eaf6fd, #d9f0fc 45%, #bee6fd 50%, #a7d9f5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 6px rgba(80,160,220,.6);
}
.w7btn:active { background: linear-gradient(to bottom, #c2e4f5, #a5d7f2 45%, #8dc9ec 50%, #6fb9e5); box-shadow: inset 0 1px 3px rgba(0,0,0,.2); }
.w7btn.def { border: 2px solid #0078d7; padding: 3px 13px; }
.w7btn:focus { outline: none; }
.w7btn.def:focus { box-shadow: inset 0 0 0 1px #8ec9ee, 0 0 6px rgba(80,160,220,.6); }

/* ============================================================
   FLYOUTS (tray popups)
   ============================================================ */
.flyout {
  position: fixed;
  bottom: 47px;
  background: linear-gradient(to bottom, rgba(70,100,130,.85), rgba(30,55,80,.9));
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(200,225,250,.35);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 2px 4px 16px rgba(0,0,0,.55);
  z-index: 9550;
  color: #eaf3fb;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  padding: 12px;
  font-size: 12px;
}

/* volume flyout */
#vol-flyout { width: 56px; padding: 14px 12px 10px; text-align: center; }
#vol-flyout input[type=range] {
  writing-mode: vertical-lr;
  width: 22px; height: 110px;
  -webkit-appearance: none;
  background: transparent;
}
#vol-flyout input[type=range]::-webkit-slider-runnable-track {
  width: 5px; background: linear-gradient(to top, #6db5e8 40%, rgba(255,255,255,.25) 41%);
  border-radius: 3px; border: 1px solid rgba(0,0,0,.4);
}
#vol-flyout input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 9px; margin-left: -7px;
  background: linear-gradient(#fdfdfd, #c9d4dc);
  border: 1px solid #55606a; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* calendar flyout */
#cal-flyout { width: 252px; padding: 10px; }
#cal-flyout .cal-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; padding: 2px 4px 8px;
}
#cal-flyout table { width: 100%; border-collapse: collapse; font-size: 11px; }
#cal-flyout th { color: #9fc3dd; padding: 2px; font-weight: 400; }
#cal-flyout td {
  text-align: center; padding: 3px 0;
  border-radius: 2px;
  border: 1px solid transparent;
}
#cal-flyout td.other { color: rgba(230,240,250,.35); }
#cal-flyout td:hover:not(.other) { background: rgba(140,190,240,.3); border-color: rgba(180,220,250,.5); }
#cal-flyout td.today { background: rgba(80,140,200,.55); border-color: rgba(160,210,250,.8); font-weight: 700; }
#cal-flyout .cal-clock { text-align: center; font-size: 22px; padding: 8px 0 2px; font-weight: 300; }

/* ============================================================
   PERSONALIZE / CONTROL PANEL-ish window
   ============================================================ */
.cpl { display: flex; flex-direction: column; height: 100%; background: #f0f0f0; }
.cpl-head {
  padding: 14px 18px 10px;
  background: linear-gradient(to bottom, #fdfdfe, #eef3f7);
  border-bottom: 1px solid #d5dee5;
}
.cpl-head h1 { font-size: 15px; font-weight: 400; color: #1e395b; }
.cpl-body { flex: 1 1 auto; overflow: auto; padding: 14px 18px; }
.cpl-section { font-size: 12px; color: #2a4a68; margin-bottom: 8px; font-weight: 600; }
.wall-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.wall-thumb {
  width: 128px; height: 80px;
  border: 2px solid #c3ccd4;
  border-radius: 4px;
  cursor: pointer;
  background-size: cover; background-position: center;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.wall-thumb:hover { border-color: #5aa4d4; box-shadow: 0 0 8px rgba(90,164,212,.7); }
.wall-thumb.current { border-color: #1b87d1; box-shadow: 0 0 0 2px rgba(27,135,209,.4), 0 0 10px rgba(27,135,209,.6); }
.wall-thumb .wall-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,.85);
  font-size: 10px; color: #333;
  padding: 2px 4px;
  text-align: center;
  border-radius: 0 0 2px 2px;
}

/* ============================================================
   BOOT SEQUENCE
   ============================================================ */
#boot {
  position: fixed; inset: 0;
  z-index: 30000;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
.pwr-wrap { text-align: center; }
.power-btn {
  width: 108px; height: 108px;
  border-radius: 50%;
  border: 5px solid #3d4854;
  cursor: pointer;
  position: relative;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 40%),
    radial-gradient(circle at 50% 55%, #5b6b7d 0%, #333d48 55%, #1b212a 100%);
  box-shadow:
    0 0 0 3px #12161c,
    0 0 34px rgba(90, 140, 200, .35),
    0 14px 30px rgba(0,0,0,.8),
    inset 0 3px 6px rgba(255,255,255,.28),
    inset 0 -8px 14px rgba(0,0,0,.55);
  animation: pwrpulse 2.6s ease-in-out infinite;
}
.power-btn::before { /* power symbol */
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 34px; height: 34px;
  transform: translate(-50%, -42%);
  border: 5px solid #cfe0ee;
  border-top-color: transparent;
  border-radius: 50%;
  filter: drop-shadow(0 0 6px rgba(160, 210, 250, .8));
}
.power-btn::after {
  content: '';
  position: absolute;
  left: calc(50% - 3px); top: 22px;
  width: 6px; height: 26px;
  background: #cfe0ee;
  border-radius: 3px;
  filter: drop-shadow(0 0 6px rgba(160, 210, 250, .8));
}
.power-btn:hover { box-shadow: 0 0 0 3px #12161c, 0 0 46px rgba(120, 175, 235, .65), 0 14px 30px rgba(0,0,0,.8), inset 0 3px 6px rgba(255,255,255,.3), inset 0 -8px 14px rgba(0,0,0,.55); }
.power-btn.pressed {
  transform: scale(.96);
  box-shadow: 0 0 0 3px #12161c, 0 0 20px rgba(90,140,200,.3), inset 0 4px 10px rgba(0,0,0,.6);
}
@keyframes pwrpulse {
  0%, 100% { box-shadow: 0 0 0 3px #12161c, 0 0 26px rgba(90,140,200,.25), 0 14px 30px rgba(0,0,0,.8), inset 0 3px 6px rgba(255,255,255,.28), inset 0 -8px 14px rgba(0,0,0,.55); }
  50% { box-shadow: 0 0 0 3px #12161c, 0 0 44px rgba(120,175,235,.55), 0 14px 30px rgba(0,0,0,.8), inset 0 3px 6px rgba(255,255,255,.28), inset 0 -8px 14px rgba(0,0,0,.55); }
}
.pwr-note { margin-top: 26px; color: #6f7f92; font-size: 13px; letter-spacing: .5px; }

.bios {
  position: absolute;
  top: 8%; left: 6%;
  font-family: Consolas, 'Lucida Console', monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #cfcfcf;
  white-space: pre-wrap;
  text-shadow: 0 0 2px rgba(255,255,255,.3);
}

.loading { text-align: center; }
.lflag { position: relative; width: 210px; height: 110px; margin: 0 auto 26px; }
.lflag span {
  position: absolute;
  width: 52px; height: 52px;
  border-radius: 50%;
  filter: blur(10px);
  opacity: .95;
  animation: flaggather 1.6s ease-in-out infinite alternate;
}
.lflag .d1 { background: #f25022; left: 52px; top: 4px; animation-delay: 0s; }
.lflag .d2 { background: #7fba00; left: 104px; top: 14px; animation-delay: .15s; }
.lflag .d3 { background: #00a4ef; left: 56px; top: 48px; animation-delay: .3s; }
.lflag .d4 { background: #ffb900; left: 96px; top: 44px; animation-delay: .45s; }
@keyframes flaggather {
  from { transform: scale(.82) translateY(0); opacity: .75; }
  to   { transform: scale(1.08) translateY(-4px); opacity: 1; }
}
.ltext { color: #e8eef4; font-size: 21px; font-weight: 300; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.lcopy { position: absolute; bottom: 34px; left: 0; right: 0; color: #8a97a6; font-size: 12px; }

/* ============================================================
   LOGON / SHUTDOWN SCREENS
   ============================================================ */
#logon, #shutdown-screen {
  position: fixed; inset: 0;
  z-index: 20000;
  display: none;
}
#logon {
  background: radial-gradient(ellipse at 50% 40%, #7aa7d4 0%, #4a76a8 40%, #2b4e7c 78%, #1c3a61 100%);
  flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .45s ease;
}
#logon.fadeout { opacity: 0; }
#logon .logon-brand {
  position: absolute; bottom: 42px;
  color: rgba(255,255,255,.85);
  font-size: 20px; font-weight: 300;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
#logon .logon-user {
  width: 190px; height: 190px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 3px 18px rgba(0,0,0,.45);
  background: #b7c9d8 url('user-tile.png') center/cover;
}
#logon .logon-name {
  margin-top: 14px;
  color: #fff; font-size: 22px; font-weight: 300;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
#logon .logon-sub {
  margin-top: 4px; color: rgba(255,255,255,.85); font-size: 13px;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
#logon .logon-pass-row {
  margin-top: 14px;
  display: flex; gap: 6px;
}
#logon-pass {
  width: 218px; height: 33px;
  padding: 0 10px;
  font-size: 14px;
  border: 1px solid #5f7387;
  border-radius: 3px;
  outline: none;
  background: linear-gradient(#eef2f5, #ffffff 30%);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.25);
}
#logon-pass:focus { border-color: #2d6a9f; box-shadow: inset 0 1px 3px rgba(0,0,0,.2), 0 0 7px rgba(100,170,230,.7); }
#logon-go {
  width: 36px; height: 33px;
  border: 1px solid #33506b;
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  background: linear-gradient(#7f9db9, #5b7c99 48%, #486a86 52%, #3b5d78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.4);
  text-shadow: 0 1px 1px rgba(0,0,0,.6);
}
#logon-go:hover { filter: brightness(1.12); }
#logon-go:active { box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }
#logon .logon-error {
  margin-top: 12px;
  min-height: 16px;
  color: #ffd9d9;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(120,0,0,.8);
}
#logon .logon-error.shake { animation: shake .4s ease; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-8px); } 40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(3px); }
}

#shutdown-screen {
  background: radial-gradient(ellipse at 50% 45%, #6d96c2 0%, #3f6390 45%, #24466e 85%);
  flex-direction: column; align-items: center; justify-content: center;
}
#shutdown-screen .shut-text {
  color: #fff; font-size: 17px; font-weight: 300;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  margin-bottom: 18px;
}
#shutdown-screen .shut-spinner {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#shutdown-screen.off { background: #04070c; cursor: pointer; }

/* ============================================================
   DESKTOP GADGETS
   ============================================================ */
.gadget {
  position: absolute;
  width: 130px; height: 130px;
  z-index: 20;
  cursor: move;
}
.gadget-x {
  display: none;
  position: absolute;
  top: 6px; right: 6px;
  width: 18px; height: 18px;
  border-radius: 3px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(60,80,100,.6);
  color: #333;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.gadget:hover .gadget-x { display: block; }

.gadget-gal { display: flex; flex-direction: column; height: 100%; background: #f0f0f0; }
.gadget-tile {
  width: 150px;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  color: #2a4a68;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
}
.gadget-tile:hover { background: #e2eef8; border-color: #c4ddf0; }
.gadget-tile-preview { height: 136px; }

/* ============================================================
   FILE OPEN/SAVE DIALOG (cloud FS)
   ============================================================ */
.fdlg { display: flex; flex-direction: column; height: 100%; background: #f0f0f0; }
.fdlg-main { flex: 1 1 auto; display: flex; min-height: 0; }
.fdlg-view { flex: 1 1 auto; background: #fff; overflow: auto; padding: 8px; position: relative; }
.fdlg-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: #f0f0f0;
  border-top: 1px solid #dfe4e9;
}
.fdlg-foot label { font-size: 12px; color: #333; white-space: nowrap; }
.fdlg-foot input {
  flex: 1 1 auto;
  height: 25px;
  padding: 0 6px;
  font-size: 12px;
  border: 1px solid #7f9db9;
  outline: none;
  font-family: inherit;
}

/* ============================================================
   PHOTO VIEWER
   ============================================================ */
.pv { display: flex; flex-direction: column; height: 100%; background: #f3f1e9; }
.pv-menu {
  flex: 0 0 auto;
  display: flex; gap: 2px;
  padding: 2px 6px;
  background: #f3f1e9;
  border-bottom: 1px solid #e0dbc9;
  font-size: 12px; color: #333;
}
.pv-menu span { padding: 2px 8px; cursor: pointer; border-radius: 2px; }
.pv-menu span:hover { background: rgba(70,120,190,.15); outline: 1px solid #b8d6f2; }
.pv-stage {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  min-height: 0;
}
.pv-stage img {
  max-width: 96%; max-height: 96%;
  box-shadow: 0 3px 14px rgba(0,0,0,.35);
  background: #fff;
  transition: transform .2s ease;
}
.pv-controls {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 9px 0 11px;
}
.pv-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(90, 95, 80, .8);
  background: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(210, 215, 200, .55) 50%, rgba(180, 190, 170, .6));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(0,0,0,.3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #333;
  font-size: 13px;
}
.pv-btn:hover { border-color: #3c7fb1; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 8px rgba(80,160,220,.6); }
.pv-btn:active { filter: brightness(.9); }
.pv-btn.big { width: 44px; height: 44px; }
.pv-btn.armed { background: linear-gradient(to bottom, #d9edf9, #b3d9f0 50%, #94c4e8); border-color: #3c7fb1; }

/* ============================================================
   UPLOAD FILES APP
   ============================================================ */
.up { display: flex; flex-direction: column; height: 100%; background: #f0f0f0; padding: 14px; gap: 10px; }
.up-drop {
  flex: 1 1 auto;
  border: 2px dashed #9fb4c6;
  border-radius: 5px;
  background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  color: #4c6781;
  font-size: 13px;
  min-height: 130px;
  transition: border-color .15s, background .15s;
}
.up-drop.over { border-color: #3399ff; background: #eaf4fd; }
.up-drop .up-note { font-size: 11px; color: #8a97a6; }
.up-list { max-height: 140px; overflow: auto; background: #fff; border: 1px solid #d4dde5; border-radius: 3px; padding: 4px; font-size: 12px; }
.up-list .up-row { display: flex; justify-content: space-between; padding: 3px 6px; border-bottom: 1px solid #eef2f5; color: #333; }
.up-list .up-row:last-child { border-bottom: 0; }
.up-list .up-ok { color: #2e7d32; }

/* scrollbars (roughly Win7-like) */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: #edf1f5; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to right, #d9e2ea, #c3cfda);
  border: 1px solid #aebbc7;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(to right, #e8f0f7, #d3e0eb); }
::-webkit-scrollbar-button { display: none; }