/* ============================================================
   Material Design 3 — 主题 Token 与组件样式
   主色 seed: #6750A4（MD3 官方默认紫）
   ============================================================ */

:root {
  /* --- 色彩 Token（浅色） --- */
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #EADDFF;
  --md-sys-color-on-primary-container: #21005D;
  --md-sys-color-secondary: #625B71;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E8DEF8;
  --md-sys-color-on-secondary-container: #1D192B;
  --md-sys-color-tertiary: #7D5260;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFD8E4;
  --md-sys-color-on-tertiary-container: #31111D;
  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #F9DEDC;
  --md-sys-color-on-error-container: #410E0B;
  --md-sys-color-background: #FEF7FF;
  --md-sys-color-on-background: #1D1B20;
  --md-sys-color-surface: #FEF7FF;
  --md-sys-color-on-surface: #1D1B20;
  --md-sys-color-surface-variant: #E7E0EC;
  --md-sys-color-on-surface-variant: #49454F;
  --md-sys-color-outline: #79747E;
  --md-sys-color-outline-variant: #CAC4D0;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F7F2FA;
  --md-sys-color-surface-container: #F3EDF7;
  --md-sys-color-surface-container-high: #ECE6F0;
  --md-sys-color-surface-container-highest: #E6E0E9;
  --md-sys-color-inverse-surface: #322F35;
  --md-sys-color-inverse-on-surface: #F5EFF7;
  --md-sys-color-inverse-primary: #D0BCFF;
  --md-sys-color-on-primary-fixed: #21005D;
  --md-sys-color-scrim: #000000;

  /* --- 形状 Token --- */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 999px;

  /* --- 动效 Token --- */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-duration-short: 150ms;
  --md-sys-motion-duration-medium: 200ms;
  --md-sys-motion-duration-long: 400ms;

  /* --- 状态层不透明度 --- */
  --md-sys-state-hover: 0.08;
  --md-sys-state-focus: 0.12;
  --md-sys-state-pressed: 0.12;

  /* --- 排版 --- */
  --md-sys-font: system-ui, -apple-system, "Segoe UI", Roboto,
    "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #D0BCFF;
    --md-sys-color-on-primary: #381E72;
    --md-sys-color-primary-container: #4F378B;
    --md-sys-color-on-primary-container: #EADDFF;
    --md-sys-color-secondary: #CCC2DC;
    --md-sys-color-on-secondary: #332D41;
    --md-sys-color-secondary-container: #4A4458;
    --md-sys-color-on-secondary-container: #E8DEF8;
    --md-sys-color-tertiary: #EFB8C8;
    --md-sys-color-on-tertiary: #492532;
    --md-sys-color-tertiary-container: #633B48;
    --md-sys-color-on-tertiary-container: #FFD8E4;
    --md-sys-color-error: #F2B8B5;
    --md-sys-color-on-error: #601410;
    --md-sys-color-error-container: #8C1D18;
    --md-sys-color-on-error-container: #F9DEDC;
    --md-sys-color-background: #141218;
    --md-sys-color-on-background: #E6E0E9;
    --md-sys-color-surface: #141218;
    --md-sys-color-on-surface: #E6E0E9;
    --md-sys-color-surface-variant: #49454F;
    --md-sys-color-on-surface-variant: #CAC4D0;
    --md-sys-color-outline: #938F99;
    --md-sys-color-outline-variant: #49454F;
    --md-sys-color-surface-container-lowest: #0F0D13;
    --md-sys-color-surface-container-low: #1D1B20;
    --md-sys-color-surface-container: #211F26;
    --md-sys-color-surface-container-high: #2B2930;
    --md-sys-color-surface-container-highest: #36343B;
    --md-sys-color-inverse-surface: #E6E0E9;
    --md-sys-color-inverse-on-surface: #322F35;
    --md-sys-color-inverse-primary: #6750A4;
  }
}

