/* =============================================================================
 * KALI//WEB —— Cyberpunk / Dark Terminal 主题
 * 内含 v86 终端（#screen 文字层 + canvas 图形层）所需的基础布局样式，
 * 并用 !important 把文字终端强制为“绿色荧光”配色。
 * ==========================================================================*/

/* ---------- 主题变量 ---------- */
:root {
  --bg:      #04070a;   /* 页面底色（近黑）          */
  --bg2:     #07100e;   /* 面板底色                  */
  --panel:   #0a1412;   /* 深色面板                  */
  --border:  #163a2e;   /* 霓虹描边                  */
  --green:   #33ff88;   /* 主荧光绿                  */
  --green-d: #0d6b3f;   /* 暗绿                      */
  --cyan:    #00eaff;   /* 青色点缀                  */
  --amber:   #ffb648;   /* 琥珀色                    */
  --red:     #ff3b5c;   /* 错误红                    */
  --text:    #c8ffe3;   /* 主体文字                  */
  --dim:     #5f8f7a;   /* 弱化文字                  */

  --mono: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  overflow: hidden;
}

::selection { background: var(--green); color: #001408; }

/* 背景扫描线 / CRT 特效 */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0.12) 3px,
      rgba(0, 0, 0, 0) 4px
    );
  mix-blend-mode: multiply;
}

/* ============================================================
   开机引导层
   ============================================================ */
.boot-overlay {
  position: fixed; inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 35%, #07150f 0%, #04070a 70%),
    linear-gradient(rgba(51,255,136,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51,255,136,0.03) 1px, transparent 1px);
  background-size: 100% 100%, 42px 42px, 42px 42px;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.boot-overlay.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot-inner {
  width: min(760px, 92vw);
  text-align: center;
  padding: 24px;
}

/* ASCII Logo */
.logo {
  font-size: 13px;
  line-height: 1.15;
  color: var(--green);
  text-shadow: 0 0 10px rgba(51, 255, 136, 0.55);
  margin-bottom: 14px;
  animation: flicker 4s infinite;
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.4; }
  94% { opacity: 1; }
  96% { opacity: 0.7; }
  97% { opacity: 1; }
}

.boot-title {
  font-size: 34px;
  letter-spacing: 10px;
  color: var(--text);
  text-shadow: 0 0 18px rgba(51, 255, 136, 0.8);
  margin-bottom: 6px;
}

.boot-title .accent { color: var(--cyan); text-shadow: 0 0 14px rgba(0,234,255,0.8); }

.boot-sub {
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--dim);
  margin-bottom: 26px;
}

/* 总进度 */
.overall {
  position: relative;
  margin-bottom: 14px;
  text-align: left;
}
.overall-label {
  font-size: 11px;
  color: var(--cyan);
  margin-bottom: 5px;
  text-shadow: 0 0 8px rgba(0,234,255,0.5);
}
.overall-track {
  height: 14px;
  background: #03130d;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.8), 0 0 8px rgba(51,255,136,0.15);
}
.overall-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--green-d), var(--green), #b6ffd8);
  box-shadow: 0 0 14px rgba(51,255,136,0.9);
  transition: width 0.25s ease;
  position: relative;
}
.overall-fill.indet {
  width: 40% !important;
  animation: indet 1.1s ease-in-out infinite;
}
@keyframes indet {
  0% { margin-left: -40%; }
  100% { margin-left: 100%; }
}
.overall-pct {
  position: absolute;
  right: 6px;
  top: 4px;
  font-size: 11px;
  color: #00160c;
  font-weight: bold;
  z-index: 2;
}

