/* ============================================================
   Miuix 设计语言 v3 - 逐像素对齐 miuix-0.9.4 源码
   取证: Colors.kt TextStyles.kt SquirclePath.kt Card.kt Surface.kt
         Divider.kt SmallTitle.kt Button.kt Switch.kt TextField.kt
         Component.kt ArrowPreference.kt OverlayDropdownPreference.kt
   核心: Miuix = 无阴影 + squircle 连续角 + 卡片堆叠
   ============================================================ */
:root{
  --primary:#3482FF;            --on-primary:#FFFFFF;
  --primary-variant:#0073DD;    --on-primary-variant:#FFFFFF;
  --primary-container:#EAF2FF;  --on-primary-container:#3482FF;
  --secondary:#E6E6E6;          --on-secondary:#000000;
  --secondary-variant:#F0F0F0;  --on-secondary-variant:#000000;
  --secondary-container:#F5F5F5;--on-secondary-container:#000000;
  --background:#FFFFFF;
  --surface:#F7F7F7;            --on-surface:#000000;
  --surface-variant:#FFFFFF;    --on-surface-variant:#8C93B0;
  --surface-container:#FFFFFF;  --on-surface-container:#000000;
  --surface-container-high:#E8E8E8; --surface-container-highest:#DCDCDC;
  --on-surface-variant-actions:#8C93B0;
  --disabled-on-secondary-variant:#B8B8B8;
  --disabled-primary:#C2D9FF;   --on-disabled-primary:#FFFFFF;
  --disabled-secondary-variant:#F5F5F5;
  --disabled-on-surface:#B8B8B8;--disabled-on-surface-variant:#D0D0D0;
  --error:#E94634;              --on-error:#FFFFFF;
  --error-container:#FDECEA;    --on-error-container:#E94634;
  --outline:#D9D9D9;            --on-outline:#000000;
  --divider-line:#E0E0E0;
  --corner:16px; --corner-sm:12px; --corner-xs:8px; --corner-pill:999px;
  --row-min:56px; --row-pad:16px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --fs-title1:32px; --fs-title2:24px; --fs-title3:20px; --fs-title4:18px;
  --fs-main:17px; --fs-body1:16px; --fs-body2:14px;
  --fs-subtitle:14px; --fs-foot1:13px; --fs-foot2:11px;
  --lh:1.4; --ease:cubic-bezier(.2,0,0,1);
  --font:-apple-system,BlinkMacSystemFont,"MiSans","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
 :root{
  --primary:#277AF7;            --on-primary:#FFFFFF;
  --primary-variant:#2D5FA8;    --on-primary-variant:#FFFFFF;
  --primary-container:#253E64;  --on-primary-container:#6EA8FF;
  --secondary:#505050;          --on-secondary:#FFFFFF;
  --secondary-variant:#3A3A3A;  --on-secondary-variant:#FFFFFF;
  --secondary-container:#2D2D2D;--on-secondary-container:#FFFFFF;
  --background:#242424;
  --surface:#000000;            --on-surface:#FFFFFF;
  --surface-variant:#242424;    --on-surface-variant:#787E96;
  --surface-container:#242424;  --on-surface-container:#FFFFFF;
  --surface-container-high:#2D2D2D; --surface-container-highest:#363636;
  --on-surface-variant-actions:#787E96;
  --disabled-on-secondary-variant:#5A5A5A;
  --disabled-primary:#253E64;   --on-disabled-primary:#7A8CAA;
  --disabled-secondary-variant:#2D2D2D;
  --disabled-on-surface:#5A5A5A;--disabled-on-surface-variant:#4A4A4A;
  --error:#F12522;              --on-error:#FFFFFF;
  --error-container:#3A1C1A;    --on-error-container:#F5837E;
  --outline:#404040;            --on-outline:#FFFFFF;
  --divider-line:#393939;
 }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;font-family:var(--font);font-size:var(--fs-main);line-height:var(--lh);color:var(--on-surface);background:var(--background);-webkit-font-smoothing:antialiased}
/* ==== 圆角方案 ====
   Miuix 在 Android(native) 端用真实数学超椭圆(conic-gradient 近似);
   在桌面/Web/JS 端则 fallback 成普通圆角(border-radius).
   本项目是网页版, 因此直接采用 border-radius —— 与 Miuix 官方非 native 行为一致.
   颜色统一由 --sq-fill 动态变量驱动, 落在元素本体 background 上.

   .sq16 = 大圆角 16px (.md-card / .md-button / .md-alert / 标记块 / 头像)
   .sq12 = 小圆角 12px (.md-field / .md-popup / .md-chip 之外) */
