:root {
  color-scheme: light;
  --bg: #edf4f9;
  --panel: rgba(255,255,255,.58);
  --line: rgba(255,255,255,.82);
  --text: #10243a;
  --muted: #60758a;
  --cyan: #168ea8;
  --blue: #3f7cda;
  --green: #21966a;
  --amber: #c88722;
}
html { min-height: 100%; background: #f7fafc; }
body {
  background:
    radial-gradient(circle at 10% 8%, rgba(255,255,255,.94), transparent 28rem),
    radial-gradient(circle at 88% 2%, rgba(124,211,230,.32), transparent 31rem),
    radial-gradient(circle at 52% 100%, rgba(181,201,242,.25), transparent 36rem),
    linear-gradient(145deg, #edf5fa, #dfeaf3 55%, #f7fafc);
  color: var(--text);
  min-height: 100vh;
  background-attachment: fixed;
}
body:before { z-index: 0; opacity: .28; background-image: linear-gradient(rgba(20,69,102,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(20,69,102,.04) 1px, transparent 1px); }
.lab-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lab-backdrop span { position: absolute; top: -5%; bottom: -5%; right: auto; background: center/cover no-repeat; opacity: .18; filter: saturate(.72) brightness(.78) blur(1px); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, rgba(0,0,0,.82) 54%, transparent 82%); mask-image: radial-gradient(ellipse at center, #000 30%, rgba(0,0,0,.82) 54%, transparent 82%); }
.lab-backdrop span:nth-child(1) { left: -10%; width: 56%; background-image: url('/lab-rack.png'); }
.lab-backdrop span:nth-child(2) { left: 24%; width: 56%; background-image: url('/lab-workstation.png'); }
.lab-backdrop span:nth-child(3) { left: 58%; width: 56%; background-image: url('/lab-network.png'); }
.shell, .wrap { position: relative; z-index: 1; }
.brand strong, h1, h2, h3, .card h2, .visual-copy strong, .tile h3, .info-card strong { font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif; }
.eyebrow { color: var(--cyan); }
.brand strong, h1, h2, h3, .card h2, .visual-copy strong { color: var(--text); }
.hero p, .lead, .tile p, .card p, .section small { color: var(--muted); }
.chip { color: #426077; background: rgba(255,255,255,.46); border-color: rgba(255,255,255,.9); box-shadow: 0 4px 16px rgba(75,111,143,.06); }
.mark { border-color: rgba(255,255,255,.9); box-shadow: 0 8px 26px rgba(57,102,135,.14); }
.mark { width: 72px; height: 72px; border-radius: 22px; }
.card, .tile, .info-card {
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.38));
  border-color: rgba(255,255,255,.9);
  box-shadow: 0 22px 60px rgba(61,96,126,.13), inset 0 1px rgba(255,255,255,.95);
  backdrop-filter: blur(24px) saturate(135%);
}
.field label, .info-card span { color: #557086; }
.field input { background: rgba(255,255,255,.62); border-color: rgba(130,165,190,.3); color: var(--text); box-shadow: inset 0 1px 3px rgba(52,86,112,.04); }
.field input:focus { border-color: rgba(22,142,168,.65); box-shadow: 0 0 0 4px rgba(22,142,168,.11); }
button { background: linear-gradient(100deg, #70dbe5, #79aaf0); color: #10243a; box-shadow: 0 12px 28px rgba(62,140,183,.2); }
.hint, .footer { color: #71869a; }
.visual { border-color: rgba(255,255,255,.82); box-shadow: 0 18px 45px rgba(59,93,122,.12); }
.visual { background-image: linear-gradient(120deg, rgba(255,255,255,.68), rgba(222,240,249,.22)), url('/login-hero.png'); }
.visual:after { background: linear-gradient(90deg, rgba(237,245,250,.78), rgba(237,245,250,.08) 76%); }
.visual-copy strong { color: var(--text); text-shadow: 0 2px 16px rgba(255,255,255,.65); }
.pulse { color: var(--green); }
.pulse { color: #31566c; font-weight: 700; }
.status { color: var(--green); }
.logout { color: #557086; border-color: rgba(255,255,255,.9); background: rgba(255,255,255,.4); }
.logout:hover { color: var(--text); border-color: rgba(22,142,168,.5); background: rgba(255,255,255,.72); }
.tile:after { opacity: .12; }
.tile:hover { border-color: rgba(22,142,168,.4); box-shadow: 0 20px 46px rgba(58,98,130,.17); }
.icon { background: rgba(255,255,255,.48); border-color: rgba(255,255,255,.88); box-shadow: 0 8px 22px rgba(62,100,133,.08); }
.icon { width: 72px; height: 72px; border-radius: 20px; }
.icon img { width: 48px; height: 48px; }
.icon svg { width: 40px; height: 40px; }
.arrow { color: var(--cyan); }
.tile:focus-visible, .logout:focus-visible, button:focus-visible, .field input:focus-visible { outline: 3px solid rgba(22,142,168,.55); outline-offset: 3px; }
@media (max-width: 800px) {
  .shell, .hero, .card, .hero p, .chips, .visual { width: calc(100vw - 36px); min-width: 0; max-width: calc(100vw - 36px); }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { width: calc(100vw - 36px); max-width: calc(100vw - 36px); font-size: clamp(42px, 13vw, 58px); overflow-wrap: anywhere; }
  .hero p { font-size: 16px; overflow-wrap: anywhere; }
  .chips { gap: 8px; }
  .chip { font-size: 11px; padding: 8px 10px; }
  .visual-copy { inset: 18px; flex-wrap: wrap; gap: 8px; }
  .visual-copy strong { font-size: 18px; }
  .pulse { font-size: 11px; }
  .lab-backdrop { position: fixed; height: 100vh; height: 100dvh; min-height: 100%; transform: translateZ(0); }
}

/* Match the service icon tile for the homepage brand mark. */
.mark { background: rgba(255,255,255,.48); border-color: rgba(255,255,255,.88); box-shadow: 0 8px 22px rgba(62,100,133,.08); width: 72px; height: 72px; border-radius: 20px; }
.mark img { width: 48px; height: 48px; object-fit: contain; }