/* ============ Aero Glass system ============ */
:root {
  --gh: 202;              /* glass hue */
  --gs: 62%;              /* glass saturation */
  --gl: 36%;              /* glass lightness */
  --ga: .68;              /* glass alpha */
  --gblur: 13px;
  --gsat: 1.8;
  --gint: 1;              /* intensity multiplier for glows */
}

/* ---------- windows ---------- */
#windows-layer { position:absolute; inset:0 0 40px 0; z-index:100; pointer-events:none; }
#windows-layer > * { pointer-events:auto; }

.win {
  position:absolute; min-width:220px; min-height:120px;
  padding:0;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.5));
}
.win.noanim { transition:none !important; }
.win.animating { transition:left .28s cubic-bezier(.2,.8,.25,1), top .28s cubic-bezier(.2,.8,.25,1), width .28s cubic-bezier(.2,.8,.25,1), height .28s cubic-bezier(.2,.8,.25,1); }

.win-chrome {
  position:absolute; inset:0; border-radius:7px 7px 4px 4px;
  border:1px solid rgba(0,0,0,.72);
  background:linear-gradient(180deg,
    hsla(var(--gh),var(--gs),calc(var(--gl) + 30%),calc(var(--ga) + .16)) 0%,
    hsla(var(--gh),var(--gs),calc(var(--gl) + 14%),calc(var(--ga) - .02)) 42%,
    hsla(var(--gh),var(--gs),var(--gl),calc(var(--ga) - .08)) 50%,
    hsla(var(--gh),var(--gs),calc(var(--gl) + 8%),calc(var(--ga) + .04)) 100%);
  -webkit-backdrop-filter:blur(var(--gblur)) saturate(var(--gsat)) brightness(1.04);
  backdrop-filter:blur(var(--gblur)) saturate(var(--gsat)) brightness(1.04);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.52),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(255,255,255,.22);
  transition:box-shadow .25s;
}
/* horizontal sheen that makes the glass read as glass */
.win-chrome::before {
  content:""; position:absolute; inset:1px; border-radius:6px 6px 3px 3px; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.5) 0%, rgba(255,255,255,.14) 30%,
    rgba(255,255,255,.03) 46%, rgba(255,255,255,0) 50%,
    rgba(255,255,255,.10) 78%, rgba(255,255,255,.26) 100%);
}
.win.active .win-chrome {
  border-color:rgba(0,0,0,.85);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.66),
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(255,255,255,.28),
    0 0 calc(16px * var(--gint)) hsla(var(--gh),95%,62%,calc(.55 * var(--gint))),
    0 0 calc(3px * var(--gint)) hsla(var(--gh),95%,70%,.5);
}
.win:not(.active) .win-chrome {
  background:linear-gradient(180deg,
    hsla(var(--gh),24%,62%,.60) 0%,
    hsla(var(--gh),20%,52%,.50) 42%,
    hsla(var(--gh),18%,46%,.46) 50%,
    hsla(var(--gh),20%,54%,.54) 100%);
  -webkit-backdrop-filter:blur(calc(var(--gblur) * .8)) saturate(1.25);
  backdrop-filter:blur(calc(var(--gblur) * .8)) saturate(1.25);
}
.win:not(.active) .win-title { opacity:.62; }

.win-titlebar {
  position:absolute; top:0; left:0; right:0; height:30px;
  display:flex; align-items:center; justify-content:center;
  cursor:default; touch-action:none;
}
.win-titlewrap { display:flex; align-items:center; gap:6px; max-width:calc(100% - 170px); pointer-events:none; }
.win-titlewrap .wico { width:16px; height:16px; flex:none; filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.win-title {
  color:#fff; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 0 8px rgba(20,40,80,.9), 0 1px 2px rgba(0,0,0,.8), 0 0 2px rgba(0,0,0,.9);
}
.win:not(.active) .win-title { text-shadow:0 1px 2px rgba(0,0,0,.5); }

/* caption buttons */
.capbtns { position:absolute; top:0; right:7px; height:30px; display:flex; align-items:flex-start; padding-top:5px; gap:2px; }
.cap {
  position:relative; height:17px; border-radius:3px;
  border:1px solid rgba(0,0,0,.6);
  background:linear-gradient(180deg,
    hsla(var(--gh),var(--gs),calc(var(--gl) + 34%),.95),
    hsla(var(--gh),var(--gs),calc(var(--gl) + 12%),.85) 45%,
    hsla(var(--gh),var(--gs),calc(var(--gl) - 2%),.85) 50%,
    hsla(var(--gh),var(--gs),calc(var(--gl) + 16%),.9));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.5);
  transition:box-shadow .12s, background .12s;
}
.cap.min, .cap.max, .cap.help { width:26px; }
.cap.close { width:41px; }
.cap::before {
  content:""; position:absolute; inset:0;
  background-repeat:no-repeat; background-position:center;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.65));
}
.cap.min::before  { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect x='0' y='6' width='10' height='3' rx='1' fill='%23fff'/%3E%3C/svg%3E"); }
.cap.max::before  { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect x='.5' y='.5' width='9' height='9' rx='1' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); }
.cap.restore::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Crect x='3' y='.5' width='7.5' height='7.5' rx='1' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3Cpath d='M.8 3.4h5.6v5.8H.8z' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"); }
.cap.close::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M1.5 1.5l9 9m0-9l-9 9' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cap.help::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ctext x='5' y='8.4' text-anchor='middle' font-family='Segoe UI,Arial' font-size='9.5' font-weight='bold' fill='%23fff'%3E%3F%3C/text%3E%3C/svg%3E"); }

