/* sentry.css — 1:1 映射 SentryTokens.kt / SentryType.kt（colors_and_type.css :root + [data-theme=dark]） */
:root{
  --bg:#f5f5f7; --bg-deep:#ececee; --surface:#ffffff; --surface-2:#f0f1f3;
  --fg:#1d1d1f; --muted:#6e6e73;
  --border:#d9d9de; --border-strong:#a8a9ae;
  --accent:#0071e3; --on-accent:#ffffff;
  --accent-strong:#0062c2; --accent-press:#0056a8; --accent-dim:#e5eefb;
  --error:#ff3b30; --error-dim:#ffe9e7;
  --glass:rgba(255,255,255,.72);
  --droplet-wash:rgba(17,17,17,.08); --droplet-edge:rgba(255,255,255,.22);
  --radius-s:10px; --radius-m:14px; --radius-l:24px; --radius-pill:999px;
  --touch:44px;
  --ease:cubic-bezier(0.32,0.72,0,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","PingFang SC","Noto Sans SC",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
[data-theme="dark"]{
  --bg:#131316; --bg-deep:#0d0d0f; --surface:#1c1c1f; --surface-2:#26262a;
  --fg:#f5f5f7; --muted:#98989e;
  --border:#333338; --border-strong:#5a5a61;
  --accent:#0a84ff; --accent-strong:#3d9bff; --accent-press:#0478e0; --accent-dim:#10233d;
  --error:#ff453a; --error-dim:#3a1d1c;
  --glass:rgba(28,28,31,.72);
  --droplet-wash:rgba(255,255,255,.08); --droplet-edge:rgba(255,255,255,.16);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--font);background:#3a3a3c;color:var(--fg);
  display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 12px;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
/* ---- 字阶（SentryType）---- */
.type-display{font-size:40px;font-weight:700;line-height:1.1;letter-spacing:-.8px}
.type-title{font-size:28px;font-weight:700;line-height:1.25;letter-spacing:-.28px}
.type-headline{font-size:20px;font-weight:600;line-height:1.3}
.type-body{font-size:15px;line-height:1.55}
.type-caption{font-size:13px;font-weight:500;line-height:1.5}
.type-meta{font-size:12.5px;line-height:1.55;color:var(--muted)}
.type-micro{font-family:var(--mono);font-size:12px;line-height:1.55}
/* ---- 手机框 ---- */
.phone{width:390px;height:760px;flex:none;background:var(--bg);border-radius:44px;overflow:hidden;
  position:relative;display:flex;flex-direction:column;
  box-shadow:0 0 0 10px #1c1c1e,0 24px 60px rgba(0,0,0,.45)}
.screen{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.screen::-webkit-scrollbar{display:none}
.page{padding:12px 20px 150px;display:flex;flex-direction:column;gap:16px}
/* ---- 卡片 / chip / 开关（SentryCard / SentryChip / SentrySwitchRow）---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:16px}
.card>*+*{margin-top:8px}
.chip{display:inline-flex;align-items:center;min-height:26px;padding:3px 10px;border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--muted);font-size:12.5px;white-space:nowrap}
.chip.error{background:var(--error-dim);color:var(--error)}
.row{display:flex;align-items:center;gap:12px;min-height:44px}
.row .grow{flex:1;min-width:0}
/* 开关：48×29 轨道、22 圆钮 */
.sw{width:48px;height:29px;border-radius:var(--radius-pill);background:var(--border-strong);
  position:relative;flex:none;cursor:pointer;transition:background .25s var(--ease)}
.sw::after{content:"";position:absolute;top:3.5px;left:3.5px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s var(--ease)}
.sw.on{background:var(--accent)}
.sw.on::after{transform:translateX(19px)}
/* ---- 底部玻璃胶囊导航（示意：真机为折射透镜液滴）---- */
.nav{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;height:60px;width:calc(100% - 64px);
  border-radius:var(--radius-pill);display:flex;z-index:10;
  background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid var(--droplet-edge);
  box-shadow:0 10px 28px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.08)}
.nav .droplet{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);
  border-radius:var(--radius-pill);background:var(--droplet-wash);
  box-shadow:inset 0 0 0 1px var(--droplet-edge);transition:transform .45s var(--ease)}
.nav .item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted);font-size:11px;font-weight:500;z-index:1;cursor:pointer}
.nav .item.sel{color:var(--accent-strong)}
.nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* ---- 页头身份块 ---- */
.idmark{width:52px;height:52px;border-radius:var(--radius-s);background:var(--fg);color:var(--surface);
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;flex:none}
.groupt{font-size:13px;font-weight:500;color:var(--muted)}
.list .row+.row{border-top:1px solid var(--border)}
/* 深色切换（预览脚手架，不属于设计） */
.tgl{position:fixed;top:14px;right:14px;z-index:99;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--fg);
  font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tagnote{font-size:12.5px;color:#98989e;max-width:390px;text-align:center;line-height:1.6}
.tagnote b{color:#e5e5ea;font-weight:600}
h1.demo{color:#f5f5f7;font-size:20px;font-weight:600}