:root{
  /* 中文界面一律系统字体栈（零 webfont 体积）；西文走系统 UI 字体，中文落到苹方 / 微软雅黑。 */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  color:var(--text);background:var(--bg);font-synthesis:none;
  color-scheme:dark; /* 滚动条、原生控件、表单跟随暗色，Windows 下尤其明显 */
  text-autospace:normal; /* 盘古之白：中西文之间自动留白（Chrome 133+ 起生效） */
  /* 颜色 token —— 全站唯一色源，改这里就能换肤 */
  --bg:#050a18;--panel:#0b1428e6;--panel-solid:#0b1428;
  --line:#18e0ff;--line-soft:#ffffff22;
  --text:#e8f6ff;--text-dim:#cfe8f8;--muted:#8aa3bd;--faint:#8ea6bf;
  --cyan:#18e0ff;--cyan-soft:#9fe9ff;--violet:#8b7bff;--magenta:#f25bd0;
  --green:#6ef0c0;--amber:#ffd36b;--danger:#ff6b8b;
  /* 形状 */
  --r-sm:8px;--r-md:11px;--r-lg:14px;--r-pill:999px;
  /* 阴影与辉光 */
  --glow:0 0 18px #18e0ff66;--glow-strong:0 0 34px #18e0ff8c;
  --shadow-win:0 26px 70px #000c,0 0 0 1px #ffffff0f,inset 0 1px 0 #ffffff1f;
  --shadow-pop:0 24px 60px #000d,0 0 0 1px #ffffff0f,inset 0 1px 0 #ffffff1f;
  /* 动效：内置 ease-* 太弱，统一用自定义曲线；UI 动效上限 300ms，按压 140ms */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --dur-press:140ms;--dur-fast:180ms;--dur-base:220ms;--dur-slow:300ms;--stagger:45ms;
  /* 中文正文行高 ≥1.5（笔画密，需要比西文更多呼吸） */
  --lh-body:1.62;--lh-tight:1.35;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overscroll-behavior:none}