.cap.min:hover, .cap.max:hover, .cap.help:hover {
  background:linear-gradient(180deg,#cfe9ff,#8ec9f5 45%,#5db2ea 50%,#9ed4f8);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8), 0 0 9px rgba(110,190,255,.95), 0 0 3px rgba(140,210,255,.9);
  border-color:#1e5c8f;
}
.cap.close:hover {
  background:linear-gradient(180deg,#ffd9c9,#f7906b 45%,#e75b34 50%,#f39163);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8), 0 0 10px rgba(255,120,60,.95), 0 0 3px rgba(255,150,90,.9);
  border-color:#7e1c05;
}
.cap:active { filter:brightness(.82); }

/* window body */
.win-body {
  position:absolute; left:7px; right:7px; top:30px; bottom:7px;
  background:#fff; border:1px solid rgba(0,0,0,.62); border-radius:1px;
  overflow:hidden; display:flex; flex-direction:column;
}
.win.maxed { padding:0; }
.win.maxed .win-chrome { border-radius:0; border-left:0; border-right:0; border-top:0; }
.win.maxed .win-body { left:0; right:0; top:30px; bottom:0; border-left:0; border-right:0; border-bottom:0; }

/* resize handles */
.rh { position:absolute; z-index:5; }
.rh.n  { top:-3px; left:8px; right:8px; height:8px; cursor:n-resize; }
.rh.s  { bottom:-3px; left:8px; right:8px; height:8px; cursor:s-resize; }
.rh.e  { right:-3px; top:8px; bottom:8px; width:8px; cursor:e-resize; }
.rh.w  { left:-3px; top:8px; bottom:8px; width:8px; cursor:w-resize; }
.rh.ne { top:-4px; right:-4px; width:14px; height:14px; cursor:ne-resize; }
.rh.nw { top:-4px; left:-4px; width:14px; height:14px; cursor:nw-resize; }
.rh.se { bottom:-4px; right:-4px; width:14px; height:14px; cursor:se-resize; }
.rh.sw { bottom:-4px; left:-4px; width:14px; height:14px; cursor:sw-resize; }

/* window open / close / minimize animations */
@keyframes winopen {
  0%   { opacity:0; transform:scale(.92) translateY(14px); }
  60%  { opacity:1; }
  100% { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes winclose {
  to { opacity:0; transform:scale(.94) translateY(8px); }
}
.win.opening { animation:winopen .26s cubic-bezier(.2,.85,.3,1); }
.win.closing { animation:winclose .18s ease-in forwards; pointer-events:none; }
#minimize-ghost {
  position:fixed; z-index:3500; pointer-events:none; display:none;
  border-radius:7px; overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.5);
}

/* snap preview */
#snap-preview {
  position:fixed; z-index:900; pointer-events:none; border-radius:8px;
  border:1px solid rgba(160,210,255,.75);
  background:linear-gradient(180deg, hsla(var(--gh),80%,70%,.34), hsla(var(--gh),70%,50%,.26));
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 0 18px hsla(var(--gh),90%,65%,.5);
  transition:all .12s ease-out;
}

/* ---------- taskbar ---------- */
#taskbar {
  position:absolute; left:0; right:0; bottom:0; height:40px; z-index:3000;
  display:flex; align-items:stretch;
  background:linear-gradient(180deg,
    hsla(var(--gh),var(--gs),calc(var(--gl) + 22%),.82) 0%,
    hsla(var(--gh),var(--gs),calc(var(--gl) + 6%),.66) 38%,
    hsla(var(--gh),var(--gs),calc(var(--gl) - 6%),.62) 50%,
    hsla(var(--gh),var(--gs),calc(var(--gl) + 4%),.78) 100%);
  -webkit-backdrop-filter:blur(15px) saturate(var(--gsat));
  backdrop-filter:blur(15px) saturate(var(--gsat));
  border-top:1px solid rgba(0,0,0,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 -2px 10px rgba(0,0,0,.35);
}

#start-orb {
  position:relative; width:54px; flex:none; z-index:2;
  display:flex; align-items:center; justify-content:center;
}
#start-orb .pearl {
  position:absolute; left:50%; top:50%; width:42px; height:42px; translate:-50% -50%;
  border-radius:50%;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255,255,255,.95), rgba(255,255,255,.28) 34%, rgba(255,255,255,0) 46%),
    radial-gradient(100% 100% at 50% 30%, #9fd8ff 0%, #4f9fe0 38%, #1c5fae 66%, #0c3d7c 100%);
  border:1px solid rgba(6,30,60,.85);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55), inset 0 -6px 10px rgba(4,26,58,.55), 0 2px 6px rgba(0,0,0,.5);
  transition:box-shadow .15s, filter .15s;
}
#start-orb .flag { position:relative; width:22px; height:22px; z-index:1; filter:drop-shadow(0 1px 1px rgba(0,20,50,.6)); }
#start-orb:hover .pearl {
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75), inset 0 -6px 10px rgba(4,26,58,.5),
    0 0 14px 3px rgba(120,200,255,.85), 0 2px 6px rgba(0,0,0,.5);
  filter:brightness(1.12);
}
#start-orb:active .pearl { filter:brightness(.9); }
#start-orb.open .pearl {
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8), inset 0 -4px 12px rgba(2,20,48,.7),
    0 0 18px 4px rgba(140,210,255,.95);
}

