/* ═══════════════════════════════════════════════════════════════════
   itsvegan app (/app) — loaded ONLY in app mode (inc/app.php), after the
   site CSS. Everything is scoped under html.is-app. New classes: ap-*.
   ═══════════════════════════════════════════════════════════════════ */
html.is-app{
  --ap-ease:cubic-bezier(.22,.8,.24,1);
  --ap-bg:#F6F4EE; --ap-card:#fff; --ap-sep:rgba(20,40,25,.08);
  --hdr:52px; --tb:58px; --tbh:calc(var(--tb) + env(safe-area-inset-bottom));
  --ap-top:calc(var(--hdr) + env(safe-area-inset-top));
  background:var(--ap-bg);
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
  scroll-padding-top:calc(var(--ap-top) + 12px);
}
html.is-app body{background:var(--ap-bg);touch-action:manipulation;overscroll-behavior-y:none;padding-bottom:var(--tbh);min-height:100vh;min-height:100dvh}
.is-app .hdr,.is-app .ftr,.is-app .menu-btn,.is-app .skip,.is-app .crumbs,.is-app .statcounter{display:none!important}
.is-app main{min-height:calc(100vh - var(--ap-top) - var(--tbh));min-height:calc(100dvh - var(--ap-top) - var(--tbh))}
.is-app a,.is-app button{-webkit-touch-callout:none}
.is-app .abar,.is-app .tabbar,.is-app .sheet-grab,.is-app .ap-quick,.is-app .ap-tiles,.is-app .ap-row,.is-app .tab-add,.is-app .ap-sec-h{-webkit-user-select:none;user-select:none}
.is-app img{-webkit-user-drag:none}

/* ── Top app bar ─────────────────────────────────────────────────── */
.is-app .abar.ap-bar{display:flex;align-items:center;gap:2px;position:sticky;top:0;z-index:1050;height:var(--ap-top);padding:env(safe-area-inset-top) 6px 0 8px;
  background:rgba(246,244,238,.82);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);border-bottom:.5px solid transparent;transition:border-color .2s,background .2s}
