/* pkg-ui 的基础样式和公共零件（ui.js 里那些函数出的类名）。各界面模块自己的样式写在自己的 style.css，类名以模块短名开头。 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; }
body {
  margin: 0; min-height: 100%; background: var(--wy-table); color: var(--wy-white);
  font-family: var(--wy-font); font-size: var(--wy-fs-body); line-height: var(--wy-lh-body); font-weight: 500;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
button { font: inherit; color: inherit; border: none; background: none; padding: 0; margin: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; border: none; background: none; padding: 0; margin: 0; outline: none; resize: none; }
input::placeholder, textarea::placeholder { color: var(--wy-dim); }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
:focus-visible { outline: 3px solid var(--wy-paper); outline-offset: 2px; border-radius: 12px; }
[hidden] { display: none !important; }
.ui-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ui-ipa { font-family: var(--wy-font-ipa); font-weight: 400; }
.ui-en { font-weight: 900; letter-spacing: -0.01em; }

/* —— 外壳：手机全宽，桌面上居中成一台手机 —— */
.ui-app { position: relative; max-width: var(--wy-app-max); min-height: 100vh; min-height: 100dvh; margin: 0 auto; background: var(--wy-table); overflow-x: hidden; }
.ui-screen { min-height: 100vh; min-height: 100dvh; padding: calc(var(--wy-safe-top) + 8px) var(--wy-gutter) calc(var(--wy-safe-bottom) + 24px); }
.ui-screen--tabs { padding-bottom: calc(var(--wy-safe-bottom) + var(--wy-tabbar-h) + 24px); }
.ui-screen--full { padding: 0; }
.ui-stack { display: flex; flex-direction: column; gap: 12px; }
.ui-stack--lg { gap: 24px; }

/* —— 字 —— */
.ui-h-page { font-size: var(--wy-fs-page); line-height: var(--wy-lh-page); font-weight: 900; }
.ui-h-panel { font-size: var(--wy-fs-section); line-height: var(--wy-lh-section); font-weight: 900; }
.ui-h-title { font-size: var(--wy-fs-title); line-height: var(--wy-lh-title); font-weight: 900; }
.ui-note { font-size: var(--wy-fs-note); line-height: var(--wy-lh-note); color: var(--wy-mist); }
.ui-min { font-size: var(--wy-fs-min); line-height: var(--wy-lh-min); font-weight: 700; color: var(--wy-dim); }
.ui-hero { font-size: var(--wy-fs-hero); line-height: var(--wy-lh-hero); font-weight: 900; }
.ui-num { font-size: var(--wy-fs-num); line-height: var(--wy-lh-num); font-weight: 900; }

/* —— 按钮 —— */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--wy-touch); padding: 0 20px; border-radius: var(--wy-r-pill); font-weight: 700; white-space: nowrap; user-select: none; transition: opacity var(--wy-fast) var(--wy-ease), transform var(--wy-fast) var(--wy-ease); }
.ui-btn:active { transform: scale(0.98); }
.ui-btn[disabled], .ui-btn[aria-disabled="true"], .ui-btn[aria-busy="true"] { opacity: 0.5; pointer-events: none; }
.ui-btn--lg { height: var(--wy-btn-h); font-size: var(--wy-fs-section); padding: 0 24px; }
.ui-btn--md { height: var(--wy-touch); font-size: var(--wy-fs-body); }
.ui-btn--sm { height: 36px; min-height: 36px; font-size: var(--wy-fs-note); padding: 0 14px; }
.ui-btn--block { display: flex; width: 100%; }
.ui-btn--paper { background: var(--wy-paper); color: var(--wy-ink); }
.ui-btn--ink { background: var(--wy-ink); color: var(--wy-paper); }
.ui-btn--raised { background: var(--wy-raised-2); color: var(--wy-white); }
.ui-btn--wash { background: var(--wy-ink-wash); color: var(--wy-ink); }
.ui-btn--ghost { background: none; color: var(--wy-mist); padding: 0 12px; }
.ui-btn--danger { background: var(--wy-raised-2); color: var(--wy-alert); }

