@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap");

/* ================================================
   base.css
   所有页面共用，不包含任何业务组件样式
   ================================================ */

/* ── 变量 ─────────────────────────────────────── */
:root {
  --accent:            #7fc89a;
  --accent-light:      #9bd8ae;
  --accent-hover:      #6ab88a;
  --accent-text:       #47685a;
  --accent-soft:       rgba(155,216,174,.12);
  --accent-softer:     rgba(155,216,174,.06);

  --color-success:     #22c55e;
  --color-warning:     #f59e0b;
  --color-danger:      #ef4444;
  --color-danger-hover:#da190b;
  --color-danger-soft: rgba(239,68,68,.10);
  --color-info:        #2563eb;
  --color-info-hover:  #1d4ed8;
  --color-info-soft:   rgba(79,124,255,.10);

  --bg:                #f7f7f8;
  --bg-page:           #eeeef0;
  --panel:             #ffffff;
  --panel2:            #f7f7f8;
  --panel-alt:         #f3f4f6;
  --panel-hover:       #f9fbff;

  --text:              #0f172a;
  --text-secondary:    #374151;
  --muted:             #6b7280;
  --subtle:            #9ca3af;
  --placeholder:       #c0c4cc;

  --line:              #e5e7eb;
  --line-strong:       #d1d5db;
  --line-subtle:       #f0f0f2;

  --space-1:           4px;
  --space-2:           8px;
  --space-3:           12px;
  --space-4:           16px;
  --space-5:           24px;
  --space-6:           32px;
  --space-7:           48px;
  --space-8:           64px;

  --radius-sm:         6px;
  --radius:            12px;
  --radius2:           16px;
  --radius-lg:         16px;
  --radius-xl:         24px;
  --radius-full:       9999px;

  --shadow-sm:         0 1px 3px rgba(15,23,42,.06);
  --shadow:            0 8px 24px rgba(15,23,42,.08);
  --shadow-lg:         0 16px 40px rgba(15,23,42,.12);
  --shadow-accent:     0 4px 16px rgba(155,216,174,.20);

  --font-body:         "Noto Sans JP","Sora",sans-serif;
  --font-display:      "Sora","Noto Sans JP",sans-serif;
  --font-mono:         "Fira Code","JetBrains Mono",monospace;

  --text-xs:           12px;
  --text-sm:           13px;
  --text-base:         15px;
  --text-lg:           18px;
  --text-xl:           22px;
  --text-2xl:          28px;

  --leading-tight:     1.3;
  --leading:           1.6;
  --leading-loose:     1.85;

  --duration-fast:     100ms;
  --duration:          200ms;
  --duration-slow:     350ms;
  --ease:              cubic-bezier(.4,0,.2,1);
  --ease-spring:       cubic-bezier(.34,1.56,.64,1);

  --max-width:         1200px;
  --sidebar-width:     260px;
  --header-height:     56px;

  --z-base:            0;
  --z-dropdown:        100;
  --z-sticky:          200;
  --z-modal:           300;
  --z-toast:           400;
}

/* ── 暗色：手动切换 ───────────────────────────── */
[data-theme="dark"] {
  --accent:            #1dc99a;
  --accent-light:      #5adbb5;
  --accent-hover:      #22e0aa;
  --accent-soft:       rgba(29,201,154,.15);
  --accent-softer:     rgba(29,201,154,.07);

  --bg:                #0c1318;
  --bg-page:           #080e12;
  --panel:             #1c2835;
  --panel2:            #0f1a24;
  --panel-alt:         #1a2530;
  --panel-hover:       #1e2d3a;

  --text:              #e5edf7;
  --text-secondary:    #c4d0de;
  --muted:             #a9b7c9;
  --subtle:            #6b7f93;
  --placeholder:       #4a5c6e;

  --line:              #1d2a36;
  --line-strong:       #2a3a4a;
  --line-subtle:       #141f28;

  --shadow-sm:         0 1px 3px rgba(0,0,0,.3);
  --shadow:            0 18px 40px rgba(0,0,0,.35);
  --shadow-lg:         0 24px 56px rgba(0,0,0,.5);
}

