:root {
  color-scheme: light;
  --bg: #f1f4f2;
  --surface: #f7f9f8;
  --paper: #ffffff;
  --text: #17221e;
  --muted: #5e6a65;
  --border: #d1d8d4;
  --strong-border: #929f99;
  --primary: #215b49;
  --primary-hover: #184638;
  --header: #17241f;
  --header-border: #32433c;
  --accent: #b08b46;
  --success: #236b47;
  --success-bg: #edf7f1;
  --danger: #a43b32;
  --danger-bg: #fbf0ef;
  --warning: #8a5723;
  --focus: #3e8b72;
  font-family: "IBM Plex Sans", "Aptos", "Noto Sans", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primary-hover); }
h1, h2 { margin: 0; color: #13201b; line-height: 1.25; letter-spacing: -.015em; }
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 700; }
p { margin: 8px 0 0; }
button, input, select, textarea { font: inherit; }
button, .button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--primary); border-radius: 4px; background: var(--primary); color: #fff; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
button:hover, .button:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.button.secondary { color: var(--text); background: var(--paper); border-color: var(--border); }
.button.secondary:hover { color: var(--text); background: var(--surface); border-color: var(--strong-border); }
input, select, textarea {
  width: 100%; min-height: 40px; border: 1px solid var(--strong-border); border-radius: 3px; background: var(--paper); color: var(--text); padding: 9px 11px;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent); outline-offset: 1px; border-color: var(--primary);
}
label { display: block; margin-bottom: 5px; color: #25332d; font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.access-page { display: grid; min-height: 100vh; grid-template-rows: 62px 1fr; }
.access-header { display: flex; align-items: center; gap: 18px; padding: 0 28px; border-bottom: 3px solid var(--accent); background: var(--header); color: #fff; }
.access-header strong { font-size: 17px; font-weight: 700; }
.access-header span { padding-left: 18px; border-left: 1px solid #52635c; color: #cbd3cf; }
.centered-page { display: grid; place-items: center; padding: 32px 24px; }
.plain-panel { width: min(100%, 430px); padding: 28px; background: var(--paper); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 2px 8px rgba(23, 34, 30, .07); }
.plain-panel > p { color: var(--muted); }
.unlock-panel form { margin: 24px 0 16px; }
.unlock-panel input { margin-bottom: 12px; font-size: 18px; }
.unlock-panel button { width: 100%; }
.text-link { display: inline-block; margin-top: 4px; }
.site-list { display: grid; margin-top: 22px; border-top: 1px solid var(--border); }
.site-list a { display: flex; justify-content: space-between; padding: 14px 2px; border-bottom: 1px solid var(--border); color: #254e40; font-weight: 600; text-decoration: none; }
.notice { max-width: 1200px; margin: 0 0 16px; padding: 11px 13px; border: 1px solid; border-radius: 3px; }
.notice.error { background: var(--danger-bg); color: #7a271a; border-color: #fecdca; }
.notice.success { background: var(--success-bg); color: var(--success); border-color: #bbf7d0; }

/* Kiosk */
.kiosk-page { min-height: 100vh; background: #111a17; color: #f6f8f7; display: grid; grid-template-rows: 62px 1fr 42px; }
.kiosk-header { display: flex; justify-content: space-between; align-items: center; padding: 0 26px; border-bottom: 3px solid var(--accent); background: var(--header); }
.kiosk-header div, .kiosk-header nav { display: flex; align-items: center; gap: 18px; }
.kiosk-header strong { font-size: 17px; }
.kiosk-header span { padding-left: 18px; border-left: 1px solid #52635c; color: #cbd3cf; }
.kiosk-header a, .link-button { color: #d9dfdc; text-decoration: none; }
.kiosk-header form { margin: 0; }
.link-button { min-height: auto; padding: 4px; border: 0; background: transparent; font-weight: 500; }
.link-button:hover { background: transparent; color: #fff; }
.kiosk-workspace { position: relative; display: grid; place-items: center; padding: 32px; }
.kiosk-step { width: min(820px, 100%); text-align: center; }
.kiosk-step .step-number { width: 42px; height: 42px; display: grid; place-items: center; margin: 0 auto 22px; border: 2px solid #75857e; border-radius: 50%; color: #d9dfdc; font-weight: 700; }
.kiosk-step h1 { color: #fff; }
.kiosk-step h1 { font-size: clamp(46px, 7vw, 76px); }
.kiosk-step > p { color: #cbd3cf; font-size: clamp(20px, 2.6vw, 30px); margin: 14px 0 34px; }
.kiosk-step input { height: 86px; border: 3px solid #6d7c75; border-radius: 4px; background: #1c2924; color: #fff; font-size: clamp(30px, 5vw, 50px); font-weight: 700; text-align: center; letter-spacing: .04em; }
.kiosk-step input:focus { border-color: #65b99b; outline: 5px solid rgba(101, 185, 155, .16); }
.input-hint { margin-top: 16px; color: #a9b5b0; font-size: 17px; }
.kiosk-gauges { display: grid; grid-template-columns: repeat(3, 1fr); width: min(680px, 100%); margin: 26px auto 0; padding-top: 22px; border-top: 1px solid #32433c; }
.kiosk-gauge { margin: 0; padding: 0 18px; border-right: 1px solid #32433c; }
.kiosk-gauge:last-child { border-right: 0; }
.gauge-dial { position: relative; width: 140px; height: 90px; margin: 0 auto; }
.gauge-dial svg { display: block; width: 140px; height: 90px; overflow: visible; }
.gauge-track, .gauge-progress { fill: none; stroke-width: 12; }
.gauge-track { stroke: #35463f; }
.gauge-progress { stroke-linecap: butt; }
.gauge-progress-available { stroke: #65a47f; }
.gauge-progress-checked-out { stroke: #c5a35d; }
.gauge-progress-overdue { stroke: #c7655d; }
.gauge-value { position: absolute; right: 0; bottom: -1px; left: 0; color: #fff; font-size: 34px; line-height: 1; text-align: center; }
.kiosk-gauge figcaption { margin-top: 8px; color: #cbd3cf; font-size: 15px; font-weight: 600; text-align: center; }
.result-step { padding: 38px 24px; border: 2px solid #59a878; background: #14261c; border-radius: 4px; }
.result-step.error { border-color: #f87171; background: #2b1717; }
.result-symbol { font-size: 76px; line-height: 1; color: #4ade80; }
.result-step.error .result-symbol { color: #f87171; }
.result-step h1 { margin-top: 18px; font-size: clamp(38px, 6vw, 62px); }
.result-step > p { color: #fafafa; }
.kiosk-help { position: absolute; inset: 24px; max-width: 560px; margin: auto; padding: 28px; border: 1px solid #53635c; border-radius: 4px; background: #1c2924; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.kiosk-help h2 { color: #fff; }
.kiosk-help dl { margin: 20px 0; }
.kiosk-help dl div { display: grid; grid-template-columns: 90px 1fr; padding: 10px 0; border-bottom: 1px solid #3f3f46; }
.kiosk-help dt { font-family: "IBM Plex Mono", "Noto Sans Mono", monospace; font-weight: 700; }
.kiosk-help dd { margin: 0; color: #d4d4d8; }
.kiosk-footer { display: flex; gap: 26px; align-items: center; padding: 0 24px; color: #a9b5b0; border-top: 1px solid #32433c; background: var(--header); }
.kiosk-footer #clock { margin-left: auto; }

/* Admin */
.admin-header { min-height: 62px; display: flex; align-items: center; gap: 20px; padding: 0 26px; border-bottom: 3px solid var(--accent); background: var(--header); color: #fff; }
.admin-header .brand { color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; }
.admin-header > span { color: #cbd3cf; padding-left: 20px; border-left: 1px solid #52635c; }
.admin-header nav { align-self: stretch; display: flex; align-items: center; gap: 4px; margin-left: auto; }
.admin-header nav a { display: flex; align-items: center; align-self: stretch; padding: 0 12px; border-bottom: 3px solid transparent; color: #d9dfdc; text-decoration: none; }
.admin-header nav a:hover, .admin-header nav a.active { border-bottom-color: var(--accent); background: #20322b; color: #fff; }
.operator-bar { min-height: 34px; display: flex; align-items: center; justify-content: flex-end; gap: 5px; padding: 0 26px; border-bottom: 1px solid var(--border); background: #e8edea; color: var(--muted); font-size: 13px; }
.operator-bar form { margin: 0 0 0 10px; }
.operator-lock { min-height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--primary); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.operator-lock:hover { border: 0; background: transparent; color: var(--primary-hover); }
.admin-content { width: min(100% - 48px, 1240px); margin: 0 auto; padding: 30px 0 52px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-heading p { color: var(--muted); }
.actions, .form-actions { display: flex; align-items: center; gap: 10px; }
.status-summary { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 0 28px; background: var(--paper); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 1px 3px rgba(23, 34, 30, .04); }
.status-summary div { padding: 18px 20px; border-right: 1px solid var(--border); }
.status-summary div:last-child { border: 0; }
.status-summary dt { color: var(--muted); font-size: 13px; font-weight: 600; }
.status-summary dd { margin: 3px 0 0; font-size: 28px; font-weight: 700; }
.inventory-chart { margin: 0 0 28px; padding: 20px; border: 1px solid var(--border); border-radius: 4px; background: var(--paper); box-shadow: 0 1px 3px rgba(23, 34, 30, .04); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.section-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.chart-plot { display: grid; gap: 18px; padding-top: 20px; }
.chart-row { display: grid; grid-template-columns: 250px minmax(160px, 1fr) 54px; align-items: center; gap: 16px; }
.chart-label { color: #2b3933; font-weight: 600; }
.chart-track { height: 16px; overflow: hidden; border: 1px solid #d1d8d4; background: #e9eeeb; }
.chart-fill { height: 100%; min-width: 0; }
.chart-fill-available { background: #39765c; }
.chart-fill-checked-out { background: #b08b46; }
.chart-fill-overdue { background: #a43b32; }
.chart-value { color: #1e2b26; font-size: 18px; text-align: right; }
.table-section { margin-top: 28px; }
.table-section h2 { margin-bottom: 12px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 4px; background: var(--paper); box-shadow: 0 1px 3px rgba(23, 34, 30, .04); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 13px; text-align: left; border-bottom: 1px solid #e7e5e4; white-space: nowrap; }
th { background: #e9eeeb; color: #33423b; font-size: 13px; font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f5f8f6; }
.empty-cell { padding: 32px; color: var(--muted); text-align: center; }
.row-actions { text-align: right; }
.status { font-size: 13px; font-weight: 600; }
.status-available { color: var(--success); }
.status-checked-out { color: var(--warning); }
.status-out-of-service, .status-missing { color: var(--danger); }
.filter-bar { display: grid; grid-template-columns: minmax(260px, 1fr) 200px auto; align-items: end; gap: 12px; margin-bottom: 16px; }
.filter-bar button { min-width: 92px; }
.import-panel, .danger-section { margin-top: 22px; padding: 18px; border: 1px solid var(--border); border-radius: 4px; background: var(--paper); }
.import-panel summary { cursor: pointer; font-weight: 700; }
.import-panel form { display: grid; grid-template-columns: minmax(260px, 1fr) auto; align-items: end; gap: 12px; margin-top: 16px; }
.import-panel form p { grid-column: 1 / -1; color: var(--muted); }
.record-form { max-width: 850px; padding: 22px; border: 1px solid var(--border); border-radius: 4px; background: var(--paper); box-shadow: 0 1px 3px rgba(23, 34, 30, .04); }
.import-form input[type="file"] { padding: 8px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.full-width { grid-column: 1 / -1; }
.form-actions { margin-top: 22px; }
.field-note { color: var(--muted); font-size: 13px; }
.danger-section { max-width: 850px; border-color: #fecdca; }
.danger-section p { margin-bottom: 14px; color: var(--muted); }
button.danger { background: var(--danger); border-color: var(--danger); }
.device-details { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 20px; border: 1px solid var(--border); border-radius: 4px; background: var(--paper); }
.device-details div { padding: 14px 16px; border-right: 1px solid var(--border); }
.device-details div:last-child { border: 0; }
.device-details dt { color: var(--muted); font-size: 13px; }
.device-details dd { margin: 3px 0 0; font-weight: 600; }
.notes-cell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.settings-section { margin-top: 28px; }
.settings-section > h2 { margin-bottom: 12px; }
.password-grid { grid-template-columns: repeat(3, 1fr); }
.checkbox-field { display: flex; align-items: center; gap: 10px; padding-top: 28px; }
.checkbox-field input { width: 18px; min-height: 18px; height: 18px; margin: 0; }
.checkbox-field label { margin: 0; }
.session-controls { max-width: none; }
.session-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.session-actions form { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: 10px; }
.session-actions label { grid-column: 1 / -1; }
.system-list { margin: 0; border: 1px solid var(--border); border-radius: 4px; background: var(--paper); }
.system-list div { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.system-list div:last-child { border-bottom: 0; }
.system-list dt { color: var(--muted); font-weight: 600; }
.system-list dd { margin: 0; font-weight: 600; }

[hidden] { display: none !important; }
@media (max-width: 760px) {
  .kiosk-header { padding: 0 14px; }
  .kiosk-header div span { display: none; }
  .kiosk-workspace { padding: 20px; }
  .kiosk-gauges { gap: 0; }
  .kiosk-gauge { padding: 0 4px; }
  .gauge-dial, .gauge-dial svg { width: 104px; height: 68px; }
  .gauge-value { font-size: 27px; }
  .admin-header { flex-wrap: wrap; padding: 10px 16px; }
  .admin-header > span { border: 0; padding: 0; }
  .admin-header nav { width: 100%; min-height: 42px; margin: 0; }
  .admin-header nav { overflow-x: auto; }
  .admin-header nav a { min-height: 42px; padding: 0 8px; white-space: nowrap; }
  .operator-bar { padding: 0 16px; }
  .admin-content { width: min(100% - 24px, 1200px); padding-top: 20px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .status-summary { grid-template-columns: 1fr 1fr; }
  .status-summary div { border-bottom: 1px solid var(--border); }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .chart-row { grid-template-columns: 1fr 44px; gap: 8px 12px; }
  .chart-track { grid-row: 2; grid-column: 1 / -1; }
  .chart-value { grid-row: 1; grid-column: 2; }
  .filter-bar, .form-grid, .import-panel form, .device-details { grid-template-columns: 1fr; }
  .checkbox-field { padding-top: 0; }
  .session-actions, .session-actions form, .system-list div { grid-template-columns: 1fr; }
  .system-list div { gap: 4px; }
  .session-actions label { grid-column: auto; }
  .full-width { grid-column: auto; }
  .device-details div { border-right: 0; border-bottom: 1px solid var(--border); }
}