@view-transition{
  navigation: auto;
}

:root{
  --bg: #0a0d12;
  --bg-rgb: 10,13,18;
  --surface: #12161d;
  --surface-rgb: 18,22,29;
  --line: #232a36;
  --line-rgb: 35,42,54;
  --text: #e8ecf2;
  --muted: #8b93a3;
  --faint: #545c6b;
  --orange: #ff9c2a;
  --blue: #29b6ff;
  --green: #3ddc84;
  --red: #ff5c5c;
  --yellow: #ffd60a;
  --neutral: #c9cfda;
  --portrait-a: #1c2836;
  --portrait-b: #0f151d;
  --overlay-rgb: 5,7,10;
  
  --rule-strong: #525f70;

  
  --brand-dark: #1f6b5e;
  --brand: #2a9a88;
  --brand-light: #53b7a7;
  --brand-black: #2d2d2d;

  
  --control-outline: rgba(255,255,255,0.1);
  --control-outline-hover: rgba(140,180,255,0.22);

  
  --rank-silver: #c9d1db;
  --rank-bronze: #e0975a;
}

:root[data-theme="light"]{
  --bg: #eef1f6;
  --bg-rgb: 238,241,246;
  --surface: #ffffff;
  --surface-rgb: 255,255,255;
  --line: #d7dbe3;
  --line-rgb: 215,219,227;
  --text: #161a22;
  --muted: #5b6270;
  --faint: #7d8494;
  --orange: #d97a17;
  --blue: #0d7dc4;
  --green: #1f9d5c;
  --red: #d93a3a;
  --yellow: #c99a00;
  --portrait-a: #e4e8ef;
  --portrait-b: #f4f6fa;
  --overlay-rgb: 190,196,207;
  --rule-strong: #8894a8;
  --control-outline: rgba(10,20,35,0.12);
  --control-outline-hover: rgba(20,60,120,0.22);
  --rank-silver: #7d8a9c;
  --rank-bronze: #a85f28;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
img{ -webkit-user-drag:none; -webkit-touch-callout:none; }

html{
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-gutter: stable both-edges;
  scrollbar-color: var(--line) var(--bg);
  
  background: var(--bg);
}
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--line); border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background: var(--faint); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--blue); outline-offset: 2px;
}
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  
  min-height: 100vh;
  
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  transition: background-color .2s, color .2s;
}


#ow-background{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  display:block;
  pointer-events: none;
}

::selection{ background: var(--orange); color:#101010; }
a{ color:inherit; }



.topnav{
  position: sticky; top:0; z-index:60;
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:16px;
  
  padding: 14px 14px;
  background: rgba(var(--bg-rgb),0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand{
  position:relative;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:18px;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color: var(--text);
  flex-shrink:0; display:flex; align-items:center;
  grid-column:1; justify-self:start;
}

.brand img{ height:38px; width:auto; display:block; transition: opacity .15s; }
.brand:hover img{ opacity:.8; }

.nav-links{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; grid-column:2; justify-self:center; }
.nav-links a, .nav-link-btn{
  position:relative;
  font-family:'Rajdhani',sans-serif; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  font-size:13px; color: var(--muted); text-decoration:none;
  background:none; border:none; padding:0; cursor:pointer; transition: color .15s;
}
.nav-links a:hover, .nav-link-btn:hover{ color: var(--text); }

.nav-links a.active{
  color: var(--text); font-weight:700;
  text-shadow: 0 0 10px color-mix(in srgb, var(--brand) 65%, transparent);
}

.nav-right{ display:flex; align-items:center; gap:12px; flex-shrink:0; grid-column:3; justify-self:end; }


.nav-disabled{
  font-family:'Rajdhani',sans-serif; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  font-size:13px; color: var(--muted); cursor:not-allowed; user-select:none;
}

.theme-toggle, .menu-toggle{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  background: var(--surface); border:1px solid var(--line); color: var(--faint); cursor:pointer;
  clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transition: color .15s, border-color .15s;
}
.theme-toggle:hover, .menu-toggle:hover{ color: var(--text); border-color: var(--faint); }
.theme-toggle svg, .menu-toggle svg{ width:18px; height:18px; }
.theme-toggle .icon-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display:block; }

.menu-toggle{ display:none; }
.menu-toggle .icon-close{ display:none; }
.menu-toggle.open .icon-burger{ display:none; }
.menu-toggle.open .icon-close{ display:block; }

.mobile-menu{
  position:absolute; top:100%; left:0; right:0;
  background: var(--surface); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; padding:8px 24px 14px;
  animation: mobileMenuIn .16s ease;
}
.mobile-menu[hidden]{ display:none; }
@keyframes mobileMenuIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.mobile-menu a, .mobile-menu button, .mobile-menu .nav-disabled{
  font-family:'Rajdhani',sans-serif; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  font-size:14px; color: var(--muted); text-decoration:none; background:none; border:none; text-align:left;
  padding:12px 0; border-bottom:1px solid var(--line); cursor:pointer; transition: color .15s;
}
.mobile-menu a:last-child, .mobile-menu button:last-child, .mobile-menu .nav-disabled:last-child{ border-bottom:none; }
.mobile-menu a:hover, .mobile-menu button:hover{ color: var(--text); }
.mobile-menu .nav-disabled{ color: var(--muted); cursor:not-allowed; }

.mobile-menu a.active{
  color: var(--text); font-weight:700;
  text-shadow: 0 0 10px color-mix(in srgb, var(--brand) 65%, transparent);
}

.mobile-menu a.came-from{ color: var(--text); }

@media (max-width:640px){
  .nav-links{ display:none; }
  .menu-toggle{ display:flex; }
  .brand{ font-size:16px; }
  .brand img{ height:28px; }
  .theme-toggle, .menu-toggle{
    width:32px; height:32px;
    clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  }
  .theme-toggle svg, .menu-toggle svg{ width:15px; height:15px; }
}
@media (min-width:641px){
  .mobile-menu{ display:none !important; }
}



header{
  position: relative;
  padding: 56px 24px 36px;
  text-align:center;
  overflow:hidden;
  opacity:0; transform:translateY(14px);
  animation: cardIn .5s ease forwards;
}
@media (prefers-reduced-motion: reduce){
  header{ animation:none; opacity:1; transform:none; }
}

header::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(42,154,136,0.08), transparent 60%);
  pointer-events:none;
}
h1{
  font-family:'Rajdhani',sans-serif;
  font-weight:700;
  
  font-size: clamp(24px, 4.4vw, 48px);
  margin:0;
  letter-spacing: .03em;
  line-height:1.15;
  text-transform:uppercase;
}

header h1{ font-size: clamp(34px, 5vw, 56px); }
@media (max-width:640px){
  h1 .title-line2{ display:block; }
}

.last-updated{
  margin-top:16px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-family:'Rajdhani',sans-serif;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  color: rgba(255,255,255,0.65);
}
.last-updated .clock-icon{ width:13px; height:13px; flex-shrink:0; }
:root[data-theme="light"] .last-updated{ color: rgba(20,26,38,0.6); }





