/**
 * AKSRT Design Tokens v7 — 1:1 legacy Alignment
 * ------------------------------------------------------------
 * 单一真理源（Single Source of Truth）
 * 所有颜色、字体、间距、动效都从此处读取，禁止在组件内硬编码。
 * 严格对齐 legacy main.css 的视觉值。
 */

:root {
  /* ===== Primary — legacy theme-color (#f04494 pink) ===== */
  --color-primary:         #f04494;
  --color-primary-hover:   #e0307e;
  --color-primary-active:  #c9206d;
  --color-primary-soft:    rgba(240, 68, 148, 0.10);
  --color-primary-softer:  rgba(240, 68, 148, 0.05);
  --color-on-primary:      #FFFFFF;

  /* ===== Ink (text) — 对齐 legacy --key-color / --main-color / --muted-color ===== */
  --color-ink:             #333333;   /* legacy --key-color */
  --color-ink-2:           #4e5358;   /* legacy --main-color */
  --color-ink-3:           #777777;   /* legacy --muted-color */
  --color-ink-4:           #999999;   /* legacy --muted-2-color */

  /* ===== Surface — 对齐 legacy --body-bg-color / --main-bg-color / --muted-bg-color ===== */
  --surface-page:          #f5f6f7;   /* legacy --body-bg-color */
  --surface-1:             #FFFFFF;   /* legacy --main-bg-color */
  --surface-2:             #eeeeee;   /* legacy --muted-bg-color */
  --surface-3:             #e8e8e8;   /* 输入框 / code */

  /* ===== Borders — 对齐 legacy --main-border-color ===== */
  --color-line:            rgba(50, 50, 50, 0.06);
  --color-line-soft:       rgba(0, 0, 0, 0.03);

  /* ===== State colors ===== */
  --color-success:         #10B981;
  --color-warning:         #F59E0B;
  --color-error:           #EF4444;
  --color-info:            #3B82F6;

  /* ===== Accent (action green — legacy tabbar/CTA) ===== */
  --color-accent:          #18a058;
  --color-accent-soft:     rgba(24, 160, 88, 0.12);
  --color-accent-shadow:   rgba(24, 160, 88, 0.28);

  /* ===== Fonts — 对齐 legacy（系统默认字体栈）===== */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-ui:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono:    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  /* ===== Type scale ===== */
  --text-xs:    0.75rem;    /* 12 */
  --text-sm:    0.875rem;   /* 14 */
  --text-base:  1rem;       /* 16 */
  --text-md:    1.125rem;   /* 18 */
  --text-lg:    1.25rem;    /* 20 */
  --text-xl:    1.5rem;     /* 24 */
  --text-2xl:   1.875rem;   /* 30 */
  --text-3xl:   2.25rem;    /* 36 */
  --text-4xl:   3rem;       /* 48 */
  --text-5xl:   3.75rem;    /* 60 */
  --leading-tight:    1.2;
  --leading-snug:     1.4;
  --leading-normal:   1.6;   /* legacy body line-height */
  --leading-relaxed:  1.6;

  /* ===== Spacing (4px base) ===== */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   48px;
  --space-10:  64px;
  --space-11:  80px;
  --space-12:  96px;

  /* ===== Radius — 对齐 legacy --main-radius: 8px ===== */
  --radius-sm:    4px;
  --radius:       8px;
  --radius-lg:    8px;
  --radius-xl:    12px;
  --radius-pill:  100px;
  --radius-avatar: 50%;

  /* ===== Shadows — 对齐 legacy --main-shadow: rgba(116,116,116,0.08) ===== */
  --shadow-sm:     0 0 10px rgba(116, 116, 116, 0.08);
  --shadow:        0 0 10px rgba(116, 116, 116, 0.08);
  --shadow-lg:     0 0 10px rgba(116, 116, 116, 0.12);
  --shadow-drawer: 0 8px 40px rgba(0, 0, 0, 0.20);

  /* ===== Layout — 对齐 legacy --mian-max-width: 1200px ===== */
  --nav-height:                 60px;
  --container:                  1200px;
  --container-wide:             1440px;
  --container-read:             720px;
  --container-page:             860px;
  --sidebar-width:              300px;
  --content-gap:                48px;
  --sidebar-bp:                 1024px;

  /* ===== Motion ===== */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast:    0.15s;
  --dur:         0.25s;
  --dur-slow:    0.4s;

  /* ===== Focus Ring — 对齐 legacy focus-shadow-color ===== */
  --focus-ring: 0 0 2px 3px rgba(253, 83, 161, 0.4);

  /* ===== Z-index layers ===== */
  --z-dropdown:    100;
  --z-sticky:      200;
  --z-fixed:       300;
  --z-overlay:     400;
  --z-modal:       500;
  --z-popover:     600;
  --z-toast:       700;
  --z-tooltip:     800;

  /* ===== Button sizes — 对齐 legacy ===== */
  --radius-btn:   4px;
  --btn-sm-h:     28px;
  --btn-md-h:     34px;
  --btn-lg-h:     44px;

  /* ===== Card density — 对齐 legacy .box-body { padding: 15px } ===== */
  --card-padding:       15px;
  --card-padding-sm:    10px;
  --card-gap:           16px;

  /* ===== Skeleton loader ===== */
  --skeleton-base:  var(--surface-2);
  --skeleton-shine: var(--surface-1);

  /* ===== Extended tokens (used by components) ===== */
  --color-primary-light: var(--color-primary-soft);
  --color-surface:       var(--surface-1);
  --color-line-strong:   var(--color-line);
  --color-bg-hover:      var(--surface-2);
  --color-border-light:  var(--color-line-soft);
  --color-fill:          var(--surface-2);
  --color-warning-bg:    #fffbe6;
  --color-warning-text:  #ad6800;

  --text-secondary:  var(--color-ink-3);
  --text-tertiary:   var(--color-ink-4);

  --surface-active:    var(--surface-2);
  --surface-card:      var(--surface-1);
  --surface-hover:     var(--surface-2);
  --surface-secondary: var(--surface-2);

  --radius-code:   var(--radius);
  --radius-full:   100px;
  --shadow-xl:     0 0 10px rgba(116, 116, 116, 0.12);
  --space-16:      64px;
  --z-floating:    900;

  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;

  /* ===== Composite / Context tokens — 对齐 legacy ===== */
  --header-bg:     var(--blur-bg);
  --header-color:  var(--color-ink-2);
  --footer-bg:     var(--surface-1);
  --footer-color:  var(--color-ink-4);
  --blur-bg:       rgba(255, 255, 255, 0.80);
  --float-btn-bg:  rgba(200, 200, 200, 0.40);

  /* ===== AKSRT-to-AKSRT canonical aliases ===== */
  --content-max:        var(--container);
  --font-heading:       var(--font-ui);
  --radius-card:        var(--radius);
  --radius-md:          var(--radius);
  --color-primary-50:   var(--color-primary-soft);
  --color-primary-dark: var(--color-primary-active);
  --shadow-md:          var(--shadow);
  --mini-radius:        calc(var(--radius) / 1.4);
  --single-cover-scale: 35%;

  /* ===== Avatar size system — legacy --this-size 等价 ===== */
  --aksrt-avatar-size-xs:   24px;
  --aksrt-avatar-size-sm:   32px;
  --aksrt-avatar-size:      40px;
  --aksrt-avatar-size-lg:   56px;
  --aksrt-avatar-size-xl:   80px;

  /* ===== Post card thumbnail scale ===== */
  --aksrt-card-thumb-scale:  56.25%;  /* 16:9 */

  /* ===== Multi-color palette (for buttons / badges / gradients) ===== */
  --aksrt-rose:       #f43f5e;
  --aksrt-rose-soft:  rgba(244, 63, 94, 0.12);
  --aksrt-blue:       #3b82f6;
  --aksrt-blue-soft:  rgba(59, 130, 246, 0.12);
  --aksrt-green:      #10b981;
  --aksrt-green-soft: rgba(16, 185, 129, 0.12);
  --aksrt-orange:     #f97316;
  --aksrt-orange-soft:rgba(249, 115, 22, 0.12);
  --aksrt-purple:     #8b5cf6;
  --aksrt-purple-soft:rgba(139, 92, 246, 0.12);
  --aksrt-cyan:       #06b6d4;
  --aksrt-cyan-soft:  rgba(6, 182, 212, 0.12);
  --aksrt-yellow:     #eab308;
  --aksrt-yellow-soft:rgba(234, 179, 8, 0.12);
  --aksrt-red:        #ef4444;
  --aksrt-red-soft:   rgba(239, 68, 68, 0.12);
  --aksrt-teal:       #14b8a6;
  --aksrt-teal-soft:  rgba(20, 184, 166, 0.12);
  --aksrt-indigo:     #6366f1;
  --aksrt-indigo-soft:rgba(99, 102, 241, 0.12);
  --aksrt-pink:       #ec4899;
  --aksrt-pink-soft:  rgba(236, 72, 153, 0.12);

  /* ===== VIP / special gradients ===== */
  --aksrt-vip-gold-1: #f6d365;
  --aksrt-vip-gold-2: #fda085;
  --aksrt-grad-sunset-1: #f093fb;
  --aksrt-grad-sunset-2: #f5576c;
  --aksrt-grad-ocean-1:  #4facfe;
  --aksrt-grad-ocean-2:  #00f2fe;
  --aksrt-grad-forest-1: #43e97b;
  --aksrt-grad-forest-2: #38f9d7;
  --aksrt-grad-night-1:  #a18cd1;
  --aksrt-grad-night-2:  #fbc2eb;
  --aksrt-grad-fire-1:   #f83600;
  --aksrt-grad-fire-2:   #f9d423;

  /* ===== Component sizing ===== */
  --aksrt-toggle-w:       44px;
  --aksrt-toggle-h:       24px;
  --aksrt-stepper-h:      36px;
  --aksrt-badge-h:        22px;

  /* ===== Legacy name bridge ===== */
  --text-1:       var(--color-ink);
  --text-2:       var(--color-ink-2);
  --text-3:       var(--color-ink-3);
  --border:       var(--color-line);
  --color-text-1: var(--color-ink);
  --color-text-2: var(--color-ink-2);
  --color-text-3: var(--color-ink-3);
  --color-primary-bg: var(--color-primary-softer);
  --color-danger: var(--color-error);
}

