:root {
  --bg:#f3f4f5;
  --bg-deep:#e8eaec;
  --surface:#ffffff;
  --surface-solid:#ffffff;
  --surface-soft:#f8f8f8;
  --text:#101214;
  --text-2:#4f555b;
  --muted:#747b82;
  --line:rgba(16,18,20,.12);
  --line-strong:rgba(16,18,20,.2);
  --accent:#101214;
  --shell:min(1180px,calc(100% - 40px));
  --header-height:76px;
  --shadow:0 18px 46px rgba(16,18,20,.08);
  --shadow-soft:0 10px 28px rgba(16,18,20,.06);
  --post-surface:rgba(255,255,255,.30);
  --scroll-thumb:rgba(16,18,20,.28);
  --control-bg:rgba(255,255,255,.76);
  --control-bg-hover:rgba(255,255,255,.94);
  --control-shadow:0 8px 22px rgba(16,18,20,.08);
  --control-shadow-hover:0 12px 28px rgba(16,18,20,.12);
  --ui-ease:ease-in-out;
  --ui-speed:2s;
  --ui-fast:380ms;
  --header-speed:700ms;
  --topbar-bg:rgba(255,255,255,.58);
  --topbar-shadow:0 14px 38px rgba(16,18,20,.1);
}
[data-theme="dark"] {
  color-scheme:dark;
  --bg:#000000;
  --bg-deep:#060606;
  --surface:#090909;
  --surface-solid:#0a0a0a;
  --surface-soft:#050505;
  --text:#f5f5f5;
  --text-2:#c3c3c3;
  --muted:#858585;
  --line:rgba(255,255,255,.1);
  --line-strong:rgba(255,255,255,.2);
  --accent:#ffffff;
  --shadow:0 18px 48px rgba(0,0,0,.34);
  --shadow-soft:0 10px 28px rgba(0,0,0,.28);
  --post-surface:rgba(9,9,9,.20);
  --scroll-thumb:rgba(255,255,255,.24);
  --control-bg:rgba(18,18,18,.62);
  --control-bg-hover:rgba(28,28,28,.8);
  --control-shadow:0 8px 22px rgba(0,0,0,.24);
  --control-shadow-hover:0 12px 28px rgba(0,0,0,.34);
  --topbar-bg:rgba(10,10,10,.58);
  --topbar-shadow:0 14px 38px rgba(0,0,0,.2);
}
* { box-sizing:border-box; }
html { background:var(--bg); scroll-behavior:smooth; scroll-padding-top:104px; overflow-x:hidden; overscroll-behavior-x:none; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent; }
body { margin:0; min-width:320px; overflow-x:hidden; overscroll-behavior-x:none; background:var(--bg); color:var(--text); font-family:"Vazirmatn",system-ui,sans-serif; font-size:15px; line-height:1.85; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body:before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 42%); }
[data-theme="dark"] body:before { background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 40%); }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.58; }
img,svg,video,canvas { max-width:100%; }
img { display:block; }
[hidden] { display:none !important; }
.section-shell { width:var(--shell); margin-inline:auto; }
.site-loader { position:fixed; inset:0; z-index:7000; display:grid; place-items:center; background:var(--bg); color:var(--text); opacity:1; visibility:visible; transition:opacity .62s ease-in-out,visibility 0s linear .62s; }
.site-loader.is-hiding { opacity:0; visibility:hidden; pointer-events:none; }
.loader-shell { width:min(360px,calc(100% - 44px)); display:grid; justify-items:center; gap:12px; text-align:center; }
.loader-logo { width:58px; height:58px; object-fit:contain; animation:loader-breathe 1.7s ease-in-out infinite; }
.loader-brand { font-size:14px; font-weight:800; letter-spacing:.22em; }
.loader-caption { color:var(--muted); font-size:11px; }
.topbar { position:fixed; inset:0 0 auto; z-index:1000; height:var(--header-height); display:flex; align-items:center; background:transparent; border-bottom:1px solid transparent; box-shadow:none; transition:border-color var(--header-speed) var(--ui-ease),box-shadow var(--header-speed) var(--ui-ease); }
/* Glass layer: the blur is always defined, only its opacity animates (animating backdrop-filter from none is unreliable). */
.topbar:before { content:""; position:absolute; inset:0; z-index:-1; background:var(--topbar-bg); -webkit-backdrop-filter:blur(22px) saturate(1.12); backdrop-filter:blur(22px) saturate(1.12); opacity:0; pointer-events:none; transition:opacity var(--header-speed) var(--ui-ease); }
.topbar.is-scrolled { border-bottom-color:var(--line); box-shadow:var(--topbar-shadow); }
.topbar.is-scrolled:before { opacity:1; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .topbar:before { background:var(--surface-solid); } }
.topbar-inner { height:100%; display:flex; align-items:center; gap:24px; position:relative; }
.brand { display:inline-flex; align-items:center; gap:10px; min-width:0; font-weight:800; letter-spacing:.08em; white-space:nowrap; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; }
.brand-mark img { width:25px; height:25px; object-fit:contain; }
.brand-name { font-size:14px; }
.nav { display:flex; align-items:center; gap:4px; margin-inline:auto; }
.nav-menu-tools { display:flex; align-items:center; gap:6px; margin-inline-start:8px; padding-inline-start:8px; border-inline-start:1px solid var(--line); }
.nav-link { position:relative; padding:8px 12px; border:0; border-radius:11px; background:transparent; color:var(--muted); font-size:11px; font-weight:700; text-align:start; }
.topbar-actions { display:flex; align-items:center; gap:7px; }
.profile-control,.icon-btn,.language-select,.select-control,.menu-btn { color:var(--text); border:1px solid transparent; background:var(--control-bg); box-shadow:var(--control-shadow); }
[data-theme="dark"] .profile-control,[data-theme="dark"] .icon-btn,[data-theme="dark"] .language-select,[data-theme="dark"] .select-control,[data-theme="dark"] .menu-btn { box-shadow:var(--control-shadow); }
.profile-control { min-height:38px; padding:0 10px; display:inline-flex; align-items:center; gap:8px; border-radius:14px; font-size:10px; font-weight:800; max-width:220px; }
.profile-control>span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-symbol,.theme-symbol,.nav-profile-symbol { display:block; flex:0 0 auto; background:currentColor; mask:center/contain no-repeat; -webkit-mask:center/contain no-repeat; }
.profile-symbol { width:18px; height:18px; mask-image:url("./SVGs/ui/profile.svg?v=1"); -webkit-mask-image:url("./SVGs/ui/profile.svg?v=1"); }
.theme-symbol { width:18px; height:18px; mask-image:url("./SVGs/ui/moon.svg?v=1"); -webkit-mask-image:url("./SVGs/ui/moon.svg?v=1"); }
.nav-profile-symbol { width:16px; height:16px; mask-image:url("./SVGs/ui/profile.svg?v=1"); -webkit-mask-image:url("./SVGs/ui/profile.svg?v=1"); }
.icon-btn,.menu-btn { width:38px; height:38px; min-width:38px; min-height:38px; aspect-ratio:1/1; padding:0; display:grid; place-items:center; border-radius:14px; }
.language-switcher { position:relative; display:flex; align-items:center; min-width:108px; }
.language-select { width:100%; min-width:108px; height:38px; padding:0 30px 0 10px; appearance:none; -webkit-appearance:none; border:1px solid transparent; border-radius:10px; outline:0; background-color:var(--control-bg); color:var(--text); box-shadow:var(--control-shadow); font-size:12px; font-weight:800; line-height:1; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 14px) 15px,calc(100% - 10px) 15px; background-size:4px 4px,4px 4px; background-repeat:no-repeat; }
.language-select option { background:var(--surface-solid); color:var(--text); }
.menu-btn { display:none; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.menu-btn span { width:16px; height:1.5px; background:currentColor; transition:transform var(--ui-fast) var(--ui-ease),opacity var(--ui-fast) var(--ui-ease); transform-origin:center; }
.menu-btn[aria-expanded="true"] span:first-child { transform:translateY(3.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform:translateY(-3.25px) rotate(-45deg); }
main { padding-top:var(--header-height); }
body:not(.post-page) main { padding-top:0; }
body.post-page main { padding-top:0; margin:0; }
body.post-page .post-reader { margin:0; padding:0 0 92px; }
body.post-page .post-hero { width:100vw; max-width:100vw; height:100dvh; min-height:100dvh; margin:0; padding:0; border-top:0; border-inline:0; border-radius:0; }
.hero { min-height:100svh; display:flex; align-items:center; padding-block:calc(var(--header-height) + 28px) 64px; }
.hero-copy { width:100%; max-width:760px; }
.eyebrow { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow:before { content:""; width:22px; height:1px; background:var(--line-strong); }
.hero h1 { margin:16px 0 24px; font-size:clamp(50px,7vw,92px); line-height:1.04; letter-spacing:-.04em; font-weight:500; }
.hero h1 strong { font-weight:800; }
.hero-copy>p { max-width:710px; margin:0; color:var(--text-2); font-size:15px; line-height:2; overflow-wrap:anywhere; }
.hero-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:30px; }
.button-icon { flex:0 0 auto; line-height:1; }
.error-detail { max-width:100%; color:var(--muted); overflow-wrap:anywhere; }
.login-agreement { margin-top:22px; }
.hero-proof { display:flex; gap:22px; flex-wrap:wrap; margin-top:30px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.button,.button-link,.back-top { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:9px; }
.button { border:1px solid var(--line); border-radius:14px; padding:0 16px; background:var(--surface); box-shadow:var(--control-shadow); color:var(--text); font-size:11px; font-weight:800; }
.button-primary { background:var(--text); color:var(--bg); border-color:var(--text); }
.button-subtle { background:var(--surface-soft); }
.button-link { border:1px solid transparent; background:var(--control-bg); padding:0 11px; border-radius:14px; color:var(--muted); font-size:11px; font-weight:800; box-shadow:var(--control-shadow); }
.posts { padding-block:18px 92px; }
.section-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.66fr); gap:48px; align-items:end; }
.section-heading h2 { margin:10px 0 0; font-size:clamp(34px,4.3vw,58px); line-height:1.08; letter-spacing:-.03em; }
.section-heading-side p { margin:0; color:var(--text-2); font-size:11px; line-height:1.95; overflow-wrap:anywhere; }
.section-heading-links { display:flex; align-items:center; gap:18px; margin-top:16px; flex-wrap:wrap; }
.api-badge { padding:4px 7px; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:8px; font-weight:800; }
.posts-tools { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; margin-top:34px; }
.search-box { min-width:0; min-height:48px; display:flex; align-items:center; gap:9px; padding:0 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--muted); box-shadow:var(--control-shadow); }
.search-box>span { font-size:20px; line-height:1; }
.search-box input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font-size:12px; }
.search-box input::placeholder { color:var(--muted); }
.tool-actions { display:flex; align-items:center; gap:8px; }
.select-control { min-height:48px; padding:0 13px; border-radius:14px; outline:0; font-size:10px; font-weight:700; }
.posts-meta { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:14px 2px 18px; color:var(--muted); font-size:10px; }
.post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.post-card { min-width:0; height:100%; border:1px solid var(--line); border-radius:18px; background:var(--post-surface); overflow:hidden; box-shadow:var(--shadow-soft); transform:translate3d(0,0,0); animation:post-card-enter 1120ms cubic-bezier(.16,1,.3,1) backwards; animation-delay:var(--post-card-delay,0ms); }
.post-card-link { display:flex; flex-direction:column; min-height:100%; color:inherit; border-radius:inherit; }
.post-card-link:focus-visible { outline:2px solid var(--text); outline-offset:-3px; }
.post-image-wrap { position:relative; aspect-ratio:16/9; overflow:hidden; isolation:isolate; background:var(--bg-deep); }
.post-image-wrap.is-fallback,.post-image-wrap.is-image-error { background:linear-gradient(135deg,#1b1d20,#0b0c0d); }
.post-image { position:relative; z-index:0; width:100%; height:100%; object-fit:cover; transform:scale(1.001); }
.post-image-fallback { object-fit:contain; padding:28px; opacity:.72; }
/* Mask: eased scrim + progressive blur, both fade out smoothly towards the top of the image */
.post-image-mask { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to bottom,rgba(0,0,0,.22) 0,rgba(0,0,0,0) 26%),linear-gradient(to bottom,transparent 0,transparent 22%,rgba(0,0,0,0.011) 28.3%,rgba(0,0,0,0.040) 34.1%,rgba(0,0,0,0.085) 39.5%,rgba(0,0,0,0.143) 44.6%,rgba(0,0,0,0.212) 49.5%,rgba(0,0,0,0.289) 54.1%,rgba(0,0,0,0.369) 58.7%,rgba(0,0,0,0.451) 63.3%,rgba(0,0,0,0.531) 67.9%,rgba(0,0,0,0.608) 72.5%,rgba(0,0,0,0.676) 77.4%,rgba(0,0,0,0.735) 82.5%,rgba(0,0,0,0.780) 87.9%,rgba(0,0,0,0.809) 93.7%,rgba(0,0,0,0.820) 100.0%); }
.post-image-mask:before { content:""; position:absolute; inset:auto 0 0 0; height:68%; -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); -webkit-mask-image:linear-gradient(to top,#000 0%,#000 30%,rgba(0,0,0,.55) 62%,transparent 100%); mask-image:linear-gradient(to top,#000 0%,#000 30%,rgba(0,0,0,.55) 62%,transparent 100%); }
.post-image-mask:after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.14); opacity:0; }
.post-image-wrap.is-fallback .post-image-mask:before,.post-image-wrap.is-image-error .post-image-mask:before { display:none; }
.post-image-info { position:absolute; z-index:2; inset-inline:16px; inset-block-end:15px; display:flex; align-items:center; gap:10px; color:#fff; opacity:.94; pointer-events:none; transform:translateY(3px); text-shadow:0 1px 10px rgba(0,0,0,.55); }
.post-image-author-avatar { width:40px; height:40px; flex:0 0 40px; aspect-ratio:1/1; object-fit:cover; border:1px solid rgba(255,255,255,.72); border-radius:50%; background:#000; box-shadow:0 2px 10px rgba(0,0,0,.35); }
.post-image-info-copy { min-width:0; display:grid; gap:1px; }
.post-image-info-copy strong,.post-image-info-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.post-image-info-copy strong { font-size:11px; font-weight:800; }
.post-image-info-copy span { font-size:9px; color:rgba(255,255,255,.82); line-height:1.55; }
.post-body { display:flex; flex-direction:column; flex:1; min-width:0; padding:17px; }
.post-top { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.post-top-right { min-width:0; display:flex; align-items:center; gap:9px; }
.post-number { color:var(--text); font-size:9px; font-weight:900; letter-spacing:.08em; direction:ltr; }
.post-top-comments { display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:9px; direction:ltr; }
.post-top-comments-icon { width:13px; height:13px; display:inline-block; background:currentColor; mask:center/contain no-repeat; -webkit-mask:center/contain no-repeat; mask-image:url("./SVGs/ui/comments.svg?v=1"); -webkit-mask-image:url("./SVGs/ui/comments.svg?v=1"); }
.status-chip { flex:0 0 auto; white-space:nowrap; padding:3px 7px; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:8px; font-weight:700; }
.post-body h3 { margin:14px 0 8px; color:var(--text); font-size:17px; line-height:1.5; overflow-wrap:anywhere; word-break:break-word; }
 .post-body p { margin:0; color:var(--text-2); font-size:12px; line-height:1.95; overflow-wrap:anywhere; word-break:break-word; }
.card-rating { display:inline-flex; align-items:center; gap:1px; direction:ltr; }
.card-rating.compact { gap:0; }
.rating-star { width:16px; height:16px; flex:0 0 16px; }
.card-rating.compact .rating-star { width:13px; height:13px; flex-basis:13px; }
.user-identity { min-width:0; display:flex; align-items:center; gap:10px; }
.user-identity.compact { gap:7px; }
.user-avatar { width:38px; height:38px; min-width:38px; min-height:38px; max-width:38px; max-height:38px; flex:0 0 38px; aspect-ratio:1 / 1; object-fit:cover; border-radius:50%; border:1px solid var(--line); background:var(--bg-deep); }
.user-avatar.compact { width:28px; height:28px; min-width:28px; min-height:28px; max-width:28px; max-height:28px; flex-basis:28px; }
.user-identity-text { min-width:0; display:grid; gap:1px; }
.user-identity-label { color:var(--muted); font-size:8px; }
.user-identity-line { min-width:0; display:flex; align-items:center; gap:5px; }
.user-identity-line a { min-width:0; overflow-wrap:anywhere; color:var(--text); font-size:10px; font-weight:800; }
.verified-badge { width:18px; height:18px; flex:0 0 18px; object-fit:contain; }
.post-skeleton { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--surface); }
.skeleton-image { aspect-ratio:16/9; background:var(--bg-deep); }
.skeleton-body { padding:18px; display:grid; gap:11px; }
.skeleton-body span { display:block; height:9px; border-radius:5px; background:var(--bg-deep); }
.skeleton-body span:nth-child(1) { width:28%; }
.skeleton-body span:nth-child(2) { width:42%; }
.skeleton-body span:nth-child(3) { height:18px; width:74%; }
.skeleton-body span:nth-child(4) { width:92%; }
.skeleton-body span:nth-child(5) { width:66%; }
.posts-empty,.posts-error { min-height:230px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; margin-top:24px; padding:32px 20px; text-align:center; border:1px dashed var(--line-strong); border-radius:20px; background:var(--surface); }
.empty-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--line); font-weight:800; }
.posts-empty strong,.posts-error strong { font-size:16px; line-height:1.5; }
.posts-empty span,.posts-error span { max-width:560px; color:var(--muted); font-size:10px; line-height:1.8; overflow-wrap:anywhere; }
.posts-error .button { margin-top:7px; }
.load-more-posts { display:flex; width:fit-content; min-width:170px; margin:24px auto 0; }
.auth-toast { position:fixed; z-index:5000; inset:auto 16px 18px auto; width:min(390px,calc(100vw - 32px)); margin:0; padding:13px 15px; border:1px solid var(--line-strong); border-radius:12px; background:var(--surface-solid); color:var(--text); box-shadow:var(--shadow-soft); align-items:center; gap:10px; }
.auth-toast:not([open]) { display:none; }
.auth-toast::backdrop { background:transparent; }
.auth-toast-icon { width:26px; height:26px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; font-weight:800; }
.connect-dialog,.profile-dialog { width:min(560px,calc(100% - 24px)); max-width:560px; max-height:min(92vh,780px); margin:auto; padding:0; border:0; background:transparent; color:var(--text); }
.connect-dialog::backdrop,.profile-dialog::backdrop { background:rgba(0,0,0,.64); }
.dialog-card,.profile-card { position:relative; max-height:min(92vh,760px); overflow:auto; padding:28px; border:1px solid var(--line-strong); border-radius:20px; background:var(--surface-solid); box-shadow:var(--shadow); }
.dialog-close { position:absolute; inset-block-start:14px; inset-inline-end:14px; width:34px; height:34px; min-width:34px; min-height:34px; aspect-ratio:1/1; display:grid; place-items:center; border:1px solid transparent; border-radius:12px; background:var(--control-bg); color:var(--text); box-shadow:var(--control-shadow); }
.dialog-card h2,.profile-card h2 { margin:12px 0 8px; font-size:28px; line-height:1.2; letter-spacing:-.03em; }
.dialog-card>p { margin:0; color:var(--text-2); font-size:11px; line-height:1.9; }
.dialog-card>p.dialog-sub { margin-top:6px; }
.login-methods { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.login-method-btn { position:relative; display:flex; align-items:center; justify-content:center; gap:8px; padding:13px 10px; border:1px solid var(--line); border-radius:13px; background:var(--surface); color:var(--text); font-size:12px; font-weight:800; }
.login-method-btn.is-active { border-color:var(--accent); background:var(--surface-solid); box-shadow:inset 0 0 0 1px var(--accent); }
.login-method-btn.is-soon { color:var(--muted); cursor:pointer; }
.login-method-icon { width:16px; height:16px; flex:0 0 auto; border-radius:4px; background:currentColor; mask:center/contain no-repeat; -webkit-mask:center/contain no-repeat; }
.login-method-icon-github { mask-image:url("./SVGs/brand/logo.svg"); -webkit-mask-image:url("./SVGs/brand/logo.svg"); }
.login-method-icon-google { background:conic-gradient(from 90deg,#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0 100%); mask:none; -webkit-mask:none; border-radius:50%; }
.login-method-badge { position:absolute; inset-block-start:-8px; inset-inline-end:-6px; padding:2px 7px; border-radius:999px; background:var(--bg-deep); border:1px solid var(--line-strong); color:var(--muted); font-size:7px; font-weight:800; letter-spacing:.04em; white-space:nowrap; }
.secure-login-note { display:flex; align-items:center; gap:7px; margin:14px 0 0; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); color:var(--text-2); font-size:9px; line-height:1.7; }
.login-action-results.compact>div { padding:8px 10px; }
.login-action-results.compact span { font-size:7.5px; }
.login-action-results.compact b { font-size:7.5px; }
.agreement-box.compact { padding:12px; }
.auth-method { margin-top:14px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.auth-method-title { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.device-code { margin:12px 0; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--bg); text-align:center; font-size:26px; font-weight:800; letter-spacing:.13em; direction:ltr; }
.oauth-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:14px; }
.oauth-actions .button { flex:1 1 160px; }
.oauth-status { min-height:42px; margin-top:12px; padding:10px 12px; display:flex; align-items:center; color:var(--muted); border-top:1px solid var(--line); font-size:10px; line-height:1.7; }
.oauth-countdown { color:var(--text); font-weight:700; direction:ltr; }
.oauth-start-status { min-height:20px; margin-top:10px; color:var(--muted); font-size:9px; line-height:1.7; text-align:center; overflow-wrap:anywhere; }
.dialog-footnote { margin-top:16px; color:var(--muted); font-size:9px; line-height:1.8; }
.agreement-box { margin-top:14px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.agreement-box strong { display:block; font-size:10px; }
.agreement-box p { margin:5px 0 0; color:var(--text-2); font-size:9px; line-height:1.8; }
.agreement-status { display:flex; align-items:flex-start; gap:9px; margin-top:12px; color:var(--text-2); font-size:9px; line-height:1.8; }
.agreement-status input { position:absolute; opacity:0; pointer-events:none; }
.agreement-checkmark { width:20px; height:20px; flex:0 0 20px; display:grid; place-items:center; border:1px solid var(--text); color:var(--bg); background:var(--text); border-radius:6px; font-size:12px; font-weight:900; }
.login-action-results { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.login-action-results>div { min-width:0; display:grid; gap:4px; padding:10px; border:1px solid var(--line); border-radius:12px; }
.login-action-results span { color:var(--muted); font-size:8px; overflow-wrap:anywhere; }
.login-action-results b { color:var(--text); font-size:8px; line-height:1.6; overflow-wrap:anywhere; }
.login-action-results b[data-status="success"] { color:#68c58d; }
.login-action-results b[data-status="error"] { color:#ff7373; }
.profile-header { display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:center; }
.profile-avatar-wrap { width:96px; height:96px; flex:0 0 96px; aspect-ratio:1/1; display:grid; place-items:center; }
.profile-avatar { width:96px; height:96px; aspect-ratio:1/1; object-fit:cover; border:1px solid var(--line-strong); border-radius:16px; background:var(--bg-deep); }
.profile-info { min-width:0; }
.profile-info h2 { overflow-wrap:anywhere; word-break:break-word; }
.profile-info>a { display:block; margin-top:2px; color:var(--muted); font-size:10px; font-weight:700; overflow-wrap:anywhere; }
.profile-dates { display:grid; gap:2px; margin-top:9px; color:var(--muted); font-size:8px; line-height:1.6; overflow-wrap:anywhere; }
.profile-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }
.profile-actions .button { flex:1 1 180px; }
.post-reader { width:100%; padding:0 0 92px; }
.post-reader-body { width:var(--shell); margin-inline:auto; }
.reader-error { padding-block:120px; }
.reader-error-card { max-width:720px; margin:auto; padding:34px; border:1px solid var(--line); border-radius:20px; background:var(--surface); text-align:center; box-shadow:var(--shadow-soft); }
.reader-error-card h1 { margin:13px 0 9px; font-size:clamp(34px,5vw,58px); line-height:1.08; overflow-wrap:anywhere; }
.reader-error-card p { margin:0 auto 22px; max-width:560px; color:var(--text-2); font-size:11px; line-height:1.9; }
.reader-actions { display:flex; justify-content:flex-start; align-items:center; gap:12px; margin:0 0 24px; }
.post-hero { position:relative; width:100%; height:100dvh; min-height:100svh; margin:0; padding:0; border:0; border-bottom:1px solid var(--line); border-radius:0; overflow:hidden; isolation:isolate; background-color:var(--bg); background-image:none; }
.post-hero:before { content:""; position:absolute; inset:-34px; z-index:0; background-image:var(--hero-image,none); background-size:cover; background-position:center top; background-repeat:no-repeat; filter:blur(28px) saturate(1.04); opacity:.5; transform:scale(1.07); pointer-events:none; }
.post-hero:after { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.04) 36%,rgba(0,0,0,.2) 66%,var(--bg) 100%); pointer-events:none; }
.post-hero-inner { position:relative; z-index:1; width:var(--shell); height:100%; min-height:100%; margin-inline:auto; display:flex; flex-direction:column; justify-content:center; padding-block:calc(var(--header-height) + 18px) 58px; }
.post-meta-line { display:flex; align-items:center; gap:9px; flex-wrap:wrap; color:var(--muted); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.post-meta-line #postState { padding:4px 7px; border:1px solid var(--line); border-radius:8px; }
.post-hero h1 { max-width:1000px; margin:14px 0; font-size:clamp(38px,6.1vw,76px); line-height:1.08; letter-spacing:-.04em; overflow-wrap:anywhere; word-break:break-word; }
.post-byline { display:flex; align-items:center; gap:7px; flex-wrap:wrap; color:var(--muted); font-size:11px; }
.post-byline a { color:var(--text); font-weight:700; }
.reader-labels { margin-top:18px; }
.reaction-panel { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:22px; position:relative; z-index:5; }
.reaction-widget { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.reaction-action { min-height:35px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 10px; border:1px solid transparent; border-radius:14px; background:var(--control-bg); color:var(--text); box-shadow:var(--control-shadow); font-size:9px; font-weight:800; }
.reaction-action.is-selected { background:var(--control-bg-hover); box-shadow:var(--control-shadow-hover); border-color:var(--line-strong); }
.reaction-action-icon { width:18px; height:18px; flex:0 0 18px; }
.reaction-widget.compact .reaction-action { min-height:30px; padding-inline:8px; }
.reaction-widget.compact .reaction-action-icon { width:16px; height:16px; flex-basis:16px; }
.post-status { min-height:18px; margin-top:9px; color:var(--muted); font-size:8px; overflow-wrap:anywhere; }
.comment-reactions-root { display:flex; align-items:center; }
.post-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,300px); gap:34px; align-items:start; margin-top:30px; }
.post-content { min-width:0; max-width:920px; color:var(--text); font-size:15px; overflow-anchor:none; line-height:2.05; overflow-wrap:anywhere; word-break:break-word; }
.post-content>*:first-child { margin-top:0; }
.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6 { line-height:1.35; overflow-wrap:anywhere; }
.post-content p,.post-content ul,.post-content ol,.post-content pre,.post-content blockquote,.post-content table { margin-block:1em; }
.post-content ul,.post-content ol { padding-inline-start:1.6rem; }
.post-content a { color:var(--text); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.post-content img,.post-content video,.post-content iframe,.post-content svg,.post-content canvas { display:block; box-sizing:border-box; max-width:100%; height:auto; }
.post-content pre { max-width:100%; overflow:auto; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--bg-deep); white-space:pre; -webkit-overflow-scrolling:touch; }
.post-content code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.post-content mark { padding:0 3px; background:var(--surface-soft); color:var(--text); }
.post-content kbd { padding:2px 6px; border:1px solid var(--line); border-radius:5px; background:var(--bg-deep); font:inherit; font-size:.85em; }
.post-content small { font-size:.85em; }
.post-content sup,.post-content sub { line-height:0; }
.post-content blockquote { margin-inline:0; padding:12px 16px; border-inline-start:3px solid var(--text); border-radius:0 10px 10px 0; background:var(--surface-soft); color:var(--text-2); }
.post-content table { width:100%; max-width:100%; border-collapse:collapse; display:block; overflow:auto; }
.post-content th,.post-content td { min-width:110px; padding:10px 12px; border:1px solid var(--line); text-align:start; vertical-align:top; overflow-wrap:anywhere; }
.post-content input[type="checkbox"] { width:15px; height:15px; margin-inline-end:7px; vertical-align:-2px; accent-color:var(--text); }
.post-inline-image { display:block; width:auto; max-width:100%; height:auto; margin-block:10px; border-radius:14px; object-fit:contain; }
.post-inline-image-index { width:100%; max-height:360px; object-fit:cover; }
.post-inline-image-original { max-width:100%; }
.md-line { overflow-wrap:anywhere; word-break:break-word; }
.md-line.is-rtl { direction:rtl; text-align:right; }
.md-line.is-ltr { direction:ltr; text-align:left; }
.md-code { direction:ltr !important; text-align:left !important; }
.post-sidebar { position:sticky; top:98px; display:grid; gap:14px; min-width:0; }
.auth-card,.issue-facts { border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:none; }
.auth-card { padding:18px; }
.auth-kicker { margin-bottom:12px; color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.15em; }
.auth-card strong { display:block; font-size:14px; line-height:1.55; }
.auth-card p { margin:8px 0 15px; color:var(--text-2); font-size:10px; line-height:1.9; }
.auth-button { width:100%; }
.issue-facts { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; }
.issue-facts>div { min-width:0; padding:14px; display:flex; flex-direction:column; gap:2px; border-bottom:1px solid var(--line); }
.issue-facts>div:nth-child(odd) { border-inline-end:1px solid var(--line); }
.issue-facts>div:nth-last-child(-n+2) { border-bottom:0; }
.issue-facts span { color:var(--muted); font-size:8px; }
.issue-facts b { min-width:0; color:var(--text); font-size:12px; overflow-wrap:anywhere; }
.comments { padding-top:72px; }
.comments-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; }
.comments-heading h2 { margin:9px 0 0; font-size:clamp(30px,4vw,48px); line-height:1.1; }
.comments-controls { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.button.compact,.button-link.compact,.select-control.compact { min-height:40px; }
.compact-btn { width:40px; height:40px; min-width:40px; min-height:40px; }
#commentsStatus { color:var(--muted); font-size:10px; }
.comments-list { display:grid; gap:12px; margin-top:22px; overflow-anchor:none; }
.comments-empty { padding:30px 18px; border:1px dashed var(--line-strong); border-radius:16px; color:var(--muted); text-align:center; font-size:10px; }
.comment-card { min-width:0; padding:17px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.comment-head { display:flex; justify-content:space-between; gap:14px; }
.comment-actions { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:13px; padding-top:11px; border-top:1px solid var(--line); }
.comment-actions-left,.comment-actions-right { display:flex; gap:6px; flex-wrap:wrap; }
.comment-head time,.comment-user span { color:var(--muted); font-size:8px; }
.comment-body { margin-top:13px; min-width:0; color:var(--text-2); font-size:12px; line-height:1.9; overflow-wrap:anywhere; word-break:break-word; }
.comment-body pre { max-width:100%; overflow:auto; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--bg-deep); white-space:pre; }
.comment-body img { max-width:100%; height:auto; }
.tiny-action { min-height:30px; display:inline-flex; align-items:center; padding:0 10px; border:1px solid transparent; border-radius:12px; background:var(--control-bg); box-shadow:var(--control-shadow); color:var(--muted); font-size:8px; }
.load-more { display:flex; margin:16px auto 0; }
.comment-composer { margin-top:20px; padding:19px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.composer-user { margin-bottom:9px; color:var(--muted); font-size:9px; font-weight:700; overflow-wrap:anywhere; }
.comment-composer textarea,.token-input { width:100%; min-width:0; max-width:100%; resize:vertical; border:1px solid var(--line); border-radius:12px; outline:0; background:var(--bg); color:var(--text); padding:14px; line-height:1.9; }
.composer-meta,.composer-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.composer-meta { margin-top:8px; color:var(--muted); font-size:8px; }
.composer-actions { margin-top:12px; }
.composer-actions>div { display:flex; gap:7px; flex-wrap:wrap; }
#composerStatus { color:var(--muted); font-size:9px; overflow-wrap:anywhere; }
.svg-icon { display:inline-block; flex:0 0 auto; width:18px; height:18px; color:var(--text); background:currentColor; mask:center/contain no-repeat; -webkit-mask:center/contain no-repeat; }
.icon-size-14 { width:14px; height:14px; }
.icon-size-16 { width:16px; height:16px; }
.icon-size-17 { width:17px; height:17px; }
.icon-size-20 { width:20px; height:20px; }
.icon-comments { mask-image:url("./SVGs/ui/comments.svg?v=1"); -webkit-mask-image:url("./SVGs/ui/comments.svg?v=1"); }
.icon-star-full { mask-image:url("./SVGs/ui/star-full.svg?v=1"); -webkit-mask-image:url("./SVGs/ui/star-full.svg?v=1"); }
.icon-star-half { mask-image:url("./SVGs/ui/star-half.svg?v=1"); -webkit-mask-image:url("./SVGs/ui/star-half.svg?v=1"); }
.icon-star-empty { mask-image:url("./SVGs/ui/star-empty.svg?v=1"); -webkit-mask-image:url("./SVGs/ui/star-empty.svg?v=1"); }
.icon-plus-one { mask-image:url("./SVGs/reactions/plus-one.svg?v=1"); -webkit-mask-image:url("./SVGs/reactions/plus-one.svg?v=1"); }
.icon-minus-one { mask-image:url("./SVGs/reactions/minus-one.svg?v=1"); -webkit-mask-image:url("./SVGs/reactions/minus-one.svg?v=1"); }
.star-rating { display:inline-flex; align-items:center; gap:2px; direction:ltr; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.footer { padding-block:24px 30px; }
.footer-shell { display:grid; gap:22px; padding-top:26px; border-top:1px solid var(--line); }
.footer-main { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.footer-main p { margin:0; color:var(--muted); font-size:9px; overflow-wrap:anywhere; }
.footer-links { display:flex; gap:14px; flex-wrap:wrap; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:8px; }
.back-top { border:1px solid transparent; background:var(--control-bg); color:var(--muted); padding:0 11px; border-radius:14px; box-shadow:var(--control-shadow); font-size:9px; }
[data-reveal],.reveal,.reveal.visible,[data-reveal].visible { opacity:1; transform:none; }
:focus-visible { outline:2px solid var(--text); outline-offset:3px; }
.search-box input:focus-visible { outline:0; }
button,.button,.button-link,.select-control,.menu-btn,.profile-control,.back-top,.dialog-close,.tiny-action,.reaction-action { -webkit-tap-highlight-color:transparent; }

@media (max-width:980px) {
  :root { --shell:min(100% - 28px,920px); }
  .post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .post-layout { grid-template-columns:1fr; }
  .post-sidebar { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .section-heading { grid-template-columns:1fr; gap:20px; }
  .posts-tools { grid-template-columns:1fr; }
  .tool-actions { width:100%; }
  .tool-actions .select-control { flex:1 1 auto; }
}
@media (max-width:860px) {
  .menu-btn { display:flex; }
  .nav { position:absolute; top:calc(100% + 10px); inset-inline-end:0; width:min(320px,calc(100vw - 20px)); margin:0; padding:8px; display:flex; flex-direction:column; align-items:stretch; gap:3px; border:1px solid var(--line); border-radius:16px; background:var(--surface-solid); box-shadow:0 18px 42px rgba(0,0,0,.2); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px) scale(.985); transform-origin:top right; transition:opacity 380ms var(--ui-ease),transform 380ms var(--ui-ease),visibility 0s linear 380ms,box-shadow 420ms var(--ui-ease); }
  .nav.open { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); transition-delay:0s; }
  .nav-link { width:100%; padding:11px 13px; }
  .nav-menu-tools { width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; margin:5px 0 0; padding:7px 0 0; border-inline-start:0; border-top:1px solid var(--line); }
  .nav-profile-control { width:100%; justify-content:flex-start; }
  .language-switcher { justify-content:flex-end; }
  .topbar-actions { margin-inline-start:auto; }
}
@media (min-width:861px) { .nav-menu-tools { display:flex; } }
@media (max-width:720px) {
  :root { --shell:calc(100% - 22px); --header-height:70px; }
  .topbar-inner { gap:8px; }
  .brand { gap:8px; }
  .brand-mark { width:32px; height:32px; }
  .brand-mark img { width:23px; height:23px; }
  .brand-name { font-size:12px; letter-spacing:.06em; }
  .nav-profile-control { min-width:0; width:100%; padding-inline:8px; }
  .hero { padding-block:calc(var(--header-height) + 18px) 48px; }
  .hero h1 { margin-top:13px; font-size:clamp(40px,12.6vw,60px); line-height:1.06; }
  .hero-copy>p { font-size:13px; }
  .hero-actions { align-items:stretch; }
  .hero-actions .button,.hero-actions .button-link { flex:1 1 190px; }
  .hero-proof { gap:8px 16px; margin-top:24px; }
  .hero-proof span { font-size:8px; }
  .section-heading h2 { font-size:clamp(30px,9vw,42px); }
  .section-heading-side p { font-size:10px; }
  .section-heading-links { gap:14px; }
  .tool-actions { flex-wrap:wrap; }
  .tool-actions .select-control,.tool-actions .button { flex:1 1 100%; width:100%; }
  .post-grid { grid-template-columns:1fr; gap:14px; }
  .post-body { padding:16px; }
  .post-sidebar { grid-template-columns:1fr; }
  .reader-actions { flex-direction:column; align-items:stretch; }
  .reader-actions .button-link { justify-content:space-between; }
  .post-reader { padding-block:0 68px; }
  .post-hero-inner { min-height:100svh; min-height:100dvh; padding-block:calc(var(--header-height) + 28px) 56px; }
  .post-hero h1 { font-size:clamp(33px,10.6vw,48px); line-height:1.12; }
  .login-methods { grid-template-columns:1fr 1fr; gap:8px; }
  .login-method-btn { padding:11px 6px; font-size:11px; }
  .post-content { font-size:13px; line-height:2; }
  .comments { padding-top:52px; }
  .comments-heading { align-items:stretch; flex-direction:column; }
  .comments-controls { justify-content:flex-start; }
  .comment-head { flex-direction:column; }
  .composer-actions { align-items:stretch; flex-direction:column; }
  .composer-actions>div { width:100%; }
  .composer-actions .button { flex:1 1 140px; }
  .dialog-card,.profile-card { padding:22px 18px; }
  .dialog-card h2,.profile-card h2 { font-size:25px; }
  .device-code { font-size:21px; letter-spacing:.11em; }
  .footer-main,.footer-bottom { align-items:flex-start; flex-direction:column; }
  .footer-links { gap:10px; }
  .profile-header { grid-template-columns:1fr; }
  .profile-avatar-wrap { margin-inline:auto; }
  .profile-info { text-align:center; }
  .profile-info .eyebrow { justify-content:center; }
  .profile-dates { justify-items:center; }
  .profile-actions { flex-direction:column; }
  .profile-actions .button { width:100%; }
}
@media (max-width:430px) {
  .language-switcher,.language-select { min-width:96px; }
  .language-select { height:36px; font-size:11px; padding-inline-start:8px; padding-inline-end:28px; }
  .icon-btn,.menu-btn { width:36px; height:36px; min-width:36px; min-height:36px; }
  .hero-actions .button,.hero-actions .button-link { flex-basis:100%; width:100%; }
  .posts-empty,.posts-error { min-height:200px; }
  .load-more-posts { width:100%; }
  .login-action-results { grid-template-columns:1fr; }
}
@media (max-width:360px) {
  .brand-name { display:none; }
  .profile-control,.icon-btn,.menu-btn { width:34px; min-width:34px; }
  .language-switcher,.language-select { min-width:92px; }
  .language-select { font-size:10px; padding-inline-end:26px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:180ms !important; animation-duration:1ms !important; animation-iteration-count:1 !important; }
}

@keyframes post-card-enter {
  0% { opacity:0; transform:translate3d(0,20px,0) scale(.985); }
  100% { opacity:1; transform:translate3d(0,0,0) scale(1); }
}

/* ───────── Interaction system ─────────
   One transition definition and one hover/active definition for every interactive element.
   All state changes use the same duration/easing: var(--ui-speed) var(--ui-ease). */
:is(.button,.button-link,.back-top,.profile-control,.icon-btn,.menu-btn,.language-select,.select-control,.tiny-action,.reaction-action,.login-method-btn,.dialog-close,.search-box,.nav-link,.brand,.post-card,.comment-card,.auth-card,.issue-facts>div,.post-image,.post-image-info) { transition-property:transform,color,background-color,border-color,box-shadow,opacity,filter; transition-duration:var(--ui-speed); transition-timing-function:var(--ui-ease); }
.post-image-mask:after { transition:opacity var(--ui-speed) var(--ui-ease); }
:is(.button,.button-link,.back-top,.profile-control,.icon-btn,.menu-btn,.language-select,.select-control,.tiny-action,.reaction-action,.login-method-btn,.dialog-close):not(:disabled):active { transform:translate3d(0,0,0) scale(.97); }
.nav-link:active,.brand:active { transform:scale(.97); }

@media (hover:hover) and (pointer:fine) {
  :is(.button,.button-link,.back-top,.profile-control,.icon-btn,.menu-btn,.language-select,.select-control,.tiny-action,.reaction-action,.login-method-btn,.dialog-close):not(:disabled):hover { transform:translate3d(0,-2px,0); background-color:var(--control-bg-hover); box-shadow:var(--control-shadow-hover); color:var(--text); }
  :is(.button,.button-link,.back-top,.profile-control,.icon-btn,.menu-btn,.language-select,.select-control,.tiny-action,.reaction-action,.login-method-btn,.dialog-close):not(:disabled):hover:active { transform:translate3d(0,0,0) scale(.97); }
  .button:not(:disabled):hover { background-color:var(--surface); border-color:var(--line-strong); }
  .button-subtle:not(:disabled):hover { background-color:var(--surface-soft); }
  .button-primary:not(:disabled):hover { background-color:var(--text); border-color:var(--text); color:var(--bg); opacity:.88; }
  .button-link:not(:disabled):hover,.back-top:hover { border-color:var(--line); }
  .login-method-btn:not(:disabled):hover { border-color:var(--line-strong); }
  .nav-link:hover { color:var(--text); background-color:var(--control-bg); }
  .brand:hover { opacity:.72; }
  .search-box:hover { border-color:var(--line-strong); }
  .post-card:hover,.post-card:focus-within { border-color:var(--line-strong); box-shadow:0 24px 52px rgba(0,0,0,.22); transform:translate3d(0,-6px,0); }
  .post-card:hover .post-image { transform:scale(1.06); filter:saturate(1.06) brightness(1.03); }
  .post-card:hover .post-image-mask:after { opacity:1; }
  .post-card:hover .post-image-info { opacity:1; transform:translateY(0); }
  .comment-card:hover { border-color:var(--line-strong); box-shadow:var(--shadow-soft); }
}
.search-box:focus-within { border-color:var(--text-2); }
.post-card:focus-within { border-color:var(--line-strong); }
.post-card:has(.post-card-link:focus-visible) .post-image-info { opacity:1; transform:translateY(0); }
.post-card:has(.post-card-link:focus-visible) .post-image-mask:after { opacity:1; }

/* Labels (previously unstyled) */
.post-labels { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.post-labels:empty { display:none; }
.post-labels>span { padding:3px 9px; border:1px solid var(--line); border-radius:8px; background:var(--control-bg); color:var(--text-2); font-size:9px; font-weight:700; line-height:1.6; white-space:nowrap; }
.post-body .post-labels { margin-top:12px; }
@keyframes loader-breathe { 0%,100% { opacity:.72; transform:translateY(0) scale(.98); } 50% { opacity:1; transform:translateY(-3px) scale(1); } }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--scroll-thumb); border:2px solid transparent; background-clip:padding-box; border-radius:999px; transition:background-color var(--ui-speed) var(--ui-ease); }
::-webkit-scrollbar-thumb:hover { background:var(--line-strong); background-clip:padding-box; }
html[lang^="en"] body,html[lang^="ru"] body { font-family:"Inter","Vazirmatn",system-ui,sans-serif; }
html[lang="fa"] body { font-family:"Vazirmatn","Inter",system-ui,sans-serif; }