/* TempoLife try.php page styles (v2.60.1) */
  :root { --bg:#0f1220; --card:#1a1f33; --tx:#eef1fb; --mut:#9aa3c0; --acc:#5b8cff; --ok:#3ecf8e; }
  * { box-sizing:border-box; margin:0; }
  body { background:var(--bg); color:var(--tx); font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
         display:flex; flex-direction:column; align-items:center; padding:24px 16px 60px; min-height:100vh; }
  .wrap { width:100%; max-width:480px; }
  .logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; margin-bottom:24px; }
  .logo img { width:36px; height:36px; border-radius:10px; object-fit:cover; }
  h1 { font-size:30px; line-height:1.2; margin-bottom:10px; }
  .sub { color:var(--mut); margin-bottom:24px; }
  .drop { width:100%; border:2px dashed #2c3454; border-radius:20px; padding:40px 20px; text-align:center; cursor:pointer;
          background:transparent; color:inherit; font:inherit; }
  .drop:hover { border-color:var(--acc); }
  .drop:focus-visible, .btn:focus-visible, .play-link:focus-visible { outline:3px solid #9fbcff; outline-offset:3px; }
  .drop .cam { font-size:44px; margin-bottom:10px; }
  .btn { background:var(--acc); border:none; color:#fff; font-weight:700; font-size:16px; padding:14px 24px;
         border-radius:12px; cursor:pointer; display:inline-block; text-decoration:none; }
  /* v2.61.7 — iOS install shortcut. Ghost style: it must never outrank the
     scan button or the signup CTA, both of which are the page's real job. */
  .ios-install-link { display:inline-block; margin-top:18px; padding:11px 20px; font:inherit; font-size:14px;
          background:transparent; border:1.5px solid var(--acc); color:var(--tx); border-radius:12px; cursor:pointer; }
  .ios-install-link:hover { background:rgba(91,140,255,.12); }
  .ios-install-link:focus-visible { outline:3px solid #9fbcff; outline-offset:3px; }
  .android-install-note { margin:8px auto 0; max-width:420px; color:var(--mut); font-size:12px; line-height:1.45; text-align:center; }
  .preview { width:100%; border-radius:16px; margin:16px 0; display:none; }
  .spinner { display:none; text-align:center; color:var(--mut); margin:16px 0; }
  .items { margin-top:16px; }
  .item { display:flex; justify-content:space-between; background:rgba(255,255,255,.05); border-radius:12px;
          padding:12px 14px; margin-bottom:8px; }
  .item small { color:var(--mut); display:block; }
  .total { text-align:center; font-size:26px; font-weight:800; color:var(--ok); margin:16px 0 4px; display:none; }
  .cta { background:var(--card); border-radius:16px; padding:22px; margin-top:24px; text-align:center; display:none; }
  .cta b { display:block; font-size:17px; margin-bottom:8px; }
  .play-link { display:inline-block; color:var(--mut); font-size:13px; margin-top:14px; text-underline-offset:3px; }
  .err { color:#ff7b7b; margin-top:14px; display:none; text-align:center; }
  .privacy { color:var(--mut); font-size:12px; margin-top:30px; text-align:center; }
  .ai-consent { margin:0 0 14px; padding:14px; border:1px solid #2c3454; border-radius:14px; background:rgba(255,255,255,.035); }
  .ai-consent label { display:flex; align-items:flex-start; gap:10px; cursor:pointer; color:var(--mut); font-size:12px; line-height:1.45; }
  .ai-consent input { width:22px; height:22px; flex:0 0 22px; margin-top:1px; accent-color:var(--acc); }
  .ai-consent a { display:inline-block; margin:8px 0 0 32px; color:#9fbcff; font-size:12px; text-underline-offset:3px; }
  .ai-consent input:focus-visible, .ai-consent a:focus-visible { outline:3px solid #9fbcff; outline-offset:3px; }
