:root {
  color-scheme: dark;
  --bg: #06101e;
  --bg-elevated: #0a1728;
  --surface: rgba(13, 29, 48, .86);
  --surface-solid: #0d1d30;
  --surface-soft: rgba(17, 39, 62, .72);
  --surface-hover: rgba(28, 58, 84, .72);
  --line: rgba(138, 195, 218, .14);
  --line-strong: rgba(95, 208, 241, .28);
  --text: #edf8fc;
  --muted: #8fa8b7;
  --muted-strong: #b8cad3;
  --cyan: #28c7ef;
  --cyan-deep: #078ab4;
  --cyan-soft: rgba(40, 199, 239, .12);
  --amber: #ffb547;
  --amber-soft: rgba(255, 181, 71, .13);
  --violet: #a78bfa;
  --green: #36d399;
  --green-soft: rgba(54, 211, 153, .12);
  --yellow: #f6c851;
  --yellow-soft: rgba(246, 200, 81, .13);
  --orange: #ff8f4c;
  --orange-soft: rgba(255, 143, 76, .12);
  --red: #fb7185;
  --red-soft: rgba(251, 113, 133, .13);
  --shadow: 0 22px 50px rgba(0, 5, 14, .3);
  --sidebar-width: 264px;
  --radius: 20px;
  --font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #edf5f8;
  --bg-elevated: #f7fbfc;
  --surface: rgba(255, 255, 255, .88);
  --surface-solid: #ffffff;
  --surface-soft: rgba(229, 241, 245, .82);
  --surface-hover: rgba(215, 237, 244, .82);
  --line: rgba(25, 83, 105, .12);
  --line-strong: rgba(6, 142, 184, .25);
  --text: #112b3a;
  --muted: #607c89;
  --muted-strong: #3f626f;
  --cyan: #078db6;
  --cyan-deep: #046f91;
  --cyan-soft: rgba(7, 141, 182, .1);
  --amber: #d47c00;
  --amber-soft: rgba(212, 124, 0, .1);
  --violet: #7756d8;
  --green: #09865d;
  --green-soft: rgba(9, 134, 93, .1);
  --yellow: #aa7600;
  --yellow-soft: rgba(170, 118, 0, .1);
  --orange: #d45e1a;
  --orange-soft: rgba(212, 94, 26, .1);
  --red: #c8354e;
  --red-soft: rgba(200, 53, 78, .1);
  --shadow: 0 20px 45px rgba(32, 72, 87, .12);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 75% -10%, rgba(31, 181, 224, .08), transparent 35%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--cyan);
  text-decoration: none;
}

img {
  max-width: 100%;
}

code {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--cyan);
  font-family: "Cascadia Code", "SFMono-Regular", monospace;
  font-size: .78rem;
  padding: .18rem .42rem;
}

h1, h2, h3, p {
  margin-top: 0;
}

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: -.025em;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(40, 199, 239, .38);
  outline-offset: 2px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.boot-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: var(--bg);
  z-index: 1000;
}

.boot-screen > img {
  animation: breathe 2s ease-in-out infinite;
}

.boot-screen p {
  color: var(--muted);
  font-size: .9rem;
}

.boot-orbit {
  position: absolute;
  width: 116px;
  height: 116px;
  border: 1px solid transparent;
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin 1.7s linear infinite;
}

.button,
.icon-button,
.user-chip {
  border: 0;
  cursor: pointer;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 42px;
  padding: .7rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.button:hover:not(:disabled) {
  transform: translateY(-2px);
}

.button:disabled {
  cursor: not-allowed;
  filter: grayscale(.35);
  opacity: .58;
}

.button-primary {
  background: linear-gradient(135deg, var(--cyan-deep), var(--cyan));
  box-shadow: 0 12px 26px rgba(7, 141, 182, .22);
  color: #fff;
}

.button-primary:hover:not(:disabled) {
  box-shadow: 0 15px 35px rgba(7, 141, 182, .34);
}

.button-secondary {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--text);
}

.button-secondary:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: var(--surface-hover);
}

.button-danger,
.button-danger-soft {
  background: var(--red);
  color: #fff;
}

.button-danger-soft {
  border-color: rgba(251, 113, 133, .24);
  background: var(--red-soft);
  color: var(--red);
}

.button-large {
  min-height: 56px;
  border-radius: 15px;
  font-size: 1rem;
}

.icon-button {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--muted-strong);
  transition: .2s ease;
}

.icon-button:hover {
  border-color: var(--line-strong);
  background: var(--surface-hover);
  color: var(--cyan);
  transform: translateY(-1px);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: .48rem;
  margin-bottom: .45rem;
  color: var(--cyan);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(54, 211, 153, .1), 0 0 15px rgba(54, 211, 153, .55);
  animation: pulse-dot 2s ease infinite;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.section-gap {
  margin-top: 1.25rem;
}

/* Login */
.login-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr);
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 23% 45%, rgba(19, 166, 212, .16), transparent 28%),
    radial-gradient(circle at 72% 28%, rgba(255, 181, 71, .08), transparent 25%),
    linear-gradient(140deg, #06101e 0%, #071b2c 52%, #04101d 100%);
  color: #edf8fc;
}