.ql-divider, .tray-divider {
  flex:none; width:2px; margin:5px 3px;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.18));
  border-right:1px solid rgba(255,255,255,.28);
}
#quicklaunch { display:flex; align-items:center; gap:2px; padding:0 3px; }
.ql-btn {
  width:30px; height:30px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  border:1px solid transparent; transition:all .13s;
}
.ql-btn svg, .ql-btn img { width:20px; height:20px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.ql-btn:hover {
  border-color:rgba(255,255,255,.5);
  background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(190,225,255,.22) 45%, rgba(120,180,240,.16) 50%, rgba(190,230,255,.3));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 0 8px rgba(140,200,255,.55);
}
.ql-btn:active { filter:brightness(.85); }

#task-buttons { flex:1; display:flex; align-items:center; gap:3px; padding:0 4px; overflow:hidden; }
.tbtn {
  position:relative; height:30px; min-width:54px; max-width:190px; flex:0 1 180px;
  display:flex; align-items:center; gap:6px; padding:0 10px 0 7px;
  border-radius:3px; border:1px solid rgba(0,0,0,.55);
  background:linear-gradient(180deg,
    hsla(var(--gh),var(--gs),calc(var(--gl) + 26%),.55),
    hsla(var(--gh),var(--gs),calc(var(--gl) + 8%),.38) 45%,
    hsla(var(--gh),var(--gs),var(--gl),.34) 50%,
    hsla(var(--gh),var(--gs),calc(var(--gl) + 12%),.46));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.35);
  transition:box-shadow .13s, background .13s;
  overflow:hidden;
}
.tbtn .tico { width:18px; height:18px; flex:none; filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.tbtn .tlabel {
  color:#fff; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left;
  text-shadow:0 1px 2px rgba(0,0,0,.75);
}
.tbtn:hover {
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), 0 0 9px rgba(130,200,255,.7);
  background:linear-gradient(180deg,
    hsla(var(--gh),var(--gs),calc(var(--gl) + 34%),.7),
    hsla(var(--gh),var(--gs),calc(var(--gl) + 12%),.5) 45%,
    hsla(var(--gh),var(--gs),calc(var(--gl) + 2%),.45) 50%,
    hsla(var(--gh),var(--gs),calc(var(--gl) + 18%),.6));
}
.tbtn.active {
  background:linear-gradient(180deg,
    hsla(var(--gh),85%,calc(var(--gl) + 40%),.85),
    hsla(var(--gh),80%,calc(var(--gl) + 18%),.66) 45%,
    hsla(var(--gh),75%,calc(var(--gl) + 6%),.6) 50%,
    hsla(var(--gh),80%,calc(var(--gl) + 24%),.78));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), inset 0 0 12px rgba(255,255,255,.35), 0 0 8px hsla(var(--gh),90%,65%,.6);
}
.tbtn.active .tlabel { font-weight:600; }
.tbtn.flash { animation:tflash 1s ease-in-out infinite; }
@keyframes tflash {
  0%,100% { box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 0 4px rgba(255,170,60,.4); }
  50%     { box-shadow:inset 0 0 0 1px rgba(255,220,150,.9), 0 0 14px rgba(255,170,60,.95);
            background:linear-gradient(180deg,#ffe9b8,#ffd27a 45%,#f5b23e 50%,#ffd88c); }
}
.tbtn.minimizing { transition:transform .25s ease-in, opacity .25s; }

/* tray */
#tray { display:flex; align-items:center; gap:2px; padding:0 6px 0 2px; }
#tray-chevron {
  width:20px; height:26px; border-radius:3px; display:flex; align-items:center; justify-content:center;
  border:1px solid transparent;
}
#tray-chevron::before {
  content:""; width:9px; height:9px;
  border-left:2px solid rgba(255,255,255,.9); border-top:2px solid rgba(255,255,255,.9);
  rotate:-45deg; translate:1px 2px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));
}
#tray-chevron:hover { border-color:rgba(255,255,255,.45); background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(150,200,255,.18)); box-shadow:0 0 6px rgba(140,200,255,.5); }
#tray-icons { display:flex; align-items:center; gap:7px; padding:0 4px; }
.tray-ico { width:16px; height:16px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)); transition:transform .12s; cursor:default; }
.tray-ico:hover { transform:scale(1.12); }
#tray-clock {
  height:100%; min-width:64px; padding:0 10px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.7); border-left:1px solid rgba(255,255,255,.18);
  transition:background .13s;
}
#tray-clock:hover { background:linear-gradient(180deg, rgba(255,255,255,.3), rgba(160,210,255,.14)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
#clock-time { font-size:12px; line-height:1.3; }
#clock-date { font-size:11px; line-height:1.2; opacity:.95; }