/* ============================================================
 * Blur-bg fallback cascade (mirrors legacy behaviour)
 * ============================================================ */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root {
    --blur-bg: var(--surface-1);
    --header-bg: var(--surface-1);
  }
}

body.modal-open,
body.dialog-open {
  --blur-bg: var(--surface-1);
  --header-bg: var(--surface-1);
}

body.modal-open .site-nav,
body.modal-open .footer-tabbar,
body.modal-open .float-right .float-btn,
body.dialog-open .site-nav,
body.dialog-open .footer-tabbar,
body.dialog-open .float-right .float-btn {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================================
 * Dark Theme — 对齐 legacy .dark-theme (#292a2d 范围)
 * ============================================================ */
html.dark {
  --color-ink:             #f8fafc;
  --color-ink-2:           #e5eef7;
  --color-ink-3:           #b4b6bb;
  --color-ink-4:           #888a8f;

  --surface-page:          #292a2d;
  --surface-1:             #323335;
  --surface-2:             #2d2e31;
  --surface-3:             #3a3b3e;

  --color-line:            rgba(114, 114, 114, 0.1);
  --color-line-soft:       rgba(184, 184, 184, 0.02);

  --color-primary-soft:    rgba(240, 68, 148, 0.16);
  --color-primary-softer:  rgba(240, 68, 148, 0.08);

  --color-primary-light: var(--color-primary-soft);
  --color-surface:       var(--surface-1);
  --color-line-strong:   var(--color-line);
  --color-bg-hover:      var(--surface-2);
  --color-border-light:  var(--color-line-soft);
  --color-fill:          var(--surface-2);

  --text-secondary:  var(--color-ink-3);
  --text-tertiary:   var(--color-ink-4);

  --surface-active:    var(--surface-2);
  --surface-card:      var(--surface-1);
  --surface-hover:     var(--surface-2);
  --surface-secondary: var(--surface-2);

  --shadow-xl:     0 0 10px rgba(24, 24, 24, 0.15);

  --shadow-sm:     0 0 10px rgba(24, 24, 24, 0.1);
  --shadow:        0 0 10px rgba(24, 24, 24, 0.1);
  --shadow-lg:     0 0 10px rgba(24, 24, 24, 0.15);
  --shadow-drawer: 0 8px 40px rgba(0, 0, 0, 0.55);

  --blur-bg:       rgba(50, 51, 53, 0.80);
  --float-btn-bg:  rgba(70, 70, 70, 0.40);
  --header-bg:     var(--blur-bg);
  --footer-bg:     var(--surface-1);
  --footer-color:  var(--color-ink-4);
  --shadow-md:     var(--shadow);

  --skeleton-base:  #3a3b3e;
  --skeleton-shine: #444548;

  /* Multi-color palette — dark mode: same hue, softer tint backgrounds */
  --aksrt-rose-soft:  rgba(244, 63, 94, 0.18);
  --aksrt-blue-soft:  rgba(59, 130, 246, 0.18);
  --aksrt-green-soft: rgba(16, 185, 129, 0.18);
  --aksrt-orange-soft:rgba(249, 115, 22, 0.18);
  --aksrt-purple-soft:rgba(139, 92, 246, 0.18);
  --aksrt-cyan-soft:  rgba(6, 182, 212, 0.18);
  --aksrt-yellow-soft:rgba(234, 179, 8, 0.18);
  --aksrt-red-soft:   rgba(239, 68, 68, 0.18);
  --aksrt-teal-soft:  rgba(20, 184, 166, 0.18);
  --aksrt-indigo-soft:rgba(99, 102, 241, 0.18);
  --aksrt-pink-soft:  rgba(236, 72, 153, 0.18);
}

/* Dark mode component refinements */
html.dark .site-nav {
  border-bottom-color: var(--color-line);
  box-shadow: none;
}

html.dark .footer-tabbar {
  background: rgba(50, 51, 53, 0.80);
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.20);
}

html.dark .n-drawer,
html.dark .n-modal,
html.dark .n-dialog {
  background: var(--surface-1);
}

html.dark .post-card,
html.dark .widget,
html.dark .aksrt-theme-box,
html.dark .theme-box {
  border-color: var(--color-line);
}
/**
 * AKSRT Reset
 * 现代精简 reset，结合 box-sizing 与 a11y 友好的默认值。
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background-color: var(--surface-page);
  color: var(--color-ink-2);
  transition: background-color 0.25s ease, color 0.25s ease;
  overflow-x: hidden;
}

/* 媒体元素 */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 表单元素继承字体 */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* 链接 */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

a:hover {
  color: var(--color-primary);
}

/* 焦点环：a11y 关键 */
:focus {
  outline: none;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

/* 选区色 */
::selection {
  background: var(--color-primary-soft);
  color: var(--color-ink);
}

/* 屏幕阅读器隐藏 */
.screen-reader-text,
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus,
.sr-only:focus {
  position: fixed !important;
  top: 16px;
  left: 16px;
  width: auto;
  height: auto;
  padding: 8px 16px;
  background: var(--surface-1);
  color: var(--color-ink);
  z-index: 100000;
  clip: auto;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius);
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/**
 * AKSRT Typography — 1:1 legacy Alignment
 *
 * 对齐 legacy main.css 的排版系统
 */

/* ===== 全局标题 — 对齐 legacy line 8947 ===== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  margin: 20px 0 10px;
  color: var(--key-color, #333);
}

h1 { font-size: 22px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 15px; }
h6 { font-size: 14px; }

/* ===== 文章正文 — 对齐 legacy line 8740 ===== */
.wp-posts-content,
.entry-content,
.prose {
  font-size: 16px;
  line-height: 2;
  color: var(--main-color, #4e5358);
  min-height: 90px;
}

/* ===== 文章内标题 — 对齐 legacy line 8947 ===== */
.wp-posts-content h1,
.wp-posts-content h2,
.wp-posts-content h3,
.wp-posts-content h4,
.wp-posts-content h5,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5 {
  font-weight: 700;
  margin: 20px 0 10px;
  color: var(--key-color, #333);
}

.wp-posts-content h1,
.entry-content h1,
.prose h1 { font-size: 22px; }

.wp-posts-content h2,
.entry-content h2,
.prose h2 { font-size: 20px; }

.wp-posts-content h3,
.entry-content h3,
.prose h3 { font-size: 18px; }

.wp-posts-content h4,
.entry-content h4,
.prose h4 { font-size: 16px; }

/* ===== 段落 — 对齐 legacy line 8999 ===== */
.wp-posts-content p,
.entry-content p,
.prose p {
  margin: 0 0 20px;
  word-wrap: break-word;
}

/* ===== 链接 — 对齐 legacy line 8836 ===== */
.wp-posts-content a,
.entry-content a,
.prose a {
  color: var(--focus-color, #f04494);
  text-decoration: none;
}

.wp-posts-content a:hover,
.entry-content a:hover,
.prose a:hover {
  color: var(--focus-color, #f04494);
}

/* ===== 图片 — 对齐 legacy line 8850 ===== */
.wp-posts-content img,
.entry-content img,
.prose img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}

/* ===== 内联代码 — 对齐 legacy line 8844 ===== */
.wp-posts-content code:not(pre code),
.entry-content code:not(pre code),
.prose code:not(pre code) {
  color: #ff3c98;
  background: rgba(253, 153, 153, 0.2);
  font-family: var(--font-mono, monospace);
  font-size: 0.9em;
}

/* ===== 代码块 — 对齐 legacy ===== */
.wp-posts-content pre,
.entry-content pre,
.prose pre {
  position: relative;
  background: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: var(--main-radius, 8px);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 20px;
}

.wp-posts-content pre code,
.entry-content pre code,
.prose pre code {
  color: inherit;
  background: none;
  padding: 0;
  font-size: inherit;
}

/* ===== 表格 — 对齐 legacy line 8897 ===== */
.wp-posts-content table,
.entry-content table,
.prose table {
  font-size: 14px;
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
}

.wp-posts-content th,
.wp-posts-content td,
.entry-content th,
.entry-content td,
.prose th,
.prose td {
  border: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.06));
  padding: 8px;
}

.wp-posts-content th,
.entry-content th,
.prose th {
  background: var(--muted-border-color, rgba(0, 0, 0, 0.03));
  font-weight: 700;
}

.wp-posts-content tr:hover,
.entry-content tr:hover,
.prose tr:hover {
  background-color: rgba(240, 68, 148, 0.05);
}

/* ===== 列表 — 对齐 legacy line 8977 ===== */
.wp-posts-content ul,
.wp-posts-content ol,
.entry-content ul,
.entry-content ol,
.prose ul,
.prose ol {
  margin: 10px 0 20px 15px;
  padding-left: 15px;
}

.wp-posts-content li,
.entry-content li,
.prose li {
  margin-bottom: 10px;
}

/* ===== 引用 — 对齐 legacy line 680 ===== */
.wp-posts-content blockquote,
.entry-content blockquote,
.prose blockquote {
  padding: 15px 20px;
  margin: 0 0 20px;
  border-left: 4px solid var(--main-border-color, rgba(50, 50, 50, 0.06));
  background: var(--muted-border-color, rgba(0, 0, 0, 0.03));
  font-size: 16px;
  color: var(--muted-color, #777);
  border-radius: 0;
}

.wp-posts-content blockquote p:last-child,
.entry-content blockquote p:last-child,
.prose blockquote p:last-child {
  margin-bottom: 0;
}

/* ===== 水平分割线 — 对齐 legacy line 676 ===== */
hr {
  border-color: var(--main-border-color, rgba(50, 50, 50, 0.06));
}

/* ===== Strong / Bold ===== */
strong, b {
  font-weight: 700;
}
/**
 * AKSRT Buttons — 1:1 legacy Alignment
 *
 * 对齐 legacy .but 系统：
 * - 正常字重 (normal)
 * - 4px 圆角
 * - 灰色默认背景
 * - opacity hover
 */

.btn,
.btn-primary,
.btn-outline,
.btn-ghost,
.btn-danger {
  --btn-h: 34px;
  --btn-px: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  font-size: var(--text-sm);
  font-weight: normal;
  line-height: 1.44;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

/* 尺寸变体 */
.btn-sm { --btn-h: 28px; --btn-px: 8px; font-size: var(--text-xs); }
.btn-lg { --btn-h: 44px; --btn-px: 18px; font-size: var(--text-base); }

/* === Default (gray background, like legacy .but default) === */
.btn {
  background: rgba(136, 136, 136, 0.1);
  color: #888;
}

.btn:hover {
  opacity: 0.8;
}

/* === Primary === */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  opacity: 0.85;
  color: var(--color-on-primary);
}

.btn-primary:active {
  opacity: 1;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* === Outline === */
.btn-outline {
  background: transparent;
  color: var(--color-ink-2);
  border-color: var(--color-line);
}

.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  opacity: 1;
}

/* === Ghost === */
.btn-ghost {
  background: transparent;
  color: var(--color-ink-2);
  border-color: transparent;
}

.btn-ghost:hover {
  background: rgba(136, 136, 136, 0.1);
  opacity: 1;
}

/* === Danger === */
.btn-danger {
  background: var(--color-error);
  color: #fff;
  border-color: var(--color-error);
}

.btn-danger:hover {
  opacity: 0.85;
  color: #fff;
}

/* === Disabled === */
.btn:disabled,
.btn-primary:disabled,
.btn-outline:disabled,
.btn-ghost:disabled,
.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* === Icon button === */
.btn-icon {
  width: var(--btn-h);
  padding: 0;
  justify-content: center;
}

.btn-icon.btn-sm { width: 28px; }
.btn-icon.btn-lg { width: 44px; }

/* === Full width === */
.btn-block {
  width: 100%;
}
/**
 * AKSRT Forms — 1:1 legacy Alignment
 *
 * 对齐 legacy .form-control：
 * - 灰色背景 (#f5f6f7)
 * - 透明边框
 * - 34px 高度
 * - 8px 圆角
 * - focus 时粉色边框 + 光晕
 */

/* ===== Field Wrapper ===== */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-4);
}

.field-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.field-help {
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

.field-error {
  font-size: var(--text-xs);
  color: var(--color-error);
}

/* ===== Input / Textarea / Select — 对齐 legacy .form-control ===== */
.input,
.textarea,
.select,
input[type="text"].form-input,
input[type="email"].form-input,
input[type="password"].form-input,
input[type="search"].form-input,
input[type="url"].form-input,
input[type="tel"].form-input,
textarea.form-textarea,
select.form-select {
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  color: var(--color-ink);
  background: var(--surface-page);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.textarea,
textarea.form-textarea {
  height: auto;
  min-height: 120px;
  padding: 12px;
  line-height: var(--leading-snug);
  resize: vertical;
}

.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--color-primary);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 2px 3px rgba(253, 83, 161, 0.4);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-ink-4);
}

/* ===== Select ===== */
.select,
select.form-select {
  appearance: none;
  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 fill='%23777' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* ===== Checkbox / Radio ===== */
.checkbox,
.radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

.checkbox input,
.radio input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ===== Input Group ===== */
.input-group {
  display: flex;
  align-items: stretch;
}

.input-group .input {
  border-radius: var(--radius) 0 0 var(--radius);
}

.input-group .btn {
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ===== Form Layout ===== */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
/**
 * AKSRT Alerts
 * 统一提示组件：error / warning / info / success
 * 用于替代各页面 inline 的 .login-error / .bind-error 等
 */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  border-radius: var(--radius);
  border: 1px solid transparent;
}

.alert > svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.alert--error {
  color: #B91C1C;
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
}

.alert--warning {
  color: #B45309;
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
}

.alert--success {
  color: #047857;
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
}

.alert--info {
  color: #1D4ED8;
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.3);
}

html.dark .alert--error   { color: #FCA5A5; }
html.dark .alert--warning { color: #FCD34D; }
html.dark .alert--success { color: #6EE7B7; }
html.dark .alert--info    { color: #93C5FD; }