/* ── Reset ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box }
*:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px }
html, body { height: 100% }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }
img, svg { display: block }
p { margin: 0 }
h1,h2,h3,h4,h5,h6 { margin: 0; font-family: var(--font-display) }

/* ── 通用工具类 ───────────────────────────────── */
.muted        { color: var(--muted) }
.subtle       { color: var(--subtle) }
.text-sm      { font-size: var(--text-sm) }
.text-xs      { font-size: var(--text-xs) }
.font-mono    { font-family: var(--font-mono) }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sep          { height: 1px; background: var(--line); margin: var(--space-4) 0 }

/* ── 表单基础 ─────────────────────────────────── */
label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
input[type="text"],
input[type="url"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="file"],
input[type="date"],
input[type="datetime-local"],
textarea,
select {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: 10px 12px;
  font-size: var(--text-base);
  font-family: var(--font-body);
  outline: none;
  transition: border var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
  margin-bottom: var(--space-2);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-softer);
}
textarea { min-height: 92px; resize: vertical }
.hint {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: rgba(255,255,255,.04);
  border-color: rgba(169,183,218,.18);
}
[data-theme="dark"] select {
  color: #f1f8f3;
  background-color: rgba(255,255,255,.08);
}
[data-theme="dark"] input[type="date"] { color-scheme: dark }
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); opacity: .95; cursor: pointer;
}
[data-theme="dark"] select option { color: #eaf5ee; background-color: #1a2630 }

/* ── 按钮基础 ─────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--accent-soft);
  background: var(--accent-softer);
  color: var(--text);
  padding: 10px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              filter var(--duration) var(--ease);
}
.btn:hover { filter: brightness(.97); transform: translateY(-1px); box-shadow: var(--shadow-accent) }
.btn:active { transform: translateY(0); filter: brightness(.95) }
.btn.primary { background: rgba(126,188,146,.12); border-color: rgba(126,188,146,.30) }
.btn.danger  { background: var(--color-danger-soft); border-color: rgba(185,28,28,.30); color: var(--color-danger) }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  background: var(--accent-softer);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text);
  transition: transform var(--duration) var(--ease),
              background var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}
.icon-btn:hover { transform: translateY(-1px); background: var(--accent-soft); border-color: var(--accent-soft) }
.icon-btn svg { width: 16px; height: 16px }
.icon-btn.danger { color: var(--color-danger); border-color: rgba(185,28,28,.35); background: var(--color-danger-soft) }
.icon-btn.danger:hover { background: rgba(185,28,28,.16) }

/* ── Badge ────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(255,255,255,.6);
  line-height: 1.4;
}
[data-theme="dark"] .badge { background: transparent; border-color: rgba(169,183,218,.22) }
.badge.ok      { border-color: rgba(126,188,146,.35); color: var(--color-success) }
.badge.wip     { border-color: rgba(180,83,9,.45);    color: var(--color-warning) }
.badge.off     { border-color: rgba(185,28,28,.35);   color: var(--color-danger) }
[data-theme="dark"] .badge.off {
  color: #fecaca;
  border-color: rgba(248,113,113,.55);
  background: rgba(248,113,113,.14);
}

/* ── Card ─────────────────────────────────────── */
.card {
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: var(--space-4);
}
.card h3 { font-size: var(--text-base); font-family: var(--font-display); margin-bottom: var(--space-3) }

/* ── Table ────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm) }
th, td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top }
th { color: var(--muted); font-weight: 600; background: var(--accent-softer) }

/* ── Callout ──────────────────────────────────── */
.callout {
  border: 1px solid var(--line);
  background: var(--accent-softer);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: var(--text-sm);
}
[data-theme="dark"] .callout { background: rgba(255,255,255,.04); border-color: rgba(169,183,218,.18) }

/* ── Codebox ──────────────────────────────────── */
.codebox {
  background: var(--accent-softer);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: pre-wrap;
}
[data-theme="dark"] .codebox { background: rgba(0,0,0,.25); border-color: rgba(169,183,218,.14) }

/* ── 动画 ─────────────────────────────────────── */
@keyframes rise {
  from { transform: translateY(6px); opacity: 0 }
  to   { transform: translateY(0);   opacity: 1 }
}
.animate-rise { animation: rise .4s var(--ease) both }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
}

/* ── 粒子画布 ─────────────────────────────────── */
#particle-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body.auth-body {
  position: relative;
}

/* 确保卡片在画布上方 */
body.auth-body .auth-card {
  position: relative;
  z-index: 1;
}