/* ==========================================================================
   Yakuyama 平板主题适配层  pad-theme.css   v1.0  2026-10-20
   目标设备：小米平板 9 Pro Max 柔光版（约 14" / 16:10 / 高 DPI / 横屏为主）
   设计原则：
     1) 只做「叠加」，不改页面原有结构与脚本；所有覆盖尽量用变量 + 中性色
     2) 浅色不刺眼（非纯白底）、深色不纯黑（避免柔光屏发灰与眩光）
     3) 断点按「视口宽度」而非设备型号，天然兼容分屏 / 小窗 / 外接显示器
   章节：A 令牌  B 基础重置  C 布局断点  D 触控  E 表单  F 深色重着色
        G 弹层与遮罩  H 可读性与柔光屏  I 动效与无障碍  J 打印
   ========================================================================== */

/* ---------- A. 主题令牌 ---------- */
:root {
  color-scheme: light dark;

  /* 浅色：底色压到 #f4f6f8，正文 #1b1f24（对比度 ≈ 15:1），避免纯白眩光 */
  --pad-bg: #f4f6f8;
  --pad-bg-elev: #ffffff;
  --pad-surface: #ffffff;
  --pad-surface-2: #f0f2f5;
  --pad-surface-3: #e8ebef;
  --pad-text: #1b1f24;
  --pad-text-2: #4d555e;
  --pad-text-3: #657080;
  --pad-border: #d9dee4;
  --pad-border-strong: #c2c9d1;
  --pad-accent: #0b6bcb;
  --pad-accent-weak: #e8f1fb;
  --pad-overlay: rgba(18, 24, 32, .42);
  --pad-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 10px 26px -14px rgba(16, 24, 40, .20);
  --pad-focus: 0 0 0 3px rgba(11, 107, 203, .30);

  /* 尺寸令牌 */
  --pad-content: 100%;
  --pad-gutter: 20px;
  --pad-tap: 44px;          /* 最小触控热区（Material/iOS 通用下限） */
  --pad-radius: 14px;
  --pad-leading: 1.72;
}

html[data-theme-effective="dark"] {
    
    --pad-bg: #0f1216;
    --pad-bg-elev: #14181d;
    --pad-surface: #171b21;
    --pad-surface-2: #1d222a;
    --pad-surface-3: #262c35;
    --pad-text: #e9edf2;
    --pad-text-2: #b3bcc7;
    --pad-text-3: #95a1ae;
    --pad-border: #2b323b;
    --pad-border-strong: #3a434e;
    --pad-accent: #6cb6ff;
    --pad-accent-weak: #17283a;
    --pad-overlay: rgba(0, 0, 0, .62);
    --pad-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 12px 30px -16px rgba(0, 0, 0, .8);
    --pad-focus: 0 0 0 3px rgba(108, 182, 255, .38);
  }



/* 手动覆盖钩子：<html data-theme="light|dark"> 时优先于系统偏好（便于日后加切换开关） */
html[data-theme="light"] {
  color-scheme: light;
  --pad-bg: #f4f6f8; --pad-surface: #ffffff; --pad-surface-2: #f0f2f5;
  --pad-text: #1b1f24; --pad-text-2: #4d555e; --pad-text-3: #657080;
  --pad-border: #d9dee4; --pad-accent: #0b6bcb; --pad-overlay: rgba(18, 24, 32, .42);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --pad-bg: #0f1216; --pad-surface: #171b21; --pad-surface-2: #1d222a;
  --pad-text: #e9edf2; --pad-text-2: #b3bcc7; --pad-text-3: #95a1ae;
  --pad-border: #2b323b; --pad-accent: #6cb6ff; --pad-overlay: rgba(0, 0, 0, .62);
}

