/* ==========================================================================
 * modern.css — v3 现代化外观层
 * --------------------------------------------------------------------------
 * 加载顺序：tokens.css → app.css → tailwind.build.css → modern.css
 * 只负责「首页 + 组件视觉」，不改 app.css，保证 about / articles / en-ja-ko
 * 等旧页面不受影响。
 * ========================================================================== */

/* ------------------------------------------------------------ 0. 基底 */
html { scroll-behavior: smooth; }
body.v3 {
  background:
    radial-gradient(1100px 520px at 12% -8%, var(--primary-light) 0%, transparent 62%),
    radial-gradient(900px 460px at 96% 4%, var(--warn-soft) 0%, transparent 58%),
    var(--bg);
  background-attachment: fixed;
}
body.v3 main { padding-bottom: 40px; }

.ag-shell {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media (max-width: 640px) { .ag-shell { padding-inline: 14px; } }

/* ---------------------------------------------------------- 1. Header */
.ag-head {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .ag-head { background: var(--surface); }
}
.ag-head-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 62px;
}
.ag-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.ag-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent-2, var(--primary-dark)));
  border-radius: 9px;
  box-shadow: 0 4px 12px -4px var(--primary);
}
.ag-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ag-nav::-webkit-scrollbar { display: none; }
.ag-nav a {
  position: relative;
  padding: 7px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 9999px;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.ag-nav a:hover { color: var(--text); background: var(--hover); }
.ag-nav a.is-active { color: var(--primary); background: var(--primary-light); }

.ag-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.ag-lang {
  height: 36px;
  padding: 0 26px 0 10px;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--text-secondary);
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.2 6 8.2l4-4' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 9px center;
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s ease;
}
.ag-lang:hover { border-color: var(--border-strong); }

/* 头部图标按钮（主题 / 深色 / 特效） */
.ag-hbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  transition: all .15s ease;
}
.ag-hbtn:hover { color: var(--text); background: var(--hover); border-color: var(--border-strong); }
.ag-hbtn[aria-expanded="true"], .ag-hbtn.is-active {
  color: var(--primary);
  background: var(--primary-light);
  border-color: var(--primary);
}
.ag-hbtn svg { width: 17px; height: 17px; }

/* ------------------------------------------------------------- 2. Hero */
.ag-hero {
  padding: 46px 0 26px;
  text-align: center;
}
@media (max-width: 640px) { .ag-hero { padding: 30px 0 18px; } }
.ag-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 5px 9px;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: 9999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ag-pill i {
  width: 6px;
  height: 6px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);
  animation: agPulse 2.4s ease-in-out infinite;
}
@keyframes agPulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.ag-hero h1 {
  margin: 16px 0 0;
  font-size: clamp(2.1rem, 6vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--text);
}
.ag-grad-text {
  background: linear-gradient(100deg, var(--primary) 8%, var(--accent-2, var(--primary-dark)) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ag-hero p.ag-lead {
  max-width: 46ch;
  margin: 14px auto 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ----------------------------------------------------------- 3. 卡片 */
.ag-card {
  position: relative;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 18px 40px -28px rgb(0 0 0 / .35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .ag-card { background: var(--surface); }
}
.ag-card-pad { padding: 22px; }
@media (max-width: 640px) { .ag-card-pad { padding: 16px; } }
.ag-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 640px) { .ag-card-head { padding: 14px 16px; } }
.ag-card-head h2,
.ag-card-head h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.ag-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 9999px;
}

/* --------------------------------------------------------- 4. 表单控件 */
.ag-label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ag-input,
.ag-card .select,
.ag-card .cust-sel-trigger {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ag-card .select:hover,
.ag-card .cust-sel-trigger:hover { border-color: var(--border-strong); }
.ag-card .select:focus,
.ag-card .cust-sel-trigger:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.ag-card .cust-sel-trigger { display: flex; align-items: center; justify-content: space-between; }

/* -------------------------------------------------------------- 5. 按钮 */
.ag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.ag-btn:hover { border-color: var(--border-strong); background: var(--hover); }
.ag-btn:active { transform: scale(.98); }
.ag-btn:disabled { opacity: .55; cursor: default; transform: none; }

.ag-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-color: transparent;
  box-shadow: 0 10px 22px -12px var(--primary);
}
.ag-btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-dark));
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -12px var(--primary);
}
.ag-btn-sm {
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 9px;
}
.ag-btn-soft { color: var(--text-secondary); background: var(--surface-2); }
.ag-btn-soft:hover { color: var(--primary); background: var(--primary-light); border-color: var(--primary); }
.ag-btn-danger:hover { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }

