/* hidden 属性永远优先(修:各页面自己写的 display 会盖住 hidden,导致该藏的东西露出来) */
[hidden]{display:none!important}
/* 所有页面共用的补充样式(先于各页面 css 加载,页面自己的规则优先) */
a{color:inherit;text-decoration:none}
a.ti{text-decoration:none}
.tbd{position:absolute;top:-5px;right:7px;min-width:18px;height:18px;border-radius:9px;background:var(--ink);color:var(--card);font:600 10.5px/18px -apple-system,sans-serif;text-align:center;padding:0 5px;z-index:2;box-sizing:border-box;box-shadow:0 0 0 2px var(--card);pointer-events:none}
.tdot{position:absolute;top:0;right:17px;width:8px;height:8px;border-radius:50%;background:var(--ink);border:1.5px solid var(--card);z-index:2}
/* 底部回主页的小横条 */
.phone>.hi{position:absolute;left:50%;bottom:3px;width:120px;height:12px;margin-left:-60px;z-index:30;display:block}
.phone>.hi::after{content:"";position:absolute;left:8px;right:8px;bottom:2px;height:4px;border-radius:2px;background:var(--ink);opacity:.32}
.phone>.toast{position:absolute;left:50%;top:54px;z-index:40;transform:translate(-50%,-10px);padding:8px 16px;border-radius:18px;font-size:12.5px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap;max-width:340px;overflow:hidden;text-overflow:ellipsis;background:var(--card);border:1px solid var(--gb);box-shadow:var(--sh),0 0 0 1px var(--ring);color:var(--ink)}
.phone>.toast.on{opacity:1;transform:translate(-50%,0)}
.tog{cursor:pointer}
.bar a{color:var(--mute)}
/* 手机(iPhone)上:画面铺满整个屏幕,不留边、不滚动整页 */
html.narrow,html.narrow body{height:100%;overflow:hidden;overscroll-behavior:none}
html.narrow body{position:fixed;inset:0;margin:0;padding:0!important;min-height:0!important;background:var(--wp,var(--bg))}
html.narrow .bar{display:none!important}
html.narrow .phone{border-radius:0!important;border:0!important;box-shadow:none!important}
html.narrow .pw{margin:0 auto}
input,textarea,select{font-size:max(16px,1em)}
/* 没有定义尺寸的装饰小图,不显示 */
.phone>svg.bow,.phone>svg.o2{display:none}
/* 返回键 */
.zb{flex:none;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid var(--gb,rgba(255,255,255,.9));background:var(--g2,var(--glass,rgba(255,255,255,.6)));box-shadow:var(--sh),0 0 0 1px var(--ring,rgba(110,110,120,.2));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:inline-grid;place-items:center;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.zb svg.i{width:16px;height:16px;stroke-width:2.2}
.zb:active{transform:scale(.92)}
.zb.float{position:absolute;left:14px;top:50px;z-index:12}
.nav .l.hasb{display:flex;align-items:center;gap:8px}
.nav .l.hasb .zb{margin-left:-2px}

body{touch-action:manipulation;-webkit-text-size-adjust:100%}
.top .l .zb.fb{width:26px;height:26px}

/* 电脑上:一台居中的完整小手机(带黑色边框),没有外面的标题栏 */
html:not(.narrow),html:not(.narrow) body{height:100%;overflow:hidden}
html:not(.narrow) body{display:flex;align-items:center;justify-content:center;padding:0!important;margin:0;min-height:0!important}
html:not(.narrow) .pw{margin:0}
html:not(.narrow) .phone{border:0!important;box-shadow:0 0 0 9px #18181b,0 0 0 11px #46464d,0 24px 60px rgba(0,0,0,.28)!important}

/* ===== 深浅色只影响「小手机里面」,不影响浏览器和手机外面的背景 ===== */
html{color-scheme:light!important;background:#d9d9de}
:root[data-theme="dark"] .phone,:root[data-theme="dark"] #ph{color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .phone,:root:not([data-theme="light"]) #ph{color-scheme:dark}}
/* 电脑上:手机外面永远是同一块中性底(带小圆点),切深色也不变;真手机(narrow)铺满,仍跟随手机里的主题 */
html:not(.narrow) body{background:#d9d9de!important}
html:not(.narrow) .phone{color:var(--ink)}

/* ===== 跳转时不再整页黑屏 / 白屏:外壳先画出来,里面的东西加载完再显示 ===== */
html.zpre #pw{width:calc(390px * var(--zk,1));height:calc(var(--zh,844px) * var(--zk,1))}
html.zpre #ph{height:var(--zh,844px);transform:scale(var(--zk,1))}
html.zpre #ph>*{visibility:hidden}
@keyframes zin{from{opacity:0}to{opacity:1}}
/* 切页:浏览器支持时用系统级交叉淡入(不闪),不支持就直接换 */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.14s;animation-timing-function:ease-out}
@media (prefers-reduced-motion:reduce){html.zin #ph>*{animation:none}}

/* 充电中:状态栏电量变成绿色 */
.sb svg.chg rect[x="30.5"],.sbar svg.chg rect[x="30.5"]{fill:#4caf7a}

/* 顶栏右边的「?」:点了跳到这个 app 的帮助 */
.nav .hqw{justify-self:end;display:flex}
.hq{flex:none;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid var(--gb,rgba(255,255,255,.9));background:var(--g2,var(--glass,rgba(255,255,255,.6)));box-shadow:var(--sh),0 0 0 1px var(--ring,rgba(110,110,120,.2));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;color:var(--soft)}
.hq svg.i{width:16px;height:16px;stroke-width:2}
.hq:active{transform:scale(.92)}