:root{
  --bg:#0B0D10; --surface:#14181E; --surface-2:#1B2028; --surface-3:#232933;
  --line:#272E38; --line-soft:#1F252E;
  --ink:#F3F5F8; --ink-2:#B7C0CB; --muted:#78838F;
  --accent:#FFC53D; --accent-ink:#12151A; --accent-dim:rgba(255,197,61,.14);
  --ice:#7FD1E8; --ice-dim:rgba(127,209,232,.13);
  --good:#3FB27F; --good-dim:rgba(63,178,127,.14);
  --hot:#F06A52; --hot-dim:rgba(240,106,82,.13);
  --lift:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -28px rgba(0,0,0,.9);
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#EEF0F4; --surface:#FFFFFF; --surface-2:#F4F6F9; --surface-3:#EAEEF3;
    --line:#DFE4EB; --line-soft:#EAEEF3;
    --ink:#12151A; --ink-2:#414A56; --muted:#6E7885;
    --accent:#F6BE1E; --accent-ink:#12151A; --accent-dim:rgba(246,190,30,.20);
    --ice:#2C7A96; --ice-dim:rgba(44,122,150,.10);
    --good:#2E8C61; --good-dim:rgba(46,140,97,.11);
    --hot:#CE4B34; --hot-dim:rgba(206,75,52,.10);
    --lift:0 1px 2px rgba(18,21,26,.05), 0 18px 40px -30px rgba(18,21,26,.45);
    color-scheme:light;
  }
}
*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.5;
     -webkit-font-smoothing:antialiased;}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.02em}
h1{font-size:24px} h2{font-size:19px} h3{font-size:16px}
a{color:var(--ice)}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.eyebrow{text-transform:uppercase; letter-spacing:.13em; font-size:10.5px; font-weight:700; color:var(--muted)}
.page{max-width:520px; margin:0 auto; padding:14px 13px 96px; display:flex; flex-direction:column; gap:11px}
.muted{color:var(--muted)} .small{font-size:12.5px}
.row{display:flex; align-items:center; gap:10px}
.row.wrap{flex-wrap:wrap}
.spread{display:flex; align-items:center; justify-content:space-between; gap:10px}
.grow{flex:1; min-width:0}
.card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:15px; box-shadow:var(--lift)}
.card.flat{box-shadow:none}
.tile{background:var(--surface-2); border-radius:13px; padding:10px 12px}
.stack{display:flex; flex-direction:column; gap:9px}
button{font:inherit; cursor:pointer}
.btn{border:0; border-radius:13px; padding:11px 14px; font-weight:700; font-size:14.5px}
.btn.block{width:100%}
.btn.accent{background:var(--accent); color:var(--accent-ink)}
.btn.soft{background:var(--surface-2); color:var(--ink); border:1px solid var(--line)}
.btn.dark{background:var(--ink); color:var(--bg)}
.btn.ghost{background:none; border:1px dashed var(--line); color:var(--muted); font-weight:600}
.btn.ghost:hover{color:var(--ink); border-color:var(--accent)}
.btn.mini{padding:6px 10px; font-size:12px; border-radius:9px}
.btn:disabled{opacity:.5; cursor:default}
.btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--ice); outline-offset:2px}
input,textarea,select{width:100%; border:1px solid var(--line); border-radius:12px; background:var(--surface-2);
  color:var(--ink); font:inherit; font-size:15px; padding:10px 12px; resize:vertical}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--accent); background:var(--surface)}
input::placeholder,textarea::placeholder{color:var(--muted)}
label.field{display:block; margin-bottom:9px}
label.field>span{display:block; margin-bottom:5px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.three{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.avatar{width:38px; height:38px; flex:none; border-radius:13px; background:var(--surface-3); color:var(--ice);
  display:grid; place-items:center; font-weight:700; font-size:14px; position:relative}
.avatar.on{background:var(--accent); color:var(--accent-ink)}
.dot{position:absolute; right:-2px; bottom:-2px; width:11px; height:11px; border-radius:99px;
  background:var(--good); border:2px solid var(--surface)}
.chip{font-size:11.5px; padding:4px 9px; border-radius:9px; background:var(--surface-2); color:var(--muted);
  border:1px solid var(--line-soft); white-space:nowrap}
.chip.ok{color:var(--good); border-color:var(--good)}
.chip.warn{color:var(--hot); border-color:var(--hot)}
.chip.acc{background:var(--accent-dim); color:var(--ink); border-color:var(--accent)}
.tabs{display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:4px}
.tabs button{flex:1; border:0; background:none; color:var(--muted); border-radius:10px; padding:9px 6px;
  font-size:13px; font-weight:600}
.tabs button[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--lift)}
.listitem{display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:var(--surface);
  border:1px solid var(--line); border-radius:16px; padding:12px 13px; color:inherit}
.listitem:hover{border-color:var(--accent)}
.nav{position:fixed; left:0; right:0; bottom:0; background:var(--surface); border-top:1px solid var(--line);
  padding:7px 8px calc(7px + env(safe-area-inset-bottom)); z-index:5}
.nav-in{max-width:520px; margin:0 auto; display:flex; gap:4px}
.nav button{flex:1; border:0; background:none; color:var(--muted); border-radius:11px; padding:7px 4px;
  font-size:11px; font-weight:600; display:flex; flex-direction:column; align-items:center; gap:3px}
.nav button[aria-current="page"]{color:var(--ink); background:var(--surface-2)}
.nav .ic{font-size:16px; line-height:1}
.nav .badge{position:absolute; transform:translate(14px,-4px); background:var(--hot); color:#fff;
  border-radius:99px; font-size:9.5px; padding:1px 5px; font-weight:700}
.topbar{display:flex; align-items:center; gap:10px; padding:2px 2px 0}
.back{border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2); border-radius:11px;
  width:34px; height:34px; flex:none; font-size:15px}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:78px; z-index:40; background:var(--ink);
  color:var(--bg); border-radius:12px; padding:10px 16px; font-size:13.5px; font-weight:700; box-shadow:var(--lift)}