/* ================= 基础 ================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--md-sys-font);
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  min-height: 100vh;
  line-height: 1.5;
}
a { color: var(--md-sys-color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ================= 顶部应用栏 ================= */
.top-app-bar {
  position: sticky; top: 0; z-index: 10;
  background: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.app-bar-inner {
  max-width: 720px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 12px;
}
.app-bar-icon { font-size: 22px; }
.app-bar-title {
  font-size: 20px; font-weight: 600; letter-spacing: 0.25px;
  flex: 1;
}
.app-bar-link {
  font-size: 14px; color: var(--md-sys-color-on-surface-variant);
  padding: 8px 12px; border-radius: var(--md-sys-shape-corner-full);
  transition: background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.app-bar-link:hover { background: var(--md-sys-color-surface-container-high); text-decoration: none; }

/* ================= 页面布局 ================= */
.page { max-width: 720px; margin: 0 auto; padding: 32px 20px 64px; }
.hero { text-align: center; margin-bottom: 28px; }
.hero h1 {
  font-size: 34px; font-weight: 700; letter-spacing: 0;
  margin-bottom: 8px;
}
.hero .subtitle { font-size: 15px; color: var(--md-sys-color-on-surface-variant); }

/* ================= 卡片 ================= */
.card {
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-extra-large);
  padding: 24px;
  border: 1px solid var(--md-sys-color-outline-variant);
}
.card h2 { font-size: 18px; font-weight: 600; margin-bottom: 16px; }

/* ================= 按钮 ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0.1px;
  padding: 10px 24px;
  border-radius: var(--md-sys-shape-corner-full);
  height: 40px;
  position: relative; overflow: hidden;
  transition: background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              box-shadow var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard),
              transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.38; pointer-events: none; }

.btn.filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.btn.filled:hover { box-shadow: 0 2px 6px rgba(0,0,0,.24); }
.btn.filled:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }

.btn.tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.btn.tonal:hover { background: var(--md-sys-color-secondary-container); filter: brightness(0.96); }

.btn.outlined { background: transparent; color: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline); }
.btn.outlined:hover { background: var(--md-sys-color-primary-container); }

.btn.icon-btn {
  width: 40px; padding: 0; border-radius: var(--md-sys-shape-corner-full);
  background: transparent; color: var(--md-sys-color-on-surface-variant);
  font-size: 16px;
}
.btn.icon-btn:hover { background: var(--md-sys-color-surface-container-high); }
.btn.icon-btn.danger { color: var(--md-sys-color-error); }

/* 加载中态 */
.btn.loading { position: relative; color: transparent; }
.btn.loading::after {
  content: ""; position: absolute;
  width: 18px; height: 18px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  color: var(--md-sys-color-on-primary);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ================= 文本输入框（Filled） ================= */
.field { position: relative; margin-bottom: 20px; }
.field input, .field select {
  width: 100%;
  font-family: inherit; font-size: 16px;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-highest);
  border: none; outline: none;
  padding: 24px 16px 8px;
  border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
  border-bottom: 1px solid var(--md-sys-color-outline);
  transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.field label {
  position: absolute; left: 16px; top: 16px;
  font-size: 16px; color: var(--md-sys-color-on-surface-variant);
  pointer-events: none;
  transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
  transform-origin: left top;
}
.field input:focus, .field select:focus {
  border-bottom-color: var(--md-sys-color-primary);
  box-shadow: inset 0 -2px 0 var(--md-sys-color-primary);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:not(:placeholder-shown) + label,
.field select:valid + label {
  top: 8px; font-size: 12px; color: var(--md-sys-color-primary);
}
.field select { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2379747E' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.field-helper {
  display: block; font-size: 12px; color: var(--md-sys-color-on-surface-variant);
  margin-top: 4px; padding-left: 16px;
}
.field.error input { border-bottom-color: var(--md-sys-color-error); box-shadow: inset 0 -2px 0 var(--md-sys-color-error); }
.field.error input:focus + label,
.field.error input:not(:placeholder-shown) + label { color: var(--md-sys-color-error); }
.field.error .field-helper { color: var(--md-sys-color-error); }

/* 行内布局 */
.field-row { display: flex; gap: 16px; }
.field-row .field { flex: 1; }
.field-row .field.grow { flex: 2; }

/* ================= Tab 栏 ================= */
.tab-bar {
  display: flex; gap: 4px; padding: 0 16px; overflow-x: auto;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  position: sticky; top: 61px; z-index: 5;
  background: var(--md-sys-color-surface);
}
.tab {
  flex: 1; min-width: max-content;
  padding: 12px 20px; font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--md-sys-color-on-surface-variant);
  background: transparent; border: none; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.tab:hover { color: var(--md-sys-color-on-surface); }
.tab.active { color: var(--md-sys-color-primary); border-bottom-color: var(--md-sys-color-primary); }

.panel { display: none; margin-top: 24px; }
.panel.active { display: block; }

/* ================= 统计卡片 ================= */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px; margin-bottom: 28px;
}
.stat-card {
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  padding: 20px; text-align: center;
}
.stat-num { display: block; font-size: 32px; font-weight: 700; color: var(--md-sys-color-primary); }
.stat-label { font-size: 13px; color: var(--md-sys-color-on-surface-variant); }

/* ================= 表格 ================= */
.table-wrap { overflow-x: auto; border-radius: var(--md-sys-shape-corner-medium);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-lowest); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
  color: var(--md-sys-color-on-surface-variant);
  padding: 12px 16px; border-bottom: 1px solid var(--md-sys-color-outline-variant);
  white-space: nowrap;
}
.table td {
  padding: 12px 16px; border-bottom: 1px solid var(--md-sys-color-outline-variant);
  vertical-align: middle; word-break: break-all;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--md-sys-color-surface-container-low); }
