/* 登录页和管理页共用的样式：颜色、尺寸、按钮、输入框、弹窗、提示条 */
:root {
  color-scheme: only light;
  --ink: #111111;
  --ink-soft: #4a4d55;
  --ink-faint: #6b6f78;
  --paper: #ffffff;
  --silver: #e4e6ea;
  --silver-deep: #c9ccd3;
  --page: #dfe1e6;
  --page-dot: #c5c8cf;
  --danger: #b3261e;
  --danger-soft: #fbe9e7;
  --warn: #8a5a00;
  --warn-soft: #fff3d6;
  --ok: #1d6b3a;
  --ok-soft: #e3f4e8;
  --overlay: rgba(17, 17, 17, 0.45);

  --line: 0.125rem;
  --line-thin: 0.0625rem;
  --radius-s: 0.375rem;
  --radius-m: 0.75rem;
  --gap-xs: 0.25rem;
  --gap-s: 0.5rem;
  --gap-m: 0.75rem;
  --gap-l: 1rem;
  --gap-xl: 1.5rem;
  --touch: 2.75rem;

  --font-s: 0.875rem;
  --font-m: 1rem;
  --font-l: 1.25rem;
  --font-xl: 1.5rem;
  --font-mono: "Consolas", "SFMono-Regular", "Menlo", monospace;

  --z-header: 10;
  --z-toast: 900;
  --z-modal: 1000;
}

/* 窄于 360 时整套界面按屏幕宽度等比缩小 */
@media (max-width: 359px) {
  html { font-size: 4.444vw; }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background-color: var(--page);
  background-image: radial-gradient(var(--page-dot) 0.09rem, transparent 0.1rem);
  background-size: 1.25rem 1.25rem;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: var(--font-m);
  line-height: 1.5;
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

[hidden] { display: none !important; }

input, textarea, .selectable {
  -webkit-user-select: text;
  user-select: text;
}

h1, h2, h3 { line-height: 1.25; }

/* ---------- 按钮 ---------- */
button {
  font-family: inherit;
  font-size: var(--font-m);
  color: var(--ink);
  cursor: pointer;
}
button:focus { outline: none; }
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: var(--line) dashed var(--ink);
  outline-offset: 0.125rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  padding: 0 var(--gap-l);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-s);
  background: var(--paper);
  font-weight: 700;
  white-space: nowrap;
}
.btn:active { background: var(--silver-deep); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:active { background: var(--ink-soft); }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:active { background: var(--danger-soft); }
/* 悬停效果只给有鼠标的设备，触屏上不会停留在按下后的颜色 */
@media (hover: hover) {
  .btn:hover { background: var(--silver); }
  .btn-primary:hover { background: var(--ink-soft); }
  .btn-danger:hover { background: var(--danger-soft); }
  .toast .btn:hover { background: var(--ink-soft); }
}
.btn[disabled] {
  cursor: default;
  border-color: var(--silver-deep);
  color: var(--ink-faint);
  background: var(--paper);
}
.btn-primary[disabled] { background: var(--silver-deep); color: var(--ink-soft); }

/* ---------- 语言切换 ---------- */
.lang-switch, .segmented {
  display: inline-flex;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-s);
  overflow: hidden;
  flex-shrink: 0;
}
.lang-option, .segment {
  min-width: var(--touch);
  min-height: 2.25rem;
  padding: 0 var(--gap-m);
  border: none;
  background: var(--paper);
  font-size: var(--font-s);
  font-weight: 700;
}
.lang-option + .lang-option, .segment + .segment { border-left: var(--line) solid var(--ink); }
.lang-option.is-on, .segment.is-on { background: var(--ink); color: var(--paper); }
/* n 选一的一排放不下时左右滑动，每项保持完整大小 */
.segmented-scroll {
  display: flex;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.segmented-scroll::-webkit-scrollbar { display: none; }
.segmented-scroll .segment { flex: 1 0 auto; min-height: var(--touch); white-space: nowrap; }

/* ---------- 输入框 ---------- */
.field { display: block; }
.field-label {
  display: block;
  margin-bottom: var(--gap-xs);
  font-size: var(--font-s);
  font-weight: 700;
  color: var(--ink-soft);
}
.input {
  display: block;
  width: 100%;
  min-height: var(--touch);
  padding: 0 var(--gap-m);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-s);
  background: var(--paper);
  font-family: inherit;
  font-size: var(--font-m);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 var(--line) var(--silver-deep); }
textarea.input {
  height: 7.5rem;
  padding: var(--gap-s) var(--gap-m);
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
}

/* ---------- 弹窗 ---------- */
.modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-l);
  padding-top: calc(var(--gap-l) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--gap-l) + env(safe-area-inset-bottom, 0px));
  background: var(--overlay);
}
.modal[hidden] { display: none; }
.modal-card {
  display: flex;
  flex-direction: column;
  width: 30rem;
  max-width: 100%;
  max-height: 100%;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.modal-title {
  padding: var(--gap-l) var(--gap-l) var(--gap-s);
  font-size: var(--font-l);
  font-weight: 800;
}
.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--gap-s) var(--gap-l) var(--gap-l);
}
.modal-body > * + * { margin-top: var(--gap-m); }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  padding: var(--gap-m) var(--gap-l);
  border-top: var(--line-thin) solid var(--silver-deep);
  background: var(--paper);
}
.modal-actions .btn + .btn { margin-left: var(--gap-m); }

/* ---------- 提示条 ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--gap-l) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  width: 28rem;
  max-width: calc(100% - 2rem);
  padding: var(--gap-s) var(--gap-s) var(--gap-s) var(--gap-l);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-m);
  background: var(--ink);
  color: var(--paper);
  transform: translateX(-50%);
}
.toast[hidden] { display: none; }
.toast-text { flex: 1 1 auto; min-width: 0; padding: var(--gap-xs) 0; }
.toast .btn { min-height: 2.25rem; margin-left: var(--gap-s); border-color: var(--paper); background: var(--ink); color: var(--paper); }
.toast-close {
  flex-shrink: 0;
  width: var(--touch);
  height: var(--touch);
  margin-left: var(--gap-xs);
  border: none;
  background: transparent;
  color: var(--paper);
  font-size: var(--font-l);
  line-height: 1;
}