.sq16,.md-card,.md-button,.md-alert{
  --_f:var(--sq-fill,var(--surface-container));
  background:var(--_f);
  border-radius:var(--corner);
}
.sq12,.md-field{
  --_f:var(--sq-fill,var(--surface-container));
  background:var(--_f);
  border-radius:var(--corner-sm);
}
/* .md-popup 圆角对齐 Miuix ListPopup 默认 16dp(见 ListPopup.kt cornerRadius = 16.dp) */
.md-popup{
  --_f:var(--sq-fill,var(--surface-container));
  background:var(--_f);
  border-radius:var(--corner);
}
.sq16,.sq12{position:relative;isolation:isolate}
/* ==== 布局骨架 ==== */
.md-page{min-height:100vh;background:var(--background);padding-bottom:var(--sp-6)}
.md-scroll{padding:0 var(--sp-3)}
.md-bar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  min-height:52px;padding:0 var(--sp-4);
  /* 基础态：纯色不透明。毛玻璃由外观开关 body.fx-blurtop 驱动 */
  background:var(--background);
  border-bottom:.75px solid var(--divider-line);
}
.md-bar .md-bar-title{font-size:var(--fs-title3);font-weight:500;letter-spacing:.01em}
.md-bar .md-bar-mark{width:8px;height:8px;border-radius:2px;background:var(--primary);margin-right:10px;flex:none}
.md-bar-left{display:flex;align-items:center;min-width:0}
/* ==== Card: r16 无阴影无边框; Sink/Tilt 按压 ==== */
.md-card{
  --sq-fill:var(--surface-container);
  color:var(--on-surface-container);
  padding:var(--sp-4);margin:0 var(--sp-3) var(--sp-3);
}
.md-card.flush{padding:0;overflow:hidden}
.md-card.tappable{cursor:pointer;transition:transform .12s var(--ease)}
.md-card.tappable:active{transform:scale(.975)}
.md-card.tilt:active{transform:rotate(-1.2deg) scale(.99)}
.md-card.emphasis{--sq-fill:var(--primary);color:var(--on-primary)}
/* ==== SmallTitle: subtitle 14sp Bold 左28px ==== */
.md-smalltitle{
  font-size:var(--fs-subtitle);font-weight:700;
  color:var(--on-surface-variant);
  padding:var(--sp-2) 0 var(--sp-2) 28px;
  margin:var(--sp-3) var(--sp-3) var(--sp-1);
  letter-spacing:.01em;
}
/* ==== BasicComponent 行 (minH56 pad16 title17Medium sum14) ==== */
.md-row{
  display:flex;align-items:center;gap:var(--sp-3);
  min-height:var(--row-min);padding:var(--row-pad);
  position:relative;cursor:pointer;transition:background .15s var(--ease);
  -webkit-user-select:none;user-select:none;
}
.md-row:active{background:color-mix(in srgb,var(--on-surface) 6%,transparent)}
.md-row .md-row-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
.md-row .md-row-title{font-size:var(--fs-main);font-weight:500;color:var(--on-surface);line-height:1.3}
.md-row .md-row-sum{font-size:var(--fs-body2);color:var(--on-surface-variant);line-height:1.3}
.md-row .md-row-value{font-size:var(--fs-body2);color:var(--on-surface-variant-actions);text-align:end;white-space:nowrap;padding-right:var(--sp-1)}
.md-row .md-row-end{display:flex;align-items:center;gap:var(--sp-1);flex:none}
.md-row .md-row-start{display:flex;align-items:center;flex:none;color:var(--on-surface-variant-actions)}
.md-arrow{width:10px;height:16px;flex:none;color:var(--on-surface-variant-actions);display:inline-block}
.md-arrow svg{display:block;width:100%;height:100%}
.md-row + .md-row::before{content:"";position:absolute;left:var(--row-pad);right:0;top:0;height:.75px;background:var(--divider-line)}
.md-divider{height:.75px;background:var(--divider-line);border:none;margin:0}
/* ==== Switch: 49x28 thumb20 ==== */
.md-switch{
  --w:49px;--h:28px;--knob:20px;
  width:var(--w);height:var(--h);flex:none;position:relative;
  border-radius:999px;border:none;padding:0;cursor:pointer;
  background:var(--secondary);transition:background .18s var(--ease);
}
.md-switch::after{
  content:"";position:absolute;top:4px;left:4px;width:var(--knob);height:var(--knob);
  border-radius:50%;background:#FFFFFF;box-shadow:0 1px 2px rgba(0,0,0,.18);
  transition:transform .18s var(--ease);
}
.md-switch[aria-checked="true"],.md-switch.on{background:var(--primary)}
.md-switch[aria-checked="true"]::after,.md-switch.on::after{transform:translateX(21px)}
/* ==== Button: 58x40 r16, primary=buttonColorsPrimary ==== */
.md-button{
  --sq-fill:var(--primary);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-width:58px;min-height:40px;padding:0 var(--sp-4);
  border:none;cursor:pointer;font-family:inherit;
  font-size:var(--fs-main);font-weight:500;line-height:1;
  color:var(--on-primary);text-decoration:none;
  transition:transform .1s var(--ease),filter .15s var(--ease);
}
.md-button:active{transform:scale(.97);filter:brightness(.94)}
.md-button.block{width:100%}
.md-button.secondary{--sq-fill:var(--secondary-variant);color:var(--on-secondary-variant)}
.md-button.text{--sq-fill:transparent;color:var(--primary);min-width:0;padding:0 var(--sp-3)}
.md-button[disabled]{--sq-fill:var(--disabled-primary);color:var(--on-disabled-primary);cursor:not-allowed;transform:none}
.md-button .ico{font-size:1.15em;line-height:1}
/* ==== TextField: r16 底secondaryContainer label17->10 focus2dp ==== */
.md-field{--sq-fill:var(--secondary-container);display:block;margin-bottom:var(--sp-4)}
.md-field .md-input{
  width:100%;min-height:52px;padding:22px var(--sp-4) 6px;
  border:none;outline:none;font-family:inherit;
  font-size:var(--fs-main);color:var(--on-surface);
  background:transparent;position:relative;z-index:1;
}
.md-field .md-input::placeholder{color:transparent}
.md-field>label{
  position:absolute;left:18px;top:15px;
  font-size:var(--fs-main);color:var(--on-surface-variant);
  pointer-events:none;z-index:2;
  transition:top .15s var(--ease),font-size .15s var(--ease),color .15s var(--ease);
}
.md-field .md-input:focus+label,.md-field .md-input:not(:placeholder-shown)+label{top:7px;font-size:var(--fs-foot2);color:var(--primary)}
.md-field:focus-within{background:var(--secondary-container);outline:2px solid rgba(52,130,255,.55);outline-offset:-2px}
/* ==== 其它 ==== */
.md-alert{--sq-fill:var(--error-container);color:var(--on-error-container);font-size:var(--fs-foot1);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4)}
.md-chip{--sq-fill:var(--secondary-container);color:var(--on-secondary-container);font-size:var(--fs-foot1);padding:6px var(--sp-3);border-radius:var(--corner-pill);display:inline-flex;align-items:center;gap:6px}
.md-ico{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;color:var(--on-surface-variant-actions)}
.md-ico svg{width:100%;height:100%;display:block}
/* ==== 文字层级 (TextStyles.kt) ==== */
.t-title1{font-size:var(--fs-title1);font-weight:400;letter-spacing:-.01em}
.t-title2{font-size:var(--fs-title2);font-weight:400}
.t-title3{font-size:var(--fs-title3);font-weight:400}
.t-title4{font-size:var(--fs-title4);font-weight:500}
.t-main{font-size:var(--fs-main)}
.t-body1{font-size:var(--fs-body1)}
.t-body2{font-size:var(--fs-body2)}
.t-foot{font-size:var(--fs-foot1);color:var(--on-surface-variant)}
.t-variant{color:var(--on-surface-variant)}
.t-medium{font-weight:500}
.t-bold{font-weight:700}
/* ==== 工具 ==== */
.mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)}
.mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)}
.grow{flex:1 1 auto;min-width:0}
.center{display:flex;align-items:center;justify-content:center}
.row{display:flex;align-items:center}
.col{display:flex;flex-direction:column}
.wrap-center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--sp-5)}
.stack>*+*{margin-top:var(--sp-3)}

