/* =====================================================================
   Lab Management System — site styles
   Light, clinical look. Accent colours come from blood-collection tube
   caps (lavender, red, gold, grey, blue) and are used sparingly: in the
   brand mark and in the "computer rack" on the account page.

   Variable NAMES are unchanged from the old dark theme, so every page
   (including ones not yet rewritten) picks up the new look.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

:root {
  --bg: #f4f7f6;          /* clinical off-white, cool */
  --bg-panel: #ffffff;
  --bg-sunk: #eef2f1;
  --border: #d8e0e3;
  --border-strong: #b9c6cc;
  --text: #13263a;        /* deep ink */
  --text-dim: #52637a;
  --brand: #0d6b6b;       /* lab teal */
  --brand-dark: #0a5454;
  --brand-tint: #e3f1ef;
  --success: #1f8a5b;
  --danger: #c63f36;
  --warning: #a86c00;

  /* tube-cap accents */
  --cap-lavender: #7a5cd6;
  --cap-red: #d8453a;
  --cap-gold: #e3a21a;
  --cap-grey: #8c99a6;
  --cap-blue: #3b8fd9;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(19, 38, 58, 0.06), 0 4px 16px rgba(19, 38, 58, 0.06);
  --font: "IBM Plex Sans", "Segoe UI", -apple-system, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid rgba(13, 107, 107, 0.35);
  outline-offset: 2px;
  border-radius: 4px;
}

img { max-width: 100%; }

.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Nav --------------------------------------------------------- */
header.nav {
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 247, 246, 0.94);
  backdrop-filter: saturate(1.2) blur(6px);
}
header.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }

/* Brand mark: a row of five tube caps. Added automatically before the
   brand text (no HTML change needed on older pages). */
.brand::before {
  content: "";
  width: 34px;
  height: 12px;
  flex: none;
  background:
    radial-gradient(circle at 3px 6px, var(--cap-lavender) 3px, transparent 3.5px),
    radial-gradient(circle at 10px 6px, var(--cap-red) 3px, transparent 3.5px),
    radial-gradient(circle at 17px 6px, var(--cap-gold) 3px, transparent 3.5px),
    radial-gradient(circle at 24px 6px, var(--cap-grey) 3px, transparent 3.5px),
    radial-gradient(circle at 31px 6px, var(--cap-blue) 3px, transparent 3.5px);
}

.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 22px; }
.nav-links a { color: var(--text-dim); font-size: 0.94rem; margin-left: 0; }
.nav-links a:hover, .nav-links a.active { color: var(--text); text-decoration: none; }
.nav-links a.nav-cta {
  color: #fff;
  background: var(--brand);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.nav-links a.nav-cta:hover { background: var(--brand-dark); }

/* --- Hero -------------------------------------------------------- */
.hero { padding: 72px 0 56px; text-align: center; }
.hero h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.02em; }
.hero p { color: var(--text-dim); font-size: 1.1rem; max-width: 620px; margin: 0 auto 30px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --- Buttons ----------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { background: var(--bg-panel); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); }
.btn-ghost { background: transparent; color: var(--brand); padding-left: 8px; padding-right: 8px; }
.btn-ghost:hover { background: var(--brand-tint); }
.btn-danger-outline { background: transparent; color: var(--danger); border-color: rgba(198, 63, 54, 0.4); }
.btn-danger-outline:hover { background: rgba(198, 63, 54, 0.06); border-color: var(--danger); }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* --- Sections ---------------------------------------------------- */
section { padding: 64px 0; border-top: 1px solid var(--border); }
section:first-of-type { border-top: 0; }
section h2 { font-size: clamp(1.4rem, 3vw, 1.7rem); text-align: center; margin: 0 0 10px; letter-spacing: -0.015em; }
.section-sub { text-align: center; color: var(--text-dim); margin: 0 auto 40px; max-width: 640px; }

