body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; line-height:1.6; }

/* Layout (desktop/tablet) */
.page { display:grid; min-height:100vh; column-gap:1rem; --sidebar-width:220px; grid-template-columns: var(--sidebar-width) 1fr; transition: grid-template-columns .25s ease; }
.page.nav-open { --sidebar-width:220px; }
.page.nav-closed { --sidebar-width:0; }

/* Sidebar (desktop/tablet) */
.sidebar { background:#f4f4f4; padding:1rem; height:100%; overflow:auto; transition: padding .25s ease; }
.page.nav-closed .sidebar { padding:0; overflow:hidden; }

/* Top bar */
.top-row { background:#fff; border-bottom:1px solid #ddd; height:3.25rem; display:flex; align-items:center; padding-inline:.5rem; gap:.75rem; }
.top-row .nav-left { display:flex; align-items:center; }
.top-row .nav-right { margin-left:auto; }

.content { padding:1.25rem; }

/* Base spacing rhythm */
:where(h1,h2,h3,h4,h5,h6,p,ul,ol,pre,blockquote,section,article,form,table,figure,dl) { margin:001rem0; }
:where(ul,ol) { padding-left:1.25rem; }
li + li { margin-top:.5rem; }
.content > * + * { margin-top:1rem; }

/* Common header design */
:where(h1,h2,h3,h4,h5,h6) {
  background:#ADD8E6; /* LightBlue */
  color:#000000; /* Black */
  padding:.45rem .75rem;
  border-radius:6px;
  line-height:1.25;
}

nav ul { list-style:none; padding:0; margin:0; }
nav li { margin:.75rem0; }
nav a { text-decoration:none; display:block; padding:.7rem .95rem; border-radius:10px; }
nav a.active { font-weight:bold; }

/* Touch targets */
button, .btn, input[type=button], input[type=submit], input[type=reset] { min-height:44px; padding:.85rem1.1rem; font-size:1rem; cursor:pointer; }

input[type=text], input[type=search], input[type=email], input[type=password], input[type=tel], input[type=number], select, textarea { min-height:44px; padding:.65rem .9rem; font-size:1rem; line-height:1.3; margin-bottom:.75rem; }

label { display:inline-block; margin-bottom:.6rem; }

/* Focus styles */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid #4c9ffe; outline-offset:2px; }

.actions { display:flex; flex-wrap:wrap; gap:.75rem; }

/* Hamburger */
.hamburger { background:none; border:none; padding:.5rem; display:flex; flex-direction:column; justify-content:space-between; width:2rem; height:1.4rem; cursor:pointer; }
.hamburger span { display:block; height:3px; background:#222; border-radius:2px; transition:.25s; }

/* Overlay hidden on desktop */
.nav-overlay { display:none; }

/* Mobile: off-canvas sidebar */
@media (max-width:768px) {
 .page { grid-template-columns:1fr; column-gap:0; row-gap:.55rem; --sidebar-width:0; }
 .sidebar { position:fixed; top:0; left:0; bottom:0; width:250px; max-width:78%; background:#f4f4f4; box-shadow:01px4px rgba(0,0,0,.18); transform:translateX(-100%); transition:transform .3s ease; overflow-y:auto; z-index:900; padding:.9rem .85rem; }
 .sidebar.open { transform:translateX(0); }
 .page.nav-closed .sidebar { padding:.9rem .85rem; }
 .nav-overlay { display:block; position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); z-index:899; }
 .top-row { height:3.4rem; padding:0 .55rem; gap:.55rem; }
 .content { padding:.85rem .8rem; }
 nav li { margin:.6rem0; }
 nav a { padding:.75rem .9rem; min-height:46px; font-size:.98rem; }
 button, .btn, input[type=button], input[type=submit], input[type=reset] { min-height:46px; padding:.75rem .95rem; font-size:.95rem; }
 input[type=text], input[type=search], input[type=email], input[type=password], input[type=tel], input[type=number], select, textarea { min-height:46px; padding:.7rem .85rem; font-size:.95rem; }
 .actions { display:grid; grid-auto-flow:row; gap:.7rem; }
 /* Reduce heading and paragraph spacing */
 :where(h1,h2,h3,h4,h5,h6,p,ul,ol,pre,blockquote,section,article,form,table,figure,dl) { margin:0 .0 .65rem 0; }
 h1 { font-size:1.55rem; }
 h2 { font-size:1.3rem; }
 h3 { font-size:1.15rem; }
 p { font-size:.95rem; }
 /* Ensure mobile headings keep common style padding adjustments */
 :where(h1,h2,h3,h4,h5,h6) { padding:.5rem .65rem; }
}

/* Spinner (Bootstrap-compatible) */
@keyframes spinner-border {
  to { transform: rotate(360deg); }
}

.spinner-border {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: text-bottom;
  border: 0.15em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm {
  width: 0.875rem;
  height: 0.875rem;
  border-width: 0.125em;
}