:root[data-theme="light"] .login-shell {
  background:
    radial-gradient(circle at 23% 45%, rgba(19, 166, 212, .18), transparent 28%),
    linear-gradient(140deg, #eaf5f8, #dceef3 55%, #f6fafb);
  color: #112b3a;
}

.time-grid {
  position: absolute;
  inset: 0;
  opacity: .32;
  background-image:
    linear-gradient(rgba(92, 198, 225, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 198, 225, .08) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to right, #000, transparent 80%);
  transform: perspective(600px) rotateX(58deg) scale(1.5) translateY(26%);
  transform-origin: bottom;
  animation: grid-drift 16s linear infinite;
}

.login-story,
.login-card-wrap {
  position: relative;
  z-index: 2;
}

.login-story {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 74px);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .22em;
}

.story-copy {
  max-width: 730px;
  margin-block: auto;
}

.story-copy h1 {
  margin-bottom: 1.5rem;
  font-size: clamp(3.6rem, 7vw, 7.3rem);
  line-height: .94;
  letter-spacing: -.07em;
}

.story-copy h1 span {
  background: linear-gradient(100deg, #38d6fb 15%, #92eaff 55%, #ffbc57);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.story-copy > p:last-child {
  max-width: 570px;
  color: #9db6c4;
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  line-height: 1.7;
}

:root[data-theme="light"] .story-copy > p:last-child {
  color: #527481;
}

.signal-strip {
  display: flex;
  gap: 2rem;
}

.signal-strip div {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #a9c2ce;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

:root[data-theme="light"] .signal-strip div {
  color: #486c78;
}

.signal-strip i {
  color: var(--cyan);
}

.login-card-wrap {
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 100vh;
  padding: 40px;
}

.login-card {
  position: relative;
  width: min(100%, 430px);
  padding: 46px;
  border: 1px solid rgba(123, 218, 242, .18);
  border-radius: 28px;
  background: rgba(8, 25, 42, .72);
  box-shadow: 0 38px 90px rgba(0, 4, 12, .42);
  backdrop-filter: blur(24px);
  animation: card-arrive .8s cubic-bezier(.2, .8, .2, 1) both;
}

:root[data-theme="light"] .login-card {
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 38px 90px rgba(35, 91, 109, .18);
}

.login-card-icon {
  display: grid;
  width: 56px;
  height: 56px;
  margin-bottom: 1.5rem;
  place-items: center;
  border: 1px solid rgba(40, 199, 239, .25);
  border-radius: 16px;
  background: var(--cyan-soft);
  color: var(--cyan);
  font-size: 1.25rem;
}

.login-card h2 {
  margin-bottom: .8rem;
  font-size: 2rem;
}

.login-card > p:not(.eyebrow) {
  margin-bottom: 1.8rem;
  color: #93adba;
  line-height: 1.65;
}

:root[data-theme="light"] .login-card > p:not(.eyebrow) {
  color: #5a7884;
}

.login-card .button {
  width: 100%;
}

.login-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin-top: 1.25rem;
  color: #7895a3;
  font-size: .75rem;
}

.login-clock {
  position: absolute;
  width: 540px;
  height: 540px;
  border: 1px solid rgba(48, 199, 238, .12);
  border-radius: 50%;
  background: repeating-conic-gradient(from -1deg, rgba(66, 203, 238, .25) 0deg .45deg, transparent .45deg 6deg);
  mask-image: radial-gradient(circle, transparent 48%, #000 49%, #000 51%, transparent 52%, transparent 62%, #000 63%, transparent 64%);
  opacity: .7;
  animation: slow-spin 120s linear infinite;
}

.clock-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 2px;
  border-radius: 2px;
  background: var(--cyan);
  transform-origin: bottom center;
}

.clock-hour {height: 104px; transform: rotate(55deg);}
.clock-minute {height: 146px; transform: rotate(145deg); background: #bdefff;}
.clock-second {height: 170px; transform: rotate(242deg); background: var(--amber);}
.clock-center {
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 20px var(--cyan);
}

.login-orbit {
  position: absolute;
  border: 1px solid rgba(44, 204, 243, .09);
  border-radius: 50%;
}

.orbit-one {
  top: -28vw;
  right: -20vw;
  width: 72vw;
  height: 72vw;
}

.orbit-two {
  right: 22vw;
  bottom: -45vw;
  width: 80vw;
  height: 80vw;
}

.theme-fab {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 5;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(119, 204, 226, .22);
  border-radius: 50%;
  background: rgba(11, 30, 46, .72);
  color: #bad1dc;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.login-version {
  margin-top: 1.3rem;
  color: #658290;
  font-size: .72rem;
}

/* Shell */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 0;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  padding: 18px 14px;
  border-right: 1px solid var(--line);
  background: rgba(7, 20, 36, .94);
  transition: width .3s cubic-bezier(.2, .8, .2, 1), transform .3s ease;
  backdrop-filter: blur(22px);
}

:root[data-theme="light"] .sidebar {
  background: rgba(249, 253, 254, .94);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 0 7px;
}

.sidebar-brand > a {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .18em;
}

.sidebar-brand .icon-button {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}

.main-nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  margin-top: 30px;
}

.main-nav a {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 47px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 600;
  transition: .2s ease;
}

.main-nav a i {
  width: 20px;
  color: var(--muted);
  font-size: 1rem;
  text-align: center;
}

.main-nav a:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.main-nav a.active {
  border-color: rgba(40, 199, 239, .16);
  background: linear-gradient(90deg, var(--cyan-soft), transparent);
  box-shadow: inset 3px 0 var(--cyan);
  color: var(--text);
}

.main-nav a.active i {
  color: var(--cyan);
}

.sidebar-security {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-soft);
  overflow: hidden;
}

