:root {
  --font-body: "Songti SC", "Noto Serif SC", "SimSun", "STSong", serif;
  --font-display:
    "STKaiti", "KaiTi", "Kaiti SC", "Songti SC", "Noto Serif SC", "SimSun",
    "STSong", serif;
  --bg-canvas: #f7f7f7;
  --card-bg: #ffffff;
  --ink-main: #1f1f1f;
  --ink-light: #757575;
  --cinnabar: #cf3838;
  --line-faint: #f0f0f0;
  --line-border: #e5e5e5;
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.04);
  --card-bg-muted: #fafafa;
  --card-bg-hover: #fafafa;
  --card-bg-warm-start: #fffdf9;
  --card-bg-warm-end: #fffaf2;
  --card-bg-warm-hover-end: #fff6ea;
  --card-bg-translucent: rgba(255, 255, 255, 0.86);
  --card-bg-soft-translucent: rgba(255, 255, 255, 0.68);
  --toast-bg: rgba(255, 252, 250, 0.98);
  --nav-bg: rgba(255, 255, 255, 0.96);
  --accent-soft: #fff6f4;
  --text-on-ink: #ffffff;
  --action-bg: #1f1f1f;
  --action-text: #ffffff;
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg-canvas: #181818;
  --card-bg: #242424;
  --ink-main: #f0f0f0;
  --ink-light: #a5a5a5;
  --line-faint: #363636;
  --line-border: #4a4a4a;
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.24);
  --card-bg-muted: #2b2b2b;
  --card-bg-hover: #303030;
  --card-bg-warm-start: #262321;
  --card-bg-warm-end: #2b2724;
  --card-bg-warm-hover-end: #332a26;
  --card-bg-translucent: rgba(36, 36, 36, 0.92);
  --card-bg-soft-translucent: rgba(36, 36, 36, 0.72);
  --toast-bg: rgba(42, 31, 31, 0.98);
  --nav-bg: rgba(30, 30, 30, 0.96);
  --accent-soft: #382525;
  --home-rule: #3d3d3d;
  --action-bg: #353535;
  --action-text: #f0f0f0;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-canvas);
  margin: 0;
  padding: 0;
  color: var(--ink-main);
  -webkit-tap-highlight-color: transparent;
}

.input-section {
  padding: 20px 25px;
  background: transparent;
  border-bottom: 1px solid var(--line-faint);
}

.input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}

.input-group {
  flex: 1;
  min-width: calc(48% - 8px);
}

.input-group label {
  display: block;
  font-size: 12px;
  color: var(--ink-light);
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.sys-input,
.sys-select,
.sys-textarea,
.input-group input,
.input-group select {
  width: 100%;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid var(--line-border);
  border-radius: 0;
  font-size: 15px;
  background: transparent;
  color: var(--ink-main);
  font-family: inherit;
  transition: border-color 0.3s;
  box-sizing: border-box;
}

.sys-input:focus,
.sys-select:focus,
.sys-textarea:focus,
.input-group input:focus,
.input-group select:focus {
  outline: none;
  border-bottom: 1px solid var(--cinnabar);
}

.btn-primary,
.btn-auto,
button {
  padding: 12px;
  border-radius: 2px;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s;
  font-family: inherit;
}

button {
  flex: initial;
}

.btn-primary {
  background: var(--action-bg) !important;
  color: var(--action-text) !important;
  border: 1px solid var(--action-bg) !important;
}

.btn-auto {
  background: transparent !important;
  color: var(--ink-main) !important;
  border: 1px solid var(--ink-main) !important;
}

button:active {
  transform: scale(0.98);
  opacity: 0.8;
}