:root {
  --bg: #f6f5f1; --card: #fff; --text: #1d1f1e; --muted: #6b716e;
  --line: #e3e1da; --accent: #2f6f5e; --high: #c2553a; --low: #9aa29e;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #151816; --card: #1e2220; --text: #e8ebe9; --muted: #98a09c;
          --line: #2d3330; --accent: #6cbfa6; --high: #e5866b; --low: #5f6864; }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
       font: 16px/1.4 system-ui, -apple-system, sans-serif; }
header, main { max-width: 720px; margin: 0 auto; padding: 0 16px; }
header { padding-top: max(16px, env(safe-area-inset-top)); }
h1 { margin: 0 0 8px; font-size: 1.5rem; display: inline-block; }
h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
     color: var(--muted); margin: 24px 0 8px; }

nav { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
nav a { padding: 8px 12px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
nav a.active { color: var(--text); border-color: var(--accent); }
nav a.right { margin-left: auto; }

input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line);
                          border-radius: 8px; background: var(--card); }
button { padding: 8px 14px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; }
button.ghost { background: none; color: var(--accent); float: right; padding: 4px 0; }
button.icon { background: none; color: var(--muted); padding: 2px 6px; }
button:disabled { opacity: .4; }

details.add { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
details.add summary { cursor: pointer; color: var(--accent); }

.by { color: var(--muted); }
.price { font-variant-numeric: tabular-nums; font-weight: 600; }
button.price { background: none; color: var(--text); padding: 2px 4px; white-space: nowrap; }
.err { color: var(--high); cursor: help; }

/* --- formular adăugare / editare ----------------------------------------------- */
.item-form { display: grid; gap: 8px; }
details.add .item-form { margin-top: 10px; }
.form-row { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.form-row label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .9rem; }
.form-row input, .form-row select { width: auto; }
.form-actions { display: flex; gap: 8px; }
button.secondary { background: none; color: var(--accent); border: 1px solid var(--line); }
.prow.editing { display: block; border-color: var(--accent); }

/* --- termen ---------------------------------------------------------------------- */
.due { white-space: nowrap; color: var(--muted); font-size: .85rem; }
.due.soon { color: #b07d00; font-weight: 600; }
.due.overdue { color: var(--high); font-weight: 600; }

.empty { color: var(--muted); text-align: center; padding: 40px 0; }

/* --- liste ----------------------------------------------------------- */
.filters { display: grid; gap: 8px; margin: 12px 0; }
.filters .sort { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; }
.filters .sort select { width: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid var(--line);
        border-radius: 999px; background: var(--card); font-size: .85rem; cursor: pointer; user-select: none; }
.chip input { display: none; }

.rows { list-style: none; margin: 0; padding: 0 0 24px; }
.rows.with-totals { padding-bottom: 96px; }
.prow { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 4px 10px;
        background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; }
.prow > input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
.prow.done { opacity: .5; }
.prow.done .name { text-decoration: line-through; }
.prow .name { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.prow .name a { color: inherit; text-decoration-color: var(--line); }
.prow .note { display: block; color: var(--muted); font-weight: 400; white-space: pre-line; }
.prow .note a { color: var(--accent); }
.prow .price { white-space: nowrap; }
.prow .meta { grid-column: 3 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .85rem; }
.shop { color: var(--muted); }
.tag button { background: none; color: var(--muted); padding: 0 6px; }
.actions { margin-left: auto; display: flex; }
.prio { padding: 2px 7px; font-size: .75rem; font-weight: 700; border-radius: 6px; background: var(--line); color: var(--text); }
.prio-1 .prio, button.prio-1 { background: var(--high); color: #fff; }
button.prio-3 { background: none; border: 1px solid var(--line); color: var(--muted); }

.totals { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: center;
          gap: 4px 24px; padding: 10px 16px max(10px, env(safe-area-inset-bottom));
          background: var(--card); border-top: 1px solid var(--line); font-size: .9rem; }
.totals small { color: var(--muted); }

/* --- taguri: culori ------------------------------------------------------------ */
/* Fiecare culoare setează --c; fundalul, textul și bordura se derivă din ea, deci merg și în dark mode. */
.tag, .chip, .swatch { --c: #8a8f8c; }
.chip.prio-1 { --c: var(--high); } .chip.prio-2 { --c: var(--accent); } .chip.prio-3 { --c: var(--low); }
.tc-gray { --c: #8a8f8c; }   .tc-red { --c: #d93025; }    .tc-orange { --c: #e8710a; }
.tc-yellow { --c: #c99400; } .tc-green { --c: #1e8e3e; }  .tc-teal { --c: #12a4af; }
.tc-blue { --c: #1a73e8; }   .tc-purple { --c: #9334e6; } .tc-pink { --c: #d01884; }
.tc-brown { --c: #8d5b3a; }

.tag { display: inline-flex; align-items: center; padding: 0 0 0 8px; border-radius: 999px; line-height: 1.6;
       background: color-mix(in srgb, var(--c) 16%, var(--card));
       color: color-mix(in srgb, var(--c) 70%, var(--text));
       border: 1px solid color-mix(in srgb, var(--c) 40%, var(--card)); }
.tag button { background: none; color: inherit; opacity: .6; padding: 0 6px; }
.tag:not(:has(button)) { padding-right: 8px; }
.chip { border-color: color-mix(in srgb, var(--c) 45%, var(--card)); }
.chip:has(input:checked) { background: var(--c); border-color: var(--c); color: #fff; }

/* --- sugestii la scrierea unui tag ----------------------------------------------- */
.suggest-wrap { position: relative; display: inline-block; }
form .suggest-wrap { display: block; }
.tag-input { width: 130px; padding: 2px 8px; font-size: .85rem; }
.suggest { position: absolute; z-index: 10; top: 100%; left: 0; min-width: 180px; max-height: 240px; overflow-y: auto;
           margin: 4px 0 0; padding: 4px; list-style: none; background: var(--card);
           border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgb(0 0 0 / .15); }
.suggest li { padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: .9rem; }
.suggest li.active { background: var(--bg); }
.suggest .new { color: var(--muted); }

/* --- pagina de taguri ------------------------------------------------------------ */
.add-tag-form { display: flex; gap: 8px; margin: 12px 0; }
.hint { color: var(--muted); font-size: .85rem; }
.tag-admin { list-style: none; margin: 0; padding: 0; }
.tag-admin li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; margin-bottom: 6px;
                background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.tag-admin li > .tag { min-width: 90px; justify-content: center; }
.tag-admin input[name=name] { width: 160px; }
.tag-admin .count { color: var(--muted); margin-left: auto; }
.swatches { display: flex; gap: 4px; }
.swatch { width: 20px; height: 20px; border-radius: 50%; background: var(--c); cursor: pointer;
          outline-offset: 2px; }
.swatch input { display: none; }
.swatch:has(input:checked) { outline: 2px solid var(--c); }

/* --- căutare, numărătoare taguri, bifare în bloc ------------------------------------ */
#search { margin: 12px 0 0; }
.chip .n { margin-left: 5px; font-size: .75em; opacity: .65; font-variant-numeric: tabular-nums; }
.bulk { margin-left: 6px; white-space: nowrap; color: var(--muted); }
button.link { background: none; color: var(--accent); padding: 0; text-decoration: underline; font-size: inherit; }

/* --- login și utilizator ----------------------------------------------------------- */
.login { max-width: 360px; padding-top: 18vh; }
.login h1 { text-align: center; margin-bottom: 20px; }
.login-error { margin: 0; color: var(--high); font-size: .9rem; }
.userbox { float: right; display: flex; align-items: center; gap: 8px; margin: 6px 0 0 12px; font-size: .9rem; color: var(--muted); }
.changed { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.history { margin: 0; color: var(--muted); font-size: .8rem; }