/* --- Feature grid ------------------------------------------------ */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.feature {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
.feature h3 { margin: 0 0 6px; font-size: 1.02rem; }
.feature p { margin: 0; color: var(--text-dim); font-size: 0.93rem; }

/* --- Pricing ----------------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
}
.plan {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.plan.featured { border: 2px solid var(--brand); padding: 27px 23px; }
.plan .badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--brand);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.plan h3 { margin: 0 0 4px; font-size: 1.05rem; }
.plan .price { font-size: 1.9rem; font-weight: 700; margin: 8px 0 4px; letter-spacing: -0.02em; }
.plan .price-note { color: var(--text-dim); font-size: 0.86rem; margin: 0 0 18px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 22px; text-align: left; color: var(--text-dim); font-size: 0.9rem; }
.plan li { padding: 4px 0 4px 22px; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.plan .btn { margin-top: auto; }

/* --- Forms / panels ---------------------------------------------- */
.signup-panel {
  max-width: 440px;
  margin: 0 auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
}
.signup-panel h2 { text-align: left; margin-top: 0; }

label {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  margin: 18px 0 6px;
}
.hint { font-size: 0.82rem; color: var(--text-dim); margin: 6px 0 0; }

input[type="email"], input[type="password"], input[type="text"], input[type="number"], select {
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 0.97rem;
}
input::placeholder { color: #8a98a8; }
input:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13, 107, 107, 0.15); }
input[aria-invalid="true"] { border-color: var(--danger); }

.plan-toggle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 6px; }
.plan-toggle label {
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  background: #fff;
}
.plan-toggle label small { display: block; font-weight: 400; color: var(--text-dim); font-size: 0.82rem; }
.plan-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.plan-toggle label:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); box-shadow: inset 0 0 0 1px var(--brand); }
.plan-toggle label:has(input:focus-visible) { outline: 3px solid rgba(13, 107, 107, 0.35); }

.form-msg { margin-top: 14px; font-size: 0.9rem; padding: 10px 12px; border-radius: var(--radius-sm); display: none; }
.form-msg.error   { display: block; background: rgba(198, 63, 54, 0.08); color: var(--danger); border: 1px solid rgba(198, 63, 54, 0.25); }
.form-msg.info    { display: block; background: var(--brand-tint); color: var(--brand-dark); border: 1px solid rgba(13, 107, 107, 0.2); }
.form-msg.success { display: block; background: rgba(31, 138, 91, 0.08); color: var(--success); border: 1px solid rgba(31, 138, 91, 0.25); }

