/* Web OS shell (P2 v3) — Win11 + aiall + VSCode-tree look. No top title bar.
   Top→bottom: [tabs] [nav/path bar] [sidebar | stage | copilot] [taskbar].
   Themed via --hp-* tokens (light default), refined with local --ws-* polish. */
@import "./shell.css";
@import "./bars.css";
@import "./overlays.css";
@import "./menu.css";
@import "./desktop-surface.css";
@import "./mobile.css";
@import "./theme.css";
@media (prefers-color-scheme: dark) { [data-theme="auto"] .ws [data-lucide], [data-theme="auto"] .ws svg.lucide { color: #e5e5e5; } }

.ws {
  --ws-r: 7px;
  --ws-side-w: 280px;
  --ws-panel-head-h: 42px;
  --ws-tabs-h: 38px;
  --ws-nav-h: 40px;
  --ws-taskbar-h: 46px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* transparent so the negative-z wallpaper layer (theme.css) shows through;
     panels/bars paint their own surfaces on top */
  background: transparent;
  color: var(--hp-text-1);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  overflow: hidden;
}
.ws ::-webkit-scrollbar { width: 9px; height: 9px; }
.ws ::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.ws *:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--hp-text-2) 40%, transparent); }

/* ===== nav / address bar ===== */
.ws-nav { height: var(--ws-nav-h); flex-shrink: 0; display: flex; align-items: center; gap: 4px; padding: 0 10px; background: var(--hp-surface); border-bottom: 1px solid var(--hp-border); }
/* Fluent System glyphs (monochrome, currentColor) */
svg.fg { display: block; flex-shrink: 0; }
.ws-navbtn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 6px; background: transparent; color: var(--hp-text-2); cursor: pointer; }
.ws-navbtn:hover { background: var(--hp-hover); color: var(--hp-text-1); }
.ws-navbtn:disabled { color: var(--hp-text-disabled); cursor: default; background: transparent; }
.ws-navbtn svg.lucide { width: 16px; height: 16px; }
.ws-crumbs { flex: 1; min-width: 120px; display: flex; align-items: center; gap: 1px; height: 30px; padding: 0 4px; margin: 0 2px; background: var(--hp-bg); border: 1px solid var(--hp-border-soft); border-bottom-color: var(--hp-border); border-radius: 6px; overflow: hidden; cursor: text; transition: border-color .12s, background .12s, box-shadow .12s; }
.ws-crumbs:hover { background: var(--hp-hover); }
.ws-crumbs:focus-within, .ws-crumbs.editing { background: var(--hp-surface); border-bottom: 2px solid var(--hp-accent); }
.ws-crumbs.editing { cursor: auto; }
.ws-addr-ic { width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 4px; background: transparent; color: var(--hp-text-2); cursor: pointer; }
.ws-addr-ic:hover { background: var(--hp-hover); color: var(--hp-text-1); }
.ws-crumb { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 4px; cursor: pointer; color: var(--hp-text-1); white-space: nowrap; font-size: 12.5px; }
.ws-crumb:hover { background: var(--hp-hover); }
.ws-crumb .em { font-size: 13px; }
.ws-crumb-sep { display: inline-flex; align-items: center; color: var(--hp-text-disabled); padding: 0 1px; }
.ws-crumb-fill { flex: 1; align-self: stretch; min-width: 24px; cursor: text; }
.ws-addr-input { flex: 1; min-width: 0; height: 100%; border: none; background: transparent; outline: none; font: inherit; font-size: 12px; color: var(--hp-text-1); padding: 0 6px; }
/* filter pill — same rounded-rect language as the Browser search box (.ns-search) */
.ws-nav-search { flex: 0 1 180px; min-width: 70px; height: 30px; display: flex; align-items: center; gap: 5px; padding: 0 9px; margin: 0 2px; background: var(--hp-bg); border: 1px solid var(--hp-border-soft); border-bottom-color: var(--hp-border); border-radius: 6px; transition: border-color .12s, background .12s; }
.ws-nav-search:hover { background: var(--hp-hover); }
.ws-nav-search:focus-within { background: var(--hp-surface); border-bottom: 2px solid var(--hp-accent); }
.ws-nav-search .ic { display: inline-flex; color: var(--hp-text-2); flex-shrink: 0; }
.ws-nav-search input { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; font-size: 12px; color: var(--hp-text-1); outline: none; }
.ws-nav-sep { width: 1px; height: 18px; margin: 0 3px; background: var(--hp-border-soft); flex-shrink: 0; }

/* ===== body ===== */
.ws-body { flex: 1; min-height: 0; display: flex; }