.sidebar-security > i {
  color: var(--green);
}

.sidebar-security div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.sidebar-security strong {
  font-size: .78rem;
}

.sidebar-security small {
  color: var(--muted);
  font-size: .68rem;
}

.app-column {
  grid-column: 2;
  min-width: 0;
}

.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  min-height: 84px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px clamp(20px, 3.5vw, 54px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(20px);
}

.topbar-leading {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.topbar-kicker {
  margin-bottom: .1rem;
  color: var(--muted);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.topbar h1 {
  margin-bottom: 0;
  font-size: 1.18rem;
}

.topbar-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
}

.secure-time {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 40px;
  padding: 0 .8rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--muted-strong);
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
}

.secure-time i {
  color: var(--cyan);
}

.user-chip {
  display: flex;
  min-width: 210px;
  align-items: center;
  gap: .7rem;
  padding: 5px 8px;
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.user-chip:hover {
  background: var(--surface-soft);
}

.user-chip > span,
.user-chip > img {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--cyan-soft);
  color: var(--cyan);
  object-fit: cover;
  font-size: .75rem;
  font-weight: 800;
}

.user-chip div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.user-chip strong,
.user-chip small {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-chip strong {font-size: .78rem;}
.user-chip small {color: var(--muted); font-size: .68rem;}
.user-chip > i {color: var(--muted); font-size: .7rem;}

.user-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 220px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.trust-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  color: var(--muted);
  font-size: .8rem;
}

.trust-mini strong {color: var(--green);}

.user-popover button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .7rem;
  padding: 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--red);
  cursor: pointer;
  text-align: left;
}

.user-popover button:hover {background: var(--red-soft);}

.page-content {
  width: min(100%, 1540px);
  min-height: calc(100vh - 84px);
  margin-inline: auto;
  padding: clamp(24px, 3.5vw, 54px);
}

.page-loader {
  display: grid;
  min-height: 50vh;
  place-content: center;
  justify-items: center;
  color: var(--muted);
}

.loader-dial {
  display: grid;
  width: 68px;
  height: 68px;
  margin-bottom: 1rem;
  place-items: center;
  border: 1px solid var(--line);
  border-top-color: var(--cyan);
  border-radius: 50%;
  color: var(--cyan);
  animation: spin 1.5s linear infinite;
}

.loader-dial i {animation: reverse-spin 1.5s linear infinite;}

.mobile-menu,
.sidebar-scrim {
  display: none;
}

.sidebar-collapsed {
  --sidebar-width: 82px;
}

.sidebar-collapsed .sidebar-brand > a span,
.sidebar-collapsed .main-nav a span,
.sidebar-collapsed .sidebar-security div,
.sidebar-collapsed .sidebar-brand .icon-button {
  display: none;
}

.sidebar-collapsed .sidebar-brand {
  justify-content: center;
}

.sidebar-collapsed .main-nav a {
  justify-content: center;
  padding-inline: 0;
}

.sidebar-collapsed .sidebar-security {
  justify-content: center;
}

/* Pages */
.hero-panel {
  position: relative;
  display: flex;
  min-height: 190px;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: clamp(28px, 4vw, 52px);
  overflow: hidden;
  border: 1px solid rgba(42, 201, 239, .18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 80% 10%, rgba(255, 181, 71, .13), transparent 28%),
    radial-gradient(circle at 20% 100%, rgba(40, 199, 239, .15), transparent 38%),
    linear-gradient(120deg, rgba(12, 36, 58, .95), rgba(8, 24, 42, .88));
  box-shadow: var(--shadow);
}