/* ---------- B. 基础重置 ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;          /* 跟随系统字体缩放（配合去掉 user-scalable=no） */
  background-color: var(--pad-bg);
  scroll-padding-top: 84px;        /* 锚点跳转不被吸顶导航遮挡 */
  overflow-x: clip;                /* clip 不产生滚动容器，sticky 不受影响 */
}
body {
  background-color: var(--pad-bg) !important;
  color: var(--pad-text) !important;
  overflow-x: clip;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 大屏下媒体元素一律不撑破容器、不被非等比拉伸 */
img, video, canvas, svg, iframe, embed, object {
  max-width: 100%;
}
img {
  height: auto;                    /* 仅设宽度时保持比例，避免失真 */
  object-fit: contain;             /* 容器定高时不裁剪不变形 */
  image-rendering: auto;           /* 高分屏交给浏览器做高质量重采样 */
}
img[width][height] { height: auto; }
table { max-width: 100%; }
pre, code, kbd, samp { max-width: 100%; overflow-x: auto; }

/* 常见横向溢出源：长串 URL / 无空格文本 */
p, li, td, th, dd, dt, figcaption, .desc, [class*="text"] {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 滚动条：触控设备给足宽度，避免“细到点不中” */
@media (pointer: coarse) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb {
    background: var(--pad-border-strong);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* ---------- C. 布局断点 ---------- */
/* 竖屏平板 / 横屏小窗：768–1023 —— 内容占满，收窄页边距 */
@media (max-width: 1023px) {
  :root { --pad-content: 100%; --pad-gutter: 18px; }
}

/* 横屏平板：1024–1599 —— 限宽居中，消除两侧大片留白 */
@media (min-width: 1024px) {
  :root { --pad-content: 1280px; --pad-gutter: 28px; }
}

/* 超大屏 / 接外显：≥1600 —— 限宽 1440，内部栅格自动多吃空间 */
@media (min-width: 1600px) {
  :root { --pad-content: 1440px; --pad-gutter: 32px; }
}

/* 内容限宽：只作用于“页面级”容器，避免破坏页面内部的 flex/grid 子项 */
@media (min-width: 1024px) {
  body > #app, body > #root, body > .app, body > .root,
  body > main, body > .main, body > .page,
  body > [class*="container"], body > [class*="wrapper"], body > [class*="wrap"],
  .page-container, .page-wrapper, .page-main, .main-container, .main-wrapper,
  .content-wrap, .content-container, .layout-container {
    width: 100%;
    max-width: var(--pad-content);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}

/* 栅格在平板上不被拉成“超宽一条” */
@media (min-width: 1024px) and (max-width: 1599px) {
  [class*="grid"] {
    max-width: 100%;
  }
}

/* 横屏矮视口（分屏上半 / 小窗）：压缩竖向留白，保证首屏信息量 */
@media (min-width: 768px) and (max-height: 720px) {
  body { --pad-dense: 1; }
  [class*="hero"] { padding-top: 20px !important; padding-bottom: 20px !important; }
  [class*="banner"] { padding-top: 16px !important; padding-bottom: 16px !important; }
}

/* 分屏 / 小窗（≤700）：退回单列，禁横向滚动 */
@media (max-width: 700px) {
  [class*="grid"][style*="columns"],
  [class*="layout"] { grid-template-columns: 1fr !important; }
  :root { --pad-gutter: 14px; }
}

/* ---------- D. 触控 ---------- */
@media (pointer: coarse), (hover: none) {
  /* 触控设备：去掉 300ms 点击延迟 */
  a, button, [role="button"], summary, label, select, input { touch-action: manipulation; }

  /* 可点击热区统一抬到 44px */
  button, [type="button"], [type="submit"], [type="reset"], summary, select,
  [role="button"], [class*="btn"], [onclick] {
    min-height: var(--pad-tap);
  }
  /* 导航 / 标签 / 菜单项：高度 + 横向间距 */
  nav a, [class*="nav"] a, [class*="nav-"] a,
  [class*="tab"], [class*="menu"] a, [class*="menu-item"], [class*="menuItem"] {
    min-height: var(--pad-tap);
    display: inline-flex;
    align-items: center;
    padding-left: 12px;
    padding-right: 12px;
  }
  /* 列表行：加大行高便于点选（不强制 44，避免破坏紧凑表格） */
  [class*="list-item"], [class*="listItem"], [class*="row-item"], [class*="cell"] {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  /* 复选框 / 单选框：扩大视觉与热区 */
  input[type="checkbox"], input[type="radio"] {
    width: 22px; height: 22px; min-width: 22px; min-height: 22px;
    accent-color: var(--pad-accent);
  }
  /* 卡片类可点区域：整卡可点，避免只剩小角标 */
  [class*="card"][onclick], a[class*="card"] { min-height: 56px; }

  /* 纯 hover 反馈在触屏上会“点了没反应”，补按压态 */
  a:active, button:active, [role="button"]:active, [class*="btn"]:active {
    filter: brightness(.94);
    transform: translateY(1px);
  }
}

/* 需要 hover 才展开的下拉 / 二级菜单：改为「点击后聚焦即展开」，键盘同样可达 */
@media (hover: none) {
  li:focus-within > ul,
  li:focus-within > ol,
  [class*="dropdown"]:focus-within > ul,
  [class*="dropdown"]:focus-within > [class*="menu"],
  [class*="menu"]:focus-within > ul,
  [class*="submenu"]:focus-within,
  [class*="popover"]:focus-within {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    max-height: none !important;
  }
}

/* 无障碍焦点环：键盘 / 无障碍开关可达 */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--pad-accent);
  outline-offset: 2px;
  border-radius: max(6px, var(--pad-radius, 10px));
}

/* ---------- E. 表单控件（双主题一致） ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select, textarea {
  min-height: var(--pad-tap);
  font-size: 16px !important;              /* ≥16px 防移动端聚焦自动放大 */
  line-height: 1.5;
  color: var(--pad-text) !important;
  background-color: var(--pad-surface) !important;
  border: 1px solid var(--pad-border) !important;
  border-radius: 12px;
  padding: 10px 12px;
  box-sizing: border-box;
}
input::placeholder, textarea::placeholder { color: var(--pad-text-3); opacity: 1; }
input:disabled, select:disabled, textarea:disabled {
  background-color: var(--pad-surface-2) !important;
  color: var(--pad-text-3) !important;
  cursor: not-allowed;
}
/* 下拉箭头在深色下保持可见 */
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
/* 按钮在深色下的兜底 */
html[data-theme-effective="dark"] button:not([class*="primary"]):not([class*="danger"]):not([class*="active"]),
html[data-theme-effective="dark"] [class*="btn"]:not([class*="primary"]):not([class*="danger"]):not([class*="active"]) {

    color: var(--pad-text);
  }



/* ---------- F. 深色重着色（核心：覆盖各页硬编码的 #fff / #f8fafc） ---------- */
/* 思路：只改“容器类”根词的 background-color / color / border-color，
   带语义色的类（red/green/primary…）与渐变背景不碰（渐变走 background-image，不受影响）。 */
html[data-theme-effective="dark"] :where(
    :is([class*="container"], [class*="wrapper"], [class*="wrap"], [class*="page"],
        [class*="layout"], [class*="main"], [class*="content"], [class*="section"],
        [class*="sidebar"], [class*="aside"], [class*="panel"], [class*="card"],
        [class*="box"], [class*="table"], [class*="list"], [class*="form"],
        [class*="header"], [class*="footer"], [class*="nav"], [class*="hero"],
        [class*="banner"], [class*="toolbar"], [class*="tabs"], [class*="tab-"]):not([class*="primary"]):not([class*="danger"]):not([class*="success"]):not([class*="warn"]):not([class*="red"]):not([class*="green"]):not([class*="blue"]):not([class*="yellow"]):not([class*="orange"]):not([class*="purple"]):not([class*="pink"]):not([class*="gold"]):not([class*="active"]):not([class*="selected"]):not([class*="hover"]):not([class*="avatar"]):not([class*="icon"]):not([class*="badge"]):not([class*="tag"]):not([class*="chip"]):not([class*="pill"]):not([class*="progress"]):not([class*="bar-"]),
    header, footer, nav, main, section, article, aside
  ) {

    background-color: var(--pad-surface) !important;
    border-color: var(--pad-border) !important;
    color: var(--pad-text);
  }
html[data-theme-effective="dark"] {
    background-color: var(--pad-bg) !important;
    color: var(--pad-text) !important;
  }
html[data-theme-effective="dark"] body,
html[data-theme-effective="dark"] #app,
html[data-theme-effective="dark"] #root,
html[data-theme-effective="dark"] .app,
html[data-theme-effective="dark"] .root,
html[data-theme-effective="dark"] .page,
html[data-theme-effective="dark"] .page-container,
html[data-theme-effective="dark"] .page-wrapper {

    background-color: var(--pad-bg) !important;
    color: var(--pad-text) !important;
  }
html[data-theme-effective="dark"] h1,
html[data-theme-effective="dark"] h2,
html[data-theme-effective="dark"] h3,
html[data-theme-effective="dark"] h4,
html[data-theme-effective="dark"] h5,
html[data-theme-effective="dark"] h6 {
 color: var(--pad-text) !important; }
html[data-theme-effective="dark"] p,
html[data-theme-effective="dark"] li,
html[data-theme-effective="dark"] dd,
html[data-theme-effective="dark"] dt,
html[data-theme-effective="dark"] td,
html[data-theme-effective="dark"] th,
html[data-theme-effective="dark"] label,
html[data-theme-effective="dark"] legend,
html[data-theme-effective="dark"] figcaption,
html[data-theme-effective="dark"] blockquote,
html[data-theme-effective="dark"] small {

    color: var(--pad-text-2) !important;
    border-color: var(--pad-border);
  }
html[data-theme-effective="dark"] strong,
html[data-theme-effective="dark"] b,
html[data-theme-effective="dark"] em,
html[data-theme-effective="dark"] mark {
 color: var(--pad-text); }
html[data-theme-effective="dark"] hr {
 border-color: var(--pad-border) !important; background-color: var(--pad-border); }
html[data-theme-effective="dark"] table {
 background-color: transparent !important; }
html[data-theme-effective="dark"] thead,
html[data-theme-effective="dark"] thead tr,
html[data-theme-effective="dark"] th {

    background-color: var(--pad-surface-2) !important;
    color: var(--pad-text) !important;
    border-color: var(--pad-border) !important;
  }
html[data-theme-effective="dark"] td,
html[data-theme-effective="dark"] tr {
 border-color: var(--pad-border) !important; }
html[data-theme-effective="dark"] tbody tr:nth-child(even) > td {
 background-color: rgba(255, 255, 255, .022); }
html[data-theme-effective="dark"] tbody tr:hover > td {
 background-color: rgba(255, 255, 255, .045); }
html[data-theme-effective="dark"] pre,
html[data-theme-effective="dark"] code,
html[data-theme-effective="dark"] kbd,
html[data-theme-effective="dark"] samp {

    background-color: var(--pad-surface-2) !important;
    color: var(--pad-text) !important;
    border-color: var(--pad-border) !important;
  }
html[data-theme-effective="dark"] blockquote {

    background-color: var(--pad-surface-2) !important;
    border-left-color: var(--pad-accent) !important;
  }
html[data-theme-effective="dark"] [class*="tag"],
html[data-theme-effective="dark"] [class*="badge"],
html[data-theme-effective="dark"] [class*="chip"],
html[data-theme-effective="dark"] [class*="pill"] {

    border-color: var(--pad-border) !important;
  }
html[data-theme-effective="dark"] svg:not([data-pad-skip]),
html[data-theme-effective="dark"] svg *:not([data-pad-skip]) {

    background-color: transparent !important;
    box-shadow: none !important;
  }
html[data-theme-effective="dark"] iframe,
html[data-theme-effective="dark"] video {
 border-color: var(--pad-border) !important; }



/* 渐变文字保护：由 pad-theme-fix.js 在运行时检测 background-clip:text 并恢复透明字色 */

/* 浅色模式下同样做一次“表面归一”：把个别页面写死的深色块纠回浅色系 */
html[data-theme-effective="light"] :is([class*="modal"], [class*="dialog"], [class*="popup"], [class*="sheet"], [class*="drawer"])
  :not([class*="dark"]) {

    background-color: var(--pad-surface);
    color: var(--pad-text);
  }



/* ---------- G. 弹层 / 遮罩 / 浮层 ---------- */
[class*="overlay"]:not(td):not(tr), [class*="mask"]:not(td):not(tr), [class*="backdrop"]:not(td):not(tr), [role="dialog"]::backdrop, dialog::backdrop {
  background-color: var(--pad-overlay) !important;
}
[class*="modal"], [class*="dialog"], [class*="popup"], [class*="sheet"], [class*="drawer"] {
  background-color: var(--pad-surface) !important;
  color: var(--pad-text) !important;
  border-color: var(--pad-border) !important;
  box-shadow: var(--pad-shadow);
  border-radius: var(--pad-radius);
  max-width: min(92vw, 880px);
  max-height: 88vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/* 遮罩层本身不要被上面的圆角/内边距影响 */
[class*="overlay"], [class*="mask"], [class*="backdrop"] {
  border-radius: 0;
  box-shadow: none;
  max-height: none;
  max-width: none;
}

/* 提示气泡 / 下拉：深色下描边可见 */
[class*="tooltip"], [class*="popover"], [class*="dropdown"] > ul, [class*="dropdown"] > [class*="menu"] {
  background-color: var(--pad-bg-elev) !important;
  color: var(--pad-text) !important;
  border: 1px solid var(--pad-border);
  box-shadow: var(--pad-shadow);
}

/* ---------- H. 可读性与柔光屏 ---------- */
/* 大屏阅读：字号/行高按平板习惯抬一档，但用 clamp 防溢出 */
@media (min-width: 1024px) {
  body {
    font-size: clamp(15px, 0.55vw + 9px, 18px);
    line-height: var(--pad-leading);
  }
  p, li, td, th, dd, dt {
    line-height: 1.75;
    letter-spacing: .005em;
  }
  h1 { letter-spacing: -.01em; }
}

/* 段落最大行宽：大屏上别拉成“一行 200 字”，降低眼球回扫成本 */
@media (min-width: 1024px) {
  article p, .article p, .prose p, .markdown-body p,
  [class*="content"] > p, [class*="intro"], [class*="desc"] {
    max-width: 76ch;
  }
}

/* 柔光屏：正文对比度不低于 7:1；链接/次要文字不低于 4.5:1 */
a { color: var(--pad-accent); text-underline-offset: 2px; }
html[data-theme-effective="dark"] a:not([class*="btn"]):not([class*="button"]) {
 color: var(--pad-accent); }


/* 极细字重在高分屏 + 柔光下会“发灰”，把显式细体统一抬到 400 */
@media (min-resolution: 2dppx) {
  [style*="font-weight: 100"], [style*="font-weight:100"],
  [style*="font-weight: 200"], [style*="font-weight:200"],
  [style*="font-weight: 300"], [style*="font-weight:300"],
  [class*="font-light"], [class*="font-thin"], [class*="fw300"], [class*="fw200"] {
    font-weight: 400 !important;
  }
}

/* 避免纯白大面积（浅色）与纯黑大面积（深色）造成眩光/发灰 */
html[data-theme-effective="light"] body {
 background-image: none !important; }
html[data-theme-effective="light"] [class*="hero"],
html[data-theme-effective="light"] [class*="banner"] {
 background-color: var(--pad-bg-elev); }



/* ---------- I. 动效与无障碍 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 吸顶元素不要过高，横屏矮视口下占屏 */
@media (min-width: 768px) and (max-height: 760px) {
  [class*="sticky"], [class*="navbar"], [class*="topbar"], [class*="header"] {
    max-height: 64px;
    overflow: hidden;
  }
}

/* ---------- J. 打印 ---------- */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  [class*="nav"], [class*="sidebar"], footer { display: none !important; }
}