/* Quantity stepper (number of computers) */
.stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
}
.stepper button {
  width: 42px;
  border: 0;
  background: var(--bg-sunk);
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
}
.stepper button:hover:not(:disabled) { background: var(--brand-tint); color: var(--brand); }
.stepper button:disabled { color: #a8b3bd; cursor: not-allowed; }
.stepper input {
  width: 56px;
  border: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 0;
  text-align: center;
  font-weight: 600;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { box-shadow: none; }

/* Price summary (signup / add computers) */
.summary {
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 18px;
  font-size: 0.93rem;
}
.summary .row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.summary .row span:first-child { color: var(--text-dim); }
.summary .total { border-top: 1px solid var(--border-strong); margin-top: 8px; padding-top: 10px; font-weight: 700; font-size: 1.05rem; }
.summary .total span:first-child { color: var(--text); }

footer {
  border-top: 1px solid var(--border);
  padding: 30px 0;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.86rem;
}
footer a { color: var(--text-dim); margin: 0 8px; }
footer a:hover { color: var(--text); }

/* --- Payment path tabs (Local vs International) ------------------ */
.path-tabs { display: flex; gap: 4px; margin-bottom: 20px; background: var(--bg-sunk); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; }
.path-tabs button {
  flex: 1;
  padding: 9px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}
.path-tabs button.active { background: #fff; color: var(--brand); box-shadow: 0 1px 2px rgba(19, 38, 58, 0.12); }
.auto-note { font-size: 0.8rem; color: var(--text-dim); text-align: center; margin: -10px 0 16px; }

/* --- Payment method / details ------------------------------------ */
.payment-methods { display: flex; gap: 10px; margin-top: 6px; }
.payment-methods label { flex: 1; margin: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 12px 8px; text-align: center; cursor: pointer; color: var(--text); font-size: 0.86rem; }
.payment-methods input { display: none; }
.payment-methods label:has(input:checked) { border-color: var(--brand); color: var(--brand); font-weight: 700; }

.payment-details {
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-top: 14px;
  font-size: 0.9rem;
}
.payment-details .row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.payment-details .row span:first-child { color: var(--text-dim); }
.payment-details .row span:last-child { font-weight: 600; text-align: right; }
.payment-details img { background: #fff; padding: 8px; border: 1px solid var(--border); }

/* --- Admin tables ------------------------------------------------ */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: var(--bg-panel); }
.admin-table th, .admin-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table th { color: var(--text-dim); font-weight: 600; font-size: 0.82rem; background: var(--bg-sunk); white-space: nowrap; }
.admin-table td.num, .admin-table th.num { text-align: right; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-sm { padding: 7px 12px; font-size: 0.84rem; border-radius: 5px; }
.btn-approve { background: var(--success); color: #fff; }
.btn-approve:hover { background: #18714a; }
.btn-reject { background: #fff; color: var(--danger); border-color: rgba(198, 63, 54, 0.4); }
.btn-reject:hover { background: rgba(198, 63, 54, 0.06); }
.empty-state { text-align: center; color: var(--text-dim); padding: 40px 16px; }

.center { text-align: center; }
.mt-24 { margin-top: 24px; }
.muted { color: var(--text-dim); }
.small { font-size: 0.86rem; }

.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
}
.btn-secondary .spinner, .btn-reject .spinner { border-color: rgba(13, 107, 107, 0.25); border-top-color: var(--brand); }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Landing hero (index.html) ----------------------------------- */
.intro-hero { padding: 64px 0 72px; }
.intro-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.intro-hero h1 { font-size: clamp(2rem, 4.2vw, 2.7rem); line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 18px; }
.intro-hero p { color: var(--text-dim); font-size: 1.07rem; max-width: 480px; margin: 0 0 26px; }
.intro-hero .hero-actions { justify-content: flex-start; }
.intro-hero-note { font-size: 0.86rem; color: var(--text-dim); margin-top: 14px !important; }
.intro-hero-visual svg, .intro-hero-visual img { width: 100%; height: auto; display: block; }
.intro-hero-visual img { border-radius: var(--radius); border: 1px solid var(--border); box-shadow: 0 18px 50px rgba(19, 38, 58, 0.16); }

/* --- Screenshot gallery ------------------------------------------ */
.screenshot-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.screenshot-gallery figure { margin: 0; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.screenshot-gallery img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--border); }
.screenshot-gallery figcaption { padding: 12px 16px; font-size: 0.88rem; color: var(--text-dim); text-align: center; }

@media (max-width: 760px) {
  .intro-hero-grid { grid-template-columns: 1fr; }
  .intro-hero { padding: 40px 0 48px; text-align: center; }
  .intro-hero p { margin-left: auto; margin-right: auto; }
  .intro-hero .hero-actions { justify-content: center; }
  .intro-hero-visual { order: -1; margin-bottom: 24px; }
}

/* --- Admin overview ---------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 20px; }
.stat-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.stat-value { font-size: 1.9rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.stat-label { margin-top: 2px; font-size: 0.87rem; color: var(--text-dim); }
.stat-label span { display: block; font-size: 0.78rem; margin-top: 2px; }
.stat-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 24px; }
.stat-breakdown h3 { font-size: 0.95rem; margin: 0 0 10px; color: var(--text-dim); font-weight: 600; }
.stat-list { list-style: none; margin: 0; padding: 0; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stat-list li { display: flex; justify-content: space-between; padding: 11px 16px; font-size: 0.92rem; border-bottom: 1px solid var(--border); }
.stat-list li:last-child { border-bottom: none; }
.stat-list li span:last-child { color: var(--text-dim); font-weight: 600; }

.customer-search {
  width: 100%;
  max-width: 360px;
  margin: 0 0 16px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 0.93rem;
}
.customer-search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13, 107, 107, 0.15); }

.status-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.status-active   { background: rgba(31, 138, 91, 0.12); color: var(--success); }
.status-expired  { background: rgba(198, 63, 54, 0.1); color: var(--danger); }
.status-pending  { background: rgba(227, 162, 26, 0.16); color: var(--warning); }
.status-rejected { background: rgba(198, 63, 54, 0.1); color: var(--danger); }
.status-trial    { background: var(--bg-sunk); color: var(--text-dim); }

.overview-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.overview-header h2 { margin: 0; text-align: left; }

.pricing-toggle { display: flex; justify-content: center; gap: 6px; margin: 20px 0 32px; flex-wrap: wrap; }
.toggle-btn {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.toggle-btn:hover { border-color: var(--brand); color: var(--text); }
.toggle-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* =====================================================================
   Account page (account.html)
   ===================================================================== */
.page-head { padding: 40px 0 8px; }
.page-head h1 { margin: 0 0 4px; font-size: clamp(1.5rem, 3vw, 1.9rem); letter-spacing: -0.02em; }
.page-head p { margin: 0; color: var(--text-dim); }

.account-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; padding: 24px 0 64px; }
@media (max-width: 880px) { .account-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.card + .card { margin-top: 24px; }
.card h2 { text-align: left; font-size: 1.15rem; margin: 0 0 4px; letter-spacing: -0.01em; }
.card .card-sub { color: var(--text-dim); font-size: 0.92rem; margin: 0 0 18px; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.card-head .card-sub { margin: 0; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 0; }
.facts div { min-width: 0; }
.facts dt { font-size: 0.82rem; color: var(--text-dim); margin: 0; }
.facts dd { margin: 2px 0 0; font-weight: 600; font-size: 1.02rem; }

/* The rack: one slot per paid computer. Filled slot = in use. */
.rack {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
}
.rack-slot {
  width: 26px;
  height: 58px;
  border-radius: 6px 6px 13px 13px;
  border: 2px solid var(--border-strong);
  background: #fff;
  position: relative;
}
.rack-slot::before {           /* cap */
  content: "";
  position: absolute;
  left: -4px; right: -4px; top: -6px;
  height: 12px;
  border-radius: 4px;
  background: var(--border-strong);
}
.rack-slot.used { border-color: rgba(13, 107, 107, 0.55); background: linear-gradient(to top, rgba(13, 107, 107, 0.2) 62%, #fff 62%); }
.rack-slot.used::before { background: var(--brand); }
.rack-legend { font-size: 0.9rem; color: var(--text-dim); align-self: center; margin-left: 6px; }
.rack-legend strong { color: var(--text); }

.device-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.device-list li { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.device-list li:last-child { border-bottom: 0; }
.device-list .device-main { flex: 1; min-width: 0; }
.device-list .device-name { font-weight: 600; overflow-wrap: anywhere; }
.device-list .device-meta { font-size: 0.84rem; color: var(--text-dim); }
.device-icon { width: 34px; height: 34px; flex: none; border-radius: 8px; background: var(--brand-tint); display: grid; place-items: center; }
.device-icon svg { width: 18px; height: 18px; stroke: var(--brand); }

.notice {
  border-left: 3px solid var(--brand);
  background: var(--brand-tint);
  padding: 12px 14px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.92rem;
  margin: 0 0 16px;
}
.notice.warn { border-left-color: var(--cap-gold); background: rgba(227, 162, 26, 0.1); }
.notice.danger { border-left-color: var(--danger); background: rgba(198, 63, 54, 0.07); }

.pending-list { list-style: none; margin: 0; padding: 0; }
.pending-list li { padding: 10px 0; border-bottom: 1px dashed var(--border); font-size: 0.92rem; }
.pending-list li:last-child { border-bottom: 0; }

/* Modal dialog */
dialog.modal {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  width: min(460px, calc(100vw - 32px));
  color: var(--text);
  box-shadow: 0 24px 70px rgba(19, 38, 58, 0.25);
}
dialog.modal::backdrop { background: rgba(19, 38, 58, 0.45); }
.modal-body { padding: 24px; }
.modal-body h3 { margin: 0 0 6px; font-size: 1.15rem; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }

.skeleton { background: linear-gradient(90deg, var(--bg-sunk), #fff, var(--bg-sunk)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: 6px; height: 16px; margin: 8px 0; }
@keyframes shimmer { to { background-position: -200% 0; } }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}