:root[data-theme="light"] .hero-panel {
  background:
    radial-gradient(circle at 80% 10%, rgba(255, 181, 71, .15), transparent 28%),
    linear-gradient(120deg, #fff, #e8f5f8);
}

.hero-panel::after {
  position: absolute;
  right: -70px;
  width: 310px;
  height: 310px;
  border: 1px solid rgba(40, 199, 239, .1);
  border-radius: 50%;
  box-shadow: 0 0 0 35px rgba(40, 199, 239, .025), 0 0 0 70px rgba(40, 199, 239, .02);
  content: "";
  animation: breathe 5s ease-in-out infinite;
}

.hero-panel > * {position: relative; z-index: 1;}
.hero-panel h2 {margin-bottom: .65rem; font-size: clamp(1.7rem, 3vw, 2.5rem);}
.hero-panel p:last-child {margin-bottom: 0; color: var(--muted-strong);}

.check-button {
  position: relative;
  display: flex;
  min-width: 290px;
  align-items: center;
  gap: 1rem;
  padding: 14px 18px;
  border: 1px solid rgba(40, 199, 239, .3);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(8, 136, 177, .82), rgba(22, 178, 217, .82));
  box-shadow: 0 18px 35px rgba(2, 110, 145, .25);
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: .25s ease;
}

.check-button:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 22px 45px rgba(2, 137, 178, .35);
}

.check-button:disabled {cursor: default; filter: grayscale(.65); opacity: .68;}

.check-button > i:first-of-type {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px;
  background: rgba(255, 255, 255, .1);
  font-size: 1.3rem;
}

.check-button > span:not(.check-pulse) {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.check-button small {opacity: .75; font-size: .68rem;}
.check-button strong {font-family: var(--font-display); font-size: 1rem;}
.check-button > i:last-child {font-size: .8rem;}

.check-pulse {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(65, 213, 248, .45);
  border-radius: inherit;
  animation: check-pulse 2.5s ease-out infinite;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.metric-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding: 20px;
}

.metric-card > div {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 13px;
  background: var(--cyan-soft);
  color: var(--cyan);
}

.metric-card.violet > div {background: rgba(167, 139, 250, .12); color: var(--violet);}
.metric-card.amber > div {background: var(--amber-soft); color: var(--amber);}
.metric-card > span {display: flex; min-width: 0; flex: 1; flex-direction: column;}
.metric-card strong {font-family: var(--font-display); font-size: 1.25rem;}
.metric-card small {overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap;}
.metric-card > i {color: var(--muted); font-size: .72rem;}

.week-panel {
  margin-top: 1rem;
  padding: clamp(18px, 2vw, 28px);
}

.panel-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.panel-title h3 {margin-bottom: .3rem; font-size: 1.12rem;}
.panel-title p:not(.eyebrow) {color: var(--muted); font-size: .84rem;}
.panel-title > i {color: var(--cyan); font-size: 1.25rem;}

.text-link {
  color: var(--cyan);
  font-size: .78rem;
  font-weight: 700;
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 1.3rem;
  overflow-x: auto;
  scrollbar-color: var(--line-strong) transparent;
}

.day-column {
  min-width: 140px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.day-column.current {
  border-color: var(--line-strong);
  box-shadow: inset 0 3px var(--cyan);
}

.day-column > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .4rem;
}

.day-column > header span {
  color: var(--muted);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.day-column > header strong {font-family: var(--font-display); font-size: 1.25rem;}
.day-column.current > header strong {color: var(--cyan);}

.day-schedule {
  overflow: hidden;
  margin-bottom: .6rem;
  color: var(--muted);
  font-size: .65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.check-stack {display: flex; flex-direction: column; gap: 6px;}

.week-check {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 7px;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--surface);
}

.week-check > i:first-child {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 7px;
  font-size: .62rem;
}

.week-check > span {display: flex; min-width: 0; flex: 1; flex-direction: column;}
.week-check small {overflow: hidden; color: var(--muted); font-size: .55rem; text-overflow: ellipsis; white-space: nowrap;}
.week-check strong {font-size: .7rem; font-variant-numeric: tabular-nums;}
.week-check > i:last-child {font-size: .65rem;}
.week-check.completed {border-color: rgba(54, 211, 153, .14); background: var(--green-soft);}
.week-check.completed i {color: var(--green);}
.week-check.today {border-color: rgba(246, 200, 81, .17); background: var(--yellow-soft);}
.week-check.today i {color: var(--yellow);}
.week-check.future {border-color: rgba(255, 143, 76, .14); background: var(--orange-soft);}
.week-check.future i {color: var(--orange);}
.week-check.missed {opacity: .62;}

.day-off {
  display: grid;
  min-height: 100px;
  place-content: center;
  justify-items: center;
  color: var(--muted);
  font-size: .68rem;
}

.day-off i {margin-bottom: .4rem;}

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.page-heading h2 {margin-bottom: .4rem; font-size: clamp(1.75rem, 3vw, 2.35rem);}
.page-heading > div > p:last-child {max-width: 720px; margin-bottom: 0; color: var(--muted); line-height: 1.55;}

.legend {display: flex; flex-wrap: wrap; gap: .9rem !important; font-size: .72rem;}
.legend span {display: flex; align-items: center; gap: .4rem;}
.status-dot {display: inline-block; width: 8px; height: 8px; border-radius: 50%;}
.status-dot.completed {background: var(--green);}
.status-dot.today {background: var(--yellow);}
.status-dot.future {background: var(--orange);}

/* Tables */
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.search-field {
  display: flex;
  width: min(100%, 420px);
  align-items: center;
  gap: .7rem;
  padding: 0 .85rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--muted);
}

.search-field:focus-within {border-color: var(--line-strong); box-shadow: 0 0 0 3px var(--cyan-soft);}
.search-field input {width: 100%; height: 42px; border: 0; outline: 0; background: transparent;}
.record-count {color: var(--muted); font-size: .75rem;}

.table-scroll {
  overflow: auto;
  border-radius: inherit;
  scrollbar-color: var(--line-strong) transparent;
}

table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .79rem;
}

