/* ============================================================
 * theme-tech.css — 初/高中学段 视觉主题（深色科技风）
 * 作用域：body.theme-tech
 * 风格：深蓝黑底 + 霓虹高光 + 玻璃质感卡片 + 等宽字体点缀
 * 只覆盖视觉层，不写任何逻辑
 * ============================================================ */

body.theme-tech {
  --bg1: #060810;
  --bg2: #0d1326;
  --bg: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
  --panel: rgba(255,255,255,.05);
  --panel-border: rgba(0,220,255,.32);
  --panel-border-width: 1px;
  --primary: #00d9ff;
  --primary-rgb: 0,217,255;
  --primary-light: rgba(0,217,255,.13);   /* 深色主题下浅蓝#dbeafe不适用，用半透明青 */
  --accent: #ff2bd6;
  --neon: #39ff88;
  --violet: #8b5cf6;
  --danger: #ff5577;
  --text: #eaf2ff;
  --text-sub: #8894b5;
  --border: rgba(0,217,255,.28);
  --card-bg: #0d1326;   /* 表单控件背景（深色） */
  --success-bg: rgba(57,255,136,.14);    /* 通过的半透明霓虹绿底（科技风同风格） */
  --success-text: #5ef2a0;
  --warn-bg: rgba(255,171,0,.12);        /* 复习提示的半透明琥珀底 */
  --bg-sub: rgba(255,255,255,.06);       /* 禁用控件底（深色半透明） */
}

body.theme-tech {
  background:
    radial-gradient(ellipse at 15% 15%, rgba(0,217,255,.10), transparent 50%),
    radial-gradient(ellipse at 85% 85%, rgba(255,43,214,.09), transparent 50%),
    var(--bg);
  color: var(--text);
}

/* 顶栏 */
body.theme-tech header#topbar {
  background: linear-gradient(90deg, rgba(0,217,255,.14) 0%, rgba(255,43,214,.10) 100%);
  border-bottom: 1px solid var(--panel-border);
  box-shadow: 0 0 30px rgba(var(--primary-rgb),.15);
}
body.theme-tech #topbar-title {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 2px;
  font-weight: 900;
}
body.theme-tech .topbar-btn {
  border: 1px solid var(--panel-border);
  background: transparent;
  color: var(--text);
  font-family: "Menlo","Consolas",monospace;
  letter-spacing: 1px;
  font-weight: 700;
}
body.theme-tech .topbar-btn.active {
  background: rgba(var(--primary-rgb),.22);
  color: var(--primary);
  box-shadow: 0 0 18px rgba(var(--primary-rgb),.4) inset;
}

/* 顶栏当前用户徽标（科技风）——已统一为 .topbar-btn 样式 */

/* 知识点浮层选择器（科技风） */
body.theme-tech .kp-trigger {
  background: rgba(0,0,0,.3);
  border: 1px solid var(--panel-border);
  color: var(--text);
  font-family: "Menlo","Consolas",monospace;
  letter-spacing: 1px;
}
body.theme-tech .kp-trigger:hover,
body.theme-tech .kp-trigger.open { border-color: var(--primary); box-shadow: 0 0 12px rgba(var(--primary-rgb),.3); }
body.theme-tech .kp-trigger .kp-txt { color: var(--text-sub); }
body.theme-tech .kp-trigger .kp-txt.picked { color: var(--primary); }
body.theme-tech .kp-trigger .kp-arr { color: var(--primary); }
body.theme-tech .kp-pop {
  background: #0d1326;
  border: 1px solid var(--panel-border);
  box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 24px rgba(var(--primary-rgb),.15);
}
body.theme-tech .kp-pop-head { border-bottom: 1px solid var(--panel-border); font-family: "Menlo","Consolas",monospace; letter-spacing: 1px; }
body.theme-tech .kp-crumb { border-bottom: 1px dashed rgba(255,255,255,.12); }
body.theme-tech .kp-crumb-item { color: var(--primary); font-family: "Menlo","Consolas",monospace; }
body.theme-tech .kp-opt { border-bottom: 1px dashed rgba(255,255,255,.10); color: var(--text); }
body.theme-tech .kp-opt:hover { background: rgba(var(--primary-rgb),.16); }
body.theme-tech .kp-opt .kp-imp { color: var(--text-sub); font-family: "Menlo","Consolas",monospace; }

