:root {
  --ink: #12324b;
  --muted: #667e91;
  --line: #dbe8ed;
  --paper: #f7fbfc;
  --white: #ffffff;
  --blue: #2675a6;
  --blue-dark: #165271;
  --blue-pale: #e4f3f8;
  --aqua: #d9eff1;
  --good: #2a806b;
  --good-pale: #e2f3ee;
  --low: #b26a32;
  --low-pale: #fff1df;
  --out: #a84b4b;
  --out-pale: #fbe9e7;
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input { font: inherit; }
button { cursor: pointer; }

.atmosphere { position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(3px); }
.atmosphere-one { width: 31rem; height: 31rem; top: -17rem; right: -5rem; background: #c9e8ef; opacity: .68; }
.atmosphere-two { width: 24rem; height: 24rem; bottom: 4rem; left: -16rem; background: #d3e9f8; opacity: .7; }
.page-shell { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }

.site-header { display: flex; justify-content: space-between; align-items: center; padding: 29px 0; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 700; letter-spacing: -.03em; }
.wordmark-mark { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: white; background: linear-gradient(135deg, #4497bd, #1c5f8a); }
.wordmark-mark svg { width: 16px; height: 16px; fill: currentColor; transform: rotate(-10deg); }
.refresh-button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 9px; color: var(--blue-dark); background: rgba(255,255,255,.65); font-size: 12px; font-weight: 700; transition: background .2s, transform .2s; }
.refresh-button:hover { background: white; transform: translateY(-1px); }
.refresh-button:disabled { opacity: .6; cursor: wait; }
.refresh-button svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.refresh-button.is-loading svg { animation: spin .8s linear infinite; }

.intro { padding: 62px 0 42px; }
.eyebrow { margin: 0 0 10px; color: var(--blue); font-family: "DM Mono", monospace; font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
h1, h2 { margin: 0; letter-spacing: -.055em; }
h1 { max-width: 720px; font-size: clamp(46px, 7vw, 82px); font-weight: 600; line-height: .98; }
h1 em { color: var(--blue); font-family: "Playfair Display", Georgia, serif; font-weight: 500; }
.intro-footer { display: flex; align-items: center; gap: 18px; margin-top: 30px; color: var(--muted); font-size: 12px; }
.last-updated { margin: 0; }
.connection-status { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-dark); font-size: 11px; font-weight: 600; }
.connection-status i { width: 7px; height: 7px; border-radius: 100%; background: #e0a24a; }
.connection-status.is-live i { background: #51a98b; box-shadow: 0 0 0 3px #d9eee7; }
.connection-status.is-error i { background: #ca7171; }

.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.summary-card { min-height: 154px; padding: 22px 24px; border: 1px solid rgba(199,220,228,.85); border-radius: 15px; background: rgba(255,255,255,.72); box-shadow: 0 10px 35px rgba(26, 80, 111, .035); }
.summary-card p, .summary-card span { margin: 0; color: var(--muted); font-size: 11px; font-weight: 600; }
.summary-card strong { display: block; margin: 15px 0 5px; color: var(--blue-dark); font-family: "Playfair Display", Georgia, serif; font-size: 43px; font-weight: 500; line-height: 1; letter-spacing: -.07em; }
.summary-good strong { color: var(--good); }.summary-low strong { color: var(--low); }

.inventory { margin: 53px 0 70px; padding: 29px; border: 1px solid rgba(199,220,228,.9); border-radius: 18px; background: rgba(255,255,255,.8); box-shadow: 0 16px 42px rgba(26,80,111,.055); }
.inventory-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
h2 { font-size: 25px; font-weight: 700; }
.search-field { display: flex; align-items: center; width: 220px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: white; transition: border .2s, box-shadow .2s; }
.search-field:focus-within { border-color: #76adca; box-shadow: 0 0 0 3px #e1f1f7; }.search-field svg { width: 16px; margin-right: 7px; fill: none; stroke: var(--muted); stroke-width: 1.7; }
.search-field input { width: 100%; min-width: 0; padding: 10px 0; border: 0; outline: 0; color: var(--ink); font-size: 12px; background: transparent; }.search-field input::placeholder { color: #9babba; }
.category-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 24px 0 15px; }.filter-button { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: white; font-size: 10px; font-weight: 700; }.filter-button:hover, .filter-button[aria-pressed="true"] { border-color: #b8dbe8; color: var(--blue-dark); background: var(--blue-pale); }
.table-wrap { overflow-x: auto; } table { width: 100%; min-width: 635px; border-collapse: collapse; } th { padding: 11px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #7790a1; font-family: "DM Mono", monospace; font-size: 9px; font-weight: 500; letter-spacing: .08em; text-align: left; text-transform: uppercase; } td { padding: 16px 12px; border-bottom: 1px solid #e8f0f3; color: var(--muted); font-size: 12px; } tbody tr:last-child td { border-bottom: 0; } tbody tr { transition: background .15s; } tbody tr:hover { background: #f7fbfc; }.product-name { color: var(--ink); font-size: 13px; font-weight: 700; }.sku { color: #8198a8; font-family: "DM Mono", monospace; font-size: 10px; }.align-right { text-align: right; }.stock-number { color: var(--blue-dark); font-family: "DM Mono", monospace; font-weight: 500; text-align: right; }.status { display: inline-block; padding: 5px 8px; border-radius: 99px; font-size: 10px; font-weight: 700; }.status-in-stock { color: var(--good); background: var(--good-pale); }.status-low-stock { color: var(--low); background: var(--low-pale); }.status-out-of-stock { color: var(--out); background: var(--out-pale); }
.empty-state, .error-state { padding: 45px 20px 28px; text-align: center; color: var(--muted); font-size: 13px; }.empty-state p, .error-state p { margin: 0 0 12px; }.empty-state button, .error-state button { border: 0; color: var(--blue); background: transparent; font-size: 12px; font-weight: 700; text-decoration: underline; }
footer { padding: 0 24px 28px; color: #8ba0ad; font-size: 10px; text-align: center; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 620px) { .page-shell { width: min(100% - 30px, 1120px); }.site-header { padding: 19px 0; }.intro { padding: 45px 0 34px; }.intro-footer { align-items: flex-start; flex-direction: column; gap: 8px; }.summary-grid { gap: 9px; }.summary-card { min-height: 125px; padding: 17px 14px; }.summary-card strong { font-size: 34px; }.summary-card span { display: none; }.inventory { margin-top: 37px; padding: 21px 16px; }.inventory-heading { align-items: flex-start; flex-direction: column; }.search-field { width: 100%; }.category-filters { margin-top: 19px; } }