:root{
    --ink:#12233b;
    --sky:#3aa0d8;
    --sun:#ffb43a;
    --coral:#ff6b6b;
    --lime:#4ec98a;
    --grape:#8b7bd8;
    --paper:#fef9f0;
    --card:#ffffff;
    --shadow:0 10px 30px rgba(18,35,59,.12);
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;}
  body{
    font-family:'Trebuchet MS','Segoe UI',system-ui,sans-serif;
    color:var(--ink);
    background:
      radial-gradient(120% 90% at 80% -10%, #ffe9c2 0%, transparent 55%),
      radial-gradient(120% 100% at -10% 110%, #cdeefb 0%, transparent 55%),
      var(--paper);
    min-height:100dvh;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    display:flex;flex-direction:column;align-items:center;
  }
  .wrap{width:100%;max-width:680px;padding:24px 20px 60px;flex:1;display:flex;flex-direction:column;}

  header{text-align:center;margin:14px 0 22px;}
  .logo{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--sky);font-weight:bold;}
  h1{font-size:clamp(34px,9vw,52px);line-height:.95;margin:6px 0 4px;
     background:linear-gradient(105deg,var(--coral),var(--sun) 55%,var(--grape));
     -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
  .tag{color:#6a7f95;font-size:15px;}

  .progress{display:flex;gap:6px;justify-content:center;margin:0 0 26px;}
  .dot{width:34px;height:6px;border-radius:99px;background:#e4dcc9;transition:.3s;}
  .dot.on{background:var(--sun);}
  .dot.done{background:var(--lime);}

  .screen{display:none;animation:rise .35s ease;}
  .screen.show{display:block;}
  @keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

  .q{font-size:26px;font-weight:bold;text-align:center;margin-bottom:6px;}
  .qsub{text-align:center;color:#6a7f95;margin-bottom:22px;font-size:15px;}

  .opts{display:grid;gap:12px;grid-template-columns:1fr 1fr;}
  @media(max-width:420px){.opts{grid-template-columns:1fr;}}
  .opt{
    background:var(--card);border:2px solid transparent;border-radius:20px;
    padding:20px 16px;font-size:17px;font-weight:bold;color:var(--ink);
    cursor:pointer;box-shadow:var(--shadow);transition:transform .12s,border-color .12s;
    display:flex;align-items:center;gap:12px;text-align:left;
  }
  .opt:active{transform:scale(.97);}
  .opt .emoji{font-size:26px;line-height:1;}
  .opt.sel{border-color:var(--sun);background:#fff7e8;}

  .navrow{display:flex;justify-content:flex-start;margin-top:24px;gap:12px;}
  button.ctrl{
    border:none;border-radius:99px;padding:14px 26px;font-size:16px;font-weight:bold;
    cursor:pointer;font-family:inherit;transition:transform .12s,opacity .2s;
  }
  button.ctrl:active{transform:scale(.96);}
  .back{background:#eee5d2;color:#6a7f95;}
  .next{background:var(--ink);color:#fff;flex:1;}
  .next:disabled{opacity:.4;cursor:not-allowed;}

  /* results */
  .rhead{text-align:center;margin-bottom:20px;}
  .rhead h2{font-size:28px;margin-bottom:4px;}
  .rhead p{color:#6a7f95;}
  /* tweak-your-answers dropdown row above the results */
  .qfilters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px;}
  .qfsel{font-family:inherit;font-size:13px;font-weight:bold;color:var(--ink);
    border:2px solid #ece3d0;border-radius:99px;padding:7px 30px 7px 13px;cursor:pointer;
    -webkit-appearance:none;appearance:none;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236a7f95' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    background-size:10px 6px;}
  .qfsel:focus{outline:none;border-color:var(--sky);}

  .filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:20px;}
  .chip{background:#fff;border:2px solid #ece3d0;border-radius:99px;padding:8px 16px;font-size:14px;font-weight:bold;cursor:pointer;color:#6a7f95;}
  .chip.on{background:var(--sky);border-color:var(--sky);color:#fff;}
  .chip.tgl.on{background:var(--lime);border-color:var(--lime);color:#fff;}
  .filsep{flex-basis:100%;height:0;}

  .grid{display:grid;gap:14px;}
  .act{
    background:var(--card);border-radius:20px;padding:18px 18px 16px;box-shadow:var(--shadow);
    border-left:7px solid var(--sky);position:relative;
  }
  .act h3{font-size:19px;margin-bottom:5px;padding-right:40px;}
  .act p{color:#6a7f95;font-size:14px;line-height:1.45;}
  .badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
  .badge{font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:.5px;
         background:#f2ece0;color:#8a7f6d;border-radius:99px;padding:4px 10px;}
  .star{position:absolute;top:14px;right:14px;font-size:24px;cursor:pointer;filter:grayscale(1);opacity:.5;transition:.15s;line-height:1;}
  .star.on{filter:none;opacity:1;transform:scale(1.15);}

  .addbox{background:var(--card);border:2px dashed #d9cfb8;border-radius:20px;padding:18px;margin-top:16px;}
  .addbox h4{margin-bottom:12px;font-size:16px;}
  .addbox input,.addbox select{
    width:100%;padding:12px 14px;border:2px solid #ece3d0;border-radius:14px;
    font-size:15px;font-family:inherit;margin-bottom:10px;background:#fff;color:var(--ink);
  }
  .addbox .addbtn{background:var(--lime);color:#fff;width:100%;}

  .empty{text-align:center;color:#6a7f95;padding:30px 10px;}

  .footlinks{display:flex;gap:10px;margin-top:24px;justify-content:center;flex-wrap:wrap;}
  .footlinks button,.footlinks a{background:none;border:none;color:var(--sky);font-weight:bold;font-size:14px;cursor:pointer;font-family:inherit;text-decoration:underline;}

  .commitbtn{
    display:block;width:100%;margin-top:12px;background:var(--ink);color:#fff;
    border:none;border-radius:14px;padding:11px 14px;font-size:14px;font-weight:bold;
    font-family:inherit;cursor:pointer;transition:transform .12s,opacity .2s;
  }
  .commitbtn:active{transform:scale(.97);}
  .commitbtn:disabled{opacity:.6;cursor:default;}

  .sitefoot{text-align:center;color:#a9b6c4;font-size:12px;margin-top:30px;}
  .sitefoot a{color:#8a9bad;}
  .sitefoot .foottag{margin-top:5px;font-size:11px;letter-spacing:.5px;color:#bcc6d1;text-transform:lowercase;}

  /* star value on a card */
  .pips{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:bold;
        background:#fff3d6;color:#c98a12;border-radius:99px;padding:4px 10px;letter-spacing:1px;}
  .pips .pipnum{letter-spacing:0;opacity:.75;}
  .pips.none{background:#f2ece0;color:#a49a8d;letter-spacing:0;text-transform:uppercase;font-size:10px;}

  /* running total in the header */
  .earned{margin-top:12px;font-size:14px;color:#6a7f95;}
  .earned .etot{font-weight:bold;color:#c98a12;font-size:17px;}
  .earned .etot.dim{color:#b9a887;}
  .earned a.earnedlink{color:inherit;text-decoration:none;}
  .earned a.earnedlink:hover{text-decoration:underline;}
  .earned .earnedgo{color:var(--sky);font-weight:bold;}

  /* "✓ done" badge on a card that's been completed (still repeatable) */
  .badge.donebadge{background:#e3f6ec;color:#2f9e63;}

  /* milestone toast */
  .toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,20px);background:var(--ink);color:#fff;
    padding:12px 22px;border-radius:99px;font-weight:bold;font-size:15px;box-shadow:var(--shadow);
    z-index:10000;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;max-width:90vw;text-align:center;}
  .toast.show{opacity:1;transform:translate(-50%,0);}

  /* a completed quest card */
  .act.isdone{opacity:.72;}
  .act.isdone .commitbtn{background:var(--lime);}

  /* ---------- landing page ---------- */
  .landing{max-width:600px;justify-content:center;text-align:center;}
  .lscreen{display:none;animation:rise .4s ease;}
  .lscreen.show{display:block;}
  .landing h1{margin:10px 0 6px;}
  .lead{margin:8px auto 30px;max-width:440px;}
  .lead p{color:#556579;font-size:17px;line-height:1.5;margin:10px 0;}
  .lead strong{color:var(--ink);}

  .lbtns{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:6px;}
  .ctrl.enter{background:var(--ink);color:#fff;font-size:18px;padding:16px 34px;text-decoration:none;display:inline-block;}
  .ctrl.enter:active{transform:scale(.96);}
  .ctrl.tv{background:#eee5d2;color:#9a8f7c;font-size:16px;padding:14px 24px;}
  .ctrl.tv.loose{z-index:50;box-shadow:0 12px 28px rgba(18,35,59,.22);}
  /* landing: keep the two welcome buttons exactly the same size (colors stay per-button) */
  .ctrl.samebtn{width:220px;max-width:100%;height:54px;font-size:17px;padding:0 20px;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;text-align:center;}
  .tvhint{min-height:22px;margin-top:16px;color:var(--coral);font-weight:bold;font-size:15px;}
  .linkish{background:none;border:none;color:#8a9bad;font-family:inherit;font-size:14px;cursor:pointer;text-decoration:underline;}

  /* explainer */
  .eh{font-size:24px;margin:6px 0 22px;}
  .steps{display:grid;gap:14px;text-align:left;margin-bottom:22px;}
  .estep{display:flex;gap:14px;align-items:flex-start;background:var(--card);
         border-radius:18px;padding:16px 18px;box-shadow:var(--shadow);}
  .enum{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--sky);color:#fff;
        font-weight:bold;display:flex;align-items:center;justify-content:center;font-size:15px;}
  .estep h3{font-size:16px;margin-bottom:3px;}
  .estep p{color:#6a7f95;font-size:14px;line-height:1.45;}
  .estep strong{color:var(--ink);}

  .starbox{background:#fff7e8;border:2px solid #ffe2ad;border-radius:20px;padding:20px;text-align:left;margin-bottom:24px;}
  .starboxhead{font-weight:bold;font-size:17px;margin-bottom:8px;}
  .starbox p{color:#6a5a2d;font-size:14.5px;line-height:1.5;margin:8px 0;}
  .starbox .starnote{font-weight:bold;color:#7a5c14;}
  .starlist{list-style:none;display:grid;gap:10px;margin:14px 0;}
  .starlist li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:#6a5a2d;}
  .starlist .pips{flex-shrink:0;}

  /* ---------- suggest an idea ---------- */
  .suggestrow{display:flex;justify-content:center;margin:10px 0;}
  .suggestlink{background:none;border:none;font-family:inherit;cursor:pointer;
    color:#9aa7b4;font-size:13px;font-weight:bold;padding:6px 10px;border-radius:99px;
    transition:color .15s,background .15s;}
  .suggestlink:hover{color:var(--sky);background:#eef6fb;}

  .modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;}
  .modal[hidden]{display:none;}
  .modalback{position:absolute;inset:0;background:rgba(18,35,59,.45);backdrop-filter:blur(2px);}
  .modalcard{position:relative;background:var(--card);border-radius:22px;box-shadow:var(--shadow);
    width:100%;max-width:460px;max-height:90dvh;overflow-y:auto;padding:24px 22px;animation:rise .3s ease;}
  .modalx{position:absolute;top:12px;right:14px;background:none;border:none;font-size:20px;
    color:#a9b6c4;cursor:pointer;line-height:1;padding:4px;}
  .modalcard h3{font-size:22px;margin-bottom:6px;}
  .modalsub{color:#6a7f95;font-size:14px;line-height:1.5;margin-bottom:18px;}

  .fld{display:block;font-size:12.5px;font-weight:bold;color:#6a7f95;margin-bottom:12px;}
  .fld input,.fld textarea,.fld select{
    display:block;width:100%;margin-top:5px;padding:11px 13px;border:2px solid #ece3d0;border-radius:13px;
    font-size:15px;font-family:inherit;background:#fff;color:var(--ink);font-weight:normal;}
  .fld textarea{min-height:64px;resize:vertical;}
  .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
  @media(max-width:420px){.mgrid{grid-template-columns:1fr;}}

  .addbtn2{background:var(--lime);color:#fff;width:100%;margin-top:6px;}
  .addbtn2:active{transform:scale(.97);}
  .addbtn2:disabled{opacity:.6;cursor:default;}
  .suggestmsg{min-height:18px;margin-top:10px;font-size:13.5px;text-align:center;font-weight:bold;}
  .suggestmsg.err{color:var(--coral);}

  .suggestdone{text-align:center;padding:10px 6px 4px;}
  .suggestdone .doneburst{font-size:52px;margin-bottom:6px;}
  .suggestdone h3{margin-bottom:8px;}
  .suggestdone p{color:#6a7f95;font-size:14.5px;line-height:1.55;margin-bottom:18px;}
  .suggestdone strong{color:var(--ink);}

  /* ---------- account bar (name + 4-digit-number login) ---------- */
  .acctbar{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap;}
  .acctwho{font-weight:bold;color:var(--ink);font-size:14px;}
  .acctbtn{font-family:inherit;font-weight:bold;border:2px solid transparent;border-radius:99px;
    cursor:pointer;padding:6px 15px;font-size:13px;background:#eee5d2;color:#6a7f95;transition:transform .1s;}
  .acctbtn.primary{background:var(--ink);color:#fff;}
  .acctbtn:active{transform:scale(.96);}
  .pinrow input{letter-spacing:.35em;text-align:center;font-weight:bold;}