*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --g:#0D9E6D;--gd:#087A54;--gp:#064E36;--gl:#E6F9F1;--gm:#6EE7B7;
  --o:#E05A2D;--ol:#FFF1EB;--p:#7C6CF0;--pl:#EEEDFC;
  --bg:#F5F5F0;--w:#FFF;--ink:#111827;--ink2:#374151;--mt:#9CA3AF;--bd:#E5E7EB;
  --sh:0 1px 2px rgba(0,0,0,.03),0 8px 24px rgba(0,0,0,.06);
  --r:20px;--rs:14px;--rx:10px;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --out:cubic-bezier(.16,1,.3,1);
  --font:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);min-height:100dvh;overflow-x:hidden;color:var(--ink);-webkit-font-smoothing:antialiased}
.app{max-width:430px;margin:0 auto;min-height:100dvh;background:var(--bg);position:relative;overflow-x:hidden}

/* ====== SPLASH ====== */
#splash{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(160deg,#10B981,var(--g) 40%,var(--gp));overflow:hidden;transition:opacity .5s,transform .5s}
#splash.bye{opacity:0;transform:scale(1.08);pointer-events:none}
#splash::before{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.04);top:-80px;right:-80px;animation:orbSp 6s ease-in-out infinite}
@keyframes orbSp{0%,100%{transform:scale(1)}50%{transform:scale(1.2) translate(10px,10px)}}
.sp-jean{width:200px;height:200px;position:relative;animation:spJ .8s var(--spring) both}
.sp-jean img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 20px 40px rgba(0,0,0,.25))}
@keyframes spJ{from{opacity:0;transform:scale(.2) rotate(-15deg)}60%{transform:scale(1.08) rotate(3deg)}to{opacity:1;transform:none}}
.sp-t{color:white;font-size:34px;font-weight:900;letter-spacing:-1.5px;margin-top:12px;opacity:0;animation:spF .5s .4s var(--out) forwards}
.sp-s{color:rgba(255,255,255,.5);font-size:13px;font-weight:600;margin-top:4px;opacity:0;animation:spF .5s .6s var(--out) forwards}
@keyframes spF{to{opacity:1;transform:none}from{transform:translateY(10px)}}
.sp-bar{width:100px;height:3px;border-radius:2px;background:rgba(255,255,255,.1);margin-top:28px;overflow:hidden;opacity:0;animation:spF .4s .7s var(--out) forwards}
.sp-bar i{display:block;height:100%;background:white;border-radius:2px;animation:spFill 1.3s .8s var(--out) forwards;width:0}
@keyframes spFill{to{width:100%}}

/* ====== SCREENS ====== */
.screen{display:none;min-height:100dvh;flex-direction:column}
.screen.on{display:flex;animation:scrIn .4s var(--spring) both}
.screen.back{animation:scrBack .3s var(--out) both}
@keyframes scrIn{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:none}}
@keyframes scrBack{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}

/* ====== TOPBAR ====== */
.top{padding:14px 16px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%)}
.top-b{width:38px;height:38px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(255,255,255,.12);color:white;flex-shrink:0;font-size:18px;transition:transform .15s var(--spring)}
.top-b:active{transform:scale(.82)}
.top-t{font-size:17px;font-weight:800;color:white;letter-spacing:-.3px}
.top-s{font-size:11px;color:rgba(255,255,255,.55);margin-top:2px;font-weight:600}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px 140px}

