/* ============================================================
   怪癖 OS — 基座样式
   Win98 窗口系统 × 蒸汽波夜色皮肤
   ============================================================ */

:root {
  /* 主题色板:夜色(默认,蒸汽波) */
  --desk-bg: #12071f;
  --face: #221430;          /* 窗体面板色 */
  --face-light: #3b2650;    /* 立体亮边 */
  --face-dark: #0c0514;     /* 立体暗边 */
  --text: #e8dff2;
  --text-dim: #a08fb5;
  --title-a: #ff5ea8;       /* 标题栏渐变(品红) */
  --title-b: #6f3ce0;       /* 标题栏渐变(紫) */
  --title-text: #fff;
  --accent: #35e0d6;        /* 青色强调 */
  --accent-dim: rgba(53, 224, 214, 0.4);
  --menu-hi: #4d2a6e;
  --font-ui: Tahoma, Verdana, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", Consolas, Menlo, monospace;
}

/* 主题:经典(纯灰 Win98) */
body.theme-classic {
  --desk-bg: #0a3d6b;
  --face: #c3c3c3;
  --face-light: #ffffff;
  --face-dark: #787878;
  --text: #101010;
  --text-dim: #444;
  --title-a: #10248c;
  --title-b: #2f6fdf;
  --title-text: #fff;
  --accent: #10248c;
  --accent-dim: rgba(16, 36, 140, 0.35);
  --menu-hi: #10248c;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { font-family: var(--font-ui); font-size: 13px; color: var(--text); background: var(--desk-bg); }

/* ============ 桌面壁纸(canvas 实时渲染) ============ */
#desktop {
  position: fixed; inset: 0 0 34px 0;  /* 底部留给任务栏 */
  overflow: hidden;
}
.wallpaper { position: absolute; inset: 0; }
.wallpaper canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ============ 桌面图标 ============ */
#icons { position: absolute; inset: 14px auto 14px 14px; display: flex; flex-direction: column; flex-wrap: wrap; gap: 10px; max-height: 100%; }
.dicon {
  width: 86px; padding: 8px 4px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; user-select: none; border: 1px dotted transparent;
}
.dicon .glyph {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-size: 26px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.7));
  font-family: var(--font-kai, serif);
}
.dicon .label {
  font-size: 12px; color: #fff; text-align: center; line-height: 1.3;
  text-shadow: 1px 1px 2px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.6);
  letter-spacing: 1px;
}
.dicon:hover .label { color: var(--accent); }
.dicon.selected { border-color: var(--accent-dim); background: rgba(53,224,214,.08); }
.dicon.selected .label { color: var(--accent); }

/* ============ 窗口系统(Win98 立体边) ============ */
.window {
  position: absolute; min-width: 280px; min-height: 160px;
  background: var(--face);
  /* 98 风立体斜面:外亮内暗 */
  border: 2px solid;
  border-color: var(--face-light) var(--face-dark) var(--face-dark) var(--face-light);
  box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--face-dark),
              0 14px 46px rgba(0,0,0,.55);
  display: flex; flex-direction: column;
  animation: winopen .16s ease-out;
}
@keyframes winopen { from { transform: scale(.92); opacity: 0 } }
.window.focused { box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--face-dark), 0 18px 60px rgba(0,0,0,.7), 0 0 0 1px var(--accent-dim); }
.window.minimized { display: none; }
.window.maximized { left: 0 !important; top: 0 !important; width: 100% !important; height: calc(100% - 34px) !important; }

.titlebar {
  height: 30px; display: flex; align-items: center; padding: 0 4px 0 8px; gap: 8px;
  background: linear-gradient(90deg, var(--title-a), var(--title-b));
  user-select: none; cursor: default;
}
.window:not(.focused) .titlebar { filter: saturate(.35) brightness(.75); }
.titlebar .t-icon { font-size: 14px; line-height: 1; }
.titlebar .t-title {
  flex: 1; color: var(--title-text); font-weight: bold; font-size: 12.5px;
  letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}
