/* Exgen — design 2026, aux couleurs du logo : crème, pêche et corail, vert sauge, noir encre.
   Fond ambiant lié à l'humeur, verre dépoli, police arrondie du système, capsules, coins concentriques. */
@property --a1 { syntax: '<color>'; inherits: true; initial-value: #FAD9C4; }
@property --a2 { syntax: '<color>'; inherits: true; initial-value: #FDEBD8; }
@property --a3 { syntax: '<color>'; inherits: true; initial-value: #CFDED3; }

:root {
  --bg: #FBF5EC; --ink: #23242A; --muted: #5C5A58; --line: rgba(35,36,42,.10);
  --glass: rgba(255,252,247,.66); --glass-strong: rgba(255,253,250,.90); --glass-line: rgba(255,255,255,.85); --sheet: rgba(252,247,240,.95);
  --accent: #E8714A; --accent-ink: #AE4822; --primary: #23242A; --on-primary: #FFF8F0; --sage: #6F8D7E;
  --soft: rgba(232,113,74,.12); --soft2: rgba(232,113,74,.24); --chip: rgba(35,36,42,.06); --warm-soft: rgba(240,170,70,.20); --warm: #7A4D00; --danger: #B42318;
  --shadow: 0 1px 1px rgba(60,40,20,.05), 0 10px 30px rgba(90,60,30,.10); --btn-shadow: rgba(35,36,42,.26);
  --a1: #FAD9C4; --a2: #FDEBD8; --a3: #CFDED3;
  --ambient: radial-gradient(120% 62% at 0% 0%, var(--a1), transparent 62%), radial-gradient(90% 55% at 100% 6%, var(--a2), transparent 64%), radial-gradient(110% 50% at 50% 104%, var(--a3), transparent 66%);
  --display: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", system-ui, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --tabs: 84px; --r: 28px; --r-in: 16px;
}
/* humeur du jour : la couleur d'ambiance, toujours douce (jamais de rouge, jamais d'alerte) */
html[data-mood="1"] { --a1: #E6E0DA; --a2: #EFEAE5; --a3: #DCE3E6; }
html[data-mood="2"] { --a1: #F9DDCB; --a2: #FBE8DA; --a3: #F0DFD8; }
html[data-mood="3"] { --a1: #FAD9C4; --a2: #FDEBD8; --a3: #E7E6D4; }
html[data-mood="4"] { --a1: #FBCFA9; --a2: #FDE2C4; --a3: #F7D6C2; }
html[data-mood="5"] { --a1: #FFB88A; --a2: #FFD0A8; --a3: #FFC9B0; }
html { transition: --a1 1.4s ease, --a2 1.4s ease, --a3 1.4s ease; background: var(--bg); }

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #15120F; --ink: #F6EEE4; --muted: #B5ABA0; --line: rgba(255,255,255,.12);
  --glass: rgba(38,31,26,.62); --glass-strong: rgba(44,36,30,.90); --glass-line: rgba(255,255,255,.08); --sheet: rgba(28,23,19,.95);
  --accent: #FF9A74; --accent-ink: #FFB394; --primary: #F6EBDD; --on-primary: #241A12; --sage: #9DB8A9;
  --soft: rgba(255,154,116,.16); --soft2: rgba(255,154,116,.28); --chip: rgba(255,255,255,.08); --warm-soft: rgba(240,170,70,.18); --warm: #F0BE74; --danger: #FF8F80;
  --shadow: 0 10px 30px rgba(0,0,0,.38); --btn-shadow: rgba(0,0,0,.4);
  --a1: #4B2C1F; --a2: #3B2A22; --a3: #1F3A31; }
  :root:not([data-theme="light"])[data-mood="1"] { --a1: #2A2724; --a2: #2F2B2A; --a3: #22292B; }
  :root:not([data-theme="light"])[data-mood="2"] { --a1: #4A2E22; --a2: #3E2A24; --a3: #2B2F36; }
  :root:not([data-theme="light"])[data-mood="3"] { --a1: #5A3622; --a2: #46302A; --a3: #2C3A30; }
  :root:not([data-theme="light"])[data-mood="4"] { --a1: #6A3E1E; --a2: #55361F; --a3: #4A3226; }
  :root:not([data-theme="light"])[data-mood="5"] { --a1: #7A3F18; --a2: #6A3420; --a3: #5A2E24; }
}
:root[data-theme="dark"] {
  --bg: #15120F; --ink: #F6EEE4; --muted: #B5ABA0; --line: rgba(255,255,255,.12);
  --glass: rgba(38,31,26,.62); --glass-strong: rgba(44,36,30,.90); --glass-line: rgba(255,255,255,.08); --sheet: rgba(28,23,19,.95);
  --accent: #FF9A74; --accent-ink: #FFB394; --primary: #F6EBDD; --on-primary: #241A12; --sage: #9DB8A9;
  --soft: rgba(255,154,116,.16); --soft2: rgba(255,154,116,.28); --chip: rgba(255,255,255,.08); --warm-soft: rgba(240,170,70,.18); --warm: #F0BE74; --danger: #FF8F80;
  --shadow: 0 10px 30px rgba(0,0,0,.38); --btn-shadow: rgba(0,0,0,.4);
  --a1: #4B2C1F; --a2: #3B2A22; --a3: #1F3A31; }
:root[data-theme="dark"][data-mood="1"] { --a1: #2A2724; --a2: #2F2B2A; --a3: #22292B; }
:root[data-theme="dark"][data-mood="2"] { --a1: #4A2E22; --a2: #3E2A24; --a3: #2B2F36; }
:root[data-theme="dark"][data-mood="3"] { --a1: #5A3622; --a2: #46302A; --a3: #2C3A30; }
  :root[data-theme="dark"][data-mood="4"] { --a1: #6A3E1E; --a2: #55361F; --a3: #4A3226; }
:root[data-theme="dark"][data-mood="5"] { --a1: #7A3F18; --a2: #6A3420; --a3: #5A2E24; }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:17px/1.5 var(--sans);-webkit-font-smoothing:antialiased;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--ambient),var(--bg)}
body.lock{overflow:hidden}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.12;margin:0;letter-spacing:-.02em}
h1{font-size:34px}h2{font-size:25px}h3{font-size:20px;letter-spacing:-.01em}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

#app{max-width:560px;margin:0 auto;min-height:100vh;min-height:100dvh}
#view{padding:calc(env(safe-area-inset-top) + 24px) 20px calc(var(--tabs) + env(safe-area-inset-bottom) + 84px)}
.stack>*+*{margin-top:16px}
.stack-lg>*+*{margin-top:24px}
.muted{color:var(--muted)}
.small{font-size:15px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.center{text-align:center}

/* verre dépoli */
.card,#tabs,.seg,.chip,.btn,.tile,.sheet,.ibtn .circ,#sos,#update,input[type=text],input[type=number],input[type=date],input[type=time],select,textarea{
  -webkit-backdrop-filter:blur(22px) saturate(165%);backdrop-filter:blur(22px) saturate(165%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass:rgba(255,255,255,.94);--sheet:#F6F7FC}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glass:rgba(26,30,46,.97);--sheet:#121521}}
}

/* navigation : capsule flottante */
#tabs{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));width:calc(100% - 32px);max-width:420px;height:66px;padding:6px;gap:2px;
  display:flex;background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:999px;box-shadow:var(--shadow);z-index:20}
#tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--muted);font-size:11px;font-weight:600;border-radius:999px;transition:background .2s,color .2s}
#tabs svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#tabs a[aria-current="page"]{color:var(--accent-ink);background:var(--soft)}
#tabs a[aria-current="page"] svg{fill:currentColor;fill-opacity:.16}
#sos{position:fixed;right:max(16px,calc(50% - 264px));bottom:calc(var(--tabs) + env(safe-area-inset-bottom) + 6px);z-index:19;display:flex;align-items:center;gap:8px;
  border:1px solid var(--glass-line);background:var(--glass-strong);color:var(--ink);border-radius:999px;min-height:44px;padding:0 16px;font-size:15px;font-weight:600;box-shadow:var(--shadow)}
#sos .ic{width:20px;height:20px;color:var(--accent-ink)}
#sos[hidden]{display:none}

/* cartes et lignes : coins concentriques (28 → 16) */
.card{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.card.soft{background:var(--soft);border-color:transparent;box-shadow:none}
.card.warm{background:var(--warm-soft);border-color:transparent;box-shadow:none}
.card h3{margin-top:6px}
.card .why{margin-top:8px;color:var(--muted);font-size:15px}
.actions{margin-top:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.eyebrow{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--muted)}
.eyebrow .ic{width:20px;height:20px;color:var(--accent-ink)}
.row{display:flex;align-items:center;gap:12px;padding:8px 0}
.row+.row{border-top:1px solid var(--line)}
.row-main{flex:1;text-align:left;background:none;border:0;padding:6px 0;min-height:44px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.row-main small{color:var(--muted);font-size:14px}
.meta{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:14px}
.meta .ic{width:16px;height:16px}
.check{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--muted);background:none;padding:0;position:relative;display:block}
.check.on{background:var(--accent);border-color:var(--accent)}
.check.on::after{content:"";position:absolute;left:8px;top:3px;width:7px;height:13px;border:solid var(--on-primary);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.check-wrap{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;margin:-8px 0 -8px -8px}
.done-text{text-decoration:line-through;color:var(--muted)}
.group .gsec+.gsec{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

/* boutons : capsules, 52 de haut, un seul primaire par écran */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass-strong);
  font-weight:600;text-decoration:none;color:var(--ink);transition:transform .15s ease,opacity .15s}
.btn:active,.chip:active,.tile:active,.ibtn:active .circ{transform:scale(.97)}
.btn.primary{background:var(--primary);border-color:transparent;color:var(--on-primary);box-shadow:0 8px 20px var(--btn-shadow)}
.btn.block{display:flex;width:100%}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.danger{color:var(--danger)}
.btn:disabled{opacity:.45}
.btn .ic{width:20px;height:20px}
.link{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--accent-ink);font-weight:600;padding:10px 4px;min-height:44px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass-strong);font-weight:600;transition:transform .15s}
.chip[aria-pressed="true"]{background:var(--soft);border-color:var(--accent);color:var(--accent-ink)}
.chip.sm{min-height:36px;padding:0 14px;font-size:14px}
.seg{display:flex;background:var(--chip);border-radius:999px;padding:4px;gap:4px;border:1px solid var(--line)}
.seg button{flex:1;min-height:44px;border:0;background:none;border-radius:999px;font-weight:600;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px;transition:background .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--glass-strong);color:var(--ink);box-shadow:0 2px 8px rgba(18,21,31,.12)}
.ibtn{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;min-width:56px;padding:0;color:var(--ink);font-size:12px;font-weight:600}
.ibtn .circ{width:48px;height:48px;border-radius:50%;border:1px solid var(--glass-line);display:flex;align-items:center;justify-content:center;background:var(--glass-strong);transition:transform .15s}
.ibtn .ic{width:22px;height:22px}
.iconlink{background:none;border:0;color:var(--muted);width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:0}
.iconlink .ic{width:22px;height:22px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--chip);font-size:14px;font-weight:600;border:0;color:var(--ink);min-height:32px}
.pill .ic{width:18px;height:18px;color:var(--accent-ink)}
.pill .emo{font-size:18px;display:inline}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;padding:12px 8px;background:var(--glass);border:1px solid var(--glass-line);border-radius:24px;font-weight:600;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .15s}
.tile .ic{width:28px;height:28px;color:var(--accent-ink)}
.rowcard{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font-weight:600}
.rowcard span{flex:1}
.rowcard .ic{width:24px;height:24px;color:var(--accent-ink)}
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;color:var(--muted);text-align:center}
.empty .ic{width:32px;height:32px}
.bigic{width:76px;height:76px;margin:0 auto;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--accent-ink)}
.bigic .ic{width:38px;height:38px}

/* icônes, humeur */
.ic{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.2em}
.emo{font-size:32px;line-height:1;display:block}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:16px}
.scale button{min-height:78px;border-radius:20px;border:1px solid var(--glass-line);background:var(--glass-strong);padding:8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:transform .2s,box-shadow .2s}
.scale button:active{transform:scale(.94)}
.scale span{font-size:11.5px;font-weight:600;line-height:1.15;color:var(--muted)}
.scale button[aria-pressed="true"]{border-color:var(--accent);background:var(--soft)}
.moodrow{display:flex;justify-content:space-between;margin-top:12px;padding:8px 4px;background:var(--chip);border-radius:20px}
.moodrow span{flex:1;text-align:center;color:var(--muted)}
.moodrow .emo{font-size:22px;display:inline}

/* formulaires */
label.f,.f{display:block;font-size:15px;font-weight:600;color:var(--muted);margin-bottom:8px}
input[type=text],input[type=number],input[type=date],input[type=time],select,textarea{width:100%;min-height:52px;padding:12px 16px;border-radius:var(--r-in);border:1px solid var(--line);background:var(--glass-strong);appearance:none;-webkit-appearance:none}
textarea{min-height:168px;resize:vertical;line-height:1.5;border-radius:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* barres, progression */
.bar{height:10px;border-radius:99px;background:var(--chip);overflow:hidden}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-ink));border-radius:99px;transition:width .6s ease}
.spark{display:flex;align-items:flex-end;gap:6px;height:56px;margin-top:12px}
.spark span{flex:1;background:var(--soft);border-radius:8px;min-height:6px}
.spark span.hi{background:var(--accent)}
.big{font-family:var(--display);font-size:44px;font-weight:700;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.stat{display:flex;align-items:center;gap:12px;padding:12px;background:var(--chip);border-radius:var(--r-in)}
.stat .ic{width:26px;height:26px;color:var(--accent-ink)}
.stat b{display:block;font-family:var(--display);font-size:24px;line-height:1}.stat small{color:var(--muted);font-size:13px}
.thead{display:flex;align-items:flex-start;gap:12px}
.thead .tbody{flex:1;min-width:0}.thead .tbody b{font-weight:600}
.rank{flex:none;width:28px;height:28px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.tic{flex:none;width:44px;height:44px;border-radius:var(--r-in);background:var(--soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}
.tic .ic{width:22px;height:22px}

/* agenda */
.daynav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.daynav button.arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--glass-line);background:var(--glass-strong);font-size:22px}
.daynav .t{flex:1;text-align:center;font-family:var(--display);font-size:20px;font-weight:700}
.month{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.month .h{font-size:12px;color:var(--muted);padding:4px 0}
.month button{min-height:44px;border-radius:50%;border:0;background:none;position:relative}
.month button.today{background:var(--soft);font-weight:700;color:var(--accent-ink)}
.month button.sel{outline:2px solid var(--accent)}
.month button.dot::after{content:"";position:absolute;left:50%;bottom:5px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--accent)}
.time{flex:none;width:52px;font-variant-numeric:tabular-nums;color:var(--muted);font-size:15px}

/* surcouches */
#sheet,#full{position:fixed;inset:0;z-index:50}
#sheet[hidden],#full[hidden]{display:none}
.scrim{position:absolute;inset:0;background:rgba(10,12,22,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:560px;max-height:92dvh;overflow:auto;background:var(--sheet);
  border-radius:32px 32px 0 0;padding:12px 20px calc(24px + env(safe-area-inset-bottom));animation:up .28s cubic-bezier(.2,.8,.2,1);border:1px solid var(--glass-line);border-bottom:0}
.sheet .grab{width:40px;height:5px;border-radius:5px;background:var(--line);margin:0 auto 16px}
.sheet>*+*{margin-top:16px}
.sheet .grab+*{margin-top:0}
.fullscreen{position:absolute;inset:0;background:var(--ambient),var(--bg);overflow:auto;padding:calc(env(safe-area-inset-top) + 20px) 24px calc(env(safe-area-inset-bottom) + 28px);display:flex;flex-direction:column;animation:fade .25s ease-out}
.fullscreen .top{display:flex;justify-content:space-between;align-items:center;min-height:44px}
.fullscreen .mid{flex:1;display:flex;flex-direction:column;justify-content:center;gap:20px;padding:24px 0;max-width:520px;width:100%;margin:0 auto}
.fullscreen .bottom{max-width:520px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.timer{font-family:var(--display);font-size:92px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.ring{width:100%;height:8px;border-radius:8px;background:var(--chip);overflow:hidden}
.ring>i{display:block;height:100%;background:var(--accent);border-radius:8px;transition:width .5s linear}
.tel{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;text-decoration:none;color:inherit}
.tel+.tel{border-top:1px solid var(--line)}
.tel b{color:var(--accent-ink);font-size:20px;white-space:nowrap;font-family:var(--display)}
.tel .ic{width:22px;height:22px;color:var(--accent-ink)}
.tel>span{display:flex;align-items:center;gap:10px;flex:1;font-size:15px}

#toast{position:fixed;left:50%;transform:translate(-50%,20px);bottom:calc(var(--tabs) + env(safe-area-inset-bottom) + 64px);z-index:80;max-width:min(92vw,420px);
  background:var(--primary);color:var(--on-primary);padding:12px 20px;border-radius:999px;font-size:15px;font-weight:600;opacity:0;pointer-events:none;transition:.3s}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* barre d'action fixe (Décharger) et bannière de mise à jour */
.bar-fixed{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabs) + env(safe-area-inset-bottom) + 4px);width:calc(100% - 40px);max-width:520px;z-index:21;display:flex;gap:10px}
.bar-fixed .btn{flex:1}
.has-bar #sos{display:none}
.prow{padding:12px 0}.prow+.prow{border-top:1px solid var(--line)}
#update{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:calc(env(safe-area-inset-top) + 8px) 12px 0;padding:8px 8px 8px 20px;border-radius:999px;
  background:var(--glass-strong);border:1px solid var(--glass-line);box-shadow:var(--shadow);font-size:15px;font-weight:600}
#update[hidden]{display:none}
#update .btn{min-height:40px;padding:0 18px;flex:none}
details>summary{list-style:none;cursor:pointer}details>summary::-webkit-details-marker{display:none}

@keyframes up{from{transform:translate(-50%,48px);opacity:0}}
@keyframes fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){*,html{animation:none!important;transition:none!important}}
@media (max-width:359px){h1{font-size:28px}.scale span{font-size:10.5px}.timer{font-size:72px}.big{font-size:38px}}

/* icônes 2026 : formes pleines en dégradé doux + trait arrondi, pastille de verre pour les titres de carte */
.s1{stop-color:var(--accent);stop-opacity:.72}.s2{stop-color:var(--accent);stop-opacity:.26}
.ic .d{fill:url(#gi)}
.btn.primary .ic .d,.rank .ic .d{fill:currentColor;fill-opacity:.28}
#tabs .ic{width:26px;height:26px}
#tabs a[aria-current="page"] .ic .d{fill:currentColor;fill-opacity:.45}
#tabs a:not([aria-current="page"]) .ic .d{fill:currentColor;fill-opacity:.14}
#tabs svg{fill:none}
.eyebrow .ic{box-sizing:content-box;width:17px;height:17px;padding:6px;border-radius:12px;color:var(--accent-ink);
  background:linear-gradient(145deg,var(--soft2),var(--soft));box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.tic{background:linear-gradient(145deg,var(--soft2),var(--soft));box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.tic .ic{width:24px;height:24px}
.tile .ic{width:30px;height:30px}
.bigic{background:linear-gradient(145deg,var(--soft2),var(--soft));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 30px rgba(232,113,74,.18)}
.pill .ic{width:17px;height:17px}
.ibtn .circ .ic{width:24px;height:24px;color:var(--accent-ink)}

.logo{display:block;width:88px;height:88px;border-radius:22.5%;box-shadow:0 12px 32px rgba(60,40,20,.20),0 0 0 1px rgba(255,255,255,.6) inset}

/* « Je suis dépassé » : respiration guidée et étapes une par une */
.breath{width:210px;height:210px;border-radius:50%;margin:8px auto;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.75),var(--accent) 58%,var(--accent-ink));opacity:.9;
  box-shadow:0 24px 60px rgba(232,113,74,.35);animation:breathe 10s ease-in-out infinite}
@keyframes breathe{0%{transform:scale(.6)}40%{transform:scale(1)}100%{transform:scale(.6)}}
.dots{display:flex;gap:8px;justify-content:center}.dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--accent)}
.stepbig{font-family:var(--display);font-size:28px;font-weight:700;line-height:1.2;letter-spacing:-.01em}

/* parcours guidé : cases à cocher grandes et claires */
.progress{height:6px;border-radius:6px;background:var(--chip);overflow:hidden;margin-top:4px}
.progress>i{display:block;height:100%;background:var(--accent);border-radius:6px;transition:width .4s ease}
.fullscreen .mid.q{justify-content:flex-start;gap:12px;padding-top:20px}
.opt{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:12px 16px;border-radius:20px;border:1px solid var(--glass-line);background:var(--glass-strong);text-align:left;font-weight:600;transition:transform .15s,border-color .2s,background .2s}
.opt:active{transform:scale(.98)}
.opt .box{flex:none;width:26px;height:26px;border:2px solid var(--muted);position:relative;transition:background .2s,border-color .2s}
.opt.chk .box{border-radius:8px}.opt.rad .box{border-radius:50%}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--soft)}
.opt[aria-pressed="true"] .box{background:var(--accent);border-color:var(--accent)}
.opt[aria-pressed="true"] .box::after{content:"";position:absolute;left:7px;top:2px;width:7px;height:13px;border:solid var(--on-primary);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.opt.rad[aria-pressed="true"] .box::after{left:7px;top:3px}
.opt.soft{margin-top:8px;border-style:dashed}

/* images : photos, illustrations, pastilles, états vides (découpées du tableau d'inspiration) */
.media{display:block;max-width:100%;border-radius:24px;object-fit:cover;background:var(--chip)}
.media.fit{height:190px;width:auto;margin-left:auto;margin-right:auto}.media.fit.short{height:150px}
.media.wide{width:100%;height:150px;object-position:center 35%}
.media.card360{width:min(100%,360px);height:auto;margin-left:auto;margin-right:auto}
.media.vide{width:min(100%,260px);height:auto;margin-left:auto;margin-right:auto;margin-bottom:6px;border-radius:20px}
.media.vide.small{width:min(100%,200px)}
.tileicon{display:block;width:30px;height:30px;border-radius:10px;flex:none;object-fit:contain}
.eyebrow .tileicon{margin:-2px 0}
.rowcard .tileicon{width:34px;height:34px}
.fullscreen .logo{margin:0 auto}
html[data-theme="dark"] .media.vide{filter:brightness(.88)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .media.vide{filter:brightness(.88)}}

/* humeurs en 3D */
.mood{display:block;width:46px;height:40px;object-fit:contain;filter:drop-shadow(0 5px 7px rgba(70,45,25,.20))}
.scale .mood{margin:0 auto 2px}
.pill .mood{display:inline-block;width:26px;height:22px;filter:none}
.moodrow .mood{display:inline-block;width:30px;height:26px;filter:none}
.mood.m5{filter:drop-shadow(0 0 9px rgba(255,196,80,.65)) drop-shadow(0 5px 7px rgba(70,45,25,.18))}
.pill .mood.m5,.moodrow .mood.m5{filter:drop-shadow(0 0 4px rgba(255,196,80,.6))}
.scale button[aria-pressed="true"] .mood,.scale button:active .mood{transform:scale(1.08)}

/* images intégrées : cadre commun, coins concentriques, légende dans la voix de l'app */
.hero{position:relative;margin-left:auto;margin-right:auto;overflow:hidden;border-radius:28px;box-shadow:var(--shadow);border:1px solid var(--glass-line);background:var(--chip)}
.hero img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.hero figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;color:#fff;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em;line-height:1.2;
  background:linear-gradient(to top,rgba(38,24,14,.66),rgba(38,24,14,.28) 55%,transparent)}
.hero.wide{width:min(100%,430px);aspect-ratio:16/10}
.hero.sq{width:min(100%,300px);aspect-ratio:1/1}
.hero.sm{width:min(100%,250px);aspect-ratio:1/1}
html[data-theme="dark"] .hero img{filter:brightness(.9) saturate(.95)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero img{filter:brightness(.9) saturate(.95)}}
/* états vides : le fond crème de l'image se fond dans la carte */
.media.vide{border-radius:0;background:none;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
html[data-theme="dark"] .media.vide{mix-blend-mode:normal;opacity:.85}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .media.vide{mix-blend-mode:normal;opacity:.85}}

.mood.small{width:26px;height:26px;filter:none}
.pill .mood.small{width:24px;height:24px}
.moodrow .mood.small{width:30px;height:30px}
.mood.small.m5{filter:drop-shadow(0 0 4px rgba(255,196,80,.6))}

.scale .mood{width:54px;height:46px}
.scale button{min-height:92px}

/* icônes de la planche */
.ic-img{object-fit:contain;stroke:none;fill:none;vertical-align:-.25em}
.btn.primary .ic-img,.rank .ic-img{filter:brightness(0) invert(1)}
html[data-theme="dark"] .ic-img.dk,html[data-theme="dark"] .tileicon.dk{filter:invert(.9)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ic-img.dk,:root:not([data-theme="light"]) .tileicon.dk{filter:invert(.9)}}
html[data-theme="dark"] .btn.primary .ic-img.dk{filter:brightness(0) invert(0)}
.tabimg{display:block;width:30px;height:30px;object-fit:contain;filter:grayscale(.9) opacity(.55);transition:filter .2s,transform .2s}
#tabs a[aria-current="page"] .tabimg{filter:none;transform:scale(1.08)}
.tileicon{object-fit:contain}
/* humeurs : visages ronds */
.mood{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(120,60,20,.22))}
.scale .mood{width:54px;height:54px;margin:0 auto 2px}
.pill .mood,.moodrow .mood{filter:none}
.pill .mood{width:24px;height:24px}.moodrow .mood{width:30px;height:30px}
.mood.m5,.pill .mood.m5,.moodrow .mood.m5,.mood.small.m5{filter:drop-shadow(0 4px 6px rgba(120,60,20,.22))}
.pill .mood.m5,.moodrow .mood.m5{filter:none}

/* barre du bas : pictogrammes seuls, gris au repos, couleur quand actif */
.tabimg{width:26px;height:26px;filter:grayscale(1) opacity(.62)}
#tabs a[aria-current="page"] .tabimg{filter:none;transform:scale(1.1)}
html[data-theme="dark"] .tabimg.dk{filter:invert(.9) grayscale(1) opacity(.62)}
html[data-theme="dark"] #tabs a[aria-current="page"] .tabimg.dk{filter:invert(.9)}
html[data-theme="dark"] .tabimg:not(.dk){filter:grayscale(1) brightness(1.3) opacity(.7)}
html[data-theme="dark"] #tabs a[aria-current="page"] .tabimg:not(.dk){filter:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tabimg.dk{filter:invert(.9) grayscale(1) opacity(.62)}
  :root:not([data-theme="light"]) #tabs a[aria-current="page"] .tabimg.dk{filter:invert(.9)}
  :root:not([data-theme="light"]) .tabimg:not(.dk){filter:grayscale(1) brightness(1.3) opacity(.7)}
  :root:not([data-theme="light"]) #tabs a[aria-current="page"] .tabimg:not(.dk){filter:none}
}

/* barre du bas : pictogrammes en couleur, onglet actif sur une pastille douce (maquette fournie) */
:root{--tabs:100px}
#tabs{height:80px;padding:7px;gap:4px}
#tabs a{border-radius:26px;gap:2px;font-size:11.5px;font-weight:600;color:#8A7B72;justify-content:center;transition:background .25s,box-shadow .25s,color .2s}
#tabs a .tabimg,html[data-theme="dark"] #tabs a .tabimg,#tabs a[aria-current="page"] .tabimg,html[data-theme="dark"] .tabimg.dk,html[data-theme="dark"] #tabs a[aria-current="page"] .tabimg{
  width:40px;height:40px;object-fit:contain;filter:none;transform:none;transition:transform .25s}
#tabs a[aria-current="page"]{color:var(--accent-ink);background:linear-gradient(165deg,rgba(255,240,226,.98),rgba(255,226,204,.9));
  box-shadow:0 10px 24px rgba(255,140,60,.26),inset 0 1px 0 rgba(255,255,255,.85)}