.controls{
  width: calc(100% - 48px);
  max-width: 1132px;
  margin: 28px auto 0;
  padding: 26px 24px 8px;
  position: sticky;
  top: 61px;
  z-index: 50;
  background: rgba(13,27,42,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-left: 1px solid rgba(255,255,255,0.05);
  border-right: 1px solid rgba(255,255,255,0.05);
  border-bottom: 2px solid transparent;
  clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition: margin .3s ease, width .3s ease, max-width .3s ease, clip-path .3s ease,
              background-color .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
:root[data-theme="light"] .controls{
  background: rgba(255,255,255,0.68);
  border-top-color: rgba(10,20,35,0.08);
  border-left-color: rgba(10,20,35,0.08);
  border-right-color: rgba(10,20,35,0.08);
}

.controls.is-scrolled{
  width: 100%;
  max-width: 1180px;
  margin: -1px auto 0;
  clip-path: polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 0);
  background: rgba(var(--bg-rgb),0.92);
  backdrop-filter: blur(10px);
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: var(--rule-strong);
}


@media (max-width:520px){
  .controls{ width: calc(100% - 20px); max-width:none; margin:20px 10px 0; }
}



.controls.lb-controls{
  max-width: 772px;
  padding-bottom: 22px;
}
.controls.lb-controls.is-scrolled{
  max-width: 820px;
}
@media (max-width:520px){
  .controls.lb-controls{ max-width:none; }
}



.search-wrap{ position:relative; margin: 0 auto 16px; max-width:100%; opacity:0; animation: chipIn .3s ease forwards; animation-delay: .25s; }
@media (prefers-reduced-motion: reduce){ .search-wrap{ animation:none; opacity:1; } }
.search-wrap svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:16px; height:16px; stroke: var(--faint); }

#search{
  width:100%;
  background: rgba(var(--surface-rgb),0.4);
  color: var(--text);
  font-family:'Inter',sans-serif;
  font-size:14px;
  padding: 12px 16px 12px 42px;
  border: 1px solid var(--line);
  clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  outline:none;
  transition: border-color .15s, box-shadow .15s;
}
#search:focus{
  border-color: rgba(0,100,255,.4);
  box-shadow: 0 0 8px rgba(0,100,255,.2);
}
#search::placeholder{ color: var(--faint); }



.chip-scroll-wrap{ position:relative; width:max-content; max-width:min(720px,100%); margin:0 auto 16px; }
.filter-row{
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:8px;
  width:100%;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
}
.filter-row::-webkit-scrollbar{ display:none; }

.filter-row.chips-scrollable{ justify-content:flex-start; }

.filter-row.has-scroll-fade{
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%);
}


.chip-scroll-btn{
  display:none;
  position:absolute; top:50%; transform:translateY(-50%);
  width:24px; height:24px; align-items:center; justify-content:center;
  background: rgba(var(--bg-rgb),0.85); border:1px solid var(--line); color:var(--faint);
  cursor:pointer; z-index:2; padding:0;
  clip-path: polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);
  transition: color .15s, border-color .15s;
}
.chip-scroll-btn:hover{ color:var(--text); border-color:var(--faint); }
.chip-scroll-btn svg{ width:13px; height:13px; }
.chip-scroll-left{ left:-10px; }
.chip-scroll-right{ right:-10px; }
@media (hover:hover) and (pointer:fine){
  .chip-scroll-wrap.chips-scrollable .chip-scroll-btn{ display:flex; }
  .chip-scroll-wrap.at-start .chip-scroll-left{ display:none; }
  .chip-scroll-wrap.at-end .chip-scroll-right{ display:none; }
}

.chip{ flex-shrink:0; }
.filter-divider{ color:var(--line); font-size:14px; margin:0 8px; flex-shrink:0; }

.chip{
  font-family:'Rajdhani',sans-serif;
  font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-size:12.5px;
  background: rgba(var(--surface-rgb),0.4); color: var(--muted);
  border: 1px solid var(--line);
  padding: 6px 15px; cursor:pointer;
  clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.chip:hover{
  color: var(--text); border-color: var(--fc, var(--faint));
  background: color-mix(in srgb, var(--fc, var(--brand)) 22%, rgba(var(--surface-rgb),0.4));
  box-shadow: 0 0 10px color-mix(in srgb, var(--fc, var(--brand)) 35%, transparent);
}
.chip.active{
  background: var(--fc, var(--brand)); color:#0a0d12; border-color: var(--fc, var(--brand));
  box-shadow: 0 0 16px color-mix(in srgb, var(--fc, var(--brand)) 60%, transparent);
}
.chip:focus-visible{ box-shadow: inset 0 0 0 1px rgba(0,100,255,.4), 0 0 8px rgba(0,100,255,.2); }



.chip, .chip-icon-btn{ opacity:0; animation: chipIn .3s ease forwards; }
.chip:nth-child(1), .chip-icon-btn:nth-child(1){ animation-delay:.28s; }
.chip:nth-child(2), .chip-icon-btn:nth-child(2){ animation-delay:.32s; }
.chip:nth-child(3), .chip-icon-btn:nth-child(3){ animation-delay:.36s; }
.chip:nth-child(4), .chip-icon-btn:nth-child(4){ animation-delay:.40s; }
.chip:nth-child(5), .chip-icon-btn:nth-child(5){ animation-delay:.44s; }
.chip:nth-child(6), .chip-icon-btn:nth-child(6){ animation-delay:.48s; }
.chip:nth-child(7), .chip-icon-btn:nth-child(7){ animation-delay:.52s; }
@keyframes chipIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .chip, .chip-icon-btn{ animation:none; opacity:1; } }


.chip-icon-btn{
  display:flex; align-items:center; justify-content:center;
  padding:0;
}
.chip-icon-btn svg{ width:14px; height:14px; }


main{ max-width: 1180px; width:100%; margin: 0 auto; padding: 36px 24px 100px; flex: 1 0 auto; }


#main{
  min-height: 600px;
  opacity:0; transform:translateY(14px);
  animation: cardIn .5s ease forwards;
  animation-delay: .1s;
}
@media (prefers-reduced-motion: reduce){
  #main{ animation:none; opacity:1; transform:none; }
}

#hero-root{ display:contents; }
.role-section{ margin-bottom: 44px; }
.role-header{ display:flex; align-items:center; gap:14px; margin-bottom: 18px; }
.role-icon{ width:26px; height:26px; flex-shrink:0; }
.role-icon-badge{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; padding:4px;
  background: var(--glow);
  clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}
.role-icon-badge img{ width:100%; height:100%; object-fit:contain; }
.role-header h2{
  font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; font-style:italic;
  font-size:21px; letter-spacing:.02em; margin:0;
}
.role-header .count{ font-family:'Rajdhani',sans-serif; color: var(--muted); font-size:13px; font-weight:600; }
.role-header .rule{ flex:1; height:2px; background: var(--rule-strong); }



.hero-count-line[hidden]{ display:none; }
.hero-count-line{
  display:flex; align-items:center; gap:14px; margin-top:14px;
  font-family:'Rajdhani',sans-serif; color:var(--muted); font-size:13px; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em;
}
.hero-count-line[hidden]{ display:none; }
.hero-count-line .rule{
  flex:1; height:2px;
  background: linear-gradient(to right, var(--rule-strong), transparent 85%);
}


.hero-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }


@media (max-width:520px){
  main{ padding-left:10px; padding-right:10px; }
  .glass-panel{ padding:1rem; }
  .hero-grid{ grid-template-columns: repeat(2, 1fr); gap:8px; }
}


@media (max-width:520px){
  .card-body{ padding:0 8px 8px; }
  .portrait .initial{ font-size:32px; }
  .pname-row{ left:8px; right:8px; bottom:8px; }
  .pname{ font-size:13px; }
  
  .prole{ display:none; }
  .label{ font-size:9px; margin-bottom:3px; }
  .handle-row{ font-size:11px; gap:4px; }
  .dot{ width:5px; height:5px; }
  .muted-line{ font-size:10.5px; }
  .sub-inactive{ font-size:8.5px; margin:4px 0 2px; }
  .last-post{ font-size:9px; }
  .last-post .clock-icon{ width:9px; height:9px; }
  .account-followers{ font-size:10px; }
  .account-followers .followers-icon{ width:10px; height:10px; }
  .summary-line{ font-size:10px; margin-top:4px; }
}

.hero-card{
  background: var(--surface);
  border: 1px solid var(--line);
  overflow:hidden;
  text-decoration:none;
  display:block;
  cursor:pointer;
  opacity: 0; transform: translateY(10px);
  animation: cardIn .45s ease forwards;
  animation-delay: var(--d, 0s);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
@keyframes cardIn{ to{ opacity:1; transform: translateY(0); } }
.hero-card:hover{ border-color: var(--hc, var(--brand)); transform: translateY(-3px); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--hc, var(--brand)) 45%, transparent); }
.hero-card.hidden{ display:none; }
@media (prefers-reduced-motion: reduce){ .hero-card{ animation:none; opacity:1; transform:none; } .hero-card:hover{ transform:none; } }