/* ----- sidebar ----- */
.ws-side { width: var(--ws-side-w); flex-shrink: 0; display: flex; flex-direction: column; background: var(--hp-surface); border-right: 1px solid var(--hp-border); overflow: hidden; transition: width var(--hp-dur) var(--hp-ease); }
.ws-side.collapsed { width: 0; border-right: none; }
.ws-side-head, .cop-head { height: var(--ws-panel-head-h); box-sizing: border-box; display: flex; align-items: center; gap: 4px; padding: 0 6px 0 8px; border-bottom: 1px solid var(--hp-border-soft); background: var(--hp-surface); }
.ws-side-head .grow, .cop-head .grow { flex: 1; }
.ws-side-view, .cop-view { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: none; border-radius: 6px; background: transparent; color: var(--hp-text-1); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; }
.ws-side-view:hover, .cop-view:hover { background: var(--hp-hover); }
.ws-side-view .em, .cop-view .logo { font-size: 15px; }
.ws-side-view .l, .cop-view .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-side-view svg.lucide, .cop-view svg.lucide { width: 13px; height: 13px; color: var(--hp-text-2); }
.ws-side-tool, .cop-ic { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 5px; background: transparent; color: var(--hp-text-2); cursor: pointer; }
.cop-ic:hover { background: var(--hp-hover); color: var(--hp-text-1); }
.cop-ic svg.lucide { width: 15px; height: 15px; }
.ws-side-views { display: flex; gap: 2px; }
.ws-side-vbtn { width: 30px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 6px; background: transparent; cursor: pointer; }
.ws-side-vbtn .em { font-size: 16px; line-height: 1; filter: grayscale(.15); }
.ws-side-vbtn:hover { background: var(--hp-hover); }
.ws-side-vbtn.active { background: color-mix(in srgb, var(--hp-accent) 16%, transparent); box-shadow: inset 0 -2px 0 var(--hp-accent); }
.ws-side-vbtn.active .em { filter: none; }
.ws-side-section-h { font-size: 12px; font-weight: 600; color: var(--hp-text-2); padding: 8px 10px 4px; }
/* files layout: 收藏 / 推荐 / 工作区 (collapsible sections + tree) */
.ws-side-files { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* favorites/recommended show in full (no inner scrollbar); the directory
   section below flexes and scrolls internally instead */
.ws-side-sec { flex-shrink: 0; padding: 2px 6px; border-bottom: 1px solid var(--hp-border-soft); overflow: visible; max-height: none; }
.ws-side-sec-h { display: flex; align-items: center; gap: 6px; padding: 6px 6px 5px; font-size: 12px; font-weight: 650; color: var(--hp-text-2); cursor: pointer; border-radius: 6px; user-select: none; }
.ws-side-sec-h:hover { background: var(--hp-hover); color: var(--hp-text-1); }
.ws-side-sec-h .chev { width: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--hp-text-2); }
.ws-side-sec-h .chev svg { transition: transform .15s; transform: rotate(90deg); }
.ws-side-sec-h.collapsed .chev svg { transform: rotate(0deg); }
.ws-side-sec-h .ic { display: inline-flex; align-items: center; }
.ws-side-sec-h .lb { flex: 1; }
.ws-side-sec-h .tools { display: inline-flex; align-items: center; gap: 1px; }
.ws-side-sec-h .tools .ws-side-tool { width: 22px; height: 22px; }
.ws-side-sec-body { display: flex; flex-direction: column; gap: 1px; padding: 0 0 6px; }
/* 目录 section fills the remaining height; its tree scrolls internally */
.ws-side-dir { flex: 1; min-height: 0; max-height: none; display: flex; flex-direction: column; overflow: hidden; border-bottom: none; }
.ws-side-dir.collapsed { flex: 0 0 auto; }
.ws-side-dirbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ws-side-dirbody .ws-tree { flex: 1; min-height: 0; }
.ws-side-qitem { display: flex; align-items: center; gap: 9px; padding: 5px 8px 5px 20px; border-radius: 6px; cursor: pointer; font-size: 12.5px; color: var(--hp-text-1); min-width: 0; }
.ws-side-qitem:hover { background: var(--hp-hover); }
.ws-side-qitem .qic { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; }
.ws-side-qitem .qic img, .ws-side-qitem .qic svg, .ws-side-qitem .qic .fluent-icon { width: 18px !important; height: 18px !important; }
.ws-side-qitem .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* workspace section nav bar */
.ws-side-wshead { display: flex; align-items: center; gap: 2px; padding: 6px 8px 2px; flex-shrink: 0; }
.ws-side-wslabel { font-size: 12px; font-weight: 650; color: var(--hp-text-2); flex-shrink: 0; padding-left: 2px; }
.ws-side-tool svg.fg { width: 15px; height: 15px; }
.tarrow svg.fg { display: inline-block; vertical-align: middle; }
.ws-side-hint { font-size: 11px; color: var(--hp-text-3); padding: 12px 10px; text-align: center; }
.ws-side-flist { display: flex; flex-direction: column; }
.ws-side-fitem { display: flex; align-items: center; gap: 6px; padding: 4px 10px; cursor: pointer; font-size: 12px; color: var(--hp-text-1); border-radius: 4px; }
.ws-side-fitem:hover { background: var(--hp-hover); }
.ws-side-preview { font-size: 11px; color: var(--hp-text-2); padding: 6px 10px; white-space: pre-wrap; word-break: break-all; max-height: 300px; overflow-y: auto; font-family: "Consolas","SF Mono",monospace; margin: 0; }
.ws-side-graph, .ws-side-outline { flex: 1; overflow-y: auto; }
.gstar { background: linear-gradient(135deg, #4f8cff 0%, #9b6bff 55%, #e06bff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ws-side-tool:hover { background: var(--hp-hover); color: var(--hp-text-1); }
.ws-side-tool svg.lucide { width: 15px; height: 15px; }
.ws-side-tabs { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--hp-border-soft); }
.ws-side-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 6px; border: none; border-radius: 6px; background: transparent; color: var(--hp-text-2); cursor: pointer; font-size: 12px; }
.ws-side-tab:hover { background: var(--hp-hover); }
.ws-side-tab.active { background: var(--hp-surface-2); color: var(--hp-text-1); font-weight: 500; }
.ws-side-tab .em { font-size: 13px; }
.ws-side-soon { flex: 1; align-items: center; justify-content: center; color: var(--hp-text-disabled); text-align: center; }
.ws-soon .em { font-size: 40px; display: block; margin-bottom: 8px; }
.ws-soon .hint { font-size: 12px; margin-top: 6px; }
.ws-side-path { display: flex; align-items: center; gap: 2px; padding: 4px 8px; font-size: 11px; color: var(--hp-text-2); border-bottom: 1px solid var(--hp-border-soft); overflow-x: auto; white-space: nowrap; cursor: text; }
.ws-side-path::-webkit-scrollbar { display: none; }
.ws-side-path .seg { cursor: pointer; padding: 1px 4px; border-radius: 4px; }
.ws-side-path .seg:hover { background: var(--hp-hover); color: var(--hp-text-1); }
.ws-side-path .fill { flex: 1; min-width: 24px; align-self: stretch; }
.ws-side-path.editing { padding: 2px 6px; }
.ws-side-path .addr { flex: 1; min-width: 0; height: 22px; box-sizing: border-box; border: 1px solid var(--hp-accent); border-radius: 5px; background: var(--hp-bg); color: var(--hp-text-1); font: inherit; font-size: 11px; padding: 0 6px; outline: none; }
.ws-tree { flex: 1; min-height: 0; overflow: auto; padding: 6px 6px 12px; }
.tnode { }
.trow { display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 6px; border-radius: 5px; cursor: pointer; color: var(--hp-text-1); user-select: none; white-space: nowrap; }
.trow:hover { background: var(--hp-hover); }
.trow.active { background: color-mix(in srgb, var(--hp-accent) 14%, transparent); color: var(--hp-accent); font-weight: 500; }
.tarrow { width: 14px; flex-shrink: 0; text-align: center; font-size: 9px; color: var(--hp-text-2); transition: transform .15s; }
.tnode.open > .trow > .tarrow { transform: rotate(90deg); }
.tem { font-size: 14px; line-height: 1; flex-shrink: 0; }
.tnm { overflow: hidden; text-overflow: ellipsis; }
.tchildren { display: none; margin-left: 11px; padding-left: 6px; border-left: 1px solid var(--hp-border-soft); }
.tnode.open > .tchildren { display: block; }
.ws-side, .ws-copilot { position: relative; z-index: 40; }
.ws-bar, .ws-nav { position: relative; z-index: 100000; }