body{-webkit-tap-highlight-color:transparent;touch-action:manipulation;overflow:hidden;background:
  radial-gradient(1100px 700px at 78% -8%,#16315b 0%,transparent 60%),
  radial-gradient(900px 620px at 12% 108%,#251b4d 0%,transparent 55%),
  var(--bg)}
button,input{font:inherit}
button{cursor:pointer;color:inherit}
button:disabled{cursor:not-allowed;opacity:.45}
[hidden]{display:none!important}
.screen{position:fixed;inset:0}

/* Panels and windows */
.win-panel{
  background:linear-gradient(180deg,#0d1730ee,#081021ee);
  border:1px solid #18e0ff44;
  border-radius:12px;
  box-shadow:0 20px 60px #000a,inset 0 1px 0 #ffffff1a,0 0 22px #18e0ff33;
  backdrop-filter:blur(18px);
}
.win-title{
  height:38px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 12px;border-bottom:1px solid #18e0ff66;border-radius:12px 12px 0 0;
  background:linear-gradient(90deg,#0b2547,#0d3a63 55%,#0b2547);
  color:var(--text);font-size:13px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
}
.win-button{
  min-height:32px;padding:5px 12px;border:1px solid #2b6f9f;border-radius:8px;
  background:linear-gradient(180deg,#12345d,#0b1f3d);color:var(--text);
  box-shadow:inset 0 1px 0 #ffffff22,0 4px 14px #000a,0 0 12px #18e0ff22;
}
.win-button:hover:not(:disabled){border-color:var(--cyan);box-shadow:inset 0 0 0 1px #18e0ff44,var(--glow)}
.win-button:active:not(:disabled),.win-button.is-active{border-color:var(--cyan);background:linear-gradient(180deg,#0d3f6f,#0b1f3d);transform:translateY(1px)}
.win-button.primary{font-weight:700;border-color:#18e0ff88;background:linear-gradient(180deg,#13608d,#0c2b55)}
.icon-button{width:28px;height:26px;padding:0;line-height:1;font-size:15px}

/* Boot */
.boot-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:
  radial-gradient(900px 600px at 50% 78%,#183766 0%,#071233 50%,#030815 100%);color:var(--text);text-align:center;isolation:isolate}
.boot-grain{position:absolute;inset:0;z-index:-1;opacity:.16;background:repeating-linear-gradient(0deg,transparent 0 3px,#18e0ff33 4px 5px);animation:grain-move 5s linear infinite}
.boot-logo{display:flex;align-items:center;gap:16px;font-family:Georgia,serif;font-size:clamp(37px,7vw,84px);font-weight:700;letter-spacing:-.04em;text-shadow:0 0 30px #18e0ff88,0 4px 18px #000}
.boot-logo b{color:var(--cyan);font-style:italic;text-shadow:0 0 24px var(--cyan)}
.boot-cat{font-family:Tahoma,sans-serif;font-size:.7em;color:var(--text);filter:drop-shadow(0 0 18px #18e0ff88);padding-right:.4em}
.boot-screen p{margin:0;color:var(--cyan-soft);font-size:14px;letter-spacing:.4em}
/* 模块脚本没跑起来时由 index.html 的看门狗点亮，替代"只剩角色"的静默空白 */
.boot-failure{
  max-width:min(720px,86vw);margin-top:8px;padding:14px 18px;text-align:left;
  border:1px solid #ff9f6b66;border-radius:10px;background:#2a1206cc;
  box-shadow:inset 0 1px 0 #ffffff1f,0 6px 24px #000000a6
}
/* 选择器要比上面的 .boot-screen p 更具体，否则字距与颜色会被那条规则拿走 */
.boot-screen .boot-failure-title{margin:0 0 6px;font-size:14px;font-weight:600;letter-spacing:.02em;color:#ffd0a8}
.boot-screen .boot-failure-detail{margin:0;font-size:13px;line-height:1.62;letter-spacing:0;color:#f6e3d2;user-select:text}
.boot-screen small{position:absolute;bottom:38px;color:#5f7ea8;font-size:11px}
.boot-progress{width:min(340px,70vw);height:18px;margin-top:22px;padding:3px;border:1px solid #18e0ff88;border-radius:12px;background:#071233}
.boot-progress i{display:block;width:100%;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--cyan),var(--violet));box-shadow:0 0 18px #18e0ff88;animation:loading 1.8s steps(18,end) both}
@keyframes loading{from{width:0}to{width:100%}}
@keyframes grain-move{to{transform:translateY(5px)}}

/* Login */
.login-screen{display:grid;place-items:center;padding:20px;background:
  radial-gradient(800px 500px at 20% 15%,#123a6a 0%,transparent 60%),
  radial-gradient(700px 500px at 85% 90%,#2a1f5c 0%,transparent 55%),
  linear-gradient(145deg,#07142e,var(--bg))}
.login-panel{width:min(470px,100%)}
.title-dots{letter-spacing:4px}
.login-body{display:grid;grid-template-columns:70px 1fr;column-gap:18px;padding:28px 25px 16px}
.login-avatar{width:64px;height:64px;display:grid;place-items:center;border:1px solid #18e0ff66;border-radius:16px;background:#0b2038;box-shadow:var(--glow)}
.login-avatar img{width:100%;height:100%;object-fit:contain}
.login-copy{align-self:center}
.login-copy p{margin:0 0 5px;font-size:17px}
.login-copy small{color:var(--muted);font-size:11px}
.login-body form{grid-column:1/-1;margin-top:25px}
.login-body label{display:block;font-size:13px;margin-bottom:9px;font-weight:600;color:var(--text-dim)}
.pin-row{display:flex;gap:9px}
.pin-row input{min-width:0;flex:1;height:38px;padding:4px 12px;border:1px solid #18e0ff66;border-radius:9px;background:#07152e;color:var(--text);letter-spacing:.6em;font-size:19px;box-shadow:inset 0 0 14px #18e0ff22}
.pin-row input:focus-visible{outline:none;border-color:var(--cyan);box-shadow:inset 0 0 16px #18e0ff44,var(--glow)}
.pin-row button{white-space:nowrap}
#pin-help{font-size:11px;color:var(--muted);line-height:1.6;margin:8px 0 0}
.error{min-height:1.3em;margin:8px 0 0;color:var(--danger);font-size:12px}
.login-foot{border-top:1px solid #ffffff1a;padding:9px 13px;color:var(--faint);font-size:10px;letter-spacing:.15em}

/* Desktop */
.desktop-screen{overflow:hidden;background:var(--bg)}
.wallpaper{position:absolute;inset:0 0 42px;background:
  radial-gradient(900px 600px at 76% 20%,#163a67 0%,transparent 60%),
  radial-gradient(800px 600px at 20% 95%,#231c52 0%,transparent 55%),
  linear-gradient(160deg,#07142e,var(--bg));overflow:hidden}
.wallpaper:before{content:"";position:absolute;inset:0;background:
  linear-gradient(#18e0ff11 1px,transparent 1px) 0 0/42px 42px,
  linear-gradient(90deg,#18e0ff11 1px,transparent 1px) 0 0/42px 42px;opacity:.35;mask-image:radial-gradient(ellipse at 60% 40%,#000 0%,transparent 75%)}
.poster-art,.wallpaper-copy{position:absolute;left:50%;top:50%;width:min(100%,calc((100vh - 42px) * 1.578947));aspect-ratio:1200/760;transform:translate(-50%,-50%)}
.poster-art{height:auto;filter:drop-shadow(18px 18px 0 #002c3899);image-rendering:auto}
.wallpaper-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0 0 7% 7%;pointer-events:none;color:var(--text);text-shadow:0 2px 20px #000}
.wallpaper-kicker{font-size:clamp(10px,1vw,15px);letter-spacing:.3em;font-weight:700;color:var(--cyan-soft)}
.wallpaper-time{margin:10px 0 22px;font-family:"Segoe UI",Georgia,serif;font-size:clamp(52px,8.4vw,124px);line-height:.95;letter-spacing:-.04em;font-weight:800;color:#fff;text-shadow:0 0 30px #18e0ff88}
.wallpaper-copy p{max-width:58%;margin:0;font-size:clamp(15px,1.9vw,27px);line-height:1.55;font-weight:700;letter-spacing:.03em;color:var(--text-dim)}
.wallpaper-copy span{margin-top:14px;font-size:clamp(10px,1vw,14px);letter-spacing:.2em}
.scanline{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#06151917 4px 5px);mix-blend-mode:multiply;animation:grain-move 7s linear infinite}
.theme-dusk .poster-art{filter:hue-rotate(40deg) saturate(.9) drop-shadow(18px 18px 0 #1a244c99)}
.theme-dusk{background:radial-gradient(circle,#574d67,#252b53 70%,#1c2143)}
.theme-mint .poster-art{filter:hue-rotate(160deg) saturate(.75) drop-shadow(18px 18px 0 #163e3b99)}
.theme-mint{background:radial-gradient(circle,#629a8f,#245f6e 70%,#15434c)}

/* Icons */
.desktop-icons{position:absolute;inset:0 0 42px 0;display:block;max-width:none;overflow:hidden;pointer-events:none}
.desktop-icons>.desktop-icon{position:absolute;pointer-events:auto;cursor:grab}
.desktop-icons>.desktop-icon:active{cursor:grabbing}
.desktop-icon{width:86px;height:82px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;padding:6px 3px;text-shadow:0 1px 8px #000;user-select:none}
.desktop-icon:hover,.desktop-icon:focus-visible,.desktop-icon.selected{border:1px solid #18e0ff66;background:#18e0ff1a;outline:0;box-shadow:var(--glow)}
.desktop-icon.drop-target{background:#18e0ff33;border:1px solid var(--cyan)}
.desktop-icon span{width:100%;font-size:12px;line-height:1.2;text-align:center;overflow-wrap:anywhere}
.pixel-icon{display:block;width:39px;height:39px;flex:none;filter:drop-shadow(0 0 10px #18e0ff66)}

/* Windows */
.window-layer{position:absolute;inset:0 0 42px;pointer-events:none;z-index:5}
.app-window{position:absolute;min-width:300px;min-height:210px;display:flex;flex-direction:column;pointer-events:auto;max-width:calc(100vw - 16px);max-height:calc(100% - 16px);overflow:hidden}
.app-window .win-title{cursor:move;flex:none}
.title-group{display:flex;align-items:center;gap:7px;overflow:hidden;text-overflow:ellipsis}
.title-group .pixel-icon{width:17px;height:17px;filter:drop-shadow(0 0 8px var(--cyan))}
.title-controls{display:flex;gap:4px}
.window-body{min-height:0;overflow:auto;flex:1;padding:14px;background:#07132bee}
.window-status{display:flex;align-items:center;min-height:26px;padding:3px 10px;border-top:1px solid #ffffff1a;background:#081021;font-size:11px;color:var(--muted)}
.store-window{width:min(760px,calc(100vw - 24px));height:min(560px,calc(100vh - 78px));left:50%;top:45%;transform:translate(-50%,-50%)}
.store-toolbar{display:flex;align-items:center;gap:9px;padding:6px 9px;border:1px solid #ffffff20;border-radius:9px;margin-bottom:12px;background:#0d2542;font-size:12px}
.store-layout{display:grid;grid-template-columns:200px 1fr;gap:12px;height:calc(100% - 46px)}
.store-sidebar,.store-detail{border:1px solid #ffffff1a;background:#07152eee;border-radius:10px;min-height:0;overflow:auto}
.store-sidebar{padding:10px}
.store-sidebar h3{margin:0 0 8px;font-size:12px;color:var(--muted);font-weight:500}
.store-tab{width:100%;padding:9px;border:1px solid transparent;border-radius:8px;background:transparent;text-align:left;font-size:13px;color:var(--text-dim)}
.store-tab:hover,.store-tab.active{border-color:#18e0ff55;background:#18e0ff1a;color:#fff;box-shadow:var(--glow)}
.store-tab small{float:right;opacity:.8}
.store-detail{padding:17px}
.app-list{display:grid;gap:10px}
.app-card{display:flex;align-items:center;gap:11px;width:100%;padding:11px;border:1px solid #ffffff1a;border-radius:10px;background:#0b2038;text-align:left;color:var(--text)}
.app-card:hover,.app-card:focus-visible{border-color:#18e0ff88;background:#0d2a4d;box-shadow:var(--glow)}
.app-card .pixel-icon{width:34px;height:34px}
.app-card-copy{display:grid;gap:3px}
.app-card-copy strong{font-size:13px}
.app-card-copy small{font-size:11px;color:var(--muted)}
.app-card-badge{margin-left:auto;font-size:10px;color:var(--cyan-soft);white-space:nowrap}
.app-detail{display:grid;grid-template-columns:55px 1fr;gap:11px;align-items:start}
.app-detail>.pixel-icon{width:50px;height:50px}
.app-detail h2{margin:1px 0 6px;font-size:20px}
.app-detail .tag{font-size:11px;color:var(--cyan-soft)}
.app-detail p{grid-column:1/-1;font-size:13px;line-height:1.7;margin:4px 0 0;color:var(--text-dim)}
.detail-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.empty-state{font-size:13px;color:var(--muted);padding:21px;text-align:center;border:1px dashed #ffffff22;border-radius:10px}
.folder-window{width:min(480px,calc(100vw - 24px));height:min(340px,calc(100vh - 80px));left:50%;top:43%;transform:translate(-50%,-50%)}
.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px;align-content:start}
.folder-grid .desktop-icon{color:var(--text);text-shadow:0 1px 8px #000}
.folder-grid .desktop-icon:hover{background:#18e0ff1a}
.folder-grid .desktop-icon.drop-target{background:#18e0ff33}
.folder-hint{font-size:11px;color:var(--muted);margin:0 0 8px}

/* Start menu and taskbar */
.start-menu{position:absolute;left:3px;bottom:46px;z-index:20;width:260px;padding:4px;display:flex;box-shadow:0 18px 50px #000}
.start-banner{width:28px;display:flex;align-items:flex-start;justify-content:center;padding-top:9px;background:linear-gradient(var(--cyan),#0d6b9f);writing-mode:vertical-rl;color:#04121f;font-weight:800;font-size:16px;letter-spacing:.12em;border-radius:8px}
.start-items{flex:1;display:flex;flex-direction:column;padding:2px}
.start-items button{display:flex;align-items:center;gap:9px;width:100%;min-height:38px;border:0;border-radius:8px;background:transparent;text-align:left;padding:4px 8px;font-size:12px;color:var(--text-dim)}
.start-items button:hover,.start-items button:focus-visible{background:#18e0ff22;color:#fff;outline:0}
.start-items button .pixel-icon{width:23px;height:23px}
.start-separator{margin:4px 5px;border-top:1px solid #ffffff22;border-bottom:1px solid transparent}
.taskbar{position:absolute;left:0;right:0;bottom:0;z-index:25;height:44px;display:flex;align-items:center;gap:5px;padding:4px 7px;background:#0a1328ee;border-top:1px solid #ffffff1a;backdrop-filter:blur(16px)}
.start-button{height:34px;display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px}
.start-flag{font-size:22px;line-height:17px;color:var(--cyan);text-shadow:0 0 14px var(--cyan)}
.taskbar-divider{height:25px;border-left:1px solid #ffffff22;border-right:1px solid transparent;margin:0 3px}
.task-buttons{min-width:0;display:flex;gap:4px;flex:1;overflow:auto;scrollbar-width:none}
.task-button{max-width:150px;min-width:85px;height:32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;text-align:left}
.tray{min-width:88px;height:32px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #ffffff1a;border-radius:9px;background:#07152e;font-size:12px}
.tray-cat{font-size:15px}
.context-menu{position:absolute;z-index:50;width:190px;padding:4px}
.context-menu button{display:block;width:100%;height:31px;padding:5px 11px;border:0;border-radius:7px;background:transparent;text-align:left;font-size:12px;color:var(--text-dim)}
.context-menu button:hover,.context-menu button:focus-visible{background:#18e0ff22;color:#fff;outline:0}
.context-divider{height:2px;margin:4px;border-top:1px solid #ffffff22}

/* Corner cards */
.m98-corner-layer{position:absolute;right:14px;bottom:56px;z-index:35;pointer-events:none}
.m98-corner-card{width:min(360px,calc(100vw - 20px));pointer-events:auto;animation:m98-corner-enter .42s cubic-bezier(.2,.8,.2,1) both}
.m98-corner-title{background:linear-gradient(90deg,#0d2a5b,#0f3a78)}
.m98-corner-title button{background:#0b2038;color:var(--text)}
.m98-corner-body{padding:14px;background:linear-gradient(180deg,#0b1e3a,#08152c)}
.m98-corner-eyebrow{color:var(--cyan);font-weight:800;font-size:11px;letter-spacing:.13em}
.m98-corner-body h3{margin:9px 0 6px;font-size:21px;line-height:1.2;color:#fff}
.m98-corner-body p{font-size:12px;line-height:1.6;color:#bcd2e6;margin:0 0 13px}
.m98-corner-visual{height:64px;display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:12px;border:1px solid #18e0ff66;border-radius:10px;background:radial-gradient(circle at 50% 0%,#18e0ff30,transparent 70%),#07152e;color:var(--cyan-soft);font-size:20px;font-weight:800;letter-spacing:.1em;box-shadow:inset 0 0 24px #18e0ff22}
.m98-corner-visual span{font-size:28px}
.m98-corner-actions{display:flex;align-items:center;justify-content:space-between;gap:6px}
.m98-corner-actions button{font-size:11px}
.m98-corner-permanent{border:0;background:transparent;color:var(--cyan-soft);text-decoration:underline;padding:4px;white-space:nowrap;font-size:10px}
.m98-corner-permanent:hover{color:#fff}
.m98-corner-footer{padding:5px 10px;background:#071226;border-top:1px solid #ffffff1a;color:var(--faint);font-size:10px;text-align:right}
@keyframes m98-corner-enter{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
.context-menu,.start-menu,.m98-corner-card{filter:drop-shadow(0 12px 26px #000c)}
.toast{position:absolute;left:50%;bottom:60px;z-index:60;transform:translateX(-50%);min-width:230px;max-width:calc(100vw - 25px);padding:10px 14px;font-size:12px;text-align:center}
.dialog-window{width:min(430px,calc(100vw - 24px));height:auto;min-height:200px;left:50%;top:43%;transform:translate(-50%,-50%)}
.dialog-window .window-body{padding:18px}
.dialog-window p{font-size:13px;line-height:1.7;margin:0 0 14px;color:var(--text-dim)}
.dialog-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:14px}
.dialog-window input{width:100%;padding:7px;border:1px solid #18e0ff66;border-radius:8px;background:#07152e;color:var(--text)}

/* Wallpaper picker */
.wallpaper-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.wallpaper-choice{height:125px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;padding:9px;border:1px solid #ffffff22;border-radius:10px;box-shadow:0 4px 16px #000a;background:linear-gradient(135deg,#0b2038 40%,#13223a 41%);font-size:12px;color:var(--text)}
.wallpaper-choice.selected{border-color:var(--cyan)}
.wallpaper-choice span{background:#07152e;padding:2px 5px;border-radius:5px}
.wallpaper-window{width:min(550px,calc(100vw - 24px));height:290px;left:50%;top:43%;transform:translate(-50%,-50%)}
.wallpaper-picker-window{width:min(760px,calc(100vw - 24px));height:min(640px,calc(100vh - 76px));left:50%;top:45%;transform:translate(-50%,-50%)}
.wallpaper-picker-window .window-body{padding:14px;background:#07132bee}
.wallpaper-picker-intro{margin:0 0 13px;font-size:12px;line-height:1.5;color:var(--muted)}
.wallpaper-picker-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.wallpaper-picker-card{display:flex;min-width:0;flex-direction:column;align-items:stretch;padding:5px;border:1px solid #ffffff1a;border-radius:10px;background:#0b2038;color:var(--text);text-align:center}
.wallpaper-picker-card:hover,.wallpaper-picker-card:focus-visible{background:#0d2a4d;outline:1px solid #18e0ff88}
.wallpaper-picker-card.selected{background:#18e0ff1a;border-color:var(--cyan)}
.wallpaper-picker-preview{display:grid;place-items:center;width:100%;height:170px;overflow:hidden;border-radius:8px;background:radial-gradient(circle at 50% 30%,#123a5c,transparent 70%)}
.wallpaper-picker-preview img{display:block;width:100%;height:100%;object-fit:contain;filter:none;box-shadow:none}
.wallpaper-picker-caption{min-height:31px;margin-top:6px;font-size:12px;font-weight:600;line-height:1.3}
.wallpaper-picker-state{padding:2px 0 4px;font-size:10px;color:var(--muted)}
.wallpaper-picker-card.selected .wallpaper-picker-state{color:var(--cyan);font-weight:700}

/* Operation and install */
.operation-layer{position:absolute;inset:0 0 42px;z-index:45;display:grid;place-items:center;padding:12px;background:#020712cc;pointer-events:auto}
.operation-layer:empty{display:none}
.operation-card{width:min(395px,calc(100vw - 24px));box-shadow:0 20px 60px #000}
.operation-card .m98-corner-body{background:#0b1e3a}
.operation-heading{min-height:1.3em}
.install-meter{height:22px;padding:3px;border:1px solid #18e0ff55;border-radius:12px;background:#07152e}
.install-meter i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--cyan),var(--violet));box-shadow:0 0 16px #18e0ff88;transition:width .15s linear}
.install-percent{text-align:right;font-weight:700;font-size:12px;margin-top:5px;color:var(--cyan-soft)}
.gallery-install-choices{display:flex;align-items:flex-end;gap:10px;margin-top:18px}
.gallery-install-yes{flex:1;min-height:64px;font-size:19px;border-color:#6ef0c0aa;background:linear-gradient(180deg,#0e5b45,#08301f)}
.gallery-install-no{width:42px;min-width:42px;min-height:22px;padding:1px 2px;font-size:10px}
.gallery-install-prompt .m98-corner-footer{text-align:left}
.gallery-installing::after{content:"";position:absolute;inset:0 0 42px;z-index:34;pointer-events:none;background:repeating-linear-gradient(0deg,#6ef0c020 0 2px,#18e0ff18 2px 5px,transparent 5px 9px);mix-blend-mode:screen;animation:gallery-install-flash 1.1s steps(3,end) infinite}
.gallery-installing .wallpaper{animation:gallery-install-wallpaper .85s steps(2,end) infinite}
.gallery-installing .taskbar{animation:gallery-install-taskbar 1.3s steps(2,end) infinite}
.gallery-installing .install-card{animation:gallery-install-dialog 1.6s steps(2,end) infinite}
@keyframes gallery-install-flash{0%,65%,100%{opacity:0}12%{opacity:.7}20%{opacity:.13}45%{opacity:.38}70%{opacity:.5}}
@keyframes gallery-install-wallpaper{0%,100%{filter:none}35%{filter:hue-rotate(35deg) contrast(1.15)}65%{filter:hue-rotate(-30deg) contrast(1.05)}}
@keyframes gallery-install-taskbar{0%,100%{filter:none}45%{filter:hue-rotate(45deg)}}
@keyframes gallery-install-dialog{0%,100%{transform:none}30%{transform:translate(2px,-1px)}55%{transform:translate(-2px,1px)}}
@media(prefers-reduced-motion:reduce){.gallery-installing::after,.gallery-installing .wallpaper,.gallery-installing .taskbar,.gallery-installing .install-card{animation:none}.gallery-installing::after{opacity:.12}}

/* Follow / coming soon / release notes */
.follow-actions{display:flex;flex-wrap:wrap;gap:8px}
.follow-actions .win-button{flex:1;min-width:140px;font-size:12px}
.app-card.coming-soon{background:#0b1e3a;border-style:dashed;cursor:default}
.app-card.coming-soon:hover{background:#0b1e3a;border-color:#ffffff22}
.coming-soon .pixel-icon{opacity:.82}
.release-notes-window{width:min(500px,calc(100vw - 24px));height:min(360px,calc(100vh - 76px));left:50%;top:43%;transform:translate(-50%,-50%)}
.release-notes-window .window-body{padding:16px;background:#07132bee}
.release-notes-header{padding:13px 15px;border:1px solid #ffffff1a;border-radius:10px;background:#0b2038}
.release-notes-header span{display:block;font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--cyan)}
.release-notes-header h2{margin:8px 0;font-size:21px;line-height:1.3}
.release-notes-header time{font-size:11px;color:var(--muted)}
.release-notes-list{margin:14px 0 0;padding-left:24px;font-size:13px;line-height:1.7;color:var(--text-dim)}
.release-notes-list li+li{margin-top:8px}

/* PIN reset */
.forgot-pin{margin-top:8px;min-height:32px;font-size:12px}
.pin-reset-dialog{position:fixed;width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 32px);margin:auto;padding:0;color:var(--text);overflow:auto;background:#0b1428}
.pin-reset-dialog::backdrop{background:#020712aa;backdrop-filter:blur(6px)}
.pin-reset-body{padding:22px}
.pin-reset-copy{margin:0 0 14px;font-size:19px;font-weight:700;line-height:1.5}
#pin-reset-note{margin:0;font-size:13px;line-height:1.7;color:var(--muted)}
.pin-reset-body .dialog-actions{flex-wrap:wrap}
.pin-reset-dialog button:focus-visible,.forgot-pin:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* Tray notification */
.tray-notice{position:relative;flex:none;display:grid;place-items:center;width:22px;height:22px;min-width:22px;min-height:22px;padding:0;border:0;background:transparent;box-shadow:none}
.tray-notice:focus-visible{outline:2px dotted var(--cyan);outline-offset:2px}
.tray-notice.unread .tray-cat{animation:tray-cat-alert 1.1s steps(2,end) infinite}
@keyframes tray-cat-alert{50%{opacity:.18;filter:brightness(1.8) sepia(1) saturate(3)}}
@media(prefers-reduced-motion:reduce){.tray-notice.unread .tray-cat{animation:none}.tray-notice.unread::after{content:"";position:absolute;right:-1px;top:-2px;width:6px;height:6px;border-radius:50%;background:#ff6b8b}}

/* Start flyout */
.start-programs{position:relative}
.start-programs-trigger .start-submenu-arrow{margin-left:auto;font-size:10px}
.start-submenu{display:none;position:absolute;left:100%;bottom:0;z-index:2;width:240px;max-height:min(340px,calc(100vh - 62px));padding:4px;overflow:auto;background:#0b1428;box-shadow:0 16px 40px #000}
.start-programs:hover .start-submenu,.start-programs:focus-within .start-submenu,.start-programs.open .start-submenu{display:block}
.start-programs:hover>.start-programs-trigger,.start-programs.open>.start-programs-trigger{background:#18e0ff22;color:#fff}
.start-submenu button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.start-submenu p{margin:7px 9px;color:var(--muted);font-size:12px}

/* Gallery / games / artwork preview */
.gallery-window{width:min(1120px,calc(100vw - 40px));height:min(770px,calc(100dvh - 115px));left:50%;top:46%;transform:translate(-50%,-50%)}
.gallery-window .window-body{padding:0;background:var(--bg)}
.game-window{width:min(720px,calc(100vw - 24px));height:min(540px,calc(100vh - 76px));left:50%;top:46%;transform:translate(-50%,-50%)}
.game-window .window-body{padding:12px;background:var(--bg)}
.artwork-preview-window{width:min(520px,calc(100vw - 24px));height:min(620px,calc(100vh - 76px));left:50%;top:45%;transform:translate(-50%,-50%)}

/* Responsive */
@media(max-width:650px){
  .wallpaper{background:var(--bg)}
  .poster-art,.wallpaper-copy{top:48%;width:100%}
  .wallpaper-copy{padding-left:7%;padding-bottom:3%}
  .wallpaper-kicker{font-size:8px}
  .wallpaper-time{font-size:clamp(38px,10vw,60px);margin:2px 0 6px}
  .wallpaper-copy p{font-size:clamp(11px,2.6vw,15px);max-width:60%;line-height:1.35}
  .desktop-icon{width:74px;height:72px}
  .desktop-icon .pixel-icon{width:32px;height:32px}
  .desktop-icon span{font-size:10px}
  .store-window{height:calc(100vh - 68px);top:8px;left:8px;transform:none;width:calc(100vw - 16px)}
  .store-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:6px}
  .store-sidebar{display:flex;gap:3px;padding:4px;overflow:visible}
  .store-sidebar h3{display:none}
  .store-tab{width:auto;white-space:nowrap;font-size:11px;padding:6px}
  .store-detail{padding:10px}
  .folder-window,.wallpaper-window,.gallery-window,.game-window,.artwork-preview-window{left:8px;top:9vh;transform:none;width:calc(100vw - 16px)}
  .m98-corner-layer{right:8px;bottom:50px}
  .m98-corner-card{width:min(345px,calc(100vw - 16px))}
  .m98-corner-body h3{font-size:18px}
  .m98-corner-visual{height:49px;font-size:18px}
  .m98-corner-visual span{font-size:22px}
  .task-button{min-width:75px;max-width:95px}
  .tray{min-width:72px}
  .tray-cat{display:none}
  .start-menu{max-width:calc(100vw - 8px)}
  .wallpaper-picker-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wallpaper-picker-preview{height:145px}
}
/* ============================================================================
   霓虹精修层
   统一玻璃质感、辉光、悬停反馈与入场动效。写在文件末尾，用同优先级覆盖上面的基础样式；
   只动视觉属性（颜色 / 阴影 / 圆角 / 过渡 / 动画），不改定位与布局，避免碰坏交互逻辑。
   ============================================================================ */

/* —— 通用：交互反馈与焦点环 —— */
/* 逐属性声明（不用 transition:all），缓动统一走自定义曲线，时长走 token。 */
.win-button,.store-tab,.app-card,.desktop-icon,.start-items button,.task-button,
.context-menu button,.wallpaper-picker-card,.tray-notice,.start-programs-trigger{
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),color var(--dur-fast) var(--ease-out),
    scale var(--dur-press) var(--ease-out)
}
:focus-visible{outline:2px solid #18e0ff99;outline-offset:2px}

/* —— 窗口：玻璃外壳、入场动画、活动态辉光 —— */
.app-window{
  background:linear-gradient(180deg,#0e1a34f2,#070f21f7);
  border:1px solid #18e0ff3d;
  box-shadow:0 26px 70px #000c,0 0 0 1px #ffffff0f,inset 0 1px 0 #ffffff1f,0 0 30px #18e0ff22;
  animation:window-in var(--dur-slow) var(--ease-out)
}
/* 只动 opacity + scale。原先带的 filter:blur 走绘制路径，入场动画不该付这个成本。 */
@keyframes window-in{from{opacity:0;scale:.97}to{opacity:1;scale:1}}
.app-window.active-window{
  border-color:#18e0ff73;
  box-shadow:0 30px 80px #000d,0 0 0 1px #ffffff16,inset 0 1px 0 #ffffff26,0 0 44px #18e0ff3d
}
.win-title{
  position:relative;overflow:hidden;
  border-bottom:1px solid #18e0ff59;
  box-shadow:inset 0 1px 0 #ffffff1f,0 1px 0 #00000073
}
.app-window.active-window .win-title{background:linear-gradient(90deg,#0d2c52,#134b80 55%,#0d2c52)}
/* 流光只在窗口出现时扫一次。常驻循环的装饰动画正是动效规范要砍掉的东西。 */
.app-window .win-title::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 26%,#ffffff1f 46%,transparent 66%);
  transform:translateX(-130%);animation:title-sheen 900ms var(--ease-out) 140ms 1
}
@keyframes title-sheen{from{opacity:1;transform:translateX(-130%)}to{opacity:1;transform:translateX(130%)}}
.window-body{background:linear-gradient(180deg,#07132bf2,#050d1ff5)}
.window-status{background:linear-gradient(180deg,#081021,#060c1a);border-top:1px solid #ffffff14;color:#7f9cbb}
.app-window.minimized{display:none}
.app-window.maximized{
  left:8px;top:8px;width:calc(100% - 16px);height:calc(100% - 16px);transform:none;border-radius:14px
}

/* —— 任务栏与开始菜单 —— */
.taskbar{
  background:linear-gradient(180deg,#0b1730f5,#070e1ffa);
  border-top:1px solid #18e0ff2e;
  box-shadow:0 -12px 34px #0009,inset 0 1px 0 #ffffff14
}
.taskbar::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#18e0ffcc 18%,var(--violet) 52%,#18e0ffcc 82%,transparent);opacity:.6
}
.start-button{background:linear-gradient(180deg,#12406e,#0a2141);border-color:#18e0ff5c;font-weight:700}
.start-button:hover:not(:disabled){background:linear-gradient(180deg,#17558c,#0c2a52)}
.start-button.is-active{background:linear-gradient(180deg,#0d5f8f,#0a2f57);box-shadow:inset 0 0 0 1px #18e0ff59,0 0 20px #18e0ff66}
.task-button{position:relative;background:linear-gradient(180deg,#0d1d36,#091428);border-color:#ffffff24}
.task-button:hover:not(:disabled){background:linear-gradient(180deg,#123256,#0b1f3c)}
.task-button.is-active{border-color:#18e0ff73;background:linear-gradient(180deg,#123a63,#0b2243);box-shadow:inset 0 0 0 1px #18e0ff3d,0 0 18px #18e0ff44}
.task-button.is-active::after{content:"";position:absolute;left:9px;right:9px;bottom:1px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--violet));box-shadow:0 0 10px #18e0ffcc}
.tray{background:linear-gradient(180deg,#0a1a33,#071227);border-color:#ffffff1f;box-shadow:inset 0 1px 0 #ffffff12}
.start-menu{
  background:linear-gradient(180deg,#0d1a33f7,#070f21fa);
  border:1px solid #18e0ff3d;
  box-shadow:0 24px 60px #000d,0 0 0 1px #ffffff0f,inset 0 1px 0 #ffffff1f;
  transform-origin:0 100%; /* 从开始按钮那一角长出来：弹层要让人看出触发源 */
  animation:start-in var(--dur-base) var(--ease-out)
}
@keyframes start-in{from{opacity:0;translate:0 8px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
/* 常驻的 background-position 循环既是绘制开销也是视觉噪音，改成静态渐变 + 内高光。 */
.start-banner{
  background:linear-gradient(var(--cyan),var(--violet) 55%,#6ad9ff);
  box-shadow:inset 0 0 18px #ffffff33,inset 1px 0 0 #ffffff40,0 0 22px #18e0ff44
}
.start-items button{position:relative;border-radius:9px}
.start-items button::before{
  content:"";position:absolute;left:1px;top:50%;translate:0 -50%;width:2px;height:62%;border-radius:2px;
  background:linear-gradient(var(--cyan),var(--violet));box-shadow:0 0 10px var(--cyan);
  scale:1 0;transition:scale var(--dur-base) var(--ease-out)   /* scaleY 而非 height：不触发布局 */
}
.start-items button:hover,.start-items button:focus-visible{background:#18e0ff1f;box-shadow:inset 0 0 0 1px #18e0ff33}
.start-items button:hover::before,.start-items button:focus-visible::before{scale:1 1}
.start-submenu{background:linear-gradient(180deg,#0c1930f7,#070f21fa);border:1px solid #18e0ff3d}

/* —— 桌面图标 —— */
.desktop-icon{border-radius:12px}
.desktop-icon:hover,.desktop-icon:focus-visible,.desktop-icon.selected{scale:1.035}
.desktop-icon span{border-radius:6px;padding:1px 4px;background:#040a1673;transition:background .18s ease}
.desktop-icon.selected span{background:#18e0ff33}
.pixel-icon{transition:filter .2s ease}
.desktop-icon:hover .pixel-icon{filter:drop-shadow(0 0 14px #18e0ffcc)}

/* —— 右键菜单 / 提示条 / 角落卡片 —— */
/* 右键菜单贴着光标弹出，origin 放左上角。 */
.context-menu{transform-origin:0 0;animation:menu-in var(--dur-press) var(--ease-out)}
@keyframes menu-in{from{opacity:0;scale:.97}to{opacity:1;scale:1}}
.context-menu button{border-radius:7px}
.context-menu button:hover,.context-menu button:focus-visible{background:#18e0ff22;box-shadow:inset 2px 0 0 var(--cyan)}
/* Toast 会被连续触发：用 transition + @starting-style（可中断、可重定向），不用 keyframes。 */
.toast{
  background:linear-gradient(180deg,#0d1e38f5,#081226fa);border-color:#18e0ff59;
  box-shadow:0 18px 44px #000c,0 0 26px #18e0ff33,inset 0 1px 0 #ffffff1f;
  transition:opacity var(--dur-base) var(--ease-out),translate var(--dur-base) var(--ease-out)
}
@starting-style{.toast:not([hidden]){opacity:0;translate:0 10px}}
.m98-corner-card{transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.m98-corner-card:hover{border-color:#18e0ff66;box-shadow:0 26px 64px #000e,0 0 34px #18e0ff30}
.m98-corner-visual{
  background:radial-gradient(circle at 50% 0%,#18e0ff3d,transparent 70%),linear-gradient(180deg,#0a1e3a,#071228);
  border-color:#18e0ff73
}

/* —— 应用商店 —— */
.store-toolbar{
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(90deg,#0e2c54,#12456f 60%,#0e2c54);
  border-color:#18e0ff3d;border-radius:11px;padding:8px 12px;
  box-shadow:inset 0 1px 0 #ffffff1f,0 6px 20px #0007
}
.store-toolbar-copy{display:grid;gap:1px;margin-right:auto;min-width:0}
.store-toolbar-copy strong{font-size:13px;letter-spacing:.04em}
.store-toolbar-copy small{
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#7ea6cc
}
.store-toolbar-tag{
  padding:3px 9px;border:1px solid #18e0ff44;border-radius:999px;background:#07152e99;color:var(--cyan-soft);font-size:11px
}
.store-sidebar{
  background:linear-gradient(180deg,#08172f,#061024);border-color:#ffffff1a;border-radius:11px
}
.store-sidebar h3{letter-spacing:.22em;text-transform:uppercase;font-size:10px;color:#6f8cad}
.store-tab{position:relative;border-radius:9px;padding-left:12px}
.store-tab::before{
  content:"";position:absolute;left:3px;top:50%;translate:0 -50%;width:2px;height:58%;border-radius:2px;
  background:linear-gradient(var(--cyan),var(--violet));box-shadow:0 0 10px var(--cyan);
  scale:1 0;transition:scale var(--dur-base) var(--ease-out)
}
.store-tab:hover::before,.store-tab.active::before{scale:1 1}
.store-tab.active{
  background:linear-gradient(90deg,#18e0ff26,#8b7bff14);
  border-color:#18e0ff59;box-shadow:inset 0 0 0 1px #18e0ff2e,0 0 18px #18e0ff33
}
.store-detail{border-color:#ffffff1a;border-radius:11px;background:linear-gradient(180deg,#07152ef2,#050f22f7)}
.app-list{gap:11px}
.app-card{
  position:relative;overflow:hidden;border-radius:12px;
  background:linear-gradient(120deg,#0c2444,#0a1c36);
  border-color:#ffffff1f;
  box-shadow:inset 0 1px 0 #ffffff12
}
.app-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 30%,#ffffff1a 48%,transparent 66%);
  transform:translateX(-110%);transition:opacity .24s ease
}
.app-card:hover::after,.app-card:focus-visible::after{opacity:1;animation:card-sheen .85s ease-out}
@keyframes card-sheen{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
.app-card:hover,.app-card:focus-visible{
  border-color:#18e0ff8c;background:linear-gradient(120deg,#0f3159,#0b2242);
  box-shadow:0 14px 30px #000a,0 0 26px #18e0ff3d,inset 0 1px 0 #ffffff1f
}
.app-card .pixel-icon,.app-detail>.pixel-icon,.wallpaper-picker-card .pixel-icon{
  padding:6px;border-radius:11px;
  background:linear-gradient(160deg,#12345a,#0a1a32);
  box-shadow:inset 0 1px 0 #ffffff1f,0 0 14px #18e0ff2e
}
.app-card-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border:1px solid #18e0ff3d;border-radius:999px;background:#07152e99;color:var(--cyan-soft)
}
.app-card-badge .pixel-icon{width:12px;height:12px;padding:1px;background:none;box-shadow:none;border-radius:3px}
.app-card.coming-soon{background:linear-gradient(120deg,#0a1a30,#081426);border-color:#ffffff24}
.app-card.coming-soon:hover{background:linear-gradient(120deg,#0a1a30,#081426);border-color:#ffffff2e;box-shadow:none}
.app-card.coming-soon .pixel-icon{opacity:.6;box-shadow:none}
.app-detail{
  padding:14px;border:1px solid #ffffff17;border-radius:12px;
  background:radial-gradient(120% 90% at 12% 0%,#123a6642,transparent 70%),linear-gradient(180deg,#0a1e3a,#07132a)
}
.app-detail h2{font-size:21px;letter-spacing:.01em}
.app-detail .tag{display:inline-block;padding:2px 9px;border:1px solid #18e0ff44;border-radius:999px;background:#07152e99}
.empty-state{border-radius:12px;background:#071429a6;padding:26px 21px}

/* —— 壁纸 / 弹窗 / 登录 —— */
.wallpaper-picker-card{border-radius:12px;transition:background .18s ease,border-color .18s ease,scale .18s ease,box-shadow .22s ease}
.wallpaper-picker-card:hover,.wallpaper-picker-card:focus-visible{scale:1.02;box-shadow:0 12px 26px #000a,0 0 20px #18e0ff33}
.wallpaper-picker-preview{border-radius:9px;background:radial-gradient(circle at 50% 26%,#123a5c,transparent 72%)}
.release-notes-header{
  background:radial-gradient(120% 100% at 10% 0%,#123a6642,transparent 70%),linear-gradient(180deg,#0c2340,#08172e);
  border-color:#18e0ff33
}
.release-notes-list li::marker{color:var(--cyan)}
.login-panel{
  border-color:#18e0ff59;
  box-shadow:0 30px 70px #000c,inset 0 1px 0 #ffffff1f,0 0 46px #18e0ff2e;
  animation:window-in .4s var(--ease-out)
}
.pin-row input{transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.boot-progress i{background:linear-gradient(90deg,var(--cyan),var(--violet),var(--cyan));background-size:220% 100%;animation:loading 1.8s steps(18,end) both,boot-shimmer 1.4s linear infinite}
@keyframes boot-shimmer{to{background-position:-220% 0}}
.boot-logo{animation:boot-glow 3.4s ease-in-out infinite}
@keyframes boot-glow{50%{text-shadow:0 0 44px #18e0ffcc,0 4px 18px #000}}

/* —— 无障碍：reduced-motion 是「更少更温和」，保留 opacity / color，去掉位移与缩放 —— */
@media(prefers-reduced-motion:reduce){
  .app-window,.login-panel,.start-menu,.context-menu,
  .app-window .win-title::after,.boot-logo,.boot-progress i{
    animation:none
  }
  .win-button:active:not(:disabled),.desktop-icon:active{scale:1}
  .desktop-icon:hover,.desktop-icon:focus-visible,.desktop-icon.selected,
  .wallpaper-picker-card:hover,.wallpaper-picker-card:focus-visible{scale:1;translate:none}
  #desktop-icons>.desktop-icon,.start-items button,.app-card{animation:none}
}

@media(max-width:650px){
  .app-detail{padding:11px}
  .store-toolbar{padding:7px 9px}
}

@media(max-width:580px){.start-submenu{left:0;bottom:calc(100% + 4px);width:min(236px,calc(100vw - 8px));max-height:calc(100vh - 320px)}}

/* ============================================================================
   图标与微交互（v2）
   motion-craft 的几条硬规则落在这里：可按元素必须有按压反馈；hover 动效只在真指针
   设备生效（防触屏误触发）；多元素入场 45ms 交错；只动 transform / opacity / filter。
   ============================================================================ */

/* —— 按压反馈：一切可按元素都要「我听到了」 —— */
.win-button:active:not(:disabled),
.task-button:active:not(:disabled),
.icon-button:active:not(:disabled),
.store-tab:active,
.start-items button:active,
.context-menu button:active,
.app-card:active,
.wallpaper-picker-card:active{scale:.97}

/* —— 桌面图标：抬升 + 图标弹出 + 选中光环 —— */
.desktop-icon{
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    translate var(--dur-fast) var(--ease-out),scale var(--dur-press) var(--ease-out)
}
.desktop-icon .pixel-icon{
  transition:filter var(--dur-base) var(--ease-out),scale var(--dur-base) var(--ease-out),
    rotate var(--dur-base) var(--ease-out)
}
.desktop-icon span{transition:background var(--dur-fast) var(--ease-out)}
.desktop-icon:active{scale:.96}
.desktop-icon.selected{box-shadow:0 0 0 1px #18e0ff59,var(--glow)}
.desktop-icon.selected .pixel-icon{filter:drop-shadow(0 0 18px var(--cyan))}
.desktop-icon.drop-target{animation:drop-pulse 900ms var(--ease-in-out) infinite}
@keyframes drop-pulse{50%{box-shadow:0 0 0 3px #18e0ff33,var(--glow-strong)}}
@media(hover:hover) and (pointer:fine){
  .desktop-icon:hover{translate:0 -2px;scale:1.04}
  .desktop-icon:hover .pixel-icon{filter:drop-shadow(0 0 16px var(--cyan)) saturate(1.15);scale:1.07;rotate:-2deg}
  .desktop-icon:hover span{background:#18e0ff26}
}

/* 图标入场：45ms 依次出现。只在首次渲染播一次，JS 加上 body.icons-settled 后停，
   否则每次拖拽重排都会重播一遍。 */
body:not(.icons-settled) #desktop-icons>.desktop-icon{
  animation:icon-in var(--dur-slow) var(--ease-out) backwards
}
body:not(.icons-settled) #desktop-icons>.desktop-icon:nth-child(2){animation-delay:calc(var(--stagger) * 1)}
body:not(.icons-settled) #desktop-icons>.desktop-icon:nth-child(3){animation-delay:calc(var(--stagger) * 2)}
body:not(.icons-settled) #desktop-icons>.desktop-icon:nth-child(4){animation-delay:calc(var(--stagger) * 3)}
body:not(.icons-settled) #desktop-icons>.desktop-icon:nth-child(5){animation-delay:calc(var(--stagger) * 4)}
body:not(.icons-settled) #desktop-icons>.desktop-icon:nth-child(6){animation-delay:calc(var(--stagger) * 5)}
body:not(.icons-settled) #desktop-icons>.desktop-icon:nth-child(7){animation-delay:calc(var(--stagger) * 6)}
body:not(.icons-settled) #desktop-icons>.desktop-icon:nth-child(8){animation-delay:calc(var(--stagger) * 7)}
body:not(.icons-settled) #desktop-icons>.desktop-icon:nth-child(9){animation-delay:calc(var(--stagger) * 8)}
body:not(.icons-settled) #desktop-icons>.desktop-icon:nth-child(10){animation-delay:calc(var(--stagger) * 9)}
body:not(.icons-settled) #desktop-icons>.desktop-icon:nth-child(11){animation-delay:calc(var(--stagger) * 10)}
body:not(.icons-settled) #desktop-icons>.desktop-icon:nth-child(12){animation-delay:calc(var(--stagger) * 11)}
@keyframes icon-in{from{opacity:0;translate:0 10px;scale:.96}to{opacity:1;translate:0 0;scale:1}}

/* —— 开始菜单 / 商店 / 任务栏里的图标 —— */
.start-items button .pixel-icon{
  transition:scale var(--dur-base) var(--ease-out),rotate var(--dur-base) var(--ease-out),
    filter var(--dur-base) var(--ease-out)
}
.app-card .pixel-icon,.app-detail>.pixel-icon{
  transition:scale var(--dur-base) var(--ease-out),rotate var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out)
}
@media(hover:hover) and (pointer:fine){
  .start-items button:hover .pixel-icon{scale:1.12;rotate:-3deg;filter:drop-shadow(0 0 12px var(--cyan))}
  .app-card:hover .pixel-icon,.app-card:focus-visible .pixel-icon{
    scale:1.06;rotate:-2deg;box-shadow:inset 0 1px 0 #ffffff1f,0 0 20px #18e0ff59
  }
  .tray-notice:hover .tray-cat{scale:1.1;rotate:-4deg}
}
.tray-cat{transition:scale var(--dur-base) var(--ease-out),rotate var(--dur-base) var(--ease-out)}

/* 开始菜单项 45ms 依次出现 */
.start-items button{animation:item-in var(--dur-fast) var(--ease-out) backwards}
.start-items button:nth-child(2){animation-delay:calc(var(--stagger) * 1)}
.start-items button:nth-child(3){animation-delay:calc(var(--stagger) * 2)}
.start-items button:nth-child(4){animation-delay:calc(var(--stagger) * 3)}
.start-items button:nth-child(5){animation-delay:calc(var(--stagger) * 4)}
.start-items button:nth-child(6){animation-delay:calc(var(--stagger) * 5)}
.start-items button:nth-child(7){animation-delay:calc(var(--stagger) * 6)}
@keyframes item-in{from{opacity:0;translate:-6px 0}to{opacity:1;translate:0 0}}

/* —— 中文排版纪律（chinese-typography）—— */
.boot-logo{letter-spacing:0}                     /* 中文禁负字距（原为 -.04em） */
.boot-logo b{font-style:normal}                  /* 中文禁斜体；OS 是西文，这里统一去掉伪斜体 */
.win-button.primary{letter-spacing:.02em}
#tray-clock,.install-percent,.app-card-badge,.app-list-count{font-variant-numeric:tabular-nums}
.window-body p,.dialog-window p,.app-detail p,.release-notes-list,.m98-corner-body p{
  line-height:var(--lh-body)                       /* 中文正文行高 ≥1.5 */
}
.window-body,.dialog-window,.app-detail{line-height:var(--lh-body)}
.m98-corner-body h3,.app-detail h2,.release-notes-header h2,.game-overlay h2{font-weight:600} /* 中文标题 500/600，避免伪 bold */

/* ============================================================================
   规范修补（Web Interface Guidelines）
   ============================================================================ */

/* 滚动容器阻止滚动链：滚到底不该把桌面/页面一起带走 */
.window-body,.store-sidebar,.store-detail,.start-submenu{overscroll-behavior:contain}

/* 标题避免孤字成行 */
.boot-logo,.m98-corner-body h3,.app-detail h2,.release-notes-header h2,.game-overlay h2{text-wrap:balance}

/* flex 子项允许收缩：否则长文案撑破容器，截断与 overflow 都不会生效 */
.app-card-copy,.title-group,.m98-corner-body,.start-items button{min-width:0}

/* 拖拽图标时不要选中文字（桌面图标带 pointer capture） */
.desktop-icon{user-select:none}
@media(max-width:480px){
  .wallpaper-picker-window{left:8px;top:8px;transform:none;width:calc(100vw - 16px);height:calc(100vh - 66px)}
  .wallpaper-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .wallpaper-picker-preview{height:150px}
}
@media(max-width:750px){.wallpaper-picker-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.wallpaper-picker-preview{height:145px}}

/* ============================================================================
   高科技界面层
   方向（按 qiaomu-design 的"反 AI 味"要求）：不堆紫渐变居中大标题，改用工业仪表
   的语言——切角、角标、扫描线、等宽读数。全部靠 CSS 叠加完成，不重画任何一个图标，
   所以 40 多个内联 SVG 一次性全部升级。
   ============================================================================ */
:root{--mono:"Cascadia Mono","JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace}

/* —— 图标芯片：装进一块切角玻璃，按类型给强调色 —— */
.pixel-icon{
  --pi-pad:5px;
  padding:var(--pi-pad);                         /* 全局 border-box，等价于把图形内缩 */
  border-radius:11px 11px 11px 4px;              /* 一个直角切角 = 仪表盘芯片感 */
  background:
    repeating-linear-gradient(0deg,#ffffff09 0 1px,transparent 1px 3px),
    linear-gradient(155deg,#14324f,#08182c 62%,#050e1c);
  box-shadow:
    inset 0 1px 0 #ffffff2b,
    inset 0 0 0 1px color-mix(in srgb,var(--icon-accent,#18e0ff) 30%,transparent),
    0 4px 12px #000000a6;
  transition:box-shadow var(--dur-base) var(--ease-out),scale var(--dur-base) var(--ease-out),
    rotate var(--dur-base) var(--ease-out),filter var(--dur-base) var(--ease-out)
}

/* —— 图形本身：深色机身 + 霓虹件 + 可爱细节。颜色只走这几个类，方便整体换肤 —— */
.pixel-icon .pi-deep{fill:#04101f}                          /* 机身外描边与深色凹槽 */
.pixel-icon .pi-body{fill:#123a63}                          /* 机身 */
.pixel-icon .pi-face{fill:#1e5a8c}                          /* 抬起来的面板 */
.pixel-icon .pi-gloss{fill:#3a86bd}                         /* 高光面 */
.pixel-icon .pi-hi{fill:#eaf8ff}                            /* 眼睛与灯 */
.pixel-icon .pi-rim{fill:var(--icon-accent,#18e0ff)}        /* 霓虹描边 */
.pixel-icon .pi-rim-soft{fill:color-mix(in srgb,var(--icon-accent,#18e0ff) 34%,transparent)}
.pixel-icon .pi-warm{fill:#ffd36b}                          /* 暖色小灯 */
.pixel-icon .pi-mint{fill:#6ef0c0}                          /* 竹叶 */
.pixel-icon .pi-blush{fill:#ff9ad5}                         /* 腮红 */
.pixel-icon .pi-ring{fill:none;stroke:var(--icon-accent,#18e0ff);stroke-width:2.5}
.pixel-icon .pi-cur{fill:currentColor}
.pixel-icon .pi-cur-ring{fill:none;stroke:currentColor;stroke-width:2.6}

/* —— 按类型指派强调色（图形里的 .pi-rim 跟着走） —— */
.pixel-icon[data-icon="store"]{--icon-accent:#8fd8ff}
.pixel-icon[data-icon="folder"]{--icon-accent:#b79bff}
.pixel-icon[data-icon="gallery"]{--icon-accent:#b79bff}
.pixel-icon[data-icon="canvas"]{--icon-accent:#8fd8ff}
.pixel-icon[data-icon="grid"]{--icon-accent:#8fd8ff}
.pixel-icon[data-icon="check"]{--icon-accent:#6ef0c0}
.pixel-icon[data-icon="package"]{--icon-accent:#8fd8ff}
.pixel-icon[data-icon="save"]{--icon-accent:#6ef0c0}
.pixel-icon[data-icon="import"]{--icon-accent:#8fd8ff}
.pixel-icon[data-icon="key"]{--icon-accent:#b79bff}
.pixel-icon[data-icon="lock"]{--icon-accent:#b79bff}
.pixel-icon[data-icon="sun"]{--icon-accent:#ffd36b}
.pixel-icon[data-icon="moon"]{--icon-accent:#8fd8ff}
.pixel-icon[data-icon="megaphone"]{--icon-accent:#f25bd0}
.pixel-icon[data-icon="warning"]{--icon-accent:#ff9f6b}
.pixel-icon[data-icon="game"],.pixel-icon[data-icon="bamboo"]{--icon-accent:#6ef0c0}
.pixel-icon[data-icon="tapper"]{--icon-accent:#f25bd0}
.pixel-icon[data-icon="tiles"]{--icon-accent:#8fd8ff}
.pixel-icon[data-icon="water"]{--icon-accent:#5cd8ff}
.pixel-icon[data-icon="memory"]{--icon-accent:#b79bff}
.pixel-icon[data-icon="typing"],.pixel-icon[data-icon="balance"]{--icon-accent:#b79bff}

/* —— 小尺寸上下文：收掉内边距，否则 32 格图形只剩一半可见 —— */
.title-group .pixel-icon,.slot-icon .pixel-icon,.icon-button .pixel-icon{padding:2px;border-radius:6px 6px 6px 2px}
.store-tab .pixel-icon,.title-group .pixel-icon{--pi-pad:2px}
.store-tab{display:flex;align-items:center;gap:8px}
.store-tab small{margin-left:auto}
.m98-corner-visual .pixel-icon{width:34px;height:34px;--pi-pad:2px;filter:drop-shadow(0 0 12px #18e0ff99)}
.start-items button .pixel-icon{--pi-pad:3px}
.slot-icon{display:inline-flex;align-items:center;justify-content:center}
.slot-icon .pixel-icon{
  width:16px;height:16px;box-shadow:none;background:none;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--icon-accent,#18e0ff) 70%,transparent))
}
.title-dots{display:flex;align-items:center;gap:5px}
.title-dots .slot-icon .pixel-icon{width:11px;height:11px;color:#8fd8ff;filter:none}
.icon-button .pixel-icon{width:14px;height:14px;color:currentColor;box-shadow:none;background:none;filter:none}
.store-toolbar-icon .pixel-icon{width:20px;height:20px;--pi-pad:2px}
.start-flag{display:inline-flex;align-items:center}
.start-flag .pixel-icon{width:19px;height:19px;--pi-pad:2px;filter:drop-shadow(0 0 8px var(--cyan))}
@media(hover:hover) and (pointer:fine){
  .desktop-icon:hover .pixel-icon,.app-card:hover .pixel-icon,.app-card:focus-visible .pixel-icon,
  .start-items button:hover .pixel-icon,.wallpaper-picker-card:hover .pixel-icon{
    box-shadow:
      inset 0 1px 0 #ffffff3d,
      inset 0 0 0 1px color-mix(in srgb,var(--icon-accent,#18e0ff) 72%,transparent),
      0 6px 20px #000000b3,
      0 0 22px color-mix(in srgb,var(--icon-accent,#18e0ff) 45%,transparent)
  }
}
.desktop-icon.selected .pixel-icon{
  box-shadow:inset 0 0 0 1px var(--icon-accent,#18e0ff),
    0 0 24px color-mix(in srgb,var(--icon-accent,#18e0ff) 55%,transparent)
}

/* —— 窗口：四角角标 —— */
.app-window{position:absolute}
.app-window::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.5;
  background:
    linear-gradient(var(--cyan),var(--cyan)) 0 0/15px 2px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 0 0/2px 15px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 0/15px 2px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 0/2px 15px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 0 100%/15px 2px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 0 100%/2px 15px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 100%/15px 2px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 100% 100%/2px 15px no-repeat;
  transition:opacity var(--dur-base) var(--ease-out)
}
.app-window.active-window::after{opacity:.9}
.win-title::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan) 22%,#ffffff 50%,var(--violet) 78%,transparent);
  opacity:.7
}

/* —— 等宽读数：状态栏、徽标、目录标题、时钟 —— */
.window-status,.tray time,#tray-clock,.app-card-badge,.store-sidebar h3,
.gallery-card-meta,.gallery-deadline-date,.wallpaper-kicker{
  font-family:var(--mono);letter-spacing:.08em
}
.window-status,.store-sidebar h3{text-transform:uppercase}
.app-card-badge,.gallery-card-meta{font-size:10px;color:var(--cyan-soft)}
.tray time,#tray-clock{color:var(--cyan-soft);text-shadow:0 0 10px #18e0ff66}

/* —— 状态栏左侧的状态灯 —— */
.window-status{position:relative;padding-left:22px}
.window-status::before{
  content:"";position:absolute;left:11px;top:50%;translate:0 -50%;width:5px;height:5px;
  border-radius:1px;background:var(--green);box-shadow:0 0 9px var(--green)
}

/* —— 按钮：切角 + 前沿亮边 —— */
.win-button{border-radius:9px 9px 9px 3px;position:relative;overflow:hidden}
.win-button::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(var(--cyan),transparent);opacity:.45
}
.win-button.primary::before,.start-button::before{opacity:.9}

/* —— 开始菜单：仪表盘顶边 —— */
.start-menu{position:absolute}
.start-menu::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--cyan),transparent 45%,var(--violet))
}
.start-items button small{font-family:var(--mono);color:var(--cyan-soft)}

/* —— 卡片：左上切角，像一块控制面板 —— */
.app-card,.gallery-card,.wallpaper-picker-card{border-radius:12px 12px 12px 4px}

@media(prefers-reduced-motion:reduce){
  .pixel-icon,.app-window::after{transition:none}
}

/* ============================================================================
   托盘时钟与日历
   桌面系统的心智模型：托盘时钟可点，点开是当月日历。日期一律走 Intl，不手写格式；
   键盘可达（焦点落在当前选中日，Esc 关闭）。
   ============================================================================ */
.clock-button{
  display:flex;align-items:center;gap:6px;padding:3px 9px;border-radius:9px 9px 9px 3px;
  border:1px solid transparent;background:transparent;color:inherit;font:inherit;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)
}
.clock-button:hover{background:#18e0ff1a;border-color:#18e0ff3d}
.clock-button[aria-expanded="true"]{background:#18e0ff26;border-color:#18e0ff66;box-shadow:inset 0 0 0 1px #18e0ff33}
.clock-button time{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--cyan-soft);text-shadow:0 0 10px #18e0ff66}

.calendar-panel{
  position:absolute;right:10px;bottom:46px;z-index:40;width:266px;padding:12px;
  background:linear-gradient(180deg,#0d1a33f7,#070f21fa);
  animation:start-in var(--dur-base) var(--ease-out);transform-origin:100% 100%
}
.calendar-panel::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--cyan),transparent 55%,var(--violet))
}
.calendar-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.calendar-head strong{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--cyan-soft)}
.calendar-head .icon-button{width:26px;height:24px;font-size:15px}
.calendar-selected{margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid #ffffff14;font-size:12px;color:var(--text-dim)}
.calendar-week,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.calendar-week span{text-align:center;font-family:var(--mono);font-size:10px;color:var(--faint);padding-bottom:4px}
.calendar-day{
  aspect-ratio:1;display:grid;place-items:center;border:1px solid transparent;border-radius:8px;
  background:transparent;color:var(--text-dim);font:inherit;font-size:12px;
  font-variant-numeric:tabular-nums;cursor:pointer;
  transition:background var(--dur-press) var(--ease-out),border-color var(--dur-press) var(--ease-out)
}
.calendar-day:hover{background:#18e0ff1f;border-color:#18e0ff4d;color:#fff}
.calendar-day:active{scale:.94}
.calendar-day.today{color:#fff;border-color:#18e0ff59;box-shadow:inset 0 0 0 1px #18e0ff2e}
.calendar-day.selected{background:linear-gradient(180deg,#13608d,#0c2b55);border-color:var(--cyan);color:#fff;font-weight:600;box-shadow:0 0 16px #18e0ff59}
.calendar-today-button{margin-top:10px;width:100%;min-height:28px;font-size:12px}
@media(max-width:480px){.calendar-panel{right:8px;width:min(266px,calc(100vw - 16px))}}
@media(prefers-reduced-motion:reduce){.calendar-panel{animation:none}}

/* ============================================================================
   弧光桌面吉祥物（<huguang-mascot> Web Component）
   组件 :host 默认是网页右下角悬浮（position:fixed; z-index:9999）。这里覆盖成桌面层
   的一个角色位——外层文档规则优先级高于 :host，所以不必改组件源码。
   组件本体写在 #desktop 里（见 index.html）：z-index 只在同一个层叠上下文里比较，
   放在 body 层时它是同级元素，z-index:2 会整块压住桌面；放进 #desktop 后，
   窗口层（z-index:5）就正常盖在角色之上，符合"桌面层不遮应用窗口"的约定。
   ============================================================================ */
huguang-mascot.desktop-mascot{
  position:absolute;right:clamp(24px,6vw,120px);top:43%;bottom:auto;
  translate:0 -50%;z-index:2;                 /* 桌面层：不遮应用窗口 */
  filter:drop-shadow(0 0 26px #18e0ff40) drop-shadow(0 14px 40px #000000a6)
}
huguang-mascot.desktop-mascot:focus-visible{outline:2px solid #18e0ff99;outline-offset:6px;border-radius:12px}

/* ============================================================================
   鼠标触碰特效 + 商店精修
   1) 指针聚光：桌面图标与商店卡片的「光斑 / 倾角 / 图标视差」跟随光标。JS 只写
      --px、--py 两个变量（取值 -0.5~0.5），光斑位置与角度全部在 CSS 里用 calc() 推导，
      所以调手感只改这一层，不用碰脚本。
   2) 商店：品牌工具栏、精选横幅、列表表头、卡片交错入场、敬请期待徽标、滚动条。
   只动 transform / opacity / filter / box-shadow / background-*，不碰定位与盒子尺寸；
   悬停动效只在真指针设备生效，reduced-motion 下退化成颜色与透明度变化。
   ============================================================================ */

/* —— 桌面图标：抬升 + 倾角 + 聚光 + 图标视差（悬停不画任何方框）——
   hover / focus-visible 都不铺底色、不描边、也不留方块投影：抬升阴影改用 drop-shadow，
   它贴着图形轮廓走；box-shadow 会按盒子形状画出圆角矩形，正是要去掉的东西。
   文字标签同样不再垫底板，靠描影保证在壁纸上可读。鼠标划过时只有图标本身在动。 */
.desktop-icon{
  position:relative;isolation:isolate;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),color var(--dur-fast) var(--ease-out),
    filter var(--dur-base) var(--ease-out),
    translate var(--dur-fast) var(--ease-out),scale var(--dur-press) var(--ease-out),
    transform var(--dur-base) var(--ease-out)
}
.desktop-icon span{
  background:none;                                  /* 去掉标签下的横向底板 */
  text-shadow:0 1px 3px #000,0 1px 10px #000000b3;  /* 没有底板，靠描影压住壁纸 */
  transition:color var(--dur-fast) var(--ease-out),translate var(--dur-fast) var(--ease-out)
}
.desktop-icon .pixel-icon{
  transition:filter var(--dur-base) var(--ease-out),scale var(--dur-base) var(--ease-out),
    rotate var(--dur-base) var(--ease-out),translate var(--dur-base) var(--ease-out)
}
/* 聚光斑：去掉底框之后它读作图标背后的一层柔光，光标在图标内移动时光斑跟着走。
   画在内容下面：父级 isolation 建栈后，z-index:-1 只压在底色之上，不会盖住图形与文字。 */
.desktop-icon::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(46% 44% at calc(50% + var(--px, 0) * 100%) calc(50% + var(--py, 0) * 100%),
    #18e0ff47,#18e0ff12 52%,transparent 78%);
  opacity:0;transition:opacity var(--dur-fast) var(--ease-out)
}
/* 桌面图标原本把 outline 关掉了（只靠描边+辉光表达焦点）；现在焦点态与悬停态同一套语言：
   一条真正的焦点环 + 柔光，同样不画方框。 */
.desktop-icon:focus-visible{
  border-color:transparent;background:transparent;box-shadow:none;
  outline:2px solid #18e0ffcc;outline-offset:3px
}
@media(hover:hover) and (pointer:fine){
  .desktop-icon:hover{
    translate:0 -3px;scale:1.045;
    transform:perspective(460px) rotateX(calc(var(--py, 0) * -10deg)) rotateY(calc(var(--px, 0) * 14deg));
    border-color:transparent;background:transparent;box-shadow:none;
    filter:drop-shadow(0 9px 16px #000000a6)
  }
  .desktop-icon:hover::before,.desktop-icon:focus-visible::before,
  .desktop-icon.selected::before{opacity:1}
  .desktop-icon:hover .pixel-icon,.desktop-icon:focus-visible .pixel-icon{
    translate:calc(var(--px, 0) * 8px) calc(var(--py, 0) * 8px);scale:1.08;rotate:-2deg
  }
  /* 悬停时标签只提亮文字，不再垫底板（更早的层里有一条 .desktop-icon:hover span 的底色）。 */
  .desktop-icon:hover span,.desktop-icon:focus-visible span{background:none;color:#fff;translate:0 -1px}
}
/* 竹篓窗口里的图标同理：那层 hover 底色写在更早的一层、优先级更高，这里显式关掉。 */
.folder-grid .desktop-icon:hover,.folder-grid .desktop-icon:focus-visible{background:transparent}
/* 拖放提示要保留：它是"可以放到这里"的指示，不是悬停装饰；写在悬停规则之后压过它。 */
.desktop-icon.drop-target{border:1px solid var(--cyan);background:#18e0ff33;box-shadow:none;filter:none}

/* —— 商店外壳：固定工具栏 + 可滚动窗格 —— */
.store-window .window-body{display:flex;flex-direction:column;gap:12px;padding:12px;overflow:hidden}
.store-toolbar{flex:none;margin-bottom:0}
.store-layout{flex:1 1 auto;height:auto;min-height:0}
.store-detail,.store-sidebar{scrollbar-width:thin;scrollbar-color:#1d4d78 transparent}
.store-detail::-webkit-scrollbar,.store-sidebar::-webkit-scrollbar{width:9px;height:9px}
.store-detail::-webkit-scrollbar-track,.store-sidebar::-webkit-scrollbar-track{background:#061024;border-radius:9px}
.store-detail::-webkit-scrollbar-thumb,.store-sidebar::-webkit-scrollbar-thumb{background:#1d4d78;border-radius:9px}
.store-detail::-webkit-scrollbar-thumb:hover,.store-sidebar::-webkit-scrollbar-thumb:hover{background:#2a6ba4}
.store-sidebar .store-tab small{
  min-width:23px;padding:1px 6px;border:1px solid #18e0ff33;border-radius:999px;
  background:#07152e99;font-family:var(--mono);font-size:10px;text-align:center;opacity:1
}

/* —— 商店：精选横幅 —— */
.store-hero{
  display:flex;align-items:center;gap:14px;padding:14px;margin-bottom:12px;
  border:1px solid #18e0ff3d;border-radius:12px 12px 12px 4px;
  background:radial-gradient(130% 140% at 6% 0%,#1b4a7a99,transparent 62%),linear-gradient(120deg,#0b2240,#08182e);
  box-shadow:inset 0 1px 0 #ffffff1f,0 10px 26px #000000a6;
  animation:store-rise var(--dur-slow) var(--ease-out) backwards
}
.store-hero-icon .pixel-icon{width:52px;height:52px;--pi-pad:6px}
.store-hero-copy{display:grid;gap:2px;min-width:0;margin-right:auto}
.store-hero-kicker{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan-soft)}
.store-hero-copy strong{font-size:17px;font-weight:600;letter-spacing:.01em}
.store-hero-copy p{margin:0;font-size:12px;line-height:1.55;color:var(--muted)}
.store-hero-actions{display:flex;flex-direction:column;gap:6px;flex:none}
.store-hero-actions .win-button{min-height:30px;font-size:12px;white-space:nowrap}

/* —— 商店：列表表头 + 卡片交错入场 —— */
.app-list-head{display:flex;align-items:center;gap:9px;margin:0 0 10px}
.app-list-head strong{font-size:12px;font-weight:600;letter-spacing:.02em}
.app-list-count{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#6f8cad}
.app-list-flag{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  padding:3px 9px;border:1px solid #ffd36b44;border-radius:999px;background:#ffd36b14;color:#ffd36b;font-size:10px
}
.app-list-flag .pixel-icon{width:12px;height:12px;padding:1px;background:none;box-shadow:none;filter:none}
.app-list>.app-card{animation:store-rise var(--dur-slow) var(--ease-out) backwards}
.app-list>.app-card:nth-child(2){animation-delay:calc(var(--stagger) * 1)}
.app-list>.app-card:nth-child(3){animation-delay:calc(var(--stagger) * 2)}
.app-list>.app-card:nth-child(4){animation-delay:calc(var(--stagger) * 3)}
.app-list>.app-card:nth-child(5){animation-delay:calc(var(--stagger) * 4)}
.app-list>.app-card:nth-child(6){animation-delay:calc(var(--stagger) * 5)}
.app-list>.app-card:nth-child(7){animation-delay:calc(var(--stagger) * 6)}
.app-list>.app-card:nth-child(8){animation-delay:calc(var(--stagger) * 7)}
.app-list>.app-card:nth-child(9){animation-delay:calc(var(--stagger) * 8)}
.app-list>.app-card:nth-child(10){animation-delay:calc(var(--stagger) * 9)}
.app-list>.app-card:nth-child(11){animation-delay:calc(var(--stagger) * 10)}
.app-list>.app-card:nth-child(12){animation-delay:calc(var(--stagger) * 11)}
@keyframes store-rise{from{opacity:0;translate:0 10px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
.app-detail{animation:store-rise var(--dur-slow) var(--ease-out) backwards}

/* —— 商店：卡片聚光 + 左侧强调条 + 图标视差 —— */
button.app-card{
  isolation:isolate;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),translate var(--dur-fast) var(--ease-out),
    scale var(--dur-press) var(--ease-out),transform var(--dur-base) var(--ease-out)
}
button.app-card::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(62% 130% at calc(50% + var(--px, 0) * 100%) calc(50% + var(--py, 0) * 100%),
    #18e0ff3d,transparent 68%);
  opacity:0;transition:opacity var(--dur-fast) var(--ease-out)
}
@media(hover:hover) and (pointer:fine){
  button.app-card:hover::before,button.app-card:focus-visible::before{opacity:1}
  button.app-card:hover,button.app-card:focus-visible{
    translate:0 -1px;
    transform:perspective(900px) rotateX(calc(var(--py, 0) * -5deg)) rotateY(calc(var(--px, 0) * 5deg));
    box-shadow:inset 3px 0 0 #18e0ff,0 14px 30px #000a,0 0 26px #18e0ff3d,inset 0 1px 0 #ffffff1f
  }
  button.app-card:hover .pixel-icon,button.app-card:focus-visible .pixel-icon{
    translate:calc(var(--px, 0) * 4px) calc(var(--py, 0) * 4px)
  }
}

/* —— 商店：敬请期待（未上线应用） —— */
.pixel-icon[data-icon="hourglass"]{--icon-accent:#ffd36b}
.coming-soon-badge{
  margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  padding:3px 9px;border:1px dashed #ffffff2e;border-radius:999px;background:#0a1729;color:#8fa9c4;font-size:10px
}
.app-card.coming-soon .coming-soon-badge .pixel-icon{opacity:.92;box-shadow:none;filter:none}

/* —— 商店：空状态 —— */
.empty-state .pixel-icon{width:34px;height:34px;margin:0 auto 10px;--pi-pad:4px;opacity:.85}
.empty-state p{margin:0}

@media(max-width:650px){
  .store-hero{flex-wrap:wrap;gap:10px;padding:11px}
  .store-hero-icon .pixel-icon{width:40px;height:40px;--pi-pad:4px}
  .store-hero-copy strong{font-size:15px}
  .store-hero-copy p{display:none}
  .store-hero-actions{flex-direction:row;width:100%}
  .store-hero-actions .win-button{flex:1}
}

@media(prefers-reduced-motion:reduce){
  .desktop-icon,.desktop-icon:hover,
  .desktop-icon .pixel-icon,.desktop-icon:hover .pixel-icon{
    transform:none;translate:none;scale:1;rotate:none
  }
  .app-list>.app-card,.store-hero,.app-detail{animation:none}
  button.app-card:hover,button.app-card:focus-visible,
  button.app-card:hover .pixel-icon,button.app-card:focus-visible .pixel-icon{transform:none;translate:none}
}

/* ============================================================================
   桌面不许滚动 + 角落卡片 / 卸载向导在矮窗口下不被切掉

   第一件事最要紧：桌面是 overflow:hidden 的容器，而 overflow:hidden 只是"看不见滚动条"，
   它依然是个滚动容器。只要浏览器需要把某个获得焦点的元素滚进可视区（右键菜单的按钮、
   日历里的日期、确认对话框的按钮都会 .focus()），它就会把整个桌面顶上去——图标、任务栏、
   角落卡片一起上移，看起来就是"被裁掉一截"。overflow:clip 是"裁剪但不滚动"，
   从根上堵住这条路；下面几处 .focus() 也都改成了 { preventScroll: true } 双保险。

   第二件事：广告卡原来只锚在右下角，卡片一高就顶着桌面上沿长出去，标题栏被裁掉；
   卸载向导卡虽然居中，但比可视区高时上下会同时溢出。这里统一改成：可视区内限高 +
   卡片自身是纵向 flex + 正文可滚动，再给矮窗口一档紧凑排版——正常尺寸下不会出现滚动条。
   ============================================================================ */
.desktop-screen{overflow:clip}

.m98-corner-layer{
  top:12px;display:flex;align-items:flex-end;justify-content:flex-end
}
.m98-corner-card,.operation-card{
  max-height:100%;display:flex;flex-direction:column
}
.m98-corner-card>.win-title,.operation-card>.win-title,
.m98-corner-card>.m98-corner-footer,.operation-card>.m98-corner-footer{flex:none}
.m98-corner-body{min-height:0;overflow:auto;overscroll-behavior:contain}
/* 按钮与"广告 1/2"计数：宽度不够时换行也要右对齐，不能压到页脚上 */
.m98-corner-actions{flex-wrap:wrap}
.m98-corner-actions>span{margin-left:auto;white-space:nowrap}

/* 卡片标题栏里的图标必须按标题栏尺寸收好：.pixel-icon 默认 39px，塞进 38px 高的标题条
   会把图标和文字撑成两行、整体高出条子，被标题条自己的 overflow:hidden 裁掉——
   看上去就是"标题文字被挡住一半"。这里和 .title-group 用同一套尺寸。 */
.m98-corner-title{gap:8px}
.m98-corner-title>span:first-child{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}
.m98-corner-title .pixel-icon{
  width:17px;height:17px;--pi-pad:2px;filter:drop-shadow(0 0 8px var(--cyan))
}

@media(max-height:640px){
  .m98-corner-body{padding:11px 12px}
  .m98-corner-body h3{margin:7px 0 5px;font-size:18px}
  .m98-corner-body p{margin-bottom:10px}
  .m98-corner-visual{height:46px;margin-bottom:9px;font-size:16px}
  .m98-corner-visual .pixel-icon{width:28px;height:28px;--pi-pad:3px}
  .install-percent{margin-top:3px}
}

/* ============================================================================
   弧光对话窗口 + 长按唤醒
   ============================================================================ */
/* 对话窗口：比游戏窗窄一点、高一点，更像一个聊天面板 */
.chat-window{
  width:min(470px,calc(100vw - 24px));height:min(680px,calc(100vh - 76px));
  left:50%;top:46%;transform:translate(-50%,-50%)
}
/* 面板自己管内边距与滚动，窗口正文不留缝 */
.chat-window .window-body{padding:0;overflow:hidden;background:#050f22}

/* 长按角色时的进度胶囊（给即时反馈：ui-ux-pro-max 的 active-feedback 规范）。
   环用 conic-gradient + mask 画成甜甜圈，进度靠 --hold（0~1）驱动。 */
.unlock-hint{
  position:absolute;z-index:6;display:flex;align-items:center;gap:8px;
  padding:6px 11px;border:1px solid #18e0ff59;border-radius:999px;
  background:linear-gradient(180deg,#0d1a33f7,#070f21fa);color:var(--cyan-soft);
  font-size:11px;letter-spacing:.04em;pointer-events:none;
  box-shadow:0 14px 34px #000c,0 0 22px #18e0ff33
}
.unlock-ring{
  width:15px;height:15px;flex:none;border-radius:50%;
  background:conic-gradient(var(--cyan) calc(var(--hold,0) * 1turn),#ffffff1f 0);
  mask:radial-gradient(circle,transparent 54%,#000 56%);
  -webkit-mask:radial-gradient(circle,transparent 54%,#000 56%)
}
/* 按住不放时角色本体发光，松手即恢复 */
huguang-mascot.desktop-mascot.is-unlocking{
  filter:drop-shadow(0 0 26px #18e0ff40) drop-shadow(0 0 46px #18e0ff8c) drop-shadow(0 14px 40px #000000a6)
}

/* 小屏：对话窗口铺满；商店目录变成横向可滚的标签条（4 个分类不能挤成一团） */
@media(max-width:650px){
  .chat-window{left:8px;top:8px;transform:none;width:calc(100vw - 16px);height:calc(100vh - 68px)}
  .store-sidebar{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .store-sidebar::-webkit-scrollbar{display:none}
  .store-tab{flex:none}
}

/* ============================================================================
   日夜切换的"海浪"：旧主题铺一层全屏遮罩，用一个从结晶球边框向外扩的圆环
   把它推开 —— 环内透出新主题，环外还是旧主题，环本身用切换前的粒子色描边。
   只动 mask/渐变的半径（GPU 合成），不动布局。
   ============================================================================ */
.theme-wave{
  position:absolute;inset:0 0 42px;z-index:3;pointer-events:none;
  opacity:1;transition:opacity 240ms var(--ease-out);
  /* 环外用 mask 保留（旧主题可见），环内挖空（露出新主题） */
  mask:radial-gradient(circle at var(--wave-x) var(--wave-y),transparent calc(var(--wave-r) - 1px),#000 var(--wave-r));
  -webkit-mask:radial-gradient(circle at var(--wave-x) var(--wave-y),transparent calc(var(--wave-r) - 1px),#000 var(--wave-r));
}
.theme-wave.is-done{opacity:0}
/* 那道浪：一圈贴着旧主题的亮边 + 一点外溢的光 */
.theme-wave::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at var(--wave-x) var(--wave-y),
      transparent calc(var(--wave-r) - 30px),
      color-mix(in srgb,var(--wave-crest) 55%,transparent) calc(var(--wave-r) - 10px),
      var(--wave-crest) calc(var(--wave-r) + 1px),
      color-mix(in srgb,var(--wave-crest) 40%,transparent) calc(var(--wave-r) + 14px),
      transparent calc(var(--wave-r) + 42px));
  filter:blur(1px);opacity:.9
}
@media (prefers-reduced-motion:reduce){.theme-wave{display:none}}

/* 海浪过渡（v2）：扩散的圆环外面只要"边框"有色 —— 关掉上一版的宽光晕，
   改用 SVG 描边 + 噪声位移做波浪形；遮罩边缘留几像素软过渡，避免看出是正圆。 */
.theme-wave::after{display:none}
.theme-wave{
  mask:radial-gradient(circle at var(--wave-x) var(--wave-y),transparent calc(var(--wave-r) - 7px),#000 calc(var(--wave-r) + 3px));
  -webkit-mask:radial-gradient(circle at var(--wave-x) var(--wave-y),transparent calc(var(--wave-r) - 7px),#000 calc(var(--wave-r) + 3px));
}
.theme-wave-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.theme-wave-ring{vector-effect:non-scaling-stroke}
@media (prefers-reduced-motion:reduce){.theme-wave-svg{display:none}}