.sheet-bg{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:20}
.sheet{position:fixed; left:0; right:0; bottom:0; z-index:21; background:var(--surface); border-top:1px solid var(--line);
  border-radius:22px 22px 0 0; padding:8px 14px 22px; max-height:84vh; overflow:auto}
.sheet-in{max-width:520px; margin:0 auto}
.grip{width:36px; height:4px; border-radius:99px; background:var(--line); margin:6px auto 13px}
.set{display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid transparent;
  border-radius:14px; padding:8px 9px 8px 11px}
.set.ok{background:transparent; border-color:var(--line-soft)}
.set .n{font-family:var(--mono); font-size:11px; color:var(--muted); width:13px; flex:none}
.num{flex:1; display:flex; align-items:baseline; gap:5px; min-width:0}
.num input{border:0; background:none; padding:2px 0; border-bottom:2px solid var(--line); border-radius:0;
  font-weight:700; font-size:21px; text-align:left}
.num input:focus{border-bottom-color:var(--accent)}
.num .u{font-size:11px; color:var(--muted); flex:none}
.tick{width:38px; height:38px; flex:none; border-radius:12px; border:1px solid var(--line);
  background:var(--surface-3); color:var(--muted); font-size:15px}
.tick[aria-pressed="true"]{background:var(--good); border-color:var(--good); color:#fff}
.rpe{display:grid; grid-template-columns:repeat(10,1fr); gap:4px}
.rpe button{aspect-ratio:1; border:1px solid var(--line); border-radius:10px; background:var(--surface-2);
  color:var(--ink-2); font-family:var(--mono); font-size:12px; padding:0}
.rpe button[aria-pressed="true"]{border-color:transparent; color:#fff; font-weight:700}
.rpe button[aria-pressed="true"][data-z="1"]{background:var(--good)}
.rpe button[aria-pressed="true"][data-z="2"]{background:var(--accent); color:var(--accent-ink)}
.rpe button[aria-pressed="true"][data-z="3"]{background:var(--hot)}
.msg{max-width:80%; padding:9px 12px; border-radius:15px; font-size:14px}
.msg.me{align-self:flex-end; background:var(--accent); color:var(--accent-ink); border-bottom-right-radius:5px}
.msg.them{align-self:flex-start; background:var(--surface-2); border-bottom-left-radius:5px}
.msg .t{display:block; font-size:10.5px; opacity:.7; margin-top:3px}
.priv{background:var(--hot-dim); border-left:2px dashed var(--hot); border-radius:10px; padding:8px 10px; font-size:13px}
.shared{background:var(--ice-dim); border-left:2px solid var(--ice); border-radius:10px; padding:8px 10px; font-size:13px}
.spark svg{display:block; width:100%; height:auto; overflow:visible}
.err{background:var(--hot-dim); color:var(--hot); border-radius:12px; padding:10px 12px; font-size:13.5px; font-weight:600}
.center{min-height:70vh; display:flex; flex-direction:column; justify-content:center}
.link{background:none; border:0; color:var(--ice); font-weight:600; padding:6px 2px}
.code-box{display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; padding:10px 11px}
.code-box code{flex:1; min-width:0; font-family:var(--mono); font-size:12px; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.semaine{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.jour{display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 2px 5px;
  border:1px solid transparent; border-radius:12px; background:var(--surface-2); color:var(--ink-2)}
.jour .j{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.jour .n{font-weight:700; font-size:15px; font-variant-numeric:tabular-nums}
.jour .pts{display:flex; gap:2px; height:5px; align-items:center}
.jour .pts i{width:4px; height:4px; border-radius:99px; background:var(--accent); display:block}
.jour.today{border-color:var(--line); color:var(--ink)}
.jour.on{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.jour.on .j{color:var(--accent-ink); opacity:.7}
.jour.on .pts i{background:var(--accent-ink)}
.creneau{flex:none; width:52px; text-align:center; font-variant-numeric:tabular-nums;
  font-weight:700; font-size:14px; line-height:1.15}
.creneau span{display:block; font-size:10.5px; font-weight:500; color:var(--muted)}
.actionbar{position:fixed; left:0; right:0; bottom:calc(58px + env(safe-area-inset-bottom));
  background:var(--surface); border-top:1px solid var(--line); padding:9px 14px; z-index:6}
.page.avec-barre{padding-bottom:172px}