.win-btn {
  width: 22px; height: 20px; flex: none;
  background: var(--face);
  border: 2px solid; border-color: var(--face-light) var(--face-dark) var(--face-dark) var(--face-light);
  display: flex; align-items: center; justify-content: center;
  font: bold 11px/1 var(--font-ui); color: var(--text); cursor: pointer;
}
.win-btn:active { border-color: var(--face-dark) var(--face-light) var(--face-light) var(--face-dark); }
.win-btn.close:hover { background: #e0483f; color: #fff; }

.win-body { flex: 1; overflow: auto; padding: 12px; }
.win-body.nopad { padding: 0; }

/* ============ 任务栏 ============ */
#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 34px;
  background: var(--face);
  border-top: 2px solid var(--face-light);
  display: flex; align-items: center; gap: 6px; padding: 3px 4px;
  z-index: 9000;
}
#startBtn {
  height: 26px; padding: 0 12px; font-weight: bold; font-size: 12.5px; letter-spacing: 1px;
  display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  background: var(--face);
  border: 2px solid; border-color: var(--face-light) var(--face-dark) var(--face-dark) var(--face-light);
  color: var(--text);
}
#startBtn:active, #startBtn.open { border-color: var(--face-dark) var(--face-light) var(--face-light) var(--face-dark); background: var(--menu-hi); color: #fff; }
#startBtn .logo { color: var(--accent); font-size: 14px; }
.tb-sep { width: 2px; height: 22px; border-left: 1px solid var(--face-dark); border-right: 1px solid var(--face-light); margin: 0 2px; }
#tasks { flex: 1; display: flex; gap: 5px; overflow: hidden; }
.task-btn {
  height: 26px; min-width: 120px; max-width: 180px; padding: 0 10px;
  display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
  font-size: 12px; color: var(--text);
  background: var(--face);
  border: 2px solid; border-color: var(--face-light) var(--face-dark) var(--face-dark) var(--face-light);
  white-space: nowrap; overflow: hidden;
}
.task-btn.active {
  border-color: var(--face-dark) var(--face-light) var(--face-light) var(--face-dark);
  background: var(--menu-hi); color: #fff; font-weight: bold;
}
#tray {
  height: 26px; padding: 0 10px; display: flex; align-items: center; gap: 10px;
  border: 2px solid; border-color: var(--face-dark) var(--face-light) var(--face-light) var(--face-dark);
  color: var(--text); font-size: 12px;
}
#tray .clock { font-family: var(--font-mono); letter-spacing: 1px; }

/* ============ 开始菜单 ============ */
#startMenu {
  position: fixed; left: 4px; bottom: 38px; width: 240px; z-index: 9500;
  background: var(--face);
  border: 2px solid; border-color: var(--face-light) var(--face-dark) var(--face-dark) var(--face-light);
  box-shadow: 4px 4px 18px rgba(0,0,0,.6);
  display: none;
}
#startMenu.open { display: flex; }
.sm-banner {
  width: 26px; background: linear-gradient(180deg, var(--title-a), var(--title-b));
  display: flex; align-items: flex-end; justify-content: center; padding: 10px 0;
}
.sm-banner span {
  writing-mode: vertical-rl; text-orientation: upright;
  color: #fff; font-weight: bold; letter-spacing: 6px; font-size: 14px;
  text-shadow: 1px 1px 2px rgba(0,0,0,.6);
}
.sm-items { flex: 1; padding: 4px 0; }
.sm-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  cursor: pointer; user-select: none; color: var(--text); font-size: 13px;
}
.sm-item:hover { background: var(--menu-hi); color: #fff; }
.sm-item .g { width: 20px; text-align: center; font-size: 15px; }
.sm-sep { height: 1px; margin: 4px 8px; background: var(--face-dark); border-bottom: 1px solid var(--face-light); }

/* ============ CRT 扫描线(可开关) ============ */
#crt {
  position: fixed; inset: 0; pointer-events: none; z-index: 99999; display: none;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
}
#crt::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.38) 100%);
}
body.crt-on #crt { display: block; }

/* ============ 启动画面 ============ */
#boot {
  position: fixed; inset: 0; z-index: 999999; background: #050208;
  color: #9ef5ec; font-family: var(--font-mono); font-size: 13px;
  padding: 40px; line-height: 1.9; overflow: hidden; cursor: pointer;
}
#boot .cursor { display: inline-block; width: 8px; height: 14px; background: #9ef5ec; animation: blink 0.9s steps(1) infinite; vertical-align: -2px; }
@keyframes blink { 50% { opacity: 0 } }
#boot .hint { position: absolute; bottom: 28px; right: 40px; opacity: .45; font-size: 12px; }