/* 各文件进度行 */
.boot-bars { margin-bottom: 14px; }
.prow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 11px;
  opacity: 0.85;
}
.prow.done { opacity: 1; }
.prow.done .prow-label::after { content: " ✓"; color: var(--green); }
.prow-label { flex: 0 0 210px; text-align: left; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow-track {
  flex: 1;
  height: 8px;
  background: #03130d;
  border: 1px solid #0d2a21;
  border-radius: 2px;
  overflow: hidden;
}
.prow-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--green-d), var(--green));
  transition: width 0.2s ease;
}
.prow-fill.indet { animation: indet 1.1s ease-in-out infinite; width: 30% !important; }
.prow-pct { flex: 0 0 170px; text-align: right; color: var(--dim); }

/* 启动日志 */
.boot-log {
  height: 128px;
  overflow-y: auto;
  text-align: left;
  font-size: 11px;
  line-height: 1.7;
  color: var(--green);
  background: rgba(2, 12, 8, 0.7);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 2px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.6);
  margin-bottom: 12px;
}

.boot-status {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0,234,255,0.6);
  animation: blink 1s step-start infinite;
}
.boot-status.err { color: var(--red); text-shadow: 0 0 10px rgba(255,59,92,0.7); animation: none; }

@keyframes blink { 50% { opacity: 0.25; } }

/* ============================================================
   主界面布局
   ============================================================ */
.app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* 全屏模式（DOM Fullscreen 或 CSS 兜底） */
.app.fs { position: fixed; inset: 0; z-index: 999; }

/* 顶部工具栏 */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: linear-gradient(180deg, #0b1a14, #06100c);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 18px rgba(0,0,0,0.6);
  flex-wrap: wrap;
}
.brand {
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--text);
  text-shadow: 0 0 12px rgba(51,255,136,0.6);
}
.brand .accent { color: var(--cyan); }
.brand-tag {
  font-size: 10px;
  color: var(--green);
  border: 1px solid var(--green-d);
  padding: 1px 6px;
  border-radius: 2px;
  vertical-align: 2px;
  margin-left: 4px;
}

.topbar-info { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.led {
  font-size: 14px;
  color: #3a3a3a;
  transition: color 0.3s, text-shadow 0.3s;
}
.led.on {
  color: var(--green);
  text-shadow: 0 0 12px rgba(51,255,136,1);
  animation: breathe 1.6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.stat { font-size: 11px; color: var(--dim); }
.stat#stat-speed { color: var(--cyan); }

.topbar-actions { display: flex; align-items: center; gap: 8px; }
.img-label { font-size: 11px; color: var(--dim); }
#img-select {
  background: #03130d;
  color: var(--green);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 11px;
  outline: none;
}
#img-select:focus { border-color: var(--green); box-shadow: 0 0 8px rgba(51,255,136,0.4); }

.tbtn {
  background: #03130d;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 4px 9px;
  font-family: var(--mono);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.tbtn:hover { border-color: var(--green); color: var(--green); box-shadow: 0 0 10px rgba(51,255,136,0.35); }
.tbtn:active { transform: translateY(1px); }

/* 屏幕区域 */
.screen-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

.screen-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 10px;
  background:
    radial-gradient(ellipse at 50% 60%, #060d0b 0%, #03070a 75%);
}

/* v86 屏幕容器（必须保持 position:relative；行高 0 防锯齿） */
#screen_container {
  position: relative;
  line-height: 0;
  background: #000;
  border: 1px solid var(--border);
  box-shadow: 0 0 24px rgba(51,255,136,0.12), inset 0 0 40px rgba(0,0,0,0.7);
  outline: 1px solid #0a0a0a;
}
#screen_container:fullscreen {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #000;
}
#screen_container:fullscreen canvas { width: auto !important; height: 100% !important; }

/* v86 文字终端层（行高/字重与官方默认一致，保证光标与行定位精确） */
#screen {
  white-space: pre;
  position: relative;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  line-height: normal;
}
#screen, #vga {
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  transform-origin: top left;
}
#vga { background-color: #000; touch-action: none; max-width: 100%; height: auto; }

/* 强制绿色荧光文字终端配色（覆盖 v86 内联颜色） */
#screen_container span {
  color: #3eff92 !important;
  background-color: #000 !important;
  text-shadow: 0 0 6px rgba(62, 255, 146, 0.75);
}