.ui-ibtn { width: var(--wy-touch); height: var(--wy-touch); flex-shrink: 0; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; }
.ui-ibtn--raised { background: var(--wy-raised-2); color: var(--wy-white); }
.ui-ibtn--wash { background: var(--wy-ink-wash); color: var(--wy-ink); }
.ui-ibtn--paper { background: var(--wy-paper); color: var(--wy-ink); }
.ui-ibtn--ink { background: var(--wy-ink); color: var(--wy-paper); }

/* —— 圆牌、能力牌、胶囊、记忆三态 —— */
.ui-avatar { flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; line-height: 1; color: var(--wy-ink); }
.ui-avatar--ring { box-shadow: none; outline: 2px solid var(--wy-table); }
.ui-skill { flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; line-height: 1; background: var(--wy-ink); color: var(--wy-paper); }
.ui-skill--filled { color: var(--wy-ink); }
.ui-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 14px; font-size: var(--wy-fs-note); font-weight: 700; white-space: nowrap; }
.ui-pill--wash { background: var(--wy-ink-wash); color: var(--wy-ink); }
.ui-pill--raised { background: var(--wy-raised-2); color: var(--wy-white); }
.ui-pill--ink { background: var(--wy-ink); color: var(--wy-paper); }
.ui-pill--paper { background: var(--wy-paper); color: var(--wy-ink); }
.ui-dot { flex-shrink: 0; }

/* —— 开关（能出声） —— */
.ui-switch { height: var(--wy-touch); display: inline-flex; align-items: center; gap: 8px; padding: 0 8px 0 14px; border-radius: 22px; background: var(--wy-raised); color: var(--wy-white); font-size: var(--wy-fs-note); font-weight: 700; }
.ui-switch__track { width: 44px; height: 28px; border-radius: 14px; padding: 3px; display: flex; background: var(--wy-raised-2); transition: background var(--wy-fast) var(--wy-ease); }
.ui-switch__knob { width: 22px; height: 22px; border-radius: 11px; background: var(--wy-dim); transition: transform var(--wy-fast) var(--wy-ease), background var(--wy-fast) var(--wy-ease); }
.ui-switch.is-on .ui-switch__track { background: var(--wy-paper); }
.ui-switch.is-on .ui-switch__knob { background: var(--wy-ink); transform: translateX(16px); }

/* —— 顶部栏 —— */
.ui-topbar { height: var(--wy-topbar-h); display: flex; align-items: center; gap: 8px; margin: 0 -4px 8px; }
.ui-topbar__title { flex: 1; min-width: 0; text-align: center; }
.ui-topbar__title h1 { font-size: var(--wy-fs-section); line-height: var(--wy-lh-section); font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-topbar__title p { font-size: var(--wy-fs-min); line-height: var(--wy-lh-min); color: var(--wy-dim); font-weight: 700; }
.ui-topbar__spacer { width: var(--wy-touch); flex-shrink: 0; }

/* —— 面板、列表行 —— */
.ui-panel { background: var(--wy-raised); border-radius: var(--wy-r-inner); padding: 16px; }
.ui-card { border-radius: var(--wy-r-card); padding: 16px; color: var(--wy-ink); }
.ui-row { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 8px 4px; text-align: left; border-bottom: 1px solid var(--wy-raised-2); }
.ui-row:last-child { border-bottom: none; }
.ui-row__icon { width: 36px; height: 36px; border-radius: 18px; background: var(--wy-raised-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ui-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ui-row__label { font-weight: 700; }
.ui-row__sub { font-size: var(--wy-fs-note); line-height: var(--wy-lh-note); color: var(--wy-mist); }
.ui-row__right { color: var(--wy-mist); font-size: var(--wy-fs-note); font-weight: 700; }
.ui-row--danger .ui-row__label { color: var(--wy-alert); }
.ui-row > .ui-icon:last-child { color: var(--wy-dim); flex-shrink: 0; }

/* —— 输入 —— */
.ui-field { display: flex; flex-direction: column; gap: 6px; }
.ui-field__label { font-size: var(--wy-fs-note); font-weight: 700; color: var(--wy-mist); }
.ui-field__input { min-height: 52px; padding: 14px 16px; border-radius: 16px; background: var(--wy-raised); color: var(--wy-white); font-size: 17px; line-height: 24px; }
.ui-field__input:focus { background: var(--wy-raised-2); }

.ui-choices { display: grid; gap: 10px; }
.ui-choice { min-height: 56px; padding: 12px 16px; border-radius: 18px; background: var(--wy-raised); text-align: left; display: flex; flex-direction: column; justify-content: center; }
.ui-choice__label { font-weight: 900; font-size: var(--wy-fs-section); }
.ui-choice__sub { font-size: var(--wy-fs-note); color: var(--wy-mist); }
.ui-choice.is-on { background: var(--wy-paper); color: var(--wy-ink); }
.ui-choice.is-on .ui-choice__sub { color: var(--wy-ink-soft); }

/* —— 空状态、加载、出错 —— */
.ui-empty { padding: 48px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ui-empty__title { font-size: var(--wy-fs-section); font-weight: 900; }
.ui-empty__text { color: var(--wy-mist); }
.ui-empty .ui-btn { margin-top: 12px; }
.ui-loading { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; }
.ui-loading__bar { height: 16px; border-radius: 8px; background: var(--wy-raised); animation: ui-pulse 1.2s ease-in-out infinite; }
@keyframes ui-pulse { 50% { opacity: 0.5; } }
.ui-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--wy-raised); color: var(--wy-mist); }

/* —— 底部导航（app-shell 画）：当前项实心、白色 —— */
.ui-tabbar { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: var(--wy-app-max); height: calc(var(--wy-tabbar-h) + var(--wy-safe-bottom)); padding: 6px 4px var(--wy-safe-bottom); background: var(--wy-table); display: flex; z-index: 20; }
.ui-tabbar__item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--wy-dim); font-size: var(--wy-fs-min); line-height: var(--wy-lh-min); font-weight: 700; min-height: var(--wy-touch); }
.ui-tabbar__item[aria-current="page"] { color: var(--wy-white); }
.ui-tabbar__make { width: 40px; height: 24px; border-radius: 12px; background: var(--wy-paper); color: var(--wy-ink); display: flex; align-items: center; justify-content: center; }
.ui-tabbar__badge { position: absolute; margin-left: 18px; margin-top: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--wy-alert); color: var(--wy-white); font-size: 10px; line-height: 16px; text-align: center; }

