:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172033;
  background: #f5f8fc;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }

.access-layout { display: grid; grid-template-columns: minmax(320px, 42%) 1fr; min-height: 100vh; }
.brand-panel { display: flex; flex-direction: column; justify-content: space-between; padding: 42px clamp(28px, 6vw, 88px); color: #fff; background: linear-gradient(145deg, #123c92, #1d62cf 62%, #2c7be5); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; letter-spacing: -.04em; }
.brand strong { font-weight: 800; }
.brand small { display: block; margin-top: 2px; color: #d7e6ff; font-size: 10px; font-weight: 500; letter-spacing: .02em; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #1f5fcc; background: #fff; font-size: 18px; font-weight: 800; }
.brand-message { max-width: 470px; margin: auto 0 14vh; }
.eyebrow { display: block; margin-bottom: 11px; color: #3274dd; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.brand-panel .eyebrow { color: #c9ddff; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 18px; font-size: clamp(34px, 4vw, 58px); line-height: 1.04; letter-spacing: -.055em; }
h2 { margin-bottom: 8px; font-size: 28px; line-height: 1.1; letter-spacing: -.04em; }
.brand-message p { max-width: 390px; color: #dce9ff; font-size: 16px; line-height: 1.65; }
.form-panel { display: grid; place-items: center; padding: 32px clamp(24px, 7vw, 112px); }
.access-card, .state-card { width: min(100%, 440px); padding: 34px; border: 1px solid #e3eaf4; border-radius: 18px; background: #fff; box-shadow: 0 18px 55px rgba(29, 54, 91, .09); }
.access-card[hidden], .state-card[hidden] { display: none; }
.muted { margin-bottom: 26px; color: #6c7890; line-height: 1.55; }
label { display: block; margin: 16px 0; color: #3e4b63; font-size: 13px; font-weight: 700; }
input { display: block; width: 100%; margin-top: 7px; padding: 12px 13px; border: 1px solid #d5deeb; border-radius: 9px; color: #172033; background: #fbfdff; font: inherit; outline: 0; }
input:focus { border-color: #3175df; box-shadow: 0 0 0 3px rgba(49, 117, 223, .14); }
.password-field { position: relative; display: block; margin-top: 7px; }
.password-field input { margin-top: 0; padding-right: 47px; }
.password-toggle { position: absolute; top: 50%; right: 5px; display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 0; border-radius: 7px; color: #71809a; background: transparent; cursor: pointer; transform: translateY(-50%); transition: color .18s ease, background .18s ease; }
.password-toggle:hover, .password-toggle:focus-visible { color: #2365cf; background: #edf4ff; outline: 0; }
.password-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(49, 117, 223, .16); }
.password-toggle[aria-pressed="true"] { color: #2365cf; }
.password-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
label small { display: block; margin-top: 5px; color: #7d899d; font-size: 11px; font-weight: 500; }
.button { width: 100%; margin-top: 12px; padding: 13px 16px; border: 0; border-radius: 9px; font: inherit; font-weight: 800; cursor: pointer; }
.button:disabled { opacity: .65; cursor: wait; }
.primary { color: #fff; background: #2365cf; }
.primary:hover { background: #174fae; }
.secondary { color: #315b9c; background: #edf4ff; }
.error { min-height: 20px; margin: 12px 0 2px; color: #b42318; font-size: 13px; line-height: 1.4; }
.state-card { display: flex; align-items: center; justify-content: center; gap: 12px; color: #63708a; }
.state-card p { margin: 0; }
.spinner { width: 18px; height: 18px; border: 2px solid #d9e6fb; border-top-color: #2365cf; border-radius: 50%; animation: spin .8s linear infinite; }
.welcome-card { text-align: center; }
.welcome-card .eyebrow { margin-top: 18px; }
.success-icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; color: #087443; background: #dff7eb; font-size: 24px; font-weight: 800; }
.workspace-card { width: min(100%, 1080px); max-height: calc(100vh - 48px); overflow: auto; }
.workspace-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.workspace-heading-actions { display: flex; align-items: center; gap: 8px; }
.workspace-heading .success-icon { margin: 0 0 18px; }
.workspace-heading .eyebrow { margin-bottom: 9px; }
.workspace-heading h2 { margin-bottom: 8px; }
.workspace-heading .muted { margin-bottom: 0; }
.compact-button { width: auto; min-width: max-content; margin: 0; padding: 9px 13px; }
.active-company-bar { display: flex; align-items: flex-end; gap: 12px; margin: 28px 0 16px; padding: 15px 17px; border: 1px solid #dce8fa; border-radius: 12px; background: #f5f9ff; }
.active-company-bar label { flex: 1; margin: 0; }
.active-company-bar select { max-width: 430px; }
select { display: block; width: 100%; margin-top: 7px; padding: 11px 12px; border: 1px solid #d5deeb; border-radius: 9px; color: #172033; background: #fbfdff; font: inherit; outline: 0; }
select:focus { border-color: #3175df; box-shadow: 0 0 0 3px rgba(49, 117, 223, .14); }
.badge { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 9px; border-radius: 999px; color: #176342; background: #dff7eb; font-size: 11px; font-weight: 800; white-space: nowrap; }
.badge-inactive { color: #8c4a0a; background: #fff0d6; }
.notice { min-height: 20px; margin: 8px 0 4px; color: #176342; font-size: 13px; line-height: 1.4; }
.notice-error { color: #b42318; }
.admin-section { margin-top: 28px; padding-top: 25px; border-top: 1px solid #e7edf6; text-align: left; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.section-heading .eyebrow { margin-bottom: 6px; }
h3 { margin: 0; color: #172033; font-size: 19px; letter-spacing: -.025em; }
.section-hint { max-width: 360px; color: #7b879a; font-size: 12px; line-height: 1.4; text-align: right; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mini-form, .member-create-form { padding: 17px; border: 1px solid #e4ebf5; border-radius: 12px; background: #fbfdff; }
.mini-form label, .member-create-form label { margin: 0 0 12px; }
.mini-form .button { margin-top: 0; }
.check-label { display: flex !important; align-items: center; gap: 8px; font-weight: 600; }
.check-label input { width: 16px; height: 16px; margin: 0; accent-color: #2365cf; }
.group-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.group-item, .role-item, .member-item { padding: 15px; border: 1px solid #e4ebf5; border-radius: 12px; background: #fff; }
.group-heading, .role-heading, .member-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.group-heading strong, .role-heading strong, .member-heading strong { color: #24324b; font-size: 14px; }
.group-heading span, .member-heading small { color: #7b879a; font-size: 11px; }
.company-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.company-chips span { padding: 5px 8px; border-radius: 6px; color: #315b9c; background: #edf4ff; font-size: 11px; }
.attach-company { display: flex; gap: 8px; margin-top: 13px; }
.attach-company select { flex: 1; margin: 0; padding: 8px; font-size: 12px; }
.empty-state { margin: 0; padding: 14px; border-radius: 10px; color: #7b879a; background: #f7f9fc; font-size: 13px; }
.permission-list, .members-list { display: grid; gap: 11px; }
.role-heading { margin-bottom: 13px; }
.permission-controls { display: grid; grid-template-columns: repeat(6, minmax(90px, 1fr)); gap: 8px; }
.permission-field { margin: 0; color: #69758a; font-size: 11px; font-weight: 700; }
.permission-field select { margin-top: 5px; padding: 8px 6px; font-size: 11px; }
.member-create-form { display: grid; grid-template-columns: 1fr 1fr 1fr .8fr auto; align-items: end; gap: 10px; }
.member-create-form label { margin: 0; }
.member-create-form .button { width: auto; margin: 0; white-space: nowrap; }
.member-heading { align-items: flex-start; }
.member-heading small { display: block; margin-top: 4px; }
.member-access-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.member-access-form label { margin: 0; }
.member-access-form .permission-controls { grid-column: 1 / -1; }
.member-access-form .check-label { align-self: center; margin: 2px 0 0; }
.member-access-form .button { grid-column: 2; justify-self: end; width: auto; margin: 0; }
.owner-access { margin: 13px 0 0; color: #176342; font-size: 12px; }
.member-summary { margin-top: 28px; padding-top: 25px; border-top: 1px solid #e7edf6; text-align: left; }
.member-summary .eyebrow { margin-bottom: 6px; }
.member-summary .muted { margin: 7px 0 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .member-create-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .member-create-form .button { width: 100%; } }
@media (max-width: 760px) { .access-layout { display: block; } .brand-panel { min-height: 260px; padding: 28px 24px; } .brand-message { margin: 72px 0 0; } h1 { font-size: 34px; } .form-panel { min-height: calc(100vh - 260px); padding: 26px 18px; } .access-card, .state-card { padding: 26px 22px; } .workspace-card { max-height: none; } .form-grid, .group-list { grid-template-columns: 1fr; } .section-heading { display: block; } .section-hint { margin-top: 7px; text-align: left; } .permission-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } .member-create-form { grid-template-columns: 1fr; } .member-access-form { grid-template-columns: 1fr; } .member-access-form .permission-controls { grid-column: auto; } .member-access-form .button { grid-column: auto; justify-self: stretch; width: 100%; } .workspace-heading { display: block; } .workspace-heading-actions { align-items: stretch; flex-direction: column; margin-top: 17px; } .workspace-heading .compact-button { margin-top: 0; } .active-company-bar { align-items: stretch; flex-direction: column; } .active-company-bar select { max-width: none; } }