/* ---------- thumbnail preview ---------- */
#thumb-pop {
  position:fixed; z-index:3200; pointer-events:none;
  padding:7px 8px 6px; border-radius:6px;
  background:linear-gradient(180deg, rgba(70,90,120,.72), rgba(24,34,52,.78) 50%, rgba(16,24,38,.82));
  -webkit-backdrop-filter:blur(10px) saturate(1.5); backdrop-filter:blur(10px) saturate(1.5);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 8px 24px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.3);
  animation:thumbin .14s ease-out;
}
@keyframes thumbin { from { opacity:0; translate:0 8px; } }
#thumb-pop .tp-title { color:#fff; font-size:12px; text-align:center; margin-bottom:5px; text-shadow:0 1px 2px rgba(0,0,0,.8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px; }
#thumb-pop .tp-snap { width:216px; height:132px; position:relative; overflow:hidden; border:1px solid rgba(0,0,0,.7); border-radius:2px; background:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.25); }
#thumb-pop .tp-snap > * { position:absolute; top:0; left:0; transform-origin:top left; pointer-events:none; }

/* ---------- start menu ---------- */
#startmenu {
  position:fixed; left:2px; bottom:41px; z-index:3100;
  width:402px; height:min(560px, calc(100dvh - 60px));
  display:flex; padding:7px;
  border-radius:9px 9px 4px 4px; border:1px solid rgba(0,0,0,.75);
  background:linear-gradient(180deg,
    hsla(var(--gh),var(--gs),calc(var(--gl) + 26%),.8),
    hsla(var(--gh),var(--gs),calc(var(--gl) + 8%),.62) 45%,
    hsla(var(--gh),var(--gs),var(--gl),.58) 52%,
    hsla(var(--gh),var(--gs),calc(var(--gl) + 10%),.72));
  -webkit-backdrop-filter:blur(16px) saturate(var(--gsat)); backdrop-filter:blur(16px) saturate(var(--gsat));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.6), 0 12px 40px rgba(0,0,0,.65), 0 0 20px hsla(var(--gh),90%,60%,.35);
  transform-origin:bottom left;
  animation:smin .18s cubic-bezier(.2,.85,.3,1);
}
@keyframes smin { from { opacity:0; transform:scale(.96) translateY(10px); } }
#startmenu.closing { animation:smout .14s ease-in forwards; }
@keyframes smout { to { opacity:0; transform:scale(.97) translateY(8px); } }

