/* Sofo app shell — warm paper + Sofo orange (the Command Center sign-in's palette), follows the phone's light / dark. */
:root{--bg:#F7F2EC;--panel:#FFFFFF;--ink:#1E1A16;--ink-2:#4A423A;--muted:#675D53;--line:#E8DFD4;--line-2:#D9CDBF;
  --orange:#F97316;--orange-2:#EA580C;--orange-ink:#B93D0A;--on-orange:#1C1205;--glow:rgba(249,115,22,.20);--ghost:rgba(249,115,22,.14);
  --shadow:0 1px 2px rgba(30,26,22,.05),0 18px 50px rgba(120,60,20,.12);--scrim:rgba(30,20,10,.42);--bad:#B42318;--ok:#15803D;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#120F0D;--panel:#1C1814;--ink:#F4EEE8;--ink-2:#D7CDC2;--muted:#A89C8F;--line:#2E2822;--line-2:#3B332B;
  --orange-ink:#FB923C;--glow:rgba(249,115,22,.16);--ghost:rgba(249,115,22,.22);--shadow:0 1px 2px rgba(0,0,0,.4),0 24px 60px rgba(0,0,0,.45);--scrim:rgba(0,0,0,.6);--bad:#F97066;--ok:#4ADE80;color-scheme:dark}}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{overflow:hidden;overscroll-behavior:none}
.stage{position:fixed;inset:0}
.app{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:var(--bg)}
.stage.chooser .app{display:none}
button,a.btn{font:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* ── the splash: the sun rises along its arc while Google opens the page ── */
.splash{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:28px 16px;overflow-y:auto;
  background:radial-gradient(120% 70% at 50% -12%,var(--glow),rgba(249,115,22,0) 62%),radial-gradient(80% 50% at 110% 112%,rgba(234,88,12,.10),rgba(234,88,12,0) 60%),var(--bg);
  transition:opacity .35s ease,visibility 0s linear .35s}
.splash.gone{opacity:0;visibility:hidden;pointer-events:none}
.sp-wrap{width:100%;max-width:400px;text-align:center;animation:spIn .5s cubic-bezier(.2,.8,.2,1) both}
.sun{position:relative;width:220px;height:120px;margin:0 auto -54px}
.arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.arc path{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:3 6;stroke-linecap:round}
.arm{position:absolute;left:110px;top:112px;width:0;height:0;transform:rotate(0deg);animation:sweep 2.6s cubic-bezier(.45,0,.55,1) infinite alternate}
.dot{position:absolute;left:-102px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 6px var(--ghost),0 0 22px 4px rgba(249,115,22,.45)}
.mark{position:relative;width:92px;height:92px;margin:0 auto 18px;border-radius:28px;background:var(--panel);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(249,115,22,.18)}
@media (prefers-color-scheme:dark){.mark{background:#FFFFFF}}
.mark img{width:58px;height:58px;object-fit:contain}
.sp-k{margin:0;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-ink)}
.sp-t{margin:6px 0 6px;font-size:26px;line-height:1.2;font-weight:800;letter-spacing:-.02em}
.sp-s{margin:0 auto;max-width:320px;font-size:15px;line-height:1.5;color:var(--muted)}
.sp-bar{position:relative;width:132px;height:4px;margin:22px auto 0;border-radius:999px;background:var(--line);overflow:hidden}
.sp-bar i{position:absolute;top:0;bottom:0;width:40%;border-radius:999px;background:linear-gradient(90deg,var(--orange),var(--orange-2));animation:bar 1.4s ease-in-out infinite}
.splash.idle .sp-bar,.splash.idle .sun .arm{display:none}
.sp-acts{display:flex;flex-direction:column;gap:10px;margin:22px auto 0;max-width:320px}
.sp-acts:empty{display:none}
.splash.off .mark,.splash.slow .mark{box-shadow:none}

/* ── buttons ── */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:12px 18px;border-radius:16px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .2s,border-color .2s}
.btn:active{transform:translateY(1px)}
.btn.pri{background:linear-gradient(180deg,var(--orange),#F2690C);border-color:transparent;color:var(--on-orange);box-shadow:0 10px 24px rgba(234,88,12,.26)}
.btn.link{min-height:44px;border:0;background:none;color:var(--orange-ink);font-size:15px}
.btn svg{width:20px;height:20px;flex:none}

/* ── the chooser (the address without a page) ── */
.choose{position:absolute;inset:0;overflow-y:auto;display:flex;align-items:center;justify-content:center;padding:32px 16px calc(32px + env(safe-area-inset-bottom));
  background:radial-gradient(120% 70% at 50% -12%,var(--glow),rgba(249,115,22,0) 62%),var(--bg)}
.choose .sp-wrap{max-width:440px}
.cards{display:flex;flex-direction:column;gap:12px;margin-top:24px;text-align:left}
.card{display:flex;align-items:center;gap:14px;min-height:76px;padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:var(--panel);color:var(--ink);text-decoration:none;box-shadow:var(--shadow);transition:border-color .2s,transform .12s}
.card:hover{border-color:var(--orange)}
.card:active{transform:translateY(1px)}
.card .ci{width:46px;height:46px;flex:none;border-radius:14px;background:var(--ghost);color:var(--orange-ink);display:flex;align-items:center;justify-content:center}
.card .ci svg{width:24px;height:24px}
.card b{display:block;font-size:16.5px;font-weight:800}
.card small{display:block;margin-top:3px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.card .go{margin-left:auto;color:var(--muted)}
.note{margin:18px 4px 0;font-size:14px;line-height:1.5;color:var(--muted);text-align:center}

/* ── the bottom sheet (turn on alerts · add to the Home Screen · install) ── */
.sheet{position:fixed;inset:0;z-index:20;display:none;align-items:flex-end;justify-content:center;background:var(--scrim)}
.sheet.on{display:flex;animation:fade .2s ease both}
.sh-card{width:100%;max-width:460px;max-height:92vh;overflow-y:auto;background:var(--panel);color:var(--ink);border-radius:26px 26px 0 0;padding:10px 20px calc(20px + env(safe-area-inset-bottom));box-shadow:var(--shadow);animation:up .32s cubic-bezier(.2,.8,.2,1) both}
@media (min-width:700px){.sheet{align-items:center}.sh-card{border-radius:26px;padding:26px 24px 22px}.sh-grab{display:none}}
.sh-grab{width:42px;height:5px;border-radius:99px;background:var(--line-2);margin:0 auto 14px}
.sh-ic{width:58px;height:58px;margin:4px auto 12px;border-radius:50%;background:var(--ghost);color:var(--orange-ink);display:flex;align-items:center;justify-content:center}
.sh-ic svg{width:28px;height:28px}
.sh-card h2{margin:0 0 8px;text-align:center;font-size:21px;line-height:1.25;font-weight:800;letter-spacing:-.01em}
.sh-card p{margin:0 auto 16px;max-width:360px;text-align:center;font-size:15px;line-height:1.55;color:var(--muted)}
.steps{list-style:none;margin:4px 0 18px;padding:0;display:flex;flex-direction:column;gap:10px}
.steps li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--bg);font-size:15px;line-height:1.4}
.steps .n{width:28px;height:28px;flex:none;border-radius:50%;background:var(--orange);color:var(--on-orange);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.steps svg{width:20px;height:20px;vertical-align:-4px;color:var(--orange-ink)}
.sh-acts{display:flex;flex-direction:column;gap:8px}

/* ── the toast ── */
.toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));z-index:30;max-width:min(92vw,420px);padding:13px 18px;border-radius:14px;background:var(--ink);color:var(--bg);font-size:14.5px;font-weight:600;line-height:1.4;box-shadow:var(--shadow);transform:translate(-50%,-16px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.nojs{position:fixed;inset:auto 0 30% 0;text-align:center;color:var(--muted)}

@keyframes sweep{from{transform:rotate(8deg)}to{transform:rotate(172deg)}}
@keyframes bar{0%{left:-40%}100%{left:100%}}
@keyframes spIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.arm{animation:none;transform:rotate(90deg)}.sp-bar i{animation-duration:3s}.sp-wrap,.sh-card,.sheet.on{animation:none}}