:root {
  --ink: #17231d;
  --muted: #68756e;
  --line: #dfe6e1;
  --paper: #ffffff;
  --canvas: #f3f6f3;
  --forest: #174f36;
  --forest-2: #0f3d29;
  --lime: #dcefc0;
  --amber: #f3b94e;
  --red: #bd3c37;
  --blue: #3d6f92;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
a { color: var(--forest); text-decoration: none; }
button, input, select, textarea { font: inherit; }

.topbar {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 4vw;
  color: white;
  background: var(--forest-2);
  box-shadow: 0 1px 8px #0a211755;
}
.brand { color: white; display: flex; align-items: center; gap: 11px; font-weight: 750; white-space: nowrap; }
.brand-mark, .login-emblem, .mini-logo {
  display: grid;
  place-items: center;
  background: var(--lime);
  color: var(--forest-2);
  border-radius: 10px;
  font-weight: 900;
  letter-spacing: -.04em;
}
.brand-mark {
  width: 46px;
  height: 46px;
  padding: 4px;
  overflow: hidden;
  background: #fff;
}
.brand-mark img, .login-emblem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.topbar nav { display: flex; gap: 6px; flex: 1; overflow-x: auto; }
.topbar nav a { color: #d7e5dc; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.topbar nav a:hover, .topbar nav a.active { background: #ffffff17; color: white; }
.nav-toggle { display: none; min-height: 42px; align-items: center; gap: 7px; padding: 8px 12px; color: #fff; background: #ffffff12; border: 1px solid #ffffff35; border-radius: 8px; font-weight: 750; cursor: pointer; }
.nav-toggle span:first-child { font-size: 20px; line-height: 1; }
.user-menu { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.user-menu a { color: #cfe7d9; border-left: 1px solid #ffffff30; padding-left: 14px; }

.shell { width: min(1220px, 92vw); margin: 38px auto 70px; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background:
  linear-gradient(110deg, #062b1f52 0%, #0b30243d 52%, #173f5133 100%),
  url("cnr-login-background.jpg") center / cover no-repeat fixed,
  var(--forest-2);
}
.login-card { width: min(440px, 100%); background: #fffffff5; padding: 42px; border-radius: 20px; box-shadow: 0 25px 80px #07160f88; backdrop-filter: blur(8px); }
.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 28px;
}
.login-emblem {
  width: 124px;
  height: 124px;
  margin: 0 auto 18px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.login-header .college-name {
  margin: 0;
  color: var(--forest);
  font-size: 19px;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.login-header .university-name {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
}
.login-card .login-header h1 {
  margin: 18px 0 7px;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.login-header .muted {
  max-width: 330px;
  margin: 0;
  line-height: 1.55;
}

.page-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 24px; }
.page-heading h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.035em; margin: 3px 0 0; }
.heading-copy { max-width: 670px; margin: 9px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.eyebrow { margin: 0; color: var(--forest); font-size: 12px; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; }
.muted, small { color: var(--muted); }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: 0 5px 25px #1737230a; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.panel h2, .panel-heading h2 { margin: 0; font-size: 19px; }
.stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 24px; }
.stat { min-height: 135px; border-radius: 14px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; background: var(--forest-2); color: white; }
.stat span { color: #d7e9de; font-size: 14px; }
.stat strong { font-size: 38px; letter-spacing: -.04em; }
.stat.amber { background: #7a4e09; }.stat.blue { background: #244f6c; }.stat.green { background: #2b6948; }
.stat.visitor { background: #5d3f73; }
.feature-section { margin: 32px 0 24px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 15px; }
.section-heading h2 { margin: 3px 0 0; font-size: 24px; letter-spacing: -.02em; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-card { min-height: 208px; display: flex; flex-direction: column; padding: 21px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 5px 25px #17372309; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.feature-card:hover { transform: translateY(-2px); border-color: #a9c3b2; box-shadow: 0 12px 30px #17372313; }
.feature-kicker { color: var(--forest); font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.feature-card h3 { margin: 9px 0 7px; font-size: 20px; }.feature-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.feature-link { margin-top: auto; padding-top: 18px; color: var(--forest); font-size: 13px; font-weight: 800; }

.button {
  appearance: none;
  border: 1px solid #cad4cd;
  background: white;
  color: var(--ink);
  min-height: 42px;
  padding: 10px 17px;
  border-radius: 9px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.button:hover { border-color: #91a399; }
.button.primary { color: white; background: var(--forest); border-color: var(--forest); }
.button.primary:hover { background: var(--forest-2); }
.button.compact { min-height: 34px; padding: 7px 11px; font-size: 12px; }

label { display: grid; gap: 7px; font-size: 13px; font-weight: 720; color: #3e4b44; }
input, select, textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #cbd5ce;
  border-radius: 8px;
  color: var(--ink);
  background: white;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--forest); box-shadow: 0 0 0 3px #1b69451b; }
.stack { display: grid; gap: 17px; }
.two-col, .three-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.three-col { grid-template-columns: repeat(3, 1fr); }
.form-grid { display: grid; grid-template-columns: 220px 1fr; gap: 32px; }
.fields { display: grid; gap: 17px; }
.form-actions, .actions { display: flex; justify-content: flex-end; gap: 10px; }
.actions.start { justify-content: flex-start; flex-wrap: wrap; }
.medium-form { max-width: 780px; }
.users-grid { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
.import-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; align-items: start; }
.import-guide > p { line-height: 1.6; }
.field-reference { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.field-reference h3 { margin: 0 0 12px; font-size: 15px; }
.field-reference dl { margin: 0; }
.field-reference dl div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid #edf1ee; }
.field-reference dt { color: var(--muted); font-size: 12px; }.field-reference dd { margin: 0; font-size: 13px; font-weight: 650; }
.import-warning { padding: 13px 14px; color: #714c08; background: #fff3d8; border: 1px solid #edd49d; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.import-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.import-summary article { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; background: #e7f3ea; border: 1px solid #bad9c5; border-radius: 10px; }
.import-summary article span { color: var(--muted); font-size: 13px; }.import-summary article strong { color: var(--forest); font-size: 24px; }
.import-summary article.has-errors { background: #fbe7e5; border-color: #e7b9b5; }.import-summary article.has-errors strong { color: var(--red); }
.import-errors { margin-bottom: 20px; }.import-errors ul { max-height: 270px; overflow: auto; padding-left: 20px; color: #8f302c; line-height: 1.6; }
.photo-field { display: flex; flex-direction: column; gap: 13px; }
.photo-import-panel { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: start; margin-top: 22px; }
.photo-import-copy h2 { margin: 5px 0 10px; }.photo-import-copy p { color: var(--muted); line-height: 1.6; }
.photo-import-copy ol { margin: 16px 0 0; padding-left: 20px; color: #415047; font-size: 13px; line-height: 1.7; }
.filename-examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }

.photo-placeholder { display: grid; place-items: center; background: #e3ebe5; color: var(--forest); font-weight: 850; }
.photo-preview { width: 190px; height: 230px; object-fit: cover; border-radius: 12px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.student-cell { display: flex; align-items: center; gap: 11px; }
.student-cell strong { font-size: 14px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
th, td { padding: 14px 12px; border-bottom: 1px solid #e7ece8; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
td small { display: block; margin-top: 4px; }
.empty { text-align: center; padding: 36px; color: var(--muted); }
code { background: #eef2ef; border-radius: 5px; padding: 3px 6px; }
.list-summary { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.page-link { display: inline-grid; min-width: 38px; min-height: 38px; place-items: center; padding: 7px 11px; color: var(--forest); background: #fff; border: 1px solid #cbd5ce; border-radius: 8px; font-size: 13px; font-weight: 750; }
.page-link:hover { border-color: #91a399; }
.page-link.current { color: #fff; background: var(--forest); border-color: var(--forest); }
.page-link.disabled { color: #9aa49e; background: #f1f3f2; pointer-events: none; }
.page-gap { color: var(--muted); padding: 0 3px; }

.search-row { display: flex; align-items: end; gap: 10px; margin-bottom: 18px; }
.search-row > input { max-width: 460px; }
.search-row label { min-width: 200px; }
.badge { display: inline-block; padding: 5px 9px; border-radius: 99px; background: #edf0ee; color: #46534c; font-size: 11px; font-weight: 800; }
.badge.active, .badge.approved { color: #155b37; background: #dbf1e3; }
.badge.suspended, .badge.rejected, .badge.blocked { color: #9b302d; background: #f9dedc; }
.badge.pending { color: #835a0c; background: #f9eac8; }
.badge.late { color: #982e29; background: #f9dedc; }
.badge.outside { color: #835a0c; background: #f9eac8; }
.movement { font-weight: 850; padding: 5px 10px; border-radius: 6px; }
.movement.out { background: #fff0d0; color: #845708; }
.movement.in { background: #dff2e6; color: #155b37; }

.profile-grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px; }
.identity { text-align: center; }
.profile-photo { width: 180px; height: 215px; object-fit: cover; border-radius: 12px; margin: 0 auto 18px; }
.identity h2 { margin: 0 0 5px; }.identity p { color: var(--muted); margin-top: 0; }
.details dl { display: grid; grid-template-columns: repeat(2, 1fr); margin: 18px 0 0; }
.details dl div { border-top: 1px solid var(--line); padding: 14px 5px; }
.details dt { color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.details dd { margin: 0; font-weight: 700; }

.scanner-panel { padding: 28px; color: white; background: var(--forest-2); border-radius: 15px; margin-bottom: 20px; }
.scanner-form { max-width: 760px; margin: auto; }
.scanner-form label { color: #d9e7de; }
.scanner-form > div { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin: 7px 0; }
.scanner-form input { font-size: 21px; padding: 14px 16px; }
.live-pill { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 750; }
.live-pill span { width: 9px; height: 9px; border-radius: 50%; background: #4fc47b; box-shadow: 0 0 0 5px #4fc47b22; }
.scan-result { display: grid; grid-template-columns: 1.4fr .8fr; gap: 24px; padding: 25px; background: white; border: 2px solid #b9d7c4; border-radius: 15px; }
.scan-result.blocked { border-color: #e1aaa7; }
.scan-person { display: flex; align-items: center; gap: 20px; }
.scan-person h2 { margin: 4px 0 6px; font-size: 30px; }.scan-person p:last-child { color: var(--muted); }
.gate-photo { width: 130px; height: 155px; object-fit: cover; border-radius: 11px; }
.scan-status { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; border-left: 1px solid var(--line); padding-left: 24px; align-content: center; font-size: 13px; }
.scan-status span { color: var(--muted); }.scan-status strong { text-align: right; }
.ok-text { color: #1c7246; }.danger-text { color: var(--red); }
.record-form { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 12px; border-top: 1px solid var(--line); padding-top: 20px; }
.record-form .check { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.check input { width: auto; }
.movement-button { min-width: 180px; border: 0; border-radius: 9px; padding: 13px 18px; color: white; font-weight: 900; cursor: pointer; }
.movement-button.out { background: #a06408; }.movement-button.in { background: var(--forest); }
.movement-button:disabled { cursor: not-allowed; opacity: .45; }
.late-notice { grid-column: 1 / -1; margin: 0; padding: 12px 14px; color: #8d2d28; background: #fbe7e5; border: 1px solid #e7b9b5; border-radius: 8px; }
.authorized-notice { grid-column: 1 / -1; display: grid; gap: 4px; padding: 12px 14px; color: #155b37; background: #e2f3e8; border: 1px solid #aed5bc; border-radius: 8px; font-size: 13px; }
.authorized-notice span { color: #476657; }
.blocked-message { grid-column: 1 / -1; color: var(--red); background: #fff0ef; padding: 14px; border-radius: 8px; text-align: center; font-weight: 750; }

.approval-form { margin-bottom: 20px; }
.approval-list td:nth-child(3) { min-width: 220px; max-width: 380px; }
.inline-email-form { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 7px; min-width: 275px; }

.visitor-layout { display: grid; gap: 20px; margin-bottom: 22px; }
.visitor-entry-form { max-width: none; }.visitor-entry-form h2 { margin: 5px 0 0; }
.auto-fields input[readonly] { color: #536159; background: #f2f5f3; }
.active-vehicles .search-row input { max-width: 420px; }
.exit-form { display: grid; grid-template-columns: minmax(170px, 1fr) auto; gap: 8px; min-width: 330px; }
.visitor-summary { margin-top: 0; }
.visitor-filter label:nth-of-type(2) { min-width: min(360px, 50vw); }

.policy-strip { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 14px 18px; color: #234a35; background: #e7f3ea; border: 1px solid #bad9c5; border-radius: 10px; font-size: 13px; }
.policy-strip span { color: #4c6155; text-align: right; }
.report-summary { grid-template-columns: repeat(5, 1fr); margin-bottom: 18px; }
.report-filter { display: grid; grid-template-columns: minmax(190px, .85fr) 180px minmax(250px, 1.35fr) auto; align-items: end; gap: 12px; }
.report-filter label { min-width: 0; }
.report-filter .button { min-height: 43px; }
.report-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--line); }
.report-tabs a { padding: 8px 12px; color: #526158; background: #f1f5f2; border: 1px solid #d9e1db; border-radius: 8px; font-size: 12px; font-weight: 750; }
.report-tabs a:hover { color: var(--forest); border-color: #9eafa4; }
.report-tabs a.active { color: white; background: var(--forest); border-color: var(--forest); }
.panel-copy { max-width: 760px; margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.filter-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.filter-tabs a { color: var(--muted); background: white; padding: 8px 13px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.filter-tabs a.active { color: white; background: var(--forest); border-color: var(--forest); }
.inline-actions { display: flex; gap: 9px; }.link { border: 0; background: transparent; font: inherit; padding: 0; cursor: pointer; }
.success-link { color: #187344; }.danger-link { color: var(--red); }
.alert { margin: 0 0 18px; padding: 13px 16px; border-radius: 9px; background: #e7f3ea; color: #175e38; border: 1px solid #bad9c5; }
.alert.error { color: #932e2a; background: #fbe7e5; border-color: #e7b9b5; }

.help-heading { align-items: flex-start; }
.help-jump { position: sticky; top: 10px; z-index: 5; display: flex; gap: 7px; overflow-x: auto; margin-bottom: 20px; padding: 9px; background: #ffffffee; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 6px 20px #1737230c; backdrop-filter: blur(8px); }
.help-jump a { flex: 0 0 auto; padding: 8px 11px; color: #405047; background: #f0f4f1; border-radius: 7px; font-size: 12px; font-weight: 750; }
.help-jump a:hover { color: white; background: var(--forest); }
.help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.help-card { position: relative; scroll-margin-top: 90px; overflow: hidden; }
.help-card.wide { grid-column: 1 / -1; }
.help-card .help-number { position: absolute; top: 13px; right: 18px; color: #e4ece6; font-size: 42px; font-weight: 900; letter-spacing: -.06em; }
.help-card h2 { margin: 6px 0 11px; font-size: 23px; }.help-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; }
.help-card ol { margin: 15px 0 20px; padding-left: 20px; color: #415047; font-size: 13px; line-height: 1.65; }
.help-card > a { font-size: 13px; font-weight: 800; }
.role-list { display: grid; gap: 9px; margin: 16px 0 21px; }.role-list div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 12px; background: #f2f6f3; border-radius: 7px; }
.role-list strong { color: var(--forest); font-size: 12px; }.role-list span { color: var(--muted); font-size: 12px; line-height: 1.45; }

.card-page { min-height: 100vh; display: grid; place-content: center; gap: 18px; padding: 30px; }
.id-card { width: 86mm; height: 54mm; overflow: hidden; background: white; border-radius: 3mm; box-shadow: 0 8px 35px #14241b22; border: .3mm solid #ccd6cf; display: grid; grid-template-rows: 14mm 1fr 14mm; }
.id-card header { padding: 2.5mm 4mm; display: flex; align-items: center; gap: 3mm; background: var(--forest-2); color: white; }
.id-card header strong { display: block; font-size: 3mm; }.id-card header span { font-size: 2.2mm; color: #d2e1d8; }
.mini-logo { width: 9mm; height: 9mm; border-radius: 2mm; font-size: 2.5mm; flex: 0 0 auto; }
.id-card section { display: grid; grid-template-columns: 20mm 1fr; gap: 3.5mm; padding: 3mm 4mm 1mm; }
.card-photo { width: 20mm; height: 24mm; object-fit: cover; border-radius: 1.5mm; }
.id-card section h1 { font-size: 4mm; margin: .6mm 0 1.4mm; line-height: 1; }.id-card section p { margin: .8mm 0; font-size: 2.35mm; }
.id-card footer { display: grid; place-items: center; padding: 1mm 3mm 2mm; }
.barcode39 { height: 7mm; display: flex; align-items: stretch; background: white; padding: 0 3mm; }
.barcode39 i { display: block; height: 100%; flex: 0 0 auto; }
.barcode39 .bar { background: #000; }.barcode39 .space { background: #fff; }
.barcode39 .narrow { width: var(--n); }.barcode39 .wide { width: var(--w); }
.id-card footer small { font-size: 2mm; letter-spacing: .6mm; color: #222; }
.print-note { max-width: 86mm; margin: 0; color: var(--muted); font-size: 12px; }.print-button { justify-self: center; }

@media (max-width: 900px) {
  .topbar { align-items: flex-start; flex-wrap: wrap; padding: 14px 4vw; gap: 10px; }
  .topbar nav { order: 3; width: 100%; overflow-x: auto; }.user-menu { margin-left: auto; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid, .profile-grid, .scan-result, .users-grid, .import-grid, .photo-import-panel { grid-template-columns: 1fr; }
  .photo-field { align-items: center; }.scan-status { border: 0; padding: 0; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 11px 12px; gap: 9px; }
  .brand { min-width: 0; }.brand > span:last-child { overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
  .brand-mark { width: 40px; height: 40px; flex: 0 0 auto; }
  .nav-toggle { display: inline-flex; }
  .topbar nav { display: none; grid-column: 1 / -1; width: 100%; overflow: visible; padding: 7px 0 3px; background: transparent; }
  .topbar.nav-open nav { display: grid; grid-template-columns: 1fr; gap: 5px; }
  .topbar nav a { min-height: 44px; display: flex; align-items: center; justify-content: flex-start; width: 100%; padding: 10px 13px; white-space: normal; font-size: 14px; }
  .user-menu { display: none; grid-column: 1 / -1; justify-content: flex-start; gap: 8px; padding: 8px 2px 3px; font-size: 13px; border-top: 1px solid #ffffff24; }
  .topbar.nav-open .user-menu { display: flex; }.user-menu > span { display: none; }.user-menu a { min-height: 40px; display: inline-flex; align-items: center; padding: 7px 12px; border: 1px solid #ffffff2d; border-radius: 7px; }
  .shell { width: 100%; margin: 20px 0 55px; padding: 0 12px; }
  .panel { padding: 16px; border-radius: 12px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .page-heading h1 { font-size: 30px; }.heading-copy { font-size: 14px; }
  .actions { width: 100%; justify-content: stretch; }.actions .button { flex: 1; }
  .stat-grid, .two-col, .three-col, .details dl { grid-template-columns: 1fr; }
  .stat { min-height: 105px; padding: 17px; }.stat strong { font-size: 34px; }
  .feature-grid, .help-grid { grid-template-columns: 1fr; }
  .help-card.wide { grid-column: auto; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .import-summary { grid-template-columns: repeat(2, 1fr); }
  .report-summary { grid-template-columns: repeat(2, 1fr); }
  .report-filter { grid-template-columns: 1fr; }.report-filter .button { width: 100%; }
  .report-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }.report-tabs a { flex: 0 0 auto; }
  .policy-strip { align-items: flex-start; flex-direction: column; gap: 5px; }.policy-strip span { text-align: left; }
  .record-form { grid-template-columns: 1fr; }.record-form .check { grid-column: auto; }
  .record-form .movement-button { width: 100%; }
  .scanner-form > div { grid-template-columns: 1fr; }
  .scanner-panel { padding: 20px 16px; }.scanner-form input { min-width: 0; font-size: 18px; }
  .scan-result { padding: 16px; gap: 18px; }.scan-person { align-items: flex-start; }.gate-photo { width: 90px; height: 110px; }.scan-person h2 { font-size: 23px; }
  .scan-status { grid-template-columns: minmax(105px, 1fr) minmax(120px, 1fr); font-size: 13px; }
  .search-row { align-items: stretch; flex-direction: column; }.search-row > input, .search-row label { width: 100%; max-width: none; min-width: 0; }.search-row .button { width: 100%; }
  .mobile-card-table { overflow: visible; }
  .mobile-card-table table, .mobile-card-table tbody, .mobile-card-table tr, .mobile-card-table td { display: block; width: 100%; }
  .mobile-card-table thead { display: none; }
  .mobile-card-table tbody { display: grid; gap: 12px; }
  .mobile-card-table tr { padding: 12px 14px; background: #f9fbf9; border: 1px solid var(--line); border-radius: 10px; }
  .mobile-card-table td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 7px 0; border: 0; overflow-wrap: anywhere; }
  .mobile-card-table td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
  .mobile-card-table td.empty { display: block; padding: 24px 8px; }.mobile-card-table td.empty::before { content: none; }
  .mobile-card-table .student-cell { align-items: flex-start; }
  .pagination { justify-content: flex-start; }.page-link { min-height: 42px; }
  .exit-form { grid-template-columns: 1fr; min-width: 240px; }
  .login-card { padding: 28px; }
  .login-emblem { width: 110px; height: 110px; }
  .login-header .college-name { font-size: 17px; }
}
@media print {
  .print-note, .print-button { display: none; }
  .card-page { padding: 0; background: white; }
  .id-card { box-shadow: none; }
}