/* Shared palette and font come from style.css. Metrics below belong to sign-in. */
.login-page {
  --login-hero-bg: #233f32;
  --login-hero-ink: #f3f6ec;
  --login-hero-muted: #b0c1ae;
  --login-accent: #c3d5a8;
  --login-hero-line: #496150;
  --login-control-bg: #fafbf8;
  --login-focus: #dfe8d7;
  --login-shadow: 0 28px 80px #233f3210, 0 2px 12px #233f3205;
  --login-space-xs: 8px;
  --login-space-sm: 12px;
  --login-space-md: 20px;
  --login-space-lg: 32px;
  --login-space-xl: 48px;
  --login-page-inset: 36px;
  --login-panel-inset: 52px;
  --login-shell-width: 1120px;
  --login-shell-height: 730px;
  --login-form-width: 368px;
  --login-shell-radius: 20px;
  --login-control-radius: 8px;
  --login-control-height: 54px;
  --login-icon: 20px;
  --login-touch: 44px;
  --login-title: 36px;
  --login-hero-title: 46px;
  --login-body: 15px;
  --login-small: 14px;
  --login-caption: 13px;
  --art-height: 210px;
  --art-node-width: 112px;
  --art-node-height: 42px;
  --art-node-inset: 5%;
  --art-node-top: 18%;
  --art-node-bottom: 65%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--login-page-inset);
  background: radial-gradient(ellipse at 8% 10%, var(--pale), transparent 52%), var(--bg);
}
.login-layout { width: min(100%, var(--login-shell-width)); min-height: var(--login-shell-height); display: grid; grid-template-columns: 1fr 1.06fr; padding: 0; border: 1px solid var(--line); border-radius: var(--login-shell-radius); overflow: hidden; background: var(--paper); box-shadow: var(--login-shadow); }
.login-hero { background: var(--login-hero-bg); color: var(--login-hero-ink); padding: var(--login-space-xl); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: var(--login-space-sm); }
.login-hero .brand { padding: 0; }
.login-hero .brand-mark i, .art-hub .brand-mark i { background: var(--login-accent); }
.login-hero .brand-dot { color: var(--login-accent); }
.hero-badge { font: var(--login-caption) var(--mono); letter-spacing: .6px; color: var(--login-hero-muted); display: flex; align-items: center; gap: var(--login-space-xs); white-space: nowrap; }
.hero-badge span { width: 5px; height: 5px; background: var(--login-accent); border-radius: 50%; }
.hero-copy { margin-top: calc(var(--login-space-xl) + var(--login-space-lg)); }
.hero-eyebrow { font: var(--login-caption) var(--mono); letter-spacing: 1.7px; color: var(--login-accent); margin: 0 0 var(--login-space-md); }
.hero-copy h1 { font-size: var(--login-hero-title); line-height: 1.45; letter-spacing: -1.8px; font-weight: 600; margin: 0; }
.hero-copy h1 span { color: var(--login-accent); }
.hero-description { font-size: var(--login-body); line-height: 1.9; color: var(--login-hero-muted); margin: var(--login-space-md) 0 0; }
.connection-art { position: relative; height: var(--art-height); margin: var(--login-space-lg) calc(-1 * var(--login-space-xs)); }
.art-grid { position: absolute; inset: 0; background-image: radial-gradient(var(--login-hero-line) 1px, transparent 1px); background-size: 16px 16px; mask-image: radial-gradient(ellipse at center, black 15%, transparent 72%); opacity: .55; }
.art-lines { position: absolute; width: 100%; height: 100%; stroke: var(--login-hero-line); stroke-width: 1.3; }
.art-lines circle { fill: var(--login-accent); stroke: none; }
.art-node { position: absolute; width: var(--art-node-width); height: var(--art-node-height); display: flex; align-items: center; justify-content: center; gap: var(--login-space-xs); border: 1px solid var(--login-hero-line); border-radius: var(--login-control-radius); background: var(--login-hero-bg); font-size: var(--login-small); color: var(--login-hero-muted); }
.art-node svg { width: var(--login-icon); height: var(--login-icon); }
.art-code { font-family: var(--mono); font-size: var(--login-body); }
.art-account { left: var(--art-node-inset); top: var(--art-node-top); }
.art-model { left: var(--art-node-inset); top: var(--art-node-bottom); }
.art-api { right: var(--art-node-inset); top: var(--art-node-top); }
.art-monitor { right: var(--art-node-inset); top: var(--art-node-bottom); }
.art-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: var(--login-space-md); border: 1px solid var(--login-hero-line); border-radius: 16px; background: var(--login-hero-bg); box-shadow: 0 0 0 8px #c3d5a805; }
.hero-footer { display: flex; align-items: center; gap: var(--login-space-sm); margin-top: auto; padding-top: var(--login-space-md); border-top: 1px solid var(--login-hero-line); font-size: var(--login-small); color: var(--login-hero-muted); }
.hero-footer i { width: 3px; height: 3px; border-radius: 50%; background: var(--login-hero-line); }
.hero-footer-arrow { margin-left: auto; font-size: var(--login-icon); color: var(--login-accent); }
.login-panel { padding: var(--login-space-xl) var(--login-panel-inset) var(--login-space-lg); display: flex; flex-direction: column; }
.panel-caption { font: var(--login-caption) var(--mono); letter-spacing: 1.1px; color: var(--muted); }
.panel-caption span { color: var(--line); margin: 0 var(--login-space-xs); }
.login-form-wrap { width: 100%; max-width: var(--login-form-width); margin: auto; padding: var(--login-space-xl) 0; }
.welcome-icon { display: grid; place-items: center; width: var(--login-control-height); height: var(--login-control-height); background: var(--pale); border: 1px solid var(--line); border-radius: 14px; margin-bottom: var(--login-space-md); color: var(--green); }
.welcome-icon svg { width: 26px; height: 26px; }
.login-heading h2 { margin: 0; font-size: var(--login-title); font-weight: 600; letter-spacing: -1.2px; line-height: 1.4; }
.login-heading h2 span { color: var(--green); }
.login-heading p { margin: var(--login-space-xs) 0 var(--login-space-lg); color: var(--muted); font-size: var(--login-body); }
.login-field { display: block; font-size: var(--login-small); font-weight: 600; margin-bottom: var(--login-space-md); }
.login-input-wrap { display: flex; align-items: center; min-height: var(--login-control-height); gap: var(--login-space-sm); margin-top: var(--login-space-xs); padding-left: var(--login-space-md); border: 1px solid var(--line); background: var(--login-control-bg); border-radius: var(--login-control-radius); transition: border-color .15s, box-shadow .15s; }
.login-input-wrap:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--login-focus); }
.login-input-wrap:has(input[aria-invalid="true"]) { border-color: var(--danger); }
.login-input-wrap > svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.login-input-wrap input { width: 100%; min-width: 0; height: var(--login-control-height); background: transparent; border: 0; padding: 0 var(--login-space-sm) 0 0; color: var(--ink); font-size: var(--login-body); font-weight: 400; outline: none; }
.login-input-wrap input::placeholder { color: var(--muted); }
#toggle-password { flex-shrink: 0; background: transparent; border: 0; color: var(--muted); height: var(--login-touch); width: var(--login-touch); display: grid; place-items: center; border-radius: var(--login-control-radius); margin-right: 4px; }
#toggle-password:hover { color: var(--green); background: var(--pale); }
#toggle-password svg { height: var(--login-icon); width: var(--login-icon); }
.login-options { display: flex; justify-content: space-between; align-items: center; gap: var(--login-space-xs); font-size: var(--login-small); color: var(--muted); }
.remember-option { display: inline-flex; align-items: center; min-height: var(--login-touch); gap: var(--login-space-xs); cursor: pointer; color: var(--ink); }
.remember-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
.login-error { min-height: var(--login-space-md); margin: 0 0 var(--login-space-sm); font-size: var(--login-small); color: var(--danger); }
.login-submit { display: flex; width: 100%; min-height: var(--login-control-height); justify-content: center; font-size: var(--login-body); gap: var(--login-space-sm); border-radius: var(--login-control-radius); background: var(--green); }
.login-submit:hover { background: var(--login-hero-bg); }
.login-submit .submit-arrow { width: 18px; height: 18px; }
.login-security { display: flex; align-items: center; justify-content: center; gap: var(--login-space-xs); color: var(--muted); font-size: var(--login-small); margin-top: var(--login-space-md); }
.login-security svg { width: 15px; height: 15px; color: var(--green); }
.login-panel-footer { display: flex; justify-content: space-between; font-size: var(--login-caption); color: var(--muted); padding-top: var(--login-space-md); border-top: 1px solid var(--line); }
.login-page-footer { padding-top: var(--login-space-md); font: var(--login-caption) var(--mono); letter-spacing: 2px; color: var(--muted); }
.login-spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: login-spin .7s linear infinite; }
@keyframes login-spin { to { transform: rotate(360deg); } }
@media (max-width: 1050px) {
  .login-page { --login-page-inset: 24px; --login-panel-inset: 36px; --login-space-xl: 36px; --login-hero-title: 38px; }
  .hero-badge { display: none; }
}
@media (max-width: 760px) {
  .login-page { --login-page-inset: 20px; --login-space-xl: 28px; --login-panel-inset: 28px; --login-title: 32px; --login-shell-radius: 16px; justify-content: flex-start; padding-top: max(var(--login-page-inset), env(safe-area-inset-top)); padding-bottom: max(var(--login-page-inset), env(safe-area-inset-bottom)); }
  .login-layout { grid-template-columns: 1fr; min-height: 0; max-width: 460px; }
  .login-hero { padding: var(--login-space-md) var(--login-panel-inset); }
  .hero-badge { display: flex; font-size: 13px; }
  .login-hero .brand { font-size: 25px; }
  .hero-copy, .connection-art, .hero-footer { display: none; }
  .login-panel { padding-top: var(--login-space-lg); }
  .login-form-wrap { padding: var(--login-space-lg) 0; }
  .login-options > span { display: none; }
  .login-page-footer { letter-spacing: 1px; font-size: 13px; }
}