/* ============ Applications & system surfaces ============ */

/* ---------- Explorer ---------- */
.exp-toolbar {
  flex:none; display:flex; align-items:center; gap:2px; padding:3px 6px;
  background:linear-gradient(180deg,#fdfeff,#eef2f7 55%,#e2e8f0);
  border-bottom:1px solid #d0d7e0;
}
.nav-btn {
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid transparent; transition:all .12s;
}
.nav-btn svg { width:16px; height:16px; }
.nav-btn.go { background:radial-gradient(circle at 35% 28%,#e9f7ff,#9fd0f0 45%,#4f9ad0 75%,#2f72a8); border-color:#2a6390; box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.25); }
.nav-btn.go:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 8px rgba(110,180,240,.8); filter:brightness(1.08); }
.nav-btn.go:active { filter:brightness(.9); }
.nav-btn.flat svg { opacity:.85; }
.nav-btn.flat:hover { border-color:#b8d6f5; background:linear-gradient(180deg,#fdfeff,#dcebfa); box-shadow:inset 0 1px 0 #fff; }
.nav-btn[disabled] svg { opacity:.3; }
.nav-btn[disabled]:hover { border-color:transparent; background:none; box-shadow:none; }

.exp-addr {
  flex:1; display:flex; align-items:center; height:24px; margin:0 4px;
  border:1px solid #a9bfd4; border-radius:3px; background:#fff; overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}
.exp-addr:focus-within { border-color:#5e8ec6; box-shadow:0 0 4px rgba(90,150,220,.5); }
.crumb {
  display:flex; align-items:center; gap:5px; padding:0 7px; height:100%; font-size:12px; white-space:nowrap;
  border-right:1px solid transparent; cursor:default;
}
.crumb svg { width:14px; height:14px; }
.crumb:hover { background:linear-gradient(180deg,#fdfeff,#dcebfa); border-color:#b8d6f5; }
.crumb-sep { color:#8ba0b5; font-size:10px; flex:none; }
.exp-addr input { flex:1; border:0 !important; box-shadow:none !important; height:100%; padding:0 8px; font-size:12px; background:transparent; min-width:40px; }
.exp-search {
  flex:none; width:170px; height:24px; display:flex; align-items:center; position:relative;
  border:1px solid #a9bfd4; border-radius:3px; background:#fff;
}
.exp-search input { width:100%; border:0 !important; box-shadow:none !important; height:100%; padding:0 24px 0 8px; font-size:12px; }
.exp-search svg { position:absolute; right:5px; width:13px; height:13px; opacity:.6; }

.exp-body { flex:1; display:flex; min-height:0; }
.exp-side {
  flex:none; width:176px; overflow-y:auto; padding:6px 4px;
  background:linear-gradient(180deg,#f2f6fb,#e6edf5);
  border-right:1px solid #d0d7e0;
}
.exp-side-head { display:flex; align-items:center; gap:6px; padding:4px 8px; font-size:12px; font-weight:600; color:#1e395c; }
.exp-side-head svg { width:16px; height:16px; }
.exp-side-head .twisty { width:9px; height:9px; border-radius:2px; background:radial-gradient(circle at 35% 30%,#eaf5ff,#9ec8ea 60%,#5f97c6); border:1px solid #4a7dab; position:relative; flex:none; transition:transform .15s; }
.exp-side-head .twisty::after { content:""; position:absolute; inset:2px; border-left:1.5px solid #fff; border-bottom:1.5px solid #fff; width:4px; height:4px; rotate:-45deg; translate:1px -1px; }
.exp-side-head.collapsed .twisty { transform:rotate(-90deg); }
.exp-side-item { display:flex; align-items:center; gap:7px; padding:3px 8px 3px 22px; border-radius:3px; border:1px solid transparent; font-size:12px; cursor:default; }
.exp-side-item svg { width:16px; height:16px; flex:none; }
.exp-side-item:hover { border-color:#b8d6f5; background:linear-gradient(180deg,#fdfeff,#dcebfa); }
.exp-side-item.sel { border-color:#93c0e8; background:linear-gradient(180deg,#e9f4fd,#cfe6f8); box-shadow:inset 0 1px 0 #fff; }

.exp-files { flex:1; overflow:auto; padding:8px; position:relative; background:#fff; }
.exp-grid { display:flex; flex-wrap:wrap; align-content:flex-start; gap:2px; }
.fitem {
  width:86px; padding:6px 2px 4px; display:flex; flex-direction:column; align-items:center; gap:4px;
  border:1px solid transparent; border-radius:3px; cursor:default;
}
.fitem .fi-ico { width:40px; height:40px; transition:transform .12s; }
.fitem:hover .fi-ico { transform:scale(1.06); }
.fitem .fi-name {
  max-width:82px; font-size:11px; text-align:center; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word;
}
.fitem:hover { background:rgba(200,225,250,.4); border-color:rgba(150,190,230,.5); }
.fitem.selected {
  background:linear-gradient(180deg, rgba(210,230,252,.85), rgba(170,205,245,.8));
  border-color:#8ab6e0; box-shadow:inset 0 1px 0 #fff;
}
.fitem.selected .fi-name { background:#3875d7; color:#fff; }
.fitem.cut { opacity:.45; }

.exp-list { width:100%; border-collapse:collapse; font-size:12px; }
.exp-list th {
  text-align:left; padding:3px 10px; font-weight:400; color:#1e395c; border-bottom:1px solid #d5dbe2;
  background:linear-gradient(180deg,#fdfeff,#eaeff5); border-right:1px solid #e2e8ee; white-space:nowrap; cursor:default;
}
.exp-list th:hover { background:linear-gradient(180deg,#fff,#dcebfa); }
.exp-list td { padding:2px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.exp-list tr.row { cursor:default; }
.exp-list tr.row:hover { background:#eef5fc; }
.exp-list tr.row.selected { background:linear-gradient(180deg,#dbeafe,#c4e0f7); box-shadow:inset 0 0 0 1px #98c4ea; }
.exp-list .ric { width:16px; height:16px; vertical-align:-3px; margin-right:6px; }

.exp-status {
  flex:none; display:flex; align-items:center; justify-content:space-between; padding:3px 10px;
  background:linear-gradient(180deg,#f4f7fb,#e2e9f2); border-top:1px solid #cfd8e2; font-size:11px; color:#3c4652;
}
.exp-empty { padding:30px; text-align:center; color:#7a8592; font-size:12px; }

/* ---------- Notepad ---------- */
.np-wrap { flex:1; display:flex; min-height:0; }
.np-area {
  flex:1; border:0; resize:none; outline:none; padding:4px 6px;
  font-family:Consolas,"Lucida Console","Menlo",monospace; font-size:13px; line-height:1.45;
  background:#fff; color:#000; border-radius:0; box-shadow:none;
}
.np-status {
  flex:none; display:flex; justify-content:flex-end; gap:18px; padding:2px 12px;
  background:linear-gradient(180deg,#f4f7fb,#e2e9f2); border-top:1px solid #cfd8e2; font-size:11px; color:#3c4652;
}

/* ---------- Paint ---------- */
.ms-toolbar { flex:none; display:flex; gap:2px; padding:4px 6px; background:linear-gradient(180deg,#fdfeff,#e8eef5); border-bottom:1px solid #d0d7e0; flex-wrap:wrap; align-items:center; }
.tool-btn {
  width:26px; height:24px; border-radius:3px; border:1px solid transparent;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.tool-btn svg { width:16px; height:16px; }
.tool-btn:hover { border-color:#b8d6f5; background:linear-gradient(180deg,#fdfeff,#dcebfa); box-shadow:inset 0 1px 0 #fff; }
.tool-btn.sel { border-color:#7aa8d0; background:linear-gradient(180deg,#cfe6f8,#a8d0ef); box-shadow:inset 0 1px 2px rgba(0,0,0,.18); }
.ms-sep { width:1px; align-self:stretch; margin:2px 4px; background:#d5dbe2; box-shadow:1px 0 0 #fff; }
.ms-canvas-wrap { flex:1; overflow:auto; background:#808080; padding:10px; position:relative; }
.ms-canvas { background:#fff; box-shadow:1px 1px 0 rgba(0,0,0,.4); cursor:crosshair; }
.ms-palette { flex:none; display:flex; align-items:center; gap:6px; padding:5px 8px; background:linear-gradient(180deg,#f4f7fb,#e2e9f2); border-top:1px solid #cfd8e2; }
.ms-curcolor { width:26px; height:26px; flex:none; position:relative; }
.ms-curcolor .fg { position:absolute; left:0; top:0; width:18px; height:18px; border:1px solid #555; background:#000; box-shadow:1px 1px 0 rgba(0,0,0,.3); z-index:2; }
.ms-curcolor .bg { position:absolute; right:0; bottom:0; width:18px; height:18px; border:1px solid #555; background:#fff; }
.ms-swatches { display:grid; grid-template-columns:repeat(14,16px); grid-auto-rows:16px; gap:1px; }
.swatch { border:1px solid rgba(0,0,0,.4); box-shadow:inset 1px 1px 0 rgba(255,255,255,.4); }
.swatch:hover { outline:1px solid #fff; box-shadow:0 0 3px rgba(0,0,0,.6); }
.ms-status { flex:none; display:flex; gap:18px; padding:2px 12px; background:linear-gradient(180deg,#f4f7fb,#e2e9f2); border-top:1px solid #cfd8e2; font-size:11px; color:#3c4652; }

/* ---------- Calculator ---------- */
.calc { flex:1; display:flex; flex-direction:column; background:linear-gradient(180deg,#eef2f7,#dde4ec); padding:6px; gap:5px; }
.calc-screen {
  flex:none; height:34px; display:flex; align-items:center; justify-content:flex-end;
  padding:0 10px; font-size:20px; color:#000;
  background:linear-gradient(180deg,#fdfef8,#eef2e2 60%,#e4e9d8);
  border:1px solid #9aa48e; border-radius:3px; box-shadow:inset 0 1px 3px rgba(0,0,0,.18);
  font-family:"Segoe UI",sans-serif; overflow:hidden; white-space:nowrap;
}
.calc-mem { flex:none; height:14px; font-size:10px; color:#556; padding-left:4px; }
.calc-grid { flex:1; display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
.ck {
  border-radius:3px; border:1px solid #7d8590; font-size:13px; color:#1c1c1c;
  background:linear-gradient(180deg,#fdfdfd,#e9ecf0 45%,#dcdfe4 50%,#cfd3d9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 1px rgba(0,0,0,.15);
  transition:background .1s;
}
.ck:hover { background:linear-gradient(180deg,#eaf6fd,#d9f0fc 45%,#bee6fd 50%,#a7d9f5); border-color:#3c7fb1; }
.ck:active { background:linear-gradient(180deg,#c4e5f6,#98d1ef); box-shadow:inset 0 1px 2px rgba(0,0,0,.25); }
.ck.op { color:#0b4f8f; font-weight:600; }
.ck.eq { background:linear-gradient(180deg,#e9f6e9,#cfe8cf 45%,#b7dcb7 50%,#a3d0a3); border-color:#5c945c; font-weight:700; color:#1c5c1c; }
.ck.eq:hover { filter:brightness(1.05); }
.ck.red { color:#a02020; }

/* ---------- Minesweeper ---------- */
.mine { flex:1; display:flex; flex-direction:column; align-items:center; background:#ece9d8; padding:8px; gap:7px; }
.mine-head {
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:4px 6px; background:#d6d2bd; border:2px inset #fff;
}
.lcd {
  background:#000; color:#f00; font-family:Consolas,"Courier New",monospace; font-size:20px; font-weight:700;
  padding:1px 4px; letter-spacing:2px; border:1px inset #888; min-width:52px; text-align:center;
  text-shadow:0 0 4px rgba(255,0,0,.7);
}
.mine-face {
  width:30px; height:30px; border:2px outset #fff; background:#ece9d8;
  display:flex; align-items:center; justify-content:center; font-size:17px; border-radius:2px;
}
.mine-face:active { border-style:inset; }
.mine-grid { display:grid; border:3px inset #fff; background:#c0c0c0; }
.mc {
  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; font-family:"Segoe UI",sans-serif; user-select:none;
}
.mc.closed { border:2px outset #fff; background:#ece9d8; }
.mc.closed:active { border:1px solid #9a9a8a; background:#dcd9c8; }
.mc.open { border:1px solid #a8a594; border-width:0 1px 1px 0; background:#d4d0bf; }
.mc.n1{color:#0000f2}.mc.n2{color:#007c00}.mc.n3{color:#f20000}.mc.n4{color:#00007c}.mc.n5{color:#7c0000}.mc.n6{color:#007c7c}.mc.n7{color:#000}.mc.n8{color:#7c7c7c}
.mc.boom { background:#f22; }
.mc.flagbad { background:#fdd; }

/* ---------- cmd ---------- */
.cmd-body {
  flex:1; background:#000; color:#c7c7c7; font-family:Consolas,"Lucida Console",Menlo,monospace; font-size:13px;
  padding:4px 6px; overflow-y:auto; white-space:pre-wrap; word-break:break-all; line-height:1.35;
}
.cmd-line { display:flex; }
.cmd-line input {
  flex:1; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0;
  color:#c7c7c7; font:inherit; padding:0; caret-color:#c7c7c7;
}
.cmd-sel { color:#000; background:#c7c7c7; }

/* ---------- Welcome Center ---------- */
.wc { flex:1; overflow-y:auto; background:linear-gradient(180deg,#fff,#eef3f9); }
.wc-hero {
  display:flex; align-items:center; gap:14px; padding:18px 22px 14px;
  background:linear-gradient(180deg,#dff0fb,#c3e2f6 55%,#a9d3ef);
  border-bottom:1px solid #8fb8d8;
}
.wc-hero .orb { width:52px; height:52px; flex:none; border-radius:50%;
  background:radial-gradient(120% 100% at 45% 12%, #fff, #b9e2ff 30%, #57a7e0 62%, #1c5fae 88%, #0c3d7c);
  box-shadow:inset 0 -8px 14px rgba(6,34,72,.5), inset 0 2px 3px rgba(255,255,255,.9), 0 3px 8px rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center; }
.wc-hero .orb svg { width:26px; height:26px; }
.wc-hero h1 { font-size:21px; font-weight:400; color:#0c3c6e; letter-spacing:.01em; }
.wc-hero p { font-size:12px; color:#2c5478; margin-top:2px; }
.wc-sec { border-bottom:1px solid #d8e2ec; }
.wc-sec-head {
  display:flex; align-items:center; gap:9px; padding:10px 20px; cursor:default;
  background:linear-gradient(180deg,#f7fafd,#e9f0f7);
}
.wc-sec-head:hover { background:linear-gradient(180deg,#fff,#dcebfa); }
.wc-sec-head .chev { width:9px; height:9px; border-top:2px solid #4a7dab; border-right:2px solid #4a7dab; rotate:135deg; transition:rotate .18s; flex:none; }
.wc-sec.collapsed .chev { rotate:45deg; }
.wc-sec-head h2 { font-size:14px; font-weight:600; color:#0c3c6e; }
.wc-sec-body { padding:4px 20px 12px 38px; display:flex; flex-direction:column; gap:2px; }
.wc-sec.collapsed .wc-sec-body { display:none; }
.wc-task { display:flex; align-items:center; gap:8px; padding:4px 8px; border-radius:3px; border:1px solid transparent; font-size:12px; color:#1b4f8a; width:fit-content; }
.wc-task:hover { border-color:#b8d6f5; background:linear-gradient(180deg,#fdfeff,#dcebfa); text-decoration:underline; }
.wc-task svg { width:16px; height:16px; }
.wc-foot { padding:10px 22px; font-size:12px; color:#4a5866; display:flex; align-items:center; gap:8px; }

/* ---------- Control Panel ---------- */
.cp-grid { display:flex; flex-wrap:wrap; gap:4px; align-content:flex-start; }
.cp-item { width:230px; display:flex; gap:10px; padding:8px 10px; border:1px solid transparent; border-radius:4px; align-items:center; }
.cp-item:hover { border-color:#b8d6f5; background:linear-gradient(180deg,#fdfeff,#dcebfa); }
.cp-item svg { width:36px; height:36px; flex:none; }
.cp-item .t { font-size:13px; color:#1b4f8a; }
.cp-item:hover .t { text-decoration:underline; }
.cp-item .d { font-size:11px; color:#5a6572; margin-top:2px; }

/* personalization */
.pers { flex:1; display:flex; flex-direction:column; background:linear-gradient(180deg,#fff,#eef2f8); overflow:auto; }
.pers-preview {
  flex:none; margin:14px 16px 8px; height:120px; border-radius:6px; position:relative; overflow:hidden;
  border:1px solid rgba(0,0,0,.55);
  background:linear-gradient(160deg,#08131f,#0d2b33 45%,#0a1c2c);
  box-shadow:inset 0 0 40px rgba(40,180,160,.25);
}
.pers-preview .mini-win {
  position:absolute; left:50%; top:50%; translate:-50% -50%; width:230px; height:86px; border-radius:5px;
  border:1px solid rgba(0,0,0,.7);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), 0 6px 16px rgba(0,0,0,.5), 0 0 14px var(--pv-glow, rgba(90,190,255,.5));
  background:var(--pv-glass, linear-gradient(180deg, rgba(150,200,240,.8), rgba(70,130,180,.6) 50%, rgba(90,150,200,.7)));
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.pers-preview .mini-title { height:20px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; text-shadow:0 1px 2px rgba(0,0,0,.8); }
.pers-preview .mini-body { position:absolute; left:5px; right:5px; top:22px; bottom:5px; background:#fff; border:1px solid rgba(0,0,0,.6); border-radius:1px; }
.pers h3 { font-size:13px; font-weight:600; color:#0c3c6e; margin:10px 18px 6px; }
.pers-swatches { display:grid; grid-template-columns:repeat(8,34px); gap:6px; margin:0 18px; }
.psw {
  width:34px; height:26px; border-radius:4px; border:1px solid rgba(0,0,0,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -6px 8px -6px rgba(0,0,0,.4);
  position:relative; transition:transform .1s;
}
.psw:hover { transform:scale(1.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 0 8px rgba(140,200,255,.7); }
.psw.sel::after { content:""; position:absolute; inset:-4px; border:2px solid #5e8ec6; border-radius:6px; box-shadow:0 0 6px rgba(90,150,220,.7); }
.pers-row { display:flex; align-items:center; gap:12px; margin:12px 18px; font-size:12px; }
.pers-row input[type=range] { flex:1; max-width:220px; accent-color:#3f7fc0; }
.pers-wall { display:flex; gap:8px; margin:0 18px 16px; }
.pw-thumb { width:88px; height:56px; border-radius:4px; border:2px solid transparent; box-shadow:0 2px 6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.3); overflow:hidden; position:relative; transition:transform .12s; }
.pw-thumb:hover { transform:scale(1.06); }
.pw-thumb.sel { border-color:#5e8ec6; box-shadow:0 0 8px rgba(90,150,220,.8), inset 0 0 0 1px rgba(255,255,255,.4); }
.pw-thumb canvas { width:100%; height:100%; }

/* ---------- Sidebar & gadgets ---------- */
#sidebar {
  position:absolute; top:0; right:0; bottom:40px; width:136px; z-index:90;
  display:flex; flex-direction:column; align-items:center; gap:10px; padding:10px 0;
  background:linear-gradient(180deg, rgba(30,40,56,.34), rgba(20,28,42,.30));
  border-left:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px) saturate(1.3); backdrop-filter:blur(8px) saturate(1.3);
  overflow:visible;
  transition:translate .3s ease;
}
#sidebar.hidden-side { translate:150px 0; }
.gadget {
  position:relative; width:120px; border-radius:6px;
  transition:box-shadow .2s;
}
.gadget .g-chrome { border-radius:6px; overflow:hidden; border:1px solid rgba(0,0,0,.5); box-shadow:0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3); }
.gadget .g-close, .gadget .g-drag {
  position:absolute; top:3px; width:18px; height:16px; border-radius:3px; opacity:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,0,0,.5); background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(210,220,230,.85));
  transition:opacity .15s; z-index:2; font-size:9px; color:#333;
}
.gadget .g-close { right:3px; }
.gadget .g-drag { right:23px; cursor:move; }
.gadget:hover .g-close, .gadget:hover .g-drag { opacity:1; }
.gadget .g-close:hover { background:linear-gradient(180deg,#ffd9c9,#f7906b); color:#fff; }

.g-clock-face { width:118px; height:118px; background:radial-gradient(circle at 50% 42%, #2c3a4e, #131c29 72%); display:flex; align-items:center; justify-content:center; }
.g-cal { background:linear-gradient(180deg,#fdfdfe,#eef2f7); }
.g-cal-head { background:linear-gradient(180deg,#7db6e8,#3f7fc0); color:#fff; font-size:11px; font-weight:600; text-align:center; padding:4px; text-shadow:0 1px 1px rgba(0,0,0,.5); }
.g-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); font-size:9.5px; text-align:center; padding:4px 3px 6px; gap:1px; }
.g-cal-grid .dow { color:#7a8592; font-weight:600; }
.g-cal-grid .day { padding:1.5px 0; border-radius:2px; color:#333; }
.g-cal-grid .day.today { background:#3f7fc0; color:#fff; font-weight:700; box-shadow:0 0 4px rgba(80,150,220,.7); }
.g-cal-grid .day.other { color:#b6bec8; }
.g-cpu { background:linear-gradient(180deg,#20242c,#101318); padding:8px; display:flex; flex-direction:column; gap:6px; align-items:center; }
.g-cpu canvas { filter:drop-shadow(0 0 4px rgba(80,220,140,.35)); }
.g-cpu .lbl { color:#9fe8b8; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.g-note textarea {
  width:118px; height:96px; resize:none; border:0; outline:none; padding:8px;
  background:linear-gradient(180deg,#fdf6b8,#f8ec9c); color:#4a3f10;
  font-family:"Segoe Print","Comic Sans MS",cursive; font-size:11px; line-height:1.5; border-radius:0; box-shadow:none;
}
.g-slide { width:118px; height:88px; position:relative; background:#000; }
.g-slide canvas { position:absolute; inset:0; width:100%; height:100%; opacity:1; transition:opacity 1.2s; }
.g-slide canvas.next { opacity:0; }
.sb-add {
  width:26px; height:26px; border-radius:50%; align-self:center;
  background:radial-gradient(circle at 35% 28%,#dff0ff,#8fc0e8 55%,#4d90cc); border:1px solid #3a76ab;
  color:#fff; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 2px 5px rgba(0,0,0,.4);
}
.sb-add:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 10px rgba(120,190,255,.8); }

/* ---------- Flip 3D & Alt+Tab ---------- */
#flip3d {
  position:fixed; inset:0; z-index:4500; perspective:1400px;
  background:radial-gradient(120% 100% at 50% 20%, rgba(30,45,70,.55), rgba(8,12,20,.82));
  -webkit-backdrop-filter:blur(6px) saturate(1.2); backdrop-filter:blur(6px) saturate(1.2);
}
#flip3d .f3d-stage { position:absolute; inset:0; transform-style:preserve-3d; }
#flip3d .f3d-item {
  position:absolute; left:50%; top:46%;
  transform-style:preserve-3d;
  transition:transform .32s cubic-bezier(.2,.8,.3,1), opacity .3s;
  box-shadow:0 24px 60px rgba(0,0,0,.65);
  border-radius:7px; overflow:hidden; background:#fff;
  border:1px solid rgba(0,0,0,.6);
}
#flip3d .f3d-item .f3d-title {
  position:absolute; left:0; right:0; top:-26px; text-align:center; color:#fff; font-size:12px;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
#flip3d .f3d-hint { position:absolute; bottom:56px; left:0; right:0; text-align:center; color:rgba(255,255,255,.75); font-size:12px; text-shadow:0 1px 2px #000; }

#switcher {
  position:fixed; inset:0; z-index:4600; display:flex; align-items:center; justify-content:center;
  background:rgba(10,16,26,.35); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.sw-panel {
  display:flex; gap:10px; padding:14px 18px; border-radius:8px; max-width:86vw; overflow:hidden;
  background:linear-gradient(180deg, rgba(70,92,124,.8), rgba(24,34,52,.88));
  -webkit-backdrop-filter:blur(14px) saturate(1.6); backdrop-filter:blur(14px) saturate(1.6);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 14px 44px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.15), 0 0 22px hsla(var(--gh),90%,60%,.35);
}
.sw-item { width:130px; flex:none; display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 6px; border-radius:5px; border:1px solid transparent; }
.sw-item.sel { border-color:rgba(180,220,255,.7); background:linear-gradient(180deg, rgba(150,200,255,.3), rgba(90,140,210,.2)); box-shadow:0 0 12px rgba(130,190,255,.5), inset 0 0 0 1px rgba(255,255,255,.3); }
.sw-item .sw-snap { width:112px; height:70px; border-radius:3px; overflow:hidden; position:relative; background:#fff; border:1px solid rgba(0,0,0,.6); box-shadow:0 3px 8px rgba(0,0,0,.4); }
.sw-item .sw-snap > * { position:absolute; top:0; left:0; transform-origin:top left; }
.sw-item .sw-label { color:#fff; font-size:11px; max-width:118px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.8); }

/* ---------- boot / login / shutdown ---------- */
#boot-layer { position:fixed; inset:0; z-index:9000; background:#000; color:#fff; }
.boot-black { position:absolute; inset:0; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; }
.boot-logo { position:relative; width:150px; height:150px; display:flex; align-items:center; justify-content:center; }
.boot-logo .swirl {
  position:absolute; inset:-30px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0%, rgba(60,220,180,.5) 12%, rgba(60,160,255,.55) 26%, rgba(140,90,255,.35) 38%, transparent 52%);
  filter:blur(16px); animation:spin 2.6s linear infinite; opacity:.85;
}
@keyframes spin { to { transform:rotate(360deg); } }
.boot-logo svg { position:relative; width:96px; height:96px; filter:drop-shadow(0 0 18px rgba(90,180,255,.55)); }
.boot-text { font-size:17px; font-weight:300; letter-spacing:.02em; color:#e8f2fb; text-shadow:0 0 12px rgba(120,190,255,.4); }
.boot-sub { font-size:12px; color:#8fa8bd; }
.boot-dots { display:flex; gap:7px; }
.boot-dots i { width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #cfeaff, #5aa7e0 60%, #2b6ea8); box-shadow:0 0 8px rgba(100,180,255,.8); animation:dotpulse 1.2s ease-in-out infinite; }
.boot-dots i:nth-child(2){animation-delay:.15s}.boot-dots i:nth-child(3){animation-delay:.3s}.boot-dots i:nth-child(4){animation-delay:.45s}
@keyframes dotpulse { 0%,100%{opacity:.25; transform:scale(.8);} 40%{opacity:1; transform:scale(1.15);} }

.login-screen {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(130% 110% at 50% 0%, #123a4a 0%, #0a2233 42%, #050d18 100%);
  overflow:hidden;
}
.login-screen::before {
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(45% 30% at 30% 30%, rgba(60,220,170,.20), transparent 70%),
    radial-gradient(50% 34% at 72% 62%, rgba(50,170,230,.16), transparent 70%),
    radial-gradient(40% 26% at 55% 85%, rgba(80,230,190,.10), transparent 70%);
  filter:blur(30px); animation:ribdrift 40s ease-in-out infinite alternate;
}
.login-user { position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; }
.login-tile {
  width:118px; height:118px; border-radius:8px; overflow:hidden; position:relative; cursor:pointer;
  border:2px solid rgba(255,255,255,.65);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 26px rgba(120,200,255,.5), inset 0 1px 0 rgba(255,255,255,.6);
  background:radial-gradient(120% 100% at 50% 0%, #bfe6ff, #5aa7dc 55%, #2b6ea8);
  display:flex; align-items:flex-end; justify-content:center;
  transition:box-shadow .2s, transform .2s;
}
.login-tile:hover { transform:scale(1.04); box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 40px rgba(150,220,255,.85), inset 0 1px 0 rgba(255,255,255,.7); }
.login-tile svg { width:86px; height:86px; }
.login-name { font-size:20px; font-weight:300; text-shadow:0 2px 6px rgba(0,0,0,.8); }
.login-arrow {
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle at 35% 28%, #dff0ff, #8fc0e8 55%, #4d90cc);
  border:1px solid #2f6ba0; box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 2px 8px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; transition:box-shadow .15s;
}
.login-arrow::after { content:""; width:10px; height:10px; border-top:3px solid #fff; border-right:3px solid #fff; rotate:45deg; translate:-2px 0; }
.login-arrow:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 16px rgba(140,210,255,.95); }
.login-row { display:flex; align-items:center; gap:12px; }
.welcome-text {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:18px;
  font-size:34px; font-weight:300; letter-spacing:.01em; text-shadow:0 2px 10px rgba(0,0,0,.8);
  animation:welcomein .5s ease-out;
}
@keyframes welcomein { from { opacity:0; letter-spacing:.08em; } }
.welcome-text .spin {
  width:26px; height:26px; border-radius:50%;
  border:3px solid rgba(140,200,255,.25); border-top-color:#7cc0f0;
  box-shadow:0 0 10px rgba(100,180,255,.5); animation:spin 1s linear infinite;
}
.poweroff-screen { position:absolute; inset:0; background:#000; display:flex; align-items:center; justify-content:center; }
.poweron-btn {
  width:74px; height:74px; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle at 40% 30%, #3a4652, #171d24 70%);
  border:2px solid #0b0e12; box-shadow:inset 0 2px 4px rgba(255,255,255,.14), 0 0 0 4px #05070a, 0 0 22px rgba(90,200,160,.25);
  display:flex; align-items:center; justify-content:center; transition:box-shadow .25s;
}
.poweron-btn:hover { box-shadow:inset 0 2px 4px rgba(255,255,255,.2), 0 0 0 4px #05070a, 0 0 34px rgba(120,230,180,.6); }
.poweron-btn svg { width:30px; height:30px; }
.poweron-hint { position:absolute; bottom:12%; width:100%; text-align:center; color:#5d6d7c; font-size:12px; }

/* ---------- BSOD ---------- */
#bsod {
  position:fixed; inset:0; z-index:9900; background:#0f3f94; color:#fff; padding:12vh 12vw;
  font-family:Consolas,"Lucida Console",monospace; font-size:15px; line-height:1.6; cursor:default;
}
#bsod .stop { background:#aaa; color:#0f3f94; padding:0 6px; font-weight:700; }

/* ---------- Photo viewer ---------- */
.pv { flex:1; display:flex; flex-direction:column; background:linear-gradient(180deg,#eef2f7,#dfe6ee); }
.pv-stage { flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:12px; }
.pv-stage canvas { max-width:100%; max-height:100%; box-shadow:0 6px 20px rgba(0,0,0,.4); border:1px solid rgba(0,0,0,.4); background:#fff; }
.pv-bar { flex:none; display:flex; align-items:center; justify-content:center; gap:6px; padding:6px; background:linear-gradient(180deg,#f4f7fb,#e0e8f0); border-top:1px solid #cfd8e2; }
.pv-name { position:absolute; top:0; left:0; right:0; text-align:center; padding:4px; font-size:11px; color:#3c4652; }

/* ---------- system properties / action center ---------- */
.sysprops { flex:1; overflow:auto; background:linear-gradient(180deg,#fff,#eef2f8); padding:14px 18px; font-size:12px; }
.sysprops h2 { font-size:16px; font-weight:400; color:#0c3c6e; margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.sysprops table { border-collapse:collapse; width:100%; }
.sysprops td { padding:3px 8px 3px 0; vertical-align:top; }
.sysprops td:first-child { color:#5a6572; width:150px; }
.sysprops .sec { font-weight:600; color:#1e395c; padding:10px 0 4px; border-bottom:1px solid #d8e2ec; margin-bottom:6px; }
.ac-row { display:flex; gap:12px; padding:10px 14px; border-bottom:1px solid #e2e8ee; align-items:flex-start; }
.ac-row svg { width:28px; height:28px; flex:none; }
.ac-row h4 { font-size:13px; color:#0c3c6e; margin-bottom:2px; }
.ac-row p { font-size:12px; color:#444; line-height:1.45; }

/* find dialog */
.find-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; font-size:12px; }
.find-row input { width:200px; }

/* small screens */
@media (max-width:860px) {
  #sidebar { translate:150px 0; }
  #sidebar.force-show { translate:0 0; }
  #startmenu { width:min(402px, calc(100vw - 6px)); }
  .tbtn { max-width:120px; }
}