#tabs a[aria-current="page"] .tabimg{transform:scale(1.08)}
html[data-theme="dark"] #tabs a{color:#B8A89C}
html[data-theme="dark"] #tabs a[aria-current="page"]{color:var(--accent-ink);background:linear-gradient(165deg,rgba(255,154,116,.24),rgba(255,154,116,.12));box-shadow:0 10px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #tabs a{color:#B8A89C}
  :root:not([data-theme="light"]) #tabs a[aria-current="page"]{color:var(--accent-ink);background:linear-gradient(165deg,rgba(255,154,116,.24),rgba(255,154,116,.12));box-shadow:0 10px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12)}
  :root:not([data-theme="light"]) .tabimg.dk,:root:not([data-theme="light"]) #tabs a[aria-current="page"] .tabimg.dk,:root:not([data-theme="light"]) .tabimg:not(.dk){filter:none}
}
/* états vides en mode sombre : l'illustration devient une petite carte arrondie, plus de halo clair */
html[data-theme="dark"] .media.vide{mix-blend-mode:normal;opacity:1;border-radius:20px;-webkit-mask-image:none;mask-image:none;filter:brightness(.8) saturate(.95);box-shadow:0 8px 22px rgba(0,0,0,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .media.vide{mix-blend-mode:normal;opacity:1;border-radius:20px;-webkit-mask-image:none;mask-image:none;filter:brightness(.8) saturate(.95);box-shadow:0 8px 22px rgba(0,0,0,.35)}}

/* ============ Normes 2026 : contrastes, cibles, contours, cases ============ */
:root{color-scheme:light;--control:#766B62;--ui:#AE4822;--ui-soft:rgba(174,72,34,.09);--tablabel:#6B5F57;--muted:#55524F}
html{color-scheme:light}
body{line-height:1.55}
p{max-width:64ch}
.fullscreen .mid p,.mid p{max-width:46ch}.center{margin-left:auto;margin-right:auto}
::placeholder{color:#6F655D;opacity:1}

/* cibles tactiles : 48 px pour tout ce qui se touche (WCAG 2.2 : 24 px minimum, 44-48 recommandés) */
.btn{min-height:52px;border:1.5px solid var(--control)}
.btn.primary{border-color:transparent}
.btn.lg{min-height:58px;font-size:18px;border-radius:999px}
.chip{min-height:48px;border:1.5px solid var(--control)}
.chip.sm{min-height:44px;padding:0 16px;font-size:15px}
.chip[aria-pressed="true"]{border:2px solid var(--ui);background:var(--ui-soft);color:var(--ui)}
button.pill{min-height:44px;padding:0 16px;font-size:15px;border:1.5px solid var(--control);background:var(--glass-strong)}
.seg{border:1.5px solid var(--control);padding:4px}.seg button{min-height:48px}
.iconlink{width:48px;height:48px}
.check-wrap{width:48px;height:48px;margin:-10px 0 -10px -10px}
.link{min-height:48px;padding:12px 6px;color:var(--ui)}
.tel{min-height:56px}
.row-main{min-height:48px}

/* rangée d'actions : remplace les boutons « bulle » */
.actrow{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:10px;margin-top:12px}
.act{min-height:52px;border-radius:16px;border:1.5px solid var(--control);background:#fff;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 10px;font-weight:600;font-size:15px;color:var(--ink);transition:transform .15s,background .15s}
.act .ic{width:22px;height:22px}
.act:active{transform:scale(.97);background:var(--ui-soft)}
.act span{white-space:nowrap}

/* champs : contour net (3:1), fond blanc, focus visible */
input[type=text],input[type=number],input[type=date],input[type=time],select,textarea{border:1.5px solid var(--control);background:#fff;font-size:17px;border-radius:14px}
textarea{border-radius:18px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ui);box-shadow:0 0 0 4px rgba(174,72,34,.2)}
:focus-visible{outline:3px solid var(--ui);outline-offset:3px;border-radius:inherit}

/* cases à cocher et boutons radio : contour 2 px net, intérieur plein quand c'est coché */
.opt{border:1.5px solid var(--control);background:#fff;min-height:64px;border-radius:18px}
.opt .box{width:28px;height:28px;border:2px solid var(--control);background:#fff;border-radius:8px}
.opt.rad .box{border-radius:50%}
.opt[aria-pressed="true"]{border:2px solid var(--ui);background:var(--ui-soft)}
.opt.chk[aria-pressed="true"] .box{background:var(--ui);border-color:var(--ui)}
.opt.chk[aria-pressed="true"] .box::after{left:8px;top:3px;width:7px;height:13px;border-color:#fff}
.opt.rad[aria-pressed="true"] .box{background:#fff;border-color:var(--ui)}
.opt.rad[aria-pressed="true"] .box::after{content:"";position:absolute;inset:5px;width:auto;height:auto;left:5px;top:5px;border:0;transform:none;border-radius:50%;background:var(--ui)}
.opt.soft{border-style:solid}
.check{border:2px solid var(--control);background:#fff}
.check.on{background:var(--ui);border-color:var(--ui)}
.check.on::after{border-color:#fff}
.scale button{border:1.5px solid var(--control);background:#fff}
.scale button[aria-pressed="true"]{border:2px solid var(--ui);background:var(--ui-soft)}
.bar,.ring,.progress{background:rgba(35,36,42,.14)}
.bar>i,.progress>i,.ring>i{background:var(--ui)}
.card{border:1px solid rgba(35,36,42,.12)}
.month button.sel{outline:2px solid var(--ui)}

/* barre du bas et textes : lisibilité */
#tabs a{color:var(--tablabel);font-size:12px}
#tabs a[aria-current="page"]{color:var(--ui)}
.eyebrow{color:#55524F}
.muted{color:var(--muted)}
.meta{font-size:15px;color:var(--muted)}
.pill{font-size:15px}
.scale span{font-size:12px;color:var(--muted)}
.hero figcaption{background:linear-gradient(to top,rgba(30,18,10,.78),rgba(30,18,10,.4) 60%,transparent);font-size:18px}
.stat small{font-size:14px;color:var(--muted)}
.why{color:var(--muted)}

/* préférences d'accessibilité du système */
@media (prefers-contrast:more){
  :root{--control:#3D3631;--ui:#8A3412;--muted:#3A3735;--glass:#fff;--glass-strong:#fff;--line:rgba(35,36,42,.5);--tablabel:#3D3631}
  .card,.act,.btn,.chip,.opt,input,select,textarea{border-color:#3D3631}
  *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-reduced-transparency:reduce){
  :root{--glass:#fff;--glass-strong:#fff;--sheet:#fff}
  *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (forced-colors:active){
  .btn,.chip,.opt,.act,.card,input,select,textarea{border:2px solid ButtonText}
  .btn.primary{background:Highlight;color:HighlightText}
  .opt[aria-pressed="true"],.chip[aria-pressed="true"]{outline:3px solid Highlight}
}
/* contours des contrôles : 2 px partout (net sur tous les écrans) */
.btn:not(.primary),.chip,.act,.opt,.scale button,button.pill,.seg,input[type=text],input[type=number],input[type=date],input[type=time],select,textarea{border-width:2px}
.opt[aria-pressed="true"],.chip[aria-pressed="true"],.scale button[aria-pressed="true"]{border-width:2px}

/* ============ Sans contour : fonds blancs et ombres douces ============ */
:root{--lift:0 1px 2px rgba(35,36,42,.10),0 8px 20px rgba(35,36,42,.07);--lift-sm:0 1px 2px rgba(35,36,42,.12),0 3px 8px rgba(35,36,42,.06)}
.card,.tile,#tabs,#sos,#update,.sheet,.hero,.btn,.btn.ghost,.chip,button.pill,.seg,.act,.opt,.scale button,.daynav button.arrow,.ibtn .circ,
input[type=text],input[type=number],input[type=date],input[type=time],select,textarea{border:0}
.btn:not(.primary),.chip,button.pill,.act,.opt,.scale button,.daynav button.arrow{background:#fff;box-shadow:var(--lift-sm)}
.btn.primary{box-shadow:0 8px 20px var(--btn-shadow)}
.btn.ghost{background:rgba(255,255,255,.55);box-shadow:none}
.card{box-shadow:var(--lift)}
.tile{box-shadow:var(--lift)}
.hero{box-shadow:var(--lift)}
.sheet{box-shadow:0 -10px 40px rgba(35,36,42,.18)}
.seg{background:rgba(35,36,42,.07);box-shadow:none}
.seg button[aria-pressed="true"]{background:#fff;box-shadow:var(--lift-sm)}
input[type=text],input[type=number],input[type=date],input[type=time],select,textarea{background:#fff;box-shadow:var(--lift-sm)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(174,72,34,.35),var(--lift-sm);border:0}
.chip[aria-pressed="true"],.opt[aria-pressed="true"],.scale button[aria-pressed="true"]{border:0;background:rgba(174,72,34,.14);box-shadow:none;color:var(--ink)}
.chip[aria-pressed="true"]{color:var(--ui);font-weight:700}
.opt{min-height:64px}
.opt[aria-pressed="true"]{font-weight:700}
.row+.row,.prow+.prow,.tel+.tel,.group .gsec+.gsec{border-top-color:rgba(35,36,42,.08)}
.month button.sel{outline:0;background:rgba(174,72,34,.16);font-weight:700}
.act:active,.chip:active,.btn:not(.primary):active{background:rgba(174,72,34,.10)}
/* la case à cocher garde son petit rond : c'est lui qui montre où toucher (contraste 3:1) */
.opt .box{border:2px solid var(--control);background:#fff}
.check{border:2px solid var(--control)}

/* outil d'une tâche : discret, mais à portée */
.toolbtn{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;margin-top:12px;padding:0 16px;border:0;border-radius:18px;background:rgba(255,226,204,.75);color:var(--ink);font-weight:600;text-align:left;box-shadow:var(--lift-sm)}
.toolbtn .ic{width:24px;height:24px}.toolbtn span{flex:1}.toolbtn .ic:last-child{width:20px;height:20px;opacity:.6}
.toolbtn:active{background:rgba(255,226,204,1)}

details.more>summary{display:inline-flex;align-items:center;gap:6px;min-height:48px;cursor:pointer}
details.more[open]>summary{margin-bottom:0}

.linkrow{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center;margin-top:4px}
.linkrow .link{padding-left:0}
/* boutons principaux : l'icône garde ses couleurs (orange sur fond sombre) ; seules les icônes noires passent en blanc */
.btn.primary .ic-img,.rank .ic-img{filter:none}
.btn.primary .ic-img.dk{filter:brightness(0) invert(1)}

/* saisie rapide : une ligne + un bouton rond */
.addrow{display:flex;gap:10px;align-items:center}
.addrow input{flex:1;min-width:0}
.btn.sq{width:52px;min-width:52px;padding:0;flex:none}

/* « Je suis dépassé » : des bulles à toucher plutôt qu'une liste de cases */
.cloud{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0}
.opt.bub{width:auto;min-height:48px;padding:10px 18px;border-radius:999px;gap:8px;display:inline-flex;align-items:center;font-weight:500;font-size:16px;line-height:1.25;text-align:left;background:#fff;box-shadow:var(--lift);transition:transform .18s cubic-bezier(.3,1.5,.5,1),background .15s}
.opt.bub .box{display:none}
.opt.bub .tileicon{width:26px;height:26px;flex:none}
.opt.bub[aria-pressed="true"]{background:var(--ui);color:#fff;font-weight:600;transform:scale(1.04)}
.opt.bub:active{transform:scale(.95)}
.react{margin-top:14px;color:var(--muted);font-size:15px;min-height:44px}
@media (prefers-reduced-motion:reduce){.opt.bub{transition:none}}
.opt.bub[aria-pressed="true"] .tileicon{background:#fff;border-radius:50%;padding:3px}

/* Jeu du jour */
.gweek{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:10px}
.gday{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;border-radius:14px;background:var(--chip);min-height:56px;font-size:13px;color:var(--muted)}
.gday b{font-weight:600;color:var(--ink,#26211E)}
.gday span{font-size:15px;font-weight:700;min-height:20px}
.gday.now{background:#fff;box-shadow:var(--lift)}
.gday.done{background:var(--ui-soft)}
.gday.done span{color:var(--ui)}
.gq{margin:8px 0 14px;font-size:22px;line-height:1.3}
.gopt{white-space:normal;text-align:center;min-height:56px}
.gopt.right{background:var(--ui-soft);box-shadow:inset 0 0 0 2px var(--ui)}
.gopt.miss{opacity:.55}
.gopt:disabled{opacity:1}
.gopt.miss:disabled{opacity:.55}
.gfb{margin-top:14px;min-height:56px}
.gscore{font-size:64px;font-weight:800;line-height:1;margin:8px 0}
.gscore small{display:block;font-size:15px;font-weight:500;color:var(--muted);margin-top:4px}

/* Jeux animés */
.gplay{flex:1;display:flex;flex-direction:column;padding:0 20px 16px;min-height:0}
.ghead{min-height:24px;color:var(--muted);font-size:15px;text-align:center;margin:4px 0 8px}
.gstage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
.gnote{min-height:44px;text-align:center;font-size:15px;margin-top:8px}
.shake{animation:gshake .4s}
@keyframes gshake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes gpop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes gpulse{50%{transform:scale(1.12)}}
.gslot{flex:1;display:flex;align-items:center;justify-content:center}
.gcard{width:min(300px,86%);padding:24px 20px;border-radius:26px;background:#fff;box-shadow:0 14px 30px rgba(120,70,40,.18);font-size:20px;font-weight:600;text-align:center;line-height:1.3;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.gcard.enter{animation:gin .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes gin{from{transform:translateY(-40px) scale(.9);opacity:0}}
.gcard.drag,.gtoken.drag,.gballoon.drag{z-index:5;box-shadow:0 22px 40px rgba(120,70,40,.28)}
.gboxes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gbox{min-height:100px;border-radius:24px;background:var(--ui-soft);border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-weight:700;color:#26211E;font-size:15px;transition:transform .2s,background .2s,color .2s}
.gbox.hot{background:var(--ui);color:#fff;transform:scale(1.06)}
.gbox.pulse{animation:gpulse .5s}
.gsits{display:flex;flex-direction:column;gap:8px}
.gsit{display:flex;align-items:center;gap:10px;justify-content:space-between;background:#fff;border-radius:18px;padding:10px 14px;min-height:60px;box-shadow:var(--lift);font-size:15px;line-height:1.25;transition:transform .2s,background .2s}
.gsit .slot{flex:none;min-width:104px;min-height:38px;border-radius:999px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;font-style:normal;padding:0 10px;color:#26211E}
.gsit.hot{background:var(--ui-soft);transform:scale(1.02)}
.gsit .slot.pop{animation:gpop .4s}
.gtokens{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:auto}
.gtoken{padding:12px 18px;border-radius:999px;background:var(--c);color:#26211E;font-weight:700;touch-action:none;cursor:grab;box-shadow:var(--lift);user-select:none;-webkit-user-select:none}
.gtoken.sel{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ui)}
.gmount{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;margin-top:24px}
.gbar{display:flex;gap:4px;width:100%;min-height:96px;margin-top:16px}
.gpiece{border:0;border-radius:18px;background:#E8825A;color:#26211E;font-weight:700;font-size:14px;min-width:0;padding:0 2px;cursor:pointer;transition:background .3s}
.gpiece.small{background:#8FB27A}
.gpiece.cut{animation:gcut .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes gcut{from{transform:translateY(-14px) scaleX(1.18)}}
.gtip{margin-top:16px;min-height:44px;font-weight:600}
.gstage.sky{background:linear-gradient(#cfe6f7,#fdf0e2);border-radius:26px;overflow:hidden;gap:0}
.gsky{height:20%;display:flex;align-items:center;justify-content:center;font-weight:700;background:rgba(255,255,255,.5);transition:background .2s}
.gsky span,.gtray span{display:flex;align-items:center;gap:8px}
.gair{flex:1;position:relative}
.gballoon{position:absolute;left:50%;bottom:6px;width:156px;margin-left:-78px;min-height:128px;border-radius:50% 50% 48% 48%;background:var(--c);display:flex;align-items:center;justify-content:center;text-align:center;padding:16px 18px;font-weight:700;font-size:15px;line-height:1.2;color:#26211E;touch-action:none;cursor:grab;box-shadow:inset -8px -10px 18px rgba(0,0,0,.08),0 10px 20px rgba(0,0,0,.08);user-select:none;-webkit-user-select:none}
.gballoon.rise{animation:grise 1s ease-out both,gsway 3.2s ease-in-out 1s infinite alternate}
@keyframes grise{from{transform:translateY(120px);opacity:0}to{transform:translateY(-30px);opacity:1}}
@keyframes gsway{from{transform:translateY(-30px) rotate(-2deg)}to{transform:translateY(-46px) rotate(2deg)}}
.gtray{height:20%;display:flex;align-items:center;justify-content:center;font-weight:700;background:rgba(255,255,255,.75);transition:background .2s}
.gsky.hot,.gtray.hot{background:#fff}
.gradar{width:100%;max-width:340px;margin:0 auto;touch-action:none;overflow:visible}
.gradar .ring{fill:none;stroke:#E7D9CC;stroke-width:1}
.gradar .axis{stroke:#E7D9CC;stroke-width:1}
.gradar .lab{font-size:13px;font-weight:600;fill:#55524F}
.gradar .shape{fill:rgba(232,130,90,.35);stroke:#AE4822;stroke-width:2.5;stroke-linejoin:round}
.gradar .hnd{fill:#AE4822;stroke:#fff;stroke-width:3;cursor:grab;touch-action:none}
.gtokens2{text-align:center;font-weight:600;min-height:24px}
.gbreath{position:relative;flex:1;display:flex;align-items:center;justify-content:center}
.gguide,.gme,.gpress{position:absolute;width:250px;height:250px;border-radius:50%}
.gguide{box-shadow:inset 0 0 0 5px rgba(174,72,34,.4);transform:scale(.55)}
.gme{background:linear-gradient(135deg,#F2A65A,#E8825A);opacity:.88;transform:scale(.55)}
.gpress{background:transparent;border:0;font-weight:800;font-size:22px;color:#26211E;touch-action:none;user-select:none;-webkit-user-select:none}
.gtower{position:relative;flex:1;overflow:hidden;border-radius:26px;background:linear-gradient(#fdf0e2,#f6e1d0);touch-action:manipulation}
.gbrick{position:absolute;border-radius:8px;box-shadow:0 2px 0 rgba(0,0,0,.1)}
.gbrick.perfect{animation:gflash .5s}
@keyframes gflash{50%{filter:brightness(1.25)}}
.gbrick.fall{transition:transform .7s ease-in,opacity .7s;transform:translateY(320px) rotate(18deg);opacity:0}
.gdrop{position:absolute;top:12px;left:50%;transform:translateX(-50%);min-height:48px;padding:0 28px;border-radius:999px;border:0;background:#26211E;color:#fff;font-weight:700;z-index:3}
@media (prefers-reduced-motion:reduce){.gballoon.rise{animation:none;transform:translateY(-30px)}.gcard.enter{animation:none}}

.btn[hidden]{display:none!important}