.portrait{ position:relative; aspect-ratio:1/1; background: linear-gradient(160deg,var(--portrait-a),var(--portrait-b)); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.portrait .initial{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:52px; color: color-mix(in srgb, var(--text) 8%, transparent); }

.fade{ position:absolute; left:0; right:0; bottom:0; height:55%; background: linear-gradient(0deg, rgba(var(--surface-rgb),1) 0%, rgba(var(--surface-rgb),0) 100%); }

.pname-row{
  position:absolute; left:14px; right:14px; bottom:12px; z-index:1;
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
}
.pname{
  font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; font-size:18px; letter-spacing:.02em;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.prole{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-family:'Rajdhani',sans-serif; flex-shrink:0; white-space:nowrap; }

.card-body{ padding: 0 14px 14px; }

.label{ font-family:'Rajdhani',sans-serif; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }

.handle-row{ display:flex; align-items:baseline; gap:6px; font-size:13px; padding:1px 0; }
.handle-row .dot{ margin-top:1px; }
.dot{ width:6px; height:6px; flex-shrink:0; }

.dot.active{ background: var(--green); border-radius:50%; }
.dot.yellow{ background: var(--yellow); transform: rotate(45deg); }
.dot.inactive{ background: var(--red); }

.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;
}


a.handle{
  color: var(--text); text-decoration:none; padding:6px 0; margin:-6px 0; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition: color .15s;
}
a.handle:hover{ color: var(--brand); }
.muted-line{ font-size:12.5px; color: var(--muted); font-style:italic; }
.sub-inactive{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:6px 0 3px; }
.last-post{ display:inline-flex; align-items:center; gap:3px; font-size:10.5px; color:var(--muted); margin-left:4px; flex-shrink:0; }
.last-post .clock-icon{ width:10px; height:10px; flex-shrink:0; }
.account-followers{
  display:inline-flex; align-items:center; gap:3px;
  font-family:'Rajdhani',sans-serif; font-weight:600; letter-spacing:.03em;
  font-size:11.5px; color: var(--muted);
}
.account-followers .followers-icon{ width:11px; height:11px; flex-shrink:0; }
.summary-line{ font-size:11.5px; color:var(--muted); margin-top:6px; }

.empty-state{
  text-align:center; padding: 60px 20px; color: var(--muted);
  font-family:'Rajdhani',sans-serif; font-size:18px; text-transform:uppercase; letter-spacing:.05em; display:none;
}


footer{
  width:100%; padding: 24px 24px 28px;
  background: rgba(var(--bg-rgb),0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(var(--line-rgb), 0.5);
}
footer a{ text-decoration:none; transition: color .15s; }

.footer-row{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 24px;
}


.footer-row-meta{ font-size:12.5px; color: var(--muted); }

.footer-row-meta a{
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent);
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}
.footer-row-meta a:hover{ color: var(--brand); text-decoration-color: var(--brand); }


.footer-legal{ margin-top:15px; font-size:11px; color: var(--muted); text-align:center; }

.legal-break{ display:none; }
@media (max-width:640px){
  .legal-break{ display:inline; }
}


.glass-panel{
  background: rgba(13,27,42,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.05);
  clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  padding: 2rem;
}
:root[data-theme="light"] .glass-panel{
  background: rgba(255,255,255,0.68);
  border-color: rgba(10,20,35,0.08);
}



.feedback-main .glass-panel{
  opacity:0; transform:translateY(14px);
  animation: cardIn .5s ease forwards;
}
@media (prefers-reduced-motion: reduce){
  .feedback-main .glass-panel{ animation:none; opacity:1; transform:none; }
}
.feedback-main{ max-width:640px; margin:0 auto; padding:36px 24px 90px; }
.feedback-main h1{
  font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase;
  font-size: clamp(24px,3.4vw,32px); margin:0 0 8px; letter-spacing:.02em;
}
.feedback-sub{ font-size:13.5px; color: var(--muted); margin:0 0 20px; }
.feedback-form textarea{
  width:100%; resize:vertical; min-height:110px;
  background: var(--surface); border:1px solid var(--line); color: var(--text);
  font-family:'Inter',sans-serif; font-size:13.5px; padding:12px 14px;
  outline:none; transition: border-color .15s;
}
.feedback-form textarea:focus{ border-color: var(--brand); }
.feedback-form textarea::placeholder{ color: var(--faint); }
.feedback-form textarea:disabled{ opacity:.5; cursor:not-allowed; }

.feedback-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.feedback-submit{
  display:block; margin:12px auto 0;
  font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:13px;
  background: rgba(var(--surface-rgb),0.4); border:1px solid var(--brand); color:var(--brand);
  padding:11px 26px; cursor:pointer;
  clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition: background-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.feedback-submit:hover{
  background: color-mix(in srgb, var(--brand) 20%, rgba(var(--surface-rgb),0.4));
  box-shadow: 0 0 16px color-mix(in srgb, var(--brand) 45%, transparent);
  transform: translateY(-1px);
}
.feedback-submit:disabled{
  opacity:.5; cursor:not-allowed;
  background: rgba(var(--surface-rgb),0.4); box-shadow:none; transform:none;
}

.feedback-note{ margin-top:12px; font-size:12.5px; color: var(--green); text-align:center; opacity:0; animation: chipIn .3s ease forwards; }
.feedback-note.error{ color: var(--red); }
.feedback-note.muted{ color: var(--muted); }
.feedback-note[hidden]{ display:none; }
@media (prefers-reduced-motion: reduce){ .feedback-note{ animation:none; opacity:1; } }


.feedback-section{ margin-top:40px; }
.feedback-section:first-of-type{ margin-top:32px; }
.feedback-section-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.feedback-section-head h2{
  font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; font-style:italic;
  font-size:19px; letter-spacing:.03em; margin:0; white-space:nowrap;
}
.feedback-section-head .rule{ flex:1; height:1px; background:var(--line); }
.feedback-text{ font-size:13.5px; line-height:1.6; color: var(--text); margin:0 0 12px; }
.feedback-text:last-child{ margin-bottom:0; }
.feedback-text a{ color:var(--orange); text-decoration:none; }
.feedback-text a:hover{ text-decoration:underline; }


.status-legend{ display:flex; flex-direction:column; gap:10px; }
.status-legend-row{ display:flex; align-items:baseline; gap:10px; font-size:13.5px; line-height:1.6; color: var(--text); }
.status-legend-row .dot{ width:10px; height:10px; margin-top:2px; }

.privacy-list{ margin:0 0 12px; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.privacy-list li{ font-size:13.5px; line-height:1.6; color: var(--text); }

.changelog{ margin-top:40px; }

.changelog-entry{ display:flex; align-items:center; gap:18px; padding:12px 0; border-bottom:1px solid var(--line); }
.changelog-entry:last-child{ border-bottom:none; }

.changelog-date{
  display:flex; align-items:center; gap:8px;
  flex:0 0 100px; font-family:'Rajdhani',sans-serif; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color: var(--muted);
}
.changelog-date::before{ content:"›"; color:var(--orange); font-weight:700; font-size:14px; }
.changelog-text{ font-size:13.5px; line-height:1.5; color: var(--text); }


.known-issues{
  border:1px solid color-mix(in srgb, var(--yellow) 35%, var(--line));
  background: color-mix(in srgb, var(--yellow) 6%, transparent);
  padding:16px 18px;
  clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.known-issues .feedback-section-head h2{ color: var(--yellow); }
.known-issue-entry{
  display:flex; align-items:flex-start; gap:14px; padding:10px 0;
  border-bottom:1px solid color-mix(in srgb, var(--yellow) 20%, var(--line));
}
.known-issue-entry:last-child{ border-bottom:none; }
.known-issue-date{
  flex:0 0 100px; font-family:'Rajdhani',sans-serif; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color: var(--muted); padding-top:1px;
}
.known-issue-text{ font-size:13.5px; line-height:1.5; color: var(--text); }

@media (max-width:480px){
  
  .changelog-entry{ align-items:flex-start; }
  .changelog-entry, .known-issue-entry{ flex-direction:column; gap:4px; }
  .changelog-date, .known-issue-date{ flex:none; }
}


.leaderboard-main{ max-width:820px; width:100%; margin:0 auto; padding:36px 24px 100px; }

.leaderboard-main .glass-panel{
  opacity:0; transform:translateY(14px);
  animation: cardIn .5s ease forwards;
  animation-delay: .1s;
}
@media (prefers-reduced-motion: reduce){
  .leaderboard-main .glass-panel{ animation:none; opacity:1; transform:none; }
}



.leaderboard-header{
  text-align:center; padding:56px 24px 0; margin-bottom:36px;
  opacity:0; transform:translateY(14px);
  animation: cardIn .5s ease forwards;
}
@media (prefers-reduced-motion: reduce){
  .leaderboard-header{ animation:none; opacity:1; transform:none; }
}

.leaderboard-header h1{
  font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase;
  font-size: clamp(34px,5vw,56px); margin:0 0 16px; letter-spacing:.02em;
}

.leaderboard-sub{
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-family:'Rajdhani',sans-serif; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  font-size:12px; color: rgba(255,255,255,0.65); margin:0;
}
.leaderboard-sub .clock-icon{ width:13px; height:13px; flex-shrink:0; }
:root[data-theme="light"] .leaderboard-sub{ color: rgba(20,26,38,0.6); }


.lb-controls-row{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.lb-filters{ display:flex; gap:8px; }




.lb-search-wrap{ position:relative; width:220px; flex-shrink:0; opacity:0; animation: chipIn .3s ease forwards; animation-delay: .40s; }
@media (prefers-reduced-motion: reduce){ .lb-search-wrap{ animation:none; opacity:1; } }
.lb-search-wrap svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:14px; height:14px; stroke: var(--faint); pointer-events:none; }
#lb-search{
  width:100%;
  background: rgba(var(--surface-rgb),0.4);
  color: var(--text);
  font-family:'Inter',sans-serif;
  font-size:13px;
  padding: 6px 14px 6px 36px;
  border: 1px solid var(--line);
  clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  outline:none;
  transition: border-color .15s, box-shadow .15s;
}
#lb-search:focus{ border-color: rgba(0,100,255,.4); box-shadow: 0 0 8px rgba(0,100,255,.2); }
#lb-search::placeholder{ color: var(--faint); }


@media (max-width:700px){
  .lb-controls-row{ flex-direction:column; align-items:stretch; gap:12px; }
  .lb-controls-row .filter-divider{ display:none; }
  
  .lb-filters .chip{ flex:1; }
  
  .lb-search-wrap{ order:-1; width:100%; animation-delay: .25s; }
  
  #lb-search{
    font-size:14px; padding:12px 16px 12px 42px;
    clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  }
  .lb-search-wrap svg{ left:16px; width:16px; height:16px; }
}




.lb-podium{ display:flex; align-items:flex-end; justify-content:center; gap:40px; padding-top:150px; padding-bottom:28px; margin-bottom:32px; border-bottom:1px solid var(--line); }
.lb-podium[hidden]{ display:none; }


.lb-podium-card-wrap{
  position:relative; display:flex; flex-direction:column; align-items:center;
  width:180px; text-decoration:none;
  opacity:0; transform:translateY(14px);
  animation: cardIn .45s ease forwards;
  animation-delay: var(--d, 0s);
  transition: transform .15s;
}

.lb-podium-stretch{ position:absolute; inset:0; z-index:1; }
.lb-podium-avatar, .lb-podium-card{ pointer-events:none; }
.lb-podium-handle{ pointer-events:auto; position:relative; z-index:2; }
.lb-podium-card-wrap:hover{ transform: translateY(-3px); }
.lb-podium-card-wrap:hover .lb-podium-card{ border-color: var(--brand); }
@media (prefers-reduced-motion: reduce){
  .lb-podium-card-wrap{ animation:none; opacity:1; transform:none; }
  .lb-podium-card-wrap:hover{ transform:none; }
}
.lb-podium-card-wrap.medal-gold{ order:0; width:220px; }
.lb-podium-card-wrap.medal-silver{ order:-1; }
.lb-podium-card-wrap.medal-bronze{ order:1; }


.lb-podium-avatar{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:210px; height:210px; border-radius:50%; overflow:hidden;
  background: linear-gradient(160deg,var(--portrait-a),var(--portrait-b));
  border:3px solid var(--bg);
  display:flex; align-items:center; justify-content:center;
}

.lb-podium-card-wrap.medal-gold .lb-podium-avatar{ width:260px; height:260px; border-width:4px; border-color: var(--yellow); }
.lb-podium-card-wrap.medal-silver .lb-podium-avatar{ border-color: var(--rank-silver); }
.lb-podium-card-wrap.medal-bronze .lb-podium-avatar{ border-color: var(--rank-bronze); }
.lb-podium-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lb-podium-avatar .initial{
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:54px;
  color: color-mix(in srgb, var(--text) 15%, transparent);
}
.lb-podium-card-wrap.medal-gold .lb-podium-avatar .initial{ font-size:68px; }


.lb-podium-card{
  position:relative; z-index:1; width:100%; display:flex; flex-direction:column;
  text-align:center; overflow:hidden;
  background: var(--surface);
  border:1px solid var(--line);
  clip-path: polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  transition: border-color .15s, box-shadow .15s;
}

.lb-podium-image{ position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; }
.lb-podium-sil{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; opacity:.94;
  pointer-events:none; z-index:0;
}
.lb-podium-card.status-inactive{ background: color-mix(in srgb, var(--red) 18%, var(--surface)); }
.lb-podium-card.status-yellow{ background: color-mix(in srgb, var(--yellow) 18%, var(--surface)); }
.lb-podium-card.medal-gold:not(.status-inactive):not(.status-yellow){
  background: linear-gradient(160deg, color-mix(in srgb, var(--yellow) 14%, var(--surface)), var(--surface) 70%);
}
.lb-podium-card.medal-silver:not(.status-inactive):not(.status-yellow){
  background: linear-gradient(160deg, color-mix(in srgb, var(--rank-silver) 11%, var(--surface)), var(--surface) 70%);
}
.lb-podium-card.medal-bronze:not(.status-inactive):not(.status-yellow){
  background: linear-gradient(160deg, color-mix(in srgb, var(--rank-bronze) 11%, var(--surface)), var(--surface) 70%);
}
.lb-podium-card.medal-gold{
  border-color: var(--yellow);
  box-shadow: 0 0 28px color-mix(in srgb, var(--yellow) 30%, transparent);
}
.lb-podium-card.medal-silver{
  border-color: var(--rank-silver);
  box-shadow: 0 0 16px color-mix(in srgb, var(--rank-silver) 20%, transparent);
}
.lb-podium-card.medal-bronze{
  border-color: var(--rank-bronze);
  box-shadow: 0 0 16px color-mix(in srgb, var(--rank-bronze) 20%, transparent);
}


.lb-podium-rank{
  position:absolute; left:10px; bottom:10px; z-index:1;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:17px; line-height:1;
  text-shadow: 0 1px 4px rgba(0,0,0,.7), 0 0 12px rgba(0,0,0,.5);
  color:#fff;
}
.lb-podium-card.medal-gold .lb-podium-rank{ font-size:22px; color: var(--yellow); text-shadow: 0 1px 4px rgba(0,0,0,.7), 0 0 12px color-mix(in srgb, var(--yellow) 60%, transparent); }
.lb-podium-card.medal-silver .lb-podium-rank{ color: var(--rank-silver); text-shadow: 0 1px 4px rgba(0,0,0,.7), 0 0 10px color-mix(in srgb, var(--rank-silver) 45%, transparent); }
.lb-podium-card.medal-bronze .lb-podium-rank{ color: var(--rank-bronze); text-shadow: 0 1px 4px rgba(0,0,0,.7), 0 0 10px color-mix(in srgb, var(--rank-bronze) 45%, transparent); }
.lb-podium-rank .lb-gutter-rank-all{ font-size:9px; }


.lb-podium-body{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  padding:118px 10px 20px; gap:8px;
}
.lb-podium-card.medal-gold .lb-podium-body{ padding:146px 10px 26px; gap:8px; }


.lb-podium-name{
  font-family:'Rajdhani',sans-serif; font-weight:600; text-transform:uppercase;
  font-size:11.5px; letter-spacing:.04em; color: var(--muted);
}
.lb-podium-card.medal-gold .lb-podium-name{ font-size:13px; }


.lb-podium-handle{
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:17px; letter-spacing:.01em;
  color: var(--text); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
  transition: color .15s;
}
.lb-podium-card.medal-gold .lb-podium-handle{ font-size:21px; color: var(--yellow); }
.lb-podium-card.medal-silver .lb-podium-handle{ color: var(--rank-silver); }
.lb-podium-card.medal-bronze .lb-podium-handle{ color: var(--rank-bronze); }
.lb-podium-handle:hover{ color: var(--brand); }
.lb-podium-count{
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:21px; color: var(--text); letter-spacing:.02em;
}
.lb-podium-card.medal-gold .lb-podium-count{ font-size:27px; }


.lb-list{ display:flex; flex-direction:column; gap:30px; }


.lb-row{
  display:flex; align-items:center; gap:60px;
  width:100%;
  opacity:0; transform:translateY(10px);
  animation: cardIn .4s ease forwards;
  animation-delay: var(--d, 0s);
}
@media (prefers-reduced-motion: reduce){ .lb-row{ animation:none; opacity:1; transform:none; } }


.lb-gutter-rank{
  flex-shrink:0; width:52px; text-align:center;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:27px; line-height:1;
  color: var(--muted);
}
.lb-gutter-rank-all{
  display:block; margin-top:4px;
  font-family:'Rajdhani',sans-serif; font-weight:600; font-size:10px; letter-spacing:.02em;
  color: var(--muted);
}

.lb-gutter-rank.medal-gold{ color: var(--yellow); text-shadow: 0 0 10px color-mix(in srgb, var(--yellow) 45%, transparent); }
.lb-gutter-rank.medal-silver{ color: var(--rank-silver); text-shadow: 0 0 8px color-mix(in srgb, var(--rank-silver) 35%, transparent); }
.lb-gutter-rank.medal-bronze{ color: var(--rank-bronze); text-shadow: 0 0 8px color-mix(in srgb, var(--rank-bronze) 35%, transparent); }

.lb-gutter-spacer{ display:none; }

.lb-card{ position:relative; display:block; flex:1; min-width:0; text-decoration:none; }

.lb-card-stretch{ position:absolute; inset:0; z-index:1; }

.lb-card-avatar, .lb-card-body{ pointer-events:none; }
.lb-handle{ pointer-events:auto; }
.lb-handle-row{ position:relative; z-index:2; }

.lb-card-body{
  position:relative; z-index:1; display:flex; align-items:center; gap:10px;
  
  min-height:76px; padding:12px 96px 12px 88px;
  background: var(--surface);
  border:1px solid var(--line);
  overflow:hidden;
  clip-path: polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  transition: border-color .15s, box-shadow .15s, min-height .15s;
}

.lb-card:hover .lb-card-body{ border-color: var(--brand); }

.lb-card-body.status-inactive{ background: color-mix(in srgb, var(--red) 18%, var(--surface)); }
.lb-card-body.status-yellow{ background: color-mix(in srgb, var(--yellow) 18%, var(--surface)); }


.lb-card-sil{
  position:absolute; right:0; bottom:0; width:74px; height:74px;
  object-fit:contain; object-position:bottom right;
  pointer-events:none; transition: width .15s, height .15s;
}




.lb-card.medal-gold .lb-card-body{ border-color: var(--yellow); box-shadow: 0 0 14px color-mix(in srgb, var(--yellow) 22%, transparent); }
.lb-card.medal-silver .lb-card-body{ border-color: var(--rank-silver); box-shadow: 0 0 10px color-mix(in srgb, var(--rank-silver) 18%, transparent); }
.lb-card.medal-bronze .lb-card-body{ border-color: var(--rank-bronze); box-shadow: 0 0 10px color-mix(in srgb, var(--rank-bronze) 18%, transparent); }
.lb-card.medal-gold .lb-card-body:not(.status-inactive):not(.status-yellow){ background: linear-gradient(100deg, color-mix(in srgb, var(--yellow) 12%, var(--surface)), var(--surface) 65%); }
.lb-card.medal-silver .lb-card-body:not(.status-inactive):not(.status-yellow){ background: linear-gradient(100deg, color-mix(in srgb, var(--rank-silver) 10%, var(--surface)), var(--surface) 65%); }
.lb-card.medal-bronze .lb-card-body:not(.status-inactive):not(.status-yellow){ background: linear-gradient(100deg, color-mix(in srgb, var(--rank-bronze) 10%, var(--surface)), var(--surface) 65%); }
.lb-card.medal-gold .lb-handle{ color: var(--yellow); }
.lb-card.medal-silver .lb-handle{ color: var(--rank-silver); }
.lb-card.medal-bronze .lb-handle{ color: var(--rank-bronze); }


.lb-card-avatar{
  position:absolute; top:50%; left:0; transform:translate(-32%, -50%); z-index:2;
  width:96px; height:96px; border-radius:50%; overflow:hidden;
  background: linear-gradient(160deg,var(--portrait-a),var(--portrait-b));
  border:3px solid var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition: width .15s, height .15s;
}
.lb-card-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lb-card-avatar .initial{
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:24px;
  color: color-mix(in srgb, var(--text) 15%, transparent);
}


.lb-card-info{ position:relative; z-index:1; flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; }

.lb-handle-row{ display:flex; align-items:center; gap:6px; }
.lb-handle{
  font-size:14px; font-weight:600; color: var(--text); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition: color .15s;
}
.lb-handle:hover{ color: var(--brand); }

.lb-card-lastpost{ display:flex; align-items:center; font-size:11.5px; color: var(--muted); }



.lb-card-hero-name{
  position:relative; z-index:1; flex:0 0 116px; width:116px; text-align:center;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-style:italic; text-transform:uppercase;
  font-size:16px; letter-spacing:.02em; color: var(--text);
}


.lb-card-count{
  position:relative; z-index:1; flex:0 0 62px; width:62px; text-align:center;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:19px; color: var(--text);
  letter-spacing:.02em;
}



@media (max-width:700px){
  
  .leaderboard-main{ padding-left:12px; padding-right:12px; }
  .leaderboard-header{ padding-left:12px; padding-right:12px; }
  
  .lb-list{ gap:14px; }
  .lb-row{ gap:16px; }
  .lb-gutter-rank{ width:26px; font-size:15px; margin-right:18px; }
  .lb-gutter-rank-all{ font-size:9px; }
  .lb-gutter-spacer{ display:none; }
  
  .lb-card-body{ min-height:52px; padding:8px 60px 8px 50px; gap:8px; }
  .lb-card-avatar{ width:56px; height:56px; border-width:2px; }
  .lb-card-avatar .initial{ font-size:16px; }
  .lb-card-sil{ width:50px; height:50px; }
  .lb-handle{ font-size:12.5px; }
  .lb-card-lastpost{ font-size:10px; }
  
  .lb-card-hero-name{ display:none; }
  .lb-card-info{ flex:1; }
  
  .lb-card-count{ font-size:15px; flex:0 0 auto; width:auto; }
  
  
  .lb-podium{ flex-direction:column; align-items:stretch; gap:10px; padding-top:0; margin-bottom:20px; }
  
  .lb-podium-card-wrap{ display:block; order:0 !important; width:auto; }
  
  .lb-podium-card-wrap.medal-gold{ width:auto; }
  
  .lb-podium-avatar{
    position:absolute; top:50%; left:0; transform:translate(-32%,-50%); z-index:2;
    width:60px; height:60px; border-width:2px;
  }
  .lb-podium-card-wrap.medal-gold .lb-podium-avatar{ width:60px; height:60px; border-width:2px; }
  .lb-podium-card{
    width:100%; text-align:left;
    display:grid; grid-template-columns:20px 1fr auto; grid-template-rows:auto auto;
    align-items:center; column-gap:10px; row-gap:1px;
    padding:10px 14px 10px 52px;
  }
  .lb-podium-card.medal-gold{ padding-top:10px; padding-bottom:10px; }
  
  .lb-podium-image, .lb-podium-body{ display:contents; }
  .lb-podium-sil{ object-position:right center; opacity:.16; }
  
  .lb-podium-rank{ position:static; grid-row:1/3; grid-column:1; text-align:center; font-size:12px; text-shadow:none; }
  .lb-podium-card.medal-gold .lb-podium-rank{ font-size:12px; }
  .lb-podium-rank .lb-gutter-rank-all{ display:none; }
  
  .lb-podium-handle{ grid-row:1; grid-column:2; font-size:14px; max-width:none; }
  .lb-podium-card.medal-gold .lb-podium-handle{ font-size:14px; }
  .lb-podium-name{ grid-row:2; grid-column:2; font-size:10.5px; }
  .lb-podium-card.medal-gold .lb-podium-name{ font-size:10.5px; }
  .lb-podium-lastpost{ display:none; }
  .lb-podium-count{ grid-row:1/3; grid-column:3; font-size:16px; }
  .lb-podium-card.medal-gold .lb-podium-count{ font-size:16px; }
}


.birthdays-main{ max-width:980px; width:100%; margin:0 auto; padding:56px 24px 100px; }



.birthdays-h1{
  font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase;
  font-size: clamp(34px,5vw,56px); margin:0 0 36px; letter-spacing:.02em;
  text-align:center;
  opacity:0; transform:translateY(14px);
  animation: cardIn .5s ease forwards;
}
@media (prefers-reduced-motion: reduce){
  .birthdays-h1{ animation:none; opacity:1; transform:none; }
}


.birthdays-layout{ display:flex; gap:24px; align-items:stretch; }
.birthdays-left{ flex:0 0 280px; display:flex; flex-direction:column; gap:16px; }
.birthday-calendar{ flex:1; min-width:0; }

.birthdays-left .birthday-summary-card:last-child{ flex:1; display:flex; flex-direction:column; }



.birthday-summary-card{
  padding:16px;
  opacity:0; transform:translateY(14px);
  animation: cardIn .45s ease forwards;
}
.birthdays-left .birthday-summary-card:nth-child(2){ animation-delay: .07s; }
.birthdays-left .birthday-summary-card:nth-child(3){ animation-delay: .14s; }

.birthday-calendar{
  opacity:0; transform:translateY(14px);
  animation: cardIn .45s ease forwards;
  animation-delay: .1s;
}
@media (prefers-reduced-motion: reduce){
  .birthday-summary-card, .birthday-calendar{ animation:none; opacity:1; transform:none; }
}
.birthday-summary-label{
  font-family:'Rajdhani',sans-serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:12px;
}
.birthday-entry{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);
  font-family:'Rajdhani',sans-serif; font-weight:600; font-size:14.5px;
  padding:4px 0; transition: color .15s;
}
.birthday-entry:hover{ color:var(--brand); }

.birthday-summary-card.has-birthday-today{ border-color: var(--yellow); }
.birthday-today-entry{
  display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--text);
  padding:6px 0; transition: color .15s;
}
.birthday-today-entry + .birthday-today-entry{ margin-top:6px; }
.birthday-today-entry:hover .birthday-today-name{ color:var(--yellow); }