/* ============================================================
   NavigationBar (bottom bar)  source: NavigationBar.kt
   ItemHeight=64  IconSize=26  Label=12sp  IconTopPad=8  LabelBottomPad=8
   selected: onSurfaceContainer @100% + Bold ; unselected: alpha .4 ; pressed .5/.6
   bar bg = surface ; top divider = 0.75px ; bottom = safe-area inset
   ============================================================ */
.md-bottombar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--surface);
  border-top:0.75px solid var(--divider-line);
  padding-bottom:env(safe-area-inset-bottom,0px);
  display:flex;align-items:stretch;
  -webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
}
.md-nav-item{
  flex:1 1 0;min-width:0;height:64px;
  display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;
  gap:0;padding:8px 0 8px 0;
  background:transparent;border:0;color:var(--on-surface-container);
  opacity:0.4;
  font-size:12px;line-height:16px;font-weight:400;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:opacity .18s var(--ease),color .18s var(--ease);
  text-decoration:none;
}
.md-nav-item .md-nav-ico{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  margin-top:0;margin-bottom:auto;
}
.md-nav-item .md-nav-ico svg{width:26px;height:26px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.md-nav-item .md-nav-label{display:block;margin-bottom:0;text-align:center;font-size:12px;line-height:16px}
.md-nav-item.selected{opacity:1;font-weight:700;color:var(--on-surface-container)}
.md-nav-item:active{opacity:0.5}
.md-nav-item:not(.selected):active{opacity:0.6}

/* content must clear the fixed bar: 64 + 0.75 + safe-area */
.md-page.has-bottombar{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px) + var(--sp-4));}

