/* TriggerMark — Design tokens, reset, app shell, screens, top bar and bottom nav.
   Split out of index.html. */

  :root{
    --bg:#0e1218;
    --bg-soft:#141a22;
    --card:#1a212b;
    --card-2:#212a35;
    --border:#2a3340;
    --border-soft:#232b36;
    --text:#eef2f6;
    --text-dim:#96a3b3;
    --text-faint:#5e6b7b;
    --mark:#d24b4b;
    --mark-deep:#a83737;
    --mark-glow:rgba(210,75,75,.32);
    --calm:#5f93a8;
    --calm-soft:rgba(95,147,168,.14);
    --amber:#c99a4b;
    --amber-soft:rgba(201,154,75,.15);
    --ok:#6fa287;
    --ok-soft:rgba(111,162,135,.14);
    --paper:#f3ecda;
    --paper-line:#e2d6b8;
    --paper-ink:#3a2f22;
    --radius-l:22px;
    --radius-m:14px;
    --radius-s:9px;
    --shadow:0 10px 34px rgba(0,0,0,.38);
    --safe-b:env(safe-area-inset-bottom,0px);
    --safe-t:env(safe-area-inset-top,0px);
  }

  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html{direction:rtl;background:var(--bg);}
  html,body{height:100%;}
  body{
    margin:0;
    min-height:100%;
    background:
      radial-gradient(ellipse 900px 500px at 50% -10%, rgba(95,147,168,.10), transparent 60%),
      var(--bg);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Arial Hebrew","Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,p,fieldset,legend{margin:0;padding:0;border:0;}
  button{font-family:inherit;}
  input,textarea{font-family:inherit;}
  ::selection{background:var(--mark-glow);}

  .visually-hidden{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }

  /* ---------- App shell ---------- */
  #app{
    max-width:560px;
    margin:0 auto;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    position:relative;
  }

  /* ---------- Top bar ---------- */
  .topbar{
    position:sticky;top:0;z-index:1050;
    padding:calc(16px + var(--safe-t)) 20px 14px;
    background:linear-gradient(180deg, var(--bg) 72%, transparent);
    backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:space-between;
    gap:10px;
  }
  .topbar h2{font-size:1.2rem;font-weight:700;}
  .topbar .eyebrow{
    display:block;
    font-size:.72rem;
    color:var(--calm);
    font-weight:700;
    letter-spacing:.06em;
    margin-bottom:2px;
  }
  .share-btn{
    display:flex;align-items:center;gap:7px;
    background:var(--card);
    border:1px solid var(--border);
    color:var(--text);
    padding:9px 15px;
    border-radius:999px;
    font-size:.85rem;
    font-weight:600;
    cursor:pointer;
    transition:background .15s ease, transform .12s ease;
    flex:none;
  }
  .share-btn:active{transform:scale(.95);}
  .share-btn svg{width:16px;height:16px;flex:none;}

  /* ---------- Screens ---------- */
  .screens{flex:1;display:flex;flex-direction:column;position:relative;}
  .screen{
    display:none;
    flex-direction:column;
    flex:1;
    padding-bottom:calc(96px + var(--safe-b));
    animation:screen-in .34s cubic-bezier(.22,.61,.36,1);
  }
  .screen.active{display:flex;}
  @keyframes screen-in{
    from{opacity:0;transform:translateY(10px);}
    to{opacity:1;transform:translateY(0);}
  }

  /* ---------- Bottom nav ---------- */
  .nav{
    position:fixed;
    right:0;left:0;bottom:0;
    display:flex;
    max-width:560px;
    margin:0 auto;
    background:rgba(20,26,34,.9);
    backdrop-filter:blur(14px);
    border-top:1px solid var(--border-soft);
    padding:8px 4px calc(8px + var(--safe-b));
    z-index:1100;
  }
  .nav-btn{
    flex:1;
    appearance:none;border:none;background:none;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:6px 2px 5px;
    border-radius:var(--radius-s);
    color:var(--text-faint);
    position:relative;
    transition:color .15s ease;
    min-width:0;
  }
  .nav-btn svg{width:20px;height:20px;transition:transform .15s ease;flex:none;}
  .nav-btn span{
    font-size:.6rem;
    font-weight:700;
    letter-spacing:0;
    line-height:1.2;
    text-align:center;
    max-width:100%;
  }
  .nav-btn.active{color:var(--calm);}
  .nav-btn.active svg{transform:translateY(-1px);}
  .nav-btn .badge{
    position:absolute;
    top:0px;left:calc(50% - 20px);
    min-width:15px;height:15px;
    padding:0 4px;
    background:var(--mark);
    color:#fff;
    font-size:.6rem;
    font-weight:800;
    border-radius:999px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 2px rgba(20,26,34,.9);
  }
  .nav-btn .badge[hidden]{display:none;}

  /* ---------- Personal-beta marker ---------- */
  .beta-tag{
    display:inline-block;
    margin-inline-start:8px;
    padding:2px 9px;
    border-radius:999px;
    background:rgba(201,154,75,.16);
    border:1px solid rgba(201,154,75,.5);
    color:var(--amber);
    font-size:.62rem;
    font-weight:800;
    letter-spacing:.04em;
    vertical-align:middle;
  }
  .landing .beta-tag{
    font-size:.78rem;
    padding:5px 14px;
    margin:0 0 22px;
    display:block;
    width:max-content;
    margin-inline:auto;
  }