/* ============================================================
   授权码管理系统 · 设计系统 (Design Tokens + 基础组件)
   调性：专业 / 克制 / 精致    色系：薰衣草紫 (Lavender)
   网格：8pt      圆角：8 / 12 / 16      动效：Material Standard
   ============================================================ */

:root {
  /* ---------- 品牌主色：薰衣草紫 ---------- */
  --p-700: #4F46C9;
  --p-600: #5A5AD6;
  --p-500: #6C63FF;
  --p-100: #E8E7FF;
  --p-50:  #F3F3FF;

  /* ---------- 语义色 ---------- */
  --success-600: #12A150;
  --success-100: #DCF5E7;
  --warning-600: #D97706;
  --warning-100: #FDF0DC;
  --danger-600:  #E5484D;
  --danger-100:  #FDE7E8;
  --info-600:    #2F6FEB;
  --info-100:    #E1ECFE;

  /* ---------- 中性灰阶（带一丝蓝紫，避免死灰） ---------- */
  --n-900: #12141A;
  --n-800: #2B303B;
  --n-700: #454B59;
  --n-600: #5F6572;
  --n-500: #7C828F;
  --n-400: #9BA1AD;
  --n-300: #C5CAD3;
  --n-200: #E4E7EE;
  --n-100: #EFF1F6;
  --n-50:  #F6F7FB;

  /* ---------- 表面 ---------- */
  --bg:        #F5F6FA;
  --surface:   #FFFFFF;
  --surface-2: #FAFBFE;

  /* ---------- 文本 ---------- */
  --text:      var(--n-900);
  --text-2:    var(--n-600);
  --text-3:    var(--n-400);

  /* ---------- 圆角 ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  /* ---------- 间距（8pt 网格） ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* ---------- 阴影（克制的两层） ---------- */
  --sh-1: 0 1px 2px rgba(18,20,26,.04), 0 1px 3px rgba(18,20,26,.05);
  --sh-2: 0 2px 4px rgba(18,20,26,.04), 0 8px 20px -6px rgba(18,20,26,.10);
  --sh-3: 0 12px 32px -8px rgba(18,20,26,.16);

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --d-1: 120ms;
  --d-2: 200ms;
  --d-3: 320ms;

  /* ---------- 字体 ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC",
               "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, Menlo, monospace;
}

/* ================= 基础重置 ================= */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 22px; line-height: 1.3; }
h2 { font-size: 17px; line-height: 1.35; }
h3 { font-size: 15px; line-height: 1.4; }
a { color: var(--p-600); text-decoration: none; }

/* ================= 卡片 ================= */
.card {
  background: var(--surface);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: var(--s-6);
  transition: box-shadow var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.card-hover:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }

/* ================= 按钮 ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 38px; padding: 0 16px;
  font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: -.005em;
  border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background var(--d-1) var(--ease), border-color var(--d-1) var(--ease),
              box-shadow var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.btn:active { transform: scale(.975); }
.btn:focus-visible { outline: 2px solid var(--p-500); outline-offset: 2px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--p-600); color: #fff; box-shadow: var(--sh-1); }
.btn-primary:hover { background: var(--p-700); box-shadow: var(--sh-2); }

.btn-tonal { background: var(--p-50); color: var(--p-700); }
.btn-tonal:hover { background: var(--p-100); }

.btn-outline { background: var(--surface); color: var(--n-700); border-color: var(--n-300); }
.btn-outline:hover { border-color: var(--p-500); color: var(--p-700); background: var(--p-50); }

.btn-ghost { background: transparent; color: var(--n-600); }
.btn-ghost:hover { background: var(--n-100); color: var(--n-900); }

.btn-danger { background: var(--surface); color: var(--danger-600); border-color: var(--n-300); }
.btn-danger:hover { background: var(--danger-100); border-color: var(--danger-600); }

.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-lg { height: 44px; padding: 0 22px; font-size: 15px; }
.btn-block { width: 100%; }

/* ================= 输入框（Apple 风格：浅底无框） ================= */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 12.5px; font-weight: 500; color: var(--n-600); letter-spacing: .01em; }

.input, .select {
  width: 100%; height: 40px; padding: 0 12px;
  font-family: inherit; font-size: 14px; color: var(--text);
  background: var(--n-100);
  border: 1px solid transparent; border-radius: var(--r-sm);
  outline: none;
  transition: background var(--d-1) var(--ease), border-color var(--d-1) var(--ease),
              box-shadow var(--d-1) var(--ease);
}
.input::placeholder { color: var(--n-400); }
.input:hover { background: var(--n-200); }
.input:focus, .select:focus {
  background: var(--surface);
  border-color: var(--p-500);
  box-shadow: 0 0 0 3px var(--p-100);
}
.select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%237C828F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}
textarea.input { height: auto; padding: 10px 12px; line-height: 1.6; resize: vertical; }

/* ================= 徽章 / Chip ================= */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.ok      { background: var(--success-100); color: var(--success-600); }
.badge.expired { background: var(--warning-100); color: var(--warning-600); }
.badge.off     { background: var(--n-100);       color: var(--n-500); }
.badge.danger  { background: var(--danger-100);  color: var(--danger-600); }
.badge.info    { background: var(--info-100);    color: var(--info-600); }