.birthday-avatar-today{ width:52px; height:52px; border-width:2px; border-color:var(--yellow); }
.birthday-today-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.birthday-today-label{
  font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  font-size:10.5px; color:var(--yellow);
}
.birthday-today-name{
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:19px; color:var(--text);
  transition: color .15s; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.birthday-next-date{
  font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  font-size:13px; color:var(--muted); margin-bottom:8px;
}

.upcoming-group + .upcoming-group{ margin-top:14px; }


.birthday-avatar{
  position:relative; display:block; flex-shrink:0; width:34px; height:34px;
  border-radius:50%; overflow:hidden; text-decoration:none;
  background: linear-gradient(160deg,var(--portrait-a),var(--portrait-b));
  border:2px solid var(--line);
}
.birthday-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.birthday-avatar .initial{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:12px;
  color: color-mix(in srgb, var(--text) 15%, transparent);
}

.birthday-calendar{ position:relative; }

.calendar-today-btn{
  flex-shrink:0;
  font-family:'Rajdhani',sans-serif; font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-size:10.5px;
  background: rgba(var(--surface-rgb),0.4); border:1px solid var(--line); color:var(--muted);
  padding:5px 10px; cursor:pointer;
  clip-path: polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);
  transition: color .15s, border-color .15s;
}
.calendar-today-btn:hover{ color:var(--text); border-color:var(--faint); }
.calendar-today-btn.is-invisible{ visibility:hidden; pointer-events:none; }