/* v86 光标 / 闪烁 */
#screen_container .cursor { background: #3eff92; }
#screen_container .blinking-cursor { animation: blink 0.6s step-start infinite; }
#screen_container .blink { animation: blink 0.6s step-start infinite; }

/* 点击提示 */
.hint {
  margin-top: 12px;
  font-size: 12px;
  color: var(--dim);
  text-align: center;
  line-height: 1.6;
  max-width: 90%;
}
.hint b { color: var(--green); }
.hint.hide { display: none; }

/* 隐藏的软键盘输入框 */
.kbd-input {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  background: transparent;
}

/* ============================================================
   虚拟快捷键栏
   ============================================================ */
.vkbar {
  padding: 8px 12px;
  background: linear-gradient(180deg, #06100c, #04090a);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vk-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }

.vk {
  min-width: 44px;
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  background: linear-gradient(180deg, #0a1c15, #06110d);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: all 0.08s;
  touch-action: manipulation;
}
.vk:hover { border-color: var(--green); color: var(--green); }
.vk:active, .vk.active, .vk.on {
  color: #00160c;
  background: linear-gradient(180deg, var(--green), #a8ffd0);
  border-color: var(--green);
  box-shadow: 0 0 14px rgba(51,255,136,0.7);
  transform: translateY(1px);
}
.vk.pulse { box-shadow: 0 0 18px rgba(0,234,255,0.8); border-color: var(--cyan); color: var(--cyan); }

/* 组合键行用青色系，方向键行用琥珀色系 */
.row-combos .vk { font-weight: bold; }
.row-nav .vk { min-width: 40px; }
.row-nav .vk:nth-child(1),
.row-nav .vk:nth-child(2),
.row-nav .vk:nth-child(3),
.row-nav .vk:nth-child(4) {
  color: var(--amber);
}
.row-nav .vk:nth-child(1):hover,
.row-nav .vk:nth-child(2):hover,
.row-nav .vk:nth-child(3):hover,
.row-nav .vk:nth-child(4):hover {
  border-color: var(--amber);
}

/* ============================================================
   系统日志侧栏
   ============================================================ */
.syslog {
  position: fixed;
  top: 46px;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 88vw;
  background: rgba(3, 10, 8, 0.96);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform 0.28s ease;
  z-index: 50;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(4px);
}
.syslog.open { transform: translateX(0); }
.syslog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--cyan);
  border-bottom: 1px solid var(--border);
}
.syslog-close {
  background: none;
  border: none;
  color: var(--dim);
  font-size: 16px;
  cursor: pointer;
}
.syslog-close:hover { color: var(--red); }
.syslog-body {
  flex: 1;
  overflow: auto;
  padding: 10px 12px;
  font-size: 10px;
  line-height: 1.7;
  color: var(--green);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ============================================================
   响应式（移动端）
   ============================================================ */
@media (max-width: 720px) {
  .boot-inner { padding: 10px; }
  .logo { font-size: 9px; }
  .boot-title { font-size: 24px; letter-spacing: 6px; }
  .prow-label { flex-basis: 150px; }
  .prow-pct { flex-basis: 110px; }

  .topbar { gap: 8px; padding: 6px 8px; }
  .brand { font-size: 13px; }
  .topbar-info { gap: 8px; }
  .stat { font-size: 10px; }
  #img-select { max-width: 150px; }
  .img-label { display: none; }

  .screen-wrap { padding: 4px; }
  #screen { font-size: 12px; }

  .vk { min-width: 36px; padding: 9px 8px; font-size: 10px; }
  .vkbar { padding: 6px 4px; gap: 5px; }
  .vk-row { gap: 4px; }
}

/* 超窄屏进一步压缩 */
@media (max-width: 420px) {
  .vk { min-width: 30px; padding: 8px 5px; }
  .prow-label { flex-basis: 110px; }
  .prow-pct { flex-basis: 90px; font-size: 10px; }
}