th {
  position: sticky;
  z-index: 2;
  top: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-solid);
  color: var(--muted);
  font-size: .64rem;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

td {
  max-width: 260px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted-strong);
}

tbody tr:last-child td {border-bottom: 0;}
tbody tr:hover td {background: var(--surface-soft);}

.actions-column {
  position: sticky;
  z-index: 3;
  right: 0;
  width: 86px;
  min-width: 86px;
  background: var(--surface-solid);
  box-shadow: -12px 0 18px -18px rgba(0, 0, 0, .6);
  text-align: center;
}

tbody tr:hover .actions-column {background: var(--bg-elevated);}

.person-cell {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.person-cell > span,
.heading-person > span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 11px;
  background: var(--cyan-soft);
  color: var(--cyan);
  font-size: .7rem;
  font-weight: 800;
}

.person-cell > div {display: flex; min-width: 0; flex-direction: column;}
.person-cell strong,
.person-cell small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person-cell strong {color: var(--text); font-size: .82rem;}
.person-cell small, .cell-help {display: block; margin-top: .15rem; color: var(--muted); font-size: .68rem;}
.truncate {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.trust-bar {
  display: flex;
  min-width: 100px;
  align-items: center;
  gap: .6rem;
}

.trust-bar > span {
  width: 62px;
  height: 5px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface-hover);
}

.trust-bar > span i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amber), var(--green));
}

.trust-bar strong {color: var(--text); font-size: .69rem;}

.badge,
.check-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .55rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface-soft);
  font-size: .65rem;
  font-weight: 700;
  white-space: nowrap;
}

.badge.success {border-color: rgba(54, 211, 153, .2); background: var(--green-soft); color: var(--green);}
.badge.warning {border-color: rgba(246, 200, 81, .2); background: var(--yellow-soft); color: var(--yellow);}
.badge.danger {border-color: rgba(251, 113, 133, .2); background: var(--red-soft); color: var(--red);}
.badge.info {border-color: rgba(40, 199, 239, .2); background: var(--cyan-soft); color: var(--cyan);}
.badge.neutral {color: var(--muted);}
.empty-table {padding: 3rem; color: var(--muted); text-align: center;}
.empty-table i {margin-right: .55rem;}

/* Detail */
.heading-person {display: flex; align-items: center; gap: 1rem;}
.heading-person > span {width: 62px; height: 62px; flex-basis: 62px; border-radius: 18px; font-size: 1rem;}
.heading-person h2 {margin-bottom: .2rem;}
.heading-person p:last-child {display: flex; align-items: center; gap: .5rem;}
.heading-actions {display: flex; gap: .6rem;}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.detail-grid .panel,
.section-gap.panel {
  padding: clamp(20px, 2.5vw, 30px);
}

.trust-score-large {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  margin: 1.2rem 0;
}

.trust-score-large strong {
  font-family: var(--font-display);
  font-size: 2.6rem;
}

.trust-score-large small {font-size: 1rem;}

.trust-score-large span {
  position: relative;
  width: 120px;
  height: 8px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--surface-hover);
}

.trust-score-large span::after {
  display: block;
  width: calc(var(--score) * 1%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amber), var(--green));
  content: "";
}

.trust-card > p {margin-bottom: 0; color: var(--muted); font-size: .78rem; line-height: 1.55;}