.is-app body.scrolled .abar.ap-bar{border-bottom-color:rgba(20,40,25,.12);box-shadow:none;background:rgba(250,249,245,.86)}
.is-app .ap-bar .abar-btn{width:40px;height:40px;font-size:18px;color:var(--ink)}
.is-app .ap-bar .abar-btn:active{background:rgba(20,40,25,.07);transform:scale(.9)}
.is-app .ap-bar .ap-back{font-size:20px;margin-left:-2px;color:var(--forest)}
.is-app .ap-bar .abar-title{font:650 16.5px/1.2 var(--ui);text-align:left;padding-left:2px}
.is-app .ap-bar .abar-dot{top:3px;right:2px;border-color:var(--ap-bg)}
.is-app .ap-brand{gap:8px;font-size:21px;padding-left:4px}
.is-app .ap-brand .brand-mark{width:30px;height:30px}
.is-app .ap-rtitle{font:800 25px/1 var(--display);letter-spacing:-.03em;color:var(--ink);padding-left:8px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.is-app .ap-bar .abar-login{font-size:14.5px;padding:8px 14px;background:var(--forest);color:#fff;border-radius:999px;margin-left:4px}
.is-app .ap-bar .abar-login:active{background:var(--forest-2);transform:scale(.96)}

/* ── Bottom tab bar ──────────────────────────────────────────────── */
.is-app .tabbar.ap-tabs{display:grid;grid-template-columns:repeat(5,1fr);height:var(--tbh);padding:0 4px env(safe-area-inset-bottom);background:rgba(252,251,248,.9);
  backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);border-top:.5px solid rgba(20,40,25,.14);box-shadow:none}
.is-app .ap-tabs>a,.is-app .ap-tabs>button{gap:2px;font:600 10.5px/1 var(--ui);color:#7A857E;letter-spacing:0}
.is-app .ap-tabs>a i,.is-app .ap-tabs>button>i{font-size:21px;width:52px;height:28px;background:none!important;transition:transform .18s var(--ap-ease),color .2s}
.is-app .ap-tabs .on{color:var(--forest)}
.is-app .ap-tabs .on i{color:var(--forest)}
.is-app .ap-tabs>a:active i,.is-app .ap-tabs>a:active .tab-av{transform:scale(.84)}
.is-app .ap-tabs .tab-add i{width:46px;height:46px;border-radius:16px;margin-top:0;background:var(--forest)!important;color:var(--lime);font-size:20px;box-shadow:0 6px 16px -6px rgba(20,83,45,.55)}
.is-app .ap-tabs .tab-av{width:30px;height:30px;transition:transform .18s var(--ap-ease),box-shadow .2s}
.is-app .ap-tabs .tab-dot{top:4px;left:calc(50% + 7px);border-color:#fff}
.is-app .ap-tabs .on .tab-av{box-shadow:0 0 0 2px var(--forest)}

/* Sheets + search inherit the app shell; just align with our bars */
.is-app .sheet{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
.is-app .sx{padding-top:env(safe-area-inset-top)}
.is-app .flashes{top:calc(var(--ap-top) + 8px)}

/* ── Press states ("haptic" feel) ────────────────────────────────── */
.is-app .card,.is-app .ap-pcard,.is-app .ap-quick a,.is-app .ap-tiles a,.is-app .ap-chip-card,.is-app .sheet-tile,.is-app .sx-cats a,.is-app .wcard,.is-app .btn,.is-app .chip,.is-app .ap-search,.is-app .ap-inbox a,.is-app .ap-join,.is-app .ap-near-ask{transition:transform .16s var(--ap-ease),box-shadow .2s,background .15s}
.is-app .card:active,.is-app .ap-pcard:active,.is-app .ap-quick a:active,.is-app .ap-tiles a:active,.is-app .ap-chip-card:active,.is-app .sheet-tile:active,.is-app .sx-cats a:active,.is-app .wcard:active,.is-app .ap-search:active,.is-app .ap-inbox a:active,.is-app .ap-join:active{transform:scale(.97)}
.is-app .btn:active,.is-app .chip:active{transform:scale(.96)}
.is-app .ap-row:active,.is-app .ap-post:active,.is-app .ap-event:active,.is-app .ap-wiki:active,.is-app .ap-me-top:active,.is-app .ap-set-me:active{background:rgba(20,40,25,.05)}
@media (hover:hover){.is-app .card:hover{transform:none}}

/* ── Screen transitions ──────────────────────────────────────────── */
html.is-app[data-ap-dir]::view-transition-group(root){animation-duration:.38s}
html.is-app[data-ap-dir=push]::view-transition-old(root){animation:.38s var(--ap-ease) both ap-push-out}
html.is-app[data-ap-dir=push]::view-transition-new(root){animation:.38s var(--ap-ease) both ap-push-in}
html.is-app[data-ap-dir=pop]::view-transition-old(root){animation:.34s var(--ap-ease) both ap-pop-out;z-index:2}
html.is-app[data-ap-dir=pop]::view-transition-new(root){animation:.34s var(--ap-ease) both ap-pop-in}
html.is-app[data-ap-dir=tab]::view-transition-old(root){animation:.16s ease-out both ap-fade-out}
html.is-app[data-ap-dir=tab]::view-transition-new(root){animation:.22s ease-out both ap-fade-in}
html.is-app[data-ap-dir]::view-transition-old(abar),html.is-app[data-ap-dir]::view-transition-new(abar){animation-duration:.22s}
html.is-app[data-ap-dir]::view-transition-group(tabbar){animation:none}
html.is-app[data-ap-dir]::view-transition-old(tabbar){display:none}
html.is-app[data-ap-dir]::view-transition-new(tabbar){animation:none}
@keyframes ap-push-in{from{transform:translateX(100%);box-shadow:-20px 0 40px rgba(0,0,0,.12)}to{transform:none;box-shadow:-20px 0 40px rgba(0,0,0,0)}}
@keyframes ap-push-out{to{transform:translateX(-28%);filter:brightness(.92)}}
@keyframes ap-pop-in{from{transform:translateX(-28%);filter:brightness(.92)}to{transform:none}}
@keyframes ap-pop-out{from{box-shadow:-20px 0 40px rgba(0,0,0,.12)}to{transform:translateX(100%);box-shadow:-20px 0 40px rgba(0,0,0,0)}}
@keyframes ap-fade-out{to{opacity:0}}
@keyframes ap-fade-in{from{opacity:0;transform:translateY(6px)}}
/* Fallback when the View Transitions API is missing */
.is-app main.ap-in-push{animation:.34s var(--ap-ease) both ap-fb-push}
.is-app main.ap-in-pop{animation:.3s var(--ap-ease) both ap-fb-pop}
.is-app main.ap-in-tab{animation:.22s ease-out both ap-fade-in}
@keyframes ap-fb-push{from{transform:translateX(36%);opacity:.2}}
@keyframes ap-fb-pop{from{transform:translateX(-24%);opacity:.2}}
@media (prefers-reduced-motion:reduce){html.is-app[data-ap-dir]::view-transition-old(root),html.is-app[data-ap-dir]::view-transition-new(root){animation:none}}

/* Swipe from the left edge to go back */
.is-app body.ap-swiping>*:not(.tabbar):not(.sheet):not(.sheet-scrim):not(.sx):not(.toast){transform:translate3d(var(--ap-sx,0),0,0);will-change:transform}
.is-app body.ap-swiping>main{box-shadow:-18px 0 36px -12px rgba(0,0,0,.18)}
.is-app body.ap-swipe-end>*:not(.tabbar):not(.sheet):not(.sheet-scrim):not(.sx){transition:transform .22s var(--ap-ease)}
.ap-shade{position:fixed;inset:0;z-index:-1;background:#0b1a10;opacity:0;pointer-events:none}
.ap-shade:not(.on){display:none}

/* ── Progress bar, pull-to-refresh, skeleton, offline ────────────── */
.ap-progress{position:fixed;top:env(safe-area-inset-top);left:0;right:0;height:3px;z-index:3000;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);opacity:0;background:linear-gradient(90deg,var(--leaf),var(--lime))}
.ap-progress.run{opacity:1;animation:ap-prog 8s cubic-bezier(.1,.7,.2,1) forwards}
.ap-progress.done{animation:none;transform:scaleX(1);opacity:0;transition:opacity .3s .1s,transform .2s}
@keyframes ap-prog{0%{transform:scaleX(0)}10%{transform:scaleX(.35)}100%{transform:scaleX(.92)}}
.ap-ptr{position:fixed;left:50%;top:calc(var(--ap-top) - 44px);z-index:1040;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--muted);
  box-shadow:0 6px 18px -6px rgba(20,40,25,.35),0 0 0 .5px rgba(20,40,25,.08);transform:translate(-50%,0);opacity:0;pointer-events:none;font-size:15px}
.ap-ptr:not(.on){display:none}
.ap-ptr.ready{color:var(--forest)}
.ap-ptr.ready i::before{content:"\f021"}
.ap-ptr.spin{transition:transform .2s var(--ap-ease);opacity:1!important}
.ap-ptr.spin i{animation:fa-spin .8s linear infinite}
.ap-ptr.spin i::before{content:"\f110"}
.ap-skel{position:fixed;left:0;right:0;top:var(--ap-top);bottom:var(--tbh);z-index:1000;background:var(--ap-bg);padding:22px 16px;opacity:0;transition:opacity .18s;pointer-events:none;overflow:hidden}
.ap-skel.show{opacity:1}
.ap-skel>div{border-radius:12px;margin-bottom:12px;background:linear-gradient(90deg,#ECE9E0 0,#F5F3EC 40%,#ECE9E0 80%);background-size:300% 100%;animation:ap-shim 1.2s linear infinite}
.ap-sk-h{height:34px;width:62%;border-radius:10px}
.ap-sk-l{height:14px}.ap-sk-l.w90{width:90%}.ap-sk-l.w70{width:70%}.ap-sk-l.w60{width:60%}.ap-sk-l.w40{width:40%}
.ap-sk-card{height:170px;border-radius:20px!important;margin:18px 0!important}
@keyframes ap-shim{from{background-position:100% 0}to{background-position:-50% 0}}
.ap-err{position:fixed;inset:0;z-index:2500;display:grid;place-items:center;padding:24px;background:rgba(246,244,238,.96);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .2s}
.ap-err.show{opacity:1}
.ap-err[hidden]{display:none}
.ap-err-in{max-width:320px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--ui)}
.ap-err-in h2{font:800 26px/1.1 var(--display);margin:8px 0 0}
.ap-err-in p{color:var(--muted);margin:0 0 8px}
.ap-err-ico{width:76px;height:76px;border-radius:26px;display:grid;place-items:center;background:var(--mint);color:var(--forest);font-size:30px}

/* ── Shared app building blocks ──────────────────────────────────── */
.ap-screen{padding:6px 16px 28px;max-width:640px;margin:0 auto}
.ap-large{font:800 34px/1.05 var(--display);letter-spacing:-.03em;margin:8px 2px 18px}
.ap-sec{margin-top:28px}
.ap-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 2px 12px}
.ap-sec-h h2{font:750 21px/1.15 var(--display);letter-spacing:-.02em;margin:0}
.ap-sec-h a{font:600 14px/1 var(--ui);color:var(--leaf-2);white-space:nowrap;padding:6px 0}
.ap-sec-h a i{font-size:11px;margin-left:2px}
.ap-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:none;overscroll-behavior-x:contain;scroll-padding:0 16px}
.ap-rail::-webkit-scrollbar{display:none}
.ap-pcard{flex:0 0 66%;max-width:250px;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--ap-card);border-radius:20px;overflow:hidden;color:var(--ink);box-shadow:0 1px 2px rgba(20,40,25,.06),0 8px 24px -14px rgba(20,40,25,.25)}
.ap-pcard:hover{color:var(--ink)}
.ap-pcard-img{position:relative;display:block;aspect-ratio:16/11;background:var(--paper-2);overflow:hidden}
.ap-pcard-img img,.ap-pcard-img .ph{width:100%;height:100%;object-fit:cover}
.ap-pcard-img .ph{display:grid;place-items:center;font-size:34px;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c)}
.ap-pcard-img .ph span{display:none}
.ap-v{position:absolute;left:10px;top:10px;font:700 11px/1 var(--ui);font-style:normal;color:var(--forest-2);background:rgba(217,249,157,.95);padding:6px 8px;border-radius:999px}
.ap-pcard-b{display:flex;flex-direction:column;gap:3px;padding:11px 13px 13px}
.ap-pcard-b small{font:650 11.5px/1.2 var(--ui);color:var(--c,var(--muted));text-transform:uppercase;letter-spacing:.04em}
.ap-pcard-b b{font:650 15.5px/1.3 var(--ui);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ap-pcard-m{display:flex;gap:10px;font-size:13px;color:var(--muted);margin-top:1px}
.ap-pcard-m i{font-size:11px}
.ap-star{color:var(--ink);font-weight:650}.ap-star i{color:var(--sun)}
.ap-new{color:var(--leaf-2);font-weight:650}
.ap-more-card{flex-basis:38%;align-items:center;justify-content:center;gap:10px;background:var(--mint);color:var(--forest);font-weight:650;text-align:center;padding:18px}
.ap-more-card span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;font-size:18px}
.ap-more-card b{font-size:14.5px}

