:root { --bg:#0a0a0f; --panel:#101015; --panel2:#15151d; --line:rgba(255,255,255,.08); --text:#eef1f8;
          --dim:#8ea0bd; --line2:rgba(255,255,255,.18); --vio:#7c5cff; --vio2:#a78bfa; --blu:#38bdf8;
          --accent:#7c5cff; --accent2:#38bdf8; --grad:linear-gradient(135deg,#7c5cff,#38bdf8); }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:var(--bg); color:var(--text); min-height:100vh;
         font-family:'Segoe UI',system-ui,sans-serif; display:flex;
         flex-direction:column; }
  /* page-local rules are scoped under .authwrap so they never fight chrome_style.html */
  .authwrap { flex:1; display:flex; align-items:center; justify-content:center; padding:34px 16px; }
  .box { background:var(--panel); border:1px solid var(--line); border-radius:20px;
         padding:38px 34px; width:100%; max-width:460px; transition:max-width .3s ease;
         box-shadow:0 24px 70px rgba(0,0,0,.5); }
  .box.wide { max-width:940px; padding:34px 30px; }
  .authlogo { font-weight:800; font-size:22px; text-align:center; margin-bottom:6px; }
  .authlogo span { background:var(--grad); -webkit-background-clip:text;
                   background-clip:text; color:transparent; }
  .sub { color:var(--dim); font-size:14px; text-align:center; margin-bottom:22px; }
  .box label { display:block; font-size:12px; color:var(--dim); font-weight:600;
          text-transform:uppercase; letter-spacing:.05em; margin:14px 0 5px; }
  /* plan-picker cards are <label>s too — undo the form-label styling so they
     render exactly like the homepage pricing cards */
  .box label.price-card { display:flex; text-transform:none; letter-spacing:normal;
          color:var(--text); font-weight:inherit; font-size:inherit; margin:0; }
  .box input { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line);
          border-radius:10px; padding:12px 13px; font-size:15px; transition:border-color .15s; }
  .pw-field { position:relative; }
  .pw-field input { padding-right:44px; }
  .pw-eye { position:absolute; right:6px; top:50%; transform:translateY(-50%);
          background:none; border:none; cursor:pointer; color:var(--dim);
          padding:6px; line-height:0; border-radius:8px; transition:color .15s; }
  .pw-eye:hover { color:var(--vio2); }
  .pw-eye svg { width:20px; height:20px; }
  .box input:focus { outline:none; border-color:var(--vio2); box-shadow:0 0 0 3px rgba(167,139,250,.15); }
  .row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .step { display:none; }
  .step.active { display:block; animation:slidein .25s ease; }
  @keyframes slidein { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:none; } }
  .dots { display:flex; gap:8px; justify-content:center; margin-bottom:20px; }
  .dot { width:8px; height:8px; border-radius:50%; background:var(--line2); transition:.2s; }
  .dot.on { background:var(--vio2); box-shadow:0 0 8px rgba(167,139,250,.6); }
  .hint { color:#566079; font-size:12px; margin-top:6px; }
  .plans { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px; }
  .pickplan { text-align:center; font-size:24px; font-weight:800; letter-spacing:-.02em; margin:4px 0 0; }
  .planpick { cursor:pointer; }
  .planpick input { position:absolute; opacity:0; pointer-events:none; }
  .planpick .btn { margin:0; text-align:center; pointer-events:none; }
  .pcta-btn { display:block; width:100%; text-align:center; margin-top:auto; }
  .planpick:has(input:checked) { border-color:var(--vio2);
          box-shadow:0 0 0 1px var(--vio2), 0 12px 32px rgba(124,58,237,.18); }
  .planpick:has(input:checked) .pcta-btn { background:linear-gradient(135deg,var(--vio2),var(--blu));
          color:#fff; border:none; }
  @media (max-width:900px){ .planpick.featured { transform:none; box-shadow:none; } }
  /* ---- homepage-identical pricing card styles ---- */
  .price-card { background:var(--panel); border:1px solid var(--line);
          border-radius:20px; padding:32px 28px; display:flex; flex-direction:column;
          position:relative; transition:.18s; }
  .price-card:hover { transform:translateY(-4px); border-color:var(--line2); }
  .price-card.best { border-color:rgba(124,92,255,.5);
          background:linear-gradient(180deg,rgba(124,92,255,.08),var(--panel) 45%);
          box-shadow:0 0 60px rgba(124,92,255,.10); }
  .price-card.featured { transform:scale(1.07); z-index:1;
          box-shadow:0 0 50px rgba(124,58,237,.25); }
  .price-card .badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%);
          background:var(--grad); color:#fff; font-size:11px; font-weight:700;
          padding:4px 14px; border-radius:999px; white-space:nowrap;
          letter-spacing:.03em; text-transform:uppercase; }
  .price-card h3 { font-size:17px; font-weight:700; }
  .price-card .who { color:var(--dim); font-size:13px; margin:4px 0 18px; }
  .price-card .amount { font-size:44px; font-weight:800; letter-spacing:-.04em; }
  .price-card .amount small { font-size:14px; color:var(--dim); font-weight:450; letter-spacing:0; }
  .price-card ul { list-style:none; margin:20px 0 26px; flex:1; }
  .price-card li { font-size:14px; padding:6px 0; color:#c6cdd9; }
  .price-card li::before { content:"✓ "; color:var(--blu); font-weight:700; }
  .price-card li.no { color:#566079; }
  .price-card li.no::before { content:"✕ "; color:#566079; }
  .free-note { color:#5dd88a; font-size:13px; font-weight:700; margin:-12px 0 18px; }
  .btn { display:inline-block; background:var(--grad); color:#fff; font-weight:800;
          font-size:16px; padding:14px 30px; border-radius:12px; transition:.15s;
          border:none; cursor:pointer; }
  .btn:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(124,92,255,.35); }
  .btn.ghost { background:transparent; color:var(--text); border:1px solid var(--line2); }
  .plan { position:relative; border:1px solid var(--line); border-radius:20px;
          padding:32px 28px; cursor:pointer; background:var(--panel);
          transition:transform .15s, border-color .15s, box-shadow .15s; display:flex;
          flex-direction:column; }
  .plan:hover { transform:translateY(-3px); border-color:var(--vio2); }
  .plan input { position:absolute; opacity:0; pointer-events:none; }
  .plan .ptop { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
  .plan .pname { font-weight:700; font-size:17px; }
  .plan .pprice { font-weight:800; color:var(--text); font-size:44px;
          letter-spacing:-.04em; white-space:nowrap; margin-top:8px; }
  .plan .pprice small { font-size:14px; color:var(--dim); font-weight:450; letter-spacing:0; }
  .plan .pdesc { color:var(--dim); font-size:13px; margin-top:4px; margin-bottom:14px; line-height:1.45; }
  .plan .pfeat { list-style:none; margin:0 0 22px; display:flex; flex-direction:column;
          gap:9px; font-size:13.5px; flex:1; }
  .plan .pfeat li { display:flex; align-items:center; gap:8px; color:var(--text); }
  .plan .pfeat li.no { color:#566079; }
  .plan .pfeat li::before { content:'✓'; color:var(--blu); font-weight:800; }
  .plan .pfeat li.no::before { content:'✕'; color:#566079; font-weight:600; }
  .plan .pcta { text-align:center; font-weight:800; font-size:13.5px; padding:10px;
          border-radius:10px; border:1px solid var(--line2); color:var(--text); transition:.15s; }
  .plan.popular .pcta { background:linear-gradient(135deg,var(--vio2),var(--blu));
          border:none; color:#fff; }
  .plan:has(input:checked) { border-color:var(--vio2); background:rgba(124,92,255,.09);
          box-shadow:0 0 0 1px var(--vio2), 0 12px 32px rgba(124,58,237,.18); }
  .plan:has(input:checked) .pcta { border-color:var(--vio2); color:var(--vio2); }
  .plan.popular { border-color:rgba(167,139,250,.55);
          background:linear-gradient(180deg, rgba(124,92,255,.13), rgba(56,189,248,.05)); }
  .plan .badge { position:absolute; top:-11px; right:14px; background:var(--grad); color:#fff;
          font-size:10px; font-weight:800; letter-spacing:.08em; padding:4px 11px;
          border-radius:99px; box-shadow:0 4px 14px rgba(124,58,237,.4); }
  /* ---- billing period toggle ---- */
  .billtoggle { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; margin:14px 0 28px; }
  .billseg { display:flex; background:var(--bg); border:1px solid var(--line);
          border-radius:99px; padding:4px; gap:4px; }
  .billseg button { background:transparent; border:none; color:var(--dim); cursor:pointer;
          font-weight:700; font-size:13px; padding:7px 18px; border-radius:99px;
          transition:.15s; font-family:inherit; }
  .billseg button.on { background:linear-gradient(135deg,var(--vio2),var(--blu)); color:#fff;
          box-shadow:0 4px 14px rgba(124,58,237,.35); }
  .savepill { font-size:11px; font-weight:800; letter-spacing:.06em; color:#4ade80;
          background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.35);
          padding:3px 10px; border-radius:99px; }
  .billnote { color:var(--dim); font-size:12.5px; margin:0 0 26px; min-height:16px; text-align:center; }
  .billnote .save { color:#4ade80; font-weight:700; }
  .authbtn { width:100%; margin-top:22px;
         background:linear-gradient(135deg,var(--vio2),var(--blu));
         color:#fff; font-weight:800; font-size:16px; padding:14px;
         border:none; border-radius:12px; cursor:pointer; transition:.15s; }
  .step1-continue { display:block; max-width:340px; margin:22px auto 0; }
  .authbtn:hover { filter:brightness(1.08); transform:translateY(-1px); }
  .back { background:transparent; border:1px solid var(--line2); color:var(--dim);
          font-weight:600; font-size:14px; padding:12px; border-radius:12px;
          cursor:pointer; margin-top:22px; }
  .back:hover { color:var(--text); border-color:var(--vio2); }
  .btnrow { display:flex; gap:10px; }
  .btnrow .back { flex:0 0 38%; }
  .btnrow .authbtn { flex:1; }
  .alt { text-align:center; color:var(--dim); font-size:13px; margin-top:18px; }
  .alt a { color:var(--vio2); }
  .note { color:#566079; font-size:12px; text-align:center; margin-top:14px; }
  .flash { background:rgba(255,107,107,.12); border:1px solid rgba(255,107,107,.4);
    color:#ff8787; font-size:13px; padding:9px 12px; border-radius:10px; margin-bottom:14px; }
  @media (max-width:600px){ .row { grid-template-columns:1fr; gap:0; }
    .box { padding:32px 22px; }
    /* >=16px stops iOS Safari auto-zooming on focus */
    .box input, .box select { font-size:16px; }
    .btnrow { flex-direction:column; }
    .btnrow .back { flex:auto; }
  }
  @media (max-width:820px){
    .box.wide { max-width:520px; }
    .plans { grid-template-columns:1fr; }
  }