/* OS boot/splash chrome (minimal, P0). Themed via --hp-* tokens. */
html, body { height: 100%; margin: 0; }
body { background: var(--hp-bg); color: var(--hp-text-1); font-family: "Segoe UI", system-ui, sans-serif; overflow: hidden; }

.os-root { height: 100vh; display: flex; flex-direction: column; }

.os-splash { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--hp-bg); z-index: 9999; transition: opacity .5s ease, transform .5s ease, filter .5s ease; }
.os-splash.hide { opacity: 0; transform: scale(1.04); filter: blur(6px); pointer-events: none; }
/* 品牌字：入场上浮 + 渐变扫光（纯 CSS，仅 transform/opacity/background-position，
   不占 JS/RAF、不阻塞启动）。桌面就绪即整块淡出缩放虚化，在桌面上短暂暂留后消失。 */
.os-splash-logo {
  font-size: 46px; font-weight: 300; letter-spacing: .34em; text-indent: .34em;
  background: linear-gradient(100deg, var(--hp-accent) 0%, var(--hp-accent) 32%, #fff 50%, var(--hp-accent) 68%, var(--hp-accent) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: os-splash-in .6s cubic-bezier(.2,.7,.2,1) both, os-splash-shimmer 2.4s ease-in-out .3s infinite;
}
.os-splash-sub { color: var(--hp-text-2); font-size: 13px; letter-spacing: .04em; animation: os-splash-in .6s ease .12s both; }
.os-splash-bar { width: 132px; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(128,128,128,.22); animation: os-splash-in .6s ease .2s both; }
.os-splash-bar > span { display: block; width: 38%; height: 100%; border-radius: 3px; background: var(--hp-accent); animation: os-splash-slide 1.15s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes os-splash-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes os-splash-shimmer { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
@keyframes os-splash-slide { 0% { transform: translateX(-130%); } 100% { transform: translateX(330%); } }
@media (prefers-reduced-motion: reduce) {
  .os-splash-logo, .os-splash-sub, .os-splash-bar, .os-splash-bar > span { animation: none; }
  .os-splash-logo { -webkit-text-fill-color: var(--hp-accent); color: var(--hp-accent); }
}

/* P0 minimal desktop chrome (replaced by full workbench in P2). */
.osd-titlebar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; background: var(--hp-surface-2); border-bottom: 1px solid var(--hp-border); flex-shrink: 0; -webkit-app-region: drag; }
.osd-titlebar .osd-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.osd-titlebar .osd-brand i { width: 18px; height: 18px; color: var(--hp-accent); }
.osd-grow { flex: 1; }
.osd-tbtn { -webkit-app-region: no-drag; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--hp-border); border-radius: var(--hp-radius-sm); background: var(--hp-surface); color: var(--hp-text-1); cursor: pointer; font: inherit; font-size: 12px; }
.osd-tbtn:hover { background: var(--hp-hover); }
.osd-tbtn i { width: 15px; height: 15px; }

.osd-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* The mounted app (e.g. .xpl) adds its own class + children to this element,
   so it must NOT force flex:1 on its children — it just fills the stage. */
.osd-app-host { flex: 1; min-width: 0; min-height: 0; }
.osd-term-panel { height: 280px; min-height: 0; border-top: 1px solid var(--hp-border); display: none; }
.osd-term-panel.show { display: block; }