.table .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; }
.table .muted { color: var(--md-sys-color-on-surface-variant); font-size: 12px; }
.table .empty { text-align: center; color: var(--md-sys-color-on-surface-variant); padding: 32px; }

/* ================= 分页 ================= */
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.pager span { font-size: 13px; color: var(--md-sys-color-on-surface-variant); }

/* ================= 工具条 ================= */
.panel-toolbar { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.panel-toolbar .field { flex: 1; margin-bottom: 0; }
.panel-toolbar .field input { padding-top: 18px; padding-bottom: 10px; }

/* ================= 结果卡片 ================= */
.result-card { margin-top: 24px; animation: fadeUp 300ms var(--md-sys-motion-easing-standard); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.result-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 12px 16px;
}
.result-row a { flex: 1; font-family: ui-monospace, monospace; font-size: 16px; word-break: break-all; color: var(--md-sys-color-on-primary-container); }
.result-row a:hover { text-decoration: underline; }
.result-card .meta { margin-top: 12px; font-size: 13px; color: var(--md-sys-color-on-surface-variant); }

/* ================= 操作区 ================= */
.actions { margin-top: 8px; display: flex; justify-content: flex-end; }

/* ================= 开关（Switch） ================= */
.switch-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; margin-bottom: 8px;
}
.switch-row > span { font-size: 15px; }
.switch {
  width: 52px; height: 32px; border-radius: var(--md-sys-shape-corner-full);
  border: none; background: var(--md-sys-color-surface-container-highest);
  position: relative; cursor: pointer;
  border: 2px solid var(--md-sys-color-outline);
  transition: background var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard),
              border-color var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}
.switch::after {
  content: ""; position: absolute; top: 50%; left: 2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--md-sys-color-outline);
  transform: translateY(-50%);
  transition: left var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard),
              background var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}
.switch[aria-checked="true"] { background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }
.switch[aria-checked="true"]::after { left: calc(100% - 26px); background: var(--md-sys-color-on-primary); }

/* 隐形短链选项 */
.zw-row { margin: 4px 0 8px; }
.zw-tip { display: block; font-size: 12px; color: var(--md-sys-color-on-surface-variant); margin-top: 2px; }

/* ================= 设置面板 ================= */
.settings-card .field { max-width: 320px; }

/* ================= Snackbar ================= */
.snackbar {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 80px);
  background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface);
  padding: 12px 20px; border-radius: var(--md-sys-shape-corner-extra-small);
  font-size: 14px; box-shadow: 0 3px 8px rgba(0,0,0,.3);
  opacity: 0; pointer-events: none;
  transition: transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard),
              opacity var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
  z-index: 100; max-width: min(480px, calc(100vw - 32px)); text-align: center;
}
.snackbar.show { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 560px) {
  .field-row { flex-direction: column; gap: 0; }
  .hero h1 { font-size: 26px; }
}