@charset "utf-8";
/* 基础层：reset、原生控件、焦点可见性、无障碍辅助类。
 * 组件样式在 components.css，布局在 layout.css，终端在 terminal.css。
 */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

html {
  font-size: var(--ui-fs);
  /* 移动端横屏/缩放时别自作主张放大字体，等宽列会错位 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--fg-0);
  background: var(--bg-0);
  /* 终端界面不该整页滚动 —— 滚的应该是屏幕内容本身 */
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 登录页是普通文档流，矮屏幕（手机横屏、小笔记本）上要能滚 */
body[data-page="auth"] { overflow: auto; }

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ------------------------------------------------------------ 焦点可见
 * 旧版全局写了 outline:none，键盘用户彻底看不出焦点在哪 —— 这是硬伤。
 * 用 :focus-visible：鼠标点击不显示环，键盘 Tab 才显示。 */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ------------------------------------------------------------ 原生控件 */

button {
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  /* 触屏上点按不要出现半秒后的灰色高亮块 */
  -webkit-tap-highlight-color: transparent;
}

button:disabled { cursor: not-allowed; }

input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

/* 数字输入框的上下小箭头在紧凑界面里只会误触 */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* 自动填充：Chrome 会强刷成亮黄底，在深色主题上非常突兀。
   用一个超长的 inset shadow 顶掉它的背景绘制。 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg-0);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset;
  transition: background-color 9999s ease 0s;
}

code, kbd, pre, samp { font-family: var(--font-mono); }

::selection {
  background: var(--accent-soft);
  color: var(--fg-0);
}

/* ------------------------------------------------------------ 滚动条
 * 系统默认滚动条在深色底上是一条亮白杠，特别扎眼。 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-full);
  /* 用透明边框做出"滑块比轨道细"的效果，比直接改宽度稳 */
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-2); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ------------------------------------------------------------ 辅助类 */

/* 只给读屏器，视觉上不占位。别用 display:none —— 那样读屏器也读不到 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden { display: none !important; }

.mono { font-family: var(--font-mono); }
.dim { color: var(--fg-1); }
.dimmer { color: var(--fg-2); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 键帽。行内展示快捷键用，尺寸跟着界面字号走 */
kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: .1em .38em;
  font-family: var(--font-ui);
  font-size: .82em;
  line-height: 1.4;
  text-align: center;
  color: var(--fg-1);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}