:root{
  --bg:#f4f1ea; --card:#fffdf8; --ink:#2f3b36; --soft:#7d8a83;
  --green:#5b8a72; --green-d:#4a7460; --warn:#c58a5b; --line:#e6e1d6;
  --accent:#e8f0ea; --radius:18px; --shadow:0 2px 14px rgba(60,70,60,.06);
}
@media (prefers-color-scheme: dark){
  :root{--bg:#1c211e; --card:#252b27; --ink:#e7ece8; --soft:#98a49d;
        --accent:#2c352f; --line:#333b36; --shadow:0 2px 16px rgba(0,0,0,.3);}
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.5;
  padding-bottom:74px;-webkit-tap-highlight-color:transparent}
header{display:flex;justify-content:space-between;align-items:center;
  padding:16px 18px 8px;position:sticky;top:0;background:var(--bg);z-index:5}
.brand{font-weight:700;font-size:1.35rem;color:var(--green)}
.brand span{display:block;font-size:.72rem;font-weight:400;color:var(--soft)}
.streak{font-size:.85rem;color:var(--warn);font-weight:600}
main{padding:6px 14px 20px;max-width:640px;margin:0 auto}
.tab{display:none}.tab.active{display:block;animation:fade .25s}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin:12px 0;box-shadow:var(--shadow)}
.card-head{display:flex;justify-content:space-between;align-items:center}
h2{font-size:1.05rem;margin:0 0 4px}h3{margin:0 0 12px}
.hint{color:var(--soft);font-size:.86rem;margin:6px 0}
.hero{text-align:center;background:linear-gradient(160deg,var(--accent),var(--card))}
.mood{font-size:1.05rem;margin:4px 0 16px}
button{font:inherit;cursor:pointer;border:none;border-radius:12px;padding:11px 16px;
  background:var(--accent);color:var(--ink);transition:transform .08s,filter .15s}
button:active{transform:scale(.97)}
.primary{background:var(--green);color:#fff}.primary:hover{background:var(--green-d)}
.warn{background:var(--warn);color:#fff}
.ghost{background:transparent;border:1px solid var(--line);color:var(--soft)}
.big{width:100%;padding:16px;font-size:1.05rem;font-weight:600}
.row{display:flex;gap:8px;align-items:center;margin-top:10px}
.row input{flex:1}
input[type=text],input:not([type]){width:100%;padding:12px;border:1px solid var(--line);
  border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;margin-top:8px}
.zones{list-style:none;padding:0;margin:10px 0 0}
.zones li{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);
  border-radius:12px;margin-bottom:8px;background:var(--bg)}
.zones li.secu{border-color:var(--warn);background:linear-gradient(90deg,rgba(197,138,91,.09),transparent)}
.zones li.fait{opacity:.55}
.z-nom{font-weight:600;flex:1}.z-nom small{display:block;font-weight:400;color:var(--soft)}
.z-go{background:var(--green);color:#fff;padding:8px 14px;font-size:.85rem}
.z-del{background:transparent;color:var(--soft);padding:6px 8px}
.safety{border-color:var(--warn)}
.timer{font-size:3rem;font-weight:700;text-align:center;color:var(--green);font-variant-numeric:tabular-nums}
.session-head{text-align:center}
.tree{margin-top:12px}
.tree .q{font-size:1rem;margin:14px 0 8px;font-weight:500}
.tree .opts{display:flex;gap:8px}.tree .opts button{flex:1}
.verdict{margin-top:14px;padding:14px;border-radius:12px;background:var(--accent);
  border:1px solid var(--line)}
.verdict .label{font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.05em}
.decisions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.decisions button{flex:1;min-width:80px;font-size:.85rem}
.count{margin-top:12px;color:var(--soft);font-size:.85rem;text-align:center}
.chat{min-height:180px;max-height:46vh;overflow-y:auto;padding:6px 2px;display:flex;flex-direction:column;gap:8px}
.bubble{max-width:82%;padding:10px 13px;border-radius:14px;font-size:.92rem;white-space:pre-wrap}
.bubble.me{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:4px}
.bubble.cap{align-self:flex-start;background:var(--accent);border-bottom-left-radius:4px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{font-size:.8rem;background:var(--bg);border:1px solid var(--line);color:var(--soft);padding:7px 11px}
.badge{font-size:.65rem;padding:3px 8px;border-radius:20px;background:var(--accent);color:var(--soft);vertical-align:middle}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:8px 0}
.stat{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.stat b{display:block;font-size:1.7rem;color:var(--green)}
.stat span{font-size:.78rem;color:var(--soft)}
.journal{list-style:none;padding:0;margin:12px 0 0}
.journal li{padding:10px 12px;border-left:3px solid var(--green);background:var(--bg);
  border-radius:0 10px 10px 0;margin-bottom:8px;font-size:.9rem}
.journal li small{display:block;color:var(--soft);font-size:.72rem}
.tabbar{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--card);
  border-top:1px solid var(--line);padding:6px env(safe-area-inset-right) calc(6px + env(safe-area-inset-bottom)) env(safe-area-inset-left)}
.tabbar button{flex:1;background:transparent;color:var(--soft);font-size:.8rem;padding:8px 4px;border-radius:8px}
.tabbar button.active{color:var(--green);font-weight:600;background:var(--accent)}
dialog{border:none;border-radius:var(--radius);padding:22px;max-width:400px;width:92%;
  background:var(--card);color:var(--ink);box-shadow:0 10px 40px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(30,35,30,.4)}
.check{display:flex;align-items:center;gap:8px;margin:12px 0;font-size:.9rem;color:var(--soft)}
.check input{width:auto}
.mood-pick{display:flex;gap:6px;margin:12px 0}
.mood-pick button{flex:1;font-size:.78rem;padding:12px 4px}
.mood-pick button.sel{background:var(--green);color:#fff}