/* switch rows: whole row tappable, switch pinned right */
.md-switchrow{cursor:pointer;-webkit-tap-highlight-color:transparent}
.md-switchrow:active{background:var(--press-overlay, rgba(0,0,0,.04))}
@media (prefers-color-scheme: dark){
  .md-switchrow:active{background:rgba(255,255,255,.06)}
}

/* ============================================================
   ListPopup / Dropdown  (二级菜单 / 级联弹窗)
   source: ListPopup.kt Dropdown.kt OverlayListPopup.kt DropdownEntriesContent.kt
   bg=surfaceContainer ; width 200..288 ; row MinHeight=56 ;
   popup mode: hPad=20  first/last vPad=20  middle vPad=12 ;
   check icon=20 (gap 12 before) ; group divider=1.5px (hPad20 vPad4) ;
   anchor offset=8 ; dim enter 300ms exit 150ms ; spring(.82,362.5)
   ============================================================ */
.md-dim{
  position:fixed;inset:0;z-index:60;
  background:rgba(0,0,0,0);
  opacity:0;pointer-events:none;
  transition:opacity .15s var(--ease),background .15s var(--ease);
}
.md-dim.show{opacity:1;pointer-events:auto;background:rgba(0,0,0,.20)}
@media (prefers-color-scheme: dark){ .md-dim.show{background:rgba(0,0,0,.42)} }

/* 进入动画 = 源码三合一:
   FractionAnimationSpec = spring(dampingRatio=0.82, stiffness=362.5) → scale .15→1 + clip-reveal
   AlphaEnterAnimationSpec = tween(200ms)                            → opacity 0→1
   DimEnterAnimationSpec   = tween(300ms, SinOut)                    → 遮罩 0→.20
   scale 用 cubic-bezier 近似 spring 的过冲回弹。 */
.md-popup{
  position:fixed;z-index:61;
  min-width:200px;max-width:288px;
  max-height:min(70vh, 420px);
  overflow-y:auto;overscroll-behavior:contain;
  /* 背景与圆角:直接落本体, 圆角对齐 Miuix ListPopup 16dp. */
  background:var(--surface-container);
  border-radius:var(--corner);
  color:var(--on-surface-container);
  padding:0;
  --sq-fill:var(--surface-container);
  opacity:0;
  transform:scale(.15);
  transform-origin:bottom center;
  will-change:transform,opacity,clip-path;
  pointer-events:none;
  /* 揭示方向由 JS 设的 --reveal 承载:
     above(默认,弹在锚点上方) 从底边向上展开
     below 从顶边向下展开  center 从中心向外展开 */
  --reveal: inset(100% 0% 0% 0%);
  clip-path: var(--reveal);
  transition:
    opacity .2s linear,
    transform .34s cubic-bezier(.34,1.42,.52,1),
    clip-path .32s cubic-bezier(.22,.9,.3,1);
}
.md-popup[data-pos="below"]{ --reveal: inset(0% 0% 100% 0%); }
.md-popup[data-pos="center"]{ --reveal: inset(50% 0% 50% 0%); }
.md-popup.show{
  opacity:1;
  transform:scale(1);
  clip-path:inset(0% 0% 0% 0%);
  pointer-events:auto;
}

