:root{
    --bg:#faf9f7; --surface:#ffffff; --surface-2:#f3f1ec;
    --text:#1c1c1e; --muted:#6e6e73; --border:#e8e5df;
    --user-bubble:#e9edff; --ai-card:#ffffff;
    --accent1:#3b82f6; --accent2:#a855f7;
    --danger:#b3261e; --danger-bg:#fdecea;
    --shadow:0 8px 30px rgba(0,0,0,.08);
    --radius:20px;
  }
  [data-theme="dark"]{
    --bg:#131314; --surface:#1e1f20; --surface-2:#282a2c;
    --text:#e3e3e3; --muted:#9aa0a6; --border:#353738;
    --user-bubble:#2c3340; --ai-card:#1e1f20;
    --danger:#f2b8b5; --danger-bg:#3a2221;
    --shadow:0 8px 30px rgba(0,0,0,.4);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{
    margin:0; height:100dvh; display:flex; flex-direction:column;
    background:var(--bg); color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:16px; line-height:1.55;
  }

  /* ---------- header ---------- */
  header{
    flex:0 0 auto; display:flex; align-items:center; gap:10px;
    padding:12px 16px; border-bottom:1px solid var(--border);
    background:var(--surface); z-index:2;
  }
  .logo{
    width:34px; height:34px; border-radius:12px; flex:0 0 auto;
    display:grid; place-items:center; color:#fff;
    background:linear-gradient(135deg,var(--accent1),var(--accent2));
    box-shadow:0 4px 14px rgba(99,102,241,.35);
  }
  .logo svg{width:20px;height:20px}
  .title{line-height:1.25; min-width:0}
  .title b{font-size:16px; display:block}
  .title span{font-size:12px; color:var(--muted)}
  .title .beta-pill, .doc-title .beta-pill{display:inline-block; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    color:#052e2b; background:#2dd4bf; border-radius:999px; padding:2px 8px; margin-left:6px; vertical-align:2px}
  .spacer{flex:1}
  .pill{
    font-size:12.5px; font-weight:600; color:var(--muted);
    background:var(--surface-2); border:1px solid var(--border);
    padding:6px 12px; border-radius:999px; white-space:nowrap;
  }
  .pill b{color:var(--text)}
  .iconbtn{
    width:36px;height:36px;border-radius:12px;border:1px solid var(--border);
    background:var(--surface-2); color:var(--muted); cursor:pointer;
    display:grid;place-items:center;
  }
  .iconbtn:hover{color:var(--text)}
  .iconbtn svg{width:18px;height:18px}
  .iconbtn .moon{display:none}
  [data-theme="dark"] .iconbtn .sun{display:none}
  [data-theme="dark"] .iconbtn .moon{display:block}

  /* ---------- chat ---------- */
  main{
    flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:20px 16px 12px;
  }
  .wrap{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:18px}
  .msg{animation:rise .35s ease both; max-width:100%}
  @keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

  .user-row{display:flex; justify-content:flex-end}
  .user-bubble{
    background:var(--user-bubble); border-radius:var(--radius) var(--radius) 6px var(--radius);
    padding:12px 16px; max-width:88%; white-space:pre-wrap; word-break:break-word;
  }
  .ai-row{display:flex; gap:10px; align-items:flex-start}
  .avatar{
    width:30px;height:30px;border-radius:50%;flex:0 0 auto;margin-top:2px;
    display:grid;place-items:center;color:#fff;
    background:linear-gradient(135deg,var(--accent1),var(--accent2));
  }
  .avatar svg{width:16px;height:16px}
  .ai-col{flex:1; min-width:0}
  .ai-name{font-size:12.5px; font-weight:700; color:var(--muted); margin:2px 0 6px}
  .ai-card{
    background:var(--ai-card); border:1px solid var(--border);
    border-radius:6px var(--radius) var(--radius) var(--radius);
    padding:14px 16px; box-shadow:var(--shadow); position:relative;
  }
  .ai-card p{margin:0 0 10px; white-space:pre-wrap; word-break:break-word}
  .ai-card p:last-child{margin-bottom:0}
  .card-actions{display:flex; gap:8px; margin-top:10px}
  .chipbtn{
    font-size:13px; font-weight:600; border:1px solid var(--border);
    background:var(--surface-2); color:var(--text); border-radius:999px;
    padding:7px 14px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  }
  .chipbtn:hover{border-color:var(--accent1)}
  .chipbtn svg{width:14px;height:14px}
  details.changes{margin-top:10px; border-top:1px solid var(--border); padding-top:10px}
  details.changes summary{
    cursor:pointer; font-size:13.5px; font-weight:700; color:var(--accent1);
    list-style:none; display:flex; align-items:center; gap:6px;
  }
  details.changes summary::-webkit-details-marker{display:none}
  details.changes summary::before{content:"▸"; transition:transform .2s}
  details.changes[open] summary::before{transform:rotate(90deg)}
  details.changes ul{margin:8px 0 2px; padding-left:20px; font-size:14px; color:var(--muted)}
  details.changes li{margin-bottom:6px}
  details.changes li b{color:var(--text)}

  .typing{display:inline-flex; gap:5px; padding:14px 18px}
  .typing i{width:8px;height:8px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}
  .typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
  @keyframes blink{0%,60%,100%{opacity:.25; transform:none}30%{opacity:1; transform:translateY(-3px)}}

  .error-card{
    background:var(--danger-bg); color:var(--danger);
    border:1px solid var(--danger); border-radius:14px; padding:12px 16px; font-size:14.5px;
  }
  .welcome .ai-card p{margin-bottom:10px}
  .welcome ul{margin:8px 0 4px; padding-left:20px; font-size:14.5px}
  .welcome li{margin-bottom:4px}

  /* ---------- composer ---------- */
  .composer-zone{
    flex:0 0 auto; background:var(--surface); border-top:1px solid var(--border);
    padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .composer-inner{max-width:760px; margin:0 auto}
  .toolbar{display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap}
  .segmented{
    display:flex; background:var(--surface-2); border:1px solid var(--border);
    border-radius:999px; padding:3px; gap:2px;
  }
  .segmented button{
    border:0; background:transparent; color:var(--muted); font-size:13.5px; font-weight:600;
    padding:7px 16px; border-radius:999px; cursor:pointer;
  }
  .segmented button.on{background:var(--surface); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.12)}
  .switch{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); cursor:pointer; user-select:none}
  .switch input{display:none}
  .track{width:38px; height:22px; border-radius:999px; background:var(--border); position:relative; transition:background .2s; flex:0 0 auto}
  .track::after{
    content:""; position:absolute; top:3px; left:3px; width:16px; height:16px;
    border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .2s;
  }
  .switch input:checked + .track{background:linear-gradient(135deg,var(--accent1),var(--accent2))}
  .switch input:checked + .track::after{left:19px}
  .example-link{
    margin-left:auto; background:none; border:0; color:var(--accent1);
    font-size:13.5px; font-weight:600; cursor:pointer; padding:6px 4px;
  }
  .composer{
    display:flex; align-items:flex-end; gap:10px;
    background:var(--surface-2); border:1px solid var(--border);
    border-radius:24px; padding:8px 8px 8px 18px;
    transition:border-color .2s, box-shadow .2s;
  }
  .composer:focus-within{border-color:var(--accent1); box-shadow:0 0 0 3px rgba(59,130,246,.15)}
  textarea{
    flex:1; border:0; background:transparent; resize:none; outline:none;
    font:inherit; color:var(--text); max-height:180px; padding:10px 0; line-height:1.5;
  }
  textarea::placeholder{color:var(--muted)}
  .send{
    width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; flex:0 0 auto;
    display:grid; place-items:center; color:#fff;
    background:linear-gradient(135deg,var(--accent1),var(--accent2));
    box-shadow:0 4px 14px rgba(99,102,241,.4); transition:transform .15s, opacity .2s;
  }
  .send:hover:not(:disabled){transform:scale(1.06)}
  .send:disabled{opacity:.4; cursor:default; box-shadow:none}
  .send svg{width:20px;height:20px}
  .send .spin{display:none; width:20px; height:20px; border-radius:50%;
    border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; animation:rot .7s linear infinite}
  @keyframes rot{to{transform:rotate(360deg)}}
  .send.loading .arrow{display:none}
  .send.loading .spin{display:block}
  .composer-foot{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:8px; font-size:12px; color:var(--muted);
  }
  .trust{text-align:center; font-size:11.5px; color:var(--muted); margin:8px 0 0; opacity:.85}

  /* ---------- auth ---------- */
  .hidden{display:none !important}
  .authwrap{position:relative; display:flex; gap:8px; align-items:center}
  .authbtn{
    font-size:13px; font-weight:700; border:1px solid var(--border);
    background:var(--surface-2); color:var(--text); border-radius:999px;
    padding:8px 16px; cursor:pointer; white-space:nowrap;
  }
  .authbtn:hover{border-color:var(--accent1)}
  .authbtn.avatarbtn{
    width:36px; height:36px; padding:0; border-radius:50%; border:0;
    background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#fff; font-size:15px;
  }
  .authmenu{
    position:absolute; right:0; top:calc(100% + 8px); min-width:240px; z-index:50;
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    box-shadow:var(--shadow); padding:8px;
  }
  .authmenu-email{
    font-size:13px; color:var(--muted); padding:10px 12px; word-break:break-all;
    border-bottom:1px solid var(--border); margin-bottom:6px;
  }
  .authmenu button{
    display:flex; align-items:center; gap:12px; width:100%; text-align:left;
    border:0; background:none; color:var(--text);
    font-size:14.5px; font-weight:600; padding:11px 12px; border-radius:10px; cursor:pointer;
  }
  .authmenu button:hover{background:var(--surface-2)}
  .authmenu button svg{width:19px; height:19px; flex:none; color:var(--muted)}
  .authmenu button:hover svg{color:var(--text)}
  .authmenu button#logoutBtn, .authmenu button#logoutBtn svg{color:var(--danger)}
  .menudiv{height:1px; background:var(--border); margin:6px 4px}
  .overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:100;
    display:flex; align-items:center; justify-content:center; padding:20px;
    animation:fade .2s ease;
  }
  @keyframes fade{from{opacity:0}}
  .auth-card{
    background:var(--surface); border-radius:22px; box-shadow:var(--shadow);
    width:100%; max-width:380px; padding:26px 24px 22px; position:relative;
    animation:rise .3s ease; max-height:90dvh; overflow-y:auto;
  }
  .auth-close{
    position:absolute; top:12px; right:12px; border:0; background:var(--surface-2);
    width:32px; height:32px; border-radius:50%; cursor:pointer; color:var(--muted); font-size:14px;
  }
  .atabs{display:flex; background:var(--surface-2); border-radius:999px; padding:3px; margin-bottom:18px}
  .atabs button{
    flex:1; border:0; background:transparent; padding:9px; border-radius:999px;
    font-size:14px; font-weight:700; color:var(--muted); cursor:pointer;
  }
  .atabs button.on{background:var(--surface); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.12)}
  .auth-card label{display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:12px}
  .auth-card input{
    display:block; width:100%; margin-top:6px; padding:12px 14px; font-size:15px;
    border:1px solid var(--border); border-radius:12px; background:var(--surface-2);
    color:var(--text); outline:none; font-family:inherit;
  }
  .auth-card input:focus{border-color:var(--accent1); box-shadow:0 0 0 3px rgba(59,130,246,.15)}
  .asubmit{
    width:100%; border:0; border-radius:14px; padding:13px; font-size:15px; font-weight:700;
    color:#fff; cursor:pointer; margin-top:4px;
    background:linear-gradient(135deg,var(--accent1),var(--accent2));
    box-shadow:0 4px 14px rgba(99,102,241,.35);
  }
  .asubmit:disabled{opacity:.6; cursor:default}
  .aerror,.asuccess{font-size:13.5px; border-radius:10px; padding:10px 12px; margin-bottom:12px}
  .aerror{background:var(--danger-bg); color:var(--danger)}
  .asuccess{background:#e6f4ea; color:#137333}
  [data-theme="dark"] .asuccess{background:#1d3524; color:#a8dab5}
  .alink{background:none; border:0; color:var(--accent1); font-size:13.5px; font-weight:600; cursor:pointer; margin-top:12px; padding:4px}
  .anote{font-size:12px; color:var(--muted); margin:14px 0 0; text-align:center}
  #socialBox{margin:2px 0}
  .socbtn{
    display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
    padding:11px 13px; margin-bottom:10px; font-size:14.5px; font-weight:700; font-family:inherit;
    border:1px solid var(--border); border-radius:12px; background:var(--surface-2); color:var(--text); cursor:pointer;
  }
  .socbtn:hover{border-color:var(--accent1)}
  .socbtn svg{width:19px; height:19px; flex:none}

  /* ---------- buy-credits modal ---------- */
  .cmodal-card{position:relative; width:min(460px,100%); background:var(--surface);
    border:1px solid var(--border); border-radius:18px; padding:28px 24px 20px;
    box-shadow:0 24px 70px rgba(0,0,0,.35); text-align:center}
  .cmodal-card h2{margin:0 0 8px; font-size:21px}
  .cmodal-sub{color:var(--muted); font-size:14px; margin:0 0 18px; line-height:1.5}
  .cmodal-packs{display:flex; gap:10px; margin-bottom:14px}
  .cpack{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:16px 8px 12px; border:1px solid var(--border); border-radius:14px;
    background:var(--surface-2); color:var(--text); cursor:pointer; font-family:inherit; position:relative}
  .cpack:hover{border-color:var(--accent1)}
  .cpack b{font-size:24px}
  .cpack span{font-size:12px; color:var(--muted)}
  .cpack em{font-style:normal; font-weight:800; font-size:16px; margin-top:6px; color:var(--accent1)}
  .cpack i{position:absolute; top:-10px; left:50%; transform:translateX(-50%);
    font-style:normal; font-size:10.5px; font-weight:700; background:var(--accent1); color:#fff;
    padding:2px 10px; border-radius:20px; white-space:nowrap}
  .cpack-hot{border-color:var(--accent1); border-width:2px}
  .cpack:disabled{opacity:.55; cursor:wait}
  .cmodal-note{font-size:13.5px; font-weight:600; margin:0 0 10px; min-height:18px}
  .cmodal-fine{font-size:11.5px; color:var(--muted); margin:0}
  .ordivider{display:flex; align-items:center; gap:10px; margin:4px 0 12px; color:var(--muted); font-size:12.5px}
  .ordivider::before,.ordivider::after{content:""; flex:1; height:1px; background:var(--border)}

  /* ---------- profile & settings (on-screen view, no popup) ---------- */
  #polisherView{display:flex; flex-direction:column; flex:1 1 auto; min-height:0}

  /* ---------- chat sidebar (Claude-style; logged-in users) ---------- */
  #appRow{display:flex; flex:1 1 auto; min-height:0}
  #sidebar{
    width:280px; flex:0 0 auto; min-height:0;
    background:var(--surface); border-right:1px solid var(--border);
    display:flex; flex-direction:column;
  }
  #sidebar.hidden{display:none}
  #newChatBtn{
    margin:12px; padding:10px 12px; border-radius:12px; cursor:pointer;
    border:1px solid var(--border); background:var(--surface-2);
    color:var(--text); font-size:14px; font-weight:600; text-align:left;
  }
  #newChatBtn:hover{border-color:var(--accent1)}
  #sessionList{
    flex:1 1 auto; overflow-y:auto; min-height:0;
    padding:0 8px 12px; display:flex; flex-direction:column; gap:2px;
  }
  .srow{
    display:flex; align-items:center; gap:6px;
    padding:9px 10px; border-radius:10px; cursor:pointer; font-size:14px;
  }
  .srow:hover{background:var(--surface-2)}
  .srow.on{background:var(--surface-2); font-weight:600}
  .stitle{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sdel{
    flex:0 0 auto; width:24px; height:24px; border:0; border-radius:8px;
    background:transparent; color:var(--muted); cursor:pointer;
    font-size:12px; opacity:0; display:grid; place-items:center;
  }
  .srow:hover .sdel, .srow:focus-within .sdel{opacity:.7}
  .sdel:hover{background:var(--danger-bg); color:var(--danger); opacity:1}
  .sempty{padding:14px 10px; color:var(--muted); font-size:13px; line-height:1.5}
  #sidebarNote{
    padding:10px 14px; font-size:12px; color:var(--muted);
    border-top:1px solid var(--border);
  }
  #sideScrim{
    position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:70;
  }
  #sideScrim.hidden{display:none}
  @media (max-width:720px){
    #sidebar{
      position:fixed; top:0; left:0; bottom:0; z-index:80;
      width:min(300px, 84vw); transform:translateX(-105%);
      transition:transform .22s ease; box-shadow:0 0 40px rgba(0,0,0,.25);
    }
    body.side-open #sidebar{transform:none}
    body.side-open{overflow:hidden}
  }
  /* ---------- settings modal is dialog-based (no page view) ---------- */
  .steps{margin:0; padding-left:20px; font-size:14px; color:var(--muted); line-height:1.6}
  .steps li{margin-bottom:8px}
  .steps b{color:var(--text)}
  .settings-page{max-width:640px; margin:0 auto; padding:24px 16px 90px; animation:fade .2s ease}
  .backbtn{
    display:inline-flex; align-items:center; gap:6px; border:0; background:none;
    color:var(--accent1); font-size:15px; font-weight:700; cursor:pointer;
    padding:6px 4px; margin-bottom:14px;
  }
  .phead{display:flex; align-items:center; gap:14px; margin-bottom:18px}
  .pavatar{
    width:52px; height:52px; border-radius:50%; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--accent1),var(--accent2));
    color:#fff; font-size:20px; font-weight:700; overflow:hidden;
  }
  .pavatar img{width:100%; height:100%; border-radius:50%; display:block; object-fit:cover}
  .invrow{display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--border); font-size:13.5px}
  .invrow:last-child{border-bottom:none}
  .invdate{color:var(--muted)}
  .invstatus{font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); text-transform:capitalize}
  .invstatus.paid{color:#22c55e; border-color:#22c55e66}
  .invamt{margin-left:auto; font-weight:700}
  .invlink{color:var(--accent1); font-weight:700; text-decoration:none; font-size:13px}
  .invlink:hover{text-decoration:underline}
  .ptitle{font-size:17px; font-weight:800}
  .psub{font-size:13px; color:var(--muted); word-break:break-all}
  .pset{border-top:1px solid var(--border); padding:16px 0 18px}
  .pset-title{font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:12px}
  .pfield{display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:12px}
  .pfield input{
    display:block; width:100%; margin-top:6px; padding:11px 13px; font-size:15px;
    border:1px solid var(--border); border-radius:12px; background:var(--surface-2);
    color:var(--text); outline:none; font-family:inherit;
  }
  .pfield input:focus{border-color:var(--accent1); box-shadow:0 0 0 3px rgba(59,130,246,.15)}
  .pfield input:disabled{opacity:.55}
  .pfield select{
    display:block; width:100%; margin-top:6px; padding:11px 13px; font-size:15px;
    border:1px solid var(--border); border-radius:12px; background:var(--surface-2);
    color:var(--text); outline:none; font-family:inherit; cursor:pointer;
  }
  .pfield select:focus{border-color:var(--accent1); box-shadow:0 0 0 3px rgba(59,130,246,.15)}
  .abtn{
    border:1px solid var(--border); background:var(--surface-2); color:var(--text);
    border-radius:12px; padding:10px 18px; font-size:14px; font-weight:700; cursor:pointer;
  }
  .abtn:hover{border-color:var(--accent1)}
  .abtn:disabled{opacity:.6; cursor:default}
  .pfield textarea{
    display:block; width:100%; margin-top:6px; padding:11px 13px; font-size:15px;
    border:1px solid var(--border); border-radius:12px; background:var(--surface-2);
    color:var(--text); outline:none; font-family:inherit; min-height:110px; resize:vertical;
  }
  .pfield textarea:focus{border-color:var(--accent1); box-shadow:0 0 0 3px rgba(59,130,246,.15)}
  .ticket{border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:10px; cursor:pointer}
  .ticket:hover{border-color:var(--accent1)}
  .ticket-subj{font-size:14.5px; font-weight:700}
  .ticket-meta{font-size:12.5px; color:var(--muted); margin-top:4px}
  .tbadge{display:inline-block; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; border-radius:20px; padding:3px 10px; margin-left:8px; vertical-align:1px}
  .tbadge.open{background:#e3f0fd; color:#1565c0}
  .tbadge.answered{background:#e6f4ea; color:#137333}
  .tbadge.closed{background:var(--surface-2); color:var(--muted); border:1px solid var(--border)}
  [data-theme="dark"] .tbadge.open{background:#1a2f4a; color:#90caf9}
  [data-theme="dark"] .tbadge.answered{background:#1d3524; color:#a8dab5}
  .tmsg{border:1px solid var(--border); border-radius:12px; padding:10px 14px; margin-bottom:10px; max-width:92%}
  .tmsg .twho{font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:6px}
  .tmsg.admin{background:var(--surface-2); margin-left:auto}
  .tmsg .tbody{font-size:14.5px; white-space:pre-wrap; word-break:break-word}
  .tmsg .twhen{font-size:11.5px; color:var(--muted); margin-top:6px}
  .tfilter{margin-bottom:12px}
  .tfilter .abtn{padding:7px 14px; font-size:13px; margin-right:8px; margin-bottom:8px}
  .tfilter .abtn.on{border-color:var(--accent1); box-shadow:0 0 0 3px rgba(59,130,246,.12)}
  /* v2: departments, priorities, internal notes */
  .tbadge.dept{background:var(--surface-2); color:var(--muted); border:1px solid var(--border)}
  .tbadge.pri-low{background:#e8eaf6; color:#3949ab}
  .tbadge.pri-normal{background:var(--surface-2); color:var(--muted); border:1px solid var(--border)}
  .tbadge.pri-high{background:#fff3e0; color:#e65100}
  .tbadge.pri-urgent{background:#fdecea; color:#b3261e}
  [data-theme="dark"] .tbadge.pri-low{background:#2a3350; color:#9fa8da}
  [data-theme="dark"] .tbadge.pri-high{background:#4a3418; color:#ffcc80}
  [data-theme="dark"] .tbadge.pri-urgent{background:#3a2221; color:#f2b8b5}
  .tmsg.internal{border-style:dashed; border-color:var(--accent1); background:rgba(59,130,246,.05)}
  .tmsg.internal .twho{color:var(--accent1)}
  .tatt{margin-top:8px; font-size:13px}
  .tatt a{color:var(--accent1)}
  .tadminrow{display:flex; gap:12px; margin-bottom:4px}
  .tadminrow .pfield{flex:1}
  .tcheck{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; margin:4px 0 12px; cursor:pointer}
  .tcheck input{width:16px; height:16px; accent-color:var(--accent1)}
  .pmsg{font-size:13.5px; border-radius:10px; padding:10px 12px; margin-top:12px}
  .pmsg.ok{background:#e6f4ea; color:#137333}
  .pmsg.err{background:var(--danger-bg); color:var(--danger)}
  [data-theme="dark"] .pmsg.ok{background:#1d3524; color:#a8dab5}
  .plan{border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin-bottom:10px; position:relative}
  .hrow{display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:12px; padding:10px 12px; margin-bottom:8px}
  .hmain{flex:1 1 auto; min-width:0; cursor:pointer}
  .htext{font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .hmeta{font-size:12px; color:var(--muted); margin-top:2px}
  .hdel{flex:0 0 auto; border:0; background:transparent; color:var(--muted); font-size:14px; cursor:pointer; border-radius:8px; padding:6px 8px}
  .hdel:hover{background:var(--surface-2); color:var(--danger)}
  .plan.current{border-color:var(--accent1); box-shadow:0 0 0 3px rgba(59,130,246,.12)}
  .plan-name{font-size:15px; font-weight:800}
  .plan-desc{font-size:13.5px; color:var(--muted); margin-top:2px}
  .plan-use{font-size:13px; font-weight:600; margin-top:8px}
  .plan.soon{opacity:.8; background:var(--surface-2)}
  .soon-badge{
    position:absolute; top:12px; right:12px; font-size:11px; font-weight:800;
    text-transform:uppercase; letter-spacing:.05em; color:var(--accent1);
    background:rgba(59,130,246,.12); border-radius:999px; padding:4px 10px;
  }

  @media (max-width:560px){
    .title span{display:none}
    .pill{font-size:11.5px; padding:5px 10px}
    .example-link{margin-left:0}
  }
  .legal-footer{text-align:center; font-size:12px; color:var(--muted, #888); padding:14px 12px 20px}
  .legal-footer a{color:var(--accent1); text-decoration:none; margin:0 2px}
  .legal-footer a:hover{text-decoration:underline}
  .legal-drop{position:relative; display:inline-block}
  #legalBtn{background:none; border:0; padding:0; margin:0 2px; font-size:12px; color:var(--accent1); cursor:pointer; font-family:inherit}
  #legalBtn:hover{text-decoration:underline}
  .legal-menu{position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:6px; min-width:150px; z-index:50; text-align:left}
  .legal-menu a{display:block; padding:8px 12px; border-radius:8px; font-size:13px; white-space:nowrap}
  .legal-menu a:hover{background:var(--surface-2); text-decoration:none}
  .nl-title{margin:0 0 6px; font-size:18px; color:var(--text)}
  .nl-sub{margin:0 0 16px; font-size:13.5px; color:var(--muted)}
  .nl-form-modal{flex-direction:column}
  .nl-form-modal input[type=email]{width:100%}
  .nl-form-modal button{width:100%}

  /* ---------- settings modal (logo button) ---------- */
  .brandbtn{background:none; border:0; padding:0; margin:0; display:flex; align-items:center; gap:10px;
    cursor:pointer; color:inherit; font:inherit; text-align:left; border-radius:12px}
  .brandbtn:focus-visible{outline:2px solid var(--accent1); outline-offset:2px}
  .lmodal{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.55); padding:16px}
  .lmodal.hidden{display:none}
  .lmodal-card{position:relative; display:flex; width:min(780px,100%); height:min(620px,92dvh);
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    box-shadow:0 24px 70px rgba(0,0,0,.35); overflow:hidden}
  .lmodal-x{position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:10px;
    border:0; background:transparent; color:var(--muted); font-size:16px; cursor:pointer; z-index:2}
  .lmodal-x:hover{background:var(--surface-2); color:var(--text)}
  .lmodal-side{flex:0 0 212px; border-right:1px solid var(--border); padding:14px 10px; overflow-y:auto}
  .lmodal-search{padding:2px 4px 10px}
  .lmodal-search input{width:100%; padding:8px 12px; border-radius:10px; border:1px solid var(--border);
    background:var(--surface-2); color:var(--text); font-size:13.5px; font-family:inherit}
  .lmodal-search input::placeholder{color:var(--muted)}
  .lmodal-navlabel{font-size:12px; color:var(--muted); padding:2px 10px 6px}
  .lmodal-nav{display:flex; align-items:center; width:100%; padding:9px 10px; margin:1px 0;
    border:0; border-radius:10px; background:transparent; color:var(--text);
    font-size:14px; font-family:inherit; cursor:pointer; text-align:left}
  .lmodal-nav:hover{background:var(--surface-2)}
  .lmodal-nav.on{background:var(--surface-2); font-weight:700}
  .lmodal-nav.hidden{display:none}
  .lmodal-main{flex:1 1 auto; min-width:0; padding:20px 26px 26px; overflow-y:auto}
  .lmodal-panel.hidden{display:none}
  .lmodal-panel h3{margin:2px 0 4px; font-size:16px}
  .lmrow{display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:13px 0; border-bottom:1px solid var(--border)}
  .lmrow:last-child{border-bottom:0}
  .lmlabel{font-weight:600; font-size:14.5px}
  .lmsub{font-size:13px; color:var(--muted); margin-top:3px; max-width:340px}
  .seg{display:flex; background:var(--surface-2); border:1px solid var(--border);
    border-radius:11px; padding:3px; gap:2px; flex:0 0 auto}
  .seg button{border:0; background:transparent; padding:7px 13px; border-radius:8px;
    font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; font-family:inherit; white-space:nowrap}
  .seg button.on{background:var(--surface); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.18)}
  .lmodal-panel .pset{border-top:0; padding:6px 0 16px}
  .lmodal-panel .phead{margin-bottom:6px}
  [data-textsize="s"] #chat{font-size:14px}
  [data-textsize="l"] #chat{font-size:18px}
  .reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{
    animation:none !important; transition:none !important; scroll-behavior:auto !important}
  @media (max-width:640px){
    .lmodal-card{flex-direction:column; max-height:94dvh}
    .lmodal-side{flex:0 0 auto; border-right:0; border-bottom:1px solid var(--border);
      display:flex; align-items:center; gap:6px; overflow-x:auto; padding:10px}
    .lmodal-search,.lmodal-navlabel{display:none}
    .lmodal-nav{width:auto; white-space:nowrap; margin:0}
    .lmodal-main{padding:16px 18px 20px}
    .lmrow{flex-direction:column; align-items:stretch}
    .seg{align-self:flex-start}
    .lmsub{max-width:none}
  }

/* ============ pricing.php — scoped ============ */
body.pricing{
    --bg:#faf9f7; --surface:#ffffff; --surface-2:#f3f1ec;
    --text:#1c1c1e; --muted:#6e6e73; --border:#e8e5df;
    --accent1:#3b82f6; --accent2:#a855f7;
    --shadow:0 8px 30px rgba(0,0,0,.08);
    --radius:20px;
  }html[data-theme="dark"] body.pricing{
    --bg:#131314; --surface:#1e1f20; --surface-2:#282a2c;
    --text:#e3e3e3; --muted:#9aa0a6; --border:#353738;
    --shadow:0 8px 30px rgba(0,0,0,.4);
  }body.pricing *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}body.pricing{
    margin:0; background:var(--bg); color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:16px; line-height:1.6;
  }body.pricing header{
    display:flex; align-items:center; gap:10px;
    padding:12px 16px; border-bottom:1px solid var(--border);
    background:var(--surface); position:sticky; top:0; z-index:2;
  }body.pricing .logo{
    width:34px; height:34px; border-radius:12px; flex:0 0 auto;
    display:grid; place-items:center; color:#fff;
    background:linear-gradient(135deg,var(--accent1),var(--accent2));
    box-shadow:0 4px 14px rgba(99,102,241,.35);
  }body.pricing .logo svg{width:20px;height:20px}body.pricing .title{line-height:1.25}body.pricing .title b{font-size:16px; display:block}body.pricing .title span{font-size:12px; color:var(--muted)}body.pricing .spacer{flex:1}body.pricing .hlink{font-size:14px; font-weight:600; color:var(--accent1); text-decoration:none; white-space:nowrap}body.pricing .hlink:hover{text-decoration:underline}body.pricing .iconbtn{
    width:36px;height:36px;border-radius:12px;border:1px solid var(--border);
    background:var(--surface-2); color:var(--muted); cursor:pointer;
    display:grid;place-items:center;
  }body.pricing .iconbtn svg{width:18px;height:18px}body.pricing .iconbtn .moon{display:none}html[data-theme="dark"] body.pricing .iconbtn .sun{display:none}html[data-theme="dark"] body.pricing .iconbtn .moon{display:block}body.pricing .wrap{max-width:1060px; margin:0 auto; padding:40px 20px 64px}body.pricing .hero{text-align:center; max-width:720px; margin:0 auto 40px}body.pricing .hero h1{font-size:34px; line-height:1.2; margin:0 0 12px; letter-spacing:-.5px}body.pricing .beta-banner{display:inline-block; font-size:14px; color:var(--text); background:color-mix(in srgb, #2dd4bf 14%, var(--surface)); border:1px solid #2dd4bf; border-radius:12px; padding:10px 18px; margin-bottom:22px}body.pricing .beta-banner b{color:#2dd4bf; text-transform:uppercase; letter-spacing:.06em}body.pricing .hero p{color:var(--muted); font-size:17px; margin:0 0 8px}body.pricing .hero p b{color:var(--text)}body.pricing .plans{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:56px}
  @media(max-width:960px){body.pricing .plans{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){body.pricing .plans{grid-template-columns:1fr}}body.pricing .plan{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:26px 22px; display:flex; flex-direction:column; box-shadow:var(--shadow);
    position:relative;
  }body.pricing .plan.popular{border:2px solid var(--accent1)}body.pricing .plan .tag{
    position:absolute; top:-13px; left:50%; transform:translateX(-50%);
    font-size:11.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
    color:#fff; background:linear-gradient(135deg,var(--accent1),var(--accent2));
    padding:4px 14px; border-radius:999px; white-space:nowrap;
  }body.pricing .plan h2{font-size:18px; margin:0 0 4px}body.pricing .plan .price{font-size:32px; font-weight:800; letter-spacing:-.5px; margin:6px 0 2px}body.pricing .plan .price small{font-size:14px; font-weight:500; color:var(--muted)}body.pricing .plan .quota{
    display:inline-block; font-size:13px; font-weight:700; color:var(--accent1);
    background:color-mix(in srgb, var(--accent1) 10%, transparent);
    border-radius:999px; padding:4px 12px; margin:8px 0 14px; align-self:flex-start;
  }body.pricing .plan ul{list-style:none; margin:0 0 20px; padding:0; font-size:14px; color:var(--muted); flex:1}body.pricing .plan ul li{margin-bottom:9px; padding-left:24px; position:relative}body.pricing .plan ul li::before{content:"✓"; position:absolute; left:2px; color:var(--accent1); font-weight:700}body.pricing .plan ul li.no{opacity:.55}body.pricing .plan ul li.no::before{content:"–"; color:var(--muted)}body.pricing .btn{
    display:block; text-align:center; text-decoration:none; font-weight:700; font-size:15px;
    padding:12px 16px; border-radius:14px; cursor:pointer; border:1px solid var(--border);
    background:var(--surface-2); color:var(--text);
  }body.pricing .btn.primary{
    background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#fff; border:none;
    box-shadow:0 4px 14px rgba(99,102,241,.35);
  }body.pricing .btn.disabled{opacity:.55; cursor:default}body.pricing .btn:disabled{opacity:.55; cursor:default}body.pricing button.btn{width:100%; font-family:inherit}body.pricing .soon-note{font-size:12.5px; color:var(--muted); text-align:center; margin-top:10px}body.pricing h2.section{font-size:24px; letter-spacing:-.3px; margin:0 0 6px}body.pricing p.section-sub{color:var(--muted); margin:0 0 24px; max-width:720px}body.pricing .tablewrap{overflow-x:auto; border:1px solid var(--border); border-radius:16px; background:var(--surface); margin-bottom:56px}body.pricing table{border-collapse:collapse; width:100%; min-width:640px; font-size:14.5px}body.pricing th, body.pricing td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--border)}body.pricing thead th{background:var(--surface-2); font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted)}body.pricing thead th:not(:first-child), body.pricing tbody td:not(:first-child){text-align:center}body.pricing tbody tr:last-child td{border-bottom:none}body.pricing tbody td:first-child{font-weight:600}body.pricing .feat-note{display:block; font-weight:400; font-size:12.5px; color:var(--muted)}body.pricing .yes{color:var(--accent1); font-weight:700}body.pricing .no{color:var(--muted)}body.pricing .planned-tag{
    font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
    color:#8a5a00; background:#fdf0d5; border-radius:999px; padding:2px 9px; margin-left:8px; white-space:nowrap;
  }html[data-theme="dark"] body.pricing .planned-tag{color:#ffd98a; background:#3a2f17}body.pricing .features{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:56px}
  @media(max-width:760px){body.pricing .features{grid-template-columns:1fr}}body.pricing .feature{
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    padding:22px; box-shadow:var(--shadow);
  }body.pricing .feature h3{margin:0 0 8px; font-size:17px}body.pricing .feature p{margin:0 0 8px; font-size:14.5px; color:var(--muted)}body.pricing .feature p:last-child{margin-bottom:0}body.pricing .feature .for{font-size:13px; color:var(--text)}body.pricing .feature .for b{color:var(--accent1)}body.pricing .moments{
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:56px;
  }
  @media(max-width:760px){body.pricing .moments{grid-template-columns:1fr}}body.pricing .moment{
    background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px;
  }body.pricing .moment .m-label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--accent1); margin-bottom:8px}body.pricing .moment .m-before{font-size:14px; color:var(--muted); margin-bottom:8px}body.pricing .moment .m-before b{color:var(--text); font-weight:600}body.pricing .moment .m-after{font-size:14px}body.pricing .faq{border:1px solid var(--border); border-radius:12px; margin-bottom:8px; background:var(--surface)}body.pricing .faq summary{padding:14px 16px; font-weight:600; font-size:15px; cursor:pointer; list-style:none}body.pricing .faq summary::-webkit-details-marker{display:none}body.pricing .faq summary::after{content:'+'; float:right; color:var(--muted); font-weight:400}body.pricing .faq[open] summary::after{content:'\2013'}body.pricing .faq .faq-a{padding:2px 16px 16px; font-size:14.5px; color:var(--muted); line-height:1.65}body.pricing .faqs{margin-bottom:56px; max-width:800px}body.pricing footer{
    border-top:1px solid var(--border); padding:24px 20px; text-align:center;
    color:var(--muted); font-size:13.5px;
  }body.pricing footer a{color:var(--accent1); text-decoration:none}

/* ============ doc pages — same layout as index ============ */
body.doc{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.65; margin:0; padding:0;
  color:var(--text); background:var(--bg);
  display:block; height:auto; min-height:100dvh;
}
/* full app header bar, identical to index */
body.doc header.top{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--border);
  background:var(--surface); max-width:none; margin:0;
}
body.doc .doc-logo{
  width:34px; height:34px; border-radius:12px; flex:0 0 auto;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
  box-shadow:0 4px 14px rgba(99,102,241,.35); text-decoration:none;
}
body.doc .doc-logo svg{width:20px; height:20px}
body.doc .doc-title{line-height:1.25; min-width:0}
body.doc .doc-title b{font-size:16px; display:block}
body.doc .doc-title span{font-size:12px; color:var(--muted)}
body.doc .doc-back{
  margin-left:auto; font-size:12.5px; font-weight:600; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--border);
  padding:6px 12px; border-radius:999px; white-space:nowrap; text-decoration:none;
}
body.doc .doc-back:hover{color:var(--text); text-decoration:none}
/* flowing page content — no card, no box, just the app background */
body.doc main{
  max-width:760px; margin:0 auto; padding:32px 20px 48px;
  background:none; border:none; border-radius:0; box-shadow:none;
}
body.doc h1{font-size:28px; margin:0 0 4px; letter-spacing:-.02em}
body.doc h2{font-size:19px; margin:32px 0 10px; letter-spacing:-.01em}
body.doc .meta{color:var(--muted); font-size:13.5px; margin:0 0 24px}
body.doc p, body.doc li{font-size:15.5px}
body.doc a{color:var(--accent1); text-decoration:none}
body.doc a:hover{text-decoration:underline}
body.doc .callout{background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:14px 18px; margin:20px 0}
body.doc table{border-collapse:collapse; width:100%; margin:16px 0; font-size:14.5px}
body.doc th, body.doc td{border:1px solid var(--border); padding:10px 12px; text-align:left; vertical-align:top}
body.doc th{background:var(--surface-2); font-weight:600}
body.doc ol.steps li{margin-bottom:12px}
body.doc footer{max-width:760px; margin:0 auto; padding:8px 20px 48px; font-size:13.5px; color:var(--muted); text-align:center}
body.doc footer nav{margin-bottom:12px; line-height:2}

/* ============ faq.php — app-matched ============ */
body.doc .faqs{margin:8px 0 40px}
body.doc .faq{border:1px solid var(--border); border-radius:12px; margin-bottom:8px; background:var(--surface)}
body.doc .faq summary{padding:14px 16px; font-weight:600; font-size:15px; cursor:pointer; list-style:none; color:var(--text)}
body.doc .faq summary::-webkit-details-marker{display:none}
body.doc .faq summary::after{content:'+'; float:right; color:var(--muted); font-weight:400}
body.doc .faq[open] summary::after{content:'3'}
body.doc .faq .faq-a{padding:2px 16px 16px; font-size:14.5px; color:var(--muted); line-height:1.65}
body.doc .faq-section{margin:32px 0 8px}
body.doc .spacer{flex:1}
body.doc .authwrap{position:relative}
body.doc .hidden{display:none!important}

/* ---------- header nav (app + doc pages) ---------- */
.appnav{display:flex; align-items:center; gap:2px; margin-left:6px}
.appnav a{font-size:14px; font-weight:600; color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:10px; white-space:nowrap}
.appnav a:hover{color:var(--text); background:var(--surface-2)}
.appnav a.on{color:var(--text)}
body.doc .docnav{display:flex; align-items:center; gap:2px; margin-left:14px}
body.doc .docnav a{font-size:14px; font-weight:600; color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:10px; white-space:nowrap}
body.doc .docnav a:hover{color:var(--text); background:var(--surface-2)}
body.doc .docnav a.on{color:var(--text)}

/* ---------- features + why pages ---------- */
.fhero{text-align:center; padding:40px 0 8px; max-width:720px; margin:0 auto}
.fhero h1{font-size:clamp(30px,5vw,44px); letter-spacing:-1px; line-height:1.12; margin:0 0 14px}
.fsub{font-size:17px; color:var(--muted); margin:0 0 24px; line-height:1.6}
.fcta{display:inline-block; font-size:16px; font-weight:700; color:#fff; text-decoration:none; padding:13px 26px; border-radius:14px; background:linear-gradient(135deg,var(--accent1),var(--accent2)); box-shadow:0 4px 14px rgba(99,102,241,.35)}
.fcta:hover{filter:brightness(1.06)}
body.doc a.fcta{color:#fff}
h2.section{font-size:24px; letter-spacing:-.3px; margin:44px 0 6px}
.fsteps{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px}
.fstep{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px}
.fstep > b{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#fff; font-size:15px; margin-bottom:10px}
.fstep h3{margin:0 0 6px; font-size:16px}
.fstep p{margin:0; font-size:14px; color:var(--muted); line-height:1.6}
.fbax{display:grid; gap:14px; margin-top:18px}
.fba{border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--surface)}
.fba-before{padding:16px 20px; border-bottom:1px solid var(--border)}
.fba-before span, .fba-after span{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--muted)}
.fba-before p{margin:6px 0 0; font-size:16px; color:var(--muted)}
.fba-after{padding:16px 20px; background:var(--surface-2)}
.fba-after p{margin:6px 0 0; font-size:16px}
.fgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px}
.fcard{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px}
.fcard h3{margin:0 0 6px; font-size:16px}
.fcard p{margin:0; font-size:14px; color:var(--muted); line-height:1.6}
.fcta2{text-align:center; margin:56px 0 24px; padding:40px 20px; background:var(--surface); border:1px solid var(--border); border-radius:20px}
.fcta2 h2{margin:0 0 8px; font-size:26px; letter-spacing:-.5px}
.fcta2 p{color:var(--muted); margin:0 0 20px}
.wstory{max-width:720px; margin:0 auto}
.wstory p{font-size:16.5px; line-height:1.7; color:var(--text)}
.wpull{font-size:20px!important; font-weight:600; letter-spacing:-.3px; border-left:4px solid var(--accent1); padding:4px 0 4px 18px; margin:28px 0!important; color:var(--text)!important}
.wfor{margin-top:8px}

@media (max-width:820px){
  .appnav, body.doc .docnav{display:none}
  .fsteps, .fgrid{grid-template-columns:1fr}
}
body.doc .faq-static{border:1px solid var(--border); border-radius:12px; margin-bottom:8px; background:var(--surface); padding:14px 16px}
body.doc .faq-static .faq-q{font-weight:600; font-size:15px; margin-bottom:6px}
body.doc .faq-static .faq-a{font-size:14.5px; color:var(--muted); line-height:1.65}
body.pricing .faq-static{border:1px solid var(--border); border-radius:12px; margin-bottom:8px; background:var(--surface); padding:14px 16px}
body.pricing .faq-static .faq-q{font-weight:600; font-size:15px; margin-bottom:6px}
body.pricing .faq-static .faq-a{font-size:14.5px; color:var(--muted); line-height:1.65}

  /* ---------- newsletter ---------- */
  .nl-form{display:flex; gap:10px; flex:1; min-width:280px; max-width:520px}
  .nl-form input[type=email]{flex:1; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:12px 16px; color:var(--text); font-size:15px; min-width:0}
  .nl-form input[type=email]:focus{outline:2px solid var(--accent1); border-color:var(--accent1)}
  .nl-form button{background:var(--accent1); color:#fff; border:none; border-radius:12px; padding:12px 22px; font-weight:700; font-size:15px; cursor:pointer; white-space:nowrap}
  .nl-form button:hover{filter:brightness(1.08)}
  .nl-msg{text-align:center; color:var(--muted); font-size:14px; max-width:960px; margin:12px auto 0}
  .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; opacity:0}

  .newpill{display:inline-block; font-size:9px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
    background:#2dd4bf; color:#052e2b; border-radius:999px; padding:2px 8px; margin-left:6px; vertical-align:2px}
  @media (max-width:560px){
    .feat-text span{display:none}
    .feat-body{padding-right:40px}
  }