/* Product identity shared with Ratificator desktop. No external fonts or assets. */
:root {
  --green: #58d7a5;
  --panel: #0f1e19;
  --border: #294238;
  --muted: #9cafA5;
  background: #08110f;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 8% 0, #122b22 0, transparent 48%), #08110f;
}
header {
  min-height: 88px;
  padding: 14px max(28px, calc((100vw - 1200px) / 2));
  background: #0a1511cc;
  border-bottom-color: #20392e;
}
.brand { gap: 13px; flex-wrap: nowrap; letter-spacing: -.5px; font-size: 23px; }
.brand-logo { display: block; flex: 0 0 auto; width: 56px; height: 56px; object-fit: contain; }
#identity { min-width: 0; gap: 18px; }
#identity > span { overflow-wrap: anywhere; }
#identity .quiet { font-size: 13px; padding-inline: 16px; }
main { width: 100%; max-width: 1264px; padding: 44px 32px 64px; min-height: 0; flex: 1; }
.page-heading { margin-bottom: 28px; }
.page-heading h1 { font-size: clamp(28px, 3vw, 36px); margin: 10px 0 0; letter-spacing: -1px; }
.page-heading .eyebrow { margin: 0; font-size: 10px; letter-spacing: 2px; }
.page-heading .quiet { align-self: end; font-size: 13px; }
nav { gap: 12px; padding-bottom: 14px; }
nav button { padding: 10px 15px; font-size: 14px; }
nav button[aria-current="page"] { background: #173c2d; border-color: #2e5744; }
.status:empty { min-height: 0; padding: 0; }
#content { margin-top: 30px; }
.section-heading { margin: 0 0 22px; }
.section-heading h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.section-heading p { max-width: 580px; line-height: 1.6; }
.section-heading > button { flex-shrink: 0; font-size: 13px; }
.count { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px; border: 1px solid #345344; border-radius: 7px; color: #abd5bf; font-size: 12px; font-weight: 500; letter-spacing: 0; }
.account-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 285px), 1fr)); gap: 18px; }
.account-card { padding: 22px; gap: 22px; background: linear-gradient(135deg, #12251c, #0e1a16); border-color: #294438; border-radius: 14px; }
.badge { display: inline-block; align-self: start; width: fit-content; background: #1b3428; color: #abd6be; font-size: 11px; padding: 6px 9px; border: 1px solid #2d503b; }
.admin-badge { background: #203328; border-color: #49624b; color: #cfdfb8; }
.self-label { font-size: 11px; color: var(--muted); padding-block: 7px; white-space: nowrap; }
.account-copy h3 { font-size: 20px; letter-spacing: -.3px; }
.account-copy p { margin: 7px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.account-access { border-top: 1px solid #233e30; padding-top: 15px; margin: auto 0 0; font-size: 12px; color: #93b19f; }
button { transition: background-color .15s, border-color .15s; }
.primary { background: var(--green); border-color: var(--green); color: #062718; box-shadow: 0 3px 12px #0002; }
.primary:hover:not(:disabled) { background: #79e5bc; border-color: #79e5bc; }
.login-layout { margin: clamp(20px, 8vh, 90px) auto 40px; gap: 80px; }
.intro h1 { font-size: clamp(40px, 5vw, 62px); letter-spacing: -2px; }
.intro h1 span { color: #9de5c4; }
.intro > p:not(.eyebrow) { max-width: 380px; }
.intro > .login-help { margin-top: 35px; font-size: 12px; color: #9eb6a8; }
.login-panel { background: linear-gradient(145deg, #14281e, #0e1b15); border-color: #304b3b; padding: 32px; box-shadow: 0 18px 60px #0003; }
.login-panel h2 { font-size: 23px; }
.login-panel > p.muted { font-size: 14px; }
.login-panel > p.small { font-size: 12px; }
.login-panel input { background: #0a1711; border-color: #365342; }
.login-panel .error:empty { min-height: 0; margin: 12px 0; }
dialog { border-color: #3b5e49; background: #10221a; box-shadow: 0 24px 100px #0007; }
footer { padding: 20px max(28px, calc((100vw - 1200px) / 2)); border-top-color: #1d3327; color: #91a99b; font-size: 12px; }
footer > :first-child { font-weight: 600; color: #aac5b5; }
@media (max-width: 760px) {
  header { padding: 12px 20px; gap: 12px; min-height: 76px; }
  .brand { font-size: 20px; gap: 10px; }
  .brand-logo { width: 46px; height: 46px; }
  #identity { font-size: 12px; gap: 12px; }
  main { padding: 30px 20px 44px; }
  .page-heading { gap: 15px; margin-bottom: 24px; }
  .page-heading h1 { font-size: 29px; }
  .page-heading .quiet { align-self: center; padding-inline: 12px; }
  nav { gap: 4px; }
  nav button { font-size: 13px; padding-inline: 12px; }
  #content { margin-top: 24px; }
  .section-heading { flex-wrap: wrap; gap: 15px; }
  .section-heading > button { width: 100%; }
  .account-grid { grid-template-columns: 1fr; gap: 14px; }
  .account-card { gap: 20px; padding: 20px; }
  .login-layout { margin: 12px auto 0; gap: 28px; }
  .intro h1 { font-size: 43px; letter-spacing: -1.3px; }
  .intro > .login-help { margin-top: 20px; }
  .login-panel { padding: 25px; }
  footer { flex-direction: row; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } }
.installation-card { display: flex; flex-direction: column; gap: 12px; }
.installation-card h3 { margin: 0; }
.installation-card.selected { border-color: #9bdab7; box-shadow: 0 0 0 1px #9bdab733; }
.installation-card .badge { align-self: flex-start; }
.installation-card + .empty, .grid + .empty { margin-top: 24px; }