/* 主卡片：玻璃质感 */
body.theme-tech .card {
  background: var(--panel);
  border: var(--panel-border-width) solid var(--panel-border);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 40px rgba(var(--primary-rgb),.08);
}

body.theme-tech .page-title {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 1px;
  font-weight: 900;
}
body.theme-tech .page-sub { color: var(--text-sub); letter-spacing: 3px; font-family: "Menlo","Consolas",monospace; }

/* 大按钮：霓虹边 + 玻璃底 */
body.theme-tech .big-btn {
  background: linear-gradient(135deg, rgba(0,217,255,.10) 0%, rgba(255,43,214,.08) 100%);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  color: var(--text);
  font-weight: 800;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
body.theme-tech .big-btn::before {
  content: "";
  position: absolute;
  left: 0; top: 0; width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}
body.theme-tech .big-btn:hover {
  transform: translateX(4px);
  border-color: var(--primary);
  box-shadow: 0 0 24px rgba(var(--primary-rgb),.3);
}
body.theme-tech .big-btn.selected,
body.theme-tech .big-btn.active {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(0,217,255,.18) 0%, rgba(255,43,214,.14) 100%);
  box-shadow: 0 0 24px rgba(var(--primary-rgb),.4) inset;
}
body.theme-tech .big-btn .btn-title { font-size: 17px; font-weight: 800; }
body.theme-tech .big-btn .btn-desc {
  font-size: 12px; font-weight: 600; color: var(--text-sub);
  font-family: "Menlo","Consolas",monospace;
  letter-spacing: 1px;
  margin-top: 4px;
}

body.theme-tech #home-specials .big-btn {
  font-weight: 800;
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,220,255,.10) 0%, rgba(255,43,214,.10) 100%);
}
body.theme-tech #home-specials .big-btn:nth-child(1) {
  background: linear-gradient(135deg, rgba(0,220,255,.14) 0%, rgba(139,92,246,.14) 100%);
}
body.theme-tech #home-specials .big-btn:nth-child(2) {
  background: linear-gradient(135deg, rgba(57,255,136,.13) 0%, rgba(0,220,255,.13) 100%);
}
body.theme-tech #home-specials .big-btn:nth-child(3) {
  background: linear-gradient(135deg, rgba(255,43,214,.15) 0%, rgba(255,87,102,.13) 100%);
}
/* 选中态：保持渐变底，青色描边+霓虹发光（不用白底） */
body.theme-tech #home-specials .big-btn.selected,
body.theme-tech #home-specials .big-btn.selected:nth-child(n) {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(0,217,255,.28) 0%, rgba(255,43,214,.22) 100%);
  box-shadow: 0 0 24px rgba(var(--primary-rgb),.5) inset, 0 0 18px rgba(var(--primary-rgb),.4);
  color: var(--text);
}

/* 科技风：图标青色霓虹光晕 + 星星青色 */
body.theme-tech #home-specials .big-btn .icon {
  filter: drop-shadow(0 0 6px var(--primary));
  background: rgba(0,217,255,.08);
}
/* 滚动条滑块青色 */
body.theme-tech .kp-list::-webkit-scrollbar-thumb { background: var(--primary); }
body.theme-tech #home-specials .big-btn .stars {
  color: var(--primary);
  text-shadow: 0 0 8px rgba(var(--primary-rgb),.8);
}

