:root {
  color-scheme: light;
  --accent: #2678ed;
  --glass: rgba(246, 247, 253, .89);
  --ink: #222632;
  --subtle: #606575;
  --line: rgba(32, 36, 58, .13);
  --bar-height: 34px;
  --window-radius: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { color: var(--ink); background: #20254a; font-size: 14px; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: inherit; }
a { color: var(--accent); text-underline-offset: 3px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
button:disabled { opacity: .4; cursor: not-allowed; }
::selection { color: white; background: var(--accent); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ui-icon { width: 20px; height: 20px; flex: none; }
.wallpaper { position: fixed; inset: 0; background: linear-gradient(rgba(7,12,36,.06),rgba(7,12,36,.08)), url("assets/wallpaper.webp") center / cover; }
body[data-wallpaper="midnight"] .wallpaper { background: radial-gradient(ellipse at 15% 90%, #754d9e, transparent 60%), radial-gradient(ellipse at 95% 10%, #234aa2, transparent 65%), #101930; }
body[data-wallpaper="dusk"] .wallpaper { background: radial-gradient(ellipse at 15% 110%, #fc925e, transparent 70%), radial-gradient(ellipse at 90% 0%, #5148a9, transparent 70%), #9d568d; }
.menubar { position: fixed; z-index: 30; inset: 0 0 auto; height: var(--bar-height); display: flex; align-items: center; justify-content: space-between; padding: 0 13px; color: white; background: rgba(26,26,55,.54); backdrop-filter: blur(28px) saturate(150%); box-shadow: 0 1px 0 #ffffff24; user-select: none; }
.menu-left, .menu-right { display: flex; align-items: center; height: 100%; gap: 3px; }
.menu-trigger, .status-button, .clock-button { border: 0; color: inherit; background: transparent; padding: 0 11px; border-radius: 5px; height: 28px; white-space: nowrap; }
.menu-trigger:hover, .menu-trigger[aria-expanded="true"], .status-button:hover, .clock-button:hover { background: #ffffff25; }
.app-menu { font-weight: 650; }
.system-trigger { width: 36px; display: grid; place-items: center; padding: 0; }
.apple-mark { width: 16px; height: 20px; object-fit: contain; }
.windows-mark { display: none; grid-template-columns: repeat(2, 8px); gap: 2px; }
.windows-mark i { width: 8px; height: 8px; background: currentColor; }
.status-button { padding: 0 8px; display: grid; place-items: center; }
.status-button .ui-icon, .connection .ui-icon { width: 17px; height: 17px; }
.connection { display: flex; padding: 0 8px; }
.clock-button { padding-right: 1px; font-size: 13px; font-variant-numeric: tabular-nums; }
.workspace { position: fixed; inset: var(--bar-height) 0 104px; overflow: auto; padding: 20px 20px 12px; }
.desktop-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 5), 112px); grid-auto-columns: 112px; gap: 8px 9px; justify-content: end; align-content: start; min-width: 0; }
.desktop-icon { position: relative; width: 112px; height: 112px; padding: 9px 2px 5px; display: flex; flex-direction: column; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 8px; color: white; background: transparent; user-select: none; cursor: default; touch-action: manipulation; }
.desktop-grid { justify-content: safe end; }
.desktop-icon:hover { background: #ffffff19; border-color: #ffffff22; }
.desktop-icon.selected { background: #cbd7ff30; border-color: #ffffff65; }
.desktop-icon:focus-visible { outline: 2px solid white; outline-offset: 1px; }
.desktop-icon .app-art { transition: transform 210ms cubic-bezier(.22,.8,.25,1); }
.desktop-icon:hover .app-art { transform: translateY(-4px) scale(1.05); }
.desktop-icon.dragging { opacity: .35; }
.desktop-icon.drop-target { background: #2978ed88; border-color: #ffffffaa; }
.drag-preview { position: fixed; top: 0; left: 0; z-index: 80; pointer-events: none; opacity: .85; }
.app-art { position: relative; display: grid; place-items: center; width: 58px; height: 58px; flex: none; border-radius: 14px; background: linear-gradient(150deg,#489cfa,#1550c4); color: white; box-shadow: 0 5px 12px #060e323d, inset 0 1px 0 #ffffff40; }
.app-art img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; pointer-events: none; }
.app-art.has-image { padding: 5px; }
.app-art.has-image img { border-radius: 9px; }
.app-art .fallback-icon { display: none; width: 31px; height: 31px; }
.app-art.fallback .fallback-icon { display: block; }
.app-art.rose { background: linear-gradient(155deg,#fb769c,#e83059); }
.app-art.orange { background: linear-gradient(155deg,#ffb056,#e25520); }
.app-art.yellow { background: linear-gradient(155deg,#ffe293,#e1b944); }
.app-art.violet { background: linear-gradient(155deg,#cba6fc,#7060dc); }
.app-art.white { background: #f7f8fd; color: #38476b; }
.app-art.ink { background: #253147; }
.icon-name { max-width: 110px; padding: 1px 4px; font-size: 13px; font-weight: 500; line-height: 1.35; text-align: center; text-shadow: 0 1px 3px #07102ce6,0 1px 8px #07102caa; overflow-wrap: anywhere; }
.selected .icon-name { background: #1658bac9; border-radius: 4px; }
.archive-badge { position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px; display: grid; place-items: center; background: #e6eaf6; color: #4e5469; border-radius: 50%; box-shadow: 0 2px 5px #0003; }
.archive-badge .ui-icon { width: 12px; height: 12px; }
.taskbar { position: fixed; z-index: 20; bottom: max(10px, env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
.dock { pointer-events: auto; display: flex; align-items: end; gap: 10px; height: 77px; padding: 11px 13px 10px; border-radius: 21px; background: #e5e6f547; box-shadow: 0 12px 36px #0004, inset 0 0 0 1px #ffffff59; backdrop-filter: blur(25px) saturate(170%); }
.dock-item { position: relative; width: 48px; height: 53px; border: 0; padding: 0 0 5px; background: none; transform-origin: center bottom; transform: translateX(var(--dx, 0px)) translateY(var(--dy, 0px)) scale(var(--zoom, 1)); transition: transform 130ms cubic-bezier(.2,.75,.3,1); }
.dock-item .app-art { width: 48px; height: 48px; border-radius: 12px; }
.dock-item .app-art img { border-radius: 8px; }
.dock-item .fallback-icon { width: 26px; height: 26px; }
.dock-item::after { content: attr(data-label); position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translate(-50%,5px); padding: 6px 10px; border-radius: 6px; background: #f8f8fbe8; color: #252939; font-size: 12px; white-space: nowrap; box-shadow: 0 5px 18px #0003; pointer-events: none; opacity: 0; transition: opacity 130ms, transform 130ms; }
.dock-item:hover::after, .dock-item:focus-visible::after { opacity: 1; transform: translate(-50%,0); }
.dock-item.running::before { content: ""; position: absolute; bottom: -4px; left: calc(50% - 2px); width: 4px; height: 4px; background: #f5f7ff; border-radius: 50%; }
.dock-divider { height: 44px; width: 1px; background: #ffffff4d; align-self: center; margin: 0 3px; }
.dock { position: relative; user-select: none; }
.taskbar-clock { display: none; }
.finder-art { background: linear-gradient(90deg,#71c5ff 50%,#e5f2ff 50%); color: #274168; }
.finder-art .ui-icon { width: 32px; height: 32px; }
.launchpad-art { background: linear-gradient(135deg,#aa7ce6,#637cdc); }
.search-art { background: linear-gradient(135deg,#43c3ee,#2571ce); }
.settings-art { background: linear-gradient(145deg,#e1e3eb,#8e95a9); color: #323b51; }
.refresh-art { background: linear-gradient(140deg,#6bd3ba,#198975); }
.folder-art { background: linear-gradient(140deg,#86dbfa,#28a2d5); }
.dock-item.bouncing .app-art { animation: dock-bounce 550ms cubic-bezier(.2,.7,.3,1); }
@keyframes dock-bounce { 0%,100% { transform: translateY(0); } 38% { transform: translateY(-19px) scale(.97,1.04); } 70% { transform: translateY(-6px); } }
.context-menu { position: fixed; z-index: 100; width: 252px; max-height: calc(100dvh - 20px); overflow: auto; padding: 6px; border-radius: 9px; background: var(--glass); box-shadow: 0 15px 40px #060c363d, 0 0 0 1px #ffffff66; backdrop-filter: blur(28px); }
.context-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 33px; padding: 7px 10px; text-align: left; background: none; border: 0; border-radius: 5px; font-size: 14px; }
.context-menu button .ui-icon { width: 16px; height: 16px; color: #555c70; }
.context-menu button:hover:not(:disabled), .context-menu button:focus-visible { color: white; background: var(--accent); outline: none; }
.context-menu button:hover:not(:disabled) .ui-icon, .context-menu button:focus-visible .ui-icon { color: inherit; }
.menu-section { margin: 5px 3px; border: 0; border-top: 1px solid var(--line); }
.menu-caption { padding: 8px 10px 5px; color: var(--subtle); font-size: 12px; }
.shortcut { color: #6d7281; margin-left: auto; font-size: 12px; }
.context-menu button:hover .shortcut { color: inherit; }
.app-window { position: fixed; padding: 0; width: min(650px,calc(100vw - 32px)); max-height: calc(100dvh - 140px); border: 0; border-radius: var(--window-radius); color: var(--ink); background: #f6f7fbeF; box-shadow: 0 28px 95px #07102266,0 0 0 1px #ffffff6b; backdrop-filter: blur(32px); overflow: hidden; }
.app-window::backdrop { background: #0d153b18; }
.window-titlebar { position: relative; height: 49px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: #f4f5fac2; border-bottom: 1px solid var(--line); cursor: grab; user-select: none; touch-action: none; }
.window-titlebar h2 { margin: 0; font-size: 14px; font-weight: 650; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.traffic-lights { display: flex; gap: 8px; width: 64px; flex: none; }
.traffic-lights button { position: relative; width: 13px; height: 13px; padding: 0; border: 1px solid #00000012; border-radius: 50%; background: #ff6058; }
.traffic-lights button::before { content: ""; position: absolute; inset: -6px; }
.traffic-lights button:nth-child(2) { background: #ffbe2e; }
.traffic-lights button:nth-child(3) { background: #28ca42; }
.traffic-lights:hover button::after { content: ""; position: absolute; width: 6px; height: 1px; background: #492522b0; left: 3px; top: 5px; }
.window-decoration { width: 64px; flex: none; }
.window-body { padding: 26px; max-height: calc(100dvh - 234px); overflow: auto; scrollbar-width: thin; scrollbar-color: #969cab transparent; }
.window-status { border-top: 1px solid var(--line); padding: 9px 18px; font-size: 12px; color: var(--subtle); background: #f0f2f8; }
.app-window.maximized { width: min(1000px,calc(100vw - 24px)); }
.detail-heading { display: flex; align-items: center; gap: 17px; margin-bottom: 22px; }
.detail-heading .app-art { width: 66px; height: 66px; border-radius: 16px; }
.detail-heading h3 { margin: 0 0 5px; font-size: 24px; letter-spacing: -.02em; }
.detail-heading p { color: var(--subtle); margin: 0; }
.detail-description { font-size: 16px; line-height: 1.85; margin: 0 0 17px; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 17px 0; }
.tag { padding: 5px 9px; font-size: 12px; color: #495269; background: #e5e9f2; border-radius: 6px; }
.detail-data { display: grid; grid-template-columns: 64px 1fr; gap: 10px; margin: 22px 0; font-size: 14px; }
.detail-data dt { color: var(--subtle); }.detail-data dd { margin: 0; overflow-wrap: anywhere; }
.note { color: #595f70; font-size: 14px; line-height: 1.7; }
.warning { color: #854a13; background: #fcead6; border-radius: 7px; padding: 10px 13px; font-size: 14px; }
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 38px; padding: 8px 14px; border-radius: 7px; border: 0; color: white; background: var(--accent); text-decoration: none; }
.secondary { background: #e5e9f2; color: #3e465a; }.actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.primary .ui-icon, .secondary .ui-icon { width: 16px; height: 16px; }
.search-input { width: 100%; padding: 12px 14px; border: 1px solid #c5ccda; border-radius: 9px; color: var(--ink); background: #ffffffb3; font-size: 16px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0; }
.filter-bar button { border: 0; border-radius: 6px; padding: 6px 9px; background: #e6eaf2; font-size: 12px; }
.filter-bar button[aria-pressed="true"] { background: var(--accent); color: white; }
.project-result { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.project-result .app-art { width: 34px; height: 34px; border-radius: 8px; }.project-result .app-art.has-image { padding: 3px; }
.project-result .fallback-icon { width: 20px; height: 20px; }
.result-title { display: block; color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.result-link { border: 0; background: none; padding: 0; text-align: left; }
.result-controls { display: flex; align-items: center; gap: 3px; }
.result-return { border: 0; border-radius: 6px; color: var(--accent); background: #e2eafa; padding: 8px 9px; white-space: nowrap; font-size: 12px; }
.app-drag-source { display: inline-flex; cursor: grab; touch-action: none; user-select: none; }
.app-drag-source:active { cursor: grabbing; }
.result-meta { display: block; color: var(--subtle); font-size: 12px; margin-top: 4px; }
.result-info { border: 0; width: 38px; height: 38px; border-radius: 7px; background: none; color: var(--subtle); }
.result-info:hover { background: #dde4f2; }
.empty { text-align: center; padding: 32px 0; color: var(--subtle); }
.settings-section + .settings-section { border-top: 1px solid var(--line); margin-top: 23px; padding-top: 18px; }
.settings-section h3 { margin: 0 0 13px; font-size: 15px; }
.os-options, .wallpaper-options { display: flex; gap: 12px; }
.os-choice { border: 2px solid transparent; padding: 10px; width: 50%; background: #e7eaf3; border-radius: 10px; text-align: left; }
.os-choice[aria-pressed="true"] { border-color: var(--accent); }
.mini-desktop { display: block; height: 86px; border-radius: 5px; position: relative; margin-bottom: 9px; background: url("assets/wallpaper.webp") center / cover; overflow: hidden; }
.mini-desktop::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px; background: #fafafaaa; }
.mini-desktop::after { content: ""; position: absolute; bottom: 5px; left: 23%; right: 23%; height: 12px; border-radius: 4px; background: #eeeeeeac; }
.os-choice[data-os="windows"] .mini-desktop::after { left: 0; right: 0; bottom: 0; height: 13px; border-radius: 0; }
.wallpaper-choice { flex: 1; min-height: 64px; border: 2px solid transparent; border-radius: 9px; color: white; text-shadow: 0 1px 4px #000a; font-size: 13px; background: #252e65; }
.wallpaper-choice[data-wallpaper="city"] { background: url("assets/wallpaper.webp") center/cover; }.wallpaper-choice[data-wallpaper="midnight"] { background: linear-gradient(130deg,#745193,#122449); }.wallpaper-choice[data-wallpaper="dusk"] { background: linear-gradient(130deg,#dc9467,#6255ab); }
.wallpaper-choice[aria-pressed="true"] { border-color: var(--accent); outline: 2px solid white; outline-offset: -4px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.setting-row select { max-width: 170px; padding: 6px 8px; border: 1px solid #c7ccda; border-radius: 6px; background: white; }
.setting-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); }
.help-list { padding-left: 20px; font-size: 15px; line-height: 2.1; }
kbd { font-size: 12px; border: 1px solid #c8ceda; border-bottom-width: 2px; border-radius: 4px; padding: 2px 5px; background: white; }
.calendar-label { font-size: 22px; font-weight: 600; margin: 0 0 18px; }
.calendar { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; text-align: center; }.calendar span { padding: 9px; border-radius: 50%; }.calendar .weekday { color: var(--subtle); font-size: 12px; }.calendar .today { color: white; background: var(--accent); }
.toast { position: fixed; z-index: 130; top: 49px; left: 50%; max-width: min(480px,calc(100vw - 24px)); transform: translate(-50%,-10px); padding: 10px 17px; border-radius: 10px; background: #f8f9ffef; color: #292f40; box-shadow: 0 8px 30px #14213e44; pointer-events: none; opacity: 0; transition: transform 180ms,opacity 180ms; font-size: 14px; }
.toast.visible { opacity: 1; transform: translate(-50%,0); }
.noscript { position: fixed; top: 80px; left: 20px; padding: 16px; background: white; }
body[data-os="windows"] { --bar-height: 38px; --window-radius: 8px; --accent: #0067c0; font-family: "Segoe UI","Microsoft YaHei",sans-serif; }
body[data-os="windows"] .apple-mark { display: none; }body[data-os="windows"] .windows-mark { display: grid; color: #62b4ff; }
body[data-os="windows"] .menubar { background: #172339d4; }
body[data-os="windows"] .taskbar { bottom: 0; min-height: 64px; background: #e7ebf0de; backdrop-filter: blur(25px); }
body[data-os="windows"] .dock { background: none; backdrop-filter: none; box-shadow: none; height: 64px; padding: 8px 13px; border-radius: 0; gap: 8px; }
body[data-os="windows"] .dock-item { width: 40px; height: 44px; }.dock-item:focus-visible { border-radius: 8px; }
body[data-os="windows"] .dock-item .app-art { width: 40px; height: 40px; border-radius: 8px; }
body[data-os="windows"] .taskbar-clock { display: block; position: absolute; right: 18px; top: 13px; font-size: 12px; line-height: 1.7; text-align: right; color: #252939; }
body[data-os="windows"] .desktop-grid { justify-content: start; }
body[data-os="windows"] .traffic-lights { order: 3; width: auto; gap: 0; margin-right: -16px; }
body[data-os="windows"] .traffic-lights button { width: 43px; height: 48px; background: none; border: none; border-radius: 0; }
body[data-os="windows"] .traffic-lights button::before { inset: 0; }
body[data-os="windows"] .traffic-lights button::after { content: "×"; font-size: 22px; background: none; width: auto; height: auto; position: static; }
body[data-os="windows"] .traffic-lights button:nth-child(2)::after { content: "−"; }body[data-os="windows"] .traffic-lights button:nth-child(3)::after { content: "□"; }
body[data-os="windows"] .traffic-lights button:hover { background: #d4dbeb; }body[data-os="windows"] .traffic-lights button:first-child:hover { background: #e04747; color: white; }
body[data-os="windows"] .window-decoration { display: none; }body[data-os="windows"] .window-titlebar { justify-content: space-between; }
body[data-icon-size="small"] .desktop-icon .app-art { width: 46px; height: 46px; border-radius: 11px; }
@media (max-width: 1000px) { .taskbar-clock { visibility: hidden; }.dock { gap: 7px; }.dock-item { width: 43px; }.dock-item .app-art { width: 43px; height: 43px; } }
@media (max-width: 650px) {
  :root { --bar-height: 42px; }.menubar { padding: 0 6px; }.menu-trigger { padding: 0 8px; height: 34px; }
  .menu-trigger:not(.system-trigger):not(.app-menu), .connection, .clock-button { display: none; }.app-menu { font-size: 13px; }
  .status-button { height: 34px; padding: 0 9px; }.menu-right { gap: 4px; }
  .workspace { padding: 14px 8px; bottom: 85px; }.desktop-grid { grid-template-rows: none; grid-auto-flow: row; grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-columns: auto; gap: 7px 0; justify-content: stretch; }
  .desktop-icon { width: 100%; height: 105px; padding-top: 9px; }.desktop-icon .app-art { width: 53px; height: 53px; }.icon-name { font-size: 12px; }
  .dock { height: 65px; gap: 8px; padding: 9px 11px; border-radius: 17px; }.dock-item { width: 39px; height: 45px; }.dock-item .app-art { width: 39px; height: 39px; border-radius: 10px; }
  .dock-item.mobile-hide, .dock-divider.mobile-hide { display: none; }.dock-item::after { display: none; }
  .app-window { max-height: calc(100dvh - 96px); }.window-body { padding: 19px; max-height: calc(100dvh - 190px); }.detail-heading h3 { font-size: 20px; }
  .setting-row { font-size: 14px; }.calendar span { padding: 7px; }.menu-caption { font-size: 13px; }.context-menu button { min-height: 42px; }
  .traffic-lights { gap: 11px; }.traffic-lights button { width: 15px; height: 15px; }.toast { top: 52px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }
body.reduced-motion *,body.reduced-motion *::before,body.reduced-motion *::after { animation: none !important; transition: none !important; }