:root { --bg:#f6f1e7; --card:#fffdf8; --ink:#4a3f35; --accent:#c98a3b; --line:#e6ddcd; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--ink); }
.hidden { display:none !important; }
.q-header { display:flex; align-items:center; gap:16px; padding:16px 20px; border-bottom:2px solid var(--line); }
.q-header h1 { font-size:20px; margin:0; flex:1; }
.q-back { text-decoration:none; color:var(--accent); font-weight:700; }
.q-summary { font-weight:700; }
.q-main { padding:20px; max-width:760px; margin:0 auto; }
.q-card { background:var(--card); border:2px solid var(--line); border-radius:14px; padding:16px; margin-bottom:16px; }
.q-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end; }
.q-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.q-field--full { grid-column:1 / -1; }
.q-label { font-size:13px; font-weight:700; color:var(--ink); opacity:.75; }
.q-form input,
.q-form select {
  width:100%;
  padding:11px 12px;
  border:2px solid var(--line);
  border-radius:10px;
  font-size:15px;
  font-family:inherit;
  color:var(--ink);
  background:var(--card);
}
.q-form input:focus,
.q-form select:focus { outline:none; border-color:var(--accent); }
.q-form select {
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23c98a3b' d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.q-form select:disabled { opacity:.6; cursor:not-allowed; background-image:none; }
.q-submit {
  grid-column:1 / -1;
  padding:12px 16px;
  border:none;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
}
.q-submit:hover { filter:brightness(1.05); }
@media (max-width:520px) {
  .q-form { grid-template-columns:1fr; }
}
.q-group h3 { margin:18px 0 8px; text-transform:capitalize; }
.q-quest { display:flex; align-items:center; gap:12px; background:var(--card); border:2px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:8px; }
.q-quest.done { border-color:var(--accent); }
.q-quest .title { flex:1; font-weight:600; }
.q-bar { width:120px; height:8px; background:var(--line); border-radius:4px; overflow:hidden; }
.q-bar > i { display:block; height:100%; background:var(--accent); }
.q-streak { font-size:13px; opacity:.8; }
.q-heat { display:flex; gap:3px; margin-top:6px; }
.q-heat span { width:12px; height:12px; border-radius:3px; background:var(--line); }
.q-heat span.on { background:var(--accent); }
.q-del { border:none; background:none; color:#b55; cursor:pointer; font-size:13px; }