/* ---------- bottom bar + sheet + side nav ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--chip);padding-bottom:env(safe-area-inset-bottom,0px)}
.bar .col{height:60px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.bar-l{display:flex;gap:2px;justify-self:start}
.bar a.me{justify-self:end;overflow:hidden}
.bar a.me img{width:35px;height:35px;border-radius:50%;object-fit:cover}
.me-bubble{position:fixed;right:16px;bottom:72px;max-width:300px;padding:14px 16px;background:#1A1917;color:#F2EFEB;border:1px solid #2B2926;border-radius:16px;border-bottom-right-radius:4px;box-shadow:0 12px 30px rgba(0,0,0,.14);font-size:14px;line-height:1.5;opacity:0;transform:translateY(10px) scale(.96);transform-origin:bottom right;transition:opacity .25s ease,transform .25s ease;pointer-events:none;z-index:60}
.me-bubble.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.me-bubble p{margin:0 0 8px}
.me-bubble p:last-child{margin-bottom:0}
.me-bubble-x{position:absolute;top:8px;right:10px;width:26px;height:26px;display:grid;place-items:center;font-size:18px;line-height:1;color:#fff;background:rgba(255,255,255,.12);border-radius:50%;border:0;cursor:pointer}
.me-bubble-x:hover{background:rgba(255,255,255,.22)}
.secbtn{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 16px;border-radius:12px;transition:background-color var(--d-fast) ease}
.secbtn:hover{background:var(--surface)}
.secbtn .nm{font-size:18px;line-height:20px;letter-spacing:-.05em}
.secbtn .cur{font-size:10px;line-height:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);display:inline-flex;align-items:center;gap:4px}
.secbtn .cur svg{width:10px;height:10px;transition:transform var(--d-med) var(--ease)}
.secbtn[aria-expanded="true"] .cur svg{transform:rotate(180deg)}
.bar .ib,.bar a.me{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;transition:background-color var(--d-fast) ease}
.bar .ib:hover{background:var(--surface)}
.bar svg{width:22px;height:22px}
.theme-btn svg{grid-area:1/1;transition:transform .5s var(--ease),opacity .3s ease}
.theme-btn .i-sun{opacity:0;transform:rotate(-90deg) scale(.6)}
:root[data-theme="dark"] .theme-btn .i-moon{opacity:0;transform:rotate(90deg) scale(.6)}
:root[data-theme="dark"] .theme-btn .i-sun{opacity:1;transform:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn .i-moon{opacity:0;transform:rotate(90deg) scale(.6)}:root:not([data-theme="light"]) .theme-btn .i-sun{opacity:1;transform:none}}
.bar img{width:35px;height:35px;border-radius:50%;object-fit:cover}
.sheet{position:fixed;left:50%;bottom:calc(70px + env(safe-area-inset-bottom,0px));width:min(320px,calc(100% - 32px));transform:translate(-50%,10px);opacity:0;visibility:hidden;background:var(--surface);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.14),var(--shadow);padding:var(--s-2);z-index:12;transition:opacity var(--d-fast) ease,transform var(--d-med) var(--ease),visibility 0s var(--d-med)}
.sheet.open{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity var(--d-fast) ease,transform var(--d-med) var(--ease),visibility 0s}
.navlist{list-style:none;margin:0;padding:0}
.navlist a{display:flex;align-items:center;gap:var(--s-3);color:var(--ink-2);transition:color var(--d-fast) ease}
.navlist a::before{content:"";width:12px;height:1px;background:currentColor;transition:width var(--d-med) var(--ease)}
.navlist a:hover{color:var(--ink-1)}
.navlist a[aria-current="true"]{color:var(--ink-1);font-weight:600}
.sheet .navlist a{padding:12px;border-radius:10px;font-size:16px;letter-spacing:-.03em}
.sheet .navlist a:hover{background:var(--chip)}
.sheet .navlist a[aria-current="true"]::before{width:24px}
.side{position:fixed;left:max(clamp(20px,3vw,48px),calc((100vw - 1200px) / 2 - 240px));top:50%;transform:translateY(-50%);z-index:9;display:none}
@media (min-width:1000px){.side{display:block}}
.side .navlist{display:flex;flex-direction:column;gap:2px}
.side .navlist a{padding:7px 10px 7px 0;font-size:13px;letter-spacing:-.02em}
.side .navlist a:hover::before{width:20px}
.side .navlist a[aria-current="true"]::before{width:32px}
.toast{position:fixed;left:50%;bottom:calc(72px + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);opacity:0;background:var(--ink-1);color:var(--bg);font-size:var(--fs-meta);padding:8px 14px;border-radius:var(--r-pill);transition:opacity var(--d-fast) ease,transform var(--d-med) var(--ease);pointer-events:none;z-index:11}
.toast.show{opacity:1;transform:translate(-50%,0)}