/* 知识点树 */
body.theme-tech .tree-row {
  background: rgba(var(--primary-rgb),.06);
  border-left: 2px solid var(--primary);
  color: var(--text);
  font-family: "Menlo","Consolas",monospace;
  letter-spacing: .5px;
  font-weight: 600;
}
body.theme-tech .tree-row:hover {
  background: rgba(var(--primary-rgb),.14);
  border-left-color: var(--accent);
}
body.theme-tech .tree-row .arrow { color: var(--primary); font-family: "Menlo",monospace; }
body.theme-tech .tree-node.selected .tree-row {
  background: rgba(var(--primary-rgb),.22);
  border-left-color: var(--accent);
  box-shadow: 0 0 18px rgba(var(--primary-rgb),.4) inset;
}
body.theme-tech .stage-chip {
  border: 1px solid var(--panel-border);
  color: var(--text);
  background: transparent;
  font-family: "Menlo","Consolas",monospace;
  letter-spacing: 1px;
  font-weight: 700;
}
body.theme-tech .stage-chip.active,
body.theme-tech .stage-chip.on {
  background: rgba(var(--primary-rgb),.22);
  color: var(--primary);
  box-shadow: 0 0 14px rgba(var(--primary-rgb),.4);
}

/* 7阶段 XP 条 */
body.theme-tech .stage-flow,
body.theme-tech .progress-bar-wrap {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
}
body.theme-tech .stage-flow .stage-bar {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
body.theme-tech .stage-flow .stage-bar-fill {
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--neon));
  box-shadow: 0 0 12px var(--primary);
}
body.theme-tech .stage-chip.done {
  background: rgba(57,255,136,.18);
  color: var(--neon);
  border-color: var(--neon);
}
body.theme-tech .stage-chip.active {
  color: var(--primary);
  background: rgba(var(--primary-rgb),.18);
  box-shadow: 0 0 14px rgba(var(--primary-rgb),.5);
}
body.theme-tech .stage-chip.locked {
  background: rgba(255,255,255,.03);
  color: #555;
  border-color: rgba(255,255,255,.10);
}
body.theme-tech .stage-flow .stage-bar-title,
body.theme-tech .stage-flow .pct {
  color: var(--primary);
  font-family: "Menlo","Consolas",monospace;
  letter-spacing: 2px;
}

/* 按钮 */
body.theme-tech .primary-btn {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: #060810;
  font-weight: 900;
  border: none;
  box-shadow: 0 0 20px rgba(var(--primary-rgb),.5);
  border-radius: 10px;
}
body.theme-tech .primary-btn:hover {
  box-shadow: 0 0 28px rgba(var(--primary-rgb),.7);
}
body.theme-tech .secondary-btn {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  font-weight: 700;
}

/* 表单 */
body.theme-tech input, body.theme-tech select, body.theme-tech textarea {
  background: rgba(0,0,0,.3);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
}
body.theme-tech .hint { color: var(--text-sub); }

/* 状态条（科技风） */
body.theme-tech #statusbar {
  background: rgba(255,255,255,.04);
  border-top: 1px solid var(--panel-border);
  color: var(--text-sub);
  font-family: "Menlo","Consolas",monospace;
}

/* 建议条（科技风：霓虹边框+深色半透底+霓虹文字） */
body.theme-tech .suggestion {
  background: rgba(0,0,0,.30);
  border: 1px solid var(--panel-border);
  color: var(--primary);
}

/* XP 进度条（科技风） */
body.theme-tech .stage-bar-wrap {
  background: rgba(0,0,0,.25);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
}

/* 徽章（科技风：青→品红渐变霓虹） */
body.theme-tech .badge {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #060810;
  font-weight: 900;
  box-shadow: 0 0 14px rgba(var(--primary-rgb),.5);
}
body.theme-tech .badge.locked {
  background: rgba(255,255,255,.06);
  color: #556;
  box-shadow: none;
}

/* 手写画布容器 */
body.theme-tech .hw-area {
  background: #fff;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
}

/* 状态提示 */
body.theme-tech .status-ok { color: var(--neon); }
body.theme-tech .status-warn { color: var(--primary); }
body.theme-tech .status-error { color: var(--danger); }