/* ============ 通用程序内组件 ============ */
.prog { font-size: 13.5px; line-height: 2; color: var(--text-dim); }
.prog h2 { font-size: 20px; color: var(--text); letter-spacing: 3px; margin-bottom: 10px; }
.prog b { color: var(--text); font-weight: 600; }
.prog .hl { color: var(--accent); }
.prog hr { border: none; border-top: 1px solid var(--face-dark); margin: 12px 0; }

/* 作品卡片 */
.works { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.wcard {
  border: 2px solid; border-color: var(--face-dark) var(--face-light) var(--face-light) var(--face-dark);
  background: rgba(0,0,0,.18); padding: 14px; cursor: pointer; transition: background .2s;
}
.wcard:hover { background: rgba(53,224,214,.07); }
.wcard .g { font-size: 26px; margin-bottom: 8px; }
.wcard h4 { color: var(--text); font-size: 15px; letter-spacing: 2px; margin-bottom: 4px; }
.wcard .m { font-size: 11px; color: var(--accent); letter-spacing: 1px; margin-bottom: 8px; }
.wcard p { font-size: 12.5px; line-height: 1.8; }

/* 终端 */
.term {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.8;
  background: #06030c; color: #9ef5ec; height: 100%; padding: 12px 14px;
  overflow: auto; white-space: pre-wrap; word-break: break-all;
}
.term .in { color: #ff9ad5; }
.term .ok { color: #9ef5ec; }
.term .dim { color: #6b7f8f; }

/* 电台占位 */
.radio { text-align: center; padding: 24px 12px; }
.radio canvas { width: 100%; height: 90px; display: block; margin: 14px 0; }
.radio .now { font-family: var(--font-mono); color: var(--accent); font-size: 12.5px; letter-spacing: 1px; }
.radio .btns { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
/* 环境声推子(AirPods式):Win98 轨道 + 霓虹滑块 */
.radio .amb { display: flex; align-items: center; gap: 8px; margin: 12px auto 0; width: 88%; }
.radio .amb-l { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.radio .amb-v { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); width: 34px; text-align: right; }
.radio .amb input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none; height: 18px; background: transparent; cursor: pointer;
}
.radio .amb input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; background: var(--face-dark);
  border: 1px solid; border-color: var(--face-dark) var(--face-light) var(--face-light) var(--face-dark);
}
.radio .amb input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 20px; margin-top: -8px;
  background: var(--face);
  border: 1px solid; border-color: var(--face-light) var(--face-dark) var(--face-dark) var(--face-light);
  box-shadow: 1px 0 3px rgba(53,224,214,.35);
}
.radio .amb input[type="range"]::-moz-range-track {
  height: 6px; background: var(--face-dark);
  border: 1px solid; border-color: var(--face-dark) var(--face-light) var(--face-light) var(--face-dark);
}
.radio .amb input[type="range"]::-moz-range-thumb {
  width: 12px; height: 20px; border-radius: 0;
  background: var(--face);
  border: 1px solid; border-color: var(--face-light) var(--face-dark) var(--face-dark) var(--face-light);
}
.rbtn {
  padding: 6px 18px; font-size: 12.5px; cursor: pointer; user-select: none; color: var(--text);
  background: var(--face); border: 2px solid;
  border-color: var(--face-light) var(--face-dark) var(--face-dark) var(--face-light);
}
.rbtn:active { border-color: var(--face-dark) var(--face-light) var(--face-light) var(--face-dark); }
.rbtn.on { background: var(--menu-hi); color: #fff; }

/* 设置 */
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px; }
.setting-row + .setting-row { border-top: 1px solid var(--face-dark); }
.toggle {
  width: 44px; height: 20px; border: 2px solid; cursor: pointer; position: relative;
  border-color: var(--face-dark) var(--face-light) var(--face-light) var(--face-dark);
  background: var(--face-dark);
}
.toggle::after {
  content: ""; position: absolute; top: 1px; left: 2px; width: 18px; height: 12px;
  background: var(--text-dim); transition: all .15s;
}
.toggle.on::after { left: 20px; background: var(--accent); }

/* 状态栏 */
.statusbar {
  height: 22px; margin-top: auto; display: flex; align-items: center; padding: 0 8px;
  border-top: 1px solid var(--face-dark); font-size: 11.5px; color: var(--text-dim);
  gap: 4px;
}
.statusbar cell { border: 1px solid var(--face-dark); padding: 0 6px; }

/* 滚动条(Win98 风) */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.25); }
::-webkit-scrollbar-thumb {
  background: var(--face);
  border: 2px solid; border-color: var(--face-light) var(--face-dark) var(--face-dark) var(--face-light);
}
::-webkit-scrollbar-button {
  background: var(--face);
  border: 2px solid; border-color: var(--face-light) var(--face-dark) var(--face-dark) var(--face-light);
  height: 16px; width: 16px;
}

