:root{
  --bg:#f6f5f2; --card:#ffffff; --border:#e3e0d8; --text:#26251f; --muted:#6d6a5f;
  --brand:#38383b; --brand-tint:#f0f0f1;
  --accent:#38383b; --accent-bg:#ececed; --accent-bd:#c9c9cb;
  --danger:#b3432e;
  --core-bg:#dff2f4; --core-bd:#a9d4da;
  --hand-bg:#fdf1d8; --hand-bd:#e6c98a;
  --saws-bg:#e6ecf7; --saws-bd:#b7c6e6;
  --wood-bg:#e3f2e6; --wood-bd:#a9d4b3;
  --input-bg:#fbfaf7;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1b1a17; --card:#242320; --border:#3a3730; --text:#ece8e0; --muted:#a89f8e;
    --brand:#38383b; --brand-tint:#2a2a2c;
    --accent:#c9c9cb; --accent-bg:#313134; --accent-bd:#4a4a4d;
    --danger:#e08a72;
    --core-bg:#173338; --core-bd:#2c5860;
    --hand-bg:#382c14; --hand-bd:#6b5324;
    --saws-bg:#1c2438; --saws-bd:#3a4a72;
    --wood-bg:#173321; --wood-bd:#2f6b3f;
    --input-bg:#2b2a25;
  }
}
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:28px 16px 60px;
}
.brand-bar{ background:var(--brand); margin:-28px -16px 28px; padding:14px 16px; }
.brand-bar-inner{ max-width:960px; margin:0 auto; }
.brand-logo{ height:28px; display:block; }
.wrap{ max-width:960px; margin:0 auto; }
h1{ font-size:1.5rem; font-weight:700; margin:0 0 4px; letter-spacing:-0.01em; }
p.lede{ color:var(--muted); font-size:0.92rem; margin:0 0 28px; line-height:1.5; max-width:64ch; }
.card{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:20px 22px; margin-bottom:20px;
}
.card h2{ font-size:1rem; font-weight:650; margin:0 0 14px; }
.card h2 .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:var(--accent-bg);
  border:1px solid var(--accent-bd); color:var(--accent); font-size:0.72rem;
  font-weight:700; margin-right:8px; vertical-align:-4px;
}
.field-row{ display:flex; gap:14px; flex-wrap:wrap; }
.field{ flex:1 1 200px; }
label{ display:block; font-size:0.78rem; color:var(--muted); margin-bottom:5px; }
input[type=text], input[type=email], textarea{
  width:100%; padding:9px 11px; border-radius:8px; border:1px solid var(--border);
  background:var(--input-bg); color:var(--text); font-size:0.9rem; font-family:inherit;
}
textarea{ min-height:70px; resize:vertical; }
input:focus, textarea:focus{ outline:2px solid var(--accent-bd); outline-offset:1px; }
.hint{ font-size:0.76rem; color:var(--muted); margin:0 0 12px; }

/* ---- Table ---- */
.grid-scroll{ overflow-x:auto; border-radius:10px; border:1px solid var(--border); -webkit-overflow-scrolling:touch; }
table{ border-collapse:separate; border-spacing:0; width:100%; }
thead th{
  background:var(--card); font-size:0.78rem; font-weight:650;
  padding:10px 8px; text-align:center; border-bottom:2px solid var(--border);
  vertical-align:bottom;
}
/* First column stays put while the tick columns scroll sideways */
thead th.course-col, tbody th.item-label{
  position:sticky; left:0; z-index:2; background:var(--card);
  box-shadow:2px 0 0 var(--border);
}
tr.category-row td{ position:sticky; left:0; z-index:1; }
thead th.course-col{ text-align:left; padding-left:12px; min-width:220px; }
thead th.name-col{ min-width:130px; }
.swipe-hint{ display:none; font-size:0.74rem; color:var(--muted); margin:8px 0 0; }
@media (max-width:640px){
  thead th.course-col{ min-width:150px; max-width:170px; }
  tbody th.item-label{ max-width:170px; white-space:normal; font-size:0.78rem; line-height:1.3; }
  thead th.name-col{ min-width:92px; }
  thead th.name-col input{ font-size:0.8rem; padding:6px 6px; }
  tbody td.tick input{ width:20px; height:20px; }
  .swipe-hint{ display:block; }
  .card{ padding:16px 14px; }
}
thead th.name-col input{
  width:100%; text-align:center; font-weight:600; font-size:0.85rem; padding:7px 8px;
}
thead th.name-col input::placeholder{ font-weight:500; color:var(--muted); opacity:.8; }
thead th.name-col .remove-btn{
  display:block; margin:4px auto 0; background:transparent; border:none; color:var(--muted);
  font-size:0.72rem; cursor:pointer; padding:2px 6px; border-radius:6px;
}
thead th.name-col .remove-btn:hover{ color:var(--danger); background:var(--accent-bg); }
thead th.add-col{ width:56px; vertical-align:middle; }
.add-col-btn{
  width:40px; height:40px; border-radius:50%; border:1px dashed var(--accent-bd);
  background:var(--accent-bg); color:var(--accent); font-size:1.3rem; line-height:1;
  cursor:pointer; font-weight:600;
}
.add-col-btn:hover{ filter:brightness(1.05); }
tbody td, tbody th{
  padding:8px; font-size:0.83rem; border-bottom:1px solid var(--border);
}
tbody th.item-label{ text-align:left; font-weight:500; padding-left:12px; }
tbody td.tick{ text-align:center; }
tbody td.tick input{ width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
tbody td.spacer{ background:transparent; }
tr.category-row td{
  font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:7px 12px; border-bottom:1px solid var(--border);
}
tr.category-row.core td{ background:var(--core-bg); border-color:var(--core-bd); }
tr.category-row.hand td{ background:var(--hand-bg); border-color:var(--hand-bd); }
tr.category-row.saws td{ background:var(--saws-bg); border-color:var(--saws-bd); }
tr.category-row.wood td{ background:var(--wood-bg); border-color:var(--wood-bd); }

.submit-btn{
  display:block; width:100%; padding:13px; border-radius:10px; border:none;
  background:var(--accent); color:#fff; font-size:0.95rem; font-weight:650; cursor:pointer;
}
.submit-btn:hover{ filter:brightness(1.06); }
.submit-btn:disabled{ opacity:.65; cursor:not-allowed; }
.confirm{
  display:none; text-align:center; background:var(--accent-bg); border:1px solid var(--accent-bd);
  color:var(--accent); padding:14px; border-radius:10px; font-size:0.9rem; font-weight:600;
  margin-top:14px;
}
.confirm.show{ display:block; }
.form-error{
  display:none; text-align:center; background:transparent; border:1px solid var(--danger);
  color:var(--danger); padding:12px; border-radius:10px; font-size:0.88rem; font-weight:600;
  margin-top:14px;
}
.form-error.show{ display:block; }