:root {
  --panel:#fff; --ink:#111; --muted:#666; --border:#e5e5e5; --ok:#0a7d33;
  --glass: rgba(255,255,255,.6); --shadow: 0 10px 30px rgba(0,0,0,.08);
}

* {
  box-sizing: border-box;
  font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Make sure the gradient scales with the page height */
html {
  min-height: 100%;
}

html, body {
  margin: 0;
  /* Use min-height so the background grows with content */
  min-height: 100%;
  /* Also support dynamic viewport units for mobile browsers */
  min-height: 100dvh;

  /* One continuous gradient over the whole page area */
  background: linear-gradient(180deg, #f8fafc, #eef2f6 40%, #e9edf3);

  /* Tie the background to the element (not the viewport) */
  background-attachment: scroll;

  /* Stretch the gradient to fill the element’s full size */
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;

  height: 100%;

  padding-top: 30px!important;
}

/* Prevent iOS Safari quirks; keep it consistent */
@supports (-webkit-touch-callout: none) {
  html, body {
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }
  .navbar {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
  }
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 18px 120px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.btn {
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.btn.primary { background:#111; color:#fff; }
.btn.ghost   { background:#fff; border:1px solid var(--border); color:#111; }

.input, select {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-size: 16px;
}

.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.grid { display:grid; gap:14px; }

.badge {
  display:inline-flex; gap:8px; align-items:center;
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px; font-weight:700;
  background:#fff;
}

.table { width:100%; border-collapse:collapse; }
.table th, .table td {
  border-bottom:1px solid var(--border);
  padding:10px 8px;
  text-align:left;
}

.muted { color:var(--muted); }
.hide { display:none !important; }

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding-top: env(safe-area-inset-top);
}

/* add space under sticky navbar */
main { padding-top: 12px; }