/* 狗在哪 · App 风格皮肤（v3）：奶油纸底 + 深蓝主色 + 橙色提醒，胖圆角"软陶"卡片，底部 TabBar 四页
 * 令牌只在这里定义；所有面板/按钮/弹层共用。id 一个都没改，各 js 不用动 */
:root{
  /* 马卡龙低饱和（跟 WoolPaw 毛绒套图同一套）：奶油纸底 / 雾蓝主色（项圈色的深一档，白字 4.6:1）/ 杏橙提醒 / 薄荷正常 */
  --bg:#f8f2e4;--card:#fffdf8;--sunk:#f1eadb;--line:#e6dfcf;
  --ink:#2b2622;--muted:#6f675b;--faint:#a89f8f;
  --accent:#5b7fa8;--accent-2:#7c9cc2;--accent-soft:#dce8f5;--accent-ink:#fff;--accent-deep:#456a92;
  --warn:#d98c4a;--warn-soft:#fbe6d2;--ok:#4f9a72;--ok-soft:#ddefe4;--bad:#c9584a;--bad-bg:#fbe8e4;
  --r-lg:22px;--r-md:16px;--r-sm:12px;
  --shadow:0 8px 24px rgba(60,40,10,.13),0 1px 0 rgba(255,255,255,.7) inset;
  --shadow-sm:0 3px 10px rgba(60,40,10,.10);
  --tab-h:64px;--safe-b:env(safe-area-inset-bottom);--safe-t:env(safe-area-inset-top);
  --above-tab:calc(var(--tab-h) + 10px + var(--safe-b));
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font:15px/1.45 "HarmonyOS Sans SC","PingFang SC","MiSans","Noto Sans SC",-apple-system,"Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font-family:inherit}
#map{position:fixed;inset:0}
[hidden]{display:none!important}

/* ---------- 顶部：狗切换条 + 状态卡 ---------- */
.top{position:fixed;left:12px;right:12px;top:calc(10px + var(--safe-t));z-index:5;pointer-events:none}
.chips{display:flex;gap:8px;overflow-x:auto;margin-bottom:10px;pointer-events:auto;scrollbar-width:none;padding:2px 2px 4px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px 6px 8px;border-radius:999px;background:var(--card);border:1.5px solid var(--line);font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,color .2s,border-color .2s;box-shadow:var(--shadow-sm);max-width:46vw;color:var(--ink)}
.chip::before{content:"";width:26px;height:26px;border-radius:50%;background:#fff url(/wp/face.png) center 30%/110% no-repeat;border:1px solid var(--line);flex:none}
.chip.add::before{display:none}
.chip .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.cur{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.chip.add{color:var(--accent);border-style:dashed;padding:6px 12px}
.chip.add svg{width:16px;height:16px}
.card{pointer-events:auto;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--shadow)}
.row{display:flex;align-items:center;gap:8px}
.name{font-size:21px;font-weight:800;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.01em}
.name.empty{font-size:15px;font-weight:600;color:var(--muted);white-space:normal}
.dot{width:11px;height:11px;border-radius:50%;background:var(--bad);flex:none;box-shadow:0 0 0 3px rgba(192,57,43,.15)}
.dot.on{background:var(--ok);box-shadow:0 0 0 3px rgba(46,139,87,.18)}
.ago{color:var(--muted);font-size:13px;flex:none}
.live{flex:none;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--bad-bg);color:var(--bad);white-space:nowrap}
.live.on{background:var(--ok-soft);color:var(--ok)}
.me{flex:none;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:var(--sunk);color:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;margin:-6px -8px -6px 0}
.me svg{width:18px;height:18px}
.stimg{flex:none;width:64px;height:64px;object-fit:contain;margin:-14px -6px -18px 0;filter:drop-shadow(0 3px 4px rgba(60,40,10,.18))}
.nvimg{flex:none;width:56px;height:56px;object-fit:contain;align-self:center;margin-right:-2px}
.st{margin-top:8px;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);padding:7px 10px;border-radius:var(--r-sm);background:var(--sunk)}
.st .sd{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none}
.st.track{color:var(--ink);background:var(--ok-soft)}.st.track .sd{background:var(--ok);box-shadow:0 0 0 3px rgba(46,139,87,.2)}
.st.off{background:var(--warn-soft)}.st.off .sd{background:var(--warn)}
.st .sleep{margin-left:auto;color:var(--accent);font-weight:700;text-decoration:none;padding:6px 4px 6px 10px;margin-top:-6px;margin-bottom:-6px;white-space:nowrap}
.st .sleep:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
.drawer{display:block;width:100%;height:22px;margin:6px 0 -8px;border:0;background:none;color:var(--faint);cursor:pointer;padding:0}
.drawer svg{width:20px;height:20px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.card.collapsed .st,.card.collapsed .meta{display:none}
.card.collapsed .drawer svg{transform:rotate(180deg)}
.card.collapsed{padding-bottom:10px}
.card.collapsed .name{font-size:18px}
.meta{margin-top:10px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;color:var(--muted);font-size:11.5px}
.meta>span{display:flex;flex-direction:column;gap:1px;padding:6px 8px;border-radius:var(--r-sm);background:var(--sunk);min-width:0}
.meta b{color:var(--ink);font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15;order:-1}
.meta b.far{color:var(--bad)}
.meta #fixTxt{grid-column:1/-1;background:none;padding:0;font-size:12px;color:var(--warn);font-weight:600}
.meta #fixTxt:empty{display:none}
.meta .go{grid-column:1/-1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-radius:var(--r-md);background:var(--accent);color:#fff;font-weight:800;font-size:15px;text-decoration:none;box-shadow:0 4px 0 var(--accent-deep);transition:transform .15s,box-shadow .15s}
.meta .go:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-deep)}
.meta .go svg{width:16px;height:16px}
.meta .go:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- 地图页浮动控件 ---------- */
.fabs{position:fixed;right:12px;bottom:calc(var(--above-tab) + 68px);z-index:5;display:flex;flex-direction:column;gap:10px}
.fab{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:var(--shadow-sm);transition:transform .15s,background .2s}
.fab svg{width:22px;height:22px}
.fab:active{transform:scale(.93)}
.fab:disabled{opacity:.5;color:var(--faint);background:var(--sunk);cursor:not-allowed;box-shadow:none}
.fab.on{background:var(--accent-soft);border-color:var(--accent)}
.cta{position:fixed;left:50%;transform:translateX(-50%);bottom:var(--above-tab);z-index:5;min-width:180px;max-width:70vw;height:52px;padding:0 24px;border:0;border-radius:999px;background:var(--accent);color:#fff;font-size:16px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:0 5px 0 var(--accent-deep),0 12px 24px rgba(47,93,138,.28);transition:transform .15s,box-shadow .15s,opacity .2s}
.cta svg{width:20px;height:20px}
.cta:active{transform:translate(-50%,4px);box-shadow:0 1px 0 var(--accent-deep),0 6px 12px rgba(47,93,138,.2)}
.cta:disabled{opacity:.5;box-shadow:0 5px 0 var(--accent-deep)}
.tip{position:fixed;left:12px;right:12px;top:calc(150px + var(--safe-t));z-index:6;text-align:center;pointer-events:none}
.tip span{background:var(--accent);color:#fff;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;box-shadow:var(--shadow-sm)}

/* ---------- TabBar ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:7;height:calc(var(--tab-h) + var(--safe-b));padding:6px 8px var(--safe-b);display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,253,248,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1.5px solid var(--line);box-shadow:0 -6px 20px rgba(60,40,10,.08)}
.tab{position:relative;border:0;background:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:700;cursor:pointer;border-radius:var(--r-md);transition:color .2s,background .2s;padding:4px 0}
.tab svg{width:24px;height:24px;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.tab.on{color:var(--accent)}
.tab.on svg{transform:translateY(-1px) scale(1.08)}
.tab.on::after{content:"";position:absolute;top:2px;width:22px;height:4px;border-radius:2px;background:var(--accent)}
.tab .bd{position:absolute;top:2px;right:calc(50% - 22px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--card)}
.tab:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

/* 页面视图（提醒 / 我的）盖在地图上 */
.view{position:fixed;inset:0;bottom:calc(var(--tab-h) + var(--safe-b));z-index:6;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(12px + var(--safe-t)) 14px 24px}
.view h2{margin:6px 2px 14px;font-size:24px;font-weight:800;letter-spacing:.01em;display:flex;align-items:center;gap:10px}
.view h2 .sp{flex:1}
.view .sec{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:6px 0;margin-bottom:14px}
.view .sec h4{margin:0;padding:12px 16px 4px;font-size:12.5px;color:var(--muted);font-weight:700;border:0}
.rowbtn{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 16px;border:0;background:none;text-align:left;color:var(--ink);font-size:15.5px;font-weight:600;cursor:pointer;border-bottom:1px solid var(--line)}
.rowbtn:last-child{border-bottom:0}
.rowbtn:active{background:var(--sunk)}
.rowbtn .ic{width:36px;height:36px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.rowbtn .ic svg{width:19px;height:19px}
.rowbtn .ic.warn{background:var(--warn-soft);color:var(--warn)}
.rowbtn .ic.ok{background:var(--ok-soft);color:var(--ok)}
.rowbtn .tx{flex:1;min-width:0}
.rowbtn .tx small{display:block;font-size:12.5px;color:var(--muted);font-weight:500;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowbtn .chev{color:var(--faint);flex:none}
.rowbtn .chev svg{width:18px;height:18px}
/* 提醒列表 */
.al-day{margin:14px 4px 6px;font-size:12.5px;color:var(--muted);font-weight:700}
.al{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--card);margin-bottom:8px;text-align:left;cursor:pointer;box-shadow:var(--shadow-sm);color:var(--ink);font:inherit}
.al:active{background:var(--sunk)}
.al .ic{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:var(--sunk);color:var(--muted)}
.al .ic svg{width:19px;height:19px}
.al.bad .ic{background:var(--bad-bg);color:var(--bad)}
.al.warn .ic{background:var(--warn-soft);color:var(--warn)}
.al.ok .ic{background:var(--ok-soft);color:var(--ok)}
.al .tx{flex:1;min-width:0}
.al .tx b{display:block;font-size:15px;font-weight:700;line-height:1.35}
.al .tx span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.al .tm{flex:none;font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums;margin-top:2px}
.empty{padding:48px 16px;text-align:center;color:var(--muted);font-size:14px}
.empty img{width:140px;height:140px;object-fit:contain;margin-bottom:6px;filter:drop-shadow(0 6px 8px rgba(60,40,10,.15))}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
/* 临时提醒定位针 */
.alpin{width:16px;height:16px;border-radius:50%;background:var(--bad);border:3px solid #fff;box-shadow:0 0 0 6px rgba(192,57,43,.25),0 2px 6px rgba(0,0,0,.3);animation:alping 1.2s ease-out infinite}
@keyframes alping{0%{box-shadow:0 0 0 0 rgba(192,57,43,.5),0 2px 6px rgba(0,0,0,.3)}100%{box-shadow:0 0 0 22px rgba(192,57,43,0),0 2px 6px rgba(0,0,0,.3)}}

/* ---------- 地图标记 ---------- */
.dogpin{width:54px;height:54px;border-radius:50%;background:#fff url(/wp/face.png) center 30%/92% no-repeat;border:3px solid var(--accent);box-shadow:0 0 0 4px rgba(47,93,138,.18),0 4px 10px rgba(0,0,0,.28);font-size:0;transition:opacity .4s cubic-bezier(.2,.8,.2,1),filter .4s cubic-bezier(.2,.8,.2,1)}
.dogpin.sleep{opacity:.6;filter:grayscale(.75)}
.dogpin{position:relative}
.dogpin[data-name]::after{content:attr(data-name);position:absolute;top:100%;left:50%;transform:translate(-50%,5px);white-space:nowrap;font-size:12px;font-weight:800;color:#fff;background:var(--accent);padding:2px 9px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.25);pointer-events:none}
.dogpin.sleep[data-name]::after{background:var(--muted)}
.dogpin.other{width:38px;height:38px;border-color:#fff;box-shadow:0 0 0 2px rgba(60,40,10,.18),0 3px 8px rgba(0,0,0,.25);cursor:pointer}
.dogpin.other[data-name]::after{font-size:11px;font-weight:700;color:var(--ink);background:rgba(255,253,248,.94);border:1px solid var(--line);box-shadow:none}
.dogpin.ghost[data-name]::after{display:none}
.eye.off{color:var(--muted);background:var(--sunk)}
.dogpin.ghost{width:42px;height:42px;border-color:var(--warn);box-shadow:0 0 0 4px rgba(217,130,43,.22),0 2px 6px rgba(0,0,0,.3)}
.mepin{width:18px;height:18px;border-radius:50%;background:#2f7ff0;border:3px solid #fff;box-shadow:0 0 0 1px rgba(47,127,240,.4),0 2px 6px rgba(0,0,0,.3)}
.mepin.off{background:var(--warn);box-shadow:0 0 0 1px rgba(217,130,43,.5),0 2px 6px rgba(0,0,0,.3);animation:mepulse 1.2s ease-out infinite}
@keyframes mepulse{0%{box-shadow:0 0 0 0 rgba(217,130,43,.55),0 2px 6px rgba(0,0,0,.3)}100%{box-shadow:0 0 0 18px rgba(217,130,43,0),0 2px 6px rgba(0,0,0,.3)}}

/* ---------- 按钮 ---------- */
.btn{appearance:none;border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--r-md);min-height:46px;padding:10px 14px;font-size:15px;font-weight:700;box-shadow:var(--shadow-sm);cursor:pointer;transition:background .15s,color .15s,opacity .15s,transform .12s}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 4px 0 var(--accent-deep)}
.btn.primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-deep)}
.btn.danger{color:var(--bad);border-color:#ecc9c4;background:var(--bad-bg)}
.btn.active,.btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none;transform:none}
.btn.small{min-height:36px;padding:6px 12px;font-size:13px;box-shadow:none;border-radius:10px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.chip:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button,a,.chip,.rowbtn,.al{transition:background-color .15s,color .15s,border-color .15s,opacity .15s}
.toast{position:fixed;left:50%;top:38%;transform:translateX(-50%);z-index:30;background:var(--ink);color:#fff;padding:14px 20px;border-radius:var(--r-md);font-size:16px;max-width:86vw;text-align:center;display:none;box-shadow:0 12px 32px rgba(0,0,0,.3)}
.toast.alarm{background:var(--bad)}

/* ---------- 底部弹层（sheet） ---------- */
.sheet{position:fixed;inset:0;z-index:20;background:rgba(38,34,29,.42);display:none;align-items:flex-end}
.sheet.show{display:flex}
.sheet .box{width:100%;max-height:90vh;max-height:90dvh;overflow-y:auto;background:var(--card);border-radius:26px 26px 0 0;padding:10px 18px calc(20px + var(--safe-b));animation:sheetup .28s cubic-bezier(.2,.8,.2,1)}
.sheet .box::before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 12px}
@keyframes sheetup{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.sheet h3{margin:0 0 12px;font-size:19px;font-weight:800;display:flex;align-items:center;gap:8px}
.sheet h3 .sp{flex:1}
.sheet h4{margin:18px 0 4px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);font-weight:700}
.sheet label{display:block;color:var(--muted);font-size:13px;margin:10px 0 5px;font-weight:600}
.sheet input,.sheet select{width:100%;min-height:46px;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-size:16px;background:#fff;color:var(--ink);outline:none;font-family:inherit}
.sheet input:focus-visible,.sheet select:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,93,138,.18)}
.sheet input.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.06em}
.sheet input.code{font-size:30px;line-height:1.2;font-weight:800;padding:10px 12px;text-align:center;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;background:var(--sunk)}
.sheet input.code::placeholder{color:#c9c2b4;font-weight:500}
.sheet input.code:focus-visible{background:#fff}
#addImeiWrap{margin-top:4px;padding-top:10px;border-top:1px dashed var(--line)}
.sheet .acts{display:flex;gap:8px;margin-top:16px}.sheet .acts .btn{flex:1}
.sheet .err{display:none;margin:10px 0 0;padding:9px 12px;border-radius:var(--r-sm);background:var(--bad-bg);color:var(--bad);font-size:14px}
.sheet .err.show{display:block}
.sheet .note{margin:8px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5}
.chk{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px}.chk input{width:auto;min-height:0;transform:scale(1.2)}
.opt{display:flex;align-items:center;gap:10px;margin-top:12px}
.sheet .opt label{display:flex;align-items:center;gap:8px;flex:1;min-width:0;min-height:44px;margin:0;color:var(--ink);font-size:14px;font-weight:500;cursor:pointer}
.sheet .opt label input{width:auto;min-height:0;flex:none;transform:scale(1.2);margin:0 4px 0 2px}
.sheet .opt.off label{color:var(--muted);cursor:default}
.opt .btn.small{flex:none;min-height:44px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.two label{margin-top:10px}
.scan{margin:4px 0 12px;background:#000;border-radius:var(--r-md);overflow:hidden;position:relative;aspect-ratio:1/1;max-height:52vh}
.scan video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scan .frame{position:absolute;inset:14%;border:2px solid rgba(255,255,255,.85);border-radius:12px;pointer-events:none}
.scan .stop{position:absolute;right:10px;top:10px;padding:8px 12px;border:0;border-radius:9px;background:rgba(255,255,255,.92);color:var(--ink);font-size:13px;font-weight:600;cursor:pointer}
.lopt{display:block;width:100%;text-align:left;margin-top:10px;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--sunk);color:var(--ink);cursor:pointer;font:inherit}
.lopt b{display:block;font-size:16px;font-weight:800;margin-bottom:3px}
.lopt span{display:block;font-size:13px;color:var(--muted);line-height:1.45}
.lopt:active{background:var(--accent-soft);border-color:var(--accent)}

/* 「我的」作为整页（tab）而不是弹层 */
body.tab-me #sheetMe{background:var(--bg);align-items:stretch;bottom:calc(var(--tab-h) + var(--safe-b));z-index:6}
body.tab-me #sheetMe .box{max-height:none;height:100%;border-radius:0;padding:calc(12px + var(--safe-t)) 16px 24px;animation:none;background:var(--bg)}
body.tab-me #sheetMe .box::before{display:none}
body.tab-me #sheetMe h3{font-size:24px}
body.tab-me #sheetMe h4{border-top:0;padding-top:8px}
body.tab-me #sheetMe .who,body.tab-me #sheetMe .dl,body.tab-me #sheetMe .two,body.tab-me #sheetMe #pwErr,body.tab-me #sheetMe .acts{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:12px 16px;box-shadow:var(--shadow-sm)}
body.tab-me #sheetMe .two{margin-bottom:0}
body.tab-me #sheetMe .acts{margin-top:10px}
body.tab-me #sheetMe #meClose{display:none}
.dl .it{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.dl .it:last-child{border-bottom:0}
.dl .nm{flex:1;min-width:0}
.dl .nm b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl .nm span{font-size:13px;color:var(--muted);font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.dl .none{padding:12px 0;color:var(--muted);font-size:14px}
.who{display:flex;align-items:center;gap:12px;padding:4px 0 8px}
.who .av{width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;flex:none}
.who b{display:block;font-size:17px}
.who span{font-size:13px;color:var(--muted)}
.me-rows{margin:0 0 14px}

/* ---------- 回放 / 监控 / 导航面板：都贴在 TabBar 上方 ---------- */
.replay{position:fixed;left:12px;right:12px;bottom:var(--above-tab);z-index:6;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:12px 14px}
.rp-top{display:flex;align-items:center;gap:8px}
.rp-days{display:flex;gap:6px;flex:1;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.rp-days::-webkit-scrollbar{display:none}
.rp-days .chip{box-shadow:none;min-height:34px;padding:4px 12px;background:var(--sunk);font-weight:700;font-size:13px}
.rp-days .chip::before{display:none}
.rp-days .chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.rp-cal{position:relative;overflow:hidden}
.rp-cal input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;min-height:0}
.rp-x{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:var(--sunk);color:var(--muted);font-size:14px;cursor:pointer;padding:0}
.rp-stats{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;margin:12px 2px 8px;font-size:13px;color:var(--muted);transition:opacity .2s}
.rp-stats.dim{opacity:.4}
.rp-stats b{color:var(--ink);font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.rp-stats .rp-n{margin-left:auto;font-size:12px}
.rp-ctl{display:flex;align-items:center;gap:10px}
.rp-play{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--accent);color:#fff;font-size:15px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 var(--accent-deep)}
.rp-play:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-deep)}
.rp-play:disabled{opacity:.4;cursor:default;box-shadow:none}
.rp-play svg{width:20px;height:20px}
.rp-play .i-pause,.rp-play.playing .i-play{display:none}
.rp-play.playing .i-pause{display:block}
.rp-x svg{width:16px;height:16px}
.rp-ctl input[type=range]{flex:1;min-width:0;accent-color:var(--accent);height:36px;margin:0}
.rp-time{flex:none;font-variant-numeric:tabular-nums;font-size:14px;min-width:60px;text-align:right;color:var(--ink);font-weight:700}
.rp-spd{flex:none;border:1.5px solid var(--line);background:var(--sunk);color:var(--ink);border-radius:10px;padding:7px 8px;font-size:13px;font-weight:800;cursor:pointer;min-width:50px;font-variant-numeric:tabular-nums}
.rp-legend{display:flex;gap:10px;align-items:center;margin:8px 2px 0;font-size:11.5px;color:var(--muted)}
.rp-legend i{display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:4px;vertical-align:middle}
.wbar{position:fixed;left:12px;right:12px;bottom:calc(var(--above-tab) + 62px);z-index:5;display:flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-sm);padding:8px 10px 8px 12px}
.wbar .wd{width:9px;height:9px;border-radius:50%;background:var(--warn);flex:none;animation:wpulse 1.4s ease-out infinite}
@keyframes wpulse{0%{box-shadow:0 0 0 0 rgba(217,130,43,.6)}100%{box-shadow:0 0 0 10px rgba(217,130,43,0)}}
.wbar .wtxt{flex:1;min-width:0;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.wbar .btn{flex:none}
.navp{position:fixed;left:12px;right:12px;bottom:var(--above-tab);z-index:6;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:14px 16px;transition:background .25s,border-color .25s}
.navp.off{background:var(--warn-soft);border-color:#f0b27a}
.grab{display:block;width:100%;height:18px;margin:-8px 0 4px;border:0;background:none;padding:0;cursor:pointer}
.grab i{display:block;width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto}
.navp.collapsed{padding:8px 14px 10px}
.navp.collapsed .nv-acts,.navp.collapsed .nvimg{display:none}
.navp.collapsed .nv-main{flex-wrap:nowrap;align-items:center;gap:10px}
.navp.collapsed .nv-big{font-size:22px}
.navp.collapsed .nv-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navp.collapsed .nv-off{margin:0 0 6px;padding:5px 8px;font-size:12.5px}
body.naving .fabs{bottom:calc(var(--above-tab) + 150px)}
body.naving.nav-collapsed .fabs{bottom:calc(var(--above-tab) + 74px)}
.nv-off{display:flex;align-items:center;gap:6px;margin:-2px 0 10px;padding:8px 10px;border-radius:var(--r-sm);background:var(--warn);color:#fff;font-weight:800;font-size:14px;animation:nvblink 1.2s ease-in-out infinite}
@keyframes nvblink{0%,100%{opacity:1}50%{opacity:.55}}
.nv-main{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.nv-big{font-size:32px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;color:var(--accent)}
.navp.off .nv-big{color:var(--warn)}
.nv-sub{font-size:13.5px;color:var(--muted);flex:1;min-width:0}
.nv-acts{display:flex;gap:8px;margin-top:12px}
.nv-acts .btn{flex:1;padding:9px 4px}
/* 面板打开时把主按钮/浮钮让开 */
body.replaying .cta,body.naving .cta,body.replaying .wbar,body.naving .wbar{display:none!important}
body.replaying .fabs{bottom:calc(var(--above-tab) + 190px)}
body.naving .fabs{bottom:calc(var(--above-tab) + 150px)}
body.watching .fabs{bottom:calc(var(--above-tab) + 122px)}
body.tab-alerts .top,body.tab-me .top,body.tab-alerts .fabs,body.tab-me .fabs,body.tab-alerts .cta,body.tab-me .cta,body.tab-alerts .wbar,body.tab-me .wbar,body.tab-alerts .replay,body.tab-me .replay,body.tab-alerts .navp,body.tab-me .navp{display:none!important}

/* ---------- 对话框 / 提示 ---------- */
.dlg{position:fixed;inset:0;z-index:25;background:rgba(38,34,29,.5);display:none;align-items:center;justify-content:center;padding:24px}
.dlg.show{display:flex}
.dlg .box{width:100%;max-width:340px;background:var(--card);border-radius:var(--r-lg);padding:20px 18px 16px;box-shadow:0 16px 40px rgba(40,30,10,.3)}
.dlg h3{margin:0 0 6px;font-size:18px;font-weight:800}
.dlg p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.dlg .acts{display:flex;gap:8px;margin-top:18px}.dlg .acts .btn{flex:1;box-shadow:none}
.hint{position:fixed;inset:0;z-index:40;background:var(--bg);padding:24px;display:none}
.hint pre{background:#fff;border:1px solid var(--line);padding:12px;border-radius:10px;white-space:pre-wrap}
@media(min-width:700px){.top{left:max(12px,calc(50% - 330px));right:max(12px,calc(50% - 330px))}.replay,.navp,.wbar{left:max(12px,calc(50% - 330px));right:max(12px,calc(50% - 330px))}.view{padding-left:max(14px,calc(50% - 330px));padding-right:max(14px,calc(50% - 330px))}.tabbar{padding-left:max(8px,calc(50% - 260px));padding-right:max(8px,calc(50% - 260px))}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- 新手引导 / 加载 / 空态（WoolPaw 套图） ---------- */
.onb{position:fixed;inset:0;z-index:15;background:var(--bg);display:flex;flex-direction:column;padding:calc(20px + var(--safe-t)) 0 calc(20px + var(--safe-b))}
.onb-track{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.onb-track::-webkit-scrollbar{display:none}
.onb-step{flex:none;width:100%;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 32px}
.onb-step img{width:min(62vw,260px);height:auto;margin-bottom:22px;filter:drop-shadow(0 10px 14px rgba(60,40,10,.16))}
.onb-step h3{margin:0 0 8px;font-size:24px;font-weight:800}
.onb-step p{margin:0;color:var(--muted);font-size:15px;line-height:1.6;max-width:320px}
.onb-dots{display:flex;justify-content:center;gap:8px;margin:14px 0 18px}
.onb-dots i{width:8px;height:8px;border-radius:4px;background:var(--line);transition:width .2s,background .2s}
.onb-dots i.on{width:24px;background:var(--accent)}
.onb-acts{display:flex;gap:10px;padding:0 24px}
.onb-acts .btn{flex:1;min-height:50px}
.loading{position:fixed;inset:0;z-index:14;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:14px}
.loading img{width:88px;height:88px;object-fit:contain;animation:pawbeat 1.1s ease-in-out infinite}
@keyframes pawbeat{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.rp-empty{display:flex;align-items:center;gap:12px;padding:6px 4px 2px;color:var(--muted);font-size:13.5px}
.rp-empty img{width:64px;height:64px;object-fit:contain}