.auth-mount{
  position:fixed;
  z-index:80;
  top:18px;
  right:18px;
}

.account-button{
  height:56px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:15px;
  padding:0 16px;
  background:rgba(19,20,23,.88);
  color:#ececee;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  cursor:pointer;
  font:600 13px/1 "SF Pro Display Local","SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease;
}
.account-button:hover{background:rgba(29,31,35,.94);border-color:rgba(255,255,255,.13);transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,0,0,.2)}
.account-button img{width:27px;height:27px;border-radius:50%;object-fit:cover}
.account-button.backend-needed{color:#9a9da3}
.google-dot{width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:#f3f3f3;color:#222;font-weight:750}
.account-avatar-fallback{width:27px;height:27px;border-radius:50%;background:#2b2e33}

.account-menu-wrap{position:relative}
.account-menu{
  position:absolute;
  right:0;
  top:64px;
  min-width:188px;
  padding:7px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:15px;
  background:rgba(23,25,28,.97);
  box-shadow:0 20px 54px rgba(0,0,0,.38);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.account-menu[hidden]{display:none}
.account-menu button,.account-menu-name{
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  border:0;
  border-radius:9px;
  padding:0 11px;
  background:transparent;
  color:#d9dade;
  font:inherit;
  font-size:13px;
  font-weight:500;
  text-align:left;
}
.account-menu button{cursor:pointer}
.account-menu button:hover{background:rgba(255,255,255,.05)}
.account-menu-name{color:#8e9299}

.username-modal-wrap{
  position:fixed;
  z-index:200;
  inset:0;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(4,5,6,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.username-modal{
  width:min(420px,100%);
  padding:26px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:#16181b;
  box-shadow:0 28px 90px rgba(0,0,0,.48);
}
.username-kicker{margin:0;color:#858990;font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.username-modal h2{margin:8px 0 0;color:#f2f2f3;font-size:28px;line-height:1;letter-spacing:-.04em}
.username-help{margin:10px 0 20px;color:#777b82;font-size:13px;line-height:1.4}
.username-input{
  width:100%;height:48px;border:1px solid rgba(255,255,255,.08);border-radius:13px;outline:0;padding:0 14px;background:#111316;color:#f1f1f2;font-size:16px;
}
.username-input:focus{border-color:rgba(255,255,255,.16)}
.username-error{min-height:17px;margin:8px 2px 0;color:#d96f7a;font-size:12px}
.username-save,.username-cancel{
  width:100%;height:44px;border-radius:12px;font-weight:650;cursor:pointer
}
.username-save{margin-top:8px;border:0;background:#eeeeef;color:#121316}
.username-save:disabled{opacity:.55;cursor:default}
.username-cancel{margin-top:8px;border:1px solid rgba(255,255,255,.07);background:transparent;color:#8c9097}

.critic-toast{
  position:fixed;
  z-index:300;
  left:50%;bottom:22px;
  transform:translate(-50%,18px);
  max-width:min(520px,calc(100vw - 30px));
  padding:11px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:#1b1d21;
  color:#d8d9dc;
  box-shadow:0 14px 42px rgba(0,0,0,.32);
  font-size:13px;
  opacity:0;
  pointer-events:none;
  transition:opacity 140ms ease,transform 140ms ease;
}
.critic-toast.show{opacity:1;transform:translate(-50%,0)}
.critic-toast[data-kind="error"]{color:#f19aa3}
.critic-toast[data-kind="warn"]{color:#d7b77d}

@media(max-width:760px){
  .auth-mount{top:10px;right:10px}
  .account-button{
    height:40px;
    padding:0 11px;
    border-radius:12px;
  }
  .account-button img,
  .account-avatar-fallback{
    width:22px;
    height:22px;
  }
  .account-menu{
    top:48px;
  }
}


body.auth-locked{
  overflow:hidden !important;
}

body.auth-locked > .catalog,
body.auth-locked > .page,
body.auth-locked > .auth-mount{
  display:none !important;
}

.auth-gate{
  position:fixed;
  z-index:1000;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  background:#111214;
  color:#f4f4f4;
  font-family:"SF Pro Display Local","SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}

.auth-gate-inner{
  width:min(390px,100%);
  text-align:center;
}

.auth-gate h1{
  margin:0 0 26px;
  color:#f5f5f5;
  font-size:clamp(30px,4vw,43px);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.045em;
  text-transform:lowercase;
}

.auth-gate-google{
  width:100%;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:15px;
  background:#1a1b1e;
  color:#fff;
  cursor:pointer;
  font:650 15px/1 "SF Pro Display Local","SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.015em;
  transition:background 140ms ease,border-color 140ms ease,transform 140ms ease;
}

.auth-gate-google:hover{
  background:#202226;
  border-color:rgba(255,255,255,.25);
  transform:translateY(-1px);
}

.auth-gate-google:active{
  transform:translateY(0) scale(.995);
}

.google-gate-icon{
  width:21px;
  height:21px;
  flex:0 0 auto;
  color:#fff;
}

.auth-gate-signin{
  margin:13px 0 0;
  color:#777b82;
  font-size:13px;
  line-height:1.2;
}

.auth-gate-signin button{
  padding:0;
  border:0;
  background:transparent;
  color:#8d9198;
  cursor:pointer;
  font:inherit;
}

.auth-gate-signin button:hover{
  color:#c3c5ca;
}

.auth-gate-error{
  margin:0;
  color:#868a91;
  font-size:14px;
}

.rating-count{
  margin:7px 0 0;
  color:#73777e;
  font-size:12px;
  line-height:1;
}

.account-verified{
  width:16px !important;
  height:16px !important;
  border-radius:0 !important;
  object-fit:contain;
}

.account-menu a{
  min-height:38px;
  display:flex;
  align-items:center;
  padding:0 11px;
  border-radius:9px;
  color:#c7c9cd;
  text-decoration:none;
  font-size:13px;
}

.account-menu a:hover{
  color:#fff;
  background:rgba(255,255,255,.045);
}

.google-gate-icon{
  width:21px;
  height:21px;
  object-fit:contain;
}

.user-name{
  color:inherit;
}

.user-name-static{
  color:var(--name-color-1) !important;
}

.user-name-gradient{
  display:inline-block;
  color:transparent !important;
  background-image:linear-gradient(
    90deg,
    var(--name-color-1),
    var(--name-color-2),
    var(--name-color-1)
  );
  background-size:220% 100%;
  background-position:0 50%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:critic-name-gradient 3.2s linear infinite;
}

@keyframes critic-name-gradient{
  to{background-position:220% 50%}
}

@media(prefers-reduced-motion:reduce){
  .user-name-gradient{
    animation:none;
    background-position:50% 50%;
  }
}

.account-developer{
  width:16px !important;
  height:16px !important;
  border-radius:0 !important;
  object-fit:contain;
}

.review-badge{
  width:17px;
  height:17px;
  object-fit:contain;
  vertical-align:-3px;
  margin-left:4px;
}

.developer-review-badge{
  width:17px;
  height:17px;
}

.review-like-button{
  min-width:44px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  color:#7e8289;
  cursor:pointer;
  font:600 11px/1 inherit;
  transition:
    color 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease;
}

.review-like-button svg{
  width:14px;
  height:14px;
}

.review-like-button path{
  fill:transparent;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linejoin:round;
  transition:fill 140ms ease;
}

.review-like-button:hover{
  color:#d5d7da;
  border-color:rgba(255,255,255,.12);
}

.review-like-button.liked{
  color:#ff647f;
  border-color:rgba(255,100,127,.2);
  background:rgba(255,100,127,.055);
}

.review-like-button.liked path{
  fill:currentColor;
}

.review-like-pop svg{
  animation:review-like-pop 300ms cubic-bezier(.2,.85,.2,1);
}

@keyframes review-like-pop{
  0%{transform:scale(1)}
  42%{transform:scale(1.35)}
  100%{transform:scale(1)}
}