/* ============================================================
   WZYLinuX — 桌面环境样式（Desktop Environment）
   完全基于 wzylinux-design-tokens.css 的令牌实现
   作者：WorkBuddy
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--wzy-font-sans);
  color: var(--wzy-text-hi);
  background: var(--wzy-canvas);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#os { position: fixed; inset: 0; overflow: hidden; }
.screen { position: absolute; inset: 0; display: flex; }
.screen.hidden { display: none; }

/* —— 通用玻璃面板 —— */
.glass {
  background: var(--wzy-glass);
  border: 1px solid var(--wzy-border-strong);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* =========================================================
   1) 开机 / BIOS 启动屏
   ========================================================= */
#screen-boot {
  background: #05070F;
  color: var(--wzy-green);
  font-family: var(--wzy-font-mono);
  flex-direction: column;
  padding: 48px 56px;
  overflow: hidden;
}
#boot-brand {
  position: absolute; top: 40px; left: 56px;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--wzy-font-display);
  color: var(--wzy-text-hi); letter-spacing: .5px;
}
#boot-brand .logo {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--wzy-gradient-brand);
  box-shadow: 0 0 24px rgba(91,108,255,.5);
}
#boot-brand b { font-size: 22px; font-weight: 800; }
#boot-log {
  margin-top: 120px; font-size: 14px; line-height: 1.9;
  white-space: pre-wrap; color: var(--wzy-text-mid);
  max-width: 820px;
}
#boot-log .ok { color: var(--wzy-green); }
#boot-log .warn { color: var(--wzy-warning); }
#boot-prompt {
  margin-top: auto; font-size: 15px; color: var(--wzy-text-hi);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.35;} 50%{opacity:1;} }
.boot-bar {
  margin-top: 16px; width: 360px; height: 6px; border-radius: 4px;
  background: rgba(255,255,255,.08); overflow: hidden;
}
.boot-bar > i {
  display: block; height: 100%; width: 0%;
  background: var(--wzy-gradient-brand);
  transition: width .2s linear;
}

/* =========================================================
   2) Plymouth 极光开机动画
   ========================================================= */