.timeline-list {display: flex; flex-direction: column; gap: .7rem; margin-top: 1rem;}
.timeline-list > div {display: flex; align-items: center; gap: .7rem; padding: .65rem; border-radius: 11px; background: var(--surface-soft);}
.timeline-list > div > i {color: var(--cyan);}
.timeline-list > div div {display: flex; flex-direction: column;}
.timeline-list strong {font-size: .78rem;}
.timeline-list small {color: var(--muted); font-size: .68rem;}
.empty-inline {margin: 1rem 0 0; color: var(--muted); font-size: .78rem;}

.stored-photos,
.image-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .8rem;
  margin: 1rem 0;
}

.stored-photos figure,
.image-preview {
  position: relative;
  min-height: 128px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.stored-photos img,
.image-preview img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.stored-photos .icon-button,
.image-remove {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 32px;
  height: 32px;
  background: rgba(5, 15, 24, .78);
  color: #fff;
  backdrop-filter: blur(8px);
}

.image-picker {
  padding: 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 15px;
  background: var(--cyan-soft);
}

.image-picker-actions {display: flex; flex-wrap: wrap; gap: .6rem;}
.image-preview figcaption {overflow: hidden; padding: 7px 9px; color: var(--muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap;}
.form-actions {display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1.25rem;}

.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: .85rem;
  margin-top: 1rem;
}

.device-card {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.device-card.revoked {opacity: .55;}
.device-icon {display: grid; width: 43px; height: 43px; flex: 0 0 43px; place-items: center; border-radius: 12px; background: var(--cyan-soft); color: var(--cyan);}
.device-card > div:nth-child(2) {display: flex; min-width: 0; flex: 1; flex-direction: column;}
.device-card strong {font-size: .8rem;}
.device-card small, .device-card span {overflow: hidden; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap;}

/* Catalogs */
.catalog-card-grid,
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1rem;
}

.schedule-card,
.role-card {
  padding: 22px;
  transition: transform .2s ease, border-color .2s ease;
}

.schedule-card:hover,
.role-card:hover {border-color: var(--line-strong); transform: translateY(-2px);}

.schedule-card-head {display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;}
.schedule-card-head h3 {margin: .5rem 0 .8rem; font-size: 1.15rem;}
.schedule-card > p {display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .72rem;}
.mini-week {display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 1rem 0;}
.mini-week span {display: grid; aspect-ratio: 1; place-items: center; border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: .62rem; font-weight: 800;}
.mini-week .workday {background: var(--cyan-soft); color: var(--cyan);}
.schedule-times {display: flex; align-items: center; justify-content: space-between; padding: .8rem; border-radius: 12px; background: var(--surface-soft);}
.schedule-times span {display: flex; flex-direction: column;}
.schedule-times small {color: var(--muted); font-size: .6rem;}
.schedule-times strong {font-size: .83rem;}
.schedule-times > i {color: var(--muted);}

.role-card > code {display: inline-block; margin: .7rem 0;}
.role-card > p {min-height: 42px; color: var(--muted); font-size: .76rem; line-height: 1.5;}
.permission-cloud {display: flex; flex-wrap: wrap; gap: 5px;}
.permission-cloud span {max-width: 100%; overflow: hidden; padding: 4px 7px; border-radius: 7px; background: var(--surface-soft); color: var(--muted); font-family: monospace; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap;}

.security-explainer {display: flex; align-items: center; gap: 1.5rem; padding: 28px;}
.security-visual {position: relative; display: grid; width: 92px; height: 92px; flex: 0 0 92px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--cyan); font-size: 2.2rem;}
.security-visual span {position: absolute; inset: -8px; border: 1px solid transparent; border-top-color: var(--amber); border-radius: 50%; animation: spin 3s linear infinite;}
.security-explainer h3 {margin-bottom: .45rem;}
.security-explainer p {margin-bottom: 0; color: var(--muted); line-height: 1.55;}

/* Forms and dialogs */
.modal {
  width: min(94vw, 720px);
  max-height: 88vh;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--surface-solid);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .45);
  color: var(--text);
}

.modal::backdrop {
  background: rgba(1, 8, 16, .7);
  backdrop-filter: blur(7px);
}

.modal-form {padding: clamp(22px, 4vw, 36px);}
.modal-wide {width: 100%;}
.modal:has(.modal-wide) {width: min(96vw, 1060px);}
.modal-head {display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem;}
.modal-head h2 {margin-bottom: 0; font-size: 1.5rem;}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .42rem;
}

.field > span {
  color: var(--muted-strong);
  font-size: .72rem;
  font-weight: 700;
}

.field input,
.field select,
.schedule-editor input {
  width: 100%;
  height: 43px;
  padding: 0 .75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  background: var(--surface-soft);
  color: var(--text);
}

.field input:focus,
.field select:focus,
.schedule-editor input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-soft);
}

.field small,
.field-help {
  color: var(--muted);
  font-size: .65rem;
  line-height: 1.45;
}