/* ====== HERO ====== */
.hero{background:linear-gradient(160deg,#10B981,var(--g) 40%,var(--gp));padding:44px 20px 0;position:relative;overflow:hidden;min-height:280px;display:flex;align-items:flex-end;justify-content:space-between}
.hero::before,.hero::after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.035);pointer-events:none}
.hero::before{width:260px;height:260px;top:-60px;right:-60px;animation:orbSp 10s ease-in-out infinite}
.hero::after{width:180px;height:180px;bottom:-40px;left:-40px;animation:orbSp 14s 3s ease-in-out infinite reverse}
.hero-txt{padding-bottom:32px;flex:1;position:relative;z-index:2}
.hero-badge{background:rgba(255,255,255,.1);backdrop-filter:blur(8px);color:white;font-size:11px;font-weight:700;letter-spacing:.06em;padding:6px 14px;border-radius:24px;display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;border:1px solid rgba(255,255,255,.06)}
.hero-name{font-size:44px;font-weight:900;color:white;line-height:.92;letter-spacing:-2.5px}
.hero-tag{font-size:14px;color:rgba(255,255,255,.55);margin-top:10px;font-weight:500}
.hero-img{width:140px;flex-shrink:0;align-self:flex-end;position:relative;z-index:2;margin-bottom:-4px}
.hero-img img{width:100%;display:block;filter:drop-shadow(0 12px 32px rgba(0,0,0,.25));animation:heroF 5s ease-in-out infinite}
@keyframes heroF{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.pulse{display:inline-block;width:8px;height:8px;background:#34D399;border-radius:50%;animation:pls 2s ease infinite}
@keyframes pls{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}50%{box-shadow:0 0 0 6px rgba(52,211,153,0)}}

/* ====== BUBBLE ====== */
.bub{background:var(--w);border-radius:4px 18px 18px 18px;padding:14px 18px;margin:16px 16px 8px;font-size:14px;color:var(--gp);line-height:1.6;box-shadow:var(--sh);font-weight:600;position:relative;opacity:0;animation:bubIn .5s .15s var(--spring) forwards}
@keyframes bubIn{to{opacity:1;transform:none}from{transform:translateY(8px) scale(.96)}}
.bub::before{content:'';position:absolute;top:-6px;left:14px;width:14px;height:14px;background:var(--w);clip-path:polygon(0 100%,100% 100%,0 0)}
.bub-j{display:flex;align-items:flex-end;gap:10px;padding:0 16px;margin-bottom:6px}
.bub-j .bub{margin:0;flex:1;border-radius:18px 18px 18px 4px;animation-delay:.25s}
.bub-j .bub::before{display:none}
.bub-av{width:36px;height:36px;flex-shrink:0;border-radius:50%;overflow:hidden;background:var(--gl)}
.bub-av img{width:140%;height:140%;object-fit:cover;margin:-20% 0 0 -20%;mix-blend-mode:multiply}

/* ====== LABEL ====== */
.lbl{font-size:11px;font-weight:800;color:var(--mt);letter-spacing:.14em;margin-bottom:12px;margin-top:8px;text-transform:uppercase}

/* ====== FESTIVAL CARD ====== */
.fc{background:var(--w);border-radius:var(--r);margin-bottom:12px;overflow:hidden;cursor:pointer;box-shadow:var(--sh);transition:transform .2s var(--spring);opacity:0;animation:cardUp .45s var(--spring) forwards}
.fc:active{transform:scale(.97)}
@keyframes cardUp{to{opacity:1;transform:none}from{transform:translateY(18px)}}
.fc-top{height:100px;display:flex;align-items:flex-end;padding:14px 16px;position:relative;overflow:hidden}
.fc-top::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.35))}
.fc-top i{position:absolute;right:-8px;top:-8px;opacity:.07;font-size:90px;color:white}
.fc-info{position:relative;z-index:1}
.fc-n{font-size:17px;font-weight:800;color:white;letter-spacing:-.2px;text-shadow:0 1px 4px rgba(0,0,0,.25)}
.fc-s{font-size:11px;color:rgba(255,255,255,.8);margin-top:2px;font-weight:500}
.fc-bot{padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
.pill{font-size:11px;padding:4px 10px;border-radius:20px;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.pill-g{background:var(--gl);color:var(--gp)}.pill-m{background:#F3F4F6;color:#6B7280}

/* ====== ADD BTN ====== */
.add-btn{width:100%;border:2.5px dashed var(--gm);border-radius:var(--r);padding:18px;background:none;color:var(--g);font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s var(--spring);font-family:var(--font)}
.add-btn:active{background:var(--gl);transform:scale(.97)}

/* ====== INSTALL BANNER ====== */
.install-banner{margin:0 16px 16px;padding:14px 16px;background:linear-gradient(135deg,var(--gl),#D1FAE5);border-radius:var(--r);display:flex;align-items:center;gap:12px;position:relative;box-shadow:var(--sh);animation:cardUp .5s var(--spring) forwards}
.install-ico{width:44px;height:44px;border-radius:12px;background:var(--g);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;flex-shrink:0}
.install-txt{flex:1;min-width:0}
.install-t{font-size:14px;font-weight:800;color:var(--gp)}
.install-s{font-size:12px;color:var(--ink2);margin-top:2px;line-height:1.4}
.install-btn{background:var(--g);color:#fff;border:none;padding:8px 16px;border-radius:100px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);white-space:nowrap;flex-shrink:0}
.install-btn:active{transform:scale(.95)}
.install-x{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--mt);font-size:16px;cursor:pointer;padding:4px}

/* ====== ACTION ITEMS ====== */
.ai{background:var(--w);border-radius:var(--rs);padding:16px;margin-bottom:10px;display:flex;align-items:center;gap:14px;cursor:pointer;box-shadow:var(--sh);transition:transform .15s var(--spring);opacity:0;animation:cardUp .4s var(--spring) forwards}
.ai:active{transform:scale(.97)}
.ai-i{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:22px;color:white;transition:transform .2s var(--spring)}
.ai:active .ai-i{transform:scale(1.1) rotate(-5deg)}
.ai-t{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.2px}
.ai-s{font-size:12px;color:var(--mt);margin-top:2px;font-weight:500}

/* ====== STATS ====== */
.sg{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
.st{background:var(--w);border-radius:var(--rs);padding:16px;box-shadow:var(--sh);opacity:0;animation:cardUp .4s var(--spring) forwards}
.sn{font-size:28px;font-weight:900;color:var(--g);letter-spacing:-1px;font-variant-numeric:tabular-nums}
.sl{font-size:10px;color:var(--mt);margin-top:3px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}

/* ====== FORMS ====== */
.fg{margin-bottom:16px}
.fl{font-size:12px;font-weight:700;color:var(--ink2);margin-bottom:7px;display:block}
.fi{width:100%;background:var(--w);border:2px solid var(--bd);border-radius:var(--rx);padding:13px 16px;font-size:15px;color:var(--ink);font-family:var(--font);-webkit-appearance:none;transition:border-color .2s,box-shadow .2s}
.fi::placeholder{color:#D1D5DB}
.fi:focus{outline:none;border-color:var(--g);box-shadow:0 0 0 4px rgba(13,158,109,.12)}
textarea.fi{min-height:100px;resize:vertical;line-height:1.5}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ====== COLOR PICKER ====== */
.cr{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.cd{width:38px;height:38px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all .2s var(--spring)}
.cd.sel{transform:scale(1.2);box-shadow:0 0 0 3px var(--w),0 0 0 5px currentColor}

/* ====== BUTTONS ====== */
.btn{width:100%;padding:16px;border-radius:var(--rs);font-size:16px;font-weight:700;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;font-family:var(--font);transition:all .12s var(--spring);letter-spacing:-.2px}
.btn:active{transform:scale(.97)}
.btn-p{background:linear-gradient(135deg,var(--g),#10B981);color:white;box-shadow:0 4px 14px rgba(13,158,109,.2)}
.btn-p:disabled{background:#D1FAE5;color:#86EFAC;box-shadow:none}
.btn-o{background:var(--w);color:var(--g);border:2.5px solid var(--g)}
.btn-g{background:#F3F4F6;color:#6B7280}
.btn-g:active{background:#E5E7EB}
.btn-r{background:linear-gradient(135deg,#EF4444,#DC2626);color:white}

/* ====== PROFILE GRID ====== */
.pg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.pt{background:var(--w);border-radius:var(--r);padding:14px 10px 12px;text-align:center;cursor:pointer;border:2.5px solid transparent;box-shadow:var(--sh);transition:all .25s var(--spring)}
.pt.sel{border-color:var(--g);background:var(--gl);transform:scale(1.04);box-shadow:0 0 0 4px rgba(13,158,109,.1)}
.pt:active{transform:scale(.95)}
.pt-av{width:72px;height:72px;border-radius:50%;margin:0 auto 8px;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform .25s var(--spring)}
.pt.sel .pt-av{transform:scale(1.08)}
.pt-av img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.pt-n{font-size:13px;font-weight:700;color:var(--ink2)}
.pt.sel .pt-n{color:var(--gp)}

/* ====== QUESTION CARDS ====== */
.qc{background:var(--w);border-radius:var(--rs);padding:16px;margin-bottom:12px;box-shadow:var(--sh);opacity:0;animation:cardUp .4s var(--spring) forwards}
.qc-n{font-size:10px;font-weight:800;color:var(--g);margin-bottom:5px;letter-spacing:.08em}
.qc-q{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:12px;line-height:1.45}

/* CHOICE */
.qo{padding:12px 14px;border-radius:var(--rx);border:2px solid var(--bd);font-size:14px;color:var(--ink2);cursor:pointer;background:var(--bg);transition:all .2s var(--spring);display:flex;align-items:center;gap:10px;font-weight:500;margin-bottom:8px;font-family:var(--font)}
.qo::before{content:'';width:20px;height:20px;border-radius:50%;border:2px solid #D1D5DB;flex-shrink:0;transition:all .2s var(--spring)}
.qo.sel{background:var(--gl);border-color:var(--g);color:var(--gp);font-weight:700}
.qo.sel::before{background:var(--g);border-color:var(--g);box-shadow:inset 0 0 0 3px white}

/* SLIDER */
.qs-val{text-align:center;font-size:36px;font-weight:900;color:var(--g);margin-bottom:4px;transition:transform .12s var(--spring);font-variant-numeric:tabular-nums}
.qs-inp{-webkit-appearance:none;width:100%;height:6px;border-radius:3px;background:var(--bd);outline:none;margin:8px 0}
.qs-inp::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--w);border:3px solid var(--g);box-shadow:0 2px 10px rgba(0,0,0,.15);cursor:pointer;transition:transform .12s var(--spring)}
.qs-inp::-webkit-slider-thumb:active{transform:scale(1.25)}
.qs-lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--mt);font-weight:600;margin-top:2px}

/* EMOJI */
.qe{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;padding:4px 0}
.qe-o{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:8px 6px;border-radius:12px;transition:all .2s var(--spring);border:2px solid transparent;min-width:60px}
.qe-o em{font-size:30px;font-style:normal;transition:transform .2s var(--spring);display:block}
.qe-o small{font-size:10px;color:var(--mt);font-weight:600;line-height:1.2;text-align:center}
.qe-o.sel{background:var(--gl);border-color:var(--g)}
.qe-o.sel em{transform:scale(1.3)}

/* TOGGLE */
.qt-row{display:flex;gap:8px;flex-wrap:wrap}
.qt-o{flex:1;min-width:calc(50% - 4px);padding:12px 10px;border-radius:var(--rx);border:2px solid var(--bd);text-align:center;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink2);background:var(--bg);transition:all .2s var(--spring);font-family:var(--font)}
.qt-o.sel{border-color:var(--g);background:var(--gl);color:var(--gp)}
.qt-o:active{transform:scale(.95)}

/* ====== PHOTO ZONE ====== */
.phz{border:2.5px dashed var(--bd);border-radius:var(--r);padding:28px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:all .2s var(--spring);background:var(--w);position:relative;overflow:hidden}
.phz:active{transform:scale(.98);border-color:var(--gm)}
.phz.has{border:none;padding:0;background:transparent}
.phz-i{width:56px;height:56px;border-radius:50%;background:var(--gl);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--g);transition:transform .3s var(--spring)}
.phz:active .phz-i{transform:scale(1.1) rotate(-8deg)}
.phz-t{font-size:14px;font-weight:700;color:var(--ink2)}
.phz-s{font-size:12px;color:var(--mt);font-weight:500}
.phz img.prev{width:100%;border-radius:var(--r);display:block;animation:photoIn .4s var(--spring)}
@keyframes photoIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.phz .rm{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);border:none;color:white;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
input[type=file]{display:none}

/* ====== STEPS ====== */
.steps{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 0 0}
.stp{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15);transition:all .3s var(--spring)}
.stp.on{background:white;width:24px;border-radius:4px}
.stp.ok{background:rgba(255,255,255,.4)}

/* ====== PROGRESS ====== */
.prog{height:3px;background:rgba(255,255,255,.12);border-radius:2px;margin-top:8px;overflow:hidden}
.prog i{display:block;height:100%;background:white;border-radius:2px;transition:width .5s var(--spring)}

/* ====== TIMELINE ====== */
.tl-i{display:flex;gap:14px;margin-bottom:14px;opacity:0;animation:cardUp .4s var(--spring) forwards}
.tl-c{display:flex;flex-direction:column;align-items:center;padding-top:3px}
.tl-d{width:12px;height:12px;border-radius:50%;background:var(--g);flex-shrink:0;box-shadow:0 0 0 3px rgba(13,158,109,.1)}
.tl-d.note{background:#D97706;box-shadow-color:rgba(217,119,6,.1)}
.tl-l{width:2px;background:linear-gradient(180deg,var(--gl),transparent);flex:1;min-height:16px;margin-top:4px}
.tl-card{flex:1;background:var(--w);border-radius:var(--rs);padding:14px 16px;box-shadow:var(--sh)}
.tl-t{font-size:10px;font-weight:800;color:var(--g);margin-bottom:3px;letter-spacing:.04em}
.tl-p{font-size:12px;color:var(--mt);font-weight:600}
.tl-tx{font-size:13px;color:var(--ink);margin-top:4px;line-height:1.5}

/* ====== INSIGHTS ====== */
.ir{background:var(--w);border-radius:var(--rs);padding:14px 16px;margin-bottom:10px;box-shadow:var(--sh);opacity:0;animation:cardUp .4s var(--spring) forwards}
.ir-h{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.ir-n{font-size:20px;font-weight:900;color:var(--g)}
.ir-bar{background:var(--gl);border-radius:6px;height:8px;overflow:hidden}
.ir-fill{height:100%;background:linear-gradient(90deg,var(--g),#10B981);border-radius:6px;transition:width 1s var(--spring);width:0}

/* ====== VERBATIM ====== */
.vb{border-left:4px solid var(--g);border-radius:0 var(--rs) var(--rs) 0;background:var(--w);padding:14px 16px;margin-bottom:10px;box-shadow:var(--sh);opacity:0;animation:cardUp .4s var(--spring) forwards}
.vb-t{font-size:14px;color:var(--ink);font-style:italic;line-height:1.55}
.vb-m{font-size:11px;color:var(--g);margin-top:6px;font-weight:700}

/* ====== DONUT ====== */
.dn-w{display:flex;align-items:center;gap:18px;background:var(--w);border-radius:var(--r);padding:18px;box-shadow:var(--sh);margin-bottom:14px}
.dn-leg{flex:1}
.dn-i{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:13px;color:var(--ink);font-weight:500}
.dn-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dn-pct{font-weight:800;margin-left:auto;color:var(--mt)}

/* ====== SCORE ====== */
.sc-w{display:flex;flex-direction:column;align-items:center;padding:24px 0 12px}
.sc-l{font-size:13px;color:var(--mt);text-align:center;margin-top:8px;font-weight:600}

/* ====== SUCCESS ====== */
.ok-s{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;padding:2rem;text-align:center;background:linear-gradient(180deg,var(--gl),var(--bg) 60%);position:relative}
.ok-ring{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,var(--g),#10B981);display:flex;align-items:center;justify-content:center;font-size:40px;color:white;margin-bottom:16px;animation:okPop .6s var(--spring) both;box-shadow:0 8px 28px rgba(13,158,109,.25)}
@keyframes okPop{from{opacity:0;transform:scale(0) rotate(-20deg)}60%{transform:scale(1.12) rotate(4deg)}to{opacity:1;transform:none}}
.ok-img{width:120px;margin:12px 0 0}
.ok-img img{width:100%;mix-blend-mode:multiply;animation:okJ .5s .3s var(--spring) both}
@keyframes okJ{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ok-t{font-size:24px;font-weight:900;color:var(--ink);margin-bottom:6px;letter-spacing:-.5px;opacity:0;animation:spF .4s .15s var(--out) forwards}
.ok-sub{font-size:14px;color:var(--mt);margin-bottom:2rem;line-height:1.6;font-weight:500;opacity:0;animation:spF .4s .25s var(--out) forwards}

/* ====== JEAN MSG ====== */
.jm{background:var(--gl);border-radius:4px 14px 14px 14px;padding:13px 16px;font-size:13px;color:var(--gp);margin-bottom:16px;line-height:1.55;font-weight:600;opacity:0;animation:bubIn .4s var(--spring) forwards}
.jm-o{background:var(--ol);color:#7A3010}
.jm-p{background:var(--pl);color:#3C3489}

/* ====== EMPTY ====== */
.empty{display:flex;flex-direction:column;align-items:center;padding:2.5rem 1rem;text-align:center}
.empty img{width:120px;margin-bottom:16px;animation:emF 4s ease-in-out infinite;mix-blend-mode:multiply}
@keyframes emF{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.empty b{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:4px;display:block}
.empty span{font-size:13px;color:var(--mt);line-height:1.5;font-weight:500}

/* ====== BADGE ====== */
.badge{font-size:11px;padding:4px 10px;border-radius:20px;font-weight:700;display:inline-flex;align-items:center;gap:3px;background:#FEF3C7;color:#92400E}

/* ====== CONFETTI ====== */
.cft{position:fixed;top:-20px;pointer-events:none;z-index:9998;animation:cftF 1.4s var(--out) forwards}
@keyframes cftF{0%{transform:translateY(0) rotate(0) scale(1);opacity:1}100%{transform:translateY(110vh) rotate(720deg) scale(.3);opacity:0}}

/* ====== TYPING ====== */
.typ{display:inline-flex;gap:3px}.typ i{width:5px;height:5px;border-radius:50%;background:var(--gp);opacity:.3;animation:typB 1s ease infinite;display:block;font-style:normal}.typ i:nth-child(2){animation-delay:.15s}.typ i:nth-child(3){animation-delay:.3s}
@keyframes typB{0%,60%,100%{transform:translateY(0);opacity:.3}30%{transform:translateY(-4px);opacity:1}}

/* ====== STAGGER ====== */
.stg>*:nth-child(1){animation-delay:.04s}.stg>*:nth-child(2){animation-delay:.08s}.stg>*:nth-child(3){animation-delay:.12s}.stg>*:nth-child(4){animation-delay:.16s}.stg>*:nth-child(5){animation-delay:.2s}.stg>*:nth-child(6){animation-delay:.24s}

/* ====== FEST JEANNETTE (outside topbar) ====== */
.fest-jean{position:absolute;top:4px;right:12px;width:64px;z-index:11;pointer-events:none;animation:heroF 5s ease-in-out infinite;mix-blend-mode:luminosity;opacity:.9}

/* ====== TIMELINE V2 ====== */
.tl-wrap{position:relative;padding-left:28px}
.tl-wrap::before{content:'';position:absolute;left:9px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--g),var(--gm) 50%,var(--bd));border-radius:1px}
.tl-ev{position:relative;margin-bottom:20px;opacity:0;animation:cardUp .4s var(--spring) forwards}
.tl-dot{position:absolute;left:-28px;top:14px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:white;z-index:1}
.tl-dot.obs{background:var(--g);box-shadow:0 0 0 4px rgba(13,158,109,.12)}
.tl-dot.note{background:#D97706;box-shadow:0 0 0 4px rgba(217,119,6,.12)}
.tl-time{position:absolute;left:-28px;top:-2px;font-size:10px;font-weight:800;color:var(--g);letter-spacing:.02em;white-space:nowrap;transform:translateX(-100%) translateX(-8px)}
.tl-card2{background:var(--w);border-radius:var(--rs);padding:14px 16px;box-shadow:var(--sh);border-left:3px solid var(--g)}
.tl-card2.note{border-left-color:#D97706}
.tl-card2 .tl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.tl-card2 .tl-profile{font-size:12px;font-weight:700;color:var(--gp);display:flex;align-items:center;gap:6px}
.tl-card2 .tl-profile i{font-size:14px}
.tl-card2 .tl-hour{font-size:11px;font-weight:800;color:var(--mt);font-variant-numeric:tabular-nums}
.tl-card2 .tl-body{font-size:13px;color:var(--ink);line-height:1.5;margin-top:4px}
.tl-card2 .tl-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.tl-card2 .tl-ph{width:100%;border-radius:8px;margin-top:8px;max-height:120px;object-fit:cover}

/* ====== MULTI-PHOTO ====== */
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.ph-item{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:1;animation:photoIn .3s var(--spring)}
.ph-item img{width:100%;height:100%;object-fit:cover}
.ph-item .rm{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);border:none;color:white;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ph-btns{display:flex;gap:8px}
.ph-hint{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 0 10px;cursor:pointer}
@keyframes photoIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}

/* ====== SYNC TOAST ====== */
#toast{position:fixed;top:16px;left:50%;transform:translateX(-50%) translateY(-80px);z-index:10000;background:var(--gp);color:white;font-size:13px;font-weight:600;padding:10px 20px;border-radius:30px;box-shadow:0 4px 20px rgba(0,0,0,.2);display:flex;align-items:center;gap:8px;transition:transform .4s var(--spring);pointer-events:none;font-family:var(--font);max-width:90vw}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast i{font-size:16px}
.sync-dot{width:6px;height:6px;border-radius:50%;background:#34D399;display:inline-block;margin-left:4px;vertical-align:middle;animation:pls 2s ease infinite}

/* ====== GREENFIB ====== */
.gf-splash{height:64px;margin-top:28px;opacity:0;animation:spF .5s .9s var(--out) forwards;filter:drop-shadow(0 2px 10px rgba(0,0,0,.25))}
.gf-hero{height:40px;opacity:.9;filter:drop-shadow(0 1px 4px rgba(0,0,0,.15));margin-top:6px}
.gf-hero-wrap{display:flex;align-items:center;gap:10px;padding:10px 20px 16px;position:relative;z-index:2}
.gf-hero-txt{font-size:11px;color:rgba(255,255,255,.6);font-weight:600}
.gf-foot{display:flex;align-items:center;justify-content:center;gap:12px;padding:24px 0 0;margin-top:28px;border-top:1px solid var(--bd)}
.gf-foot img{height:36px}
.gf-foot span{font-size:14px;color:var(--ink);font-weight:800}

/* ====== BOTTOM CONTROLLER ====== */
.ctrl{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;z-index:100;display:none}
.ctrl-bar{display:flex;align-items:flex-end;justify-content:center;gap:0;padding:0 16px 12px;background:linear-gradient(0deg,var(--bg) 70%,transparent);padding-top:30px}
.ctrl-btn{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;border:none;background:none;padding:8px 16px;font-family:var(--font);transition:transform .15s var(--spring);flex:1}
.ctrl-btn:active{transform:scale(.9)}
.ctrl-btn .ctrl-ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;color:white}
.ctrl-btn small{font-size:10px;font-weight:700;color:var(--mt)}
.ctrl-fab{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--g),var(--gp));border:none;cursor:pointer;box-shadow:0 4px 20px rgba(13,158,109,.4);display:flex;align-items:center;justify-content:center;padding:16px;margin:-20px 8px 0;transition:all .25s var(--spring);flex-shrink:0}
.ctrl-fab img{width:100%;height:100%;object-fit:contain;filter:brightness(10)}
.ctrl-fab:active{transform:scale(.88)}
.ctrl-fab.open{background:var(--ink);transform:rotate(180deg)}

/* ====== 3 RONDS ACTION ====== */
.ctrl-top{display:flex;align-items:center;justify-content:center;gap:14px;padding:20px 0 8px}
.ctrl-round{display:flex;flex-direction:column;align-items:center;gap:6px;border:none;background:none;cursor:pointer;font-family:var(--font);transition:transform .15s var(--spring)}
.ctrl-round:active{transform:scale(.88)}
.ctrl-round small{font-size:10px;font-weight:700;color:var(--mt)}
.ctrl-r-ico{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;color:white;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.ctrl-r-fab{width:76px;height:76px;border-radius:50%;background:linear-gradient(135deg,var(--g),var(--gp));display:flex;align-items:center;justify-content:center;padding:18px;box-shadow:0 4px 20px rgba(13,158,109,.35)}
.ctrl-r-fab img{width:100%;height:100%;object-fit:contain;filter:brightness(10)}

/* ====== VIGNETTES ====== */
.vig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px}
.vig{background:var(--w);border-radius:var(--rs);padding:16px 12px;text-align:center;cursor:pointer;box-shadow:var(--sh);transition:all .2s var(--spring);display:flex;flex-direction:column;align-items:center;gap:8px;aspect-ratio:1;justify-content:center}
.vig:active{transform:scale(.95)}
.vig-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;color:white}
.vig-t{font-size:12px;font-weight:700;color:var(--ink);line-height:1.2}
.vig-n{font-size:10px;color:var(--mt);font-weight:600}

/* ====== FAB QUICK REPORT (keep sheet) ====== */

.qr-sheet{position:fixed;bottom:0;left:0;right:0;z-index:99;background:var(--w);border-radius:20px 20px 0 0;box-shadow:0 -4px 30px rgba(0,0,0,.12);padding:20px 16px 32px;transform:translateY(100%);transition:transform .35s var(--spring);max-width:430px;margin:0 auto;max-height:75vh;overflow-y:auto}
.qr-sheet.open{transform:translateY(0)}
.qr-sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--bd);margin:0 auto 16px}
.qr-sheet-title{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:14px;text-align:center}
.qr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qr-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:var(--rs);border:2px solid var(--bd);background:var(--bg);cursor:pointer;transition:all .2s var(--spring);font-family:var(--font)}
.qr-btn:active{transform:scale(.93);border-color:var(--g);background:var(--gl)}
.qr-btn em{font-size:28px;font-style:normal}
.qr-btn small{font-size:10px;font-weight:700;color:var(--ink2);text-align:center;line-height:1.2}

.qr-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:98;opacity:0;pointer-events:none;transition:opacity .25s}
.qr-overlay.open{opacity:1;pointer-events:auto}

.qr-toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) scale(.8);background:var(--gp);color:white;padding:10px 20px;border-radius:24px;font-size:13px;font-weight:700;z-index:101;opacity:0;transition:all .3s var(--spring);pointer-events:none;font-family:var(--font);white-space:nowrap}
.qr-toast.show{opacity:1;transform:translateX(-50%) scale(1)}

/* ====== CONSENT VISIBLE ====== */
.consent-row{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;background:var(--gl);border-radius:var(--rx);border:2px solid var(--g);margin:8px 0}
.consent-box{width:28px;height:28px;border-radius:8px;border:2.5px solid var(--g);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--g);transition:all .2s var(--spring)}
.consent-box.off{background:var(--w)}
.consent-box i{font-size:16px;color:white;transition:opacity .15s}

/* ====== SPIN ====== */
@keyframes spin{to{transform:rotate(360deg)}}

/* ====== DELETE ====== */
.del-btn{position:absolute;top:14px;right:56px;width:34px;height:34px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:rgba(255,255,255,.7);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:11;transition:all .15s var(--spring)}
.del-btn:active{transform:scale(.85);background:rgba(239,68,68,.8);color:white}