.md-popup-item{
  display:flex;align-items:center;gap:var(--sp-3);
  min-height:56px;box-sizing:border-box;
  padding:12px 20px;
  font-size:var(--fs-main);line-height:22px;font-weight:400;
  color:var(--on-surface-container);
  background:transparent;border:0;width:100%;text-align:left;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .12s var(--ease);
}
.md-popup-item:first-child{padding-top:20px}
.md-popup-item:last-child{padding-bottom:20px}
.md-popup-item:active{background:rgba(0,0,0,.05)}
@media (prefers-color-scheme: dark){ .md-popup-item:active{background:rgba(255,255,255,.06)} }
.md-popup-item .md-popup-label{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-popup-item .md-popup-sum{display:block;font-size:var(--fs-foot1);line-height:18px;color:var(--on-surface-variant);margin-top:2px;font-weight:400}
.md-popup-item .md-popup-check{flex:0 0 20px;width:20px;height:20px;display:none;align-items:center;justify-content:center;margin-left:12px;color:var(--primary)}
.md-popup-item .md-popup-check svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.md-popup-item.selected{color:var(--primary)}
.md-popup-item.selected .md-popup-label{font-weight:500}
.md-popup-item.selected .md-popup-check{display:flex}
.md-popup-divider{height:1.5px;background:var(--divider-line);margin:4px 20px;border:0}

/* --- 修正：button 元素继承字体（底栏项已从 a 改为 button） --- */
.md-nav-item{
  font-family:var(--font);
  appearance:none;-webkit-appearance:none;
  margin:0;line-height:16px;
}
/* --- popup 内容层 --- */
.md-popup{ isolation:isolate; }
.md-popup > *{ position:relative; z-index:1; }

/* ==========================================================================
   外观特效层 (可选开关, 由 body 上的 fx-* 状态类驱动)
   对应 App 设置页里的: 悬浮底栏 / 顶栏透明模糊 / 液态玻璃
   —— 浏览器为 Web 渲染, 用 border-radius + backdrop-filter 近似原生效果
   ========================================================================== */

/* —— 悬浮底栏: 底栏脱离屏幕底边, 浮起为圆角胶囊 + 毛玻璃 —— */
body.fx-floatbar .md-bottombar{
  left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));
  border:0;border-radius:26px;
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
          backdrop-filter:saturate(180%) blur(22px);
  box-shadow:0 6px 22px rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.08);
  overflow:hidden;
}
/* 悬浮时页面底部多留一截, 免得内容被浮起的底栏挡住 */
body.fx-floatbar .md-page.has-bottombar{
  padding-bottom:calc(64px + 26px + env(safe-area-inset-bottom,0px));
}

/* —— 顶栏透明模糊: 加强毛玻璃, 去分隔线 —— */
body.fx-blurtop .md-bar{
  background:color-mix(in srgb,var(--background) 62%,transparent);
  -webkit-backdrop-filter:saturate(200%) blur(28px);
          backdrop-filter:saturate(200%) blur(28px);
  border-bottom-color:transparent;
}

/* —— 液态玻璃: 顶栏/底栏加高光描边 + 更深折射, 泛光更亮 —— */
body.fx-liquid .md-bar,
body.fx-liquid .md-bottombar{
  -webkit-backdrop-filter:saturate(220%) blur(30px) brightness(1.08);
          backdrop-filter:saturate(220%) blur(30px) brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.18);
}
body.fx-liquid .md-bar{
  background:color-mix(in srgb,var(--background) 55%,transparent);
}
body.fx-liquid .md-bottombar{
  background:color-mix(in srgb,var(--surface) 62%,transparent);
}
/* 深色下高光描边减弱, 避免过曝 */
@media (prefers-color-scheme: dark){
  body.fx-liquid .md-bar,
  body.fx-liquid .md-bottombar{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.06);
  }
}

/* —— 外观设置卡片中的开关行副标题对勾色 —— */
.md-switchrow.fx-row .md-row-title{font-weight:500}