.calendar-header{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin-bottom:16px; }
.calendar-header-side{ display:flex; align-items:center; gap:10px; }
.calendar-header-left{ justify-content:flex-start; }
.calendar-header-right{ justify-content:flex-end; }
.calendar-nav-btn{
  display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0;
  background: rgba(var(--surface-rgb),0.4); border:1px solid var(--line); color:var(--muted);
  cursor:pointer; padding:0;
  clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  transition: color .15s, border-color .15s;
}
.calendar-nav-btn:hover{ color:var(--text); border-color:var(--faint); }
.calendar-nav-btn svg{ width:16px; height:16px; }


.calendar-month-picker{ position:relative; display:flex; justify-content:center; min-width:0; }
.calendar-month-btn{
  display:flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; padding:4px 8px;
}

.calendar-month-btn-text{ display:flex; flex-direction:column; align-items:center; gap:1px; }
.calendar-month-btn h2{
  font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; font-style:italic;
  font-size:19px; letter-spacing:.03em; margin:0; color:var(--text);
}
.calendar-month-count{ font-size:10.5px; color:var(--muted); white-space:nowrap; }
.calendar-month-btn .chevron-icon{ width:14px; height:14px; color:var(--faint); transition:transform .15s ease; flex-shrink:0; }
.calendar-month-btn.open .chevron-icon{ transform:rotate(180deg); }