/* Grouped lists (settings / me) */
.ap-group-h{font:650 13px/1 var(--ui);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:26px 6px 8px}
.ap-group{background:var(--ap-card);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(20,40,25,.05)}
.ap-group+.ap-group{margin-top:14px}
.ap-row{display:flex;align-items:center;gap:13px;padding:11px 14px;color:var(--ink);position:relative;min-height:56px;transition:background .15s}
.ap-row:hover{color:var(--ink)}
.ap-row+.ap-row::before{content:"";position:absolute;top:0;left:60px;right:0;border-top:.5px solid var(--ap-sep)}
.ap-ri{flex:0 0 32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--c);color:#fff;font-size:14.5px}
.ap-rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ap-rt b{font:550 15.5px/1.25 var(--ui)}
.ap-rt small{font-size:13px;color:var(--muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-rc{color:#B9C0BB;font-size:13px}
.ap-rb{font:700 12px/20px var(--ui);font-style:normal;min-width:22px;height:20px;padding:0 6px;border-radius:10px;background:var(--berry);color:#fff;text-align:center}
.ap-row-danger .ap-rt b{color:var(--berry)}
.ap-foot{text-align:center;color:var(--muted);font-size:12.5px;margin:28px 0 8px}
.ap-foot i{color:var(--leaf)}
.ap-foot .brand-mark{display:inline-block;margin-bottom:6px}

/* ── Home ────────────────────────────────────────────────────────── */
.ap-hello{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 2px 14px}
.ap-hello small{display:block;font:600 14px/1.2 var(--ui);color:var(--muted)}
.ap-hello h1{font:800 30px/1.08 var(--display);letter-spacing:-.03em;margin:2px 0 0}
.ap-hello-av{flex:0 0 auto;border-radius:50%;box-shadow:0 0 0 3px #fff,0 4px 12px -4px rgba(20,40,25,.4)}
.ap-search{display:flex;align-items:center;gap:12px;width:100%;height:52px;padding:0 18px;border:0;border-radius:16px;background:#fff;color:var(--muted);font:500 15.5px/1 var(--ui);text-align:left;cursor:pointer;
  box-shadow:0 1px 2px rgba(20,40,25,.06),0 10px 30px -18px rgba(20,40,25,.35)}
.ap-search i{color:var(--forest);font-size:17px}
.ap-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 6px;margin:20px 0 0}
.ap-quick a{display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--ink);text-align:center}
.ap-quick a span{width:58px;height:58px;border-radius:19px;display:grid;place-items:center;font-size:22px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--c) 22%,transparent)}
.ap-quick a b{font:600 12.5px/1.15 var(--ui)}
.ap-quick a[aria-busy] span i::before{content:"\f110"}
.ap-quick a[aria-busy] span i{animation:fa-spin 1s linear infinite}
.ap-inbox{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.ap-inbox a,.ap-join{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(20,40,25,.05)}
.ap-inbox a>span:nth-child(2),.ap-join>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}
.ap-inbox b,.ap-join b{font:650 15px/1.25 var(--ui)}
.ap-inbox small,.ap-join small{font-size:13px;color:var(--muted)}
.ap-inbox .fa-chevron-right,.ap-join .fa-chevron-right{color:#B9C0BB;font-size:13px}
.ap-ib-ico{flex:0 0 40px;height:40px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 13%,#fff);color:var(--c);font-size:16px}
.ap-join{margin-top:22px;background:linear-gradient(120deg,var(--forest),#1F6B3B);color:#fff;box-shadow:0 12px 30px -16px rgba(20,83,45,.8)}
.ap-join:hover{color:#fff}
.ap-join small{color:rgba(255,255,255,.75)}
.ap-join .fa-chevron-right{color:var(--lime)}
.ap-join-ico{flex:0 0 42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--lime);color:var(--forest-2);font-size:18px}
.ap-near{min-height:84px}
.ap-near.is-busy{opacity:.6}
.ap-near-ask{display:flex;align-items:center;gap:13px;padding:14px;border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(20,40,25,.05)}
.ap-near-ask>div{flex:1;min-width:0;display:flex;flex-direction:column}
.ap-near-ask b{font:650 15px/1.25 var(--ui)}
.ap-near-ask small{font-size:13px;color:var(--muted);line-height:1.35}
.ap-near-pulse{position:relative;flex:0 0 44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--forest);font-size:17px}
.ap-near-pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--leaf);opacity:0;animation:ap-pulse 2.2s ease-out infinite}
@keyframes ap-pulse{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.35);opacity:0}}
.ap-chip-card{flex:0 0 auto;scroll-snap-align:start;display:flex;align-items:center;gap:10px;max-width:250px;padding:7px 14px 7px 7px;border-radius:16px;background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(20,40,25,.06)}
.ap-chip-card img,.ap-chip-card span{flex:0 0 44px;width:44px;height:44px;border-radius:11px;object-fit:cover;display:grid;place-items:center;background:var(--mint);color:var(--forest)}
.ap-chip-card b{font:600 14px/1.25 var(--ui);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ap-list{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 1px 2px rgba(20,40,25,.05)}
.ap-post,.ap-event,.ap-wiki{display:flex;align-items:center;gap:12px;padding:13px 14px;color:var(--ink);position:relative}
.ap-post:hover,.ap-event:hover,.ap-wiki:hover{color:var(--ink)}
.ap-list>a+a::before{content:"";position:absolute;top:0;left:14px;right:0;border-top:.5px solid var(--ap-sep)}
.ap-post{align-items:flex-start}
.ap-post .avatar{flex:0 0 auto}
.ap-post-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14.5px;line-height:1.4}
.ap-post-b b{font-weight:650;font-size:14.5px}
.ap-post-b b small{font-weight:500;color:var(--muted);font-size:12.5px;margin-left:4px}
.ap-post-b>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink-2)}
.ap-post-m{color:var(--muted);font-size:12.5px;margin-top:3px}
.ap-post img{flex:0 0 64px;width:64px;height:64px;border-radius:12px;object-fit:cover}
.ap-event>span:nth-child(2),.ap-wiki>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}
.ap-event b,.ap-wiki b{font:650 15px/1.3 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-event small,.ap-wiki small{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-event .fa-chevron-right,.ap-wiki .fa-chevron-right{color:#B9C0BB;font-size:13px}
.ap-ev-d{flex:0 0 46px;height:50px;border-radius:13px;background:#FDF4FF;color:#A21CAF;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.ap-ev-d small{font:700 10.5px/1 var(--ui);text-transform:uppercase;letter-spacing:.05em;color:#C026D3}
.ap-ev-d b{font:800 20px/1.05 var(--display);color:#86198F;overflow:visible}
.ap-wiki .ap-ib-ico{flex-basis:40px}
.ap-more{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:28px}
.ap-more a{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:15px;background:#fff;color:var(--ink);font:600 14.5px/1.2 var(--ui);box-shadow:0 1px 2px rgba(20,40,25,.05)}
.ap-more a i{color:var(--leaf-2);width:18px;text-align:center}
.ap-more a:active{transform:scale(.97)}

/* ── Welcome (first run) ─────────────────────────────────────────── */
.is-app body.ap-onb{padding-bottom:0;background:linear-gradient(180deg,#F1F8EC 0,#F6F4EE 60%)}
.is-app body.ap-onb .abar,.is-app body.ap-onb .tabbar{display:none!important}
.ap-welcome{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 calc(18px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto}
.ap-wl-top{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 0}
.ap-wl-logo{display:flex;align-items:center;gap:9px;font:800 21px/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.ap-wl-skip{font:600 15px/1 var(--ui);color:var(--muted);padding:10px 4px}
.ap-wl-track{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.ap-wl-track::-webkit-scrollbar{display:none}
.ap-wl-slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px 30px 0}
.ap-wl-slide h1{font:800 33px/1.08 var(--display);letter-spacing:-.03em;margin:30px 0 12px}
.ap-wl-slide p{font-size:16px;line-height:1.55;color:var(--ink-2);max-width:340px;margin:0}
.ap-wl-art{position:relative;width:230px;height:230px;display:grid;place-items:center}
.ap-wl-ring{position:absolute;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--c) 35%,transparent)}
.ap-wl-ring.r1{inset:0;animation:ap-spin 40s linear infinite}
.ap-wl-ring.r2{inset:34px;border-style:solid;border-color:color-mix(in srgb,var(--c) 14%,transparent);background:color-mix(in srgb,var(--c) 7%,transparent)}
.ap-wl-main{width:112px;height:112px;border-radius:36px;display:grid;place-items:center;font-size:46px;color:#fff;background:linear-gradient(140deg,color-mix(in srgb,var(--c) 80%,#fff),var(--c));box-shadow:0 24px 40px -18px var(--c);transform:rotate(-6deg)}
.ap-wl-orb{position:absolute;width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:#fff;color:var(--c);font-size:20px;box-shadow:0 10px 24px -10px rgba(20,40,25,.35);animation:ap-float 4s ease-in-out infinite}
.ap-wl-orb.o1{top:10px;right:18px}.ap-wl-orb.o2{bottom:22px;right:0;animation-delay:-1.3s}.ap-wl-orb.o3{left:4px;top:70px;animation-delay:-2.6s}
@keyframes ap-spin{to{transform:rotate(360deg)}}
@keyframes ap-float{50%{transform:translateY(-8px)}}
.ap-wl-dots{display:flex;justify-content:center;gap:7px;padding:16px 0 20px}
.ap-wl-dots button{width:8px;height:8px;border-radius:4px;border:0;padding:0;background:#CFD6CF;cursor:pointer;transition:width .3s var(--ap-ease),background .3s}
.ap-wl-dots button.on{width:24px;background:var(--forest)}
.ap-wl-cta{display:flex;flex-direction:column;gap:10px;padding:0 20px}
.ap-wl-cta .btn{min-height:54px;border-radius:16px}
.ap-wl-guest{text-align:center;font:600 15px/1 var(--ui);color:var(--forest);padding:14px 0 4px}
.ap-wl-guest i{font-size:12px;margin-left:4px}

/* ── Me ──────────────────────────────────────────────────────────── */
.ap-me-card{background:#fff;border-radius:24px;padding:16px;box-shadow:0 1px 2px rgba(20,40,25,.05),0 14px 34px -24px rgba(20,40,25,.4);margin-top:4px}
.ap-me-top{display:flex;align-items:center;gap:14px;color:var(--ink);border-radius:16px;margin:-6px;padding:6px}
.ap-me-top:hover{color:var(--ink)}
.ap-me-top>.fa-chevron-right{color:#B9C0BB;font-size:13px;margin-left:auto}
.ap-me-id{display:flex;flex-direction:column;min-width:0}
.ap-me-id b{font:800 22px/1.15 var(--display);letter-spacing:-.02em}
.ap-me-id small{color:var(--muted);font-size:14px}
.ap-me-lvl{font-size:12.5px;margin-top:4px;color:var(--ink-2)}
.ap-me-stats{display:grid;grid-template-columns:repeat(4,1fr);margin:16px -4px 0;padding-top:14px;border-top:.5px solid var(--ap-sep)}
.ap-me-stats a{display:flex;flex-direction:column;align-items:center;color:var(--ink);border-radius:12px;padding:4px 0}
.ap-me-stats a:active{background:rgba(20,40,25,.05)}
.ap-me-stats b{font:750 19px/1.2 var(--ui)}
.ap-me-stats small{font-size:12px;color:var(--muted)}
.ap-me-act{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.ap-me-act .btn{min-height:40px;font-size:14px;border-radius:12px;background:var(--ap-bg);border-color:transparent}
.ap-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.ap-tiles a{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 4px 12px;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(20,40,25,.05)}
.ap-tiles span{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 13%,#fff);color:var(--c);font-size:17px}
.ap-tiles b{font:600 12.5px/1 var(--ui)}
.ap-tiles em{position:absolute;top:8px;right:10px;font:700 11px/18px var(--ui);font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--berry);color:#fff;text-align:center}
.ap-logout{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;padding:15px;border-radius:18px;background:#fff;color:var(--berry);font:600 15.5px/1 var(--ui);box-shadow:0 1px 2px rgba(20,40,25,.05)}
.ap-logout:active{background:#FFF1F2}
.ap-guest{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 18px 22px;background:#fff;border-radius:24px;box-shadow:0 1px 2px rgba(20,40,25,.05)}
.ap-guest h1{font:800 26px/1.1 var(--display);letter-spacing:-.02em;margin:8px 0 0}
.ap-guest p{color:var(--muted);margin:0 0 8px}
.ap-guest .btn{border-radius:14px}
.ap-guest-s{padding:20px 16px}
.ap-set-me{display:flex;align-items:center;gap:13px;padding:13px 14px;background:#fff;border-radius:18px;color:var(--ink);box-shadow:0 1px 2px rgba(20,40,25,.05)}
.ap-set-me:hover{color:var(--ink)}
.ap-set-me>span{flex:1;min-width:0;display:flex;flex-direction:column}
.ap-set-me b{font:650 17px/1.25 var(--ui)}
.ap-set-me small{color:var(--muted);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-set-me>.fa-chevron-right{color:#B9C0BB;font-size:13px}

/* ── Website pages inside the app: native polish ─────────────────── */
.is-app .wrap,.is-app .wrap-s,.is-app .wrap-m{padding-left:16px;padding-right:16px}
.is-app .card{border-radius:20px}
.is-app .flash{border-radius:14px}
.is-app .toast{bottom:calc(var(--tbh) + 14px)}
.is-app input,.is-app select,.is-app textarea{font-size:16px}  /* no zoom-on-focus on iOS */