#screen-plymouth {
  background: var(--wzy-canvas);
  align-items: center; justify-content: center; flex-direction: column;
  gap: 28px;
}
.plymouth-logo {
  width: 92px; height: 92px; border-radius: 24px;
  background: var(--wzy-gradient-brand);
  box-shadow: 0 0 60px rgba(91,108,255,.6);
  animation: float 3s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
.plymouth-name {
  font-family: var(--wzy-font-display); font-size: 30px; font-weight: 800;
  background: var(--wzy-gradient-brand); -webkit-background-clip: text;
  background-clip: text; color: transparent; letter-spacing: 1px;
}
.plymouth-spin {
  width: 220px; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,.08); overflow: hidden;
}
.plymouth-spin > i { display:block; height:100%; width:40%;
  background: var(--wzy-gradient-brand); border-radius: 4px;
  animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { 0%{transform:translateX(-100%);} 100%{transform:translateX(350%);} }

/* =========================================================
   3) 安装程序（Calamares 风格）
   ========================================================= */
#screen-install { background: var(--wzy-canvas); align-items: center; justify-content: center; }
.install-shell {
  width: min(960px, 94vw); height: min(620px, 90vh);
  border-radius: var(--wzy-radius-xl);
  display: grid; grid-template-columns: 280px 1fr; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.install-side {
  padding: 32px 28px; background: var(--wzy-surface-raised);
  border-right: 1px solid var(--wzy-border);
  display: flex; flex-direction: column; gap: 6px;
}
.install-side h1 {
  font-family: var(--wzy-font-display); font-size: 22px; margin: 0 0 22px;
}
.step { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: var(--wzy-radius-md); color: var(--wzy-text-low);
  font-size: 14px; font-weight: 600; }
.step .num {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 13px;
  background: rgba(255,255,255,.08); color: var(--wzy-text-mid);
}
.step.active { background: var(--wzy-glass); color: var(--wzy-text-hi); }
.step.active .num { background: var(--wzy-gradient-brand); color: #fff; }
.step.done .num { background: var(--wzy-green); color: #0A0D1A; }
.install-main { padding: 34px 38px; overflow-y: auto; }
.install-main h2 { font-family: var(--wzy-font-display); font-size: 26px; margin: 0 0 6px; }
.install-main p.lead { color: var(--wzy-text-mid); margin: 0 0 26px; font-size: 14px; }
.field { margin-bottom: 18px; }
.field label { display:block; font-size: 13px; color: var(--wzy-text-mid);
  margin-bottom: 8px; font-weight: 600; }
.disk-row { display:flex; align-items:center; gap:14px; padding:16px;
  border-radius: var(--wzy-radius-md); border:1px solid var(--wzy-border-strong);
  background: var(--wzy-glass); cursor:pointer; }
.disk-row.sel { border-color: var(--wzy-primary); box-shadow:0 0 0 2px rgba(91,108,255,.35); }
.disk-row .ico { width:42px; height:42px; border-radius:10px;
  background: var(--wzy-gradient-brand); display:grid; place-items:center; color:#fff; font-size:20px;}
.disk-row .meta b { font-size:15px; } .disk-row .meta span { color: var(--wzy-text-low); font-size:12px; }
.install-actions { display:flex; justify-content:flex-end; gap:12px; margin-top: 28px; }
.progress-list { list-style:none; padding:0; margin: 18px 0; }
.progress-list li { display:flex; align-items:center; gap:10px; padding:9px 0;
  color: var(--wzy-text-mid); font-size:14px; }
.progress-list li .tick { width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center; font-size:12px; background: rgba(255,255,255,.08); color: var(--wzy-text-low);}
.progress-list li.done { color: var(--wzy-text-hi); }
.progress-list li.done .tick { background: var(--wzy-green); color:#0A0D1A; }
.progress-list li.doing .tick { background: var(--wzy-primary); color:#fff; }

/* =========================================================
   4) 登录屏
   ========================================================= */
#screen-login { background: var(--wzy-canvas); align-items:center; justify-content:center; }
.login-card { width: 360px; padding: 36px 32px; border-radius: var(--wzy-radius-xl);
  text-align:center; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.login-avatar { width:84px; height:84px; border-radius:50%; margin:0 auto 16px;
  background: var(--wzy-gradient-brand); display:grid; place-items:center;
  font-family: var(--wzy-font-display); font-size:30px; font-weight:800; color:#fff;
  box-shadow: 0 0 30px rgba(168,85,247,.45); }
.login-card h2 { font-family: var(--wzy-font-display); margin:0 0 4px; font-size:22px; }
.login-card .uname { color: var(--wzy-text-mid); font-size:14px; margin-bottom:22px; }
.shake { animation: shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0);} 20%,60%{transform:translateX(-9px);} 40%,80%{transform:translateX(9px);} }
.login-hint { color: var(--wzy-danger); font-size:13px; min-height:18px; margin-top:10px; }

/* =========================================================
   5) 桌面
   ========================================================= */
#screen-desktop { background: transparent; }
#wallpaper { position:absolute; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(91,108,255,.30), transparent 60%),
    radial-gradient(1000px 700px at 85% 25%, rgba(168,85,247,.28), transparent 60%),
    radial-gradient(900px 700px at 60% 95%, rgba(34,211,238,.22), transparent 60%),
    var(--wzy-canvas);
}
#wallpaper::after { content:""; position:absolute; inset:0;
  background: radial-gradient(60% 50% at 50% 40%, transparent, rgba(5,7,15,.55)); }
.aurora-blob { position:absolute; border-radius:50%; filter: blur(70px); opacity:.5;
  animation: drift 18s ease-in-out infinite; }
@keyframes drift { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(40px,-30px) scale(1.12);} 100%{transform:translate(0,0) scale(1);} }

/* 顶栏 */
#topbar { position:absolute; top:0; left:0; right:0; height:44px; z-index:50;
  display:flex; align-items:center; gap:14px; padding:0 14px;
  background: rgba(10,13,26,.35); border-bottom:1px solid var(--wzy-border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
#topbar .app-menu { display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:6px 12px; border-radius: var(--wzy-radius-md); }
#topbar .app-menu:hover { background: var(--wzy-glass); }
#topbar .app-menu .logo { width:24px; height:24px; border-radius:7px; background: var(--wzy-gradient-brand); }
#topbar .app-menu b { font-family: var(--wzy-font-display); font-size:15px; }
#topbar .center { flex:1; display:flex; justify-content:center; }
#topbar .tray { display:flex; align-items:center; gap:14px; color: var(--wzy-text-mid); font-size:13px; }
#topbar .tray .ic { cursor:pointer; opacity:.85; }
#topbar .clock { font-variant-numeric: tabular-nums; font-weight:600; }

/* Dock */
#dock { position:absolute; left:14px; top:50%; transform:translateY(-50%); z-index:50;
  display:flex; flex-direction:column; gap:10px; padding:12px 10px;
  border-radius: var(--wzy-radius-xl); }
#dock.right { left:auto; right:14px; }
.dock-btn { width:52px; height:52px; border-radius:15px; cursor:pointer; border:0;
  display:grid; place-items:center; font-size:24px; position:relative;
  background: var(--wzy-glass); border:1px solid var(--wzy-border-strong);
  transition: transform .15s ease, filter .15s ease; color: var(--wzy-text-hi); }
.dock-btn:hover { transform: scale(1.08); filter: brightness(1.12); }
.dock-btn .tip { position:absolute; left:60px; white-space:nowrap; padding:5px 11px;
  border-radius:8px; background: var(--wzy-surface-raised); border:1px solid var(--wzy-border);
  font-size:12px; opacity:0; pointer-events:none; transition:opacity .15s; color: var(--wzy-text-hi); }
.dock-btn:hover .tip { opacity:1; }
.dock-btn .dot { position:absolute; bottom:-2px; right:-2px; width:9px; height:9px;
  border-radius:50%; background: var(--wzy-green); border:2px solid var(--wzy-canvas); }

/* 窗口 */
#windows { position:absolute; inset:0; z-index:20; pointer-events:none; }
.win { position:absolute; pointer-events:auto; min-width:320px; min-height:200px;
  border-radius: var(--wzy-radius-lg); overflow:hidden; display:flex; flex-direction:column;
  background: var(--wzy-surface-raised); border:1px solid var(--wzy-border-strong);
  box-shadow: 0 24px 70px rgba(0,0,0,.55); animation: winin .18s ease; }
@keyframes winin { from{opacity:0; transform:scale(.97);} to{opacity:1; transform:scale(1);} }
.win.focused { box-shadow: 0 24px 80px rgba(91,108,255,.35), 0 0 0 1px var(--wzy-primary); }
.win__bar { height:42px; flex:none; display:flex; align-items:center; gap:10px;
  padding:0 14px; cursor:grab; background: var(--wzy-surface-card);
  border-bottom:1px solid var(--wzy-border); user-select:none; }
.win__bar:active { cursor:grabbing; }
.win__title { font-size:13px; font-weight:600; color: var(--wzy-text-hi); flex:1;
  display:flex; align-items:center; gap:8px; }
.win__title .em { font-size:16px; }
.win__ctrl { display:flex; gap:8px; }
.win__ctrl button { width:13px; height:13px; border-radius:50%; border:0; cursor:pointer; padding:0; }
.win__ctrl .c-close { background: var(--wzy-danger); }
.win__ctrl .c-min { background: var(--wzy-warning); }
.win__ctrl .c-max { background: var(--wzy-green); }
.win__body { flex:1; overflow:auto; padding:18px; color: var(--wzy-text-hi); }
.win.maximized { inset:8px !important; width:auto !important; height:auto !important; }

/* 启动器 / 应用菜单 */
#launcher { position:absolute; inset:0; z-index:80; display:none;
  align-items:center; justify-content:center; background: rgba(5,7,15,.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#launcher.show { display:flex; }
.launcher-box { width:min(720px,92vw); max-height:76vh; overflow:auto; padding:26px;
  border-radius: var(--wzy-radius-xl); }
.launcher-box h3 { font-family: var(--wzy-font-display); margin:0 0 16px; }
.launcher-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(118px,1fr)); gap:14px; }
.launcher-app { display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:18px 10px; border-radius: var(--wzy-radius-md); cursor:pointer;
  background: var(--wzy-glass); border:1px solid var(--wzy-border); transition: .15s; }
.launcher-app:hover { background: rgba(255,255,255,.12); transform: translateY(-3px); }
.launcher-app .em { width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  font-size:26px; background: var(--wzy-gradient-brand); }
.launcher-app span { font-size:13px; }

/* =========================================================
   应用内样式
   ========================================================= */
/* Terminal */
.term { height:100%; background:#070A14; border-radius: var(--wzy-radius-md);
  font-family: var(--wzy-font-mono); font-size:13.5px; line-height:1.55; padding:14px;
  color: var(--wzy-green); overflow:auto; }
.term .line { white-space: pre-wrap; word-break: break-word; }
.term .prompt { color: var(--wzy-cyan); }
.term .err { color: var(--wzy-danger); }
.term .hi { color: var(--wzy-text-hi); }
.term-input { display:flex; gap:8px; align-items:center; }
.term-input span { color: var(--wzy-cyan); }
.term-input input { flex:1; background:transparent; border:0; outline:0; color: var(--wzy-green);
  font-family: var(--wzy-font-mono); font-size:13.5px; }

/* Files */
.files { display:flex; height:100%; gap:0; }
.files__side { width:160px; flex:none; border-right:1px solid var(--wzy-border); padding:10px; }
.files__side .item { padding:8px 10px; border-radius:8px; font-size:13px; cursor:pointer; color: var(--wzy-text-mid); }
.files__side .item.active, .files__side .item:hover { background: var(--wzy-glass); color: var(--wzy-text-hi); }
.files__main { flex:1; padding:14px; overflow:auto; }
.files__grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(92px,1fr)); gap:12px; }
.files__file { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px;
  border-radius:10px; cursor:pointer; font-size:12px; text-align:center; }
