/* Carnet de cadeaux — shared look.
   Accent family follows the event kind: fir & gold for Noël, berry & apricot for birthdays, slate for other parties. */
:root{
  --bg:#f6f7f5; --surface:#ffffff; --fg:#18211c; --muted:#5f6a64; --line:#dde3df;
  --acc:#1d5a3e; --acc-soft:#e4efe8; --acc-ink:#ffffff;
  --gold:#a5700c; --gold-soft:#fbf0d9;
  --red:#b2362b; --red-soft:#f9e4e1;
  --f-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --f-num:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
body[data-kind="anniv"]{ --acc:#8c2c5f; --acc-soft:#f6e5ee; --gold:#b4561b; --gold-soft:#fcebdc }
body[data-kind="autre"]{ --acc:#2f4f7a; --acc-soft:#e5ecf5; --gold:#8a6a12; --gold-soft:#f6efd9 }
@media (prefers-color-scheme: dark){
  :root{ --bg:#0f1512; --surface:#161e1a; --fg:#e5ebe7; --muted:#99a59f; --line:#2a3530;
    --acc:#72c69c; --acc-soft:#1b2f25; --acc-ink:#0f1512; --gold:#e4b14f; --gold-soft:#33280f; --red:#ef8a7e; --red-soft:#3a1d1a; color-scheme:dark }
  body[data-kind="anniv"]{ --acc:#eb9cc6; --acc-soft:#36182a; --gold:#f2a26b; --gold-soft:#3a2312 }
  body[data-kind="autre"]{ --acc:#93b4e3; --acc-soft:#1b2638; --gold:#dcc06a; --gold-soft:#302a12 }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.5}
.wrap{max-width:1100px;margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:16px 64px;display:flex;flex-direction:column;gap:26px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;letter-spacing:-.015em}
h2{font-size:1.3rem;font-weight:700}
a{color:var(--acc)}
.eyebrow{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--acc);font-weight:700}
.hint{font-size:.83rem;color:var(--muted);margin:0}
.sec{display:flex;flex-direction:column;gap:14px}
.sec-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;justify-content:space-between}

label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--muted);font-weight:700;min-width:0}
input[type=text],input[type=search],input[type=number],input[type=url],input[type=date],input[type=password],select,textarea{font:inherit;font-size:1rem;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 11px;width:100%}
textarea{resize:vertical;min-height:70px}
input:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
button{font:inherit;font-weight:700;cursor:pointer;border-radius:9px;border:1px solid transparent;padding:9px 15px}
.btn-main{background:var(--acc);color:var(--acc-ink)}
.btn-main:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--acc);color:var(--acc)}
.btn-small{padding:5px 10px;font-size:.82rem}
.btn-danger:hover,.armed{color:var(--red)!important;border-color:var(--red)!important}
button:disabled{opacity:.5;cursor:default}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--acc)}
.radio{flex-direction:row;align-items:center;gap:6px;font-weight:400;color:var(--fg);font-size:.92rem;cursor:pointer}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
.empty{color:var(--muted);font-size:.93rem;padding:18px;border:1px dashed var(--line);border-radius:14px;background:var(--surface)}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;background:var(--bg);white-space:nowrap}
tr:last-child td{border-bottom:none}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.chip{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:99px;white-space:nowrap;background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.chip.ok{background:var(--acc-soft);color:var(--acc);border-color:transparent}
.chip.busy{background:var(--gold-soft);color:var(--gold);border-color:transparent}
.chip.ko,.chip.promo{background:var(--red-soft);color:var(--red);border-color:transparent}
.chip.win{background:var(--gold);color:var(--surface);border-color:transparent}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:.92rem;max-width:calc(100% - 32px);z-index:50;box-shadow:0 6px 24px rgba(0,0,0,.18)}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:1.15rem}
.brand svg{width:28px;height:28px;flex:none}

/* centered cards (login / setup) */
.center{min-height:100vh;display:grid;place-items:center;padding:24px max(16px, env(safe-area-inset-left, 0px))}
.card{width:min(440px,100%);background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:repeating-linear-gradient(90deg,var(--acc) 0 22px,var(--gold) 22px 30px)}
.card h1{font-size:1.8rem;font-weight:800}
.err{color:var(--red);font-size:.9rem;margin:0}
@media (prefers-reduced-motion:no-preference){ .fade{animation:fade .35s ease both} @keyframes fade{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}} }