.calendar-month-dropdown[hidden]{ display:none; }

.calendar-month-dropdown{
  position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); z-index:10;
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:min(320px,90vw);
  background: rgba(13,27,42,0.95); backdrop-filter: blur(8px); border:1px solid var(--line); padding:10px;
  box-shadow: 0 16px 32px -12px rgba(0,0,0,0.6), 0 0 0 1px rgba(var(--bg-rgb),0.4);
  clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
:root[data-theme="light"] .calendar-month-dropdown{ background: rgba(255,255,255,0.95); }
.calendar-month-option{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:none; border:1px solid transparent; cursor:pointer; padding:8px 4px;
  font-family:'Rajdhani',sans-serif; font-weight:600; font-size:12.5px; color:var(--muted);
  clip-path: polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);
  transition: all .15s;
}

.calendar-month-option-name{ text-transform:capitalize; }
.calendar-month-option:hover{ color:var(--text); border-color:var(--line); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.calendar-month-option.active{
  background:var(--brand); color:#0a0d12;
  box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 55%, transparent);
}
.calendar-month-option-count{ font-size:10px; color:inherit; opacity:.7; }

.calendar-weekdays{
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px;
  font-family:'Rajdhani',sans-serif; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); text-align:center;
}

.calendar-viewport{ overflow:hidden; }

