/* Z (js/apps/z.js): an English social app - graphite black and white (石墨黑白), the only colour a red heart on likes.
   Same family as the other Apps (glass cards, serif type, 景深 page push), its own look through the near-black accent.
   All colours are the --z-* variables on .z-shell; dark mode only swaps those. */
.z-shell{--z-top:#E6E7E9;--z-end:#F7F7F8;--z-glass:rgba(255,255,255,.72);--z-glass-soft:rgba(255,255,255,.5);--z-line:rgba(20,24,30,.1);
  --z-ink:#16181C;--z-ink2:#5E636B;--z-acc:#22262C;--z-on-acc:#fff;--z-soft:rgba(34,38,44,.07);--z-like:#E5484D;--z-danger:#B3261E;--z-badge:#C73A40;--z-shd:rgba(110,115,125,.26);--z-shl:rgba(255,255,255,.95);
  --z-cover:linear-gradient(140deg,var(--z-c1,#5F7491),color-mix(in srgb,var(--z-c1,#5F7491) 45%,#fff) 70%);
  position:absolute;inset:0;overflow:hidden;color:var(--z-ink);font-family:var(--font-body,inherit);background:linear-gradient(170deg,var(--z-top),var(--z-end) 70%)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .z-shell{--z-top:#0E0F11;--z-end:#17191C;--z-glass:rgba(255,255,255,.06);--z-glass-soft:rgba(255,255,255,.04);--z-line:rgba(255,255,255,.09);
  --z-ink:#EEF0F2;--z-ink2:#9EA3AA;--z-acc:#F2F3F5;--z-on-acc:#121417;--z-soft:rgba(255,255,255,.08);--z-like:#FF6B70;--z-danger:#FF8A8F;--z-shd:rgba(0,0,0,.5);--z-shl:rgba(255,255,255,.035)}}
:root[data-theme="dark"] .z-shell{--z-top:#0E0F11;--z-end:#17191C;--z-glass:rgba(255,255,255,.06);--z-glass-soft:rgba(255,255,255,.04);--z-line:rgba(255,255,255,.09);
  --z-ink:#EEF0F2;--z-ink2:#9EA3AA;--z-acc:#F2F3F5;--z-on-acc:#121417;--z-soft:rgba(255,255,255,.08);--z-like:#FF6B70;--z-danger:#FF8A8F;--z-shd:rgba(0,0,0,.5);--z-shl:rgba(255,255,255,.035)}
.z-page{position:absolute;inset:0;display:flex;flex-direction:column}
.z-page.z-in{animation:zIn .38s cubic-bezier(.2,.9,.3,1) both}
.z-page.z-back{animation:zBack .32s cubic-bezier(.2,.9,.3,1) both}
.z-page.z-fade{animation:zFade .22s ease both}
@keyframes zIn{from{opacity:0;transform:scale(1.05);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes zBack{from{opacity:0;transform:scale(.95);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes zFade{from{opacity:0}to{opacity:1}}
.z-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding-bottom:calc(110px + var(--sab,0px));scrollbar-width:none}
.z-scroll::-webkit-scrollbar{display:none}
.z-scroll.with-composer{padding-bottom:calc(90px + var(--sab,0px))}
.z-glass{background:var(--z-glass);border:1px solid var(--z-line);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
.z-press{transition:transform .18s cubic-bezier(.34,1.56,.64,1)}.z-press:active{transform:scale(.94)}
/* reset at class level (0,1,0): beats the app's bare element styles, loses to every .z-* rule below */
.z-shell :where(button){font:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;margin:0;box-shadow:none;cursor:pointer;text-align:inherit;min-height:0;width:auto}
.z-shell :where(input,textarea){font:inherit;color:inherit;margin:0;box-shadow:none;-webkit-appearance:none;appearance:none}
.z-shell :where(button):focus-visible{outline:2px solid var(--z-acc);outline-offset:2px}
.z-shell svg{width:18px;height:18px;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.z-ico{display:inline-flex}.z-ico svg,svg.z-ico{width:16px;height:16px}
.z-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.z-col{display:flex;flex-direction:column;gap:10px;padding:0 12px}
.z-empty{padding:34px 22px;text-align:center;font-size:13px;line-height:1.7;color:var(--z-ink2)}
.z-muted{color:var(--z-ink2)}
/* top bars */
.z-top,.z-hdr{position:relative;z-index:3;flex-shrink:0;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 10px}
.z-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.z-top-title{font-family:var(--font-display,inherit);font-size:18px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.z-top-title small{font-family:var(--font-body,inherit);font-size:12px;color:var(--z-ink2);margin-left:4px}
.z-hdr{display:flex;flex-direction:column;gap:12px}
.z-hrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.z-sub{padding:0 16px 8px;flex-shrink:0}
.z-circle{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--z-glass);border:1px solid var(--z-line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);flex-shrink:0;color:var(--z-ink)}
.z-circle.sm{width:36px;height:36px}
.z-circle.dark{background:rgba(20,28,35,.55);border-color:transparent;color:#fff}
.z-circle.belled{background:var(--z-acc);color:var(--z-on-acc);border-color:var(--z-acc)}
.z-circle.belled svg{animation:zBell .6s ease}
@keyframes zBell{20%{transform:rotate(18deg)}40%{transform:rotate(-14deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
.z-circle .z-av{width:32px;height:32px}
.z-circle-gap{width:40px;flex-shrink:0}
.z-mark{width:32px;height:32px;display:grid;place-items:center;--ln:var(--z-ink);--pri-pale:var(--z-soft)}
.z-mark .glass-glyph{width:30px;height:30px}
/* avatars */
.z-av{flex-shrink:0;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;overflow:hidden;color:#fff;font-size:15px;font-weight:600;letter-spacing:.02em}
.z-av img{width:100%;height:100%;object-fit:cover}
.z-av svg{width:50%;height:50%}
.z-av.sm{width:28px;height:28px;font-size:11px}
.z-av.xs{width:20px;height:20px;font-size:9px;border:2px solid var(--z-end)}
.z-av.big{width:72px;height:72px;font-size:24px;border:4px solid var(--z-end);margin-top:-50px}
.z-avbtn{border-radius:50%;flex-shrink:0}
.z-stack{display:inline-flex}.z-stack .z-av+.z-av{margin-left:-7px}
/* clocks + ribbon */
.z-clocks{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 16px;border-radius:24px}
.z-clocks.one{grid-template-columns:1fr auto}
.z-clk{display:flex;flex-direction:column;gap:2px;min-width:0}
.z-clocks:not(.one) .z-clk:last-child{text-align:right;align-items:flex-end}
.z-clk small{font-size:10.5px;letter-spacing:.14em;color:var(--z-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.z-clk strong{font-family:var(--font-display,inherit);font-weight:400;font-size:40px;line-height:1.05;font-variant-numeric:tabular-nums}
.z-clk span{font-size:12px;color:var(--z-ink2);min-height:1em}
.z-gap{font-size:11px;padding:4px 9px;border-radius:999px;background:var(--z-soft);white-space:nowrap}
.z-ribbon{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.z-ribbon::-webkit-scrollbar{display:none}
.z-ribbon button{flex-shrink:0;display:flex;gap:6px;align-items:center;font-size:12px;padding:7px 12px;border-radius:999px}
/* feed tabs */
.z-tabs{display:flex;gap:24px;padding:4px 20px 10px}
.z-tabs button{font-family:var(--font-display,inherit);font-size:18px;color:var(--z-ink2);position:relative;padding-bottom:9px;transition:color .2s}
.z-tabs button[aria-pressed="true"]{color:var(--z-ink);font-weight:600}
.z-tabs button[aria-pressed="true"]::after{content:"";position:absolute;left:50%;bottom:0;width:18px;height:3px;margin-left:-9px;border-radius:2px;background:var(--z-acc);animation:zPop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes zPop{0%{transform:scale(.5)}60%{transform:scale(1.2)}100%{transform:none}}
.z-ptabs{display:flex;margin:8px 16px;border-bottom:1px solid var(--z-line)}
.z-ptabs button{flex:1;height:40px;font-size:13.5px;color:var(--z-ink2);position:relative;text-align:center}
.z-ptabs button span{font-weight:400}
.z-ptabs button[aria-pressed="true"]{color:var(--z-ink);font-weight:600}
.z-ptabs button[aria-pressed="true"]::after{content:"";position:absolute;left:28%;right:28%;bottom:-1px;height:2px;background:var(--z-acc);border-radius:2px}
.z-pill3{display:flex;padding:4px;border-radius:999px}
.z-pill3 button{flex:1;height:34px;border-radius:999px;font-size:13px;color:var(--z-ink2);text-align:center}
.z-pill3 button[aria-pressed="true"]{color:var(--z-ink);font-weight:600;background:var(--z-end);box-shadow:3px 3px 8px var(--z-shd),-3px -3px 8px var(--z-shl)}
/* posts */
.z-feed{display:flex;flex-direction:column;gap:10px;padding:0 12px}
.z-post{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:22px;cursor:pointer;transition:transform .2s}
.z-post:active{transform:scale(.985)}
.z-trace{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--z-ink2);padding-left:30px}
.z-trace .z-name{font-weight:600;color:var(--z-ink2)}
.z-prow{display:flex;gap:10px;align-items:flex-start}
.z-pbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.z-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px;font-size:13px}
.z-meta.col{flex-direction:column;gap:1px}
.z-meta span{color:var(--z-ink2)}
.z-meta svg{width:12px;height:12px;align-self:center}
.z-name{font-weight:600}
.z-ctx{font-size:12px;color:var(--z-ink2)}
.z-ptext{margin:0;font-size:14.5px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap}
.z-photo{height:170px;border-radius:16px;background:var(--z-soft) center/cover no-repeat}
.z-chips{display:flex;flex-wrap:wrap;gap:6px}
.z-chip{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:2px 8px;border-radius:999px;background:var(--z-soft);color:var(--z-ink2)}
.z-chip svg,.z-chip .z-ico svg{width:11px;height:11px}
.z-thread{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:14px;background:var(--z-soft);font-size:13px;line-height:1.45}
.z-qcard{border:1px solid var(--z-line);border-radius:16px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;background:var(--z-glass-soft)}
.z-qcard .z-meta{font-size:12px}
.z-qcard p{margin:0;font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.z-acts{display:flex;justify-content:space-between;color:var(--z-ink2);font-size:12.5px;padding-right:6px;font-variant-numeric:tabular-nums}
.z-acts button{display:flex;align-items:center;gap:5px;min-height:34px;color:var(--z-ink2);position:relative}
.z-acts svg,.z-acts .z-ico svg{width:15px;height:15px}
.z-acts .rs.on{color:var(--z-ink)}
.z-acts .lk.on{color:var(--z-like)}
.z-acts .lk.on svg{fill:var(--z-like);stroke:var(--z-like)}
.z-acts .lk.just svg{animation:zLike .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes zLike{0%{transform:scale(.4)}45%{transform:scale(1.35)}70%{transform:scale(.92)}100%{transform:scale(1)}}
.z-burst{position:absolute;left:7.5px;top:50%;width:0;height:0;pointer-events:none}
.z-burst::before{content:"";position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:2px solid var(--z-like);animation:zRing .5s ease-out forwards}
@keyframes zRing{from{transform:scale(.3);opacity:.9}to{transform:scale(1.5);opacity:0}}
.z-burst i{position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--z-like);opacity:0;animation:zSpark .6s ease-out .05s forwards}
.z-burst i:nth-child(even){width:3.5px;height:3.5px;left:-1.75px;top:-1.75px;animation-delay:.1s}
@keyframes zSpark{0%{transform:rotate(var(--a)) translateY(-6px) scale(1);opacity:1}100%{transform:rotate(var(--a)) translateY(-21px) scale(.2);opacity:0}}
/* poll */
.z-poll{display:flex;flex-direction:column;gap:6px}
.z-popt{height:38px;border-radius:12px;border:1.5px solid var(--z-ink)!important;font-size:13.5px;font-weight:600;text-align:center!important}
.z-pbar{position:relative;height:38px;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:13.5px;background:var(--z-soft)}
.z-pfill{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--z-line);animation:zGrow .7s cubic-bezier(.2,.9,.3,1) both}
.z-pbar.mine .z-pfill{background:color-mix(in srgb,var(--z-acc) 18%,transparent)}
.z-plab,.z-pbar b{position:relative;display:flex;align-items:center;gap:6px}
.z-pbar.mine .z-plab{font-weight:600}
.z-pbar svg{width:14px;height:14px}
@keyframes zGrow{from{width:0}}
.z-pfoot{font-size:11.5px;color:var(--z-ink2)}
/* tab bar + compose button */
.z-tabbar{position:absolute;left:12px;right:12px;bottom:calc(12px + var(--sab,0px));height:62px;border-radius:24px;display:flex;align-items:center;justify-content:space-around;z-index:6;background:var(--z-glass);border:1px solid var(--z-line);-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2)}
.z-tabbar button{position:relative;width:46px;height:46px;display:grid;place-items:center;color:var(--z-ink2);border-radius:50%}
.z-tabbar button svg{width:21px;height:21px}
.z-tabbar button.cur{color:var(--z-ink)}
.z-tabbar button.cur::after{content:"";position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--z-acc)}
.z-badge{position:absolute;top:5px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--z-badge);color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center}
.z-badge.static{position:static}
.z-fab{position:absolute;right:18px;bottom:calc(88px + var(--sab,0px));width:52px;height:52px;border-radius:18px;background:var(--z-acc)!important;color:var(--z-on-acc)!important;display:grid!important;place-items:center;z-index:6;box-shadow:5px 5px 12px var(--z-shd)}
.z-fab svg{width:22px;height:22px}
/* detail */
.z-big{margin:0 12px;padding:16px;border-radius:24px;display:flex;flex-direction:column;gap:12px}
.z-big .z-ptext{font-size:18px;line-height:1.45}
.z-stamp{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;color:var(--z-ink2)}
.z-likedby{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--z-ink2)}
.z-likedby .z-name{color:var(--z-ink)}
.z-stats{display:flex;gap:16px;font-size:13px;padding:10px 0;border-top:1px solid var(--z-line);border-bottom:1px solid var(--z-line);color:var(--z-ink2);font-variant-numeric:tabular-nums}
.z-stats b{font-weight:700;color:var(--z-ink);margin-right:3px}
.z-replies{display:flex;flex-direction:column;padding:6px 12px}
.z-rp{position:relative;display:flex;align-items:flex-start;gap:10px;padding:12px 4px;border-bottom:1px solid var(--z-line)}
.z-rp.child{padding-left:30px}
.z-rp.child::before{content:"";position:absolute;left:23px;top:-2px;width:12px;height:22px;border-left:1.5px solid var(--z-line);border-bottom:1.5px solid var(--z-line);border-bottom-left-radius:10px}
.z-composer{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;gap:8px;align-items:center;padding:10px 12px calc(14px + var(--sab,0px));background:var(--z-glass);border-top:1px solid var(--z-line);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.z-composer input{flex:1;min-width:0;height:40px;border-radius:999px;border:1px solid var(--z-line);background:var(--z-end);padding:0 14px;font:inherit;font-size:14px;color:var(--z-ink);outline:none}
.z-send{height:38px;padding:0 16px;border-radius:999px;background:var(--z-acc)!important;color:var(--z-on-acc)!important;font-size:13.5px;font-weight:600;text-align:center!important}
.z-send.sm{height:32px;padding:0 12px}
.z-send:disabled{background:var(--z-glass)!important;color:var(--z-ink2)!important;box-shadow:inset 0 0 0 1px var(--z-line);cursor:default}
/* profile */
.z-cover{position:relative;height:156px;flex-shrink:0;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 0;background:radial-gradient(90% 120% at 80% 10%,rgba(255,255,255,.4),transparent 60%),var(--z-cover)}
.z-cover.dark{--z-c1:#2C333B}
.z-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 35%,color-mix(in srgb,var(--z-top) 70%,transparent) 75%,var(--z-top));pointer-events:none}
.z-cover>*{position:relative;z-index:1}
.z-card{position:relative;margin:-40px 12px 0;padding:18px;border-radius:26px;display:flex;flex-direction:column;gap:12px}
.z-nm{margin:0;font-family:var(--font-display,inherit);font-size:28px;font-weight:500;line-height:1.15}
.z-handle{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--z-ink2)}
.z-handle svg{width:13px;height:13px}
.z-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 8px;border-radius:6px;background:var(--z-soft);color:var(--z-ink)}
.z-tag.bday{align-self:flex-start;color:var(--z-like);background:color-mix(in srgb,var(--z-like) 12%,transparent);padding:3px 9px}
.z-tag svg,.z-tag .z-ico svg{width:12px;height:12px}
.z-bio{margin:0;font-size:14px;line-height:1.5;white-space:pre-wrap}
.z-biohist{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--z-ink2);align-self:flex-start}
.z-biohist svg{width:13px;height:13px}
.z-local{display:flex;align-items:center;gap:10px;padding-top:10px;border-top:1px solid var(--z-line)}
.z-local strong{font-family:var(--font-display,inherit);font-weight:400;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.z-local span{font-size:12px;line-height:1.45;color:var(--z-ink2)}
.z-counts{display:flex;justify-content:space-between}
.z-counts button{display:flex;flex-direction:column;align-items:flex-start;font-size:11.5px;color:var(--z-ink2)}
.z-counts b{font-family:var(--font-display,inherit);font-weight:400;font-size:22px;color:var(--z-ink);font-variant-numeric:tabular-nums}
.z-fby{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--z-ink2)}
.z-btns{display:flex;align-items:center;gap:8px}
.z-pill{height:36px;padding:0 18px;border-radius:999px;font-size:13.5px;font-weight:600;background:var(--z-end)!important;box-shadow:4px 4px 10px var(--z-shd),-4px -4px 10px var(--z-shl);text-align:center!important}
.z-pill.solid{background:var(--z-acc)!important;color:var(--z-on-acc)!important;box-shadow:none}
.z-note{display:flex;align-items:center;gap:6px;margin:0 16px 8px;font-size:11.5px;color:var(--z-ink2);line-height:1.6}
.z-note svg{width:13px;height:13px}
.z-note.block{display:block;margin:6px 8px}
.z-empty + .z-note.block{text-align:center}
.z-locked{margin:14px 12px 0;padding:28px 20px;border-radius:24px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.z-locked svg{width:32px;height:32px;color:var(--z-ink2)}
.z-locked b{font-family:var(--font-display,inherit);font-weight:500;font-size:18px}
.z-locked p{margin:0;font-size:13px;color:var(--z-ink2);line-height:1.55}
/* lists */
.z-search{display:flex;align-items:center;gap:8px;margin:0 12px;height:42px;padding:0 6px 0 14px;border-radius:999px;color:var(--z-ink2)}
.z-col .z-search{margin:0}
.z-search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14px;color:var(--z-ink);outline:none}
.z-people{display:flex;flex-direction:column;padding:4px 12px}
.z-person{display:flex;gap:10px;align-items:flex-start;padding:12px 4px;border-bottom:1px solid var(--z-line);cursor:pointer}
.z-person>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.z-person p{margin:0;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.z-fbtn{flex-shrink:0;height:32px;padding:0 14px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--z-ink)!important;color:var(--z-end)!important;text-align:center!important}
.z-fbtn.on{background:var(--z-end)!important;color:var(--z-ink)!important;box-shadow:inset 0 0 0 1px var(--z-line)}
/* trends */
.z-tcard{padding:16px;border-radius:24px;display:flex;flex-direction:column;gap:10px}
.z-tcard h4{margin:0;font-size:11px;letter-spacing:.12em;font-weight:500;color:var(--z-ink2)}
.z-tcard .z-empty{padding:10px 0;text-align:left}
.z-wx{display:flex;align-items:center;gap:14px}
.z-wx strong{font-family:var(--font-display,inherit);font-weight:400;font-size:40px;line-height:1;font-variant-numeric:tabular-nums}
.z-wx div{display:flex;flex-direction:column;gap:3px;font-size:13px}
.z-wx span{font-size:11px;color:var(--z-ink2)}
.z-ev{display:flex;gap:12px;align-items:center}
.z-date{width:46px;flex-shrink:0;text-align:center;padding:6px 0;border-radius:14px;background:var(--z-soft);display:flex;flex-direction:column}
.z-date small{font-size:10px;letter-spacing:.1em}
.z-date b{font-family:var(--font-display,inherit);font-size:20px;font-weight:400;line-height:1.1}
.z-ev p{margin:0;flex:1;min-width:0;font-size:14px;line-height:1.4}
.z-ev p span{display:block;font-size:12px;color:var(--z-ink2)}
.z-rank{display:flex;flex-direction:column}
.z-rk{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--z-line)}
.z-rk:first-child{border-top:0}
.z-rk i{font-style:normal;font-family:var(--font-display,inherit);font-size:18px;color:var(--z-ink2);width:18px}
.z-rk div{display:flex;flex-direction:column;gap:2px;font-size:14.5px;min-width:0}
.z-rk span{font-size:11.5px;color:var(--z-ink2)}
/* compose */
.z-ccard{display:flex;flex-direction:column;gap:10px;padding:14px 14px 8px;border-radius:26px}
.z-who{display:flex;align-items:center;gap:10px}
.z-who button{display:flex;flex-direction:column;align-items:flex-start;line-height:1.3;font-size:14px}
.z-who button span{display:flex;align-items:center;gap:2px;font-size:12px;color:var(--z-ink2)}
.z-ccard textarea{width:100%;min-height:120px;resize:none;border:1px solid transparent;border-radius:14px;background:none;font:inherit;font-size:17px;line-height:1.5;color:var(--z-ink);outline:none;padding:6px 8px}
.z-ccard textarea::placeholder,.z-composer input::placeholder,.z-search input::placeholder,.z-field input::placeholder,.z-field textarea::placeholder{color:var(--z-ink2);opacity:1}
.z-att{position:relative;animation:zSpring .4s cubic-bezier(.3,1.45,.5,1) both}
.z-att .z-photo{height:140px}
.z-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(20,28,35,.6)!important;color:#fff!important;display:grid!important;place-items:center}
.z-x svg{width:14px;height:14px}
.z-tagchip{align-self:flex-start;display:flex;align-items:center;gap:6px;font-size:12.5px;padding:3px 4px 3px 10px;border-radius:999px;background:var(--z-soft)}
.z-tagchip button{width:22px;height:22px;display:grid;place-items:center}
.z-tagchip svg{width:12px;height:12px}
.z-tools{display:flex;align-items:center;gap:2px;padding-top:8px;border-top:1px solid var(--z-line)}
.z-tool{height:36px;min-width:36px;padding:0 10px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:12.5px;color:var(--z-ink2);cursor:pointer;transition:background .2s,color .2s;max-width:160px}
.z-tool span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.z-tool.on{color:var(--z-ink);background:var(--z-soft)}
.z-ring{margin-left:auto;position:relative;width:30px;height:30px;display:grid;place-items:center;font-size:10.5px;font-variant-numeric:tabular-nums}
.z-ring svg{position:absolute;inset:0;width:30px;height:30px;transform:rotate(-90deg)}
.z-ring circle{fill:none;stroke-width:2.5}
.z-ring .bg{stroke:var(--z-line)}
.z-ring .fg{stroke:var(--z-acc);transition:stroke-dashoffset .2s}
.z-ring.warn .fg{stroke:var(--z-like)}
.z-mlist{display:flex;flex-direction:column;border-radius:16px;background:var(--z-end);border:1px solid var(--z-line);overflow:hidden;animation:zSpring .3s cubic-bezier(.3,1.45,.5,1) both}
.z-mrow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--z-line)}
.z-mrow:first-child{border-top:0}
.z-mrow div{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:13.5px}
.z-mrow span{font-size:11.5px;color:var(--z-ink2)}
.z-mhint{font-size:11.5px;padding:8px 12px;background:var(--z-soft);line-height:1.5}
.z-aud{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:20px;font-size:12.5px;line-height:1.5;color:var(--z-ink2)}
.z-aud b{color:var(--z-ink)}
.z-aud .z-tag{margin-left:auto;flex-shrink:0}
.z-mk{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--z-soft);flex-shrink:0}
.z-sect{margin:6px 8px 0;font-size:11px;letter-spacing:.12em;color:var(--z-ink2)}
.z-tsplit{display:grid;border-radius:24px;overflow:hidden}
.z-tcol{display:flex;flex-direction:column;gap:2px;padding:14px;min-width:0}
.z-tcol+.z-tcol{border-left:1px solid var(--z-line)}
.z-tcol>b{font-family:var(--font-display,inherit);font-size:15px;font-weight:500;margin-bottom:4px}
.z-tline{display:flex;gap:6px;align-items:flex-start;padding:7px 8px;margin:0 -8px;border-radius:12px;font-size:13px;line-height:1.4;transition:background .2s}
.z-tline i{font-style:normal}
.z-tline[aria-pressed="true"]{background:var(--z-soft);font-weight:600}
/* rows, switches, forms */
.z-rows{border-radius:22px;overflow:hidden}
.z-row{display:flex!important;align-items:center;gap:10px;width:100%;padding:14px 16px!important;border-top:1px solid var(--z-line)!important;font-size:14px}
.z-row:first-child{border-top:0!important}
.z-row div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.z-row div span{font-size:12px;color:var(--z-ink2);line-height:1.45}
.z-row.dim{opacity:.5}
.z-dim{font-size:13px;color:var(--z-ink2);font-variant-numeric:tabular-nums}
.z-radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--z-ink2);display:grid;place-items:center;flex-shrink:0}
.z-radio.on{border-color:var(--z-acc)}
.z-radio.on::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--z-acc)}
.z-sw{position:relative;width:44px;height:26px;border-radius:13px;background:var(--z-line);flex-shrink:0;transition:background .2s}
.z-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--z-end);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.z-sw.on{background:var(--z-acc)}.z-sw.on::after{transform:translateX(18px)}
.z-field{display:flex;flex-direction:column;gap:6px;padding:12px 16px;border-top:1px solid var(--z-line)}
.z-field:first-child{border-top:0}
.z-field label{font-size:11px;letter-spacing:.1em;color:var(--z-ink2)}
.z-field input,.z-field textarea{width:100%;border:0;background:none;padding:0;font:inherit;font-size:15px;color:var(--z-ink);outline:none;resize:none}
.z-chipset{display:flex;flex-wrap:wrap;gap:6px}
.z-chipset.pad{padding:4px 16px 14px}
.z-chipset button{height:34px;padding:0 14px;border-radius:999px;font-size:13px;border:1px solid var(--z-line)!important;background:var(--z-glass)!important}
.z-chipset button[aria-pressed="true"]{background:var(--z-ink)!important;color:var(--z-end)!important;border-color:var(--z-ink)!important}
.z-acard{display:flex!important;align-items:center;gap:12px;width:100%;padding:14px!important;border-radius:22px}
.z-acard .z-av.big{margin-top:0;width:56px;height:56px;border-width:0}
.z-acard[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--z-acc)}
.z-acard>div,.z-mrow2>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.z-acard b{font-size:15px}
.z-acard span,.z-mrow2 div span{font-size:12px;line-height:1.45;color:var(--z-ink2)}
.z-pv{pointer-events:none}
.z-pv .z-empty{border:1px dashed var(--z-line);border-radius:24px;padding:18px}
.z-warn{display:flex;gap:8px;align-items:flex-start;padding:10px 14px;border-radius:16px;background:var(--z-soft);font-size:12.5px;line-height:1.55}
/* notifications */
.z-day{padding:14px 16px 4px;font-size:11px;letter-spacing:.12em;color:var(--z-ink2)}
.z-nt{display:flex!important;gap:12px;align-items:flex-start;width:100%;padding:12px 16px!important;border-bottom:1px solid var(--z-line)!important}
.z-nt.new{background:var(--z-soft)!important}
.z-ni{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--z-soft);flex-shrink:0}
.z-ni svg,.z-ni .z-ico svg{width:15px;height:15px}
.z-ntx{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;font-size:13.5px;line-height:1.45}
.z-ex{font-size:13px;color:var(--z-ink2);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.z-nt time{font-size:11.5px;color:var(--z-ink2);flex-shrink:0}
/* centered modal */
.z-veil{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:rgba(15,18,22,.24);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:zFade .22s ease both}
.z-veil.out{animation:zFadeOut .2s ease both}
@keyframes zFadeOut{to{opacity:0}}
.z-modal{width:100%;max-width:360px;max-height:88%;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:28px;background:var(--z-end);border:1px solid var(--z-line);box-shadow:0 20px 50px -20px rgba(10,15,20,.45);animation:zSpring .42s cubic-bezier(.3,1.45,.5,1) both}
.z-modal::-webkit-scrollbar{display:none}
.z-veil.out .z-modal{animation:zShrink .2s ease both}
@keyframes zSpring{from{transform:scale(.86);opacity:0}to{transform:none;opacity:1}}
@keyframes zShrink{to{transform:scale(.9);opacity:0}}
.z-modal h3{margin:0 0 6px;text-align:center;font-size:16px}
.z-mrow2{display:flex!important;align-items:center;gap:10px;width:100%;padding:10px!important;border-radius:16px}
.z-mrow2[aria-pressed="true"]{background:var(--z-soft)!important}
.z-mrow2 b{font-size:14px}
.z-mnote{margin:4px 0 2px;text-align:center;font-size:11.5px;line-height:1.6;color:var(--z-ink2)}
.z-mbtn{height:42px;margin-top:4px;border-radius:999px;text-align:center!important;background:var(--z-glass)!important;border:1px solid var(--z-line)!important}
.z-mdanger{color:var(--z-danger)!important}
.z-del{margin-left:8px}
.z-bh{padding:10px 6px;border-top:1px solid var(--z-line)}
.z-bh.first{border-top:0}
.z-bh span{font-size:11px;letter-spacing:.06em;color:var(--z-ink2)}
.z-bh p{margin:3px 0 0;font-size:14px;line-height:1.45}
@media(prefers-reduced-motion:reduce){.z-shell *,.z-shell *::before,.z-shell *::after{animation:none!important;transition:none!important}}
.z-rbtn{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;min-height:32px;padding:4px 6px;margin-left:-6px;font-size:12.5px;color:var(--z-ink2)}
.z-composer .z-rbtn{align-self:center;margin:0;padding:0 8px;min-height:36px}
.z-rbtn svg{width:14px;height:14px}

/* city accounts, worldbook people, news sources */
.z-av{position:relative}
.z-av .z-av-pin{position:absolute;right:3px;bottom:3px;width:34%;height:34%;display:grid;place-items:center;opacity:.9}
.z-av .z-av-pin svg{width:100%;height:100%}
.z-av.sm .z-av-pin,.z-av.xs .z-av-pin{display:none}
.z-tag.sm{font-size:10.5px;padding:1px 6px;align-self:center}
.z-meta .z-tag{color:var(--z-ink)}
.z-nrow{display:flex;align-items:center;gap:6px}
.z-kind{margin:0;font-size:12.5px;color:var(--z-ink2)}
.z-src{display:inline-block;margin-top:4px;font-size:12px;color:var(--z-ink2);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
/* follow requests to a locked account, protected posts, an account's password */
.z-reqbtns{display:flex;gap:8px;margin-top:6px}
.z-reqbtns .z-fbtn{min-width:72px}
.z-req{max-height:240px;overflow:hidden}
.z-req.leaving{animation:zRowOut .32s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none}
@keyframes zRowOut{to{opacity:0;transform:translateX(24px);max-height:0;padding-top:0;padding-bottom:0}}
.z-reqentry .z-badge{align-self:center}
.z-acts .prot{opacity:.4}
.z-pwerr{margin:0 8px;min-height:1.2em;font-size:12px;color:var(--z-danger)}
.z-row.z-rowdanger{justify-content:center;color:var(--z-danger)}
.z-mbtn.z-mprimary{background:var(--z-acc)!important;color:var(--z-on-acc)!important;border-color:var(--z-acc)!important;font-weight:600}