:root {
  color-scheme: dark;
  --auth-bg: #141719;
  --auth-surface: #1a1e21;
  --auth-line: #343b40;
  --auth-text: #e6e9e9;
  --auth-muted: #a5afb5;
  --auth-accent: #62b7ab;
  --auth-danger: #d88585;
  --auth-sans: 'Segoe UI', Arial, sans-serif;
  --auth-mono: Consolas, 'Cascadia Mono', 'Courier New', monospace;
}
[hidden] { display: none !important; }
.auth-page { box-sizing: border-box; margin: 0; min-width: 320px; min-height: 100svh; background: var(--auth-bg); color: var(--auth-text); font: 14px/1.5 var(--auth-sans); }
.auth-page *, .auth-nav * { box-sizing: border-box; }
.login-panel { width: min(420px, calc(100% - 40px)); margin: clamp(48px, 12vh, 130px) auto; padding: 28px; border: 1px solid var(--auth-line); background: var(--auth-surface); }
.auth-page h1 { margin: 0 0 10px; font-size: 24px; font-weight: 600; letter-spacing: -.4px; }
.auth-eyebrow { margin: 0 0 20px; color: var(--auth-muted); font: 11px/1.5 var(--auth-mono); }
.auth-muted { color: var(--auth-muted); }
.auth-field { display: grid; gap: 6px; margin: 18px 0; min-width: 0; }
.auth-field label { font-size: 12px; font-weight: 600; }
.auth-field input { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--auth-line); border-radius: 2px; padding: 9px 11px; background: var(--auth-bg); color: var(--auth-text); font: 14px var(--auth-sans); }
.auth-page button, .auth-nav button { min-height: 44px; border: 1px solid var(--auth-line); border-radius: 2px; padding: 8px 14px; background: transparent; color: var(--auth-text); font: 13px var(--auth-sans); cursor: pointer; touch-action: manipulation; }
.auth-page .auth-primary { background: var(--auth-accent); color: var(--auth-bg); border-color: var(--auth-accent); font-weight: 600; }
.login-panel .auth-primary { width: 100%; }
.auth-page button:hover:not(:disabled), .auth-nav button:hover:not(:disabled) { filter: brightness(1.15); }
.auth-page button:disabled, .auth-nav button:disabled, .auth-field input:disabled { opacity: .6; cursor: default; }
.auth-page :focus-visible, .auth-nav :focus-visible { outline: 2px solid var(--auth-accent); outline-offset: 3px; }
.auth-status { min-height: 21px; margin: 12px 0 0; color: var(--auth-danger); overflow-wrap: anywhere; }
.auth-status[data-tone="success"] { color: var(--auth-accent); }
.auth-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 14px; padding: 8px 26px; font: 12px/1.5 var(--auth-sans); color: var(--auth-muted); }
.auth-nav a { color: var(--auth-accent); min-height: 44px; display: inline-flex; align-items: center; }
#auth-user { font-family: var(--auth-mono); overflow-wrap: anywhere; max-width: 100%; }
.session-feedback { padding: 0 26px; font: 13px/1.5 var(--auth-sans); }
.session-feedback .auth-status:empty { display: none; }
.boss-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 22px 26px; border-bottom: 1px solid var(--auth-line); }
.boss-header .auth-eyebrow, .boss-header h1 { margin: 0; }
.boss-header .auth-nav { padding: 0; }
.boss-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: 28px; max-width: 1240px; margin: 26px auto; padding: 0 26px; }
.boss-content h2 { margin: 0; font-size: 16px; font-weight: 600; }
.users-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.users-section, .add-user-section { min-width: 0; }
.add-user-section { padding: 20px; border: 1px solid var(--auth-line); background: var(--auth-surface); align-self: start; }
.users-scroll { overflow-x: auto; }
#users-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; }
#users-table th, #users-table td { padding: 10px 12px; border-bottom: 1px solid var(--auth-line); overflow-wrap: anywhere; }
#users-table th { font-weight: 600; color: var(--auth-muted); }
#users-table td:first-child, #users-table td:nth-child(3) { font-family: var(--auth-mono); }
.auth-page .auth-remove { color: var(--auth-danger); }
.users-status { grid-column: 1 / -1; margin-top: 0; }
.boss-content .methodology { grid-column: 1 / -1; min-width: 0; padding: 22px 0 0; border-top: 1px solid var(--auth-line); color: var(--auth-muted); }
.boss-content .methodology summary { min-height: 44px; padding: 8px 0; cursor: pointer; color: var(--auth-text); font-weight: 600; }
.boss-content .method-summary { display: block; margin: 4px 0 0 18px; color: var(--auth-muted); font: 12px/1.6 var(--auth-mono); overflow-wrap: anywhere; }
.boss-content .method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 22px 32px; padding: 18px 0; }
.boss-content .method-grid section { min-width: 0; }
.boss-content .method-grid h2 { margin: 0 0 8px; color: var(--auth-text); font-size: 14px; }
.boss-content .method-grid p { margin: 0 0 10px; font-size: 13px; line-height: 1.7; }
.boss-content .health-text { white-space: pre-line; overflow-wrap: anywhere; }
.boss-content .chart-credit { margin: 14px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.boss-content .chart-credit a { color: var(--auth-accent); }
.boss-content .footer-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 14px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 760px) { .boss-content { grid-template-columns: minmax(0, 1fr); gap: 20px; } .auth-nav { justify-content: flex-start; } }
@media (max-width: 480px) { .login-panel { padding: 22px; margin-top: 40px; } .boss-header, .boss-content, .session-feedback, .auth-nav { padding-left: 16px; padding-right: 16px; } #users-table th, #users-table td { padding: 8px 6px; } }