/* ------------------------------------------- 6. 结果卡（修复“变很小”） */
/* 单条详情 */
.v3 .result-body { padding: 6px 22px 20px; }
@media (max-width: 640px) { .v3 .result-body { padding: 6px 14px 16px; } }
.v3 .field-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px dashed var(--border);
}
.v3 .field-row:last-child { border-bottom: 0; }
.v3 .field-label {
  width: 92px;
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--text-tertiary);
}
.v3 .field-value {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-line;
  word-break: break-word;
}

/* 批量结果：最小宽度拉大，字号不再缩水；最多两列 */
.v3 .ag-batch {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 14px;
  padding: 16px 22px 20px;
}
@media (max-width: 640px) {
  .v3 .ag-batch { grid-template-columns: 1fr; padding: 14px; }
}
.v3 .ag-batch-card {
  padding: 16px 16px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.v3 .ag-batch-card:hover {
  border-color: var(--primary);
  box-shadow: 0 12px 26px -20px rgb(0 0 0 / .5);
  transform: translateY(-2px);
}
.v3 .ag-batch-card header { font-size: 0.95rem; }
.v3 .ag-batch-card p {
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--text);
}
.v3 .ag-batch-meta { font-size: 0.78rem !important; color: var(--text-secondary) !important; }

/* 展开 / 收起详情（批量与已保存共用） */
.ag-detail {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.is-open > .ag-detail,
.is-open .ag-detail { display: block; }
.ag-detail-row {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  font-size: 0.82rem;
  line-height: 1.55;
}
.ag-detail-row b {
  flex: none;
  width: 76px;
  font-weight: 500;
  color: var(--text-tertiary);
}
.ag-detail-row span {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  color: var(--text);
  white-space: pre-line;
  word-break: break-word;
}
.ag-toggle-ico { display: inline-block; transition: transform .2s ease; }
.is-open .ag-toggle-ico { transform: rotate(180deg); }

/* 已保存卡片 */
.v3 .saved-body { padding: 16px 22px 20px; }
@media (max-width: 640px) { .v3 .saved-body { padding: 14px; } }
.v3 .saved-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 14px;
}
@media (max-width: 640px) { .v3 .saved-cards { grid-template-columns: 1fr; } }
.v3 .saved-card {
  overflow: visible;
  background: var(--surface);
  border-radius: 14px;
}
.v3 .saved-card-header {
  padding: 12px 16px;
  background: color-mix(in srgb, var(--primary-light) 70%, transparent);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
.v3 .saved-card-body { padding: 12px 16px; gap: 7px; }
.v3 .saved-line { display: flex; gap: 9px; font-size: 0.85rem; line-height: 1.5; }
.v3 .saved-val { flex: 1; min-width: 0; font-family: var(--font-mono); color: var(--text); word-break: break-word; }
.v3 .saved-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px 14px;
}
.v3 .saved-time { font-size: 0.72rem; color: var(--text-tertiary); }
.v3 .saved-card-actions { display: flex; gap: 6px; }

/* 空状态 */
.v3 .empty-state { padding: 44px 20px; text-align: center; color: var(--text-tertiary); }
.v3 .empty-icon { font-size: 2rem; opacity: .55; }

