:root {
 --hb-green: #0f6f61;
 --hb-green-dark: #114d4d;
 --hb-green-soft: #edf7f1;
 --hb-line: #d6eadc;
 --hb-text: #243b3a;
 --hb-muted: #63807b;
 --hb-card: rgba(255, 255, 255, 0.94);
 --hb-danger: #9b1c1c;
 --hb-shadow: 0 16px 38px rgba(17, 77, 77, 0.10);
}

* {
 box-sizing: border-box;
}

body.hb-site-body {
 margin: 0;
 min-height: 100vh;
 font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 background:
  radial-gradient(circle at top left, rgba(15, 111, 97, 0.12), transparent 34rem),
  linear-gradient(135deg, #f7fbf8 0%, #edf6f1 100%);
 color: var(--hb-text);
}

.hb-site-shell {
 min-height: 100vh;
 display: flex;
 flex-direction: column;
}

.hb-topbar {
 position: sticky;
 top: 0;
 z-index: 1000;
 display: grid;
 grid-template-columns: auto 1fr auto;
 gap: 18px;
 align-items: center;
 min-height: 78px;
 padding: 10px 22px;
 background: rgba(255, 255, 255, 0.94);
 border-bottom: 1px solid var(--hb-line);
 box-shadow: 0 4px 18px rgba(17, 77, 77, 0.06);
 backdrop-filter: blur(10px);
}

.hb-brand {
 display: inline-flex;
 align-items: center;
 color: var(--hb-green-dark);
 text-decoration: none;
 min-width: 0;
}

.hb-brand img {
 height: 54px;
 width: auto;
 display: block;
}

.hb-nav {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
}

.hb-nav a {
 color: var(--hb-green-dark);
 text-decoration: none;
 font-weight: 800;
 font-size: 0.92rem;
 padding: 9px 12px;
 border-radius: 999px;
}

.hb-nav a[data-active="true"] {
 background: var(--hb-green-soft);
 color: var(--hb-green);
}

.hb-auth-pill {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 8px;
 min-width: 0;
}

.hb-plan-badge,
.hb-status-badge {
 display: inline-flex;
 align-items: center;
 min-height: 30px;
 padding: 0 10px;
 border-radius: 999px;
 border: 1px solid var(--hb-line);
 background: #ffffff;
 color: var(--hb-green-dark);
 font-size: 0.78rem;
 font-weight: 750;
 white-space: nowrap;
}

.hb-status-badge[data-state="checking"] {
 color: #7a6a19;
}

.hb-auth-name {
 max-width: 180px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 color: var(--hb-green-dark);
 font-size: 0.92rem;
 font-weight: 850;
}

.hb-shell-button,
.hb-button {
 min-height: 42px;
 border: 0;
 border-radius: 999px;
 padding: 0 18px;
 background: var(--hb-green);
 color: #ffffff;
 font: inherit;
 font-weight: 800;
 cursor: pointer;
 text-decoration: none;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 8px 18px rgba(15, 111, 97, 0.16);
}

.hb-shell-button.secondary,
.hb-button.secondary {
 background: #ffffff;
 color: var(--hb-green-dark);
 border: 1px solid var(--hb-line);
 box-shadow: none;
}

.hb-button.google,
.hb-shell-button.google {
 background: #ffffff;
 color: #263b39;
 border: 1px solid var(--hb-line);
 box-shadow: none;
 gap: 8px;
}

.hb-button.google::before,
.hb-shell-button.google::before {
 content: "G";
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 22px;
 height: 22px;
 border-radius: 999px;
 border: 1px solid #e1e7e4;
 color: var(--hb-green);
 font-weight: 900;
 font-size: 0.9rem;
}

.hb-shell-button:disabled,
.hb-button:disabled {
 opacity: 0.55;
 cursor: wait;
}

.hb-page {
 width: min(900px, calc(100% - 32px));
 margin: 34px auto;
 flex: 1;
}

.hb-card {
 background: var(--hb-card);
 border: 1px solid var(--hb-line);
 border-radius: 24px;
 box-shadow: var(--hb-shadow);
 padding: 30px;
}

.hb-card.narrow {
 max-width: 560px;
 margin-left: auto;
 margin-right: auto;
}

.hb-eyebrow {
 margin: 0 0 8px;
 color: var(--hb-green);
 font-size: 0.82rem;
 font-weight: 850;
 letter-spacing: 0.06em;
 text-transform: uppercase;
}

.hb-title {
 margin: 0;
 color: var(--hb-green-dark);
 font-size: clamp(2rem, 4.5vw, 3rem);
 line-height: 1.06;
 letter-spacing: -0.04em;
}

.hb-copy {
 color: var(--hb-muted);
 line-height: 1.55;
 font-size: 1rem;
}

.hb-form {
 display: grid;
 gap: 14px;
 margin-top: 22px;
}

.hb-field label {
 display: block;
 margin: 0 0 6px;
 color: var(--hb-green-dark);
 font-weight: 800;
}

.hb-field input,
.hb-field select {
 width: 100%;
 min-height: 46px;
 border: 1px solid var(--hb-line);
 border-radius: 14px;
 padding: 0 14px;
 font: inherit;
 background: #ffffff;
 color: var(--hb-text);
}

.hb-actions {
 display: flex;
 gap: 12px;
 flex-wrap: wrap;
 margin-top: 18px;
}

.hb-message {
 margin-top: 18px;
 padding: 14px 16px;
 border-radius: 16px;
 background: var(--hb-green-soft);
 border: 1px solid var(--hb-line);
 color: #365d58;
 line-height: 1.45;
 white-space: pre-wrap;
}

.hb-message[data-state="error"] {
 background: #fff5f5;
 border-color: #efc3c3;
 color: var(--hb-danger);
}

.hb-message[data-state="success"] {
 background: #f0faf2;
 border-color: #bfe5c8;
}

.hb-divider {
 display: flex;
 align-items: center;
 gap: 12px;
 margin: 18px 0 4px;
 color: var(--hb-muted);
 font-size: 0.86rem;
 font-weight: 750;
}

.hb-divider::before,
.hb-divider::after {
 content: "";
 height: 1px;
 background: var(--hb-line);
 flex: 1;
}

.hb-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 16px;
 margin-top: 20px;
}

.hb-info-box {
 border: 1px solid var(--hb-line);
 border-radius: 18px;
 padding: 16px;
 background: #fbfefc;
 min-width: 0;
}

.hb-info-box h2 {
 margin: 0 0 8px;
 color: var(--hb-green-dark);
 font-size: 1rem;
}

.hb-mono {
 font-family: Consolas, "Courier New", monospace;
 font-size: 0.86rem;
 white-space: pre-wrap;
 overflow-wrap: anywhere;
}

.hb-footer {
 text-align: center;
 color: #7b918d;
 font-size: 0.86rem;
 padding: 22px;
}

@media (max-width: 780px) {
 .hb-topbar {
  grid-template-columns: 1fr;
  align-items: stretch;
 }

 .hb-brand img {
  height: 46px;
 }

 .hb-nav {
  justify-content: flex-start;
 }

 .hb-auth-pill {
  justify-content: flex-start;
  flex-wrap: wrap;
 }

 .hb-grid {
  grid-template-columns: 1fr;
 }
}