:root {
  --teal: #1baaa0;
  --teal-dark: #158c84;
  --green: #8dc63f;
  --charcoal: #1a1a1a;
  --ink: #2b2b2b;
  --muted: #6b7280;
  --line: #e7e9ea;
  --bg: #ffffff;
  --panel: #fafbfb;
  --shadow: 0 1px 3px rgba(26, 26, 26, 0.06), 0 8px 24px rgba(26, 26, 26, 0.05);
  --radius: 14px;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.header {
  background: linear-gradient(100deg, var(--green) 0%, var(--teal) 60%, var(--teal-dark) 100%);
  color: #fff;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.header img { height: 46px; width: auto; background: #fff; border-radius: 10px; padding: 5px 10px; }
.header .titles { line-height: 1.2; }
.header h1 { font-size: 1.15rem; margin: 0; font-weight: 600; letter-spacing: .3px; }
.header .sub { font-size: .8rem; opacity: .92; }
.header .spacer { flex: 1; }
.header a.adminlink { color: #fff; text-decoration: none; font-size: .82rem; opacity: .9; border: 1px solid rgba(255,255,255,.5); padding: 6px 12px; border-radius: 999px; }
.header a.adminlink:hover { opacity: 1; background: rgba(255,255,255,.14); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 22px 20px 60px; }
.grid { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: start; }
@media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}
.card h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 0 0 14px; font-weight: 700; }

label.field { display: block; margin-bottom: 14px; }
label.field .lab { display: block; font-size: .84rem; color: var(--charcoal); font-weight: 600; margin-bottom: 5px; }
select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: .95rem; background: #fff; color: var(--ink); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
select:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }

.services { display: flex; flex-direction: column; gap: 8px; }
.svc {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer; user-select: none;
  transition: border-color .12s, background .12s;
}
.svc:hover { border-color: var(--teal); }
.svc.on { border-color: var(--teal); background: rgba(27,170,160,.07); }
.svc input { width: 18px; height: 18px; accent-color: var(--teal); cursor: pointer; }
.svc .name { font-size: .92rem; }

.btnrow { display: flex; gap: 10px; margin-top: 6px; }
button {
  font: inherit; cursor: pointer; border-radius: 10px; padding: 11px 16px; border: 1px solid transparent;
}
.btn-primary { background: var(--teal); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--teal-dark); }
.btn-ghost { background: #fff; color: var(--charcoal); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--charcoal); }

/* Results */
.levelpick { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.levelpick button {
  padding: 8px 12px; border: 1px solid var(--line); background: #fff; border-radius: 999px;
  font-size: .82rem; color: var(--ink);
}
.levelpick button.on { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }

.rangebox {
  border: 1px solid var(--teal); background: rgba(27,170,160,.06); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 18px;
}
.rangebox .lvlname { font-size: .82rem; color: var(--muted); font-weight: 600; }
.rangebox .est { font-size: 2rem; font-weight: 700; color: var(--charcoal); margin: 2px 0; letter-spacing: -.5px; }
.rangebox .meta { font-size: .9rem; color: var(--muted); }
.rangebox .meta b { color: var(--ink); }

table.prices { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.prices th, table.prices td { padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--line); }
table.prices th:first-child, table.prices td:first-child { text-align: left; }
table.prices thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
table.prices tbody tr:last-child td { border-bottom: none; }
table.prices tr.total td { font-weight: 700; border-top: 2px solid var(--charcoal); color: var(--charcoal); }
table.prices td.col-on, table.prices th.col-on { background: rgba(27,170,160,.09); }
table.prices .svcname { color: var(--ink); }

.empty { color: var(--muted); font-size: .95rem; padding: 30px 4px; text-align: center; }
.offline-flag { display: none; font-size: .78rem; color: #a15c00; background: #fff6e6; border: 1px solid #f0d9a8; padding: 6px 12px; border-radius: 8px; margin-bottom: 14px; }
.offline-flag.show { display: block; }

/* Admin */
.admin-grid { display: grid; gap: 16px; }
.matrix { overflow-x: auto; }
.matrix table { border-collapse: collapse; font-size: .84rem; min-width: 100%; }
.matrix th, .matrix td { border: 1px solid var(--line); padding: 5px 6px; text-align: center; }
.matrix th { background: var(--panel); font-weight: 600; color: var(--charcoal); position: sticky; }
.matrix input { width: 62px; padding: 5px; border: 1px solid var(--line); border-radius: 6px; text-align: right; font: inherit; }
.matrix input:focus { outline: 2px solid var(--teal); border-color: var(--teal); }
.rowlab { text-align: left !important; font-weight: 600; white-space: nowrap; }
.savebar { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--line); padding: 14px 0; display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.savebar .status { font-size: .86rem; color: var(--muted); }
.savebar .status.ok { color: var(--teal-dark); }
details.svcgrid { border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px; margin-bottom: 10px; }
details.svcgrid summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.gridhint { font-size: .8rem; color: var(--muted); margin: 4px 0 10px; }