/* ------------------------------------------------------- 7. 主题面板 v3 */
.ag-pop {
  position: fixed;
  z-index: 90;
  width: 320px;
  max-width: calc(100vw - 24px);
  max-height: min(74vh, 640px);
  overflow-y: auto;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgb(0 0 0 / .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.ag-pop.is-open { opacity: 1; visibility: visible; transform: none; }
.ag-pop h4 {
  margin: 0 0 9px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ag-pop section + section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.ag-pop-note { margin: 10px 0 0; font-size: 0.7rem; line-height: 1.5; color: var(--text-tertiary); }

.ag-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ag-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.ag-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px;
  font-family: inherit;
  font-size: 0.76rem;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .13s ease;
}
.ag-opt:hover { color: var(--text); background: var(--hover); border-color: var(--border-strong); }
.ag-opt[aria-pressed="true"] {
  color: var(--primary);
  background: var(--primary-light);
  border-color: var(--primary);
  font-weight: 600;
}
.ag-dot { width: 12px; height: 12px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.ag-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 11px; }
.ag-seg button {
  padding: 7px 4px;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: all .13s ease;
}
.ag-seg button:hover { color: var(--text); }
.ag-seg button[aria-pressed="true"] {
  color: var(--primary);
  font-weight: 600;
  background: var(--surface);
  box-shadow: 0 1px 3px rgb(0 0 0 / .1);
}

/* ---------------------------------------------------------- 8. 页脚 */
.ag-foot {
  margin-top: 46px;
  padding: 22px 0 30px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-tertiary);
}
.ag-foot a { color: var(--text-secondary); text-decoration: none; }
.ag-foot a:hover { color: var(--primary); }

/* --------------------------------------------------------- 9. 内容页 */
.ag-prose { max-width: 780px; margin-inline: auto; }
.ag-prose h2 { margin: 34px 0 12px; font-size: 1.28rem; font-weight: 700; letter-spacing: -0.015em; color: var(--text); }
.ag-prose h3 { margin: 22px 0 8px; font-size: 1rem; font-weight: 600; color: var(--text); }
.ag-prose p, .ag-prose li { font-size: 0.94rem; line-height: 1.78; color: var(--text-secondary); }
.ag-prose ul, .ag-prose ol { margin: 10px 0 10px 20px; }
.ag-prose li { margin: 5px 0; }
.ag-prose code {
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--code-bg, var(--surface-2));
  border-radius: 5px;
}
.ag-qa { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.ag-qa + .ag-qa { margin-top: 10px; }
.ag-qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.ag-qa summary::-webkit-details-marker { display: none; }
.ag-qa summary::after { content: "+"; font-size: 1.1rem; color: var(--text-tertiary); }
.ag-qa[open] summary::after { content: "−"; color: var(--primary); }
.ag-qa .ag-qa-body { padding: 0 18px 16px; font-size: 0.9rem; line-height: 1.75; color: var(--text-secondary); }

/* ------------------------------------------------------- 10. 入场动画 */
@keyframes agRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ag-rise { animation: agRise .5s cubic-bezier(.22,1,.36,1) both; }
.ag-rise-1 { animation-delay: .04s; }
.ag-rise-2 { animation-delay: .1s; }
.ag-rise-3 { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) { .ag-rise { animation: none; } }

/* 鼠标跟随光晕（由 effects.js 写入 --mx / --my） */
.ag-spot::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--primary) 12%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity .4s ease;
}
.ag-spot.is-on::before { opacity: 1; }

/* --- 重置旧 style.css 在首页残留的内边距 / 背景 / 旧表头 --- */
body.v3 .result-section,
body.v3 .saved-section {
  margin: 0;
  padding: 0;
  border-radius: var(--radius-xl);
}
body.v3 .saved-body { padding: 0; }
body.v3 .saved-header,
body.v3 .result-header { display: none; }
body.v3 .container { max-width: none; padding: 0; }

/* --------------------------------------------------------------------------
   批量卡片内部元素 + 迷你按钮（renderBatch / 已保存卡片展开按钮）
   -------------------------------------------------------------------------- */
.v3 .ag-batch-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.v3 .ag-batch-idx {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary-dark);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
}
.v3 .ag-batch-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}
.v3 .ag-batch-line {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.55;
  word-break: break-word;
}
.v3 .ag-batch-line > span:first-child {
  flex: none;
  opacity: 0.65;
}
.v3 .ag-batch-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.ag-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ag-mini:hover {
  background: var(--hover);
  color: var(--text);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.ag-mini:active { transform: translateY(0); }
.ag-mini.copied {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success);
}
.ag-mini:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}