/* Standalone styles for the profile hexagon and account panel.
   Adapted from the portfolio's .profile-btn and .signin-* rules, with the
   portfolio-specific swatch cascade removed. */

.profile-btn {
  position: fixed;
  z-index: 120;
  top: 14px;
  right: 16px;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  color: var(--accent);
  cursor: pointer;
  transition: transform .2s ease, color .2s ease;
}
.profile-btn svg { display: block; width: 100%; height: 100%; overflow: visible; }
.profile-btn .pf-back { fill: var(--page-bg); }
.profile-btn .pf-fill { fill: currentColor; opacity: 0; transition: opacity .2s ease; }
.profile-btn .pf-frame { fill: none; stroke: currentColor; stroke-width: 5.5; }
.profile-btn .pf-person { fill: currentColor; transition: fill .2s ease; }
.profile-btn.is-signed-in .pf-fill { opacity: 1; }
.profile-btn.is-signed-in .pf-person { fill: var(--page-bg); }
.profile-btn:hover { transform: scale(1.1); }
.profile-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 8px; }

.signin-modal {
  border: 0;
  padding: 0;
  background: none;
  max-width: 100vw;
  display: none;
  color: var(--text, #e8ecf3);
}
.signin-modal[open] { display: grid; place-items: center; }
.signin-modal::backdrop { background: rgba(3, 5, 7, .86); backdrop-filter: blur(6px); }
.signin-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  text-align: center;
  width: min(360px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 28px 28px 22px;
  border-radius: 26px;
  background: #171b25;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.signin-logo {
  width: 64px;
  height: 70px;
  align-self: center;
  display: grid;
  place-items: center;
  color: var(--accent-ink, #0b0d12);
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  font-weight: 900;
}
.signin-title { margin: 4px 0 0; font-size: 1.3rem; font-weight: 700; letter-spacing: .01em; }
.signin-note { margin: 0 0 6px; color: rgba(232, 236, 243, .62); font-size: .95rem; overflow-wrap: anywhere; }
.signin-providers { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.signin-btn {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #252a37;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.signin-btn:hover { background: #2e3443; }
.signin-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.signin-btn:disabled { opacity: .55; cursor: default; }
.signin-btn.is-primary { background: var(--accent); color: var(--accent-ink, #0b0d12); }
.signin-btn.is-primary:hover { filter: brightness(1.08); }
.signin-btn.is-danger { color: #ff8a80; }
.signin-btn.is-danger:hover { background: rgba(255, 90, 80, .16); }
.signin-provider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  width: 225px;
  padding: 0 18px;
  font-size: 1.15rem;
}
.signin-label { position: relative; }
.signin-mark {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  translate: 0 -50%;
  width: 25px;
  height: 27px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .13);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  font-size: .62rem;
  font-weight: 850;
}
.signin-provider.is-quiet { background: transparent; border-color: #323848; }
.signin-provider.is-quiet:hover { background: #252a37; }
.signin-providers[hidden], .signin-form[hidden] { display: none; }
.signin-form { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.signin-input {
  width: 280px;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #323848;
  border-radius: 12px;
  background: #0f121a;
  color: inherit;
  font: inherit;
  font-size: 1.05rem;
}
.signin-input::placeholder { color: rgba(232, 236, 243, .42); }
.signin-input:focus { outline: none; border-color: var(--accent); }
.signin-form-row { display: flex; gap: 8px; width: 280px; max-width: 100%; }
.signin-form-row .signin-btn { flex: 1; min-height: 46px; padding: 0 8px; white-space: nowrap; }
.signin-link { background: none; min-height: 34px; color: rgba(232, 236, 243, .62); font-weight: 500; }
.signin-link:hover { background: none; color: var(--text, #e8ecf3); }
.signin-error { margin: 0; color: #ff8a80; font-size: .9rem; }
.signin-status { margin: 0; color: var(--accent); font-size: .9rem; }
.signin-foot { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.signin-foot .signin-btn { min-width: 110px; }