.calendar-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px;
}
.calendar-day{
  position:relative; aspect-ratio:1/1; background:var(--surface); border:1px solid var(--line);
  padding:4px; display:flex; flex-direction:column; align-items:center; gap:6px; overflow:hidden;
}
.calendar-day.empty{ background:none; border-color:transparent; }

.calendar-day.other-month{ background: rgba(var(--surface-rgb), 0.5); border-color:transparent; }
.calendar-day.other-month.has-birthday{ background: rgba(var(--surface-rgb), 0.75); }

.calendar-day-num{ font-family:'Rajdhani',sans-serif; font-size:12px; color:var(--muted); }
.calendar-day.has-birthday .calendar-day-num{ color:var(--text); font-weight:600; }

.calendar-day.today{ border-color:var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.calendar-day.today .calendar-day-num{ color:var(--brand); font-weight:700; }

.calendar-day.leap-day{ border-style:dashed; }

.calendar-day-avatars{ display:flex; flex-wrap:wrap; justify-content:center; align-content:center; flex:1; min-height:0; }
.calendar-day-avatars .birthday-avatar{ width:28px; height:28px; border-width:1px; }
.calendar-day-avatars .birthday-avatar .initial{ font-size:11px; }
.calendar-day-avatars .birthday-avatar + .birthday-avatar{ margin-left:-10px; }

@media (max-width:760px){
  .birthdays-layout{ flex-direction:column; }
  .birthdays-left{ flex:none; width:100%; flex-direction:row; flex-wrap:wrap; }
  .birthday-summary-card{ flex:1 1 200px; }
  
  .birthdays-left .birthday-summary-card:last-child{ flex:1 1 200px; }
}
@media (max-width:520px){
  .birthdays-main{ padding-left:12px; padding-right:12px; }
  .birthdays-left{ gap:10px; }
  .birthday-summary-card{ flex:1 1 140px; padding:12px; }
  .calendar-day{ padding:2px; gap:3px; }
  .calendar-day-num{ font-size:10px; }
  .calendar-day-avatars .birthday-avatar{ width:20px; height:20px; }
  .calendar-day-avatars .birthday-avatar .initial{ font-size:9px; }
  .calendar-day-avatars .birthday-avatar + .birthday-avatar{ margin-left:-7px; }
  .calendar-weekdays{ font-size:9px; }
  .calendar-month-btn h2{ font-size:16px; }
  .calendar-month-count{ display:none; }
}



.home-main{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:48px; text-align:center; padding:48px 24px;
}

.home-hero{
  max-width:520px;
  opacity:0; transform:translateY(14px);
  animation: cardIn .5s ease forwards;
}
@media (prefers-reduced-motion: reduce){
  .home-hero{ animation:none; opacity:1; transform:none; }
}

.home-logo{ width:100%; max-width:460px; height:auto; margin:0 auto 36px; display:block; }


.home-cta{
  position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; text-decoration:none;
  padding:22px 52px; border:2px solid var(--orange);
  background: color-mix(in srgb, var(--orange) 16%, var(--bg));
  clip-path: polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  transition: transform .2s ease, background .25s ease, box-shadow .25s ease;
}
.home-cta::before{
  content:""; position:absolute; inset:0; background:var(--orange); transform:translateX(-100%);
  transition: transform .3s ease; z-index:0;
}
.home-cta span{
  position:relative; z-index:1; display:block;
  font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  font-size:16px; color:var(--orange);
  transition: color .25s ease;
}
.home-cta-arrow{ position:relative; z-index:1; font-size:18px; color:var(--orange); transition: color .25s ease, transform .25s ease; }
.home-cta:hover{ transform: translateY(-2px); box-shadow: 0 0 24px color-mix(in srgb, var(--orange) 45%, transparent); }
.home-cta:hover::before{ transform:translateX(0); }
.home-cta:hover span{ color:#0a0d12; }
.home-cta:hover .home-cta-arrow{ transform: translateX(4px); }

.home-cards{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; width:100%; max-width:1080px; }

.home-card{
  flex:1 1 320px; text-align:left; display:flex; flex-direction:column;
  opacity:0; transform:translateY(14px);
  animation: cardIn .45s ease forwards;
  animation-delay: .15s;
}
.home-cards .home-card:nth-child(2){ animation-delay: .22s; }
.home-cards .home-card:nth-child(3){ animation-delay: .29s; }
@media (prefers-reduced-motion: reduce){
  .home-card{ animation:none; opacity:1; transform:none; }
}

.home-card-title{
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; font-style:italic;
  font-size:16px; letter-spacing:.03em; margin:0 0 16px; padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

.aotd-resets{
  display:inline-flex; align-items:center; gap:3px;
  font-size:10px; letter-spacing:.04em; text-transform:none; font-style:normal; font-weight:600;
  color:var(--muted); white-space:nowrap;
}
.aotd-resets .refresh-icon{ width:10px; height:10px; flex-shrink:0; }
.home-card-subtitle{
  font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:11px; letter-spacing:.08em; color:var(--muted);
  margin:16px 0 10px; padding-top:14px; border-top:1px solid var(--line);
}
.home-card-blurb{ font-size:13px; line-height:1.5; color:var(--muted); margin:0; }
.home-card-blurb a{ color:var(--orange); text-decoration:none; }
.home-card-blurb a:hover{ text-decoration:underline; }

.home-card-link-wrap{ margin-top:auto; padding-top:24px; }
.home-card-link{
  display:inline-block;
  font-family:'Rajdhani',sans-serif; font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--orange); text-decoration:none; transition: color .15s;
}
.home-card-link:hover{ color:var(--text); }

.aotd-placeholder{ text-align:center; padding:8px 0 4px; }

.aotd-avatar{
  position:relative; display:block; width:64px; height:64px; margin:0 auto 12px;
  border-radius:50%; overflow:hidden; text-decoration:none;
  background: linear-gradient(160deg,var(--portrait-a),var(--portrait-b));
  border:2px solid var(--line);
}
.aotd-avatar .initial{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:22px;
  color: color-mix(in srgb, var(--text) 15%, transparent);
}
.aotd-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.aotd-handle{
  display:block; font-family:'Rajdhani',sans-serif; font-weight:600; font-size:16px;
  color:var(--text); text-decoration:none; margin:0 0 4px; transition: color .15s;
}
.aotd-handle:hover{ color:var(--brand); }

.aotd-count{ font-size:12px; color:var(--muted); margin:0 0 6px; }
.aotd-name{
  display:block; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; transition: color .15s;
}
.aotd-name:hover{ color:var(--text); }

.home-followed-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }

.home-followed-row{
  display:flex; align-items:center; gap:8px;
  text-decoration:none; color:var(--text); font-size:13px; padding:3px 0; transition: color .15s;
}
.home-followed-row:hover{ color:var(--brand); }
.home-followed-rank{
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:11px;
  color:var(--muted); flex-shrink:0; width:16px;
}
.home-followed-name{ font-family:'Rajdhani',sans-serif; font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-followed-count{ font-size:12px; color:var(--muted); flex-shrink:0; }

.home-updates-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.home-updates-list li{ position:relative; padding-left:16px; font-size:13px; line-height:1.5; color:var(--text); }
.home-updates-list li::before{ content:"›"; position:absolute; left:0; color:var(--orange); font-weight:700; }
.home-updates-date{
  display:block; font-family:'Rajdhani',sans-serif; font-weight:600; font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}

.home-birthday-group + .home-birthday-group{ margin-top:14px; }


.not-found-main{ display:flex; align-items:center; justify-content:center; min-height:55vh; padding:60px 24px; }
.not-found{
  text-align:center; max-width:420px;
  opacity:0; transform:translateY(14px);
  animation: cardIn .5s ease forwards;
}
@media (prefers-reduced-motion: reduce){
  .not-found{ animation:none; opacity:1; transform:none; }
}
.not-found-code{
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:96px; line-height:1;
  letter-spacing:.04em; color: color-mix(in srgb, var(--text) 10%, transparent);
  margin:0 0 6px;
}
.not-found h1{
  font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; font-style:italic;
  font-size:22px; letter-spacing:.02em; margin:0 0 10px;
}
.not-found p{ color: var(--muted); font-size:14px; line-height:1.5; margin:0 0 22px; }
.not-found-btn{
  display:inline-block; font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:13px;
  background: var(--orange); border:1px solid var(--orange); color:#0a0d12;
  padding:11px 26px; text-decoration:none; cursor:pointer;
  clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition: opacity .15s;
}
.not-found-btn:hover{ opacity:.88; }


.hero-page-main{ max-width:900px; margin:0 auto; padding:32px 24px 90px; }
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Rajdhani',sans-serif; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  font-size:12.5px; color:var(--muted); text-decoration:none; margin-bottom:26px;
  background: rgba(var(--surface-rgb),0.4); border:1px solid var(--line);
  padding:7px 14px 7px 11px; cursor:pointer;
  clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  transition: color .15s, border-color .15s, background-color .15s;
}
.back-link:hover{ color:var(--text); border-color:var(--faint); background: color-mix(in srgb, var(--brand) 15%, rgba(var(--surface-rgb),0.4)); }
.back-link svg{ width:14px; height:14px; }

.hero-layout{ display:flex; gap:40px; align-items:flex-start; }

.hero-left{
  flex:0 0 320px; position:sticky; top:90px;
  opacity:0; transform:translateY(14px);
  animation: cardIn .5s ease forwards;
}
@media (prefers-reduced-motion: reduce){
  .hero-left{ animation:none; opacity:1; transform:none; }
}
.hero-portrait-large{
  
  position:relative; width:100%; aspect-ratio:368/500; overflow:hidden;
  background: linear-gradient(160deg,var(--portrait-a),var(--portrait-b));
  clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
}
.hero-portrait-large img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:bottom center; }
.hero-portrait-large.square-fallback{ aspect-ratio:1/1; }
.hero-portrait-large.square-fallback img{ object-fit:cover; object-position:center; }
.hero-portrait-large .initial{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:64px;
  color: color-mix(in srgb, var(--text) 10%, transparent);
}
.hero-title-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hero-left h1{
  font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase;
  font-size: clamp(24px,3vw,32px); margin:0; letter-spacing:.02em; line-height:1.05;
}
.hero-banner-role{
  display:inline-flex; align-items:center; gap:4px;
  font-family:'Rajdhani',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  font-size:11.5px; color:var(--muted);
}
.hero-banner-role .role-icon-badge{ width:14px; height:14px; padding:2px; flex-shrink:0; }


