/* ============================================================
 * common.css - 全站设计变量、基础排版、按钮、表单（可复用样式）
 * ============================================================ */
:root {
  --c-primary:        #2f5bff;
  --c-primary-hover:  #1e46e6;
  --c-primary-soft:   #eef2ff;
  --c-bg:             #f4f6fb;
  --c-surface:        #ffffff;
  --c-border:         #e5e9f2;
  --c-border-strong:  #d5dcea;
  --c-text:           #1b2437;
  --c-text-sub:       #4b566d;
  --c-muted:          #7a869e;
  --c-danger:         #e5484d;
  --c-danger-soft:    #fff2f2;
  --c-success:        #0f9d8a;
  --c-sidebar:        #131c30;
  --c-sidebar-text:   #aebbd2;

  --radius-sm:  8px;
  --radius:     10px;
  --radius-lg:  14px;
  --shadow-sm:  0 2px 8px rgba(24, 42, 84, .06);
  --shadow-md:  0 12px 40px rgba(24, 42, 84, .10);
  --shadow-lg:  0 24px 64px rgba(24, 42, 84, .16);

  --sidebar-w: 236px;
  --topbar-h:  64px;

  --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, system-ui, sans-serif;
}

html { font-family: var(--font-sans); }

body {
  font-size: 14px;
  color: var(--c-text);
  background: var(--c-bg);
}

h1, h2, h3, h4 { font-weight: 600; line-height: 1.35; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .18s ease, color .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: not-allowed; }

.btn-primary {
  color: #fff;
  background: var(--c-primary);
  box-shadow: 0 6px 16px rgba(47, 91, 255, .22);
}
.btn-primary:hover:not(:disabled) { background: var(--c-primary-hover); box-shadow: 0 8px 20px rgba(47, 91, 255, .30); }

.btn-outline {
  color: var(--c-text-sub);
  background: var(--c-surface);
  border-color: var(--c-border-strong);
}
.btn-outline:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); }

.btn-ghost { color: var(--c-text-sub); background: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--c-bg); color: var(--c-text); }

.btn-danger { color: #fff; background: var(--c-danger); }
.btn-danger:hover:not(:disabled) { background: #cf3439; }

.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-lg { height: 46px; font-size: 15px; border-radius: var(--radius); }
.btn-block { display: flex; width: 100%; }

/* ---------- 表单 ---------- */
.form-group { margin-bottom: 18px; }
.form-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--c-text-sub); }

.form-input {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 14px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form-input::placeholder { color: #a6afbf; }
.form-input:hover { border-color: #b9c3d6; }
.form-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(47, 91, 255, .12); }
.form-input.is-invalid { border-color: var(--c-danger); box-shadow: 0 0 0 3px rgba(229, 72, 77, .10); }

.input-icon { position: relative; }
.input-icon > .input-leading {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #9aa6ba;
  pointer-events: none;
}
.input-icon .form-input { padding-left: 42px; }
.input-icon.has-action .form-input { padding-right: 46px; }
.input-action {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: #9aa6ba;
}
.input-action:hover { background: var(--c-bg); color: var(--c-primary); }
.input-action svg { width: 18px; height: 18px; }

.checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-sub); cursor: pointer; user-select: none; }
.checkbox input { width: 15px; height: 15px; margin: 0; accent-color: var(--c-primary); cursor: pointer; }

.form-error {
  margin: -2px 0 14px;
  padding: 9px 12px;
  border: 1px solid #f7cfd0;
  border-radius: var(--radius-sm);
  background: var(--c-danger-soft);
  color: #c62f34;
  font-size: 13px;
}

/* ---------- 通用工具类 ---------- */
.text-muted { color: var(--c-muted); }
.text-center { text-align: center; }
.hidden { display: none !important; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

::selection { background: rgba(47, 91, 255, .18); }