.sm-left {
  flex:1 1 58%; display:flex; flex-direction:column; min-width:0;
  background:linear-gradient(180deg,#fdfdfe,#eef2f7);
  border:1px solid rgba(0,0,0,.6); border-radius:3px 0 0 3px; overflow:hidden;
}
.sm-programs { flex:1; overflow-y:auto; overflow-x:hidden; position:relative; }
.sm-view { padding:5px 4px; }
.sm-item {
  display:flex; align-items:center; gap:8px; padding:4px 8px 4px 6px; border-radius:3px;
  border:1px solid transparent; cursor:default; position:relative;
}
.sm-item .smi-ico { width:24px; height:24px; flex:none; }
.sm-item .smi-label { font-size:12px; color:#1a1a1a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sm-item:hover {
  border-color:#b8d6f5;
  background:linear-gradient(180deg,#fdfefe,#e9f2fc 45%,#d8e8f9 50%,#e9f3fc);
  box-shadow:inset 0 1px 0 #fff;
}
.sm-item:active { background:linear-gradient(180deg,#e5f4fc,#c4e5f6 45%,#98d1ef 50%,#c8e8f8); }
.sm-sep { height:1px; margin:4px 8px; background:linear-gradient(90deg,transparent,#d5dbe3 15%,#d5dbe3 85%,transparent); }
.sm-heading { padding:5px 10px 3px; font-size:11px; color:#5a6572; font-weight:600; letter-spacing:.02em; }
.sm-allprog {
  display:flex; align-items:center; gap:8px; margin:2px 4px; padding:5px 8px; border-radius:3px; border:1px solid transparent;
}
.sm-allprog:hover { border-color:#b8d6f5; background:linear-gradient(180deg,#fdfefe,#e9f2fc 45%,#d8e8f9 50%,#e9f3fc); }
.sm-allprog .arrow { width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#dff0ff,#7fb9e8 60%,#4d90cc); border:1px solid #3a76ab; box-shadow:inset 0 1px 0 rgba(255,255,255,.8); display:flex; align-items:center; justify-content:center; }
.sm-allprog .arrow::after { content:""; width:5px; height:5px; border-top:2px solid #fff; border-right:2px solid #fff; rotate:45deg; translate:-1px 0; }
.sm-back { margin:2px 4px 4px; }

.sm-search { flex:none; margin:6px; position:relative; }
.sm-search input {
  width:100%; padding:5px 30px 5px 8px; border-radius:3px; font-size:12px;
  border:1px solid #8ba0b5; background:linear-gradient(180deg,#fff,#f4f8fc);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.12);
}
.sm-search .mag {
  position:absolute; right:2px; top:50%; translate:0 -50%; width:24px; height:22px;
  display:flex; align-items:center; justify-content:center; border-radius:0 3px 3px 0;
}
.sm-search .mag svg { width:13px; height:13px; }

.sm-right {
  flex:1 1 42%; display:flex; flex-direction:column; min-width:0;
  border:1px solid rgba(0,0,0,.55); border-left:0; border-radius:0 3px 3px 0;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 30%, rgba(0,0,0,.06));
  color:#fff; padding:8px 6px 6px;
}
.sm-user { display:flex; align-items:center; gap:9px; padding:2px 4px 10px; }
.sm-user .tile {
  width:46px; height:46px; flex:none; border-radius:4px; overflow:hidden;
  border:1px solid rgba(0,0,0,.6); box-shadow:0 0 0 1px rgba(255,255,255,.55), 0 2px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5);
  background:radial-gradient(120% 100% at 50% 0%, #bfe6ff, #5aa7dc 55%, #2b6ea8);
  display:flex; align-items:flex-end; justify-content:center;
}
.sm-user .uname { font-size:14px; font-weight:600; text-shadow:0 1px 3px rgba(0,0,0,.8); }
.sm-link {
  display:flex; align-items:center; gap:7px; padding:4px 8px; border-radius:3px; border:1px solid transparent;
  color:#fff; font-size:12px; text-shadow:0 1px 2px rgba(0,0,0,.65); white-space:nowrap;
}
.sm-link svg { width:15px; height:15px; flex:none; filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.sm-link:hover { border-color:rgba(255,255,255,.5); background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(170,215,255,.16)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 0 7px rgba(140,200,255,.45); }
.sm-link.bold { font-weight:600; }
.sm-right .sm-sep { background:linear-gradient(90deg,transparent,rgba(255,255,255,.4) 15%,rgba(255,255,255,.4) 85%,transparent); margin:5px 8px; }
.sm-powerrow { margin-top:auto; display:flex; justify-content:flex-end; align-items:center; padding:6px 2px 0; gap:1px; }
.sm-power {
  display:flex; align-items:center; height:26px; border-radius:3px 0 0 3px; padding:0 10px 0 8px; gap:6px;
  border:1px solid rgba(0,0,0,.6); color:#fff; font-size:12px; text-shadow:0 1px 1px rgba(0,0,0,.7);
  background:linear-gradient(180deg, hsla(var(--gh),70%,calc(var(--gl) + 34%),.95), hsla(var(--gh),70%,calc(var(--gl) + 10%),.85) 45%, hsla(var(--gh),70%,var(--gl),.85) 50%, hsla(var(--gh),70%,calc(var(--gl) + 18%),.9));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.sm-power:hover { box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 0 8px rgba(140,200,255,.7); filter:brightness(1.1); }
.sm-power-arrow {
  height:26px; width:18px; border-radius:0 3px 3px 0; border:1px solid rgba(0,0,0,.6); border-left:0;
  background:linear-gradient(180deg, hsla(var(--gh),70%,calc(var(--gl) + 34%),.95), hsla(var(--gh),70%,calc(var(--gl) + 10%),.85) 45%, hsla(var(--gh),70%,var(--gl),.85) 50%, hsla(var(--gh),70%,calc(var(--gl) + 18%),.9));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
}
.sm-power-arrow::after { content:""; width:6px; height:6px; border-bottom:2px solid #fff; border-right:2px solid #fff; rotate:45deg; translate:0 -2px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.sm-power-arrow:hover, .sm-power:hover + .sm-power-arrow { filter:brightness(1.1); }

/* ---------- menus (context + dropdown) ---------- */
.menu-root { position:fixed; z-index:5200; }
.menu {
  min-width:178px; padding:2px; border-radius:3px;
  background:linear-gradient(180deg,#fcfdfe,#f2f5f9);
  border:1px solid #8f959c;
  box-shadow:2px 3px 8px rgba(0,0,0,.38), inset 0 0 0 1px #fff;
  position:relative;
  animation:menuin .1s ease-out;
}
@keyframes menuin { from { opacity:0; translate:0 -3px; } }
.menu::before {
  content:""; position:absolute; top:2px; bottom:2px; left:2px; width:26px;
  background:linear-gradient(90deg,#f7fafc,#eaeff5);
  border-right:1px solid #e0e6ec; border-radius:2px 0 0 2px;
}
.menu.sub { position:absolute; left:calc(100% - 4px); top:-4px; }
.menu.leftward { left:auto; right:calc(100% - 4px); }
.mi {
  position:relative; display:flex; align-items:center; gap:8px;
  padding:4px 26px 4px 33px; border-radius:3px; border:1px solid transparent;
  font-size:12px; color:#1c1c1c; white-space:nowrap;
}
.mi .mi-ico { position:absolute; left:5px; top:50%; translate:0 -50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center; }
.mi .mi-ico svg { width:16px; height:16px; }
.mi .mi-check { position:absolute; left:7px; top:50%; translate:0 -50%; width:14px; height:14px; border-radius:2px;
  background:linear-gradient(180deg,#eaf5fd,#cfe7fa); border:1px solid #84b4dc; box-shadow:inset 0 1px 0 #fff; }
.mi .mi-check::after { content:""; position:absolute; left:3px; top:3px; width:6px; height:3.5px; border-left:2px solid #2a6db5; border-bottom:2px solid #2a6db5; rotate:-45deg; }
.mi .mi-arrow { position:absolute; right:7px; top:50%; translate:0 -50%; width:0; height:0;
  border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:5px solid #5a6068; }
.mi:hover:not(.disabled), .mi.open {
  border-color:#b8d6f5;
  background:linear-gradient(180deg,#fdfeff,#e9f2fc 45%,#d8e8f9 50%,#eaf3fc);
  box-shadow:inset 0 1px 0 #fff;
}
.mi.disabled { color:#9aa0a6; }
.mi.disabled .mi-ico { opacity:.4; }
.mi:active:not(.disabled) { background:linear-gradient(180deg,#e5f4fc,#c4e5f6 45%,#98d1ef 50%,#c8e8f8); }
.msep { height:1px; margin:3px 4px 3px 32px; background:#dfe3e8; box-shadow:0 1px 0 #fff; }
.menu .msep + .msep, .menu .mi:first-child + .msep { display:none; }

/* menu bar (File Edit ...) */
.menubar { display:flex; padding:1px 2px; background:linear-gradient(180deg,#fdfeff,#eef2f7); border-bottom:1px solid #d5dbe2; flex:none; }
.mb-item { padding:3px 8px; border-radius:3px; border:1px solid transparent; font-size:12px; }
.mb-item:hover, .mb-item.open {
  border-color:#b8d6f5; background:linear-gradient(180deg,#fdfeff,#e9f2fc 45%,#d8e8f9 50%,#eaf3fc);
  box-shadow:inset 0 1px 0 #fff;
}

/* ---------- flyouts (calendar, volume, hidden icons) ---------- */
.flyout {
  position:fixed; z-index:3300; border-radius:6px; padding:6px;
  background:linear-gradient(180deg, rgba(70,92,124,.78), rgba(26,36,54,.85) 55%, rgba(18,26,40,.88));
  -webkit-backdrop-filter:blur(12px) saturate(1.5); backdrop-filter:blur(12px) saturate(1.5);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 10px 30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.35), 0 0 14px hsla(var(--gh),90%,60%,.3);
  color:#fff;
  animation:flyin .14s ease-out;
}
@keyframes flyin { from { opacity:0; translate:0 8px; } }
.flyout.closing { animation:flyout .12s ease-in forwards; }
@keyframes flyout { to { opacity:0; translate:0 6px; } }

/* calendar flyout */
.cal-fly { width:212px; padding:8px 10px 10px; }
.cal-head { display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:600; padding-bottom:6px; text-shadow:0 1px 2px rgba(0,0,0,.7); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; font-size:11px; text-align:center; }
.cal-grid .dow { color:#9fc4e8; font-size:10px; padding:3px 0; }
.cal-grid .day { padding:3px 0; border-radius:3px; color:#e8f2fc; cursor:default; }
.cal-grid .day:hover { background:rgba(140,190,255,.3); box-shadow:inset 0 0 0 1px rgba(180,215,255,.4); }
.cal-grid .day.other { color:#5f7590; }
.cal-grid .day.today { background:linear-gradient(180deg,#7db6e8,#3f7fc0); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 0 6px rgba(120,180,255,.6); font-weight:700; }

/* volume flyout */
.vol-fly { width:52px; height:170px; display:flex; flex-direction:column; align-items:center; padding:12px 0 10px; gap:8px; }
.vol-track { flex:1; width:8px; border-radius:4px; background:rgba(0,0,0,.5); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25), inset 0 2px 4px rgba(0,0,0,.6); position:relative; cursor:pointer; }
.vol-fill { position:absolute; bottom:0; left:0; right:0; border-radius:4px; background:linear-gradient(180deg,#b8e6a8,#6cc24e 40%,#4da336); box-shadow:0 0 8px rgba(120,220,90,.6), inset 0 1px 0 rgba(255,255,255,.6); }
.vol-knob { position:absolute; left:50%; translate:-50% 50%; width:18px; height:9px; border-radius:3px; background:linear-gradient(180deg,#fdfdfd,#d8dde3); border:1px solid #6a7076; box-shadow:0 1px 3px rgba(0,0,0,.5); }
.vol-ico { width:18px; height:18px; cursor:pointer; }
.vol-pct { font-size:11px; text-shadow:0 1px 2px rgba(0,0,0,.7); }

/* hidden icons flyout */
.hid-fly { display:grid; grid-template-columns:repeat(3,34px); gap:4px; padding:8px; }
.hid-fly .tray-ico { width:22px; height:22px; padding:3px; border-radius:3px; }
.hid-fly .tray-ico:hover { background:rgba(150,200,255,.25); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }

/* ---------- balloons ---------- */
#balloons { position:fixed; right:10px; bottom:52px; z-index:3400; display:flex; flex-direction:column-reverse; gap:10px; align-items:flex-end; }
.balloon {
  position:relative; width:300px; padding:11px 26px 12px 40px; border-radius:6px;
  background:linear-gradient(180deg,#ffffff,#f6f8fb 60%,#eaeef4);
  border:1px solid #7c828a; box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 0 0 1px #fff;
  animation:balin .25s cubic-bezier(.2,.85,.3,1);
}
@keyframes balin { from { opacity:0; translate:0 14px; } }
.balloon.out { animation:balout .3s ease-in forwards; }
@keyframes balout { to { opacity:0; translate:0 10px; } }
.balloon::after {
  content:""; position:absolute; right:26px; bottom:-7px; width:12px; height:12px;
  background:#eef1f5; border-right:1px solid #7c828a; border-bottom:1px solid #7c828a; rotate:45deg;
}
.balloon .b-ico { position:absolute; left:11px; top:11px; width:22px; height:22px; }
.balloon .b-title { font-size:12px; font-weight:700; color:#1c1c1c; margin-bottom:3px; }
.balloon .b-body { font-size:12px; color:#333; line-height:1.4; }
.balloon .b-close { position:absolute; top:6px; right:7px; width:16px; height:16px; border-radius:3px; display:flex; align-items:center; justify-content:center; border:1px solid transparent; }
.balloon .b-close::before { content:""; width:8px; height:8px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M1 1l6 6m0-6l-6 6' stroke='%23666' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat; }
.balloon .b-close:hover { border-color:#c2a18d; background:linear-gradient(180deg,#ffe9d9,#f7c3a5); }

/* ---------- generic Vista buttons ---------- */
.vbtn {
  min-width:80px; padding:3px 14px; border-radius:3px;
  border:1px solid #707070;
  background:linear-gradient(180deg,#f2f2f2,#ebebeb 45%,#dddddd 50%,#cfcfcf);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  font-size:12px; color:#000;
  transition:box-shadow .15s, background .12s;
}
.vbtn:hover { border-color:#3c7fb1; background:linear-gradient(180deg,#eaf6fd,#d9f0fc 45%,#bee6fd 50%,#a7d9f5); }
.vbtn:active { background:linear-gradient(180deg,#e5f4fc,#c4e5f6 45%,#98d1ef 50%,#68b3db); border-color:#2c628b; box-shadow:inset 0 1px 2px rgba(0,0,0,.2); }
.vbtn:focus-visible { outline:none; }
.vbtn.default { border-color:#4a81c4; animation:btnglow 1.5s ease-in-out infinite; }
@keyframes btnglow {
  0%,100% { box-shadow:0 0 3px 1px rgba(90,160,230,.4), inset 0 1px 0 rgba(255,255,255,.9); }
  50%     { box-shadow:0 0 10px 2px rgba(90,160,230,.8), inset 0 1px 0 rgba(255,255,255,.9); }
}
.vbtn[disabled] { color:#8a8f94; border-color:#adb2b5; background:linear-gradient(180deg,#f5f5f5,#e8e8e8); box-shadow:none; }

/* dialog command band */
.dlg-band {
  flex:none; display:flex; align-items:center; justify-content:flex-end; gap:8px;
  padding:10px 12px;
  background:linear-gradient(180deg,#f4f7fb,#e2e9f2 45%,#d3dce8);
  border-top:1px solid #c3cdd8;
}
.dlg-main { flex:1; display:flex; gap:14px; padding:16px 16px 12px; background:linear-gradient(180deg,#fff,#f6f8fb); overflow:auto; }
.dlg-main .dlg-ico { flex:none; width:32px; height:32px; }
.dlg-main .dlg-text { font-size:12px; line-height:1.55; color:#1c1c1c; padding-top:2px; }
.dlg-main .dlg-text h3 { font-size:14px; font-weight:600; color:#003399; margin-bottom:6px; }

/* UAC dialog specifics */
.uac-win .win-body { background:linear-gradient(180deg,#f0f4f9,#e4eaf1); }
.uac-bar { display:flex; gap:12px; padding:16px; background:linear-gradient(180deg,#fff,#eef2f7); border-bottom:1px solid #cfd8e2; }
.uac-bar .shield { width:40px; height:40px; flex:none; }
.uac-bar h2 { font-size:16px; font-weight:600; color:#1e3c5a; margin-bottom:4px; }
.uac-bar p { font-size:12px; color:#333; line-height:1.5; }
.uac-detail { margin:12px 16px; padding:10px 12px; background:#fff; border:1px solid #c3cdd8; border-radius:3px; font-size:12px; display:flex; gap:10px; align-items:center; }
.uac-detail .prog-ico { width:32px; height:32px; }
.uac-band { background:linear-gradient(180deg,#e9eef5,#d8e0ea); border-top:1px solid #b9c4d0; }
.uac-band .vbtn { display:flex; align-items:center; gap:6px; }
.uac-band .vbtn svg { width:14px; height:14px; }