.quick-pass {
  padding: 8px 11px;
  white-space: nowrap;
}

.card-lookup-layout { display: grid; grid-template-columns: minmax(420px, 1.15fr) minmax(340px, .85fr); gap: 20px; }
.card-scanner { align-self: start; }
.scanner-ready { padding: 7px 10px; border-radius: 999px; color: #067647; background: #ecfdf3; font-size: 12px; font-weight: 750; white-space: nowrap; }
.card-lookup-input { padding: 17px 18px; font-size: 22px; font-weight: 750; letter-spacing: .06em; }
.card-lookup-result { min-height: 190px; display: grid; place-content: center; gap: 9px; margin-top: 18px; padding: 26px; border: 2px solid var(--line); border-radius: 16px; text-align: center; background: #f8fafb; }
.card-lookup-result strong { font-size: 29px; }
.card-lookup-result span { color: var(--muted); }
.card-lookup-result.found { border-color: #75e0a7; background: #ecfdf3; }
.card-lookup-result.not-found { border-color: #fda29b; background: #fef3f2; }
.card-student-class { display: inline-flex; width: max-content; justify-self: center; padding: 6px 11px; border-radius: 999px; color: #175cd3!important; background: #eff4ff; font-weight: 750; }
.card-student-state { font-weight: 700; }
.card-lookup-history { display: grid; gap: 9px; }
.card-history-item { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.card-history-item:first-child { border-top: 0; }
.card-history-item span, .card-history-item small { color: var(--muted); }
.card-history-item time { grid-row: 1 / span 2; grid-column: 2; color: var(--muted); font-size: 12px; }
.card-history-item.failed strong { color: var(--red); }

.class-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.parallel-row { display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 16px; align-items: start; }
.parallel-row h3 { margin: 16px 0 0; color: #475467; }
.parallel-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.progress.stacked { display: flex; }
.progress .present-segment { background: #17b26a; }
.progress .departed-segment { background: #f79009; }

.choice-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 12px;
}

.choice-divider::before,
.choice-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.report-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.source-pill {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
}

.source-pill.perco {
  color: #175cd3;
  background: #eff4ff;
}

.source-pill.manual {
  color: #a15c00;
  background: #fff4e5;
}

.notice {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  color: #7a4b00;
  background: #fff4d6;
}

.nav-item.exit-accent {
  margin-top: 12px;
  color: #fff;
  background: #b54708;
}

.quick-exit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.quick-exit-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.quick-exit-card div,
.quick-exit-card span,
.quick-exit-card small {
  display: grid;
  gap: 4px;
}

.quick-exit-card span,
.quick-exit-card small {
  color: var(--muted);
  font-size: 13px;
}

.exit-button {
  flex: none;
  padding: 11px 15px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: #b54708;
  font-weight: 750;
}

.other-exit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
}

.other-exit p {
  margin-bottom: 0;
  color: var(--muted);
}

.compact-primary {
  width: auto;
  white-space: nowrap;
}

.student-period {
  width: 220px;
}

.detail-stats.four {
  grid-template-columns: repeat(4, 1fr);
}

.control-warning {
  margin-bottom: 18px;
  padding: 13px 15px;
  border: 1px solid #fedf89;
  border-radius: 11px;
  color: #7a4b00;
  background: #fffaeb;
}

.turnstile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.turnstile-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.turnstile-card.offline { background: #fafafa; }
.turnstile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.turnstile-head h3 { margin: 0 0 5px; }
.turnstile-head p { margin: 0; color: var(--muted); font-size: 13px; }
.turnstile-status { padding: 6px 9px; border-radius: 999px; color: #067647; background: #ecfdf3; font-size: 12px; font-weight: 750; white-space: nowrap; }
.offline .turnstile-status { color: #b42318; background: #fef3f2; }
.turnstile-card dl { display: grid; gap: 9px; margin: 18px 0; }
.turnstile-card dl div { display: grid; grid-template-columns: 105px 1fr; gap: 10px; }
.turnstile-card dt { color: var(--muted); font-size: 13px; }
.turnstile-card dd { margin: 0; font-size: 13px; font-weight: 650; }
.turnstile-directions { display: grid; gap: 12px; }
.turnstile-direction { padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fafafa; }
.direction-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.mode-pill { padding: 5px 8px; border-radius: 999px; color: #475467; background: #eaecf0; font-size: 11px; font-weight: 750; }
.mode-pill.mode-0 { color: #067647; background: #dcfae6; }
.mode-pill.mode-1 { color: #175cd3; background: #eff8ff; }
.mode-pill.mode-3 { color: #b42318; background: #fee4e2; }
.turnstile-actions { display: grid; grid-template-columns: 1.2fr 1fr .75fr; gap: 8px; }
.turnstile-mode { padding: 10px 9px; border: 0; border-radius: 9px; color: #fff; background: #1570ef; font-size: 12px; font-weight: 750; }
.turnstile-mode.free { background: #079455; }
.turnstile-mode.closed { background: #b42318; }
.turnstile-mode:disabled { opacity: .45; cursor: not-allowed; }
.error-text { color: #b42318; }

.max-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 18px;
}
.max-help { align-self: start; position: sticky; top: 18px; }

.max-status { margin-bottom: 20px; }
.max-state { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid #abefc6; border-radius: 12px; color: #067647; background: #ecfdf3; }
.max-state span { font-size: 13px; }
.max-state.warning { border-color: #fedf89; color: #7a4b00; background: #fffaeb; }
.max-state.error { border-color: #fecdca; color: #b42318; background: #fef3f2; }
.max-next-step { margin-top: 10px; padding: 12px 14px; border: 1px solid #b2ddff; border-radius: 10px; color: #175cd3; background: #eff8ff; font-size: 13px; }
.max-phone-panel { display: grid; gap: 12px; margin-bottom: 22px; padding: 16px; border: 1px solid #b2ddff; border-radius: 12px; background: #eff8ff; }
.max-phone-panel.hidden { display: none; }
.max-phone-title { display: grid; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid #b2ddff; }
.max-phone-title span, .max-phone-title small { color: var(--muted); font-size: 12px; }
.max-phone-title strong { font-size: 16px; }
.max-phone-panel label { display: grid; gap: 7px; }
.max-phone-panel p { margin: 0; color: var(--muted); font-size: 13px; }
.max-phone-actions { display: flex; gap: 8px; }
.max-phone-actions button { width: auto; }
.max-fallback { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.max-fallback summary { margin-bottom: 12px; color: var(--muted); cursor: pointer; }
.max-class-grid { margin-bottom: 18px; }
.max-class-students { margin: 14px 0 20px; }
.max-class-heading { display: flex; justify-content: space-between; gap: 12px; padding: 12px 2px; color: var(--muted); }
.max-connect-state { padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 750; }
.max-connect-state.connected { color: #067647; background: #ecfdf3; }
.max-connect-state.not-connected { color: #7a4b00; background: #fffaeb; }
.max-phone-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.phone-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 999px; color: #175cd3; background: #eff8ff; font-weight: 700; }
.phone-chip button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; color: #b42318; background: #fee4e2; font-weight: 800; }
.shift-summary-card { margin-bottom: 22px; }
.shift-overview { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 14px; }
.shift-summary { padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.shift-summary h3 { margin: 0 0 5px; }
.shift-summary p { margin: 0; color: var(--muted); }
.shift-summary strong { display: block; margin: 12px 0 8px; font-size: 28px; color: var(--green); }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; align-items: start; }
.gateway-installer { grid-column: 1 / -1; }
.shift-settings { display: grid; gap: 12px; }
.outage-notification-toggle { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; margin-bottom:16px; border:1px solid #cbdcf4; border-radius:14px; background:#f4f8ff; cursor:pointer; }
.outage-notification-toggle input { width:20px; height:20px; margin-top:2px; accent-color:#1769e0; }
.outage-notification-toggle span { display:grid; gap:4px; }
.outage-notification-toggle small { color:#5c6f8c; line-height:1.35; }
.shift-setting-row { display: grid; grid-template-columns: minmax(160px,1fr) 120px 120px auto; gap: 10px; align-items: end; padding: 13px; border: 1px solid var(--line); border-radius: 12px; }
.shift-setting-row label { margin: 0; }
.shift-weekdays { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.shift-weekdays label { display: flex; align-items: center; gap: 5px; margin: 0; padding: 6px 9px; border-radius: 8px; background: #f2f4f7; font-size: 12px; }
.shift-weekdays input { width: auto; }
.class-shift-settings { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 9px; }
.class-shift-item { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 8px; }
.class-shift-item label { margin: 0; }
.broadcast-options { display: grid; gap: 8px; max-height: 260px; overflow: auto; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.broadcast-options label { display: flex; align-items: center; gap: 9px; margin: 0; }
.broadcast-options input { width: auto; }
.gateway-fields { display: grid; grid-template-columns: repeat(3,1fr); gap: 0 14px; }
textarea { width: 100%; padding: 12px 13px; border: 1px solid #b8c3cc; border-radius: 10px; font: inherit; color: inherit; background: #fff; resize: vertical; }
textarea:focus { outline: 3px solid #dbe7ff; border-color: var(--blue); }
.max-search { display: grid; gap: 7px; }
.max-help ol { display: grid; gap: 12px; padding-left: 22px; }
.max-help p { color: var(--muted); }
.max-invite-result { display: grid; gap: 10px; margin-top: 16px; padding: 16px; border: 1px solid #abefc6; border-radius: 12px; background: #ecfdf3; }
.max-invite-result p { margin: 0; color: var(--muted); }
.max-invite-result.error { border-color: #fecdca; color: #b42318; background: #fef3f2; }
.invite-link { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.invite-link input { min-width: 0; }

@media (max-width: 760px) {
  .parallel-row { grid-template-columns: 1fr; gap: 8px; }
  .parallel-row h3 { margin: 4px 0; }
  .other-exit { align-items: stretch; flex-direction: column; }
  .compact-primary { width: 100%; }
  .detail-stats.four { grid-template-columns: 1fr 1fr; }
  .turnstile-grid { grid-template-columns: 1fr; }
  .turnstile-actions { grid-template-columns: 1fr; }
  .max-layout { grid-template-columns: 1fr; }
  .card-lookup-layout { grid-template-columns: 1fr; }
  .max-help { position: static; }
  .invite-link { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .gateway-installer { grid-column: auto; }
  .shift-setting-row,.gateway-fields { grid-template-columns: 1fr; }
  .shift-weekdays { grid-column: auto; }
}

.zonality-layout { display: grid; grid-template-columns: minmax(440px,1.2fr) minmax(360px,.8fr); gap: 22px; }
.control-warning { padding: 14px; border-radius: 11px; background: #fff7e8; color: #7a4b00; margin-bottom: 16px; }
.zonality-incidents { display: grid; gap: 10px; }
.incident-heading { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.student-card-control { margin: 16px 0 22px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.card-control-status { padding: 12px 14px; border-radius: 10px; font-weight: 750; margin-bottom: 12px; }
.card-control-status.active { color: var(--green); background: #ecfdf3; }
.card-control-status.blocked,.card-control-status.failed { color: var(--red); background: #fef3f2; }
.card-control-status.pending { color: var(--amber); background: #fff4e5; }
.card-control-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.danger-button { border: 0; border-radius: 10px; padding: 12px 17px; font-weight: 700; color: #fff; background: var(--red); }
.danger-button:disabled,.secondary:disabled { opacity: .55; cursor: wait; }
.manual-report-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px; margin: 4px 0 22px; }
.manual-report-metrics article { padding: 15px 17px; border-radius: 12px; background: #f8fafc; border: 1px solid var(--line); }
.manual-report-metrics .metric-alert { background: #fef3f2; border-color: #fecdca; }
.manual-report-metrics .metric-warning { background: #fff8eb; border-color: #fedf89; }
.manual-report-metrics .metric-good { background: #ecfdf3; border-color: #abefc6; }
.manual-report-metrics span,.manual-report-metrics strong { display: block; }
.manual-report-metrics span { color: var(--muted); font-size: 13px; }
.manual-report-metrics strong { margin-top: 5px; font-size: 25px; }
.manual-summary-table { margin-bottom: 24px; }
.manual-journal-heading { margin-top: 8px; }
.compact-section-title { margin-bottom: 12px; }
.trend-pill { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 750; white-space: nowrap; background: #f2f4f7; color: #475467; }
.trend-pill.systematic { background: #fee4e2; color: #b42318; }
.trend-pill.new_problem,.trend-pill.worsening { background: #fff1cc; color: #93370d; }
.trend-pill.improved,.trend-pill.improving { background: #dcfae6; color: #087443; }
.trend-pill.isolated { background: #eff4ff; color: #175cd3; }
.trend-pill.no_attendance,.trend-pill.monitoring { background: #f2f4f7; color: #667085; }
.zonality-incident,.service-card-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; }
.zonality-incident div,.service-card-row div { display: grid; gap: 3px; }
.zonality-incident p { margin: 3px 0; }
.zonality-incident small,.service-card-row span { color: var(--muted); }
.zonality-incident.failed { border-color: #fda29b; background: #fff7f6; }
.zonality-direction { border: 2px solid var(--line); background: #fff; border-radius: 11px; padding: 15px; text-align: left; }
.zonality-direction.selected { border-color: var(--blue); background: #f2f6ff; }
.zonality-direction b,.zonality-direction small { display: block; }
.zonality-direction small { color: var(--muted); margin-top: 4px; }
.text-danger { border: 0; background: transparent; color: var(--red); font-weight: 700; }
.card-check-actions { display: flex; gap: 9px; }
.card-check-actions button { width: auto; white-space: nowrap; }
.card-check-state { display: flex; justify-content: space-between; gap: 14px; padding: 15px; border-radius: 11px; background: #f8fafc; color: var(--muted); }
.card-check-state strong { color: #17212b; }
.card-check-progress { display: grid; grid-template-columns: minmax(220px,1fr) auto auto; gap: 14px; align-items: center; margin-top: 16px; }
.card-check-progress .progress { margin: 0; height: 12px; }
.card-check-classes { display: grid; grid-template-columns: repeat(auto-fill,minmax(155px,1fr)); gap: 10px; margin-bottom: 20px; }
.card-check-class { display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; text-align: left; background: #fff; }
.card-check-class:hover { border-color: var(--blue); }
.card-check-class .progress { grid-column: 1 / -1; margin: 2px 0; }
.card-check-class .progress i { display: block; height: 100%; background: #17b26a; }
.card-check-class small { grid-column: 1 / -1; color: var(--muted); }
.card-check-confirmed { color: var(--green); font-weight: 750; }
@media (max-width: 1050px) { .zonality-layout { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .card-check-actions,.card-check-state { flex-direction: column; } .card-check-progress { grid-template-columns: 1fr; } }