/* ===== window layer + floating windows ===== */
.ws-winlayer { position: fixed; inset: 0; pointer-events: none; }
.ws-winlayer > * { pointer-events: auto; }
.ws { --win-radius: 8px; }
.ws-surface { position: fixed; overflow: hidden; background: var(--hp-surface); }
.ws-surface.win { border-radius: 0 0 var(--win-radius, 8px) var(--win-radius, 8px); }
.ws-surface.win.overlay { border-radius: var(--win-radius, 8px); }
.ws-surface.win.max, .ws-surface.win.full { border-radius: 0; }
.ws-content { position: absolute; inset: 0; }
.ws-surface iframe, .ws-content iframe { width: 100%; height: 100%; border: none; display: block; background: var(--hp-surface); }
.ws-win { position: fixed; box-sizing: border-box; min-width: 320px; min-height: 180px; background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: var(--win-radius, 8px); box-shadow: none; overflow: hidden; }
.ws-win.max, .ws-win.full { border-radius: 0; }
.ws-win.tiled { border-radius: var(--win-radius, 8px); box-shadow: none; }
.ws-surface.tiled { border-radius: var(--win-radius, 8px); overflow: hidden; }
.ws-win-head { height: 38px; box-sizing: border-box; display: flex; align-items: center; gap: 6px; padding: 0 0 0 10px; background: #fff; border-bottom: 1px solid var(--hp-border-soft); cursor: move; user-select: none; }
.ws-win-head.mac-ctrls { padding-left: 0; }
/* strip variant: TabStrip in the title bar (multi-tab frames + default windows) */
.ws-win-head.strip { padding: 0 0 0 6px; gap: 4px; }
.ws-win-strip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; overflow-x: auto; height: 100%; scrollbar-width: none; }
.ws-win-strip::-webkit-scrollbar { display: none; }
.ws-win-menus { display: flex; align-items: center; gap: 1px; flex-shrink: 0; }
.ws-win-menu-btn { height: 24px; padding: 0 9px; border: none; border-radius: 5px; background: transparent; color: var(--hp-text-2); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.ws-win-menu-btn:hover { background: var(--hp-hover); color: var(--hp-text-1); }
/* icon-only title-bar actions (ctl.frameActions), e.g. sandbox apps' external-open */
.ws-win-menu-btn.ws-win-act { display: inline-flex; align-items: center; justify-content: center; width: 26px; padding: 0; }
.ws-win-menu-btn.ws-win-act svg { width: 14px; height: 14px; }
[data-theme="dark"] .ws-win-head { background: var(--hp-surface); }
.ws-win-head.nav { padding-left: 6px; }
.ws-win-head.custom { padding: 0 0 0 0; gap: 0; }
.ws-win-custom { flex: 1; min-width: 0; display: flex; align-items: center; height: 100%; overflow: hidden; }
.ws-win-head .em { font-size: 14px; }
.ws-win-head .em svg { display: inline-block; vertical-align: middle; }
.ws-win-head .em svg.lucide { width: 16px; height: 16px; display: inline-flex; vertical-align: middle; }
.ws-win-head .t { flex: 1; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-win-nav { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; overflow: hidden; padding-left: 4px; }
.ws-win-nav .ws-navbtn { width: 26px; height: 26px; }
.ws-win-nav .ws-navbtn svg.lucide { width: 14px; height: 14px; }
.ws-win-nav .ws-crumbs { height: 26px; min-width: 80px; }
.ws-win-nav .ws-addr-ic { width: 21px; height: 21px; }
.ws-win-nav .ws-nav-search { height: 26px; flex: 0 1 140px; min-width: 0; }
/* second row under a strip head: address bar + actions (Win11 explorer style) */
.ws-win-navrow { height: 36px; box-sizing: border-box; display: flex; align-items: center; gap: 2px; padding: 0 8px; background: var(--hp-surface); border-bottom: 1px solid var(--hp-border-soft); }
.ws-win-navrow .ws-navbtn { width: 28px; height: 28px; }
.ws-win-navrow .ws-crumbs { height: 28px; }
.ws-win-navrow .ws-nav-search { height: 28px; }
/* Win11 caption buttons — full-height, seamless, flush with the title bar */
.ws-win-ctrls { display: flex; gap: 0; flex-shrink: 0; align-self: stretch; position: relative; z-index: 6; }
.ws-win-ctrls button { width: 46px; height: 100%; border: none; background: transparent; color: var(--hp-text-1); cursor: default; border-radius: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.ws-win-ctrls button:hover { background: var(--hp-hover); }
.ws-win-ctrls button:active { background: color-mix(in srgb, var(--hp-hover) 60%, transparent); }
.ws-win-ctrls:not(.mac) button.close:hover { background: #c42b1c; color: #fff; }
.ws-win-ctrls:not(.mac) button.close:active { background: #b2271a; color: #fff; }
.ws-win-ctrls svg.wg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1; }
/* Mac traffic lights — left side, colored dots with hover glyphs */
.ws-win-ctrls.mac { gap: 8px; padding: 0 10px; align-self: center; height: auto; }
.ws-win-ctrls.mac button { width: 12px; height: 12px; min-width: 12px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, .15); }
.ws-win-ctrls.mac button.close { background: #ff5f57; }
.ws-win-ctrls.mac button.minbtn { background: #febc2e; }
.ws-win-ctrls.mac button.maxbtn { background: #28c840; }
.ws-win-ctrls.mac button:hover { filter: brightness(.92); }
.ws-win-ctrls.mac svg.wg { width: 7px; height: 7px; stroke: rgba(0, 0, 0, .55); stroke-width: 1.6; opacity: 0; }
.ws-win-ctrls.mac:hover svg.wg { opacity: 1; }
.ws-rh { position: fixed; touch-action: none; }
.ws-win-head { touch-action: none; }
@media (pointer: coarse) { .ws-rh { transform: scale(1.6); } }
.ws-rh-n, .ws-rh-s { cursor: ns-resize; }
.ws-rh-w, .ws-rh-e { cursor: ew-resize; }
.ws-rh-ne, .ws-rh-sw { cursor: nesw-resize; }
.ws-rh-nw, .ws-rh-se { cursor: nwse-resize; }
.ws-drag-overlay { position: fixed; inset: 0; z-index: 999999; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.ws-iframe-shield { user-select: none; -webkit-user-select: none; }
.ws-drag-ghost { position: fixed; z-index: 9999; pointer-events: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 6px; box-shadow: var(--hp-shadow-md); font-size: 12px; opacity: .95; }
.ws-drag-ghost .em { font-size: 14px; }
.ws-drop-ind { position: fixed; z-index: 9997; display: none; border: 2px solid var(--hp-accent); background: color-mix(in srgb, var(--hp-accent) 14%, transparent); border-radius: 8px; pointer-events: none; }
.ws-reorder-ind { position: fixed; z-index: 9998; display: none; width: 3px; border-radius: 2px; background: var(--hp-accent); pointer-events: none; }
.ws-win.overlay > .ws-win-head { display: none; }
.ws-win-head.overlay { display: flex; align-items: center; gap: 2px; padding: 0 2px; background: transparent; border: none; border-radius: 0 0 0 8px; }
.ws-win-grip { width: 28px; align-self: stretch; display: flex; align-items: center; justify-content: center; cursor: move; color: var(--hp-text-2); opacity: .45; }
.ws-win-grip:hover { opacity: .9; }
.ws-win-grip svg.lucide { width: 16px; height: 16px; }
.ws-win-head.overlay .ws-win-ctrls { display: flex; }
.ws-vdiv { background: transparent; }
.ws-vdiv::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 3px; border-radius: 2px; background: var(--hp-border); }
.ws-vdiv:hover::after { background: var(--hp-accent); }

/* ----- copilot (right) ----- */
.ws-copilot { width: var(--ws-side-w); flex-shrink: 0; display: flex; flex-direction: column; background: var(--hp-surface); border-left: 1px solid var(--hp-border); overflow: hidden; transition: width var(--hp-dur) var(--hp-ease); }
.ws-copilot.collapsed { width: 0; border-left: none; }
.ws-start { color: var(--hp-accent); }
.ws-search { flex: 0 1 240px; height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: var(--hp-bg); border: 1px solid var(--hp-border); border-radius: 16px; color: var(--hp-text-2); cursor: pointer; font-size: 12px; }
.ws-search:hover { border-color: var(--hp-accent); }
.ws-search svg.lucide { width: 12px; height: 12px; }
.ws-search .grow { flex: 1; }
.ws-clock { text-align: right; line-height: 1.15; color: var(--hp-text-2); font-size: 12px; padding: 0 6px; }
.ws-clock .d { font-size: 10px; }

/* ===== Copilot ===== */
.cop { display: flex; flex-direction: column; height: 100%; background: var(--hp-surface); }
.cop-mode { display: flex; gap: 2px; background: var(--hp-surface-2); border-radius: 12px; padding: 2px; }
.cop-mode button { border: none; background: transparent; color: var(--hp-text-2); font-size: 11px; padding: 3px 11px; border-radius: 10px; cursor: pointer; }
.cop-mode button.active { background: var(--hp-accent); color: var(--hp-accent-fg); }
.cop-ic { width: 26px; height: 26px; border: none; background: transparent; color: var(--hp-text-2); cursor: pointer; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; }
.cop-ic:hover { background: var(--hp-hover); color: var(--hp-text-1); }
.cop-ic svg.lucide { width: 15px; height: 15px; }
.cop-tabs { display: flex; gap: 2px; padding: 6px 10px; border-bottom: 1px solid var(--hp-border-soft); background: var(--hp-surface); }
.cop-tab { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: none; border-radius: 6px; background: transparent; color: var(--hp-text-2); cursor: pointer; font-size: 12px; }
.cop-tab:hover { background: var(--hp-hover); }
.cop-tab.active { background: var(--hp-surface-2); color: var(--hp-text-1); font-weight: 500; }
.cop-tab .em { font-size: 14px; }
.cop-log { flex: 1; min-height: 0; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 20px; background: var(--hp-surface); }
.cop-msg { display: flex; gap: 12px; font-size: 13px; line-height: 1.5; }
.cop-msg .ic { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; background: var(--hp-text-1); color: var(--hp-surface); }
.cop-msg.user .ic { border-radius: 50%; background: var(--hp-surface-2); color: var(--hp-text-1); font-size: 13px; }
.cop-msg .bubble { flex: 1; white-space: pre-wrap; padding-top: 4px; }
.cop-empty { color: var(--hp-text-disabled); text-align: center; margin: auto; font-size: 13px; padding: 0 20px; }
.cop-empty .logo { font-size: 40px; display: block; margin-bottom: 12px; }
.cop-empty .hint { margin-top: 10px; font-size: 12px; }
.cop-reserved { display: none; flex: 1; align-items: center; justify-content: center; }
.cop-soon { text-align: center; color: var(--hp-text-disabled); }
.cop-soon .em { font-size: 42px; display: block; margin-bottom: 10px; }
.cop-soon .hint { font-size: 12px; margin-top: 6px; }
.cop-inwrap { padding: 12px; border-top: 1px solid var(--hp-border-soft); display: flex; flex-direction: column; gap: 8px; }
.cop-pill { display: inline-flex; align-items: center; gap: 4px; width: max-content; max-width: 100%; background: var(--hp-bg); border: 1px solid var(--hp-border); padding: 2px 8px; border-radius: 12px; font-size: 11px; color: var(--hp-text-2); }
.cop-pill:hover { background: var(--hp-hover); color: var(--hp-text-1); cursor: pointer; }
.cop-pill svg.lucide { width: 12px; height: 12px; }
.cop-box { border: 1px solid var(--hp-border); border-radius: 10px; padding: 10px; background: var(--hp-bg); transition: var(--hp-dur); }
.cop-box:focus-within { border-color: var(--hp-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hp-accent) 20%, transparent); background: var(--hp-surface); }
.cop-box textarea { width: 100%; box-sizing: border-box; resize: none; height: 44px; max-height: 140px; border: none; background: transparent; color: var(--hp-text-1); outline: none; font: inherit; font-size: 13px; }
.cop-tools { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.cop-tools-l { display: flex; gap: 2px; }
.cop-send { border: none; border-radius: 6px; background: var(--hp-accent); color: var(--hp-accent-fg); cursor: pointer; height: 30px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 500; }
.cop-send:hover { background: var(--hp-accent-hover, var(--hp-accent)); filter: brightness(1.05); }
.cop-send:disabled { opacity: .5; cursor: default; }
.cop-send svg.lucide { width: 15px; height: 15px; }
.cop-code-wrap { border: 1px solid var(--hp-border-soft); border-radius: 8px; overflow: hidden; margin: 8px 0; }
.cop-code-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px; background: var(--hp-surface-2); font-size: 11px; color: var(--hp-text-2); }
.cop-code-copy { border: none; background: transparent; color: var(--hp-text-2); font-size: 11px; cursor: pointer; padding: 2px 8px; border-radius: 4px; }
.cop-code-copy:hover { background: var(--hp-hover); color: var(--hp-text-1); }
.cop-codeblock { margin: 0; padding: 10px 14px; font-size: 12.5px; overflow-x: auto; background: #1e1e2e; color: #cdd6f4; border-radius: 0; }
.cop-error { padding: 6px 10px; margin-top: 6px; background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.2); border-radius: 6px; color: #dc2626; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.cop-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cop-chips:empty { display: none; }
.cop-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 10px; background: var(--hp-surface-2); border: 1px solid var(--hp-border-soft); border-radius: 12px; font-size: 11px; color: var(--hp-text-2); }
.cop-chip-x { border: none; background: transparent; color: var(--hp-text-disabled); cursor: pointer; padding: 0 2px; font-size: 14px; }
.cop-chip-x:hover { color: var(--hp-text-1); }
.cop-mention-popup { position: absolute; bottom: 100%; left: 10px; background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 8px; box-shadow: var(--hp-shadow-md); padding: 4px; z-index: 100; min-width: 200px; margin-bottom: 4px; }
.cop-mention-item { display: block; width: 100%; text-align: left; padding: 6px 10px; border: none; background: transparent; color: var(--hp-text-1); cursor: pointer; border-radius: 4px; font-size: 12px; }
.cop-mention-item:hover { background: var(--hp-hover); }

/* Diff view */
.diff-view { border: 1px solid var(--hp-border); border-radius: 8px; overflow: hidden; margin: 8px 0; font-family: "Cascadia Code", "Fira Code", monospace; font-size: 12px; }
.diff-header { padding: 6px 12px; background: var(--hp-surface-2); border-bottom: 1px solid var(--hp-border-soft); font-weight: 500; }
.diff-path { color: var(--hp-text-1); }
.diff-body { max-height: 400px; overflow: auto; background: #1e1e2e; }
.diff-line { display: flex; white-space: pre; line-height: 1.5; }
.diff-num { width: 40px; text-align: right; padding-right: 8px; color: rgba(255,255,255,.3); flex-shrink: 0; user-select: none; }
.diff-prefix { width: 16px; text-align: center; flex-shrink: 0; user-select: none; }
.diff-text { flex: 1; padding-right: 10px; }
.diff-same { color: #cdd6f4; }
.diff-add { background: rgba(40,167,69,.15); color: #4ade80; }
.diff-add .diff-prefix { color: #4ade80; }
.diff-remove { background: rgba(220,38,38,.15); color: #f87171; }
.diff-remove .diff-prefix { color: #f87171; }
.diff-footer { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--hp-border-soft); background: var(--hp-surface); }
.diff-btn { padding: 4px 14px; border: 1px solid var(--hp-border); border-radius: 6px; background: var(--hp-surface-2); color: var(--hp-text-1); cursor: pointer; font-size: 12px; }
.diff-btn:hover { background: var(--hp-hover); }
.diff-btn.accept { background: #166534; color: #fff; border-color: #166534; }
.diff-btn.accept:hover { background: #15803d; }
.diff-btn.reject { background: #991b1b; color: #fff; border-color: #991b1b; }
.diff-btn.reject:hover { background: #b91c1c; }

/* ===== directory view ===== */
.dv { display: flex; flex-direction: column; height: 100%; background: var(--hp-surface); outline: none; }
.dv.dv-drop { outline: 2px dashed var(--hp-accent); outline-offset: -6px; background: color-mix(in srgb, var(--hp-accent) 6%, var(--hp-surface)); }
.dv-item.dv-drop-into { outline: 2px solid var(--hp-accent); background: color-mix(in srgb, var(--hp-accent) 16%, transparent); }
.dv-area { flex: 1; min-height: 0; overflow: auto; padding: 12px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; }
.dv-area.list { display: block; padding: 6px; }
.dv-item { width: 104px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 8px; cursor: default; user-select: none; }
.dv-item:hover { background: var(--hp-hover); }
.dv-item.sel { background: color-mix(in srgb, var(--hp-accent) 18%, transparent); outline: 1px solid color-mix(in srgb, var(--hp-accent) 40%, transparent); }
.dv-em { font-size: 40px; line-height: 1; }
.dv-nm { font-size: 12px; text-align: center; max-width: 96px; line-height: 1.25; max-height: 2.5em; overflow: hidden; }
.dv-area.list .dv-item { width: auto; flex-direction: row; gap: 10px; padding: 6px 10px; }
.dv-area.list .dv-em { font-size: 18px; }
.dv-area.list .dv-nm { text-align: left; max-width: none; flex: 1; }
.dv-area.list .dv-meta { color: var(--hp-text-2); font-size: 12px; }
.dv-area.dv-detail { display: block; padding: 6px; }
.dv-detail .dv-detail-hdr { display: flex; gap: 4px; padding: 4px 10px; font-size: 11px; font-weight: 600; color: var(--hp-text-2); border-bottom: 1px solid var(--hp-border-soft); }
.dv-detail .dv-dh-name { flex: 2; }
.dv-detail .dv-dh-col { flex: 1; text-align: right; }
.dv-detail .dv-item { width: auto; flex-direction: row; gap: 8px; padding: 4px 10px; border-radius: 4px; }
.dv-detail .dv-em { font-size: 16px; }
.dv-detail .dv-nm { text-align: left; max-width: none; flex: 2; }
.dv-detail .dv-meta { flex: 1; text-align: right; color: var(--hp-text-2); font-size: 12px; }
.dv-area.dv-tile { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; align-content: flex-start; }
.dv-tile .dv-item { width: 140px; flex-direction: row; gap: 8px; padding: 8px 10px; border-radius: 8px; align-items: center; }
.dv-tile .dv-em { font-size: 32px; }
.dv-tile .dv-nm { text-align: left; max-width: 90px; flex: 1; font-size: 12px; }
.dv-area.dv-grid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding: 12px; }
.dv-empty { width: 100%; text-align: center; color: var(--hp-text-disabled); margin-top: 16%; font-size: 40px; }
.dv-empty div { font-size: 13px; margin-top: 8px; }
.dv-status { flex-shrink: 0; padding: 4px 12px; border-top: 1px solid var(--hp-border-soft); color: var(--hp-text-2); font-size: 12px; }
/* dv-ctx: 已统一至 desktop/context-menu.js + desktop/menu.css（.ctx-pop） */

/* simple text editor */
.ed { display: flex; flex-direction: column; height: 100%; background: var(--hp-surface); }
.ed-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--hp-border-soft); font-size: 12px; color: var(--hp-text-2); }
.ed-bar .grow { flex: 1; }
.ed-save { border: none; background: transparent; color: var(--hp-text-2); cursor: pointer; border-radius: 5px; padding: 3px 6px; display: inline-flex; gap: 5px; align-items: center; }
.ed-save:hover { background: var(--hp-hover); color: var(--hp-text-1); }
.ed-save svg.lucide { width: 14px; height: 14px; }
.ed textarea { flex: 1; min-height: 0; border: none; outline: none; resize: none; padding: 16px 20px; font: 13px/1.7 ui-monospace, "Cascadia Code", Consolas, monospace; background: var(--hp-surface); color: var(--hp-text-1); }
/* Notepad（文件/编辑/查看菜单栏 + 查找替换 + 状态栏） */
.ed-menubar { border-bottom: 1px solid var(--hp-border-soft); }
.ed-menubar .grow { flex: 1; }
.ed-menubar .ed-title { font-size: 12px; color: var(--hp-text-2); padding-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.ed-findbar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--hp-border-soft); background: var(--hp-surface-2); }
.ed-findbar input { flex: 0 1 200px; min-width: 90px; height: 26px; padding: 0 8px; border-radius: 5px; border: 1px solid var(--hp-border); background: var(--hp-surface); color: var(--hp-text-1); font-size: 12px; outline: none; }
.ed-findbar input:focus { border-color: var(--hp-accent); }
.ed-findbar:not(.with-replace) .ed-rep-in, .ed-findbar:not(.with-replace) .rep, .ed-findbar:not(.with-replace) .repall { display: none; }
.ed-findbar .ed-fb { border: none; background: transparent; color: var(--hp-text-2); cursor: pointer; border-radius: 5px; padding: 4px 8px; font-size: 12px; }
.ed-findbar .ed-fb:hover { background: var(--hp-hover); color: var(--hp-text-1); }
.ed-findbar .ed-find-n { font-size: 11px; color: var(--hp-text-2); margin-left: auto; }
.ed-status { display: flex; align-items: center; gap: 2px; padding: 2px 10px; border-top: 1px solid var(--hp-border-soft); font-size: 11.5px; color: var(--hp-text-2); user-select: none; }
.ed-status .grow { flex: 1; }
.ed-status .ed-st-cell { padding: 2px 8px; border-radius: 4px; white-space: nowrap; }

/* ===== Settings ===== */
.set { height: 100%; overflow: hidden; background: var(--hp-bg); box-sizing: border-box; }
.set-layout { display: flex; height: 100%; }
.set-nav { width: 220px; flex-shrink: 0; overflow-y: auto; background: var(--hp-surface); border-right: 1px solid var(--hp-border-soft); padding: 8px 0; }
.set-nav-header { display: flex; align-items: center; gap: 8px; padding: 16px 16px 12px; font-size: 18px; font-weight: 700; color: var(--hp-text-1); }
.set-nav-header svg.lucide { width: 20px; height: 20px; }
.set-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; margin: 1px 6px; border-radius: 6px; font-size: 13px; color: var(--hp-text-2); cursor: pointer; text-decoration: none; }
.set-nav-item:hover { background: var(--hp-hover); color: var(--hp-text-1); }
.set-nav-item.active { background: color-mix(in srgb, var(--hp-accent) 14%, transparent); color: var(--hp-accent); font-weight: 500; }
.set-nav-item svg.lucide { width: 16px; height: 16px; flex-shrink: 0; }
.set-content { flex: 1; overflow-y: auto; padding: 24px 32px; }
.set-heading { font-size: 22px; font-weight: 700; margin: 0 0 18px; color: var(--hp-text-1); }
.set-wrap { max-width: 760px; margin: 0 auto; }
.set-title { font-size: 22px; font-weight: 700; margin: 0 0 18px; }
.set-card { background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 12px; margin-bottom: 18px; overflow: hidden; }
.set-card-title { padding: 12px 16px 8px; font-size: 13px; font-weight: 600; color: var(--hp-text-2); }
.set-cardhead { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--hp-text-2); border-bottom: 1px solid var(--hp-border-soft); }
.set-cardhead .em { font-size: 15px; }
.set-val b { font-weight: 600; }
@media (max-width: 640px) {
  .set-layout { position: relative; }
  .set-nav { width: 100%; position: absolute; inset: 0; z-index: 2; overflow-y: auto; }
  .set-content { display: none; position: absolute; inset: 0; overflow-y: auto; padding: 16px; }
  .set-layout.section-open .set-nav { display: none; }
  .set-layout.section-open .set-content { display: block; }
}
.set-back-btn { display: flex; align-items: center; gap: 6px; border: none; background: transparent; color: var(--hp-text-2); cursor: pointer; padding: 6px 8px; border-radius: 6px; font-size: 13px; margin-bottom: 8px; }
.set-back-btn:hover { background: var(--hp-hover); color: var(--hp-text-1); }
.set-back-btn svg.lucide { width: 14px; height: 14px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border-bottom: 1px solid var(--hp-border-soft); }
.set-row:last-child { border-bottom: none; }
.set-row:hover { background: var(--hp-hover); }
.set-rl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-rl .lbl { font-size: 13px; }
.set-rl .desc { font-size: 11px; color: var(--hp-text-2); }
.set-sub { padding: 10px 16px 2px; font-size: 11px; color: var(--hp-text-2); text-transform: uppercase; letter-spacing: .04em; }
.set-seg { display: inline-flex; background: var(--hp-surface-2); border-radius: 8px; padding: 2px; gap: 2px; flex-shrink: 0; }
.set-seg button { border: none; background: transparent; color: var(--hp-text-2); padding: 5px 14px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12px; white-space: nowrap; }
.set-seg button.on { background: var(--hp-surface); color: var(--hp-text-1); box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 500; }
.set-toggle { width: 42px; height: 24px; border-radius: 12px; background: var(--hp-border); position: relative; cursor: pointer; transition: background .2s; border: none; flex-shrink: 0; }
.set-toggle.on { background: var(--hp-accent); }
.set-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.set-toggle.on::after { left: 20px; }
.set-stepper { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.set-stepper button { width: 28px; height: 28px; border: 1px solid var(--hp-border); background: var(--hp-surface); border-radius: 7px; cursor: pointer; font-size: 15px; line-height: 1; color: var(--hp-text-1); }
.set-stepper button:hover { background: var(--hp-hover); }
.set-stepper .v { min-width: 22px; text-align: center; font-size: 13px; }
.set-btn { padding: 6px 14px; border: 1px solid var(--hp-border); border-radius: 7px; background: var(--hp-surface); cursor: pointer; font: inherit; font-size: 12px; color: var(--hp-text-1); flex-shrink: 0; }
.set-btn:hover { background: var(--hp-hover); }
.set-btn.primary { background: var(--hp-accent); color: var(--hp-accent-fg); border-color: transparent; }
.set-mono { background: var(--hp-surface-2); margin: 0 16px 14px; padding: 10px 12px; border-radius: 8px; font: 12px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace; white-space: pre; overflow: auto; color: var(--hp-text-2); }

/* ===== native apps ===== */
.clock { height: 100%; display: flex; flex-direction: column; background: var(--hp-surface); }
.clock-tabs, .tm-tabs { display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--hp-border-soft); flex-shrink: 0; }
.clock-tab, .tm-tab { padding: 6px 14px; border-radius: 7px; border: none; background: transparent; color: var(--hp-text-2); cursor: pointer; font-size: 13px; }
.clock-tab.on, .tm-tab.on { background: var(--hp-surface-2); color: var(--hp-text-1); font-weight: 600; }
.clock-body { flex: 1; overflow: auto; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.clock-big { font-size: 46px; font-weight: 300; font-variant-numeric: tabular-nums; color: var(--hp-text-1); }
.clock-zones { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 2px; }
.clock-zone { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 7px; }
.clock-zone:hover { background: var(--hp-surface-2); }
.clock-zone .z-name { color: var(--hp-text-2); }
.clock-zone .z-time { font-variant-numeric: tabular-nums; color: var(--hp-text-1); }
.clock-ctrls { display: flex; gap: 10px; }
.clock-btn { padding: 8px 20px; border-radius: 8px; border: 1px solid var(--hp-border-soft); background: var(--hp-surface-2); color: var(--hp-text-1); cursor: pointer; }
.clock-btn.primary { background: var(--hp-accent); color: #fff; border-color: transparent; }
.clock-laps { width: 100%; max-width: 420px; }
.clock-lap { padding: 6px 12px; border-bottom: 1px solid var(--hp-border-soft); color: var(--hp-text-2); font-variant-numeric: tabular-nums; }
.clock-timer-set select { font-size: 18px; padding: 4px; border-radius: 6px; }
.cam { height: 100%; display: flex; flex-direction: column; background: #111; }
.cam-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cam-stage video { max-width: 100%; max-height: 100%; }
.cam-bar { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 10px; background: #1b1b1b; }
.cam-shot { padding: 8px 18px; border-radius: 20px; border: none; background: var(--hp-accent); color: #fff; cursor: pointer; font-size: 14px; }
.cam-btn { padding: 8px 14px; border-radius: 20px; border: 1px solid #444; background: #2a2a2a; color: #eee; cursor: pointer; }
.cam-info { color: #bbb; font-size: 12px; margin-left: auto; }
.cam-shelf { flex-shrink: 0; display: flex; gap: 6px; padding: 8px; background: #161616; overflow-x: auto; }
.cam-thumb { width: 54px; height: 54px; border-radius: 6px; overflow: hidden; flex-shrink: 0; cursor: pointer; border: 1px solid #333; }
.cam-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tm { height: 100%; display: flex; flex-direction: column; background: var(--hp-surface); }
.tm-body { flex: 1; overflow: auto; padding: 10px 12px; }
.tm-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; font-size: 13px; color: var(--hp-text-1); }
.tm-row:hover { background: var(--hp-surface-2); }
.tm-head { font-weight: 600; color: var(--hp-text-2); border-bottom: 1px solid var(--hp-border-soft); position: sticky; top: 0; background: var(--hp-surface); }
.tm-row.denied { color: var(--hp-danger, #d33); }
.tm-row .c-pid { width: 48px; font-variant-numeric: tabular-nums; }
.tm-row .c-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-row .c-rt { width: 84px; color: var(--hp-text-2); }
.tm-row .c-state { width: 70px; color: var(--hp-text-2); }
.tm-row .c-up { width: 64px; color: var(--hp-text-2); font-variant-numeric: tabular-nums; }
.tm-kill { padding: 3px 12px; border-radius: 6px; border: 1px solid var(--hp-border-soft); background: var(--hp-surface-2); color: var(--hp-text-1); cursor: pointer; font-size: 12px; }
.tm-empty { color: var(--hp-text-disabled); text-align: center; padding: 28px; font-size: 13px; }
.tm-sys { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tm-card { background: var(--hp-surface-2); border-radius: 10px; padding: 12px 14px; }
.tm-cardh { font-weight: 600; margin-bottom: 8px; color: var(--hp-text-1); }
.tm-kv { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; }
.tm-kv .k { color: var(--hp-text-2); }
.tm-mono { font-family: ui-monospace, monospace; font-size: 12px; white-space: pre; color: var(--hp-text-2); margin: 0; }
.br { height: 100%; display: flex; flex-direction: row; background: var(--hp-surface); }
.br-sidebar { width: 200px; flex-shrink: 0; border-right: 1px solid var(--hp-border-soft); display: flex; flex-direction: column; overflow-y: auto; background: var(--hp-surface); padding: 4px 0; }
.br-side-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px 6px; font-size: 12px; font-weight: 600; color: var(--hp-text-1); }
.br-side-head svg.lucide { width: 14px; height: 14px; }
.br-side-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12px; color: var(--hp-text-2); cursor: pointer; border-radius: 4px; margin: 0 4px; text-decoration: none; }
.br-side-item:hover { background: var(--hp-hover); color: var(--hp-text-1); }
.br-side-item.active { background: color-mix(in srgb, var(--hp-accent) 14%, transparent); color: var(--hp-accent); }
.br-side-item svg.lucide { width: 14px; height: 14px; flex-shrink: 0; }
.br-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.br-tabs { flex-shrink: 0; display: flex; align-items: center; gap: 0; padding: 0 4px; height: 36px; background: var(--hp-surface-2); border-bottom: 1px solid var(--hp-border-soft); overflow-x: auto; scrollbar-width: none; }
.br-tabs::-webkit-scrollbar { display: none; }
.br-tab { display: flex; align-items: center; gap: 4px; height: 30px; max-width: 180px; padding: 0 4px 0 10px; border-radius: 8px 8px 0 0; cursor: pointer; white-space: nowrap; font-size: 12px; color: var(--hp-text-2); background: transparent; user-select: none; flex-shrink: 0; }
.br-tab:hover { background: var(--hp-surface); }
.br-tab.active { background: var(--hp-surface); color: var(--hp-text-1); font-weight: 500; border-bottom: 2px solid var(--hp-accent); }
.br-tab-label { overflow: hidden; text-overflow: ellipsis; max-width: 130px; display: inline-flex; align-items: center; gap: 4px; }
.br-tab-label svg.lucide { width: 12px; height: 12px; flex-shrink: 0; }
.br-tab-x { width: 20px; height: 20px; border: none; background: transparent; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; opacity: .5; outline: none; box-shadow: none; }
.br-tab-x:hover { opacity: 1; background: var(--hp-surface-2); }
.br-tab-x svg.lucide { width: 12px; height: 12px; }
.br-tab-new { width: 28px; height: 28px; border: none; background: transparent; color: var(--hp-text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; flex-shrink: 0; }
.br-tab-new:hover { background: var(--hp-surface); color: var(--hp-text-1); }
.br-tab-new svg.lucide { width: 14px; height: 14px; }
.br-win-tabs { height: 100%; border-bottom: none; padding: 0 2px; background: transparent; }
.br-win-tabs .br-tab { height: 26px; max-width: 140px; border-radius: 6px 6px 0 0; font-size: 11px; padding: 0 3px 0 8px; }
.br-win-tabs .br-tab-new { width: 24px; height: 24px; }
.br-win-tabs .br-tab-new svg.lucide { width: 12px; height: 12px; }
.br-win-tabs .br-tab-x { width: 16px; height: 16px; }
.br-win-tabs .br-tab-x svg.lucide { width: 10px; height: 10px; }
.br-bar { flex-shrink: 0; display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-bottom: 1px solid var(--hp-border-soft); }
.br-nav { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 6px; background: transparent; color: var(--hp-text-1); cursor: pointer; flex-shrink: 0; }
.br-nav:hover { background: var(--hp-surface-2); }
.br-nav:disabled { opacity: .3; cursor: default; }
.br-nav svg.lucide { width: 15px; height: 15px; }
.br-up { display: none; }
.br-bmark.bookmarked { color: #f5a623; }
.br-addr-wrap { flex: 1; display: flex; align-items: center; gap: 4px; min-width: 0; }
.br-engine-btn { width: 24px; height: 24px; border: none; border-radius: 4px; background: color-mix(in srgb, var(--hp-accent) 12%, transparent); color: var(--hp-accent); cursor: pointer; font-size: 11px; font-weight: 700; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.br-engine-btn:hover { background: color-mix(in srgb, var(--hp-accent) 22%, transparent); }
.br-addr { flex: 1; height: 28px; border: 1px solid var(--hp-border-soft); border-radius: 14px; padding: 0 12px; background: var(--hp-surface-2); color: var(--hp-text-1); font-size: 12.5px; outline: none; min-width: 0; }
.br-addr:focus { border-color: var(--hp-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hp-accent) 16%, transparent); }
.br-search-sm { width: 120px; height: 28px; border: 1px solid var(--hp-border-soft); border-radius: 14px; padding: 0 10px; background: var(--hp-surface-2); color: var(--hp-text-1); font-size: 12px; outline: none; flex-shrink: 0; }
.br-search-sm:focus { border-color: var(--hp-accent); }
.br-bmbar { flex-shrink: 0; display: flex; align-items: center; gap: 2px; padding: 2px 8px; border-bottom: 1px solid var(--hp-border-soft); overflow-x: auto; scrollbar-width: none; }
.br-bmbar::-webkit-scrollbar { display: none; }
.br-bm { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: none; border-radius: 4px; background: transparent; color: var(--hp-text-2); cursor: pointer; font-size: 11.5px; white-space: nowrap; }
.br-bm:hover { background: var(--hp-surface-2); color: var(--hp-text-1); }
.br-bm svg.lucide { width: 12px; height: 12px; }
.br-views { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.br-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: none; background: #fff; }
.br-vfs-view { position: absolute; inset: 0; overflow-y: auto; padding: 8px; background: var(--hp-bg); }
.br-dir-list { display: flex; flex-direction: column; }
.br-dir-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--hp-text-1); }
.br-dir-item:hover { background: var(--hp-hover); }
.br-dir-item svg.lucide { width: 16px; height: 16px; color: var(--hp-text-2); flex-shrink: 0; }
.br-dir-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-dir-size { font-size: 11px; color: var(--hp-text-2); flex-shrink: 0; }
.br-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px; color: var(--hp-text-2); }
.br-empty svg.lucide { width: 32px; height: 32px; opacity: .4; }
.br-error { padding: 20px; color: var(--hp-text-2); }
.br-text-preview { padding: 12px; font-family: ui-monospace, monospace; font-size: 13px; white-space: pre-wrap; word-break: break-all; color: var(--hp-text-1); background: var(--hp-bg); margin: 0; }
.br-preview { display: flex; align-items: center; justify-content: center; height: 100%; padding: 12px; }
.br-preview img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
@media (max-width: 640px) {
  .br-sidebar { display: none; }
  .br-search-sm { width: 80px; }
}

/* Code IDE */
.ide { height: 100%; display: flex; background: #1e1e1e; color: #d4d4d4; min-height: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
:root:not([data-theme="dark"]) .ide { background: #f8f9fb; color: #24292f; }
.ide-tree { width: 240px; flex-shrink: 0; overflow: auto; border-right: 1px solid rgba(128,128,128,.15); padding: 4px 0; background: #252526; font-size: 13px; }
:root:not([data-theme="dark"]) .ide-tree { background: #f3f3f3; }
.ide-tree .tree-row { color: #ccc; }
:root:not([data-theme="dark"]) .ide-tree .tree-row { color: #333; }
.ide-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ide-tabs { flex-shrink: 0; display: flex; align-items: center; gap: 0; height: 36px; background: #2d2d2d; border-bottom: 1px solid #1e1e1e; overflow-x: auto; }
:root:not([data-theme="dark"]) .ide-tabs { background: #eaeaea; border-bottom-color: #ddd; }
.ide-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 12px; color: #999; cursor: pointer; white-space: nowrap; border-right: 1px solid rgba(128,128,128,.12); height: 100%; box-sizing: border-box; transition: background .1s; }
.ide-tab:hover { background: rgba(255,255,255,.06); }
:root:not([data-theme="dark"]) .ide-tab:hover { background: rgba(0,0,0,.04); }
.ide-tab.on { color: #fff; background: #1e1e1e; border-bottom: 2px solid var(--hp-accent, #0078d4); }
:root:not([data-theme="dark"]) .ide-tab.on { color: #1e1e1e; background: #fff; }
.ide-tab .nm { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.ide-tab .x { opacity: .4; margin-left: 4px; font-size: 14px; line-height: 1; cursor: pointer; } .ide-tab .x:hover { opacity: 1; color: #fff; }
:root:not([data-theme="dark"]) .ide-tab .x:hover { color: #000; }
.ide-tabspacer { flex: 1; }
.ide-rtsel { font-size: 11px; border-radius: 4px; border: 1px solid rgba(128,128,128,.3); background: transparent; color: inherit; padding: 3px 6px; margin-right: 4px; }
.ide-run { padding: 5px 14px; border-radius: 4px; border: none; background: #28a745; color: #fff; cursor: pointer; font-size: 12px; font-weight: 500; letter-spacing: .02em; margin-right: 4px; transition: background .12s; }
.ide-run:hover { background: #2ea44f; }
.ide-run:disabled { background: #d73a49; cursor: default; }
.ide-savebtn { border: none; background: transparent; cursor: pointer; font-size: 14px; opacity: .7; color: inherit; } .ide-savebtn:hover { opacity: 1; }
.ide-editor { flex: 1; min-height: 0; position: relative; background: #1e1e1e; }
:root:not([data-theme="dark"]) .ide-editor { background: #fff; }
.ide-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #888; font-size: 13px; }
.ide-panel { height: 180px; flex-shrink: 0; border-top: 1px solid rgba(128,128,128,.2); display: flex; flex-direction: column; background: #1e1e1e; }
:root:not([data-theme="dark"]) .ide-panel { background: #f8f9fb; }
.ide-paneltabs { flex-shrink: 0; display: flex; align-items: center; gap: 0; height: 30px; background: #252526; border-bottom: 1px solid rgba(128,128,128,.12); padding: 0 6px; }
:root:not([data-theme="dark"]) .ide-paneltabs { background: #f0f0f0; }
.ide-ptab { padding: 4px 12px; border: none; background: transparent; color: #999; cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid transparent; }
.ide-ptab.on { color: #e0e0e0; border-bottom-color: var(--hp-accent, #0078d4); }
:root:not([data-theme="dark"]) .ide-ptab.on { color: #1e1e1e; }
.ide-ptab.ide-clr { margin-left: auto; text-transform: none; font-size: 12px; }
.ide-output { flex: 1; overflow: auto; padding: 10px 14px; font-family: "JetBrains Mono", "Fira Code", ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; line-height: 1.6; white-space: pre-wrap; color: #d4d4d4; }
:root:not([data-theme="dark"]) .ide-output { color: #24292f; }
.ide-output .err { color: #f85149; }
.ide-output .ok { color: #3fb950; }
.ide-output .cmd { color: #58a6ff; font-weight: 500; }
.ide-term { flex: 1; min-height: 0; display: none; }
.ide-status { flex-shrink: 0; height: 22px; display: flex; align-items: center; padding: 0 12px; background: #007acc; color: #fff; font-size: 11px; font-family: -apple-system, sans-serif; }
:root:not([data-theme="dark"]) .ide-status { background: #007acc; }
.viewer { height: 100%; display: flex; align-items: center; justify-content: center; background: var(--hp-surface-2); overflow: auto; }
.viewer-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer-pdf { width: 100%; height: 100%; border: none; background: #fff; }
.viewer-media { max-width: 100%; max-height: 100%; }
.viewer-audio { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--hp-text-1); }
.viewer-audio .ico { font-size: 56px; }
.viewer-audio .nm { font-size: 13px; color: var(--hp-text-2); }
.viewer-empty { color: var(--hp-text-disabled); text-align: center; font-size: 38px; }
.viewer-empty div { font-size: 13px; margin-top: 8px; }

/* ===== platform ===== */
.ws, .ws-bar-bottom, .ws-mob-nav { padding-bottom: env(safe-area-inset-bottom, 0); }
.ws-bar-top { padding-top: env(safe-area-inset-top, 0); }
* { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
@media (pointer: coarse) {
  button, [role="menuitem"], .ctx-item, .dv-item { min-height: 44px; min-width: 44px; }
}
@media (min-width: 769px) and (max-width: 1200px) {
  .ws-side { width: 220px; }
  .ws-copilot { width: 280px; }
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --hp-bg: #1b1a19; --hp-surface: #252423; --hp-surface-2: #2f2e2d;
    --hp-text-1: #f3f2f1; --hp-text-2: #c8c6c4; --hp-border: #3b3a39;
    --hp-border-soft: #323130; --hp-text-disabled: #797775;
    --hp-hover: rgba(255,255,255,.06); --hp-press: rgba(255,255,255,.10);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
@media (prefers-contrast: more) {
  :root { --hp-border: #000; --hp-border-soft: #555; }
  .ws-win { border-width: 2px; }
  .ctx-item:focus, button:focus-visible { outline: 3px solid var(--hp-accent); outline-offset: 2px; }
}
/* 键盘焦点高亮框：默认关闭，设置 → 无障碍 可开启（html[data-focus-ring]）。
   高对比度环境（prefers-contrast: more）始终保留。 */
html[data-focus-ring] button:focus-visible, html[data-focus-ring] a:focus-visible,
html[data-focus-ring] input:focus-visible, html[data-focus-ring] textarea:focus-visible,
html[data-focus-ring] select:focus-visible, html[data-focus-ring] [tabindex]:focus-visible {
  outline: 2px solid var(--hp-accent); outline-offset: 2px;
}
html:not([data-focus-ring]) button:focus-visible, html:not([data-focus-ring]) a:focus-visible,
html:not([data-focus-ring]) [tabindex]:focus-visible,
html:not([data-focus-ring]) .ctx-item:focus-visible,
html:not([data-focus-ring]) .ctx-acts .abtn:focus-visible { outline: none; box-shadow: none; }
button:focus:not(:focus-visible) { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
:root[data-density="compact"] { --hp-row-h: 24px; }
:root[data-density="compact"] .ws-bar { height: 32px; }
:root[data-density="compact"] .trow { height: 22px; }
:root[data-density="compact"] .set-row { padding: 9px 14px; }