.hero-title-panel{ margin-top:18px; }
.hero-info-panel{ margin-top:18px; }
.hero-info-panel .hero-bio{ margin-top:0; }
.hero-bio{ margin:14px 0 0; font-size:14px; line-height:1.6; color:var(--text); }
.hero-bio.placeholder{ color:var(--muted); font-style:italic; }

.hero-meta{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.hero-meta-row{ display:flex; gap:8px; font-size:12.5px; padding:3px 0; }
.hero-meta-label{
  font-family:'Rajdhani',sans-serif; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); flex:0 0 100px;
}

.hero-meta-value{ color:var(--text); display:inline-flex; flex-wrap:wrap; align-items:center; row-gap:5px; column-gap:8px; }

.hero-meta-item{ flex-basis:100%; }
.hero-sources{ margin-top:10px; font-size:11.5px; color:var(--muted); }
.hero-sources a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; transition:color .15s; }
.hero-sources a:hover{ color:var(--brand); }
.va-link{
  display:inline-flex; align-items:center; gap:4px;
  font-family:'Rajdhani',sans-serif; font-weight:600; letter-spacing:.03em; font-size:11.5px;
  color:var(--brand); text-decoration:none; border:1px solid var(--line); padding:2px 8px;
  clip-path: polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);
  transition: all .15s;
}
.va-link:hover{ color:var(--text); border-color:var(--faint); }
.va-link .twitter-icon{ width:11px; height:11px; }

.hero-right{
  flex:1; min-width:0;
  opacity:0; transform:translateY(14px);
  animation: cardIn .5s ease forwards;
  animation-delay: .1s;
}
@media (prefers-reduced-motion: reduce){
  .hero-right{ animation:none; opacity:1; transform:none; }
}

@media (max-width:760px){
  .hero-layout{ flex-direction:column; gap:18px; }
  .hero-left{ position:static; flex:none; width:100%; }
  .hero-right{ width:100%; }
  
  .hero-header{ display:flex; flex-direction:row; align-items:center; gap:14px; }
  .hero-portrait-large{ width:84px; flex:0 0 84px;
    clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  }
  .hero-portrait-large .initial{ font-size:26px; }
  .hero-title-panel{ flex:1; min-width:0; margin-top:0; }
}


.hero-info-toggle{ display:none; }
@media (max-width:760px){
  .hero-info-toggle{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    background:none; border:none; padding:0; cursor:pointer;
    font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase;
    letter-spacing:.05em; font-size:13px; color:var(--text);
  }
  .hero-info-toggle .chevron-icon{ width:16px; height:16px; flex-shrink:0; transition:transform .2s ease; }
  .hero-info-toggle.open .chevron-icon{ transform:rotate(180deg); }
  
  .hero-info-content{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .3s ease, margin-top .3s ease; }
  .hero-info-content.open{ grid-template-rows:1fr; margin-top:14px; }
  .hero-info-content-inner{ overflow:hidden; min-height:0; }
}

.hero-section{ margin-top:46px; }
.hero-right .hero-section:first-child{ margin-top:0; }
.hero-section-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:6px; }
.hero-section-head h2{
  font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; font-style:italic;
  font-size:17px; letter-spacing:.03em; margin:0; white-space:nowrap;
}
.hero-section-head .rule{ flex:1; height:1px; background:var(--line); }
.hero-section-desc{ font-size:12.5px; color:var(--muted); margin-bottom:14px; }
.hero-subhead{
  font-family:'Rajdhani',sans-serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:16px 0 8px;
}



.account-card{
  background:var(--surface); border:1px solid var(--line); padding:12px 14px; margin-bottom:8px;
  display:flex; flex-direction:column; gap:10px;
  opacity:0; transform:translateY(10px);
  animation: cardIn .4s ease forwards;
  animation-delay: var(--d, 0s);
}
@media (prefers-reduced-motion: reduce){
  .account-card{ animation:none; opacity:1; transform:none; }
}
.account-id{ display:flex; align-items:center; gap:8px; row-gap:6px; font-size:14px; flex-wrap:wrap; }

.account-id .last-post{ margin-left:0; }
.embed-btn{
  font-family:'Rajdhani',sans-serif; font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-size:11.5px;
  background:none; border:1px solid var(--line); color:var(--muted); padding:5px 12px; cursor:pointer; width:100%;
  clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
  transition: all .15s;
}
.embed-btn:hover{ color:var(--text); border-color:var(--faint); }

.embed-wrap{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .35s ease, margin-top .35s ease; }
.embed-wrap.open{ grid-template-rows:1fr; margin-top:12px; }
.embed-wrap-inner{ overflow:hidden; min-height:0; }
.embed-loading, .embed-fallback{ font-size:12.5px; color:var(--muted); padding:14px 2px; }
.embed-fallback a{ color:var(--brand); margin-left:6px; }
.section-empty{ font-size:13px; color:var(--muted); font-style:italic; }