:root{
  --nav-bg:#000430; --nav-fg:#fff; --ink:#101325; --muted:#647097;
  --line:#e6e8ef; --focus:#0a58ff; --soft:#f7f8ff;
}

/* Page */
html,body{height:100%}
body{margin:0;background:#fff;color:var(--ink);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial}

/* Header (15% of viewport, dark) */
.site-header{
  height:15vh; min-height:56px; background:var(--nav-bg); color:var(--nav-fg);
  display:flex; align-items:center; justify-content:space-between; padding:0 24px
}
.logo{font-weight:800; text-decoration:none; color:#fff; font-size:1.2rem}
.nav-link{color:#f4f6ff; text-decoration:none; font-weight:600; padding:8px 12px; border-radius:8px}
.nav-link:hover{background:#0b0f4f}

/* README block */
.readme-wrap{max-width:min(900px,92vw); margin:18px auto 0; padding:0 12px}
.readme summary{ cursor:pointer; font-weight:800; font-size:15px; }
.readme-content{
  margin-top:10px; background:#f5f7ff; border:1px solid #dfe5ff; border-radius:10px;
  padding:12px; font-size:13px;
}
.readme-content pre{
  background:#fff; border:1px dashed #cdd5ff; border-radius:8px; padding:10px; overflow-x:auto;
  white-space:pre-wrap; word-break:break-word; font-size:12px;
}

/* Main */
.page-main{min-height:85vh; display:grid; place-items:center; padding:24px}
.card{width:min(900px,92vw); border:1px solid var(--line); border-radius:14px; padding:22px 18px 18px; box-shadow:0 8px 24px #0a0f2a0d}
h1{margin:0 0 16px; font-size:clamp(18px,3.2vw,28px)}
.grid{display:grid; grid-template-columns:1fr; gap:14px}
.field{display:flex; flex-direction:column; gap:8px}
label{font-weight:700}

/* Inputs */
input[type="number"], input[type="date"], input[type="text"], .dropdown, textarea{
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#fff; color:var(--ink)
}
textarea{min-height:160px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}
input[type="number"]:focus, input[type="date"]:focus, input[type="text"]:focus,
.dropdown:focus-within, textarea:focus{
  outline:2px solid var(--focus); outline-offset:1px; border-color:transparent
}

.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.btn{border:1px solid var(--line); background:var(--soft); border-radius:10px; padding:10px 12px; cursor:pointer; font-weight:700}
.btn:hover{background:#eef2ff}

/* Chips */
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:6px; background:#eef2ff; border:1px solid #dfe5ff; border-radius:999px; padding:6px 10px; font-weight:600}
.chip button{border:0; background:transparent; cursor:pointer; font-weight:700}

/* Helper text & errors */
.hint{color:var(--muted); font-size:12px}
.error{background:#fff3f3; border:1px solid #ffdede; color:#b30000; padding:10px 12px; border-radius:10px; margin-top:10px}

/* Dropdown */
.dropdown{position:relative}
.dropdown-toggle{display:flex; justify-content:space-between; align-items:center; gap:12px; cursor:pointer}
.dropdown-menu{
  position:absolute; inset:auto 0 0 0; transform:translateY(calc(100% + 6px));
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px;
  box-shadow:0 14px 32px #0000001a; display:none; z-index:20; max-height:240px; overflow:auto
}
.dropdown.open .dropdown-menu{display:block}
.opt{display:flex; gap:10px; align-items:center; padding:8px; border-radius:8px}
.opt:hover{background:#f7f8ff}

/* Results table */
.results{margin-top:18px}
table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--line); border-radius:12px}
th,td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
th{background:#fafbff; font-weight:800}
tr:last-child td{border-bottom:0}

/* Highlight missing price rows */
tr.no-price td{
  background:#ffecec;  /* light red */
  color:#a33;
}

.sample-table {
  width:100%; border-collapse:collapse; margin-top:8px; font-size:12px;
}
.sample-table th, .sample-table td {
  border:1px solid #ccd4ff; padding:6px 8px; text-align:left;
}
.sample-table th {
  background:#eef2ff; font-weight:700;
}