/* 窗口缩放手柄(右下角) */
.win-resize {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
  cursor: nwse-resize; z-index: 5;
  background:
    linear-gradient(135deg, transparent 0 50%, var(--face-dark) 50% calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(135deg, transparent 62%, var(--face-light) 62% calc(62% + 1.5px), transparent calc(62% + 1.5px));
}
.win-resize::after {
  content: ""; position: absolute; inset: 3px;
  background:
    linear-gradient(135deg, transparent 0 55%, var(--text-dim) 55% calc(55% + 1.5px), transparent calc(55% + 1.5px)),
    linear-gradient(135deg, transparent 75%, var(--text-dim) 75% calc(75% + 1.5px), transparent calc(75% + 1.5px));
}

/* 桌面右键菜单 */
#ctxMenu {
  position: fixed; z-index: 9600; width: 170px; display: none;
  background: var(--face); padding: 3px;
  border: 2px solid; border-color: var(--face-light) var(--face-dark) var(--face-dark) var(--face-light);
  box-shadow: 3px 3px 14px rgba(0,0,0,.55);
}
#ctxMenu.open { display: block; }
.ctx-item { padding: 7px 12px; font-size: 12.5px; color: var(--text); cursor: pointer; user-select: none; }
.ctx-item:hover { background: var(--menu-hi); color: #fff; }
.ctx-sep { height: 1px; margin: 3px 6px; background: var(--face-dark); border-bottom: 1px solid var(--face-light); }

/* 日志(devlog) */
.log { display: flex; flex-direction: column; gap: 0; }
.log-entry { display: flex; gap: 12px; padding: 10px 4px; }
.log-entry + .log-entry { border-top: 1px dashed var(--face-dark); }
.log-date { font-family: var(--font-mono); font-size: 11px; color: var(--accent); white-space: nowrap; padding-top: 4px; }
.log-text { font-size: 13px; line-height: 1.9; color: var(--text-dim); flex: 1; }
.log-text b { color: var(--text); font-weight: 600; }
.log-add { display: flex; gap: 6px; margin-top: 12px; }
.log-add input {
  flex: 1; padding: 7px 10px; font-size: 12.5px; font-family: var(--font-ui);
  color: var(--text); background: rgba(0,0,0,.3); outline: none;
  border: 2px solid; border-color: var(--face-dark) var(--face-light) var(--face-light) var(--face-dark);
}
.log-add input:focus { border-color: var(--accent-dim); }

/* 小屏适配 */
@media (max-width: 640px) {
  .window:not(.maximized) { left: 3vw !important; top: 6vh !important; width: 94vw !important; height: 70vh !important; }
  #icons { gap: 6px; }
  .dicon { width: 72px; }
}

/* 电台换台闪烁 */
.radio .now.flash { animation: stationflash 1.2s ease-out; }
@keyframes stationflash {
  0% { color: var(--accent); text-shadow: 0 0 18px var(--accent); transform: scale(1.06); }
  100% { color: var(--text-dim); text-shadow: none; transform: scale(1); }
}

/* 启动画面行对齐(flex点线,字体无关) */
#boot .bline { display: flex; align-items: baseline; }
#boot .bline .dots {
  flex: 1; min-width: 48px; margin: 0 10px;
  border-bottom: 2px dotted rgba(158, 245, 236, 0.35);
  transform: translateY(-3px);
}