:root {
  --bg: #f4f6f5;
  --card: #ffffff;
  --text: #15201d;
  --muted: #64716d;
  --line: #e2e7e5;
  --brand: #0f766e;
  --brand-soft: #d6f0ec;
  --ok: #15803d;
  --ok-soft: #dcfce7;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --no: #b91c1c;
  --no-soft: #fee2e2;
  --key: #eef2f1;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1513;
    --card: #16211e;
    --text: #e7efec;
    --muted: #93a39e;
    --line: #26332f;
    --brand: #2dd4bf;
    --brand-soft: #123a35;
    --ok: #4ade80;
    --ok-soft: #12301f;
    --warn: #fbbf24;
    --warn-soft: #3a2d0e;
    --no: #f87171;
    --no-soft: #3b1414;
    --key: #1f2c29;
    --shadow: none;
  }
}
:root[data-theme="light"] {
  --bg: #f4f6f5; --card: #ffffff; --text: #15201d; --muted: #64716d; --line: #e2e7e5;
  --brand: #0f766e; --brand-soft: #d6f0ec; --ok: #15803d; --ok-soft: #dcfce7;
  --warn: #b45309; --warn-soft: #fef3c7; --no: #b91c1c; --no-soft: #fee2e2;
  --key: #eef2f1; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04); color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0d1513; --card: #16211e; --text: #e7efec; --muted: #93a39e; --line: #26332f;
  --brand: #2dd4bf; --brand-soft: #123a35; --ok: #4ade80; --ok-soft: #12301f;
  --warn: #fbbf24; --warn-soft: #3a2d0e; --no: #f87171; --no-soft: #3b1414;
  --key: #1f2c29; --shadow: none; color-scheme: dark;
}
:root[data-theme="light"] .btn.primary, :root[data-theme="light"] .fab { color: #fff; }
:root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] .fab { color: #062420; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1100; padding: 10px 14px; transform: translateY(-160%); border-radius: 10px; background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--bg);
}
.brand-lockup { display: flex; min-width: 0; align-items: center; gap: 10px; }
.brand-lockup > img { display: block; width: 40px; height: 40px; flex: none; border-radius: 12px; box-shadow: 0 2px 8px rgba(15,118,110,.18); }
.brand-copy { display: grid; min-width: 0; line-height: 1.18; }
.brand-name { font-size: 16px; font-weight: 750; letter-spacing: -.35px; }
.brand-copy #title { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.app-lock { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.app-lock-card { width: min(100%, 380px); text-align: center; padding: 32px 24px; }
.app-lock-card h1 { font-size: 22px; margin: 0 0 8px; }
.app-lock-card p { margin: 0 0 18px; }
.lock-art { display: block; width: 152px; height: 152px; margin: 0 auto 14px; overflow: visible; color: var(--brand); }
.lock-art-orbit { fill: none; stroke: var(--brand); stroke-width: 1.4; stroke-dasharray: 3 7; opacity: .24; transform-box: view-box; transform-origin: center; }
.lock-art-orbit-inner { stroke-dasharray: none; stroke-width: 1; opacity: .12; }
.lock-art-chart, .lock-art-arrow { fill: none; stroke: var(--brand); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.lock-art-chart { stroke-dasharray: 150; stroke-dashoffset: 150; }
.lock-art-arrow { stroke-width: 6; stroke-dasharray: 60; stroke-dashoffset: 60; }
.lock-brand { margin: 0 0 8px !important; color: var(--brand); font-size: 13px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.app-lock:not([hidden]) .lock-art-orbit { animation: lock-orbit 12s linear infinite; }
.app-lock:not([hidden]) .lock-art-chart { animation: lock-chart-draw 1.25s .15s ease-out forwards; }
.app-lock:not([hidden]) .lock-art-arrow { animation: lock-chart-draw .45s 1s ease-out forwards; }
@keyframes lock-orbit { to { transform: rotate(360deg); } }
@keyframes lock-chart-draw { to { stroke-dashoffset: 0; } }
.lock-swipe-wrap { position: relative; height: 58px; margin-top: 22px; border-radius: 999px; }
.lock-swipe { --swipe-progress: 0%; position: absolute; inset: 0; z-index: 2; width: 100%; height: 58px; margin: 0; appearance: none; background: transparent; cursor: grab; touch-action: pan-y; }
.lock-swipe:active { cursor: grabbing; }
.lock-swipe::-webkit-slider-runnable-track { height: 58px; border: 1px solid var(--line); border-radius: 999px; background: linear-gradient(to right, var(--brand-soft) 0%, var(--brand-soft) var(--swipe-progress), var(--key) var(--swipe-progress), var(--key) 100%); }
.lock-swipe::-moz-range-track { height: 58px; border: 1px solid var(--line); border-radius: 999px; background: linear-gradient(to right, var(--brand-soft) 0%, var(--brand-soft) var(--swipe-progress), var(--key) var(--swipe-progress), var(--key) 100%); }
.lock-swipe::-webkit-slider-thumb { width: 48px; height: 48px; margin-top: 4px; appearance: none; border: 3px solid var(--card); border-radius: 50%; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / 22px 22px no-repeat; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.lock-swipe::-moz-range-thumb { width: 42px; height: 42px; border: 3px solid var(--card); border-radius: 50%; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / 22px 22px no-repeat; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.lock-swipe-hint { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 0 42px; color: var(--muted); font-size: 13px; pointer-events: none; transition: opacity .15s ease; }
.lock-swipe-wrap.is-moving .lock-swipe-hint { opacity: .25; }
.lock-swipe:disabled { cursor: wait; opacity: .7; }
@media (prefers-reduced-motion: reduce) {
  .app-lock:not([hidden]) .lock-art-orbit, .app-lock:not([hidden]) .lock-art-chart,
  .app-lock:not([hidden]) .lock-art-arrow { animation: none; }
  .lock-art-chart, .lock-art-arrow { stroke-dashoffset: 0; }
  .lock-swipe-hint { transition: none; }
}

main { max-width: 560px; margin: 0 auto; padding: 0 16px; }
.view { display: none; }
.view.active { display: block; }

.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 12px;
}
.card h2 { font-size: 15px; margin: 0 0 10px; color: var(--muted); font-weight: 600; }
.settings-section { margin: 22px 0 28px; }
.settings-section:first-child { margin-top: 0; }
.settings-section-title { margin: 0 0 10px; padding: 0 2px; color: var(--text); font-size: 16px; font-weight: 700; }
.stats-date-range { margin-top: 8px; }
.stats-date-range .field { flex: 1; min-width: 0; }
.budget-card-heading { display: flex; align-items: center; justify-content: space-between; margin: -8px -8px 2px 0; }
.budget-card-heading .icon { padding: 8px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.big { font-size: 34px; font-weight: 700; letter-spacing: -.5px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ok { color: var(--ok); } .warn { color: var(--warn); } .no { color: var(--no); }

.bar { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; display: flex; margin: 10px 0 6px; }
.bar > i { display: block; height: 100%; }
.bar .spent { background: var(--c, var(--brand)); }
.bar .reserved { background: repeating-linear-gradient(45deg, var(--warn), var(--warn) 4px, transparent 4px, transparent 8px); opacity: .7; }
.bar.over .spent { background: var(--no); }
.bar.thin { height: 6px; margin: 6px 0 2px; }

.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; background: var(--c); }

.alert { border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px; display: flex; gap: 8px; align-items: flex-start; }
.alert .ic { flex: none; margin-top: 1px; }
.alert.warn { background: var(--warn-soft); color: var(--warn); }
.alert.no { background: var(--no-soft); color: var(--no); }
.alert.ok { background: var(--ok-soft); color: var(--ok); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 12px; padding: 12px 16px; font-weight: 600;
  background: var(--key);
}
.btn.primary { background: var(--brand); color: #fff; }
@media (prefers-color-scheme: dark) { .btn.primary { color: #062420; } }
.btn.danger { background: var(--no-soft); color: var(--no); }
.btn.block { width: 100%; }
.auth-toggle { margin-top: 8px; }
.auth-forgot { display: flex; margin: 8px auto 0; }
.app-lock-switch { display: inline-flex; align-items: center; gap: 10px; border: 0; padding: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.switch-track { width: 46px; height: 28px; padding: 3px; border-radius: 99px; background: var(--line); transition: background .18s ease; }
.app-lock-switch[aria-checked="true"] .switch-track { background: var(--brand); }
.switch-thumb { display: block; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease; }
.app-lock-switch[aria-checked="true"] .switch-thumb { transform: translateX(18px); }
.app-lock-switch:disabled { opacity: .6; cursor: wait; }
.btn.ask { width: 100%; padding: 16px; font-size: 17px; margin-bottom: 12px; background: var(--brand-soft); color: var(--brand); }
.btn.sm { padding: 6px 10px; font-size: 13px; border-radius: 9px; }
.icon { border: 0; background: transparent; padding: 8px 12px; line-height: 0; }
.icon .ic { width: 22px; height: 22px; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 0; }
.list .grow div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list li.tap { cursor: pointer; }
.day-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin: 14px 4px 4px; text-transform: capitalize; }

.monthnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.monthnav strong { text-transform: capitalize; }

.input {
  width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font: inherit; margin-bottom: 10px;
}
.input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.setting-choice + .setting-choice { margin-top: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 520px) { .grid3 { grid-template-columns: 1fr; } }
.select-wrap { position: relative; margin-bottom: 10px; }
.setting-choice .select-wrap { margin-bottom: 0; }
.row > .select-wrap { flex: 1; min-width: 0; }
.select-wrap.compact { width: 120px; flex: none; margin: 0; }
.select-wrap::after {
  content: ""; position: absolute; right: 16px; top: 15px; width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); pointer-events: none; transition: transform .16s ease, border-color .16s ease;
}
.select-wrap:focus-within::after { border-color: var(--brand); transform: translateY(4px) rotate(225deg); }
.custom-select { appearance: none; -webkit-appearance: none; margin: 0; padding-right: 44px; background-color: var(--key); border-color: transparent; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }
.custom-select:hover { background-color: var(--brand-soft); }
.custom-select:focus { border-color: var(--brand); }
.custom-select option { background: var(--card); color: var(--text); }
.admin-act { width: 100%; max-width: none; padding: 6px 28px 6px 8px; font-size: 13px; }
label.field { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.row { display: flex; gap: 8px; }
.row .date { width: 150px; flex: none; }
.grid2 { display: grid; grid-template-columns: 1fr 120px; gap: 8px; align-items: center; }
.grid2 .input { margin: 0; }

/* Barre d'onglets */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar button { border: 0; background: none; padding: 10px 0 12px; font-size: 11px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tabbar button .ic { width: 22px; height: 22px; }
.tabbar button.active { color: var(--brand); font-weight: 600; }

.fab {
  position: fixed; right: 18px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 11;
  width: 58px; height: 58px; border-radius: 50%; border: 0;
  background: var(--brand); color: #fff; display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
@media (prefers-color-scheme: dark) { .fab { color: #062420; } }

/* Feuille modale */
.sheet {
  border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 560px;
  max-height: 100dvh; border-radius: 18px 18px 0 0;
  background: var(--card); color: var(--text);
}
.sheet::backdrop { background: rgba(0,0,0,.45); }
.sheet form { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.amount { text-align: center; margin: 4px 0 8px; }
.amount-expr { min-height: 18px; font-size: 14px; color: var(--muted); word-break: break-all; }
.amount-total { font-size: 38px; font-weight: 700; font-variant-numeric: tabular-nums; }
.verdict { border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.verdict b { display: block; font-size: 16px; margin-bottom: 2px; }
.verdict.yes { background: var(--ok-soft); color: var(--ok); }
.verdict.warn { background: var(--warn-soft); color: var(--warn); }
.verdict.no { background: var(--no-soft); color: var(--no); }
.verdict.info { background: var(--key); color: var(--muted); }

.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1px solid var(--line); background: var(--card); border-radius: 99px; padding: 7px 12px; font-size: 14px; white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; }
.chip .ic { color: var(--c); }
.chip.sel { background: var(--c); border-color: var(--c); color: #fff; }
.chip.sel .ic { color: #fff; }

.keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 10px; }
.keypad button { border: 0; border-radius: 10px; background: var(--key); padding: 13px 0; font-size: 21px; font-weight: 500; }
.keypad button:active { filter: brightness(.9); }
.keypad .alt { color: var(--brand); }
.keypad .span2 { grid-column: span 2; }
.sheet-actions { display: flex; gap: 8px; }
.sheet-actions .primary { flex: 1; }

/* Graphique mensuel */
.chart { display: flex; align-items: flex-end; gap: 6px; height: 130px; position: relative; border-bottom: 1px solid var(--line); }
.chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.chart-labels { display: flex; gap: 6px; margin-top: 4px; }
.chart-labels small { flex: 1; text-align: center; font-size: 11px; color: var(--muted); }
.chart .col i { display: block; width: 100%; max-width: 34px; border-radius: 6px 6px 0 0; background: var(--brand); min-height: 2px; }
.chart .col i.over { background: var(--no); }
.chart .col i.cur { opacity: .55; }
.chart .col small { font-size: 11px; color: var(--muted); }
.chart .line { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--warn); }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 50;
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: 14px; max-width: 90vw;
}
.empty { text-align: center; color: var(--muted); padding: 28px 8px; }
.kv { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; }

/* Icônes (Lucide) */
.ic {
  width: 18px; height: 18px; flex: none; vertical-align: -3px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ic.lg { width: 22px; height: 22px; margin-top: 1px; }
.fab .ic { width: 28px; height: 28px; }
.keypad .ic { width: 24px; height: 24px; vertical-align: middle; }
.cic {
  flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent);
}
.cic .ic { width: 19px; height: 19px; }
.cic.sm { width: 26px; height: 26px; border-radius: 8px; }
.cic.sm .ic { width: 15px; height: 15px; }
.lbl { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.perday { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; }
.card h2 { display: flex; align-items: center; gap: 6px; }
.search { position: relative; }
.search .ic { position: absolute; left: 11px; top: 13px; color: var(--muted); }
.search .input { padding-left: 36px; }

.sync {
  display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 99px;
  padding: 5px 10px; font-size: 12px; background: var(--key); color: var(--muted);
}
.sync.ok { color: var(--ok); }
.sync.warn { background: var(--warn-soft); color: var(--warn); }
.sync.no { background: var(--no-soft); color: var(--no); }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.icon-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; margin-bottom: 10px; }
.icon-pick button { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 9px 0; line-height: 0; color: var(--muted); }
.icon-pick button.sel { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.btn:disabled { opacity: .6; }
.row.wrap { flex-wrap: wrap; }
details.more { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
details.more summary { cursor: pointer; color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.tagx { font-size: 11px; padding: 1px 6px; border-radius: 99px; background: var(--brand-soft); color: var(--brand); }
.tagx.no { background: var(--no-soft); color: var(--no); }
#invite-out .input { margin: 6px 0; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}