/* common.css — design tokens, resets, shared components */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Tokens ── */
:root {
  --bg:      #f4f6fb;
  --card:    #ffffff;
  --border:  #e4e8f5;
  --ink:     #1e2235;
  --muted:   #8a90b0;
  --accent:  #4a6cf7;
  --alight:  #eef1ff;
  --success: #27ae60;
  --danger:  #e55353;
  --gold:    #f39c12;
  --radius:  12px;
  --shadow:  0 2px 16px rgba(74,108,247,.08);
  --font:    'Noto Sans SC', sans-serif;
  --mono:    'JetBrains Mono', monospace;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img  { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; }

/* ── Shared buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 15px; border: 1.5px solid transparent;
  border-radius: 8px; font-size: .84rem; font-weight: 500;
  cursor: pointer; transition: all .15s;
  text-decoration: none; white-space: nowrap; line-height: 1;
}
.btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--accent);  color: #fff; border-color: var(--accent); }
.btn-primary:hover  { background: #3a5ce5; border-color: #3a5ce5; }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-success:hover  { background: #219150; border-color: #219150; }
.btn-danger  { background: var(--danger);  color: #fff; border-color: var(--danger); }
.btn-danger:hover   { background: #c0392b; border-color: #c0392b; }
.btn-ghost   { background: var(--card);    color: var(--ink); border-color: var(--border); }
.btn-ghost:hover    { background: var(--alight); border-color: #b8c4f8; }
.btn-sm { padding: 5px 10px; font-size: .76rem; }

/* ── Form elements ── */
input[type="text"], input[type="number"], input[type="password"],
textarea, select {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: .9rem; color: var(--ink); background: #fafbff;
  outline: none; transition: border-color .2s;
  -webkit-appearance: none; appearance: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); background: #fff; }
textarea { resize: vertical; }

/* ── Badge ── */
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: .68rem; font-weight: 600; }
.badge-on  { background: #eaf7ef; color: #27ae60; }
.badge-off { background: #fdf0f0; color: #e74c3c; }

/* ── Spinner ── */
.spin {
  width: 22px; height: 22px;
  border: 2.5px solid #d4d8f0; border-top-color: var(--accent);
  border-radius: 50%; animation: _spin .7s linear infinite;
}
@keyframes _spin { to { transform: rotate(360deg); } }

/* ── Toast ── */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--ink); color: #fff;
  padding: 10px 18px; border-radius: 8px;
  font-size: .84rem; z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  display: none; max-width: calc(100vw - 48px);
}
.toast.show { display: block; animation: _fadeUp .25s ease; }
@keyframes _fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive utilities ── */
@media (max-width: 600px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 601px) {
  .show-mobile { display: none !important; }
}