/* ================= 表格 ================= */
.table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--s-6)); padding: 0 var(--s-6); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2);
  color: var(--n-600); font-weight: 500; font-size: 12.5px; letter-spacing: .02em;
  text-align: left; padding: 10px 12px; white-space: nowrap;
  border-bottom: 1px solid var(--n-200);
}
thead th:first-child { border-top-left-radius: var(--r-sm); }
thead th:last-child { border-top-right-radius: var(--r-sm); }
tbody td { padding: 12px; border-bottom: 1px solid var(--n-100); vertical-align: middle; }
tbody tr { transition: background var(--d-1) var(--ease); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
td.mono, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
td.num { font-variant-numeric: tabular-nums; }

.empty { text-align: center; color: var(--n-400); padding: var(--s-10) 0; font-size: 13.5px; }

/* ================= 代码块 ================= */
.code-box {
  background: var(--n-50); border: 1px solid var(--n-200); border-radius: var(--r-md);
  padding: 12px 14px; font-family: var(--font-mono); font-size: 12.5px;
  line-height: 1.75; color: var(--n-800);
  word-break: break-all; white-space: pre-wrap;
}
pre {
  background: #191C24; color: #D7DAE3; border-radius: var(--r-md);
  padding: 16px 18px; overflow-x: auto; font-size: 12.5px; line-height: 1.7;
  font-family: var(--font-mono); margin: 10px 0 0;
}

/* ================= 提示块 ================= */
.hint { font-size: 12.5px; color: var(--text-3); line-height: 1.7; }
.alert {
  border-radius: var(--r-md); padding: 12px 14px; font-size: 13px; line-height: 1.7;
  border: 1px solid transparent;
}
.alert-warn { background: var(--warning-100); color: #8A4B04; border-color: #F5D9A8; }
.alert-info { background: var(--info-100); color: #1B4CAF; border-color: #C7DBFB; }
.alert-danger { background: var(--danger-100); color: #A3242A; border-color: #F7C5C7; }

/* ================= Toast ================= */
#toast {
  position: fixed; left: 50%; top: 20px; transform: translateX(-50%) translateY(-8px);
  display: none; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-full);
  color: #fff; font-size: 13.5px; font-weight: 500;
  box-shadow: var(--sh-3); z-index: 99; max-width: min(90vw, 520px);
  opacity: 0; transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease-spring);
}
#toast.show { display: inline-flex; opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.success { background: var(--success-600); }
#toast.error { background: var(--danger-600); }

/* ================= 入场动效（交错淡入） ================= */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.rise { animation: riseIn var(--d-3) var(--ease) both; }
.rise:nth-child(1) { animation-delay: 0ms; }
.rise:nth-child(2) { animation-delay: 50ms; }
.rise:nth-child(3) { animation-delay: 100ms; }
.rise:nth-child(4) { animation-delay: 150ms; }
.rise:nth-child(5) { animation-delay: 200ms; }

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

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: var(--r-full); border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--n-400); }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   暗色模式（跟随系统 prefers-color-scheme）
   策略：只翻转表面 / 文本 / 中性阶 / 阴影，品牌紫与语义色保留识别度
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    /* 中性阶整体提亮作为暗色表面 */
    --n-900: #F2F3F8;
    --n-800: #D9DCE6;
    --n-700: #B4BAC9;
    --n-600: #8A91A3;
    --n-500: #6B7280;
    --n-400: #565D6B;
    --n-300: #3A4150;
    --n-200: #2A3040;
    --n-100: #222836;
    --n-50:  #1B2130;

    --bg:        #12151F;
    --surface:   #1A1F2E;
    --surface-2: #20263A;

    --text:      #E8EAF2;
    --text-2:    #A6ACC0;
    --text-3:    #6E7690;

    /* 品牌紫的浅色变体压暗，避免亮块刺眼 */
    --p-100: #2A2B52;
    --p-50:  #20223E;
    --p-500: #8B85FF;
    --p-600: #7B75F5;
    --p-700: #A5A0FF;

    /* 语义色提亮保证对比度，100 级作为深色底 */
    --success-600: #3ECF8E; --success-100: #122B20;
    --warning-600: #F5A623; --warning-100: #2E2110;
    --danger-600:  #FF6B70; --danger-100:  #33191C;
    --info-600:    #6B9DFF; --info-100:    #152443;

    --sh-1: 0 1px 2px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.32);
    --sh-2: 0 2px 4px rgba(0,0,0,.30), 0 8px 20px -6px rgba(0,0,0,.45);
    --sh-3: 0 12px 32px -8px rgba(0,0,0,.55);
  }

  /* 骨架屏在暗色下的渐变 */
  .sk {
    background: linear-gradient(90deg, var(--n-100) 25%, var(--n-300) 37%, var(--n-100) 63%);
    background-size: 400% 100%;
  }

  /* 渐变 logo 在暗色下略微降亮度 */
  .logo { box-shadow: var(--sh-2); }
}