:root {
  --tblr-primary:#087f8c;--tblr-primary-rgb:8,127,140;--tblr-body-bg:#f4f6fa;--tblr-body-color:#21334a;--tblr-font-sans-serif:"Segoe UI",system-ui,sans-serif}
body {
  font-family:var(--tblr-font-sans-serif);font-size:14px}
.app-shell {
  display:flex;min-height:100vh}
.app-sidebar {
  width:246px;flex-shrink:0;background:#142c43;color:#b5c6d5;padding:30px 20px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.brand {
  display:flex;align-items:center;gap:12px;color:white;font-size:22px;font-weight:700;text-decoration:none;margin-bottom:42px}
.brand:hover {
  color:white}
.brand small {
  display:block;font-size:9px;letter-spacing:2px;color:#a7c1cf;margin-top:4px}
.brand-mark {
  display:grid;place-items:center;width:40px;height:44px;background:#158896;border-radius:10px;font-size:30px}
.nav-caption {
  font-size:10px;font-weight:700;letter-spacing:1.4px;margin:20px 10px 12px;color:#8ca6bb}
.app-sidebar nav a {
  display:flex;gap:12px;color:#c3d1de;padding:12px 14px;border-radius:8px;margin:3px 0;text-decoration:none;font-weight:500}
.app-sidebar nav a span {
  width:20px;font-size:19px;line-height:20px}
.app-sidebar nav a:hover,.app-sidebar nav a[aria-current] {
  background:#20445b;color:#fff}
.app-sidebar nav a[aria-current] {
  box-shadow:inset 3px 0 #40c4b4}
.sidebar-note {
  margin-top:auto;padding:36px 12px 5px;line-height:1.8;font-size:12px;color:#92acbd}
.app-main {
  flex:1;min-width:0}
.topbar {
  background:#fff;min-height:76px;border-bottom:1px solid #e4e9ef;padding:16px 36px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.user-menu {
  display:flex;align-items:center;gap:12px}
.user-menu form {
  margin:0}
main {
  max-width:1550px;margin:0 auto;padding:36px}
.app-footer {
  padding:22px 36px;display:flex;justify-content:space-between;color:#69798b;font-size:12px}
.card {
  padding:28px;border:1px solid #e1e7ef;border-radius:12px;box-shadow:0 3px 12px #192f4a03;margin-bottom:24px;display:block}
.card h1 {
  font-size:28px;letter-spacing:-.7px;margin:0 0 18px;color:#162e45}
.card h2 {
  font-size:19px;margin:20px 0 16px}
.card p {
  line-height:1.7}
.card>p {
  color:#607186}
a {
  color:#087b89}
button:not(.btn) {
  background:#087f8c;color:#fff;border:1px solid transparent;border-radius:7px;padding:10px 18px;font-weight:600;cursor:pointer}
button:hover {
  filter:brightness(.95)}
input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea {
  font:inherit;display:block;width:100%;min-height:43px;border:1px solid #cbd5df;border-radius:7px;background:white;padding:10px 12px;color:#21334a;margin:7px 0 18px;box-sizing:border-box}
input:focus,textarea:focus,select:focus {
  outline:2px solid #087f8c55;outline-offset:1px}
input[type=checkbox] {
  width:18px;height:18px;vertical-align:middle;accent-color:#087f8c}
label {
  font-weight:600;color:#394d63}
textarea {
  min-height:90px}
.helptext {
  display:block;color:#6a7c90;font-size:12px;margin-top:-10px;line-height:1.6}
.errorlist {
  background:#fff0f1;color:#a42b3c;border-radius:6px;padding:12px 16px 12px 30px}
.errorlist+input {
  border-color:#b63143!important}
[role=alert] {
  color:#a42b3c;background:#fff0f1;padding:14px;border-radius:8px}
[role=status] {
  background:#e8f7f3;color:#166b59;padding:12px 16px;border-left:3px solid #219e80;border-radius:6px}
article {
  padding:20px 0;border-bottom:1px solid #e8edf3;overflow-wrap:anywhere}
article:last-of-type {
  border-bottom:0}
article h2 {
  font-size:17px!important;margin:0 0 9px!important}
article p {
  margin-bottom:8px}
.page-intro {
  display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:26px}
.page-intro h1 {
  font-size:30px;margin:4px 0 8px;letter-spacing:-.8px}
.eyebrow {
  font-size:11px;color:#087f8c;font-weight:700;letter-spacing:2px}
.muted {
  color:#6a7c90}
.hero {
  padding:48px;background:linear-gradient(110deg,#15354a,#15606b);color:white;position:relative;overflow:hidden}
.hero h1 {
  font-size:38px;color:white;max-width:650px;line-height:1.25}
.hero p {
  color:#d3e7eb;max-width:620px}
.hero .btn {
  margin:10px 10px 0 0}
.hero:after {
  content:"▤";position:absolute;font-size:230px;right:40px;top:0;color:#ffffff0b;pointer-events:none}
.quick-grid {
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.quick-card {
  display:block;text-decoration:none;color:#21334a;min-height:150px}
.quick-card:hover {
  border-color:#087f8c}
.quick-card strong {
  display:block;font-size:19px;margin:15px 0 8px}
.quick-icon {
  font-size:26px;color:#087f8c}
.search-panel form {
  display:grid;grid-template-columns:minmax(0,2fr) minmax(180px,1fr) auto;align-items:end;gap:16px}
.search-panel input,.search-panel select {
  margin-bottom:0}
.catalog-grid {
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.book-card {
  padding:0;overflow:hidden;display:flex;flex-direction:column}
.book-cover {
  height:160px;background:linear-gradient(135deg,#e2f1ee,#d6e6ed);display:flex;align-items:center;justify-content:center;position:relative}
.book-cover:before {
  content:"";position:absolute;width:88px;height:118px;border-radius:3px 8px 8px 3px;background:#195368;box-shadow:inset 7px 0 #ffffff23,7px 8px 0 #ffffffa8,12px 15px 20px #21405222;transform:rotate(-8deg)}
.book-cover span {
  position:relative;color:#fff;font-size:35px;transform:rotate(-8deg)}
.book-card:nth-child(3n+2) .book-cover {
  background:#eee9dd}
.book-card:nth-child(3n+2) .book-cover:before {
  background:#8c6549}
.book-card:nth-child(3n) .book-cover {
  background:#e8e7f2}
.book-card:nth-child(3n) .book-cover:before {
  background:#5a567a}
.book-body {
  padding:22px;flex:1}
.book-body h2 {
  font-size:17px;margin:12px 0!important;line-height:1.5}
.book-body p {
  font-size:13px}
.book-code {
  font-family:monospace;color:#738397;font-size:11px}
.badge {
  letter-spacing:0}
.desk-grid {
  display:grid;grid-template-columns:1fr 1fr;gap:24px}
.desk-grid .card {
  margin:0}
.desk-grid h2 {
  margin-top:0}
.scan-form input:not([type=hidden]) {
  min-height:52px;font-size:17px}
.account-shell main {
  max-width:620px;padding-top:50px}
.account-shell .card {
  padding:36px}
.account-shell .app-sidebar {
  display:none}
.account-shell .topbar {
  padding-left:5vw}
.account-shell .app-main {
  background:radial-gradient(at 20% 30%,#deefed,transparent 60%),#f4f6fa}
.account-shell h1 {
  font-size:26px}
.account-shell code {
  overflow-wrap:anywhere}
.account-shell button[type=submit] {
  width:100%}
.skip-link {
  position:fixed;left:10px;top:-100px;z-index:999;background:#fff;padding:12px}
.skip-link:focus {
  top:10px}
.form-card {
  max-width:900px}
.form-card form {
  max-width:720px}
.stat-grid {
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stat {
  padding:22px}
.stat strong {
  display:block;font-size:30px;margin-top:8px;color:#163a50}
.list-table {
  width:100%;border-collapse:collapse}
.list-table th {
  font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#697b8d;background:#f5f7fa}
.list-table th,.list-table td {
  text-align:left;padding:16px;border-bottom:1px solid #e8edf2}
.list-table td {
  vertical-align:middle}
.list-table td small {
  display:block;color:#6c7d90;margin-top:6px}
.table-wrap {
  overflow-x:auto}
.empty-state {
  padding:45px 20px;text-align:center;background:#f8fafc;border:1px dashed #d1dce6;border-radius:10px;color:#6b7e91}
.pagination-line {
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding-top:20px}
.section-links {
  display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.section-links a {
  padding:8px 14px;background:white;border:1px solid #dce5ed;border-radius:7px}
section[id] {
  scroll-margin-top:20px}
 @media(min-width:1100px) {
  .form-card form {
  display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.form-card form>button,.form-card form>.errorlist {
  grid-column:1/-1}
.form-card form p {
  min-width:0}
}
@media(max-width:1150px) {
  .app-sidebar {
  width:215px;padding:24px 14px}
.catalog-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.stat-grid {
  grid-template-columns:1fr 1fr}
.topbar,main {
  padding:24px}
.quick-grid {
  grid-template-columns:1fr 1fr}
}
@media(max-width:760px) {
  .app-shell {
  display:block}
.app-sidebar {
  width:100%;position:static;height:auto;padding:18px;display:block}
.brand {
  margin:0 0 14px;font-size:20px}
.brand small {
  font-size:8px}
.app-sidebar nav {
  display:flex;overflow-x:auto;gap:6px;padding-bottom:4px}
.app-sidebar nav a {
  white-space:nowrap;padding:8px 12px;font-size:13px}
.nav-caption,.sidebar-note,.app-sidebar nav .nav-caption {
  display:none}
.topbar {
  padding:14px 18px;flex-wrap:wrap;font-size:12px}
.user-menu {
  gap:8px}
.user-menu .avatar {
  display:none}
main {
  padding:20px 16px}
.card {
  padding:20px}
.page-intro {
  align-items:flex-start}
.page-intro h1 {
  font-size:26px}
.hero {
  padding:28px}
.hero h1 {
  font-size:29px}
.quick-grid,.catalog-grid,.desk-grid {
  grid-template-columns:1fr}
.search-panel form {
  grid-template-columns:1fr}
.search-panel button {
  min-height:44px}
.stat-grid {
  gap:10px}
.stat {
  padding:16px}
.app-footer {
  padding:18px;gap:12px;flex-wrap:wrap}
.account-shell main {
  padding-top:24px}
.account-shell .card {
  padding:24px}
.list-table th,.list-table td {
  padding:12px}
.book-cover {
  height:150px}
}
@media print {
  .app-sidebar,.topbar,.app-footer,button,.section-links {
  display:none}
.app-main {
  width:100%}
main {
  padding:0}
.card {
  box-shadow:none;break-inside:avoid}
}


.record-row {
  transition:background .15s}
.record-row:hover {
  background:#f8fafb}
.card>form[method=get] {
  background:#f6f8fa;border:1px solid #e7ecf1;border-radius:9px;padding:18px;margin:18px 0 24px}
.search-panel>form[method=get] {
  background:none;border:0;padding:0;margin:20px 0 0}
.list-table {
  min-width:620px}
.list-table td:first-child {
  min-width:230px}
.list-table td:last-child {
  white-space:nowrap}
.btn-primary {
  background:#087f8c;border-color:#087f8c}
.btn-outline-primary {
  color:#087f8c;border-color:#087f8c}
.btn-outline-primary:hover {
  background:#087f8c;border-color:#087f8c;color:white}
 .account-shell .app-footer {
  max-width:620px;margin:auto}
 .card:empty {
  display:none}


.account-brand {
  display:block;text-align:center;font-size:22px;font-weight:700;letter-spacing:-.4px;margin-bottom:24px;color:#163a50;text-decoration:none}

/* Compact navigation inspired by the supplied reference. */
body { background:#f3f4f3; }
.app-sidebar { width:88px; padding:24px 14px; background:transparent; color:#61736b; align-items:center; z-index:30; }
.rail-brand { width:48px; height:48px; display:grid; place-items:center; color:#168267; margin:0 0 54px; }
.rail-brand .ui-icon { width:30px; height:30px; }
.app-sidebar nav { width:100%; }
.rail-group { background:#fff; padding:8px 5px; border-radius:30px; display:flex; flex-direction:column; align-items:center; gap:7px; margin-bottom:18px; box-shadow:0 3px 18px #213c2b03; }
.app-sidebar nav a.rail-link,.rail-link { position:relative; display:flex; align-items:center; justify-content:center; width:42px; height:42px; min-height:42px; padding:0; margin:0; border:0; border-radius:50%; background:transparent; color:#65766f; text-decoration:none; cursor:pointer; }
.app-sidebar nav a.rail-link:hover,.rail-link:hover { color:#128168; background:#edf6f1; }
.app-sidebar nav a.rail-link[aria-current] { background:#14876a; color:white; box-shadow:0 3px 8px #14876a20; }
.app-sidebar nav a.rail-link span { width:auto; font-size:12px; line-height:1.5; }
.rail-tooltip { position:absolute; left:52px; top:50%; transform:translateY(-50%); white-space:nowrap; padding:7px 12px; border-radius:7px; background:#203a31; color:white; visibility:hidden; opacity:0; pointer-events:none; box-shadow:0 3px 12px #152e3320; z-index:100; }
.rail-link:hover .rail-tooltip,.rail-link:focus-visible .rail-tooltip { visibility:visible; opacity:1; }
.rail-bottom { margin-top:auto; margin-bottom:0; }
.rail-bottom form { margin:0; }
.topbar { margin:18px 24px 0 0; min-height:68px; padding:12px 24px; border:0; border-radius:38px; gap:20px; box-shadow:0 2px 12px #213c2b02; }
.top-brand { display:flex; align-items:center; gap:9px; font-size:20px; font-weight:750; color:#17795f; text-decoration:none; white-space:nowrap; }
.top-brand-icon { display:flex; }
.top-brand-icon svg { width:28px; height:28px; }
.top-nav { display:flex; align-items:center; background:#f6f7f6; border-radius:24px; padding:4px; margin:auto; gap:3px; }
.top-nav a { color:#637168; text-decoration:none; font-weight:600; padding:9px 16px; border-radius:20px; white-space:nowrap; font-size:12px; }
.top-nav a[aria-current],.top-nav a:hover { color:#243d32; background:white; box-shadow:0 2px 7px #1f30250a; }
.top-tools { display:flex; gap:10px; align-items:center; }
.top-dropdown { position:relative; }
.top-dropdown summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; min-width:36px; min-height:36px; border-radius:50%; color:#637168; }
.top-dropdown summary::-webkit-details-marker { display:none; }
.top-dropdown summary:hover,.top-dropdown[open] summary { background:#eef5f0; }
.profile-dropdown summary>.ui-icon { width:13px; }
.dropdown-panel { position:absolute; z-index:60; right:0; top:calc(100% + 16px); width:290px; max-width:calc(100vw - 34px); background:white; padding:22px; border:1px solid #e5ebe5; border-radius:16px; box-shadow:0 12px 35px #233d3320; }
.dropdown-panel strong { display:block; margin-bottom:10px; }
.dropdown-panel a { display:block; padding:10px 0; border-top:1px solid #eef1ee; color:#2b6653; }
.dropdown-panel form { margin:12px 0 0; }
.dropdown-panel p { font-size:12px; }
.dropdown-panel input { max-width:100%; }
main { padding:32px 24px 32px 0; }
.account-shell .topbar { margin-left:24px; padding-left:24px; }
.account-shell main { padding:40px 20px; }
@media(max-width:1100px) { .topbar { gap:12px; padding:12px 18px; }.top-nav a { padding:8px 10px; }.top-brand {font-size:17px;} }
@media(max-width:760px) { .app-shell {display:flex;} .app-sidebar {width:68px; padding:20px 8px; display:flex; position:sticky; top:0; height:100dvh;} .rail-brand {margin-bottom:30px;} .app-sidebar nav {display:block; overflow:visible; padding:0;} .app-sidebar nav a.rail-link {padding:0; font-size:inherit;} .rail-group {padding:6px 3px;} .rail-tooltip {left:48px;} .topbar {margin:14px 12px 0 0; padding:12px 14px; border-radius:24px; gap:12px; flex-wrap:wrap;} .top-brand {font-size:17px;} .top-tools {margin-left:auto; gap:5px;} .top-nav {order:3; flex-basis:100%; max-width:100%; overflow-x:auto; justify-content:flex-start;} .top-nav a {font-size:11px; padding:8px 10px;} main {padding:24px 12px 24px 0;} .dropdown-panel {position:fixed; top:90px; right:14px; width:285px;} .account-shell .app-sidebar {display:none;} .account-shell .topbar {margin-left:12px;} .account-shell main {padding:24px 16px;} .page-intro {flex-wrap:wrap;} .app-footer {padding-left:0;} }
@media print { .app-sidebar,.topbar {display:none;} }
.rail-bottom button.rail-link {background:transparent;color:#65766f;padding:0;border:0;font-weight:normal;}
.rail-bottom button.rail-link:hover {background:#edf6f1;color:#128168;}
.top-tools summary:focus-visible,.rail-link:focus-visible {outline:2px solid #168267;outline-offset:3px;}
/* Operational dashboard */
.dashboard-filter {display:flex;justify-content:flex-end;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 12px;}
.period-picker {display:flex;gap:5px;background:#e9edeb;padding:4px;border-radius:24px;}
.period-picker button {background:transparent;color:#637168;padding:7px 18px;border-radius:20px;font-size:12px;}
.period-picker button.selected {background:#244d40;color:#fff;}
.date-picker {display:flex;align-items:center;gap:10px;background:#fff;border-radius:24px;padding:5px 12px;}
.date-picker label {font-size:11px;color:#6f7d74;}
.date-picker input {width:145px!important;min-height:32px!important;padding:3px 8px!important;margin:0!important;border:0!important;font-size:12px!important;}
.date-picker .btn {border-radius:18px;}
.dashboard-range {font-size:12px;text-align:right;margin-bottom:22px;}
.dashboard-metrics {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.metric-card {padding:22px;min-height:142px;}
.metric-card>span {color:#6a7d73;font-size:13px;}
.metric-card>strong {display:block;font-size:34px;line-height:1.2;margin:14px 0 10px;letter-spacing:-1px;}
.metric-card>small {font-size:11px;color:#7b8a81;}
.metric-featured {background:linear-gradient(125deg,#183d32,#285749);color:white;border:0;}
.metric-featured>span,.metric-featured>small {color:#d2e3d9;}
.dashboard-panels {display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:22px;align-items:start;}
.panel-heading {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;}
.panel-heading h2,.availability-panel h2,.queue-panel h2 {margin:0 0 8px;font-size:17px;}
.panel-heading p {margin:0;font-size:12px;}
.loan-chart {overflow-x:auto;padding-bottom:10px;}
.chart-bars {display:flex;gap:8px;align-items:flex-end;min-width:max-content;border-bottom:1px solid #dde7e1;padding:12px 4px 0;}
.chart-column {flex:1;min-width:23px;text-align:center;}
.bar-track {height:180px;display:flex;align-items:flex-end;background:repeating-linear-gradient(to top,#edf1ee 0,#edf1ee 1px,transparent 1px,transparent 45px);}
.chart-bar {width:100%;min-width:12px;border-radius:6px 6px 0 0;background:linear-gradient(0deg,#205743,#4d9b7b);}
.bar-label {display:block;font-size:9px;color:#7a8c80;padding:10px 0;}
.bar-count {display:block;font-size:10px;color:#537361;margin:0 0 8px;}
.chart-data {font-size:12px;color:#607c6b;margin-top:10px;}
.chart-data-list {display:flex;flex-wrap:wrap;gap:8px 18px;padding:14px 0;}
.due-calendar {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:20px 0;}
.due-day {text-align:center;padding:12px 0;background:#f5f7f5;border-radius:14px;font-size:11px;color:#738278;}
.due-day strong {display:block;font-size:17px;color:#314d3d;margin:12px 0;}
.due-day small {font-size:9px;white-space:nowrap;}
.due-day.is-today {background:#265b47;color:#dceee3;box-shadow:0 4px 12px #265b4720;}
.due-day.is-today strong {color:white;}
.due-summary {font-size:12px;}
.availability-panel {display:flex;align-items:center;justify-content:space-between;gap:16px;}
.availability-panel p,.availability-panel small {font-size:12px;}
.availability-ring {flex-shrink:0;width:76px;height:76px;border-radius:50%;background:conic-gradient(#398364 var(--progress),#edf1ee 0);display:grid;place-items:center;position:relative;}
.availability-ring:before {content:"";position:absolute;inset:7px;background:white;border-radius:50%;}
.availability-ring strong {z-index:1;font-size:19px;}
.queue-panel>div {display:flex;gap:24px;color:#677d6d;font-size:12px;}
.queue-panel strong {display:block;font-size:24px;color:#244d40;margin-top:8px;}
.dashboard-shortcut-title {font-size:18px;margin:6px 0 20px;}
@media(max-width:1150px) {.dashboard-metrics {grid-template-columns:1fr 1fr;}.dashboard-panels {grid-template-columns:1fr;}.dashboard-side {display:grid;grid-template-columns:1fr 1fr;gap:18px;}.due-panel {grid-column:1/-1;}.dashboard-side .card {margin-bottom:0;}.dashboard-side {margin-bottom:24px;}}
@media(max-width:600px) {.dashboard-filter {justify-content:flex-start;gap:12px;}.period-picker button {padding:7px 12px;}.date-picker {flex-wrap:wrap;border-radius:14px;gap:5px;}.date-picker label {width:100%;}.dashboard-range {text-align:left;line-height:1.7;}.dashboard-metrics {gap:10px;}.metric-card {padding:16px;}.metric-card>strong {font-size:28px;}.metric-card>span {font-size:11px;}.dashboard-side {display:block;}.dashboard-side .card {margin-bottom:18px;}.panel-heading {flex-wrap:wrap;}.due-calendar {gap:2px;}.due-day {border-radius:8px;}.due-day small {font-size:8px;}.availability-ring {width:64px;height:64px;}}
.availability-panel {flex-direction:row;}
.dashboard-side .card {padding:22px;}
.dashboard-side h2 {font-size:16px;}
.due-panel .panel-heading {margin-bottom:8px;}
.due-panel>p {margin-bottom:8px;}
.due-calendar {margin:14px 0;}
.queue-panel {margin-bottom:0;}