:root {
  color-scheme: light;
  --ink: #15343b;
  --muted: #6b8387;
  --line: #dce7e6;
  --paper: #f4f8f7;
  --card: #ffffff;
  --deep: #092c35;
  --teal: #0f7776;
  --teal-dark: #0a605f;
  --aqua: #dff1ed;
  --green: #197453;
  --amber: #a66510;
  --red: #a24040;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); }
button, input { font: inherit; }
button { cursor: pointer; }
#app { min-height: 100vh; }
.loading, .loading-block { display: grid; place-items: center; min-height: 100vh; color: var(--muted); gap: 12px; }
.loading-block { min-height: 260px; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 800; letter-spacing: .11em; color: white; }
.brand-mark { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: #bce8d6; color: #0d454a; font-weight: 900; letter-spacing: -.08em; font-size: 14px; box-shadow: inset 0 -3px 0 #8fcbb2; }
.eyebrow { color: var(--teal); font-size: 10px; line-height: 1.4; font-weight: 800; letter-spacing: .16em; margin: 0 0 12px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.04em; line-height: 1.08; margin-bottom: 12px; }
h2 { font-size: 27px; letter-spacing: -.035em; margin-bottom: 9px; }
h3 { font-size: 17px; letter-spacing: -.02em; margin-bottom: 6px; }
p { line-height: 1.55; }
.muted { color: var(--muted); }
.auth-layout { display: grid; grid-template-columns: minmax(320px, 1.05fr) minmax(360px, .95fr); min-height: 100vh; background: white; }
.auth-story { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 7vw, 104px); color: white; background: radial-gradient(circle at 18% 18%, #1a5960 0, transparent 34%), linear-gradient(145deg, #092b34, #0e4147 72%, #165253); }
.auth-story .eyebrow { color: #a9dec9; margin-top: 72px; }
.auth-story h1 { font-size: clamp(38px, 5vw, 62px); max-width: 720px; }
.auth-story h1 em { font-style: normal; color: #a9dec9; }
.auth-story .muted { color: #c2d9d6; max-width: 450px; font-size: 16px; }
.auth-foot { margin-top: auto; padding-top: 80px; color: #9cbbb9; font-size: 11px; letter-spacing: .08em; }
.auth-panel { display: grid; align-content: center; justify-items: center; gap: 18px; padding: 40px 24px; background: #f6f9f8; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 30px rgba(22, 61, 64, .045); }
.auth-card, .invite-card { width: min(100%, 430px); padding: 32px; }
.auth-card { border: none; box-shadow: 0 18px 48px rgba(13, 53, 56, .08); }
.auth-card .muted, .invite-card .muted { font-size: 14px; margin-bottom: 24px; }
label { display: grid; gap: 8px; font-size: 13px; font-weight: 700; margin: 17px 0; }
input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #ccd9d8; border-radius: 9px; background: #fff; color: var(--ink); outline: none; }
input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15, 119, 118, .12); }
label small { font-size: 11px; color: var(--muted); font-weight: 500; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 40px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--ink); font-size: 13px; font-weight: 700; transition: .16s ease; }
.button:hover { border-color: #9bbdb8; transform: translateY(-1px); }
.button.primary { border-color: var(--teal); background: var(--teal); color: white; }
.button.primary:hover { background: var(--teal-dark); }
.button.full { width: 100%; min-height: 46px; margin-top: 10px; }
.text-button { border-color: transparent; background: transparent; color: var(--teal); }
.small-button { min-height: 32px; padding: 6px 10px; font-size: 11px; }
.success-button { color: var(--green); border-color: #c6e6d7; background: #f3fbf6; }
.notice { border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.45; margin: 12px 0; }
.notice.error { color: #8d3434; border: 1px solid #efd0ce; background: #fff4f3; }
.notice.success { color: #176449; border: 1px solid #c8e8d9; background: #f1fbf5; }
.notice.info { color: #205862; border: 1px solid #c8e3e2; background: #f1f9f8; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 3; display: flex; flex-direction: column; width: 252px; padding: 26px 16px 18px; background: var(--deep); color: white; }
.brand-link { text-decoration: none; padding: 2px 9px 34px; font-size: 13px; letter-spacing: .09em; }
.sidebar .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
.side-label { margin: 0 10px 15px; color: #91b2b1; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.nav-list { display: grid; gap: 5px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 43px; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; color: #c6dad7; text-align: left; font-size: 13px; font-weight: 650; }
.nav-item span { display: inline-grid; place-items: center; width: 21px; font-size: 17px; color: #9dc9ba; }
.nav-item:hover, .nav-item.active { background: #17434a; color: white; }
.sidebar-bottom { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 15px 6px 0; border-top: 1px solid #285057; }
.avatar { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 50%; background: #bce8d6; color: #12474b; font-weight: 800; }
.user-mini { display: grid; min-width: 0; gap: 3px; flex: 1; }
.user-mini strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.user-mini small { color: #a3c0bd; font-size: 10px; }
.icon-button { width: 31px; height: 31px; border: 0; border-radius: 8px; background: transparent; color: #c7dcda; font-size: 18px; }
.icon-button:hover { background: #17434a; }
.main-area { min-width: 0; width: calc(100% - 252px); margin-left: 252px; }
.topbar { display: flex; align-items: center; justify-content: space-between; height: 66px; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); color: var(--muted); font-size: 12px; }
.topbar > div:first-child { display: flex; align-items: center; gap: 9px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #36a77a; box-shadow: 0 0 0 4px #e7f5ee; }
.top-user { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace { max-width: 1500px; margin: 0 auto; padding: 39px 38px 60px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
.page-heading .muted { margin-bottom: 0; }
.page-heading .eyebrow { margin-bottom: 9px; }
.tenant-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.tenant-card { display: flex; align-items: center; gap: 14px; padding: 20px; }
.tenant-card h3, .tenant-card p { margin-bottom: 4px; }
.tenant-card .pill { margin-left: auto; }
.tenant-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; background: #e6f3ef; color: var(--teal); font-size: 21px; }
.tenant-icon.small { width: 28px; height: 28px; flex-basis: 28px; border-radius: 9px; font-size: 14px; }
.notice-card { margin-top: 20px; padding: 22px 24px; }
.notice-card p { margin: 8px 0 0; }
.table-card { overflow: hidden; }
.table-head, .table-row { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(110px, .7fr) 130px 120px minmax(190px, 1.5fr); align-items: center; gap: 16px; padding: 14px 20px; }
.table-head { background: #f7faf9; color: #829596; font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.table-row { min-height: 68px; border-top: 1px solid #edf2f1; font-size: 12px; }
.tenant-name { display: flex; align-items: center; gap: 10px; }
.tenant-name strong { font-size: 12px; }
code { color: #477077; font-size: 11px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-flex; justify-content: center; align-items: center; width: fit-content; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 750; white-space: nowrap; }
.pill.good { background: #e7f6ee; color: #20744e; }
.pill.warn { background: #fff2de; color: #a46816; }
.pill.neutral { background: #edf2f2; color: #61777a; }
.small-text { font-size: 11px; }
.empty-state { padding: 44px 24px; text-align: center; color: var(--muted); }
.helper-text { color: var(--muted); font-size: 11px; line-height: 1.5; }
.inline-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.inline-form label { flex: 1 1 180px; margin: 5px 0; }
.inline-form > div { flex: 1 1 100%; }
.staff-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: end; gap: 10px 14px; }
.staff-form label { margin: 5px 0 12px; }
.staff-form select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #ccd9d8; border-radius: 9px; background: #fff; color: var(--ink); font: inherit; }
.staff-form button { min-height: 44px; margin-bottom: 12px; }
.staff-table-head, .staff-table-row { grid-template-columns: minmax(150px, 1.1fr) minmax(160px, 1.2fr) minmax(130px, 1fr) minmax(110px, .7fr) minmax(130px, .9fr); }
.staff-table-row { font-size: 12px; }
.staff-table-row > span { overflow-wrap: anywhere; }
.inline-form p { margin-bottom: 2px; }
.feature-grid, .catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.feature-card, .catalog-card { padding: 21px; }
.feature-root { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 15px; border-bottom: 1px solid #edf2f1; }
.feature-root h3 { margin-bottom: 6px; }
.feature-root p, .catalog-card > p { margin-bottom: 0; font-size: 11px; }
.feature-children { display: grid; padding-top: 7px; }
.feature-child { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0; padding: 12px 0; border-bottom: 1px solid #f0f4f3; }
.feature-child:last-child { border-bottom: 0; }
.feature-child span { display: grid; gap: 4px; }
.feature-child strong { font-size: 12px; }
.feature-child small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.feature-child input { width: 17px; min-height: 17px; accent-color: var(--teal); }
.switch { position: relative; display: inline-block; flex: 0 0 44px; width: 44px; height: 25px; margin: 0; }
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: #d3dfde; transition: .15s; }
.switch span::before { position: absolute; left: 3px; top: 3px; width: 19px; height: 19px; border-radius: 50%; background: white; content: ""; box-shadow: 0 1px 4px #79918f; transition: .15s; }
.switch input:checked + span { background: var(--teal); }
.switch input:checked + span::before { transform: translateX(19px); }
.switch input:disabled + span { opacity: .45; cursor: not-allowed; }
.unavailable-note { margin: 10px 0 0; color: var(--amber); font-size: 11px; }
.catalog-card { display: grid; align-content: start; gap: 12px; }
.catalog-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.catalog-title small { color: var(--muted); font-family: ui-monospace, monospace; font-size: 10px; }
.catalog-children { display: flex; flex-wrap: wrap; gap: 7px; }
.catalog-children span { padding: 6px 9px; border-radius: 8px; background: #f1f6f5; color: #42676b; font-size: 10px; }
.back-link { margin-bottom: 17px; padding: 0; border: 0; background: transparent; color: var(--teal); font-size: 12px; font-weight: 750; }
@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-story { min-height: 310px; padding: 34px; }
  .auth-story .eyebrow { margin-top: 40px; }
  .auth-story h1 { font-size: 40px; }
  .auth-foot { padding-top: 35px; }
  .auth-panel { padding: 28px 18px; }
  .table-head { display: none; }
  .table-row { grid-template-columns: 1fr 1fr; padding: 16px; }
  .tenant-name { grid-column: 1 / -1; }
  .row-actions { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .sidebar { position: static; width: 100%; height: auto; padding: 12px 14px; }
  .app-shell { flex-direction: column; }
  .brand-link { padding: 0 3px 12px; }
  .side-label { display: none; }
  .nav-list { display: flex; }
  .nav-item { width: auto; min-height: 36px; padding: 7px 10px; font-size: 11px; }
  .sidebar-bottom { display: none; }
  .main-area { width: 100%; margin-left: 0; }
  .topbar { height: 48px; padding: 0 17px; font-size: 10px; }
  .workspace { padding: 25px 16px 45px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  .page-heading h1 { font-size: 30px; }
  .feature-grid, .catalog-grid { grid-template-columns: 1fr; }
  .auth-story { min-height: 280px; padding: 25px; }
  .auth-story h1 { font-size: 34px; }
  .auth-story .eyebrow { margin-top: 28px; }
  .auth-card, .invite-card { padding: 24px; }
}

.registration-admin-list{display:grid;gap:16px}
.registration-admin-card{padding:24px}
.registration-admin-heading{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.registration-admin-heading .eyebrow{margin-bottom:8px}
.registration-admin-heading h2{margin:0 0 5px;color:#153b44;font-size:21px}
.registration-admin-details{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:16px;margin:18px 0;padding:16px 0;border-top:1px solid #e3ebe8;border-bottom:1px solid #e3ebe8}
.registration-admin-details span{display:grid;gap:5px;min-width:0}
.registration-admin-details small{color:#7b9090;font-size:9px;font-weight:800;letter-spacing:.1em}
.registration-admin-details strong{overflow-wrap:anywhere;color:#294950;font-size:12px}
.approve-registration-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.approve-registration-form label{display:grid;gap:6px;color:#516a6f;font-size:11px;font-weight:700}
.approve-registration-form input{width:130px;min-height:38px;padding:8px 10px;border:1px solid #d5e0dd;border-radius:6px}
.reject-registration{color:#9e4b42}
.registration-admin-card>label{display:grid;gap:8px;margin:15px 0;color:#52696e;font-size:11px;font-weight:700}
.registration-admin-card>label input{width:100%;min-height:42px;padding:9px 11px;border:1px solid #d5e0dd;border-radius:6px}
@media(max-width:650px){.registration-admin-details{grid-template-columns:1fr;gap:11px}.registration-admin-card{padding:18px}.registration-admin-heading h2{font-size:18px}.approve-registration-form{align-items:stretch;flex-direction:column}.approve-registration-form label,.approve-registration-form input{width:100%}}


.tenant-status-cell{display:grid;justify-items:start;gap:5px}
.tenant-status-cell small{color:#9a5e14;font-weight:800;letter-spacing:.05em}
.billing-overdue{border-color:#e8c5bd;background:#fffaf8}
.billing-overdue h2{color:#9b4137}
.billing-history{margin-top:18px}
.billing-history-title{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:18px 20px;border-bottom:1px solid var(--line)}
.billing-history-title h2{margin:0;font-size:19px}
.billing-payment-row{display:grid;grid-template-columns:.8fr .8fr 1.2fr 1.2fr .7fr;gap:12px;padding:15px 20px;border-top:1px solid #edf2f1;font-size:12px}
.billing-payment-row span{overflow-wrap:anywhere;color:var(--muted)}
@media (max-width: 900px){.billing-payment-row{grid-template-columns:1fr 1fr}.billing-payment-row strong{grid-column:1/-1}}
@media (max-width: 620px){.billing-history-title{align-items:flex-start;flex-direction:column}.billing-payment-row{grid-template-columns:1fr}}