:root {
  --ink: #15382a;
  --muted: #65796c;
  --line: #dce9dc;
  --paper: #f3f8f1;
  --white: #fff;
  --teal: #13713d;
  --mint: #e8f5e6;
  --gold: #b58b2c;
  --leaf: #74cf2b;
  --pine: #0a3b27;
  --shadow-soft: 0 12px 32px rgba(24, 75, 39, .07);
  --shadow-card: 0 20px 54px rgba(15, 66, 36, .13);
}

html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); }
::selection { background: #d8f1ae; color: #123d2c; }

/* Main workspace */
.sidebar {
  width: 258px;
  padding: 26px 17px 18px;
  background:
    radial-gradient(ellipse at 82% 3%, rgba(116, 207, 43, .2), transparent 32%),
    linear-gradient(165deg, #0d5134 0%, #092f22 62%, #07271d 100%);
  box-shadow: 12px 0 35px rgba(19, 70, 38, .14);
}
.brand { display: flex; justify-content: center; padding: 0 5px 17px; }
.brand img { width: 195px; height: auto; filter: brightness(0) invert(1); opacity: .94; }
.brand .brand-emblem { width: 140px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.18)); opacity: 1; }
.brand .brand-wordmark { display: none; }
.side-label { color: #91ada0; font-size: 9px; letter-spacing: 1.8px; padding: 0 12px 13px; }
.sidebar nav { gap: 4px; }
.nav-item {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #c1d1c8;
  font-size: 12px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav-item > span { width: 20px; color: #9eb9a9; font-size: 17px; }
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateX(2px); }
.nav-item.active {
  background: rgba(226, 242, 229, .13);
  border-color: rgba(210, 236, 216, .12);
  box-shadow: inset 3px 0 var(--leaf);
  color: #fff;
}
.nav-item.active > span { color: #b8ee79; }
.side-bottom { border-top: 1px solid rgba(216, 239, 223, .12); padding-top: 17px; }
.pilot { background: rgba(255,255,255,.055); border-color: rgba(216,239,223,.14); border-radius: 11px; padding: 12px; }
.pilot b { color: #f0f7f1; }
.pilot small { color: #aec4b6; }
.side-bottom p { color: #94ad9e; }
.account-link { margin: 14px 4px 0; color: #d0ded5; }
.logout { color: #c3d4c9; margin-top: 10px; }
.logout:hover, .account-link:hover { color: #fff; }

.main { margin-left: 258px; background: var(--paper); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 70px;
  padding: 0 clamp(22px, 5.3vw, 76px);
  background: rgba(255,255,255,.91);
  border-bottom-color: #e8eee9;
  backdrop-filter: blur(12px);
}
.crumb { color: #88968e; font-size: 11px; }
.crumb b { color: #254a39; }
.date { color: #84928a; }
.avatar { width: 36px; height: 36px; background: #dceee0; color: #23543b; font-size: 11px; }
.user b { color: #214333; font-size: 11px; }
.user small { color: #819087; }
.content { max-width: 1420px; padding: 42px clamp(20px, 5.3vw, 76px) 23px; }
.welcome { margin-bottom: 27px; }
.eyebrow { color: #668275; font-size: 9px; font-weight: 700; letter-spacing: 1.65px; }
h1 { color: #173a2e; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -1.35px; }
.welcome p, .panel-head p { color: #7c8b82; }

.button {
  min-height: 41px;
  border-radius: 9px;
  padding: 11px 16px;
  box-shadow: 0 3px 8px rgba(21, 72, 48, .07);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(21, 72, 48, .13); }
.button.primary { background: linear-gradient(135deg, #1c9849, #11723b); box-shadow: 0 4px 12px rgba(24,137,60,.2); }
.button.primary:hover { background: linear-gradient(135deg, #26aa53, #137b3e); }
.button.primary:focus-visible, .button.secondary:focus-visible, .nav-item:focus-visible, a:focus-visible {
  outline: 3px solid #8cda43;
  outline-offset: 3px;
}
.secondary { border-color: #dfe9e1; box-shadow: none; }

.metrics { gap: 15px; }
.metric, .panel {
  border: 1px solid #e5ece6;
  border-radius: 15px;
  box-shadow: var(--shadow-soft);
}
.metric {
  position: relative;
  overflow: hidden;
  min-height: 142px;
  padding: 20px 21px 17px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.metric:hover { transform: translateY(-3px); box-shadow: 0 17px 32px rgba(28,63,43,.09); }
.metric::after {
  content: "";
  position: absolute;
  width: 86px;
  height: 86px;
  right: -32px;
  top: -38px;
  border-radius: 50%;
  background: #edf7e7;
}
.metric-label { position: relative; z-index: 1; color: #798a80; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.metric-label span { color: #43805d; }
.metric-value { color: #183f30; font-size: 34px; margin: 14px 0 7px; }
.metric-foot { color: #839188; line-height: 1.45; }
.columns { gap: 17px; margin-top: 18px; }
.panel { padding: 22px; }
.panel-head { margin-bottom: 17px; }
.panel-head h2 { color: #214333; font-size: 15px; }
.panel-head>a { font-size: 11px; }
.recent-list { border-color: #edf2ee; }
.recent-row { min-height: 61px; border-color: #eef3ef; }
.person-icon { width: 37px; height: 37px; background: #edf5ee; color: #37704d; }
.person b { color: #2c493a; }
.person small { color: #849188; }
.movement { padding: 6px 10px; }
.quick-action { border-color: #edf2ee; transition: background .16s ease, padding .16s ease; }
.quick-action:hover { background: #f8fbf8; padding-left: 7px; padding-right: 7px; }
.quick-icon { width: 40px; height: 40px; border-radius: 11px; }
.notice { background: #f5f8f4; border: 1px solid #edf1eb; border-radius: 9px; }
.flash { border: 1px solid transparent; border-radius: 10px; box-shadow: var(--shadow-soft); }
.flash.success { border-color: #d9ebdd; }
.flash.error { border-color: #f0ded7; }
footer { padding-top: 23px; color: #92a097; letter-spacing: 1.2px; }

/* Login */
.login-page {
  min-height: 100svh;
  padding: clamp(18px, 4vw, 54px);
  display: grid;
  place-items: center;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 7% 8%, rgba(137, 211, 88, .28), transparent 32%),
    radial-gradient(ellipse at 95% 88%, rgba(184, 226, 139, .34), transparent 31%),
    #f1f7ef;
}
.login-shell {
  width: min(1080px, 100%);
  min-height: 610px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(219, 231, 220, .9);
  border-radius: 25px;
  box-shadow: 0 32px 90px rgba(24, 65, 43, .13);
}
.login-brand {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 610px;
  padding: 42px 46px 34px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 88% 16%, rgba(150, 208, 164, .17) 0 2px, transparent 3px),
    radial-gradient(ellipse at 85% 78%, rgba(105, 190, 57, .27), transparent 37%),
    radial-gradient(ellipse at 80% 5%, rgba(102, 203, 49, .16), transparent 32%),
    linear-gradient(145deg, #105238 0%, #0b3a29 54%, #082b20 100%);
}
.login-brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 470px;
  height: 470px;
  right: -220px;
  bottom: -210px;
  border: 1px solid rgba(208, 237, 213, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(208,237,213,.035), 0 0 0 78px rgba(208,237,213,.03), 0 0 0 118px rgba(208,237,213,.025);
}
.login-brand::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .1;
  background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(130deg, #000 0%, transparent 70%);
}
.login-brand-logo { display: inline-flex; align-items: center; padding: 0; background: transparent; border-radius: 0; box-shadow: none; }
.login-brand-logo img { display: block; width: 142px; height: auto; }
.login-brand-copy { max-width: 430px; margin: 44px 0; }
.login-kicker { display: inline-flex; gap: 9px; align-items: center; color: #d6e9da; font-size: 9px; font-weight: 700; letter-spacing: 1.7px; }
.login-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #a6d6ac; box-shadow: 0 0 0 5px rgba(166,214,172,.14); }
.login-brand-copy h2 { margin: 21px 0 14px; color: #fff; font: 700 clamp(35px, 4.1vw, 50px)/1.08 Manrope, sans-serif; letter-spacing: -2px; }
.login-brand-copy h2 span { color: #b5ed72; }
.login-brand-copy p { max-width: 365px; color: #c2d7c9; font-size: 13px; line-height: 1.75; }
.login-pillars { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 29px; }
.login-pillars span { border: 1px solid rgba(226,244,228,.2); border-radius: 30px; padding: 9px 12px; color: #e3f0e5; background: rgba(255,255,255,.055); font-size: 10px; }
.login-pillars b { margin-right: 6px; color: #afd9b7; }
.login-brand-foot { color: #a8c5b1; font-size: 9px; letter-spacing: 1.2px; }
.login-card {
  width: auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(35px, 5vw, 68px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.login-card > img { display: none; }
.login-card > .eyebrow { margin: 0 0 13px; color: #548069; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; }
.login-card h1 { margin: 0 0 9px; color: #183a2e; font-size: 31px; letter-spacing: -1.3px; }
.login-card .muted { margin: 0; color: #819087; font-size: 12px; line-height: 1.6; }
.login-card form { gap: 17px; margin-top: 31px; }
.login-card label { gap: 8px; color: #395348; font-size: 11px; font-weight: 700; }
.login-card input:not([type=checkbox]) { width: 100%; min-height: 47px; padding: 12px 14px; border-color: #dce7de; border-radius: 9px; background: #fcfdfc; font-size: 12px; transition: border .16s, box-shadow .16s, background .16s; }
.login-card input:not([type=checkbox]):focus { border-color: #5c9a72; background: #fff; box-shadow: 0 0 0 4px rgba(103,163,122,.13); }
.login-card .remember { display: flex; align-items: center; gap: 8px; color: #718078; font-size: 10px; font-weight: 500; }
.login-card .remember input { accent-color: #176447; }
.login-card .button { min-height: 48px; border-radius: 9px; font-size: 12px; }
.login-card .login-foot { margin: 20px 0 0; color: #8a968e; font-size: 10px; line-height: 1.7; }
.login-card .error-text { padding: 10px 12px; border-radius: 8px; background: #fbefec; color: #8a4334; }
.kiosk-card { justify-content: center; gap: 0; }
.kiosk-card .eyebrow { margin-bottom: 9px; }
.kiosk-card h1 { margin-bottom: 7px; }
.kiosk-view { position: relative; height: 190px; margin-top: 19px; overflow: hidden; border: 1px solid #dce9de; border-radius: 13px; background: linear-gradient(145deg, #eef5ef, #e3eee5); }
.kiosk-view video { display: none; width: 100%; height: 100%; object-fit: cover; }
.kiosk-view video.visible { display: block; }
.kiosk-placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: #4d775d; text-align: center; }
.kiosk-placeholder > span { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid #cbded0; border-radius: 13px; background: rgba(255,255,255,.7); font-size: 29px; }
.kiosk-placeholder small { color: #718579; font-size: 10px; }
.kiosk-view.is-live { position: fixed; z-index: 1000; inset: 0; width: 100vw; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; background: #07150f; }
.kiosk-view.is-live:fullscreen { width: 100vw; height: 100vh; height: 100dvh; }
.login-page.scanner-open { padding: 0; overflow: hidden; }
.scanner-open .login-shell { overflow: visible; border-radius: 0; }
.kiosk-view.is-live video.visible { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kiosk-live-overlay { display: none; }
.kiosk-view.is-live .kiosk-live-overlay { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: clamp(18px, 4vw, 54px); pointer-events: none; background: linear-gradient(90deg, rgba(4,22,14,.25), transparent 42%, rgba(4,22,14,.22)); }
.kiosk-live-brand { width: clamp(168px, 24vw, 310px); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; pointer-events: auto; }
.kiosk-live-brand img { display: block; width: 100%; height: auto; border-radius: 0; filter: drop-shadow(0 7px 18px rgba(0,0,0,.28)); }
.kiosk-live-brand p { margin: 8px 4px 2px; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.45; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,.85); }
.kiosk-live-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: auto; }
.kiosk-live-indicator { display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.28); border-radius: 30px; background: rgba(8,37,24,.65); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 1px; backdrop-filter: blur(9px); }
.kiosk-live-indicator i { width: 8px; height: 8px; border-radius: 50%; background: #8ee49c; box-shadow: 0 0 0 5px rgba(142,228,156,.17); }
.kiosk-live-status { max-width: min(340px, 46vw); padding: 14px 18px; border-radius: 12px; color: #fff; background: rgba(10,44,29,.84); font-size: 14px; font-weight: 700; line-height: 1.5; text-align: right; box-shadow: 0 12px 38px rgba(0,0,0,.19); backdrop-filter: blur(9px); }
.kiosk-live-status.ok { background: rgba(17,98,59,.94); }
.kiosk-live-status.out { background: rgba(111,73,34,.94); }
.kiosk-exit { min-height: 42px; padding: 10px 15px; border: 1px solid rgba(255,255,255,.4); border-radius: 10px; background: rgba(255,255,255,.94); color: #183b2c; font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: 0 7px 24px rgba(0,0,0,.17); }
.kiosk-exit span { margin-left: 8px; font-size: 18px; vertical-align: -1px; }
.scanner-open { overflow: hidden; }
.kiosk-actions { display: flex; gap: 9px; margin-top: 12px; }
.kiosk-actions button { flex: 1; min-height: 42px; }
.kiosk-actions button:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.kiosk-card .validation { margin-top: 10px; }
.kiosk-help { margin: 9px 0 17px; color: #8a968e; font-size: 9px; line-height: 1.5; }
.login-disclosure { margin-top: auto; border-top: 1px solid #e8eee8; padding-top: 14px; }
.login-disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #718078; cursor: pointer; list-style: none; font-size: 10px; }
.login-disclosure summary::-webkit-details-marker { display: none; }
.login-disclosure summary b { color: #176447; font-size: 11px; }
.login-disclosure summary b span { margin-left: 4px; }
.login-disclosure[open] summary { margin-bottom: 3px; }
.login-disclosure form { margin-top: 17px; }
.login-disclosure .login-foot { margin-bottom: 0; }
.login-disclosure .error-text { margin-bottom: 0; font-size: 10px; }

/* Forms, tables, and scanning */
.form-panel { max-width: 880px; padding: clamp(19px, 3vw, 29px); }
input, select { min-height: 42px; border-color: #dce6de; border-radius: 8px; }
input:focus, select:focus { border-color: #6ba780; box-shadow: 0 0 0 4px rgba(103,163,122,.12); }
.tag { border: 1px solid #e0ece2; border-radius: 30px; padding: 7px 11px; }
.table-panel { overflow: hidden; }
th { color: #718478; font-size: 9px; letter-spacing: .9px; }
td { color: #334d3d; }
tbody tr:hover { background: #f8fbf8; }
.pagination a, .pagination span { border-radius: 8px; }
.scanner { border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.visitor-result { border-radius: 11px; }
.audit-details summary { color: var(--teal); cursor: pointer; font-size: 10px; font-weight: 700; }
.audit-details p { max-width: 240px; margin: 7px 0 0; color: #63756b; font-size: 10px; line-height: 1.5; white-space: normal; }
.audit-details pre { max-width: 300px; max-height: 180px; overflow: auto; margin: 8px 0 0; padding: 9px; border-radius: 8px; background: #f3f7f3; color: #395346; font-size: 9px; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 950px) {
  .sidebar { width: 220px; }
  .main { margin-left: 220px; }
  .content { padding-top: 32px; }
  .login-brand { padding: 37px 34px 30px; }
  .login-card { padding: 38px; }
}

@media (max-width: 700px) {
  .login-page { display: block; padding: 12px; }
  .login-shell { min-height: 0; grid-template-columns: 1fr; border-radius: 20px; }
  .login-brand { min-height: 0; padding: 20px 22px 24px; }
  .login-brand-logo { padding: 6px 9px; border-radius: 9px; }
  .login-brand-logo img { width: 112px; }
  .login-brand-copy { margin: 31px 0 18px; }
  .login-brand-copy h2 { margin: 14px 0 9px; font-size: 34px; letter-spacing: -1.5px; }
  .login-brand-copy p { margin-bottom: 0; font-size: 11px; }
  .login-pillars { margin-top: 16px; gap: 6px; }
  .login-pillars span { padding: 7px 9px; font-size: 9px; }
  .login-brand-foot { display: none; }
  .login-card { padding: 28px 23px 30px; }
  .login-card form { margin-top: 24px; }
  .login-card h1 { font-size: 27px; }
  .sidebar {
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
    height: auto;
    padding: 8px 13px 9px;
    display: block;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 7px 24px rgba(18,55,39,.13);
  }
  .brand { justify-content: flex-start; padding: 0 4px 8px; }
  .brand .brand-emblem { display: none; }
  .brand .brand-wordmark { display: block; width: 160px; height: auto; filter: brightness(0) invert(1); }
  .sidebar nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 1px;
  }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .side-label, .side-bottom { display: none; }
  .nav-item { min-height: 34px; flex: 0 0 auto; gap: 6px; padding: 7px 9px; border-radius: 8px; font-size: 10px; white-space: nowrap; }
  .nav-item > span { width: auto; font-size: 13px; }
  .nav-item.active { box-shadow: inset 0 -2px #9bd0a9; }
  .main { margin: 101px 0 0; }
  .topbar { height: 52px; padding: 0 16px; }
  .topbar .user, .date { display: none; }
  .content { padding: 25px 15px 18px; }
  .welcome { gap: 12px; }
  .welcome h1 { font-size: 25px; }
  .welcome .button { align-self: stretch; }
  .metrics { gap: 9px; }
  .metric { min-height: 125px; padding: 14px; border-radius: 12px; }
  .metric-value { font-size: 28px; margin: 11px 0 5px; }
  .metric-label { font-size: 8px; letter-spacing: .55px; }
  .metric-foot { font-size: 9px; }
  .columns { gap: 11px; margin-top: 11px; }
  .panel { padding: 16px; border-radius: 13px; }
  .panel-head { align-items: flex-start; gap: 8px; }
  .panel-head>a { white-space: nowrap; }
  .scanner { height: 230px; }
}

@media (max-width: 700px) {
  .kiosk-view.is-live .kiosk-live-overlay { align-items: flex-start; padding: max(14px, env(safe-area-inset-top)) 12px 14px; background: linear-gradient(180deg, rgba(4,22,14,.42), transparent 28%, transparent 70%, rgba(4,22,14,.38)); }
  .kiosk-live-brand { width: clamp(112px, 33vw, 160px); padding: 0; border-radius: 0; }
  .kiosk-live-brand p { display: none; }
  .kiosk-live-tools { max-width: calc(100vw - 150px); gap: 8px; }
  .kiosk-live-indicator { padding: 8px 10px; font-size: 8px; }
  .kiosk-live-status { max-width: min(240px, 58vw); padding: 10px 12px; font-size: 11px; }
  .kiosk-exit { min-height: 37px; padding: 8px 11px; font-size: 10px; }
}

/* Dashboard home */
.dashboard-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) 210px; align-items:center; min-height:225px; margin-bottom:19px; padding:28px 34px; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:22px; background:radial-gradient(ellipse at 86% 4%,rgba(116,207,43,.24),transparent 32%),linear-gradient(115deg,#0d4b32 0%,#0b6338 60%,#0e7540 100%); box-shadow:0 18px 46px rgba(14,84,44,.2); animation:dashboard-rise .38s ease both; }
.dashboard-hero::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.11; background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px); background-size:36px 36px; mask-image:linear-gradient(115deg,#000,transparent 73%); }
.dashboard-hero-copy { position:relative; z-index:2; max-width:640px; }
.dashboard-status { display:flex; align-items:center; gap:8px; color:#d9f3cf; font-size:9px; font-weight:800; letter-spacing:1.55px; }
.dashboard-status .live-dot { width:7px; height:7px; background:#9be34e; box-shadow:0 0 0 5px rgba(155,227,78,.14); }
.status-divider { margin-left:2px; padding-left:9px; border-left:1px solid rgba(231,247,225,.38); color:rgba(231,247,225,.8); }
.dashboard-hero h1 { margin:17px 0 7px; color:#fff; font:700 clamp(27px,3vw,37px)/1.13 Manrope,sans-serif; letter-spacing:-1.5px; }
.dashboard-hero-copy>p { margin:0; color:#d4e8d8; font-size:12px; line-height:1.6; }
.dashboard-hero-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.dashboard-hero-meta span { display:inline-flex; align-items:center; padding:7px 10px; border:1px solid rgba(232,248,233,.16); border-radius:30px; background:rgba(255,255,255,.065); color:#e3f0e4; font-size:9px; }
.hero-button { display:inline-flex; align-items:center; min-height:40px; margin-top:18px; padding:9px 15px; border:1px solid rgba(255,255,255,.74); border-radius:10px; background:#fff; color:#135837; box-shadow:0 8px 22px rgba(0,0,0,.13); font-size:11px; font-weight:800; text-decoration:none; }
.hero-button:hover { transform:translateY(-2px); background:#f2ffe9; color:#0d462c; box-shadow:0 12px 26px rgba(0,0,0,.18); }
.dashboard-hero-art { position:relative; display:grid; width:190px; height:190px; place-items:center; justify-self:end; }
.dashboard-hero-art img { position:relative; z-index:1; display:block; width:100%; height:auto; filter:drop-shadow(0 9px 16px rgba(0,0,0,.2)); animation:dashboard-logo-in .55s ease both; }
.hero-orbit { position:absolute; border:1px solid rgba(206,245,167,.27); border-radius:50%; }
.hero-orbit-one { inset:9px; animation:dashboard-orbit 28s linear infinite; }
.hero-orbit-two { inset:-7px; border-color:rgba(206,245,167,.13); animation:dashboard-orbit 40s linear infinite reverse; }
.hero-orbit-one::after,.hero-orbit-two::after { content:""; position:absolute; top:16%; left:17%; width:6px; height:6px; border-radius:50%; background:#b9ec79; box-shadow:0 0 13px rgba(185,236,121,.8); }
.dashboard-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:18px; }
.dashboard-metrics .metric { min-width:0; min-height:166px; padding:17px 18px 16px; border:1px solid #e2ebdf; border-radius:15px; background:linear-gradient(155deg,#fff 0%,#fcfefb 100%); box-shadow:0 8px 24px rgba(24,75,39,.055); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; animation:dashboard-rise .42s ease both; }
.dashboard-metrics .metric:nth-child(2) { animation-delay:.04s; }
.dashboard-metrics .metric:nth-child(3) { animation-delay:.08s; }
.dashboard-metrics .metric:nth-child(4) { animation-delay:.12s; }
.dashboard-metrics .metric:hover { transform:translateY(-4px); border-color:#c8dfc1; box-shadow:0 16px 30px rgba(24,75,39,.11); }
.metric-top { display:flex; align-items:center; justify-content:space-between; gap:7px; margin-bottom:14px; }
.metric-icon { display:grid; width:34px; height:34px; place-items:center; border:1px solid #dff0d4; border-radius:11px; background:linear-gradient(145deg,#eff9e7,#e0f1d6); color:#267642; font-size:10px; font-weight:800; letter-spacing:.5px; }
.metric-entries .metric-icon { border-color:#d7ecde; background:#e9f6ed; color:#188347; }
.metric-visitors .metric-icon { border-color:#f0e5ca; background:#fbf5e8; color:#9a7422; }
.metric-movements .metric-icon { border-color:#dce9e4; background:#edf5f1; color:#3c7357; }
.metric-context { color:#91a096; font-size:8px; font-weight:800; letter-spacing:.85px; text-align:right; }
.dashboard-metrics .metric-label { color:#536c5d; font-size:10px; letter-spacing:.65px; text-transform:uppercase; }
.dashboard-metrics .metric-value { margin:4px 0; color:#123d2a; font:700 34px/1.12 Manrope,sans-serif; letter-spacing:-1.5px; }
.dashboard-metrics .metric-foot { color:#7e9084; font-size:9px; }
.dashboard-columns { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.9fr); gap:15px; align-items:start; }
.dashboard-columns .panel { min-width:0; padding:20px; border:1px solid #e2ebdf; border-radius:17px; background:rgba(255,255,255,.96); box-shadow:0 8px 24px rgba(24,75,39,.055); animation:dashboard-rise .46s ease both; }
.dashboard-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.panel-heading-group { display:flex; align-items:center; gap:11px; }
.panel-heading-index { display:grid; width:35px; height:35px; flex:0 0 35px; place-items:center; border:1px solid #e1efd9; border-radius:11px; background:#f0f8e9; color:#36834a; font-size:9px; font-weight:800; letter-spacing:.4px; }
.dashboard-panel-head h2 { margin:0 0 4px; color:#183e2b; font:700 14px Manrope,sans-serif; letter-spacing:-.25px; }
.dashboard-panel-head p { margin:0; color:#839188; font-size:10px; }
.panel-link { display:inline-flex; align-items:center; color:#187440; font-size:10px; font-weight:800; text-decoration:none; white-space:nowrap; }
.panel-link:hover { color:#55a923; text-decoration:underline; }
.activity-list { border-top:1px solid #edf2eb; }
.activity-row { display:grid; grid-template-columns:14px minmax(0,1fr) auto auto; align-items:center; gap:10px; min-height:66px; border-bottom:1px solid #edf2eb; }
.activity-row:last-child { border-bottom:0; }
.activity-mark { position:relative; display:block; width:8px; height:8px; margin-left:3px; border-radius:50%; background:#21914a; box-shadow:0 0 0 4px #e8f6e7; }
.activity-mark::after { content:""; position:absolute; top:10px; left:3px; width:1px; height:38px; background:#e1eddd; }
.activity-row:last-child .activity-mark::after { display:none; }
.activity-out { background:#829187; box-shadow:0 0 0 4px #edf1ed; }
.activity-person { min-width:0; }
.activity-person>b,.activity-person>small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.activity-person>b { color:#284b36; font-size:10px; font-weight:700; }
.activity-person>small { margin-top:4px; color:#87968a; font-size:9px; }
.activity-person>small span { padding:0 3px; color:#b3beb5; }
.activity-time { color:#75877b; font-size:9px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.activity-row .movement { min-width:60px; padding:6px 8px; border-radius:30px; font-size:8px; font-weight:700; text-align:center; white-space:nowrap; }
.activity-row .movement.Entrada { background:#e8f6e7; color:#1d7139; }
.activity-row .movement.Salida { background:#eff2ee; color:#68776d; }
.activity-empty { display:grid; justify-items:center; padding:31px 15px 26px; text-align:center; }
.activity-empty>b { color:#2b4b37; font-size:11px; }
.activity-empty>p { margin:6px 0 10px; color:#849288; font-size:10px; }
.activity-empty>a { color:#17743f; font-size:10px; font-weight:700; text-decoration:none; }
.activity-empty>a:hover { text-decoration:underline; }
.dashboard-shortcuts { display:flex; flex-direction:column; }
.shortcut-card { display:grid; grid-template-columns:41px minmax(0,1fr) 22px; align-items:center; gap:11px; min-height:66px; margin-bottom:9px; padding:10px 11px; border:1px solid #e6eee3; border-radius:13px; background:#fff; color:inherit; text-decoration:none; transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease; }
.shortcut-card:hover { transform:translateY(-2px); border-color:#cfe5c6; background:#fbfff8; box-shadow:0 8px 18px rgba(34,91,45,.08); }
.shortcut-icon { display:grid; width:39px; height:39px; place-items:center; border-radius:12px; background:#eaf6e5; color:#17743d; font-size:10px; font-weight:800; }
.shortcut-visitor .shortcut-icon { background:#faf3e5; color:#977323; }
.shortcut-copy { min-width:0; }
.shortcut-copy>b,.shortcut-copy>small { display:block; }
.shortcut-copy>b { color:#2d4e37; font-size:10px; }
.shortcut-copy>small { margin-top:4px; color:#839187; font-size:9px; }
.shortcut-arrow { position:relative; width:16px; height:1px; justify-self:center; background:#4e9950; transition:width .16s ease; }
.shortcut-arrow::after { content:""; position:absolute; right:0; top:-3px; width:6px; height:6px; border-top:1px solid #4e9950; border-right:1px solid #4e9950; transform:rotate(45deg); }
.shortcut-card:hover .shortcut-arrow { width:20px; }
.dashboard-reminder { display:flex; align-items:flex-start; gap:9px; margin-top:4px; padding:11px; border:1px solid #deead9; border-radius:11px; background:linear-gradient(120deg,#f2f8ec,#f8fbf5); }
.dashboard-reminder>span { display:block; flex:0 0 auto; color:#458543; font-size:8px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }
.dashboard-reminder>p { margin:1px 0 0; color:#64796a; font-size:9px; line-height:1.55; }
@keyframes dashboard-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes dashboard-logo-in { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }
@keyframes dashboard-orbit { to { transform:rotate(360deg); } }

@media (max-width: 1150px) {
  .dashboard-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-columns { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
  .dashboard-hero { grid-template-columns:minmax(0,1fr) 86px; min-height:0; margin-bottom:12px; padding:20px 16px; border-radius:17px; }
  .dashboard-hero h1 { max-width:240px; margin-top:13px; font-size:25px; }
  .dashboard-hero-copy>p { max-width:230px; font-size:10px; }
  .dashboard-hero-art { width:104px; height:104px; margin-right:-16px; opacity:.82; }
  .hero-orbit-one { inset:3px; }
  .hero-orbit-two { inset:-4px; }
  .dashboard-hero-meta { gap:5px; margin-top:11px; }
  .dashboard-hero-meta span { padding:6px 8px; font-size:8px; }
  .hero-button { min-height:37px; margin-top:12px; padding:8px 11px; font-size:10px; }
  .dashboard-metrics { gap:9px; margin-bottom:12px; }
  .dashboard-metrics .metric { min-height:145px; padding:13px 12px; border-radius:13px; }
  .metric-top { margin-bottom:10px; }
  .metric-icon { width:30px; height:30px; border-radius:9px; font-size:9px; }
  .metric-context { font-size:7px; letter-spacing:.45px; }
  .dashboard-metrics .metric-label { font-size:8px; letter-spacing:.35px; }
  .dashboard-metrics .metric-value { margin:7px 0 4px; font-size:27px; }
  .dashboard-metrics .metric-foot { font-size:8px; }
  .dashboard-columns { gap:10px; }
  .dashboard-columns .panel { padding:14px; border-radius:13px; }
  .dashboard-panel-head { gap:8px; }
  .panel-heading-group { gap:8px; }
  .panel-heading-index { width:31px; height:31px; flex-basis:31px; border-radius:9px; }
  .dashboard-panel-head h2 { font-size:12px; }
  .dashboard-panel-head p { font-size:9px; }
  .panel-link { font-size:9px; }
  .activity-row { grid-template-columns:10px minmax(0,1fr) auto; gap:7px; min-height:62px; }
  .activity-mark { width:7px; height:7px; }
  .activity-person>b { font-size:9px; }
  .activity-person>small { font-size:8px; }
  .activity-time { font-size:8px; }
  .activity-row .movement { grid-column:2; justify-self:start; margin-top:-7px; min-width:0; padding:4px 7px; font-size:7px; }
  .activity-mark::after { height:36px; }
  .shortcut-card { min-height:60px; grid-template-columns:35px minmax(0,1fr) 18px; gap:8px; padding:8px; }
  .shortcut-icon { width:34px; height:34px; border-radius:10px; }
  .shortcut-copy>b { font-size:9px; }
  .shortcut-copy>small { font-size:8px; }
}

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