:root {
  --bg:#EFEDE6; --paper:#F7F6F1; --paper2:#FBFAF7; --ink:#1E2A24; --muted:#67705F; --line:#D3CFC2; --line-strong:#B9B3A2;
  --brass:#8F7238; --brass-ink:#fff; --green:#1F4A3C; --green-soft:#DCE6DF; --warn:#B5462B; --warn-soft:#F5E3DC; --ok-soft:#E2EFDA;
  --shadow:0 1px 0 rgba(30,42,36,.06), 0 8px 24px -16px rgba(30,42,36,.25);
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif; --sans:"Karla", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#12241E; --paper:#18302A; --paper2:#1E3A31; --ink:#ECE6D6; --muted:#A5AC9C; --line:#2A463C; --line-strong:#3E5E52;
    --brass:#C9A96A; --brass-ink:#12241E; --green:#9CCBB3; --green-soft:#203D33; --warn:#E08A6E; --warn-soft:#3B2A24; --ok-soft:#203D33;
    --shadow:0 1px 0 rgba(0,0,0,.2), 0 8px 24px -16px rgba(0,0,0,.6); color-scheme: dark; }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.5; }
a { color:var(--brass); }
h1,h2,h3 { font-family:var(--serif); font-weight:500; margin:0; line-height:1.1; text-wrap:balance; }
h1 { font-size:clamp(32px, 4.5vw, 44px); }
h2 { font-size:26px; }
.h3 { font-size:22px; margin-bottom:10px; }
p { margin:0 0 10px; }
.muted { color:var(--muted); }
.hint { font-size:12px; color:var(--muted); font-weight:400; }
.eyebrow { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); font-weight:600; margin:0 0 4px; }
.inline { display:inline; }
.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.count { font-family:var(--sans); font-size:13px; color:var(--muted); margin-left:6px; }
.tag { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-style:normal; border:1px solid var(--line-strong); padding:1px 6px; }
.tag--ok { color:var(--green); border-color:var(--green); }
.tag--live { color:var(--brass); border-color:var(--brass); }
.code { font-family:ui-monospace, Consolas, monospace; letter-spacing:.12em; font-size:14px; }

/* ---- top bar */
.top { background:var(--paper); border-bottom:1px solid var(--line); }
.top__in { max-width:1180px; margin:0 auto; padding:10px clamp(16px,3vw,32px); display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.brand { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink); }
.brand__mark { width:28px; height:28px; display:grid; place-items:center; background:var(--green); color:var(--brass); font-family:var(--serif); font-size:20px; font-weight:600; }
.brand__name { font-family:var(--serif); font-size:24px; font-weight:600; letter-spacing:-.01em; }
.brand--big { justify-content:center; margin-bottom:6px; } .brand--big .brand__mark { width:40px; height:40px; font-size:28px; } .brand--big .brand__name { font-size:36px; }
.nav { display:flex; gap:4px; flex-wrap:wrap; }
.nav a { text-decoration:none; color:var(--muted); padding:6px 10px; font-size:14px; letter-spacing:.02em; border-bottom:2px solid transparent; }
.nav a[aria-current] { color:var(--ink); border-color:var(--brass); }
.nav a:hover { color:var(--ink); }
.top__right { margin-left:auto; display:flex; gap:8px; align-items:center; }

/* ---- page */
.page { max-width:1180px; margin:0 auto; padding:28px clamp(16px,3vw,32px) 48px; }
.foot { max-width:1180px; margin:0 auto; padding:0 clamp(16px,3vw,32px) 32px; font-size:12px; color:var(--muted); font-family:var(--serif); font-style:italic; font-size:15px; }
.head { display:flex; justify-content:space-between; align-items:end; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.head__actions { display:flex; gap:8px; }
.sec__head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:26px 0 12px; border-bottom:1px solid var(--line); padding-bottom:8px; }
.sec__head a { font-size:13px; text-decoration:none; }
.cols { display:grid; grid-template-columns:1.6fr 1fr; gap:32px; align-items:start; }
.cols--groups, .cols--admin { grid-template-columns:1.5fr 1fr; }
.cols--settings { grid-template-columns:1fr 1fr; }
@media (max-width:900px) { .cols, .cols--groups, .cols--admin, .cols--settings { grid-template-columns:1fr; } }

/* ---- flash */
.flash { padding:10px 14px; border:1px solid var(--line-strong); background:var(--paper); margin-bottom:14px; font-size:14px; }
.flash--ok { border-color:var(--green); background:var(--ok-soft); }
.flash--err { border-color:var(--warn); background:var(--warn-soft); }
.flash--warn { border-color:var(--brass); background:var(--paper2); }

/* ---- buttons */
.btn { font:inherit; font-size:13px; letter-spacing:.04em; padding:8px 14px; border:1px solid var(--line-strong); background:var(--paper); color:var(--ink); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; line-height:1.2; border-radius:2px; white-space:nowrap; }
.btn:hover { border-color:var(--brass); color:var(--brass); }
.btn--primary { background:var(--green); border-color:var(--green); color:#fff; }
.btn--primary:hover { background:var(--brass); border-color:var(--brass); color:var(--brass-ink); }
.btn--ghost { background:transparent; border-color:transparent; color:var(--muted); }
.btn--ghost:hover { color:var(--brass); border-color:transparent; }
.btn--danger { color:var(--warn); border-color:var(--warn); background:transparent; }
.btn--danger:hover { background:var(--warn); color:#fff; }
.btn--small { padding:5px 10px; font-size:12px; }
.btn--block { width:100%; justify-content:center; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline:2px solid var(--brass); outline-offset:2px; }

/* ---- forms */
.form label { display:block; font-size:13px; font-weight:600; margin-bottom:12px; }
.form label .hint { font-weight:400; margin-left:4px; }
.form input:not([type=color]):not([type=checkbox]), .form select, .form textarea, .filters input, .filters select {
  display:block; width:100%; margin-top:5px; font:inherit; font-size:15px; padding:9px 11px; border:1px solid var(--line-strong); background:var(--paper2); color:var(--ink); border-radius:2px; }
.form input[type=color] { display:block; margin-top:5px; width:64px; height:38px; padding:2px; border:1px solid var(--line-strong); background:var(--paper2); }
.form textarea { resize:vertical; }
.form--wide { max-width:none; }
.form__cols { display:grid; grid-template-columns:1.4fr 1fr; gap:32px; align-items:start; }
@media (max-width:900px) { .form__cols { grid-template-columns:1fr; } }
.form__actions { display:flex; gap:10px; margin-top:8px; border-top:1px solid var(--line); padding-top:16px; }
.form--row { display:flex; gap:14px; align-items:end; flex-wrap:wrap; }
.form--row label { flex:1 1 180px; margin-bottom:0; }
.form--row .btn { margin-bottom:1px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px) { .grid2 { grid-template-columns:1fr; } }
.urlrow { display:flex; gap:8px; align-items:stretch; margin-top:5px; }
.urlrow input { margin-top:0 !important; }
.filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.filters input, .filters select { margin-top:0; width:auto; }
.panel { background:var(--paper); border:1px solid var(--line); padding:20px; margin-bottom:20px; }
.panel--row { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
.panel__side { display:flex; flex-direction:column; min-width:200px; }
@media (max-width:760px) { .panel--row { grid-template-columns:1fr; } }
.preview { background:var(--paper); border:1px solid var(--line); padding:14px; }
.preview__img { aspect-ratio:4/3; background:var(--paper2); border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; margin-bottom:10px; }
.preview__img img { width:100%; height:100%; object-fit:contain; }
.preview__ph { font-family:var(--serif); font-style:italic; color:var(--muted); font-size:18px; }
label.small { font-size:12px; }
.rulebox { margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.rulebox__big { font-family:var(--serif); font-size:34px; font-weight:600; margin:0 0 4px; }

/* ---- auth */
body.auth { display:grid; place-items:center; min-height:100vh; padding:24px 16px; }
.auth__card { width:100%; max-width:420px; background:var(--paper); border:1px solid var(--line); padding:32px 28px; box-shadow:var(--shadow); }
.auth__tag { text-align:center; font-family:var(--serif); font-style:italic; color:var(--muted); font-size:17px; margin-bottom:22px; }
.auth__h { font-size:30px; margin-bottom:14px; }
.auth__alt { text-align:center; font-size:13px; color:var(--muted); margin-top:14px; }

/* ---- tiles */
.tiles { display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; margin-bottom:26px; }
@media (max-width:1000px) { .tiles { grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px) { .tiles { grid-template-columns:1fr 1fr; } }
.tile { background:var(--paper); border:1px solid var(--line); padding:14px 16px; display:flex; flex-direction:column; gap:2px; }
.tile--accent { border-color:var(--brass); }
.tile--warn { border-color:var(--warn); }
.tile--good .tile__val { color:var(--green); }
.tile--quiet { background:transparent; }
.tile__label { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.tile__val { font-family:var(--serif); font-size:30px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.1; }
.tile__val small { font-size:16px; color:var(--muted); font-weight:400; }
.tile__sub { font-size:12px; color:var(--muted); }
.meter { display:block; height:4px; background:var(--line); margin-top:8px; overflow:hidden; }
.meter > span { display:block; height:100%; background:var(--green); }
.meter > span.over { background:var(--warn); }

/* ---- ritual */
.ritual { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; background:var(--paper); border:1px solid var(--brass); padding:18px 22px; margin-bottom:22px; }
.ritual h2 { margin-bottom:8px; }
.ritual__steps { margin:0; padding-left:20px; font-size:14px; color:var(--muted); }
.ritual__steps li { margin-bottom:2px; }
@media (max-width:700px) { .ritual { grid-template-columns:1fr; } }

/* ---- cards */
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.cards--compact { grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.card { background:var(--paper); border:1px solid var(--line); display:flex; flex-direction:column; box-shadow:var(--shadow); }
.card--ready { border-color:var(--brass); }
.card__media { position:relative; display:block; aspect-ratio:4/3; background:var(--paper2); border-bottom:1px solid var(--line); overflow:hidden; }
.card__media img { width:100%; height:100%; object-fit:cover; display:block; }
.card__ph { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--serif); font-size:64px; color:var(--line-strong); font-weight:600; }
.badge { position:absolute; top:10px; left:10px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:3px 8px; background:var(--paper); color:var(--muted); border:1px solid var(--line-strong); }
.badge--ready { background:var(--brass); color:var(--brass-ink); border-color:var(--brass); }
.badge--done { background:var(--green); color:#fff; border-color:var(--green); }
.badge--drop { text-decoration:line-through; }
.card__body { padding:12px 14px 12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card__top { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.card__title { font-family:var(--sans); font-size:15px; font-weight:600; line-height:1.3; }
.card__price { font-family:var(--serif); font-size:22px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.card__meta { display:flex; flex-wrap:wrap; gap:6px 10px; font-size:12px; color:var(--muted); }
.chip { display:inline-flex; align-items:center; gap:5px; font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.chip::before { content:""; width:8px; height:8px; background:var(--c, var(--green)); border-radius:50%; }
.card__why { font-family:var(--serif); font-style:italic; font-size:16px; line-height:1.35; color:var(--ink); margin:2px 0 0; }
.card__dates { font-size:12px; color:var(--muted); margin-top:auto; padding-top:6px; }
.card__actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:10px; margin-top:4px; position:relative; }
.more { position:relative; margin-left:auto; }
.more summary { list-style:none; }
.more summary::-webkit-details-marker { display:none; }
.more__menu { position:absolute; right:0; top:calc(100% + 6px); z-index:10; background:var(--paper); border:1px solid var(--line-strong); padding:10px; min-width:220px; box-shadow:var(--shadow); display:grid; gap:8px; }
.more__label { font-size:12px; color:var(--muted); display:block; }
.more__label select { display:block; width:100%; margin-top:4px; font:inherit; font-size:13px; padding:6px; border:1px solid var(--line-strong); background:var(--paper2); color:var(--ink); }
.more__row { display:flex; gap:4px; }
.more .form input { margin-top:6px; margin-bottom:8px; }

/* ---- tabs */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.tabs a { text-decoration:none; color:var(--muted); padding:8px 14px; border-bottom:2px solid transparent; margin-bottom:-1px; font-size:14px; }
.tabs a span { font-size:12px; color:var(--muted); margin-left:4px; }
.tabs a[aria-current] { color:var(--ink); border-color:var(--brass); }

/* ---- empty */
.empty { border:1px dashed var(--line-strong); padding:32px 20px; text-align:center; color:var(--muted); display:grid; gap:10px; justify-items:center; }
.empty p { margin:0; }

/* ---- bars */
.bars { display:flex; gap:8px; align-items:flex-end; height:120px; padding:0 4px; border-bottom:1px solid var(--line-strong); }
.bars--tall { height:180px; }
.bar { flex:1; position:relative; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; }
.bar__stack { background:var(--green); min-height:2px; display:flex; flex-direction:column-reverse; }
.bar__off { display:block; background:var(--warn); }
.bar__env { position:absolute; left:-2px; right:-2px; border-top:1px dashed var(--brass); }
.bar__lbl { position:absolute; top:100%; left:0; right:0; text-align:center; font-size:11px; color:var(--muted); padding-top:4px; }
.legend { margin:26px 0 10px; font-size:12px; color:var(--muted); display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.sw { display:inline-block; width:12px; height:12px; vertical-align:middle; margin-right:4px; }
.sw--listed { background:var(--green); } .sw--off { background:var(--warn); } .sw--env { border-top:1px dashed var(--brass); height:0; width:16px; }

/* ---- lists / tables */
.list { list-style:none; margin:0; padding:0; }
.list li { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }
.table { width:100%; border-collapse:collapse; font-size:14px; }
.table th { text-align:left; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; border-bottom:1px solid var(--line-strong); padding:8px 8px 8px 0; }
.table td { padding:10px 8px 10px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.table td:first-child { white-space:nowrap; }
.table .num { font-family:var(--serif); font-size:18px; }
.table .pos { color:var(--green); } .table .neg { color:var(--warn); }
.row--over td { background:var(--warn-soft); }
.plan { list-style:none; margin:0; padding:0; counter-reset:p; }
.plan li { display:flex; justify-content:space-between; gap:12px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line); counter-increment:p; }
.plan li::before { content:counter(p); font-family:var(--serif); font-style:italic; color:var(--brass); min-width:20px; }
.plan__title { flex:1; } .plan__title small { color:var(--muted); margin-left:6px; }
.plan__when { font-family:var(--serif); font-size:17px; white-space:nowrap; }
.plan__when.now { color:var(--green); font-weight:600; } .plan__when.far { color:var(--muted); font-style:italic; }

/* ---- groups */
.grp { background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--c, var(--green)); margin-bottom:10px; }
.grp__sum { list-style:none; display:flex; align-items:center; gap:14px; padding:14px 16px; cursor:pointer; flex-wrap:wrap; }
.grp__sum::-webkit-details-marker { display:none; }
.grp__dot { width:10px; height:10px; border-radius:50%; background:var(--c); }
.grp__name { font-family:var(--serif); font-size:22px; font-weight:600; }
.grp__stats { font-size:13px; color:var(--muted); flex:1; }
.grp__budget { font-size:12px; color:var(--muted); min-width:140px; }
.grp__edit { padding:0 16px 16px; border-top:1px solid var(--line); display:grid; gap:12px; padding-top:14px; }

/* ---- dialog */
.dialog { border:1px solid var(--line-strong); background:var(--paper); color:var(--ink); padding:26px 28px; max-width:520px; width:calc(100% - 32px); box-shadow:var(--shadow); }
.dialog::backdrop { background:rgba(18,36,30,.55); }
.dialog__h { font-size:28px; margin-bottom:8px; }
.dialog__why { font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.35; margin:0 0 14px; padding:10px 14px; border-left:3px solid var(--brass); background:var(--paper2); }
.dialog__q { font-weight:600; margin-bottom:10px; }
.dialog__actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.bookmarklet { cursor:grab; }
@media (prefers-reduced-motion: no-preference) { .btn { transition:background .12s, color .12s, border-color .12s; } }

.steps { margin:0 0 12px; padding-left:20px; font-size:14px; color:var(--muted); } .steps li { margin-bottom:4px; }