.field small a {font-weight: 700;}
.field-toggle {justify-content: center;}
.field-toggle input {width: 18px; height: 18px;}
.temporal-field > div {position: relative;}
.temporal-field > div i {position: absolute; top: 50%; right: 12px; color: var(--cyan); pointer-events: none; transform: translateY(-50%);}
.temporal-field input::-webkit-calendar-picker-indicator {opacity: 0; cursor: pointer;}

.filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.filter-bar .field {min-width: 200px;}

.schedule-editor {
  margin-top: 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.schedule-editor-head,
.schedule-editor-row {
  display: grid;
  grid-template-columns: 150px repeat(4, minmax(110px, 1fr));
  min-width: 720px;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
}

.schedule-editor-head {
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.schedule-editor-row {border-bottom: 1px solid var(--line);}
.schedule-editor-row:last-child {border-bottom: 0;}
.day-switch {display: flex; align-items: center; gap: .6rem; font-size: .76rem; font-weight: 700;}
.day-switch input {width: 17px; height: 17px; accent-color: var(--cyan);}

.permission-editor {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem;}
.permission-editor.single-column {grid-template-columns: 1fr;}
.permission-editor fieldset {display: flex; flex-direction: column; gap: 7px; padding: 14px; border: 1px solid var(--line); border-radius: 13px;}
.permission-editor legend {padding: 0 .5rem; color: var(--cyan); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;}
.permission-editor label {display: flex; gap: .7rem; align-items: flex-start; padding: 7px; border-radius: 8px;}
.permission-editor label:hover {background: var(--surface-soft);}
.permission-editor input {margin-top: 3px; accent-color: var(--cyan);}
.permission-editor label span {display: flex; flex-direction: column;}
.permission-editor label strong {font-size: .72rem;}
.permission-editor label small {color: var(--muted); font-size: .59rem; line-height: 1.45;}

/* Camera */
.camera-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 8, 16, .9);
  backdrop-filter: blur(14px);
}

.camera-panel {
  width: min(94vw, 680px);
  padding: 22px;
  border: 1px solid rgba(62, 206, 240, .25);
  border-radius: 22px;
  background: #081727;
  box-shadow: 0 35px 90px rgba(0, 0, 0, .5);
  color: #edf8fc;
}

.camera-title {text-align: center;}
.camera-title .eyebrow {justify-content: center;}
.camera-title h2 {margin-bottom: 1rem;}
.camera-stage {position: relative; overflow: hidden; aspect-ratio: 16/9; border-radius: 16px; background: #020812;}
.camera-stage video {width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1);}
.face-guide {position: absolute; top: 10%; bottom: 10%; left: 30%; right: 30%; border: 2px solid rgba(56, 213, 250, .75); border-radius: 48% 48% 43% 43%; box-shadow: 0 0 40px rgba(40, 199, 239, .14), inset 0 0 40px rgba(40, 199, 239, .08);}
.scan-line {position: absolute; right: 26%; left: 26%; height: 1px; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); animation: scan-face 2.4s ease-in-out infinite;}
.camera-status {margin: 1rem 0 .4rem; color: #bdefff; font-weight: 700; text-align: center;}
.camera-panel .field-help {text-align: center;}

/* Reports / audit */
.proofs {display: flex; gap: .45rem; color: var(--muted);}
.proofs .ok {color: var(--green);}
.method {display: inline-block; min-width: 44px; padding: 3px 5px; border-radius: 5px; background: var(--surface-soft); color: var(--muted); font-family: monospace; font-size: .6rem; text-align: center;}
.method.post, .method.put {background: var(--cyan-soft); color: var(--cyan);}
.method.delete {background: var(--red-soft); color: var(--red);}
.http-status {display: inline-block; min-width: 36px; padding: 3px 5px; border-radius: 5px; text-align: center;}
.status-2 {background: var(--green-soft); color: var(--green);}
.status-4, .status-5 {background: var(--red-soft); color: var(--red);}

.empty-state {
  display: grid;
  min-height: 380px;
  place-content: center;
  justify-items: center;
  padding: 40px;
  text-align: center;
}

.empty-state > i {
  display: grid;
  width: 72px;
  height: 72px;
  margin-bottom: 1.2rem;
  place-items: center;
  border-radius: 20px;
  background: var(--cyan-soft);
  color: var(--cyan);
  font-size: 1.7rem;
}

.empty-state h2 {margin-bottom: .5rem;}
.empty-state p {max-width: 520px; color: var(--muted);}
.empty-state .button {margin-top: .8rem;}
.error-state > i {background: var(--red-soft); color: var(--red);}

/* Toast */
.toast-region {
  position: fixed;
  z-index: 200;
  top: 20px;
  right: 20px;
  display: flex;
  width: min(390px, calc(100vw - 40px));
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: var(--surface-solid);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: auto;
  transform: translateX(25px);
  transition: .25s ease;
}

.toast.visible {opacity: 1; transform: translateX(0);}
.toast > i {color: var(--cyan);}
.toast.success > i {color: var(--green);}
.toast.error > i {color: var(--red);}
.toast span {flex: 1; font-size: .78rem; line-height: 1.45;}
.toast button {border: 0; background: transparent; color: var(--muted); cursor: pointer;}

.value-tooltip {
  position: fixed;
  z-index: 190;
  width: max-content;
  max-width: min(420px, calc(100vw - 20px));
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface-solid);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: .72rem;
  line-height: 1.4;
  pointer-events: none;
  animation: card-arrive .16s ease both;
}

@keyframes spin {to {transform: rotate(360deg);}}
@keyframes reverse-spin {to {transform: rotate(-360deg);}}
@keyframes slow-spin {to {transform: rotate(360deg);}}
@keyframes breathe {50% {transform: scale(1.05); filter: drop-shadow(0 0 16px rgba(40, 199, 239, .3));}}
@keyframes pulse-dot {50% {box-shadow: 0 0 0 8px rgba(54, 211, 153, 0), 0 0 18px rgba(54, 211, 153, .6);}}
@keyframes card-arrive {from {opacity: 0; transform: translateY(24px) scale(.98);} to {opacity: 1; transform: none;}}
@keyframes grid-drift {to {background-position: 0 52px, 52px 0;}}
@keyframes check-pulse {0% {opacity: .7; transform: scale(1);} 70%, 100% {opacity: 0; transform: scale(1.08);}}
@keyframes scan-face {0%, 100% {top: 18%; opacity: .3;} 50% {top: 80%; opacity: 1;}}

@media (max-width: 1080px) {
  .login-shell {grid-template-columns: 1fr 440px;}
  .story-copy h1 {font-size: 4.4rem;}
  .signal-strip {gap: 1rem;}
  .metric-grid {grid-template-columns: 1fr;}
  .detail-grid {grid-template-columns: 1fr;}
}

@media (max-width: 820px) {
  .login-shell {display: block; min-height: 100svh;}
  .login-story {position: absolute; inset: 0; min-height: auto; padding: 25px;}
  .story-copy, .signal-strip {display: none;}
  .login-card-wrap {min-height: 100svh; padding: 85px 20px 40px;}
  .login-card {padding: 32px;}
  .login-clock {width: 440px; height: 440px;}
  .theme-fab {right: 18px; bottom: 18px;}

  .app-shell {display: block;}
  .sidebar {
    width: min(84vw, 292px);
    transform: translateX(-105%);
  }
  .mobile-menu-open .sidebar {transform: translateX(0);}
  .sidebar-brand .icon-button {display: none;}
  .sidebar-scrim {
    position: fixed;
    z-index: 25;
    inset: 0;
    display: block;
    background: rgba(0, 6, 12, .6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    backdrop-filter: blur(3px);
  }
  .mobile-menu-open .sidebar-scrim {opacity: 1; pointer-events: auto;}
  .app-column {display: block;}
  .topbar {min-height: 72px; padding: 10px 16px;}
  .mobile-menu {display: grid;}
  .secure-time, .user-chip div, .user-chip > i {display: none;}
  .user-chip {min-width: 0; padding: 0;}
  .page-content {min-height: calc(100vh - 72px); padding: 22px 16px 40px;}
  .hero-panel {align-items: stretch; flex-direction: column;}
  .check-button {width: 100%; min-width: 0;}
  .page-heading {align-items: stretch; flex-direction: column;}
  .page-heading > .button, .page-heading > a.button {align-self: flex-start;}
  .heading-actions {flex-wrap: wrap;}
  .filter-bar {align-items: stretch; flex-direction: column;}
  .filter-bar .field {width: 100%; min-width: 0;}
  .filter-bar .button {align-self: flex-start;}
  .permission-editor {grid-template-columns: 1fr;}
}

@media (max-width: 560px) {
  .login-card {padding: 27px 22px;}
  .brand-lockup {font-size: 1rem;}
  .week-panel {margin-inline: -6px;}
  .panel-title {align-items: flex-start;}
  .panel-title .text-link {display: none;}
  .form-grid {grid-template-columns: 1fr;}
  .detail-grid .panel, .section-gap.panel {padding: 19px;}
  .stored-photos, .image-previews {grid-template-columns: repeat(2, 1fr);}
  .image-picker-actions .button {flex: 1; min-width: 120px;}
  .catalog-card-grid, .role-grid {grid-template-columns: 1fr;}
  .security-explainer {align-items: flex-start; flex-direction: column;}
  .modal {width: calc(100vw - 18px); max-height: calc(100svh - 18px);}
  .modal-form {padding: 20px 16px;}
  .toast-region {top: 12px; right: 12px; width: calc(100vw - 24px);}
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}