.files__file:hover { background: var(--wzy-glass); }
.files__file .em { font-size:28px; }

/* Settings */
.set-row { display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 0; border-bottom:1px solid var(--wzy-border); }
.set-row:last-child { border-bottom:0; }
.set-row .lbl b { display:block; font-size:15px; } .set-row .lbl span { color: var(--wzy-text-low); font-size:12px; }
.swatches { display:flex; gap:10px; }
.swatch { width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid transparent; }
.swatch.sel { border-color:#fff; }
.seg { display:flex; gap:6px; }
.seg button { padding:8px 14px; border-radius:10px; border:1px solid var(--wzy-border-strong);
  background: var(--wzy-glass); color: var(--wzy-text-mid); cursor:pointer; font-size:13px; font-weight:600; }
.seg button.sel { background: var(--wzy-primary); color:#fff; }

/* Browser */
.browser { display:flex; flex-direction:column; height:100%; }
.browser__bar { display:flex; gap:8px; padding:8px; border-bottom:1px solid var(--wzy-border); }
.browser__url { flex:1; font-family: var(--wzy-font-mono); font-size:12px; }
.browser iframe { flex:1; border:0; width:100%; background:#fff; border-radius:0 0 var(--wzy-radius-lg) var(--wzy-radius-lg); }

/* Welcome */
.welcome { text-align:center; padding:20px; }
.welcome .big { font-family: var(--wzy-font-display); font-size:40px; font-weight:800;
  background: var(--wzy-gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.welcome .row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:20px; }

/* Tools: timestamp & text */
.tool-grid { display:grid; gap:14px; }
.tool-out { font-family: var(--wzy-font-mono); font-size:13px; background: var(--wzy-glass);
  border:1px solid var(--wzy-border); border-radius:10px; padding:12px; min-height:48px;
  word-break:break-all; color: var(--wzy-text-hi); }

/* QR */
.qr-wrap { display:flex; flex-direction:column; align-items:center; gap:14px; }
.qr-canvas { background:#fff; padding:14px; border-radius:12px; }

/* 锁屏 / 关机 */
#screen-lock { position:absolute; inset:0; z-index:200; display:none; align-items:center;
  justify-content:center; background: rgba(5,7,15,.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#screen-lock.show { display:flex; }

.center-screen { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.shutdown-logo { font-family: var(--wzy-font-display); font-size:34px; font-weight:800;
  background: var(--wzy-gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }