@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@500;700;800&display=swap");
:root {
  --bg: #fdf1ef; --surface: #ffffff; --ink: #3a1f2b; --muted: #85606f; --line: #f1d3da;
  --berry: #be1772; --berry-ink: #ffffff; --rose: #cf5c86; --sage: #5f8f77; --sage-bg: #e0eee6; --sage-ink: #2f6a4f;
  --brass: #b58a45; --sun: #fcd227; --sun-bg: #fff0b8; --sun-ink: #5b3d00; --blush: #f6c9d6;
  --lilac-bg: #f3e9ec; --lilac-ink: #7d5a68; --field: #fff7dc; --err: #b3153f;
  --w1: #e98aa8; --w2: #fbe9e4; --w3: #a9c2b1; --w4: #f2b3c6; --veil: rgba(253, 241, 239, .93);
  --font: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --display: "Rubik", "Heebo", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #20121a; --surface: #2f1b26; --ink: #fbeaf0; --muted: #cba7b6; --line: #51303f;
  --berry: #ff6fb0; --berry-ink: #2b1636; --rose: #ff8fb3; --sage: #8fcaa9; --sage-bg: #1f3a2d; --sage-ink: #b6e6cc;
  --brass: #d9b06a; --sun: #fcd227; --sun-bg: #4a3608; --sun-ink: #ffd878; --blush: #5a3446;
  --lilac-bg: #3d2631; --lilac-ink: #d9b6c5; --field: #3b3014; --err: #ff8fae;
  --w1: #7a3552; --w2: #3a2230; --w3: #3f5a4b; --w4: #5e3045; --veil: rgba(32, 18, 26, .94); --tile-ink: #2b1636; color-scheme: dark; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: transparent; color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.45; -webkit-tap-highlight-color: transparent; padding: 0 max(16px, env(safe-area-inset-right, 0px)) max(48px, calc(env(safe-area-inset-bottom, 0px) + 28px)) max(16px, env(safe-area-inset-left, 0px)); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(var(--veil), var(--veil)), url("wall.jpg") center top / cover no-repeat; }
.wrap { max-width: 720px; margin: 0 auto; }
h1 { font-family: var(--display); font-size: 28px; margin: 0 0 2px; font-weight: 800; letter-spacing: -.01em; color: var(--berry); }
.sub { color: var(--muted); margin: 0 0 10px; font-size: 14px; }
input, textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%; min-width: 0; }
input:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--berry) 40%, transparent); outline-offset: 1px; border-color: var(--berry); }
button.primary { background: var(--berry); color: var(--berry-ink); border: 0; border-radius: 99px; padding: 13px 18px; font-family: var(--display); font-weight: 700; font-size: 17px; cursor: pointer; width: 100%; box-shadow: 0 4px 0 color-mix(in srgb, var(--berry) 60%, #000); }
button.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--berry) 60%, #000); }
button.link { background: none; border: 0; color: var(--berry); font: inherit; font-weight: 700; cursor: pointer; padding: 6px 0; }
.logo { display: block; width: 190px; max-width: 60%; height: auto; margin: 0 auto 4px; }
.logo.sm { width: 92px; margin: 0; flex: none; }
.brandrow { display: flex; align-items: center; gap: 14px; min-width: 0; }
.err { color: var(--err); min-height: 1.4em; font-size: 14px; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0 12px; }
body::before { content: ""; display: block; height: calc(104px + env(safe-area-inset-top, 0px)); margin: 0 calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); border-bottom: 3px solid var(--brass);
  background: url("wall.jpg") center 40% / cover no-repeat var(--w1); }
.login { max-width: 380px; margin: 6vh auto 0; display: grid; gap: 12px; background: var(--surface); border: 2px solid var(--line); border-radius: 24px; padding: 24px 22px 22px; box-shadow: 0 10px 0 var(--blush); }
.login label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 4px; font-weight: 500; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding-top: 8px; }
.tile { display: block; text-decoration: none; color: var(--tile-ink, #fff); border-radius: 20px; padding: 20px 18px; min-height: 120px; position: relative; overflow: hidden; border-bottom: 5px solid var(--brass);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.0) 0 9px, rgba(255,255,255,.16) 9px 11px), var(--berry); }
.tile:nth-child(4n+2) { background: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 9px, rgba(255,255,255,.16) 9px 11px), var(--rose); }
.tile:nth-child(4n+3) { background: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 9px, rgba(255,255,255,.16) 9px 11px), var(--sage); }
.tile:nth-child(4n+4) { background: repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 9px, rgba(0,0,0,.07) 9px 11px), var(--sun); color: #3b2a00; }
.tile b { display: block; font-family: var(--display); font-size: 20px; margin-bottom: 6px; position: relative; }
.tile span { font-size: 14px; opacity: .95; position: relative; }
.tile:hover { transform: translateY(-2px); }
.tile:active { transform: translateY(3px); }
header.sticky { position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 96%, transparent); padding: env(safe-area-inset-top, 0px) 0 10px; z-index: 5; border-bottom: 2px dashed color-mix(in srgb, var(--brass) 55%, var(--line)); }
.bar { height: 16px; background: var(--lilac-bg); border-radius: 99px; overflow: hidden; border: 2px solid var(--line); }
.bar > i { display: block; height: 100%; width: 0; transition: width .4s; border-radius: 99px;
  background: repeating-linear-gradient(-45deg, var(--sage) 0 10px, color-mix(in srgb, var(--sage) 65%, #fff) 10px 20px); }
.count { display: flex; justify-content: space-between; font-size: 14px; margin: 6px 0 10px; font-variant-numeric: tabular-nums; font-weight: 500; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chip { border: 2px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 99px; padding: 6px 14px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.chip[aria-pressed=true] { background: var(--berry); color: var(--berry-ink); border-color: var(--berry); }
main { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.card { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; overflow: hidden; }
.head { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: right; padding: 12px 14px; cursor: pointer; }
.head::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.6) 0 12%, transparent 13%), var(--lilac-ink); box-shadow: inset 0 -3px 0 rgba(0,0,0,.14); }
.head:has(.pill.ok)::before { background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.6) 0 12%, transparent 13%), var(--sage); }
.head:has(.pill.part)::before { background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.6) 0 12%, transparent 13%), var(--sun); }
.head .t { flex: 1; min-width: 0; }
.name { font-family: var(--display); font-weight: 700; font-size: 17px; }
.line2 { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.pill { font-size: 13px; padding: 3px 12px; border-radius: 99px; white-space: nowrap; font-weight: 700; }
.pill.ok { background: var(--sage-bg); color: var(--sage-ink); } .pill.part { background: var(--sun-bg); color: var(--sun-ink); } .pill.none { background: var(--lilac-bg); color: var(--lilac-ink); }
.body { padding: 6px 14px 16px; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; border-top: 2px dashed var(--line); }
.f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.f.wide { grid-column: 1 / -1; }
.f label { font-size: 13px; color: var(--muted); font-weight: 500; }
.f.fill input, .f.fill textarea { background: var(--field); border-color: color-mix(in srgb, var(--sun) 55%, var(--line)); }
.phone { direction: ltr; text-align: right; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mini { border: 2px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; }
a.mini { display: inline-block; }
.src { grid-column: 1 / -1; font-size: 13px; color: var(--lilac-ink); background: var(--lilac-bg); border-radius: 12px; padding: 8px 12px; }
.meta { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.add { margin-top: 14px; width: 100%; padding: 14px; border-radius: 18px; border: 2px dashed var(--berry); background: none; color: var(--berry); font-family: var(--display); font-weight: 700; font-size: 16px; cursor: pointer; }
.msg { padding: 20px 0; color: var(--muted); }
@media (max-width: 520px) { .body { grid-template-columns: 1fr; } h1 { font-size: 24px; } body::before { height: calc(76px + env(safe-area-inset-top, 0px)); } }
input, textarea, button { -webkit-appearance: none; appearance: none; touch-action: manipulation; }
a, .chk, .tab, .chip, .mini { touch-action: manipulation; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
@media (pointer: coarse) {
  .mini, a.mini, .chip { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  button.link { min-height: 44px; min-width: 44px; }
  .head { min-height: 60px; }
  input, textarea { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .bar > i, .tile { transition: none; } .tile:hover, .tile:active { transform: none; } }