:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #061426;
  color: #edf8ff;
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body { margin: 0; min-width: 320px; }
a { color: inherit; }

.auth-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: radial-gradient(circle at 15% 0%, #0d6a8f 0, transparent 34rem), radial-gradient(circle at 90% 90%, #0b684f 0, transparent 30rem), #061426;
}

.auth-shell { width: min(100%, 30rem); }
.brand {
  display: inline-flex;
  align-items: center;
  gap: .04rem;
  color: #21ce78;
  font-size: 1.72rem;
  font-weight: 740;
  letter-spacing: -.08em;
  text-decoration: none;
}
.brand strong { color: #2579fa; font-weight: 780; }
.brand-mark { color: #1fd594; font-size: 2rem; font-weight: 400; line-height: 1; margin-right: .32rem; transform: rotate(-16deg); }
.auth-card { margin-top: 2rem; background: rgba(8, 31, 53, .9); border: 1px solid rgba(147, 209, 247, .22); border-radius: 1.25rem; box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .26); padding: 2rem; }
.auth-card h1, .workspace h1, h2 { letter-spacing: -.045em; }
.auth-card h1 { font-size: 1.85rem; margin: .3rem 0 .65rem; }
.eyebrow { color: #65d8c1; font-size: .75rem; font-weight: 750; letter-spacing: .08em; margin: 0; text-transform: uppercase; }
.intro, .page-intro p, .hero-panel p, .empty-state p, .explain-card p { color: #a9c3d8; line-height: 1.55; }
.form-stack { display: grid; gap: 1rem; margin-top: 1.45rem; }
label { color: #cce1ef; display: grid; font-size: .9rem; font-weight: 650; gap: .45rem; min-width: 0; }
input, select { background: #071d31; border: 1px solid #31516c; border-radius: .7rem; color: #f5fbff; font: inherit; min-width: 0; outline: none; padding: .78rem .85rem; }
input:focus { border-color: #34d295; box-shadow: 0 0 0 3px rgba(52, 210, 149, .16); }
.button { border: 0; border-radius: .72rem; cursor: pointer; font: inherit; font-weight: 750; padding: .86rem 1rem; }
.button.primary { background: linear-gradient(100deg, #1bc475, #2b78f5); color: #001426; }
.button.primary:hover { filter: brightness(1.08); }
.button.secondary { background: #123552; border: 1px solid #315f83; color: #e9f6ff; }
.button.danger { background: #b52f48; color: #fff; }
.notice, .error { border-radius: .7rem; font-size: .92rem; line-height: 1.45; margin-top: 1rem; padding: .8rem .9rem; }
.notice { background: rgba(41, 195, 128, .13); border: 1px solid rgba(68, 215, 151, .35); color: #d9fff0; }
.error { background: rgba(251, 112, 112, .11); border: 1px solid rgba(255, 150, 150, .32); color: #ffe3e3; }
.fine-print, .form-help { color: #91adc3; font-size: .88rem; line-height: 1.5; margin: 1.35rem 0 0; }
.fine-print a, .back-link, .text-link { color: #72dbc4; font-weight: 680; text-decoration: none; }
.back-link { display: inline-block; font-size: .9rem; margin-bottom: 1rem; }

.app-body { background: #071829; display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: #061322; border-right: 1px solid rgba(143, 194, 227, .15); display: flex; flex-direction: column; gap: 1.85rem; min-height: 100vh; padding: 1.6rem 1rem; position: sticky; top: 0; }
.company-name { border: 1px solid rgba(143, 194, 227, .16); border-radius: .72rem; color: #bed5e7; font-size: .83rem; overflow: hidden; padding: .7rem .8rem; text-overflow: ellipsis; white-space: nowrap; }
nav { display: grid; gap: .2rem; }
nav a { border-radius: .65rem; color: #a7c1d5; font-size: .94rem; font-weight: 620; padding: .72rem .8rem; text-decoration: none; }
nav a:hover, nav a.active { background: rgba(49, 144, 213, .17); color: #f1fbff; }
nav a.active { box-shadow: inset 3px 0 #32d49a; }
.logout-form { margin-top: auto; }
.logout-form button { background: transparent; border: 0; color: #9db6ca; cursor: pointer; font: inherit; padding: .72rem .8rem; }
.workspace { margin: 0 auto; max-width: 75rem; min-width: 0; overflow-x: clip; padding: 2rem clamp(1.25rem, 4vw, 4rem) 3.5rem; width: 100%; }
.topbar { align-items: center; display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 2.4rem; }
.topbar h1 { font-size: clamp(1.6rem, 3vw, 2.15rem); margin: .25rem 0 0; }
.profile { display: grid; gap: .15rem; text-align: right; }
.profile strong { font-size: .9rem; }
.profile span { color: #8eabc0; font-size: .8rem; }
.hero-panel { background: linear-gradient(115deg, rgba(28, 167, 144, .2), rgba(25, 96, 205, .16)); border: 1px solid rgba(87, 208, 188, .26); border-radius: 1.15rem; padding: clamp(1.4rem, 4vw, 2.35rem); }
.hero-panel h2 { font-size: clamp(1.4rem, 3.2vw, 2.25rem); max-width: 40rem; margin: .35rem 0 .65rem; }
.hero-panel p { max-width: 40rem; margin-bottom: 0; }
.stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin: 1rem 0; }
.stat-card, .explain-card, .empty-state, .member-list, .page-intro { background: #0a2034; border: 1px solid rgba(148, 203, 238, .14); border-radius: 1rem; padding: 1.25rem; }
.stat-card span { color: #9cb8cd; display: block; font-size: .84rem; font-weight: 650; }
.stat-card strong { color: #f3fbff; display: block; font-size: 2.2rem; letter-spacing: -.06em; margin: .35rem 0; }
.stat-card p { color: #8eaabe; font-size: .83rem; line-height: 1.45; margin: 0; }
.explain-card { margin-top: 1rem; }
.explain-card h2, .empty-state h2, .member-list h2, .page-intro h2 { font-size: 1.2rem; margin: 0; }
.explain-card p { margin: .55rem 0 1rem; max-width: 47rem; }
.page-intro { margin-bottom: 1rem; }
.page-intro p { margin: .5rem 0 0; max-width: 48rem; }
.empty-state { border-style: dashed; text-align: center; padding: 3rem 1.5rem; }
.empty-state p { margin: .6rem auto 0; max-width: 32rem; }
.setup-card { align-items: start; background: linear-gradient(110deg, rgba(30, 157, 125, .13), rgba(32, 107, 202, .12)); border: 1px solid rgba(87, 208, 188, .24); border-radius: 1rem; display: grid; gap: 1.25rem; grid-template-columns: minmax(12rem, .8fr) minmax(20rem, 1.2fr); margin-bottom: 1rem; padding: 1.25rem; }
.setup-card h2, .resource-list h2 { font-size: 1.18rem; margin: 0; }
.setup-card p { color: #a9c3d8; line-height: 1.5; margin: .5rem 0 0; }
.inline-form { align-items: end; display: grid; gap: .75rem; grid-template-columns: 1fr 1fr auto; }
.inline-form .button { white-space: nowrap; }
.resource-list { background: #0a2034; border: 1px solid rgba(148, 203, 238, .14); border-radius: 1rem; padding: 1.25rem; }
.resource-list article { align-items: center; border-top: 1px solid rgba(148, 203, 238, .14); display: flex; gap: 1rem; justify-content: space-between; padding: .9rem 0; }
.resource-list h2 + article { margin-top: .85rem; }
.resource-list article div { display: grid; gap: .2rem; }
.resource-list article span { color: #9ab4c8; font-size: .85rem; }
.resource-list em { background: rgba(72, 140, 242, .14); border-radius: 999px; color: #afcdfc; font-size: .77rem; font-style: normal; padding: .3rem .55rem; }
.lab-card { align-items: center; background: linear-gradient(110deg, rgba(30, 157, 125, .13), rgba(32, 107, 202, .12)); border: 1px solid rgba(87, 208, 188, .24); border-radius: 1rem; display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: space-between; padding: 1.3rem; }
.lab-card h2 { font-size: 1.2rem; margin: 0; }
.lab-card p { color: #a9c3d8; line-height: 1.5; margin: .5rem 0 0; max-width: 40rem; }
.lab-details { display: flex; flex-wrap: wrap; gap: .65rem 1.2rem; margin: 1rem 0 0; }
.lab-details div { border-left: 2px solid rgba(89, 208, 184, .45); display: grid; gap: .16rem; padding-left: .6rem; }
.lab-details dt { color: #8fb0c7; font-size: .74rem; font-weight: 650; }
.lab-details dd { color: #edf8ff; font-size: .88rem; margin: 0; }
.pairing-qr-shell { align-items: center; background: #fff; border-radius: .7rem; display: grid; height: 13rem; justify-items: center; overflow: hidden; padding: .5rem; width: 13rem; }
.pairing-qr-shell p { color: #31516c; font-size: .84rem; margin: 0; text-align: center; }
.pairing-qr { height: 100%; image-rendering: pixelated; width: 100%; }
.incoming-call { background: linear-gradient(110deg, rgba(41, 195, 128, .18), rgba(32, 107, 202, .16)); border: 1px solid rgba(104, 227, 172, .42); border-radius: 1rem; margin-top: 1rem; padding: 1.3rem; }
.incoming-call h2 { margin: .25rem 0; }
.incoming-call p { color: #c9e4f5; margin: .4rem 0; }
.call-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.member-list article { align-items: center; border-top: 1px solid rgba(148, 203, 238, .14); display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 0; }
.member-list h2 + article { margin-top: .85rem; }
.member-list article div { display: grid; gap: .16rem; min-width: 0; }
.member-list article span { color: #9ab4c8; font-size: .85rem; overflow-wrap: anywhere; }
.member-list em { background: rgba(50, 212, 154, .12); border-radius: 999px; color: #7ce9c7; font-size: .77rem; font-style: normal; padding: .3rem .55rem; text-transform: capitalize; }

@media (max-width: 1500px) {
  .setup-card { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .app-body { display: block; }
  .sidebar { min-height: auto; position: static; gap: 1rem; }
  .sidebar nav { display: flex; gap: .35rem; overflow-x: auto; }
  .sidebar nav a { flex: 0 0 auto; }
  .company-name, .logout-form { display: none; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .profile { text-align: left; }
  .stat-grid { grid-template-columns: 1fr; }
  .inline-form { grid-template-columns: 1fr; }
}