/* —— 底部弹层（app.sheet） —— */
.ui-scrim { position: fixed; inset: 0; background: var(--wy-scrim); z-index: 40; opacity: 0; transition: opacity var(--wy-slow) var(--wy-ease); }
.ui-scrim.is-open { opacity: 1; }
.ui-sheet { position: fixed; left: 50%; bottom: 0; width: 100%; max-width: var(--wy-app-max); max-height: calc(100dvh - var(--wy-safe-top) - 40px); transform: translate(-50%, 100%); border-radius: var(--wy-r-card) var(--wy-r-card) 0 0; background: var(--wy-raised); color: var(--wy-white); z-index: 41; display: flex; flex-direction: column; padding: 10px var(--wy-gutter) calc(var(--wy-safe-bottom) + 16px); transition: transform var(--wy-slow) var(--wy-ease); overflow: hidden; }
.ui-sheet.is-open { transform: translate(-50%, 0); }
.ui-sheet__grab { flex-shrink: 0; align-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--wy-grabber); margin-bottom: 6px; }
.ui-sheet__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ui-sheet--full { height: calc(100dvh - var(--wy-safe-top) - 40px); }

/* —— 一行提示（app.toast） —— */
.ui-toast { position: fixed; left: 50%; bottom: calc(var(--wy-safe-bottom) + var(--wy-tabbar-h) + 24px); transform: translate(-50%, 12px); max-width: calc(min(100vw, var(--wy-app-max)) - 32px); padding: 12px 18px; border-radius: 22px; background: var(--wy-paper); color: var(--wy-ink); font-weight: 700; z-index: 60; opacity: 0; transition: opacity var(--wy-fast) var(--wy-ease), transform var(--wy-fast) var(--wy-ease); pointer-events: none; text-align: center; }
.ui-toast.is-open { opacity: 1; transform: translate(-50%, 0); }

/* —— 外壳级的整页提示（断网、强制更新、出错） —— */
.ui-blocker { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px; text-align: center; }
.ui-blocker__title { font-size: var(--wy-fs-page); line-height: var(--wy-lh-page); font-weight: 900; }
.ui-blocker__text { color: var(--wy-mist); max-width: 300px; }