*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --p:#7c3aed;--p2:#a855f7;--ps:#5b21b6;
      --g:linear-gradient(135deg,#7c3aed,#a855f7);
      --bg:#f8f7ff;--card:#fff;
      --border:#ede9fe;--border2:#e8e0fb;
      --txt:#0f0e17;--sub:#64748b;--mute:#94a3b8;
      --rad:14px;--shadow:0 4px 20px rgba(124,58,237,.08);
      /* Neutral, Apple-style tokens — used where a card/divider shouldn't
         carry a purple tint (hairline borders, crisp low-opacity shadows).
         The brand tokens above stay for anything that should read as an
         accent (selected states, primary buttons, progress fills). */
      --hair:rgba(0,0,0,.08);
      --hair-soft:rgba(0,0,0,.06);
      --shadow-crisp:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05);
    }
    html{scroll-behavior:smooth}
    html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',system-ui,sans-serif;background:var(--bg);color:var(--txt);font-size:14px;line-height:1.5;padding-top:0}

    /* ── VIEWS ── */
    .view{display:none;min-height:100vh}
    .view.active{display:block}

    /* ── HEADER ── */
    .hdr{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,0,0,.07);height:58px;box-shadow:0 1px 0 rgba(0,0,0,.05)}
    .hdr-inner{max-width:1200px;margin:0 auto;padding:0 14px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:10px}
    /* Left cluster: hamburger + brand name */
    .hdr-left{display:flex;align-items:center;gap:10px}
    .brand-mark{width:26px;height:26px;border-radius:7px;object-fit:cover;cursor:pointer;
      margin-right:-4px;flex-shrink:0;-webkit-user-drag:none}
    .brand-wordmark{
      font-size:15px;font-weight:800;
      letter-spacing:-.3px;
      color:#0f0e17;
      cursor:pointer;user-select:none;
      font-family:'Inter',system-ui,sans-serif;
      transition:opacity .15s;
      white-space:nowrap;
      line-height:1;
    }
    .brand-wordmark:hover{opacity:.6}
    /* Keep brand/brand-ico/brand-txt for legacy refs but hide them */
    .brand{display:none}
    .hdr-right{display:flex;align-items:center;gap:8px}
    /* Gemini-style KIE button — compact icon chip */
    .kie-btn{
      display:inline-flex;align-items:center;justify-content:center;gap:5px;
      background:#f3f0ff;
      color:#5b21b6;
      border:1.5px solid rgba(124,58,237,.18);
      border-radius:99px;
      padding:6px 13px 6px 8px;
      font-size:12px;font-weight:700;
      letter-spacing:-.1px;
      font-family:'Inter',sans-serif;
      cursor:pointer;
      transition:all .18s;
      position:relative;
      white-space:nowrap;
      box-shadow:none;
    }
    .kie-btn:hover{background:#ede9fe;border-color:rgba(124,58,237,.35);color:#4c1d95;transform:none;box-shadow:none}
    .kie-btn:active{background:#ddd6fe}
    .kie-btn .kie-spark{
      width:22px;height:22px;flex-shrink:0;
      display:inline-flex;align-items:center;justify-content:center;
      border-radius:50%;overflow:hidden;
      background:linear-gradient(135deg,#7c3aed,#a855f7);
      box-shadow:0 1px 4px rgba(124,58,237,.3);
    }
    .kie-btn .kie-spark svg{display:block;width:100%;height:100%}
    .kie-dot{display:none}
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
    /* ── JOBS HOME SECTION ── */
    .jobs-home-section{margin-bottom:24px}
    .job-snap-card{background:#fff;border:1.5px solid var(--border2);border-radius:18px;padding:14px;width:220px;flex-shrink:0;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:all .18s;text-decoration:none;position:relative;box-shadow:0 3px 16px rgba(124,58,237,.07)}
    /* job-snap-locked dimming removed — locked cards are now fully browsable (Option 2: paywall at Apply) */
    .job-snap-card:hover{border-color:var(--p2);box-shadow:0 8px 26px rgba(124,58,237,.13);transform:translateY(-2px)}
    .job-snap-logo{width:36px;height:36px;border-radius:9px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #e5e7eb;flex-shrink:0}
    .job-snap-logo img{width:100%;height:100%;object-fit:contain}
    .job-snap-title{font-size:12.5px;font-weight:800;color:#1a1a2e;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .job-snap-company{font-size:11px;color:#6b7280;font-weight:600}
    .job-snap-tags{display:flex;gap:4px;flex-wrap:wrap}
    .job-snap-tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px;background:#f3f0ff;color:#7c3aed}
    .job-snap-tag.remote{background:#ecfdf5;color:#059669}
    .job-snap-tag.salary{background:#fffbeb;color:#d97706}
    .job-snap-apply{margin-top:auto;font-size:11px;font-weight:700;color:#7c3aed;display:flex;align-items:center;gap:3px}

    /* ── JOBS SKELETON ── */
    @keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
    .job-snap-skel{width:220px;flex-shrink:0;border-radius:18px;overflow:hidden;background:#f3f0ff;height:140px;animation:shimmer 1.4s linear infinite;background:linear-gradient(90deg,#f3f0ff 25%,#ede9fe 50%,#f3f0ff 75%);background-size:200% 100%}
    /* ── RESUME CARD SKELETON (shown on first paint, before data loads) ── */
    .resume-snap-skel{flex:0 0 calc(85vw - 24px);max-width:290px;min-width:240px;height:236px;border-radius:20px;flex-shrink:0;scroll-snap-align:start;animation:shimmer 1.4s linear infinite;background:linear-gradient(90deg,#f3f0ff 25%,#ede9fe 50%,#f3f0ff 75%);background-size:200% 100%}
    .job-snap-more{background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;border-radius:18px;padding:14px;width:140px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:all .18s;text-decoration:none;color:#fff;text-align:center}
    .job-snap-more:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(124,58,237,.35)}
    .job-snap-more-circle{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}
    .job-snap-more-txt{font-size:12px;font-weight:800;line-height:1.3}

    /* ── KIE CHAT — INLINE JOB RESULTS ─────────────────────────────────────
       Reuses the exact .job-snap-card visual language from the Home job
       snapshot widget (same cards the person already recognizes), just
       narrower so a row of them fits naturally inside a chat bubble. */
    .kie-jobs-strip{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 4px;margin-top:8px;scrollbar-width:none}
    .kie-jobs-strip::-webkit-scrollbar{display:none}
    .kie-jobs-strip .job-snap-card{width:168px;padding:12px}
    .kie-jobs-strip .job-snap-more{width:110px;padding:12px}
    .kie-jobs-strip .job-snap-more-circle{width:32px;height:32px}
    .kie-jobs-strip .job-snap-title{font-size:12px}
    .kie-jobs-strip .job-snap-more-txt{font-size:11px}


    .av-wrap{position:relative}
    .hbg-btn{width:38px;height:38px;background:transparent;border:1.5px solid rgba(124,58,237,.15);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;padding:0;position:relative}
    .hbg-btn:hover{background:rgba(124,58,237,.07);border-color:rgba(124,58,237,.3)}
    .hbg-btn.open{background:rgba(124,58,237,.1);border-color:var(--p)}
    .hbg-svg{display:block;width:18px;height:14px;overflow:visible}
    .hbg-svg line{stroke:#4c1d95;stroke-width:2;stroke-linecap:round;transition:all .25s cubic-bezier(.4,0,.2,1);transform-origin:center}
    .hbg-svg .hb1{y1:1;y2:1}.hbg-svg .hb2{y1:7;y2:7}.hbg-svg .hb3{y1:13;y2:13}
    .hbg-btn:hover .hbg-svg line{stroke:var(--p)}
    .hbg-btn.open .hbg-svg .hb1{transform:translateY(6px) rotate(45deg);stroke:var(--p)}
    .hbg-btn.open .hbg-svg .hb2{opacity:0;transform:scaleX(0)}
    .hbg-btn.open .hbg-svg .hb3{transform:translateY(-6px) rotate(-45deg);stroke:var(--p)}

    /* ── MAIN SIDEBAR ── */
    /* ── Premium Feature Drawer ── */
    .pfd-overlay{position:fixed;inset:0;background:rgba(10,8,20,.55);z-index:920;display:none;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
    .pfd-overlay.open{display:block;animation:fadeIn .18s ease}
    .pfd-sheet{position:fixed;left:0;right:0;bottom:0;z-index:930;background:#fff;border-radius:26px 26px 0 0;
      padding:14px 26px max(28px,env(safe-area-inset-bottom,28px));max-width:480px;margin:0 auto;
      box-shadow:0 -8px 50px rgba(124,58,237,.22);transform:translateY(100%);
      transition:transform .38s cubic-bezier(.32,.72,0,1);text-align:center}
    .pfd-sheet.open{transform:translateY(0)}
    .pfd-handle{width:38px;height:4px;background:#ece7fb;border-radius:2px;margin:0 auto 18px}
    .pfd-close{position:absolute;top:16px;right:18px;width:30px;height:30px;border-radius:50%;border:none;
      background:#f6f4fd;color:#7c3aed;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
    .pfd-icon-wrap{width:64px;height:64px;border-radius:20px;margin:4px auto 16px;
      background:linear-gradient(135deg,#7c3aed,#a855f7);display:flex;align-items:center;justify-content:center;
      box-shadow:0 10px 28px rgba(124,58,237,.35);position:relative}
    .pfd-icon-wrap::after{content:'';position:absolute;inset:-3px;border-radius:23px;
      background:linear-gradient(135deg,#7c3aed,#a855f7);opacity:.25;filter:blur(8px);z-index:-1}
    .pfd-icon-wrap.pfd-icon-wrap-plain{background:none;box-shadow:none;width:auto;height:auto}
    .pfd-icon-wrap.pfd-icon-wrap-plain::after{content:none}
    .pfd-icon{display:flex;align-items:center;justify-content:center}
    .pfd-icon svg{width:30px;height:30px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
    .pfd-title{font-size:19px;font-weight:900;color:#0f0e17;letter-spacing:-.4px;margin-bottom:8px}
    .pfd-desc{font-size:13.5px;color:#64748b;line-height:1.6;padding:0 6px;margin-bottom:6px}
    .pfd-sub{font-size:12px;color:#a78bfa;font-weight:700;margin-bottom:18px;min-height:4px}
    .pfd-cta{width:100%;padding:15px;border-radius:14px;border:none;font-family:inherit;
      background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;font-size:14.5px;font-weight:800;
      cursor:pointer;box-shadow:0 8px 24px rgba(124,58,237,.32);margin-bottom:10px}
    .pfd-cta:active{transform:scale(.98)}
    .pfd-later{width:100%;padding:6px;border:none;background:none;color:#9ca3af;font-size:12.5px;
      font-weight:600;cursor:pointer;font-family:inherit}

    .msb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:490;display:none;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
    .msb-overlay.open{display:block;animation:fadeIn .18s ease}
    .msb{position:fixed;top:0;left:-300px;width:280px;height:100vh;background:#fff;z-index:500;display:flex;flex-direction:column;transition:left .28s cubic-bezier(.4,0,.2,1);border-right:1px solid #f0f0f0;overflow:hidden}
    .msb.open{left:0}
    .msb-profile{padding:22px 22px 18px;border-bottom:1px solid #f0f0f0}
    .msb-upgrade-banner{margin:14px 22px;padding:14px 16px;border-radius:14px;
      background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;cursor:pointer;
      display:flex;align-items:center;gap:11px;box-shadow:0 6px 18px rgba(124,58,237,.28);transition:transform .15s}
    .msb-upgrade-banner:active{transform:scale(.98)}
    .msb-upgrade-banner-ico{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.2);
      display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
    .msb-upgrade-banner-title{font-size:13px;font-weight:800;line-height:1.3}
    .msb-upgrade-banner-sub{font-size:11px;opacity:.88;margin-top:2px;line-height:1.3}
    .msb-upgrade-banner-arr{margin-left:auto;opacity:.85;flex-shrink:0}
    .msb-profile-row{display:flex;align-items:center;gap:12px}
    .msb-av{width:44px;height:44px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#fff;flex-shrink:0;background-size:cover;background-position:center}
    .msb-av:hover{opacity:.8}
    .msb-profile-text{min-width:0;flex:1}
    .msb-name{font-size:15px;font-weight:700;color:#0f0e17;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .msb-name:hover{color:var(--p)}
    .msb-email{font-size:12px;color:#6b7280;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
    .msb-profile-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#6b7280;text-decoration:none;transition:color .15s}
    .msb-profile-link:hover{color:#0f0e17}
    .msb-nav{flex:1;padding:10px 0;overflow-y:auto}
    .msb-section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#9ca3af;padding:14px 22px 6px}
    .msb-item{display:flex;align-items:center;gap:13px;padding:11px 22px;font-size:14px;font-weight:500;color:#374151;cursor:pointer;transition:background .12s,color .12s;text-decoration:none;border:none;background:none;width:100%;font-family:inherit;text-align:left}
    .msb-item:hover{background:#f9f9f9;color:#0f0e17}
    .msb-item svg{flex-shrink:0;opacity:.55}
    .msb-item:hover svg{opacity:.9}
    .msb-divider{height:1px;background:#f3f3f3;margin:6px 0}
    .msb-item.active{background:#f3f0ff;color:var(--ps);font-weight:700}
    .msb-item.active svg{opacity:1;color:var(--p)}
    .msb-item-kie{margin:2px 14px 14px;padding:11px 14px;border-radius:13px;background:var(--g);color:#fff;font-weight:700;width:calc(100% - 28px);box-shadow:0 4px 14px rgba(124,58,237,.28)}
    .msb-item-kie:hover{background:var(--g);color:#fff;filter:brightness(1.05)}
    .msb-item-kie svg{opacity:.9}
    .msb-item-kie:hover svg{opacity:1}
    .msb-kie-ico{width:22px;height:22px;border-radius:50%;overflow:hidden;flex-shrink:0;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center}
    .msb-kie-ico img{width:100%;height:100%;object-fit:cover;display:block}
    .msb-foot{padding:10px 22px 14px;border-top:1px solid #f0f0f0}
    .msb-follow{margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
    .msb-follow-label{font-size:10px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.6px}
    .msb-socials{display:flex;gap:6px;align-items:center}
    .msb-social-ico{width:22px;height:22px;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid #f0f0f0;transition:border-color .15s,opacity .15s;flex-shrink:0}
    .msb-social-ico:hover{border-color:#d1d5db;opacity:.8}
    .msb-social-ico img{width:100%;height:100%;object-fit:cover;display:block}
    .msb-foot-divider{height:1px;background:#f3f3f3;margin-bottom:10px}
    .msb-signout{display:flex;align-items:center;gap:13px;font-size:14px;font-weight:500;color:#9ca3af;cursor:pointer;transition:color .12s;border:none;background:none;width:100%;font-family:inherit;text-align:left;padding:0}
    .msb-signout:hover{color:#e11d48}

    @keyframes fadeIn{from{opacity:0}to{opacity:1}}

    /* ── INNER NAV (Instagram-style — all non-home screens) ── */
    .i-nav{
      position:fixed;top:0;left:0;right:0;z-index:100;
      height:60px;
      background:rgba(255,255,255,.97);
      backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
      border-bottom:1px solid rgba(124,58,237,.1);
      display:none;align-items:center;justify-content:space-between;
      padding:0 12px;
      box-shadow:0 1px 12px rgba(124,58,237,.06);
    }
    .i-nav.active{display:flex}
    .i-nav-back{
      width:40px;height:40px;background:transparent;border:none;
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;border-radius:50%;transition:background .15s;
      color:#0f0e17;flex-shrink:0;
    }
    .i-nav-back:hover{background:rgba(124,58,237,.07)}
    .i-nav-back:active{background:rgba(124,58,237,.13)}
    .i-nav-title{
      font-size:16px;font-weight:800;color:#0f0e17;
      letter-spacing:-.35px;
      position:absolute;left:50%;transform:translateX(-50%);
      white-space:nowrap;pointer-events:none;
    }
    .i-nav-right{width:40px;flex-shrink:0}
    /* Hide ALL inline back controls when inner nav is active */
    body.i-nav-on .back-row,
    body.i-nav-on #uploadBackWrap,
    body.i-nav-on #analysisBack,
    body.i-nav-on #detBack,
    body.i-nav-on #clBackBtn,
    body.i-nav-on #builderBack,
    body.i-nav-on #clDashBtn { display:none!important }

    /* Step wizard bars — sticky sub-header below iNav */
    body.i-nav-on .bld-sticky-hdr{
      position:sticky;top:60px;z-index:50;
      background:rgba(255,255,255,.98);
      backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
      padding:10px 0 14px;margin:0 0 20px;
    }
    body.i-nav-on .bld{ padding-top:64px }
    body.i-nav-on .cl-step-hdr{
      position:sticky;top:60px;z-index:50;
      background:rgba(255,255,255,.98);
      backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
      padding:10px 0;margin:0 0 20px;
    }
    body.i-nav-on .cl-wrap{ padding-top:64px }

    /* ── HOME ── */
    .home{max-width:1100px;margin:0 auto;padding:88px 20px 48px}
    /* Dashboard 4-card swiper — replaces the old single hero banner */
    .dash-swiper-outer{margin-bottom:26px}
    .ds-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:10px 4px 6px;scrollbar-width:none}
    .ds-track::-webkit-scrollbar{display:none}
    .ds-slide{flex:0 0 90%;max-width:420px;scroll-snap-align:center;display:flex;flex-direction:column}
    .ds-card{border-radius:26px;padding:24px 20px;position:relative;display:flex;align-items:center;gap:8px;min-height:340px}
    .ds-card-body{flex:1;min-width:0;position:relative;z-index:2;text-align:left}
    .ds-tag{display:flex;align-items:center;gap:8px;margin-bottom:18px}
    .ds-tag-ico{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;flex-shrink:0}
    .ds-tag-label{font-size:13px;font-weight:700;color:#57596b}
    .ds-doc-wrap{position:relative;width:104px;flex-shrink:0}
    .ds-doc-mock{background:#fff;border-radius:14px;padding:16px 13px;box-shadow:0 14px 32px rgba(15,14,23,.16)}
    .ds-stat-badge{position:absolute;top:-16px;right:-18px;background:#fff;border-radius:50%;width:62px;height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.18);z-index:3}
    .ds-stat-num{font-size:18px;font-weight:900;color:var(--txt);line-height:1;font-family:'Fraunces',serif}
    .ds-stat-lbl{font-size:6.5px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.3px;margin-top:2px;text-align:center}
    .ds-chart-float{position:absolute;bottom:-10px;right:-10px;z-index:4;filter:drop-shadow(0 8px 14px rgba(0,0,0,.16))}
    .ds-sparkle{position:absolute;pointer-events:none;z-index:1}
    .ds-card-heading{font-family:'Fraunces',serif;font-size:25px;font-weight:700;color:var(--txt);letter-spacing:-.4px;line-height:1.12;margin-bottom:12px}
    .ds-card-sub{font-size:12.5px;color:var(--sub);line-height:1.55;margin-bottom:20px;max-width:190px}
    .ds-card-cta{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border:none;border-radius:99px;padding:12px 16px;font-size:12px;font-weight:800;color:#fff;cursor:pointer;font-family:inherit;box-shadow:0 8px 20px rgba(0,0,0,.18);transition:transform .12s}
    .ds-card-cta:active{transform:scale(.97)}
    .ds-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}

    /* ── RECENT RESUMES — small card, rhymes with the hero swiper above ── */
    .rr-slide{flex:0 0 calc(85vw - 24px);max-width:290px;min-width:240px;scroll-snap-align:start;cursor:pointer}
    .rr-card{display:flex;align-items:center;gap:13px;background:#fff;border:1.5px solid var(--border2);border-radius:18px;padding:12px 14px;box-shadow:0 3px 16px rgba(124,58,237,.07);transition:all .22s}
    .rr-slide:hover .rr-card{border-color:var(--p2);box-shadow:0 8px 26px rgba(124,58,237,.13);transform:translateY(-1px)}
    .rr-thumb{position:relative;width:52px;height:60px;flex-shrink:0;background:linear-gradient(160deg,#f3e8ff,#ede9fe);border-radius:12px;display:flex;align-items:center;justify-content:center}
    .rr-thumb-mock{width:34px}
    .rr-doc-line{height:3px;border-radius:1.5px;background:#c4b5fd;margin-bottom:4px;opacity:.8}
    .rr-doc-line-h{width:75%;height:4px;margin-bottom:5px}
    .rr-doc-badge{position:absolute;top:-6px;right:-8px;min-width:22px;height:22px;padding:0 4px;border-radius:11px;background:var(--g);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(124,58,237,.3);color:#fff;font-size:9px;font-weight:900}
    .rr-info{flex:1;min-width:0}
    .rr-name{font-size:14px;font-weight:800;color:var(--txt);letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .rr-tailored-for{font-size:11px;font-weight:700;color:#7c3aed;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
    .rr-date{font-size:11px;color:var(--sub);font-weight:600;margin:2px 0 6px}
    .rr-pill{display:inline-flex;align-items:center;font-size:10px;font-weight:800;padding:3px 8px;border-radius:99px;letter-spacing:-.1px}
    .rr-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
    .rr-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;border:none;cursor:pointer;transition:all .15s;flex-shrink:0}
    .rr-btn-edit{background:#ede9fe;color:var(--p)}
    .rr-btn-edit:hover{background:#ddd6fe}
    .rr-btn-del{background:#fff1f2;color:#e11d48}
    .rr-btn-del:hover{background:#ffe4e6}

    /* ── DETAILED SKELETONS — reuse the real card containers (.rr-card / .job-snap-card)
       so size, padding, radius and shadow match exactly; only the inner content is
       swapped for shimmering bones instead of a single flat rectangle ── */
    .skel-shimmer{background:linear-gradient(90deg,#f3f0ff 25%,#ede9fe 50%,#f3f0ff 75%)!important;background-size:200% 100%;animation:shimmer 1.4s linear infinite}
    .rr-skel-bar{border-radius:5px}
    .rr-skel-pill{width:56px;height:18px;border-radius:99px}
    .rr-skel-btn{width:28px;height:28px;border-radius:9px}
    .job-skel-bar{border-radius:4px}
    .job-skel-tag{width:46px;height:18px;border-radius:99px}
    .ds-dot{width:6px;height:6px;border-radius:99px;background:var(--border2);border:none;padding:0;cursor:pointer;transition:all .25s}
    .ds-dot.active{width:20px;background:var(--g)}

    .hero{background:linear-gradient(140deg,#3b0f8c 0%,#5c1fd4 35%,#7c3aed 65%,#9333ea 100%);border-radius:24px;padding:22px 0 0 22px;color:#fff;margin-bottom:24px;overflow:hidden;position:relative;box-shadow:0 12px 40px rgba(76,29,149,.5)}
    .hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 75% 40%,rgba(192,132,252,.22) 0%,transparent 60%),radial-gradient(ellipse at 10% 90%,rgba(109,40,217,.3) 0%,transparent 50%);pointer-events:none}
    .hero-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:0;position:relative;z-index:1}
    .hero-left{flex:1;padding-bottom:20px;padding-top:2px;display:flex;flex-direction:column;justify-content:flex-start;padding-right:8px}
    .hero-greet{font-size:13px;font-weight:600;opacity:.9;margin-bottom:6px;letter-spacing:.1px}
    .hero-title{font-size:26px;font-weight:900;line-height:1.15;margin-bottom:8px;letter-spacing:-.5px}
    .hero-sub{font-size:13px;opacity:.78;line-height:1.55;margin-bottom:18px;max-width:190px}
    .hero-btns{display:flex;flex-direction:column;gap:8px}
    .hbtn{display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;padding:12px 16px;border-radius:14px;font-size:14px;font-weight:800;border:none;cursor:pointer;transition:all .2s;width:100%;font-family:inherit;letter-spacing:-.1px}
    .hbtn-pri{background:#fff;color:#6d28d9;box-shadow:0 2px 12px rgba(0,0,0,.15)}
    .hbtn-pri:hover{background:#f5f3ff;transform:translateY(-1px);box-shadow:0 4px 18px rgba(0,0,0,.2)}
    .hbtn-sec{background:rgba(255,255,255,.18);color:#fff;border:1.5px solid rgba(255,255,255,.3);backdrop-filter:blur(8px)}
    .hbtn-sec:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)}
    .hero-illo{width:136px;flex-shrink:0;align-self:flex-end;position:relative;overflow:visible;margin-right:0}
    .sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-top:8px}
    .sh-title{font-size:20px;font-weight:800;display:flex;align-items:center;gap:10px}
    .sh-badge{background:var(--g);color:#fff;font-size:11px;font-weight:800;padding:3px 10px;border-radius:99px;box-shadow:0 2px 8px rgba(124,58,237,.2)}
    .sh-link{font-size:14px;font-weight:700;color:var(--p);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:all .15s}
    .sh-link:hover{text-decoration:none;gap:6px;color:var(--ps)}
    .rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
    /* ── RECENT RESUME LIST (Image 4 style) ── */
    .recent-list{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
    .rlist-card{background:#fff;border-radius:16px;border:1.5px solid var(--border2);display:flex;align-items:center;gap:16px;padding:14px 16px;cursor:pointer;transition:all .22s;box-shadow:0 2px 10px rgba(124,58,237,.05);position:relative;overflow:hidden}
    .rlist-card:hover{border-color:var(--p2);box-shadow:0 8px 24px rgba(124,58,237,.12);transform:translateY(-1px)}
    .rlist-thumb{width:58px;height:76px;border-radius:11px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(124,58,237,.12)}
    .rlist-info{flex:1;min-width:0}
    .rlist-name{font-size:15px;font-weight:800;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .rlist-date{font-size:12px;color:var(--sub);margin-top:3px;font-weight:500}
    .rlist-score{display:inline-flex;align-items:center;gap:6px;margin-top:6px}
    .score-badge{background:#059669;color:#fff;font-size:11px;font-weight:800;padding:3px 9px;border-radius:8px;letter-spacing:-.2px}
    .score-lbl{font-size:11px;color:var(--sub);font-weight:500}
    .rlist-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
    .rlist-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;border:none;cursor:pointer;transition:all .15s;flex-shrink:0}
    .rlist-btn-edit{background:#ede9fe;color:var(--p)}
    .rlist-btn-edit:hover{background:#ddd6fe}
    .rlist-btn-del{background:#fff1f2;color:#e11d48}
    .rlist-btn-del:hover{background:#ffe4e6}
    /* Swiper mode for rlist-cards on home */
    #rGrid.rswiper-track .rlist-card{
      flex:0 0 calc(85vw - 24px);max-width:320px;
      scroll-snap-align:start;
    }
    .rlist-ats-pill{
      display:inline-flex;align-items:center;gap:4px;
      font-size:11px;font-weight:800;padding:3px 9px;
      border-radius:8px;cursor:pointer;transition:opacity .15s;
      letter-spacing:-.1px;
    }
    .rlist-ats-pill:hover{opacity:.75}

    /* ── RESUME SWIPER ── */
    .rswiper-outer{overflow:hidden;position:relative;margin-bottom:4px}
    .rswiper-track{
      display:flex;gap:14px;
      overflow-x:scroll;scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;scrollbar-width:none;
      scroll-behavior:smooth;padding-bottom:2px;
    }
    .rswiper-track::-webkit-scrollbar{display:none}
    .rswiper-dots{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0 20px}
    .rswiper-dot{width:6px;height:6px;border-radius:99px;background:#ddd6fe;border:none;cursor:pointer;transition:all .25s;padding:0}
    .rswiper-dot.active{width:18px;background:var(--p)}

    /* ── RESUME SWIPER CARD ── */
    .rswiper-card{
      flex:0 0 calc(85vw - 24px);max-width:290px;min-width:240px;
      scroll-snap-align:start;
      background:#fff;border-radius:20px;border:1.5px solid var(--border2);
      overflow:hidden;cursor:pointer;transition:all .22s;
      box-shadow:0 3px 16px rgba(124,58,237,.07);
      display:flex;flex-direction:column;
    }
    .rswiper-card:hover{border-color:var(--p2);box-shadow:0 8px 28px rgba(124,58,237,.13);transform:translateY(-2px)}
    /* ATS score banner at top of each card */
    .rsc-ats-bar{
      background:linear-gradient(135deg,#faf5ff,#f3f0ff);
      border-bottom:1.5px solid var(--border2);
      padding:12px 14px;
      display:flex;align-items:center;gap:12px;
      position:relative;
    }
    .ats-ring-mini-wrap{
      position:relative;width:56px;height:56px;flex-shrink:0;cursor:pointer;
    }
    .ats-ring-mini-wrap svg{display:block}
    .ats-ring-mini-inner{
      position:absolute;inset:0;display:flex;flex-direction:column;
      align-items:center;justify-content:center;pointer-events:none;
    }
    .ats-score-num{font-size:13px;font-weight:900;line-height:1}
    .ats-score-unit{font-size:8px;color:var(--mute);font-weight:600;margin-top:1px}
    .ats-info-btn{
      position:absolute;top:-3px;right:-3px;
      width:18px;height:18px;border-radius:50%;
      background:#fff;border:1.5px solid var(--border2);
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;color:var(--mute);transition:all .15s;
      box-shadow:0 1px 4px rgba(0,0,0,.08);
    }
    .ats-info-btn:hover{background:var(--p);color:#fff;border-color:var(--p)}
    .ats-bar-right{flex:1;min-width:0}
    .ats-bar-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--mute);margin-bottom:2px}
    .ats-bar-status{font-size:13px;font-weight:800;line-height:1.2}
    .ats-bar-hint{font-size:11px;color:var(--sub);margin-top:3px;font-weight:500}
    /* Card thumbnail */
    .rsc-thumb{height:130px;overflow:hidden;position:relative;background:linear-gradient(135deg,#f8f7ff,#ede9fe);flex-shrink:0}
    .rsc-thumb .tpl-scaler{pointer-events:none}
    /* Card body */
    .rsc-body{padding:12px 14px 4px}
    .rsc-name{font-size:14px;font-weight:800;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .rsc-date{font-size:11px;color:var(--sub);margin-top:2px;font-weight:500}
    /* Card footer */
    .rsc-foot{padding:8px 12px 12px;display:flex;gap:8px;border-top:1px solid #faf5ff}
    .rsc-foot-btn{
      flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
      padding:8px 6px;border-radius:10px;font-size:12px;font-weight:700;
      border:none;cursor:pointer;transition:all .15s;font-family:inherit;
    }
    .rsc-foot-edit{background:#ede9fe;color:var(--p)}
    .rsc-foot-edit:hover{background:#ddd6fe}
    .rsc-foot-del{background:#fff1f2;color:#e11d48}
    .rsc-foot-del:hover{background:#ffe4e6}

    /* ── ATS INFO DRAWER ── */
    .ats-drawer-backdrop{
      position:fixed;inset:0;background:rgba(15,14,23,.5);z-index:800;
      display:none;animation:fadeIn .2s ease;
    }
    .ats-drawer-backdrop.open{display:block}
    .ats-drawer{
      position:fixed;bottom:0;left:0;right:0;z-index:801;
      background:#fff;border-radius:24px 24px 0 0;
      max-height:88vh;overflow:hidden;
      display:flex;flex-direction:column;
      transform:translateY(100%);transition:transform .32s cubic-bezier(.32,.72,0,1);
      box-shadow:0 -8px 48px rgba(124,58,237,.18);
      will-change:transform;
    }
    .ats-drawer.open{transform:translateY(0)}
    .ats-drawer-handle{width:40px;height:4px;background:#e2e8f0;border-radius:99px;margin:14px auto 0;flex-shrink:0}
    .ats-drawer-inner{padding:18px 20px 36px;overflow-y:auto;flex:1;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
    .ats-drawer-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
    .ats-drawer-title{font-size:17px;font-weight:900;color:var(--txt)}
    .ats-drawer-close{
      width:32px;height:32px;border-radius:50%;background:#f1f5f9;
      border:none;cursor:pointer;font-size:14px;color:var(--sub);
      display:flex;align-items:center;justify-content:center;transition:all .15s;
    }
    .ats-drawer-close:hover{background:#e2e8f0;color:var(--txt)}
    .ats-drawer-score-row{
      display:flex;align-items:center;gap:18px;
      background:linear-gradient(135deg,#faf5ff,#ede9fe);
      border-radius:18px;padding:18px;margin-bottom:18px;
    }
    .ats-drawer-ring{position:relative;width:80px;height:80px;flex-shrink:0}
    .ats-drawer-ring svg{display:block}
    .ats-drawer-ring-inner{
      position:absolute;inset:0;display:flex;flex-direction:column;
      align-items:center;justify-content:center;
    }
    .ats-drawer-score-big{font-size:22px;font-weight:900;line-height:1}
    .ats-drawer-score-sub{font-size:10px;color:var(--sub);font-weight:600;margin-top:2px}
    .ats-drawer-score-info{flex:1}
    .ats-drawer-score-title{font-size:15px;font-weight:800;color:var(--txt);margin-bottom:4px}
    .ats-drawer-score-desc{font-size:12px;color:var(--sub);line-height:1.55}
    .ats-what-box{background:#f8f7ff;border-radius:14px;padding:14px 16px;margin-bottom:16px;border:1.5px solid var(--border2)}
    .ats-what-title{font-size:12px;font-weight:800;color:var(--p);margin-bottom:7px;display:flex;align-items:center;gap:6px}
    .ats-what-text{font-size:12px;color:#334155;line-height:1.65}
    .ats-breakdown-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--sub);margin-bottom:10px}
    .ats-check-item{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-bottom:1px solid #f1f5f9;font-size:13px;color:var(--txt);line-height:1.4}
    .ats-check-item:last-child{border-bottom:none}
    .ats-check-ico{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-size:11px;font-weight:900}
    .ats-ico-ok{background:#dcfce7;color:#16a34a}
    .ats-ico-warn{background:#fff7ed;color:#ea580c}
    .ats-ico-bad{background:#fee2e2;color:#dc2626}
    .ats-check-pts{margin-left:auto;font-size:11px;font-weight:700;flex-shrink:0;padding-left:8px;color:var(--mute)}
    .ats-drawer-cta{
      width:100%;background:var(--g);color:#fff;border:none;border-radius:14px;
      padding:15px;font-size:14px;font-weight:800;cursor:pointer;
      transition:all .2s;box-shadow:0 4px 18px rgba(124,58,237,.3);
      font-family:inherit;margin-top:18px;display:flex;align-items:center;
      justify-content:center;gap:8px;
    }
    .ats-drawer-cta:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(124,58,237,.45)}
    @keyframes atsArcIn{from{stroke-dashoffset:var(--circum)}to{stroke-dashoffset:var(--target)}}

    /* ── CTA BANNER (fintech 2026 style) ── */
    .expert-cta{background:linear-gradient(135deg,#0f0529 0%,#1e0b4f 50%,#2d1265 100%);border:1px solid rgba(168,85,247,.25);border-radius:20px;padding:24px 20px;margin-bottom:28px;overflow:hidden;position:relative;box-shadow:0 8px 40px rgba(109,40,217,.3)}
    .expert-cta::before{content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;background:radial-gradient(circle,rgba(168,85,247,.15) 0%,transparent 70%);border-radius:50%;pointer-events:none}
    .expert-cta::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(168,85,247,.3),transparent)}
    .expert-cta-imgs{display:flex;align-items:center;gap:-8px;margin-bottom:14px}
    .expert-cta-av{width:40px;height:40px;border-radius:50%;border:2.5px solid rgba(255,255,255,.2);overflow:hidden;margin-left:-8px;box-shadow:0 2px 8px rgba(0,0,0,.3);flex-shrink:0;background:linear-gradient(135deg,rgba(168,85,247,.4),rgba(124,58,237,.3));display:flex;align-items:center;justify-content:center;font-size:15px}
    .expert-cta-av:first-child{margin-left:0}
    .expert-cta-title{font-size:18px;font-weight:900;color:#f0e6ff;line-height:1.3;margin-bottom:6px;letter-spacing:-.3px}
    .expert-cta-sub{font-size:13px;color:rgba(196,167,255,.8);line-height:1.6;margin-bottom:14px}
    .expert-cta-list{list-style:none;margin-bottom:18px;display:flex;flex-direction:column;gap:7px}
    .expert-cta-list li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:rgba(226,210,255,.85);line-height:1.5}
    .expert-cta-list li::before{content:'';width:16px;height:16px;border-radius:50%;background:#059669;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");background-size:10px;background-repeat:no-repeat;background-position:center;background-color:#059669}
    .expert-cta-btn{width:100%;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border:none;border-radius:14px;padding:15px;font-size:15px;font-weight:800;cursor:pointer;transition:all .2s;box-shadow:0 4px 20px rgba(124,58,237,.4),inset 0 1px 0 rgba(255,255,255,.15);font-family:inherit;position:relative}
    .expert-cta-btn:hover{background:linear-gradient(135deg,#6d28d9,#9333ea);transform:translateY(-1px);box-shadow:0 6px 28px rgba(124,58,237,.55)}
    .expert-cta-btn:active{transform:translateY(0)}

    /* ── ARTICLE SWIPER ── */
    .art-section{margin-bottom:32px}
    .art-swiper-wrap{overflow:hidden;position:relative}
    /* Scroll-snap track — no JS width calc needed */
    .art-track{
      display:flex;gap:14px;
      overflow-x:scroll;scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;scrollbar-width:none;
      scroll-behavior:smooth;padding-bottom:2px;
    }
    .art-track::-webkit-scrollbar{display:none}
    .art-card{
      flex:0 0 calc(80vw - 24px);max-width:260px;
      scroll-snap-align:start;
      background:#fff;border-radius:18px;border:1.5px solid var(--border2);
      overflow:hidden;cursor:pointer;transition:all .22s;
      box-shadow:0 2px 12px rgba(124,58,237,.06);text-decoration:none;display:block;
    }
    .art-card:hover{border-color:var(--p2);box-shadow:0 8px 28px rgba(124,58,237,.13);transform:translateY(-2px)}
    .art-img{height:130px;overflow:hidden;position:relative;background:linear-gradient(135deg,#f8f7ff,#ede9fe)}
    .art-img img{width:100%;height:100%;object-fit:cover}
    .art-cat{position:absolute;top:10px;left:10px;background:var(--g);color:#fff;font-size:10px;font-weight:800;padding:3px 9px;border-radius:99px;letter-spacing:.3px}
    .art-body{padding:14px 14px 16px}
    .art-title{font-size:13px;font-weight:800;color:var(--txt);line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .art-brief{font-size:11px;color:var(--sub);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
    .art-meta{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:10px;color:var(--mute);font-weight:600}
    /* Pagination dots */
    .art-dots{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px}
    .art-dot{width:6px;height:6px;border-radius:99px;background:#ddd6fe;border:none;cursor:pointer;transition:all .25s;padding:0}
    .art-dot.active{width:18px;background:var(--p)}
    /* Quick actions — fintech 2026 banking style */
    .qa-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
    .qa-card{display:flex;align-items:center;gap:14px;background:#fff;border:1.5px solid rgba(124,58,237,.1);border-radius:16px;padding:14px 16px;font-size:13.5px;font-weight:700;color:#0f0e17;cursor:pointer;transition:all .18s;text-align:left;text-decoration:none;width:100%;font-family:inherit;box-shadow:0 1px 4px rgba(124,58,237,.05);position:relative;overflow:hidden}
    .qa-card:hover{border-color:rgba(124,58,237,.25);box-shadow:0 4px 16px rgba(124,58,237,.1);transform:translateY(-1px)}
    .qa-card:active{transform:translateY(0);box-shadow:none}
    .qa-ico{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .qa-card-txt{flex:1;min-width:0}
    .qa-card-title{font-size:14px;font-weight:800;color:#0f0e17;letter-spacing:-.2px}
    .qa-card-sub{font-size:11.5px;color:#94a3b8;font-weight:500;margin-top:2px}
    .qa-card-arr{color:#c4b5fd;flex-shrink:0}
    /* ── RECENT RESUME CARD (replaces phone) ── */
    .last-rcard{background:#fff;border-radius:18px;border:1.5px solid var(--border2);overflow:hidden;cursor:pointer;transition:all .25s;position:relative;box-shadow:0 2px 12px rgba(124,58,237,.06);max-width:280px}
    .last-rcard:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(124,58,237,.14);border-color:var(--p2)}
    .last-rcard-thumb{height:180px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
    .last-rcard-overlay{position:absolute;inset:0;background:rgba(92,34,200,.75);display:flex;align-items:center;justify-content:center;gap:10px;opacity:0;transition:opacity .25s;backdrop-filter:blur(2px)}
    .last-rcard:hover .last-rcard-overlay{opacity:1}
    .last-rcard-body{padding:14px 16px 10px}
    .last-name{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt)}
    .last-role{font-size:12px;color:var(--sub);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .last-date{font-size:11px;color:var(--mute);margin-top:4px;font-weight:500}
    .last-rcard-foot{padding:10px 14px;display:flex;gap:8px;border-top:1.5px solid #faf5ff;background:#fafaff}
    .draft-badge{display:inline-block;background:#fef3c7;color:#92400e;font-size:10px;font-weight:800;padding:3px 8px;border-radius:99px;margin-left:6px;letter-spacing:.3px;text-transform:uppercase;vertical-align:middle}
    .optimized-badge{display:inline-flex;align-items:center;gap:3px;background:linear-gradient(135deg,#ede9fe,#f3e8ff);color:#7c3aed;font-size:10px;font-weight:800;padding:3px 8px;border-radius:99px;margin-left:6px;letter-spacing:.2px;vertical-align:middle;white-space:nowrap}
    /* ── TIPS BANNER ── */
    .tip-banner{background:linear-gradient(135deg,#f5f3ff,#ede9fe);border:1.5px solid #ddd6fe;border-radius:16px;padding:18px 22px;display:flex;align-items:center;gap:16px;margin-bottom:32px}
    .tip-ico{font-size:28px;flex-shrink:0}
    .tip-title{font-size:14px;font-weight:800;color:var(--txt);margin-bottom:2px}
    .tip-sub{font-size:12px;color:var(--sub);line-height:1.5}
    .rcard{background:#fff;border-radius:18px;border:1px solid rgba(124,58,237,.09);overflow:hidden;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;position:relative;box-shadow:0 1px 2px rgba(16,10,40,.04),0 8px 22px rgba(124,58,237,.07);display:flex;align-items:center;gap:14px;padding:12px 14px}
    .rcard:active{transform:scale(.98)}
    .rcard:hover{box-shadow:0 4px 10px rgba(16,10,40,.05),0 14px 32px rgba(124,58,237,.12);border-color:rgba(124,58,237,.2)}
    .rcard-thumb{width:56px;height:74px;flex-shrink:0;border-radius:10px;overflow:hidden;position:relative;background:linear-gradient(135deg,#f8f7ff,#ede9fe);box-shadow:inset 0 0 0 1px rgba(124,58,237,.08)}
    .rcard-thumb-scaler{width:600px;transform:scale(.09333);transform-origin:top left;pointer-events:none}
    .rcard-overlay{position:absolute;inset:0;background:rgba(92,34,200,.75);display:flex;align-items:center;justify-content:center;gap:10px;opacity:0;transition:opacity .25s;backdrop-filter:blur(2px)}
    .rcard:hover .rcard-overlay{opacity:1}
    .rcard-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
    .rcard-name{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt)}
    .rcard-role{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .rcard-date{font-size:10.5px;color:var(--mute);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
    .rcard-more{width:32px;height:32px;border-radius:50%;background:#f6f5fb;border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#8a8a9c;cursor:pointer;transition:background .15s,color .15s}
    .rcard-more:hover{background:#ede9fe;color:var(--p)}
    .rcard-more svg{pointer-events:none}

    /* Resume card action sheet — Edit / Download / Delete */
    .rsheet-overlay{position:fixed;inset:0;z-index:950;background:rgba(10,5,25,.42);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
    .rsheet-overlay.show{opacity:1;pointer-events:auto}
    .rsheet{background:#fff;width:100%;max-width:480px;border-radius:20px 20px 0 0;padding:10px 14px calc(14px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);box-shadow:0 -8px 30px rgba(0,0,0,.18)}
    .rsheet-overlay.show .rsheet{transform:translateY(0)}
    .rsheet-handle{width:36px;height:4px;background:#e2e2e2;border-radius:99px;margin:0 auto 12px}
    .rsheet-hdr{display:flex;align-items:center;gap:10px;padding:2px 8px 14px;border-bottom:1px solid #f0eef8;margin-bottom:6px}
    .rsheet-hdr-name{font-size:13.5px;font-weight:800;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .rsheet-hdr-role{font-size:11.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .rsheet-item{display:flex;align-items:center;gap:12px;padding:13px 8px;font-size:14.5px;font-weight:700;color:var(--txt);cursor:pointer;border-radius:10px;transition:background .12s}
    .rsheet-item:active{background:#f6f5fb}
    .rsheet-item svg{flex-shrink:0;color:var(--p)}
    .rsheet-item.rsheet-danger{color:#e11d48}
    .rsheet-item.rsheet-danger svg{color:#e11d48}
    .rsheet-item.rsheet-disabled{opacity:.45;cursor:not-allowed}
    .rsheet-cancel{margin-top:6px;width:100%;padding:13px;border-radius:12px;background:#f6f5fb;border:none;font-size:14px;font-weight:800;color:#444;cursor:pointer}
    .add-card{background:#fff;border-radius:18px;border:2px dashed var(--border2);display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .2s;text-align:left;padding:14px 16px}
    .add-card:hover{border-color:var(--p);background:linear-gradient(135deg,#faf5ff,#f5f3ff)}
    .add-card-ico{width:44px;height:44px;border-radius:12px;background:var(--g);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 14px rgba(124,58,237,.3);flex-shrink:0;transition:transform .2s}
    .add-card:hover .add-card-ico{transform:rotate(90deg)}
    .add-card-text{display:flex;flex-direction:column;gap:1px;min-width:0}
    .add-card p{font-size:14px;font-weight:800;color:var(--txt);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .add-card span{font-size:11.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .empty-state{grid-column:1/-1;text-align:center;padding:56px 24px;background:#fff;border-radius:24px;border:2.5px dashed var(--border2);box-shadow:0 2px 12px rgba(124,58,237,.06)}
    .empty-state h3{font-size:22px;font-weight:800;margin-bottom:8px}
    .empty-state p{color:var(--sub);font-size:15px;margin-bottom:28px}
    @media(max-width:640px){.hero-inner{flex-direction:row;text-align:left}.hero-title{font-size:20px}.hero-btns{max-width:100%}.home{padding-top:90px}}

    /* ── TEMPLATE PICKER ── */
    .tpick{max-width:1100px;margin:0 auto;padding:72px 16px 24px}
    .back-row{margin-bottom:24px}
    .back-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:50%;color:#0f0e17;cursor:pointer;transition:background .15s;flex-shrink:0;padding:0}
    .back-btn:hover{background:rgba(124,58,237,.07)}
    .back-btn:hover{border-color:var(--p);color:var(--p);background:#faf5ff}
    .tpick-hdr{text-align:center;margin-bottom:16px}
    .tpick-hdr h2{font-size:22px;font-weight:900;margin-bottom:4px;letter-spacing:-.4px}
    .tpick-hdr p{color:var(--sub);font-size:13px}
    .tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
    .tcard{background:#fff;border-radius:18px;border:2px solid var(--border2);overflow:hidden;cursor:pointer;transition:all .25s;position:relative;box-shadow:0 2px 12px rgba(124,58,237,.06)}
    .tcard:hover{border-color:var(--p2);box-shadow:0 12px 32px rgba(124,58,237,.14);transform:translateY(-3px)}
    .tcard.sel{border-color:var(--p);box-shadow:0 0 0 4px rgba(124,58,237,.12)}
    .tcard-locked .tpl-scaler{filter:grayscale(.5) opacity(.7)}
    .tcard-thumb{overflow:hidden;position:relative;background:linear-gradient(135deg,#f8f7ff,#ede9fe)}
    .tpl-scaler{width:600px;transform-origin:top left;pointer-events:none}
    .tcard-use{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:var(--g);color:#fff;border:none;border-radius:10px;padding:8px 22px;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 4px 16px rgba(124,58,237,.4);opacity:0;transition:opacity .25s;white-space:nowrap;z-index:5}
    .tcard:hover .tcard-use,.tcard.sel .tcard-use{opacity:1}
    .tcard-foot{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-top:1.5px solid #faf5ff;background:#fafaff}
    .tcard-name{font-size:13px;font-weight:800}
    .tcard-tag{font-size:10px;padding:3px 9px;border-radius:99px;font-weight:700;background:#f3e8ff;color:var(--p)}

    /* ── BUILDER (step wizard, no preview) ── */
    /* BUG FIX: this container reserved 100px of top padding to clear the
       fixed page header, but the header itself is nowhere near that tall —
       compare to .ctool-body's 74px clearance for its own fixed 60px
       header. The extra ~26px, combined with .bld-hdr's own 26px
       margin-bottom right below the step circles, rendered as one
       continuous lavender dead-space band (same background color as the
       page) between the 1-2-3 step indicator and the actual form — the gap
       the user is pointing at. Tightened both to match the working pattern
       used elsewhere in the app. */
    .bld{max-width:680px;margin:0 auto;padding:74px 20px 32px}
    #v-builder{background:#fff}
    .bld-hdr{position:relative;display:flex;align-items:center;justify-content:center;min-height:40px;margin-bottom:6px}
    .hdr-abs-l{position:absolute;left:0;top:50%;transform:translateY(-50%)}
    .hdr-abs-r{position:absolute;right:0;top:50%;transform:translateY(-50%)}
    /* Style the builder back button to match the Instagram-style back */
    #builderBack.back-btn{
      width:40px;height:40px;background:transparent;border:none;
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;border-radius:50%;transition:background .15s;
      color:#0f0e17;padding:0;box-shadow:none;
    }
    #builderBack.back-btn:hover{background:rgba(124,58,237,.07);border-color:transparent}
    #builderBack.back-btn svg{stroke:#0f0e17}
    .steps-track{display:flex;align-items:center;gap:6px}
    .stp-dot{width:8px;height:8px;border-radius:50%;background:#e5e0f5;transition:all .25s}
    .stp-dot.stp-cur{background:var(--g);width:20px;border-radius:5px}
    .stp-dot.stp-done{background:#a78bfa}


    /* Step panels */
    .step-panel{display:none}
    .step-panel.active{display:block}
    .step-card{background:#fff;border-radius:18px;border:1px solid var(--hair);padding:24px;box-shadow:var(--shadow-crisp)}
    .step-title{font-size:16px;font-weight:900;margin-bottom:3px;display:flex;align-items:center;gap:9px}
    .step-sub{font-size:12.5px;color:var(--sub);margin-bottom:16px}
    .f{margin-bottom:12px}
    .f label{display:block;font-size:11.5px;font-weight:700;color:#374151;margin-bottom:3px}
    .f input,.f select{width:100%;padding:9px 12px;border:1.5px solid var(--border2);border-radius:9px;font-size:13px;outline:none;color:var(--txt);font-family:inherit;transition:border-color .15s,box-shadow .15s;background:#fff}
    .f textarea{width:100%;padding:10px 13px;border:1.5px solid var(--border2);border-radius:5px;font-size:13px;outline:none;color:var(--txt);font-family:inherit;transition:border-color .15s,box-shadow .15s;background:#fff}
    .f input:focus,.f textarea:focus,.f select:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(124,58,237,.1)}
    .f textarea{resize:vertical;min-height:80px}
    .g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    @media(max-width:500px){.g2{grid-template-columns:1fr}}

    /* Work/Edu entries */
    .add-box{background:#faf5ff;border:1.5px dashed var(--border);border-radius:10px;padding:16px;margin-top:8px}
    .add-box .f{margin-bottom:10px}
    .add-box-hint{font-size:11px;color:var(--mute);margin-top:2px;margin-bottom:2px;line-height:1.4}
    .add-box-actions{display:flex;gap:8px;align-items:center;margin-top:6px}
    .abtn{flex:1;width:100%;background:#ede9fe;color:var(--p);border:none;border-radius:8px;padding:9px;font-size:12px;font-weight:800;cursor:pointer;margin-top:0;transition:background .15s,color .15s}
    .abtn:hover{background:#ddd6fe}
    .abtn.editing{background:#059669;color:#fff}
    .abtn.editing:hover{background:#047857}
    .abtn-cancel{background:none;border:none;color:var(--sub);font-size:12px;font-weight:700;cursor:pointer;padding:9px 6px;flex-shrink:0}
    .abtn-cancel:hover{color:var(--txt)}
    .ec{background:#faf5ff;border:1.5px solid var(--border);border-radius:9px;padding:10px 12px;margin-bottom:8px;cursor:pointer;position:relative;transition:border-color .15s,box-shadow .15s}
    .ec:hover{border-color:var(--p2);box-shadow:0 2px 8px rgba(124,58,237,.1)}
    .ec.editing{border-color:#059669;background:#ecfdf5;box-shadow:0 0 0 2px rgba(5,150,105,.15)}
    .ec-top{display:flex;justify-content:space-between;align-items:flex-start}
    .ec-name{font-size:13px;font-weight:700}
    .ec-sub{font-size:11px;color:var(--p);margin-top:1px}
    .ec-rm{background:none;border:none;cursor:pointer;color:#fca5a5;font-size:15px;line-height:1;flex-shrink:0;padding:2px 4px}
    .ec-rm:hover{color:#e11d48}
    .ec-edit-hint{font-size:9.5px;color:#c4b5fd;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-top:5px;opacity:0;transition:opacity .15s}
    .ec:hover .ec-edit-hint,.ec.editing .ec-edit-hint{opacity:1}
    .ec.editing .ec-edit-hint{color:#059669}
    .spills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
    .spill{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#ede9fe,#fdf4ff);color:var(--p);font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;border:1px solid var(--border)}
    .spill button{background:none;border:none;cursor:pointer;color:#a78bfa;font-size:13px;line-height:1;padding:0}
    .skill-row{display:flex;gap:7px}
    .skill-row input{flex:1}
    .sk-add{background:#ede9fe;color:var(--p);border:none;border-radius:9px;padding:10px 14px;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap}
    .sk-add:hover{background:#ddd6fe}

    /* Step nav */
    .step-nav{display:flex;justify-content:space-between;align-items:center;margin-top:20px;flex-wrap:wrap;gap:10px}

    /* ── Edge-to-edge builder on mobile ──────────────────────────────────────
       The step card no longer floats as an inset, rounded dialog with visible
       side margins; it fills the viewport width like a native form screen.
       Sub-cards (add-box / .ec entries) keep their own rounding so there's
       still visual hierarchy inside the flat section. */
    @media(max-width:640px){
      .bld{padding-left:0;padding-right:0}
      .bld-hdr{padding:0 16px}
      .bld-sticky-hdr{margin-left:0;margin-right:0}
      body.i-nav-on .bld-sticky-hdr{padding-left:0;padding-right:0}
      .step-card{border-radius:0;border-left:none;border-right:none;box-shadow:none;padding:20px 16px}
      .step-panel{padding-bottom:78px} /* room for sticky nav so content isn't hidden behind it */
      .step-nav{
        position:sticky;bottom:0;left:0;right:0;margin:0;
        background:rgba(255,255,255,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
        border-top:1px solid rgba(0,0,0,.07);padding:12px 16px max(12px,env(safe-area-inset-bottom,12px));
        box-shadow:0 -2px 12px rgba(0,0,0,.04);z-index:6;flex-wrap:nowrap
      }
      .step-nav .btn{flex:1;justify-content:center;padding:12px 16px}
    }
    /* ── Photo Upload ── */
    /* ── Photo Upload Card ── */
    .photo-upload-card{margin-bottom:14px;background:#fff;border:1.5px solid var(--border2);border-radius:16px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;transition:border-color .2s}
    .photo-upload-card:hover{border-color:#c4b5fd}
    .photo-avatar-ring{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#ede9fe,#ddd6fe);border:3px solid #e9d5ff;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;cursor:pointer;transition:all .2s;flex-shrink:0}
    .photo-avatar-ring:hover{border-color:#7c3aed;transform:scale(1.04)}
    .photo-avatar-ring img{width:100%;height:100%;object-fit:cover;border-radius:50%}
    .photo-avatar-icon{font-size:26px;line-height:1;user-select:none}
    .photo-avatar-badge{position:absolute;bottom:1px;right:1px;width:21px;height:21px;background:#7c3aed;border-radius:50%;border:2px solid #fff;display:flex;align-items:center;justify-content:center}
    .photo-avatar-badge svg{display:block}
    .photo-upload-label{font-size:13px;font-weight:700;color:var(--txt);margin:0}
    .photo-upload-sub{font-size:11px;color:var(--sub);margin:0}
    .photo-action-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
    .photo-action-btn{padding:7px 18px;border-radius:99px;font-size:12px;font-weight:700;border:none;cursor:pointer;transition:all .15s;letter-spacing:.2px}
    .photo-action-btn.primary{background:#7c3aed;color:#fff;box-shadow:0 2px 8px rgba(124,58,237,.25)}.photo-action-btn.primary:hover{background:#6d28d9;transform:translateY(-1px)}
    .photo-action-btn.danger{background:#fff0f0;color:#dc2626;display:none;border:1px solid #fecaca}.photo-action-btn.danger:hover{background:#fee2e2}
    .btn{display:inline-flex;align-items:center;gap:7px;padding:11px 22px;border-radius:11px;font-size:14px;font-weight:700;border:none;cursor:pointer;transition:all .15s}
    .btn-pri{background:var(--g);color:#fff;box-shadow:0 2px 10px rgba(124,58,237,.3)}
    .btn-pri:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(124,58,237,.4)}
    .btn-green{background:linear-gradient(135deg,#059669,#10b981);color:#fff;box-shadow:0 2px 10px rgba(5,150,105,.25)}
    .btn-green:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(5,150,105,.3)}
    .btn-ghost{background:#fff;color:#374151;border:1.5px solid #e2e8f0}
    .btn-ghost:hover{border-color:var(--p2);color:var(--p)}
    .btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

    /* ── SUCCESS ── */
    .succ-view{max-width:480px;margin:0 auto;padding:76px 24px 24px;text-align:center}
    .succ-emoji{font-size:64px;display:block;margin-bottom:16px;animation:bounceIn .6s ease}
    @keyframes bounceIn{0%{transform:scale(.3)}60%{transform:scale(1.15)}80%{transform:scale(.95)}100%{transform:scale(1)}}
    .succ-view h2{font-size:28px;font-weight:900;margin-bottom:8px}
    .succ-view .hl{color:var(--p)}
    .succ-view p{color:var(--sub);font-size:15px;margin-bottom:32px}
    .succ-btns{display:flex;flex-direction:column;gap:12px;justify-content:center;max-width:320px;margin:0 auto;width:100%}

    /* ── DETAIL ── */
    .det-view{max-width:520px;margin:0 auto;padding:76px 16px 40px}
    /* Resume identity card */
    .det-card{background:#fff;border-radius:20px;border:1.5px solid #ede9fe;padding:20px;margin-bottom:14px;box-shadow:0 2px 16px rgba(124,58,237,.07)}
    .det-identity{display:flex;align-items:center;gap:14px;margin-bottom:16px}
    .det-ico{width:50px;height:50px;border-radius:14px;background:var(--g);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(124,58,237,.3)}
    .det-name{font-size:19px;font-weight:900;letter-spacing:-.4px;color:var(--txt);line-height:1.2;margin-bottom:4px}
    .det-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
    .det-meta-chip{font-size:11px;font-weight:700;color:var(--p);background:#f3f0ff;padding:3px 8px;border-radius:6px}
    .det-meta-dot{width:3px;height:3px;border-radius:50%;background:#c4b5fd;flex-shrink:0}
    /* Action buttons — 2-column grid */
    .det-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .det-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:13px 10px;border-radius:13px;font-size:13px;font-weight:800;cursor:pointer;border:none;font-family:inherit;transition:all .15s;letter-spacing:-.1px}
    .det-btn-edit{background:var(--g);color:#fff;box-shadow:0 3px 12px rgba(124,58,237,.28)}
    .det-btn-edit:hover{box-shadow:0 5px 18px rgba(124,58,237,.4);transform:translateY(-1px)}
    .det-btn-dl{background:linear-gradient(135deg,#059669,#10b981);color:#fff;box-shadow:0 3px 12px rgba(5,150,105,.22);grid-column:1/-1}
    .det-btn-dl:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(5,150,105,.3)}
    .det-btn-del{background:#fff1f2;color:#e11d48;border:1.5px solid #fecdd3}
    .det-btn-del:hover{background:#ffe4e6}
    

    /* ── KIE BANNER CARD ── */
    .kie-banner-card{position:relative;border-radius:16px;overflow:hidden;height:110px;background:linear-gradient(135deg,#1e0845,#3b1a7a);margin-bottom:10px;flex-shrink:0}
    .kie-banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
    .kie-banner-overlay{position:absolute;inset:0;padding:14px 16px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(to top,rgba(10,1,31,.8) 0%,transparent 60%)}
    .kie-banner-tagline{font-size:12px;font-weight:700;color:#e9d5ff;margin-bottom:6px}
    .kie-banner-cta{display:inline-flex;align-items:center;gap:5px;background:rgba(124,58,237,.7);border:1px solid rgba(168,85,247,.5);border-radius:20px;padding:5px 12px;font-size:11px;font-weight:700;color:#fff;width:fit-content}

    /* ── MORE TOOLS BUTTON ── */
    .kie-more-tools-btn{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #ede9fe;border-radius:14px;padding:12px 14px;font-size:13px;font-weight:700;color:#1a1a2e;cursor:pointer;font-family:inherit;transition:all .18s;box-shadow:0 2px 10px rgba(124,58,237,.06)}
    .kie-more-tools-btn:hover{border-color:#7c3aed;background:#faf5ff;box-shadow:0 4px 18px rgba(124,58,237,.12);transform:translateY(-1px)}
    .kie-tools-count{background:var(--g);color:#fff;font-size:10px;font-weight:800;padding:2px 8px;border-radius:99px}

    /* ── MORE TOOLS OVERLAY ── */
    /* Clean white nav bar — identical treatment to the Settings panel (.ksb-set-hdr) */
    .mto-hdr{display:flex;align-items:center;gap:12px;padding:18px 20px;background:#fff;border-bottom:1.5px solid #ede9fe;position:sticky;top:0;z-index:10}
    .mto-back{width:40px;height:40px;background:transparent;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#0f0e17;flex-shrink:0;transition:background .15s}
    .mto-back:hover{background:rgba(124,58,237,.07)}
    .mto-hdr-title{font-size:17px;font-weight:900;color:#0f0e17;letter-spacing:-.3px;flex:1}
    .mto-hdr-pill{display:flex;align-items:center;gap:4px;background:#f5f3ff;border:1px solid #ede9fe;border-radius:20px;padding:6px 12px;font-size:10.5px;font-weight:800;color:#7c3aed;flex-shrink:0;white-space:nowrap}
    /* Intro — same "13 tools" messaging, restructured on a light background instead of a dark hero */
    .mto-intro{padding:22px 20px 18px;background:#f8f7ff}
    .mto-intro-eyebrow{font-size:10px;font-weight:800;color:#7c3aed;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:8px}
    .mto-intro-title{font-size:21px;font-weight:900;color:#0f0e17;line-height:1.3;letter-spacing:-.4px;margin-bottom:8px}
    .mto-intro-sub{font-size:13px;color:#64748b;line-height:1.55}
    .mto-body{padding:6px 14px 0;background:#f8f7ff;min-height:calc(100vh - 200px)}
    /* Category filter tabs — horizontal scroll on narrow screens, no wrap */
    .mto-tabs{display:flex;gap:8px;padding:14px 20px 4px;overflow-x:auto;background:#f8f7ff;scrollbar-width:none}
    .mto-tabs::-webkit-scrollbar{display:none}
    .mto-tab{flex-shrink:0;padding:8px 16px;border-radius:99px;border:1.5px solid #ede9fe;background:#fff;
      font-size:12px;font-weight:700;color:#64748b;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
    .mto-tab:hover{border-color:#c4b5fd;color:#7c3aed}
    .mto-tab.active{background:var(--g);border-color:transparent;color:#fff;box-shadow:0 3px 10px rgba(124,58,237,.28)}
    .mto-empty{grid-column:1/-1;text-align:center;padding:32px 16px;font-size:12.5px;color:#94a3b8;font-weight:600}
    .mto-tile.mto-hide{display:none}
    /* ── Colorful tile grid (replaces the old plain list rows) ── */
    .mto-tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .mto-tile{
      grid-column:span 1;background:#fff;border-radius:18px;overflow:hidden;
      border:1.5px solid #ede9fe;cursor:pointer;transition:all .18s;
      box-shadow:0 2px 10px rgba(124,58,237,.06);display:flex;flex-direction:column;
    }
    .mto-tile:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(124,58,237,.16);border-color:#c4b5fd}
    /* Softened, pastel-tinted headers (was a full-bleed solid color per card —
       looked like 13 competing widgets at once). Now a light tint of the same
       accent color, with the icon shown in its own stroke color instead of
       forced white, so the page reads as one unified surface, not 13. */
    .mto-tile-top{
      position:relative;height:56px;background:var(--tile-tint, #f8f7ff);
      display:flex;align-items:center;justify-content:center;overflow:hidden;
      border-bottom:1px solid rgba(15,14,23,.04);
    }
    .mto-tile-ico{position:relative;z-index:1;width:34px;height:34px;display:flex;align-items:center;justify-content:center}
    .mto-tile-ico svg{width:20px;height:20px}
    .mto-tile-body{padding:12px 12px 13px;display:flex;flex-direction:column;flex:1}
    .mto-tile-name{font-size:12.5px;font-weight:800;color:#1a1a2e;margin-bottom:4px;letter-spacing:-.2px;line-height:1.3}
    .mto-tile-desc{font-size:10.5px;color:#64748b;line-height:1.5;font-weight:400;flex:1;margin-bottom:10px;
      display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
    .mto-tile-foot{display:flex;align-items:center;justify-content:space-between;gap:6px}
    .mto-tile-tag{display:flex;align-items:center;gap:3px;font-size:9px;font-weight:800;color:var(--tile-c)}
    .mto-tile-use{display:flex;align-items:center;gap:3px;font-size:10px;font-weight:700;color:var(--tile-c)}
    /* Locked tiles stay just as bright/prominent as unlocked ones — the
       Premium badge alone communicates the lock, not a dimmed/grayscaled
       card. A faded card reads as "broken" or "less than," which undercuts
       the whole point of showing it — it should look just as inviting. */
    @media(min-width:520px){.mto-tile-grid{grid-template-columns:1fr 1fr 1fr}}

    /* -- RECRUITER VIEW PANEL -- */
    .rec-panel{position:fixed;inset:0;z-index:250;background:#f8f7ff;transform:translateX(100%);transition:transform .32s cubic-bezier(.32,.72,0,1);overflow-y:auto;display:flex;flex-direction:column}
    .rec-panel.open{transform:translateX(0)}
    .rec-panel-hdr{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border-bottom:1px solid rgba(124,58,237,.1);position:sticky;top:0;z-index:10;flex-shrink:0}
    .rec-panel-back{width:40px;height:40px;border:none;background:transparent;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#0f0e17;transition:background .15s;flex-shrink:0}
    .rec-panel-back:hover{background:rgba(124,58,237,.07)}
    .rec-panel-title{font-size:16px;font-weight:800;color:#0f0e17;letter-spacing:-.35px;position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none}
    .rec-panel-body{padding:16px;flex:1}

    /* -- OPTIMIZE MY RESUME PANEL — its own visual identity, not an ATS
       Checker reskin: step dots, a light airy background, a radial gauge
       for the score, card-based picker with explicit Continue. -- */
    .opt-panel{position:fixed;inset:0;z-index:260;background:#faf9ff;transform:translateX(100%);transition:transform .32s cubic-bezier(.32,.72,0,1);overflow-y:auto;display:flex;flex-direction:column}
    .opt-panel.open{transform:translateX(0)}
    .opt-panel-hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:#fff;border-bottom:1px solid rgba(124,58,237,.1);position:sticky;top:0;z-index:10;flex-shrink:0}
    .opt-panel-back{width:40px;height:40px;border:none;background:transparent;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#0f0e17;transition:background .15s;flex-shrink:0}
    .opt-panel-back:hover{background:rgba(124,58,237,.07)}
    .opt-panel-body{padding:22px 16px 32px;flex:1}
    .opt-state{display:none}
    .opt-state.show{display:block;animation:optFadeIn .35s ease}
    @keyframes optFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

    /* Step progress dots — the signature that says "this is a guided flow",
       distinct from ATS Checker which has no stepper at all. */
    .opt-steps{display:flex;align-items:center;gap:6px}
    .opt-step-dot{height:7px;width:7px;border-radius:99px;background:var(--border2);transition:all .3s cubic-bezier(.32,.72,0,1)}
    .opt-step-dot.done{width:7px;background:#c4b5fd}
    .opt-step-dot.active{width:22px;background:var(--g)}
    .opt-step-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:9px;background:var(--g);color:#fff;font-size:12px;font-weight:900;margin-bottom:14px;box-shadow:0 4px 12px rgba(124,58,237,.28)}
    /* Badge sits inline beside the heading (not stacked above it) so it never
       crowds into the title text below. */
    .opt-diag-hdr{display:flex;align-items:center;gap:10px;margin-bottom:6px}
    .opt-diag-hdr .opt-step-badge{margin-bottom:0;flex-shrink:0}
    .opt-diag-hdr .opt-diag-title{margin-bottom:0}

    .opt-diag-title{font-size:21px;font-weight:900;color:var(--txt);letter-spacing:-.4px;margin-bottom:2px}
    .opt-diag-sub{font-size:13px;color:var(--sub);margin-bottom:18px}
    .opt-section-lbl{font-size:12.5px;font-weight:800;color:var(--txt);text-transform:uppercase;letter-spacing:.4px;margin:20px 0 10px}

    /* Radial score gauge (screen 3) — reuses the same ring math as the rest
       of the app's AI-tool score rings, but this is the only place in the
       Optimize flow that uses it, so it reads as a distinct "diagnosis"
       moment rather than a copy of ATS Checker's solid-purple score-hero. */
    .opt-gauge-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:6px}
    .opt-gauge-verdict{font-size:13px;font-weight:700;color:var(--sub);margin-top:8px}

    .opt-issue-list{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
    /* Job Tailor — Keywords block on the Review screen */
    .jt-kw-block{margin-bottom:6px}
    .jt-kw-sub{font-size:11.5px;font-weight:800;margin:10px 0 8px}
    .jt-kw-sub.jt-kw-good{color:#16a34a}
    .jt-kw-sub.jt-kw-bad{color:#dc2626}
    .jt-kw-chips{display:flex;flex-wrap:wrap;gap:7px}
    .jt-kw-chip{font-size:12px;font-weight:700;padding:6px 12px;border-radius:99px;border:1.5px solid}
    .jt-kw-chip.matched{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a}
    .jt-kw-chip.missing{background:#fef2f2;border-color:#fecaca;color:#dc2626}
    .opt-issue-item{display:flex;align-items:flex-start;gap:11px;background:#fff;border:1.5px solid var(--border2);border-radius:14px;padding:12px 14px}
    .opt-issue-ico{width:26px;height:26px;border-radius:9px;background:#fef3e2;color:#ea580c;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}
    .opt-issue-title{font-size:13.5px;font-weight:800;color:var(--txt);line-height:1.3}
    .opt-issue-title.detail-clamp{-webkit-line-clamp:2}
    .opt-issue-desc{font-size:11.5px;color:var(--mute);margin-top:1px;line-height:1.4}

    .opt-bars{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
    .opt-bar-row{display:flex;align-items:center;gap:11px}
    .opt-bar-ico{width:26px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px}
    .opt-bar-main{flex:1;min-width:0}
    .opt-bar-lbl{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:var(--sub);margin-bottom:5px}
    .opt-bar-track{height:8px;border-radius:99px;background:rgba(124,58,237,.09);overflow:hidden}
    .opt-bar-fill{height:100%;border-radius:99px;transition:width .6s cubic-bezier(.32,.72,0,1)}
    .opt-fix-btn{width:100%;background:var(--g);color:#fff;border:none;border-radius:16px;padding:16px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 24px rgba(124,58,237,.32);transition:transform .12s}
    .opt-fix-btn:active{transform:scale(.98)}
    .opt-fix-note{text-align:center;font-size:11.5px;color:var(--mute);margin-top:10px}

    /* Select Resume (screen 1) — card picker with explicit selection state,
       then a Continue button, instead of ATS Checker's single dropzone. */
    .opt-picker-list{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
    .opt-picker-card{position:relative;display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--border2);border-radius:16px;padding:13px 16px;cursor:pointer;transition:border-color .15s,transform .1s,background .15s}
    .opt-picker-card:active{transform:scale(.99)}
    .opt-picker-card.selected{border-color:#7c3aed;background:rgba(124,58,237,.04)}
    .opt-picker-ico{width:40px;height:40px;border-radius:12px;background:linear-gradient(140deg,#ede9fe,#ddd6fe);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#7c3aed}
    .opt-picker-ico-upload{background:none;border:1.5px dashed rgba(124,58,237,.4);color:#7c3aed}
    .opt-picker-body{flex:1;min-width:0}
    .opt-picker-name{font-size:14px;font-weight:800;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .opt-picker-meta{font-size:11.5px;color:var(--mute);margin-top:2px}
    .opt-picker-score{font-size:11.5px;font-weight:800;color:#7c3aed;background:rgba(124,58,237,.09);padding:3px 9px;border-radius:99px;flex-shrink:0;white-space:nowrap}
    .opt-picker-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--border2);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s}
    .opt-picker-card.selected .opt-picker-check{background:#7c3aed;border-color:#7c3aed}
    .opt-picker-check svg{opacity:0;transition:opacity .15s}
    .opt-picker-card.selected .opt-picker-check svg{opacity:1}
    .opt-picker-upload-card{border-style:dashed;border-color:rgba(124,58,237,.3)}
    .opt-continue-btn{width:100%;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border:none;border-radius:16px;padding:16px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 24px rgba(124,58,237,.35),inset 0 1px 0 rgba(255,255,255,.15);transition:all .22s;margin-top:16px}
    .opt-continue-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 36px rgba(124,58,237,.45),inset 0 1px 0 rgba(255,255,255,.15)}
    .opt-continue-btn:active{transform:scale(.98)}
    .opt-continue-btn:disabled{opacity:.4;box-shadow:none;cursor:not-allowed;transform:none}

    /* Upload New Resume (screen 1b) — self-contained dropzone, matches the
       card language of the picker screen instead of ATS Checker's dark hero. */
    .opt-file-ready{display:flex;align-items:center;gap:11px;background:#fff;border:1.5px solid #bbf7d0;background:linear-gradient(135deg,#f0fdf4,#fff);border-radius:14px;padding:12px 14px;margin-bottom:14px}
    .opt-file-ico{width:32px;height:32px;border-radius:10px;background:#16a34a;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .opt-file-name{font-size:13px;font-weight:800;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .opt-file-size{font-size:11px;color:var(--mute);margin-top:1px}
    .opt-file-rm{width:26px;height:26px;border:none;background:rgba(0,0,0,.05);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--mute);flex-shrink:0}
    .opt-dropzone{position:relative;border:1.5px dashed rgba(124,58,237,.35);border-radius:18px;padding:32px 16px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;margin-bottom:14px}
    .opt-dropzone:hover,.opt-dropzone.drag-over{border-color:#7c3aed;background:rgba(124,58,237,.04)}
    .opt-dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
    .opt-dropzone-ico{width:52px;height:52px;border-radius:16px;background:linear-gradient(140deg,#a78bfa,#7c3aed);display:flex;align-items:center;justify-content:center;color:#fff;margin:0 auto 12px}
    .opt-dropzone-title{font-size:14px;font-weight:800;color:var(--txt)}
    .opt-dropzone-sub{font-size:11.5px;color:var(--mute);margin-top:3px}
    .opt-or{text-align:center;font-size:11px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.3px;margin:12px 0}
    .opt-paste-toggle{width:100%;background:#fff;border:1.5px solid var(--border2);color:var(--txt);border-radius:14px;padding:12px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:7px}
    .opt-paste-wrap{display:none;margin-top:12px}
    .opt-paste-wrap textarea{width:100%;min-height:130px;border:1.5px solid var(--border2);border-radius:14px;padding:12px 14px;font-size:13px;font-family:inherit;color:var(--txt);resize:vertical}

    /* Shared AI moment (screens 2 & 4) — bigger orb with a pulsing ring
       halo, distinct from ATS Checker's plain spinner. */
    .opt-anim-wrap{display:flex;flex-direction:column;align-items:center;padding:40px 10px 20px;text-align:center}

    /* Orb + progress ring */
    .opt-anim-orb-lg{position:relative;width:128px;height:128px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
    .opt-anim-ring-svg{position:absolute;inset:0;transform:rotate(-90deg)}
    .opt-anim-progress-ring{transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1)}
    .opt-anim-orb-ring{position:absolute;inset:18px;border-radius:50%;border:2px solid rgba(124,58,237,.25);animation:optRingPulse 1.8s ease-out infinite}
    @keyframes optRingPulse{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.28);opacity:0}}
    .opt-anim-orb-core{position:relative;width:80px;height:80px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(124,58,237,.35);animation:optOrbBreathe 2.4s ease-in-out infinite}
    @keyframes optOrbBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
    .opt-anim-orb-core svg{animation:optIconSpin 2.6s linear infinite}
    @keyframes optIconSpin{to{transform:rotate(360deg)}}
    .opt-anim-pct{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);background:#fff;border:1.5px solid var(--border2);border-radius:20px;padding:2px 10px;font-size:11px;font-weight:800;color:#7c3aed;box-shadow:0 4px 12px rgba(124,58,237,.15);transition:all .2s}

    .opt-anim-title{font-size:18px;font-weight:900;color:var(--txt);margin-bottom:4px;margin-top:8px}
    .opt-anim-sub{font-size:12.5px;color:var(--sub);margin-bottom:24px;max-width:260px}

    /* Checklist */
    .opt-check-list{display:flex;flex-direction:column;gap:12px;width:100%;max-width:300px}
    .opt-check-item{display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:600;color:var(--mute);opacity:.4;transform:translateX(-4px);transition:opacity .35s ease,color .3s,transform .35s ease;text-align:left}
    .opt-check-item.active{opacity:1;color:var(--txt);transform:translateX(0)}
    .opt-check-item.done{opacity:1;color:var(--txt);transform:translateX(0)}
    .opt-check-dot{position:relative;width:22px;height:22px;border-radius:50%;border:2px solid var(--border2);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.34,1.56,.64,1)}
    .opt-check-item.active .opt-check-dot{border-color:#a855f7}
    .opt-check-item.active .opt-check-dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;border-top-color:#a855f7;border-right-color:#a855f7;animation:optDotSpin .7s linear infinite}
    @keyframes optDotSpin{to{transform:rotate(360deg)}}
    .opt-check-item.done .opt-check-dot{background:#16a34a;border-color:#16a34a;transform:scale(1.08)}
    .opt-check-dot svg{opacity:0;transition:opacity .15s}
    .opt-check-item.done .opt-check-dot svg{opacity:1}

    /* Progress bar */
    .opt-anim-progress-track{width:100%;max-width:300px;height:6px;border-radius:6px;background:var(--border2);margin-top:22px;overflow:hidden;position:relative}
    .opt-anim-progress-fill{height:100%;width:0%;border-radius:6px;background:linear-gradient(90deg,#7c3aed,#c084fc);transition:width .5s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
    .opt-anim-progress-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:optShimmer 1.4s ease-in-out infinite}
    @keyframes optShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

    .opt-anim-timing{font-size:11px;color:var(--mute);margin-top:14px;font-weight:600}

    /* AI Tip callout — a little bonus that makes screen 4 feel considered */
    .opt-ai-tip{display:flex;gap:10px;background:linear-gradient(135deg,#f5f3ff,#faf5ff);border:1.5px solid rgba(124,58,237,.15);border-radius:14px;padding:12px 14px;margin-top:24px;max-width:300px;text-align:left}
    .opt-ai-tip-star{flex-shrink:0;color:#7c3aed;font-size:14px}
    .opt-ai-tip-text{font-size:11.5px;color:var(--sub);line-height:1.5}
    .opt-ai-tip-text b{color:var(--txt)}

    /* Results (screens 5+6) — two distinct score boxes instead of ATS
       Checker's dark solid hero card, plus a Key Improvements checklist. */
    .opt-score-boxes{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:8px}
    .opt-score-box{flex:1;max-width:130px;border-radius:16px;padding:16px 10px;text-align:center}
    .opt-score-box-old{background:#f1f5f9;border:1.5px solid var(--border2)}
    .opt-score-box-new{background:linear-gradient(135deg,#ecfdf5,#f0fdf4);border:1.5px solid #bbf7d0}
    .opt-score-box-val{font-size:26px;font-weight:900;line-height:1}
    .opt-score-box-old .opt-score-box-val{color:#94a3b8}
    .opt-score-box-new .opt-score-box-val{color:#16a34a}
    .opt-score-box-lbl{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--mute);margin-top:4px}

    .opt-improve-list{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
    .opt-improve-item{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--border2);border-radius:13px;padding:11px 14px;font-size:13px;font-weight:600;color:var(--txt)}
    .opt-improve-item svg{flex-shrink:0;color:#16a34a}

    .opt-ba-card{background:#fff;border:1.5px solid var(--border2);border-radius:16px;padding:14px 16px;margin-bottom:10px}
    .opt-ba-lbl{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;margin-bottom:4px}
    .opt-ba-before .opt-ba-lbl{color:#dc2626}
    .opt-ba-after  .opt-ba-lbl{color:#16a34a}
    .opt-ba-text{font-size:13px;color:var(--txt);line-height:1.5}
    .opt-ba-before{opacity:.7;margin-bottom:8px}
    .opt-res-tabs{display:flex;gap:6px;background:#f1f5f9;border-radius:14px;padding:4px;margin:18px 0 4px}
    .opt-res-tab{flex:1;text-align:center;padding:9px 10px;border-radius:11px;font-size:13px;font-weight:800;color:var(--mute);cursor:pointer;transition:all .15s;user-select:none}
    .opt-res-tab.active{background:#fff;color:var(--txt);box-shadow:0 2px 6px rgba(15,23,42,.08)}
    .opt-res-panel{display:none}
    .opt-res-panel.active{display:block}
    /* Persistent Diagnosis/Results ↔ My Resume tab bar (in the panel header,
       not tied to any single .opt-state) */
    .opt-top-tabs{display:flex;gap:6px;background:#f1f5f9;border-radius:14px;padding:4px;margin:14px 20px 10px;flex-shrink:0}
    .opt-top-tab{flex:1;text-align:center;padding:10px 10px;border-radius:11px;font-size:13.5px;font-weight:800;color:var(--mute);cursor:pointer;transition:all .15s;user-select:none}
    .opt-top-tab.active{background:#fff;color:var(--p);box-shadow:0 2px 8px rgba(124,58,237,.12)}
    /* Scaled-down full resume preview — same technique as the cover letter
       preview: render at full width, scale the whole thing down with a
       transform to fit a small card. */
    .opt-res-prev-wrap{background:#f8f7ff;border-radius:14px;border:1.5px solid var(--border2);overflow:hidden;box-shadow:0 4px 20px rgba(124,58,237,.08);max-width:300px;margin:0 auto 20px}
    .opt-res-prev-scaler{width:600px;transform-origin:top left}
    .opt-results-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
    .rec-score-hero{background:linear-gradient(135deg,#0f0e17,#1e1040);border-radius:20px;padding:24px;margin-bottom:14px;color:#fff;display:flex;align-items:center;gap:20px}
    .rec-score-ring{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;flex-shrink:0;border:3px solid rgba(255,255,255,.15)}
    .rec-score-num{font-size:24px;font-weight:900;line-height:1}
    .rec-score-slash{font-size:10px;opacity:.55;font-weight:600;margin-top:2px}
    .rec-score-info{flex:1;min-width:0}
    .rec-score-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;opacity:.6;margin-bottom:4px}
    .rec-score-verdict{font-size:13px;font-weight:700;line-height:1.4;margin-bottom:8px}
    .rec-score-meta{font-size:11px;opacity:.65;line-height:1.5}
    .rec-chance-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:-.1px;margin-top:6px}
    .rec-section{background:#fff;border:1.5px solid var(--border2);border-radius:16px;padding:16px;margin-bottom:12px}
    .rec-section-title{font-size:13px;font-weight:800;color:var(--txt);margin-bottom:12px;display:flex;align-items:center;gap:7px}
    .rec-item{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--sub);line-height:1.5;padding:5px 0;border-bottom:1px solid #f8f7ff}
    .rec-item:last-child{border-bottom:none;padding-bottom:0}
    .rec-item-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:5px}
    .rec-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:16px}
    .rec-loading-spin{width:48px;height:48px;background:linear-gradient(135deg,#ede9fe,#ddd6fe);border-radius:16px;display:flex;align-items:center;justify-content:center;animation:sping 1.2s linear infinite}

    /* ── SETTINGS FULL SCREEN ── */
    .ksb-settings-panel{position:fixed;inset:0;z-index:800;background:#f8f7ff;transform:translateY(100%);transition:transform .32s cubic-bezier(.32,.72,0,1);overflow-y:auto;display:flex;flex-direction:column}
    .ksb-settings-panel.open{transform:translateY(0)}
    .ksb-set-hdr{display:flex;align-items:center;gap:12px;padding:18px 20px;background:#fff;border-bottom:1.5px solid #ede9fe;position:sticky;top:0;z-index:10}
    .ksb-set-back{width:40px;height:40px;background:transparent;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#0f0e17;flex-shrink:0;transition:background .15s}
    .ksb-set-back:hover{background:rgba(124,58,237,.07)}
    .ksb-set-title{font-size:17px;font-weight:900;color:#0f0e17;letter-spacing:-.3px}

    /* ── SIDEBAR LIGHT THEME ── */
    .kie-sidebar{position:fixed;top:0;left:-320px;width:300px;height:100vh;background:#fff;z-index:700;transition:left .28s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 40px rgba(0,0,0,.12);display:flex;flex-direction:column;border-right:1px solid #ede9fe}
    .kie-sidebar.open{left:0}
    .ksb-hdr{padding:16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0ecfe;background:#faf5ff}
    .ksb-brand{display:flex;align-items:center;gap:10px}
    .ksb-av{width:36px;height:36px;border-radius:10px;background:transparent;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
    .ksb-av img{width:100%;height:100%;object-fit:contain;border-radius:0}
    .ksb-brand-name{font-size:15px;font-weight:900;color:var(--txt);letter-spacing:-.3px}
    .ksb-brand-sub{font-size:10px;color:var(--sub);font-weight:500;margin-top:1px}
    .ksb-new-chat{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:#fff;color:#6b6b80;border:1.5px solid #e8e8ec;border-radius:50%;cursor:pointer;font-family:inherit;transition:all .18s;flex-shrink:0;padding:0;box-shadow:0 1px 2px rgba(15,14,23,.04)}
    .ksb-new-chat:hover{background:#faf8ff;border-color:#c4b5fd;color:var(--p)}
    .ksb-new-chat:active{transform:scale(.94)}
    .ksb-body{flex:1;overflow-y:auto;padding:6px 10px 4px}
    .ksb-body::-webkit-scrollbar{width:3px}
    .ksb-body::-webkit-scrollbar-thumb{background:#ede9fe;border-radius:99px}
    .ksb-quick-label{font-size:10px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.8px;padding:2px 4px;display:block}
    .ksb-panel-wrap{padding:10px 10px 4px;flex-shrink:0}
    .ksb-panel{background:#fff;border:1.5px solid #ede9fe;border-radius:14px;overflow:hidden;box-shadow:0 1px 4px rgba(124,58,237,.05)}
    .ksb-panel-row{width:100%;display:flex;align-items:center;gap:10px;background:none;border:none;padding:11px 12px;cursor:pointer;font-family:inherit;transition:background .15s;text-align:left}
    .ksb-panel-row:hover{background:#faf5ff}
    .ksb-panel-row:active{background:#f5f3ff}
    .ksb-panel-divider{height:1px;background:#f0ecfe;margin:0 12px}
    .ksb-panel-ico{width:30px;height:30px;border-radius:9px;background:#f5f3ff;color:var(--p);display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .ksb-panel-ico-accent{background:var(--g);color:#fff}
    .ksb-panel-txt{flex:1;min-width:0}
    .ksb-panel-title{font-size:13px;font-weight:700;color:#1e1b4b}
    .ksb-panel-sub{font-size:10.5px;color:#94a3b8;margin-top:1px}
    .ksb-panel-arr{color:#c4b5fd;flex-shrink:0}
    .ksb-cat{display:block;font-size:10px;font-weight:800;color:#a78bfa;text-transform:uppercase;letter-spacing:.8px;padding:16px 6px 6px}
    .ksb-item{border-radius:12px;margin-bottom:4px;display:flex;align-items:center;gap:9px;padding:8px;background:var(--card);border:1.5px solid transparent;transition:all .15s}
    .ksb-item:hover{background:#faf5ff;border-color:#ede9fe}
    .ksb-item.active{background:#f5f3ff;border-color:#ddd6fe;box-shadow:0 2px 10px rgba(124,58,237,.08)}
    .ksb-item.active .ksb-item-title{color:var(--ps)}
    .ksb-item-ico{width:30px;height:30px;border-radius:9px;background:#f5f3ff;color:var(--p);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
    .ksb-item.active .ksb-item-ico{background:var(--g);color:#fff}
    .ksb-item-inner{flex:1;min-width:0;cursor:pointer}
    .ksb-item-title{font-size:13px;font-weight:700;color:#1e1b4b;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .ksb-item-meta{font-size:10.5px;font-weight:500;color:#94a3b8;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .ksb-item-dot{background:none;border:none;color:#cbd5e1;cursor:pointer;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .12s;flex-shrink:0;opacity:0}
    .ksb-item:hover .ksb-item-dot,.ksb-item.active .ksb-item-dot{opacity:1}
    .ksb-item-dot:hover{background:#ede9fe;color:var(--p)}
    
    .ksb-set-body{padding:16px 16px 32px;flex:1}
    .ksb-prof-card{background:linear-gradient(135deg,#faf5ff,#f3f0ff);border:1.5px solid #ddd6fe;border-radius:18px;padding:18px;display:flex;align-items:center;gap:14px;margin-bottom:24px}
    .ksb-prof-av{width:48px;height:48px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:#fff;flex-shrink:0;background-size:cover;background-position:center;border:2.5px solid #ede9fe}
    .ksb-prof-name{font-size:15px;font-weight:800;color:#0f0e17;letter-spacing:-.2px}
    .ksb-prof-email{font-size:11px;color:#94a3b8;margin-top:3px;font-weight:500}
    .ksb-set-section{margin-bottom:20px}
    .ksb-set-section-label{font-size:9.5px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:1.2px;display:block;margin-bottom:8px;padding:0 2px}
    .ksb-set-card{background:#fff;border:1.5px solid #ede9fe;border-radius:16px;overflow:hidden;box-shadow:0 1px 4px rgba(124,58,237,.04)}
    .ksb-set-row{display:flex;align-items:center;gap:12px;padding:14px 16px;font-size:13px;font-weight:600;color:#0f0e17;cursor:pointer;transition:background .12s;background:none;border:none;width:100%;text-align:left;font-family:inherit;border-bottom:1px solid #faf5ff;text-decoration:none}
    .ksb-set-row:last-child{border-bottom:none}
    .ksb-set-row:hover{background:#faf8ff}
    .ksb-set-row:active{background:#f3f0ff}
    .ksb-set-row.danger{color:#e11d48}
    .ksb-set-row.danger:hover{background:#fff1f2}
    .ksb-set-row-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .ksb-set-row-txt{flex:1;min-width:0}
    .ksb-set-row-title{font-size:13.5px;font-weight:700;color:#0f0e17}
    .ksb-set-row.danger .ksb-set-row-title{color:#e11d48}
    .ksb-set-row-sub{font-size:11px;color:#94a3b8;margin-top:2px;font-weight:500}
    .ksb-set-row-arr{color:#c4b5fd;flex-shrink:0}

    /* ── MODEL BADGE — SVG styled (see .kmd-trigger pill rule further down,
       which is the one actually applied) ── */

    #v-kie{display:none;flex-direction:column;height:100vh;height:100dvh;padding-top:0;background:#fff;position:fixed;inset:0;z-index:500}
    #v-kie.active{display:flex}
    body.kie-mode .hdr{display:none}

    .kie-box{width:100%;max-width:760px;margin:0 auto;background:#fff;display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;position:relative}

    /* Header — floating icons only, no bar/background */
    .kie-hdr{padding:8px 12px;display:flex;align-items:center;justify-content:space-between;position:absolute;top:0;left:0;right:0;z-index:15;background:transparent;border-bottom:none;box-shadow:none;pointer-events:none}
    .kie-hdr-l{display:flex;align-items:center;gap:10px;pointer-events:auto}
    .kie-av{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,#ede9fe,#c4b5fd);display:flex;align-items:center;justify-content:center;border:2px solid #ede9fe}
    .kie-av-svg{width:24px;height:24px}
    .kie-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
    .kie-info{display:flex;flex-direction:column}
    .kie-name{font-size:15px;font-weight:800;color:#1a1a2e;letter-spacing:-.2px}
    .kie-sub{font-size:11px;color:#8b8b9e;margin-top:1px;font-weight:500}
    .kie-hdr-r{display:flex;align-items:center;gap:3px;pointer-events:auto;background:#fff;border-radius:25px;padding:4px;box-shadow:0 2px 11px rgba(15,14,23,.11)}
    .kie-close{background:#f5f5f8;border:1px solid #e8e8ec;color:#5f5f7a;padding:8px 16px;border-radius:20px;cursor:pointer;font-size:13px;font-weight:700;display:flex;align-items:center;gap:5px;transition:all .15s;font-family:inherit}
    .kie-close:hover{background:#ede9fe;border-color:#c4b5fd;color:var(--p)}
    .kie-clear-btn{background:none;border:none;color:#8b8b9e;cursor:pointer;padding:8px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .15s}
    .kie-clear-btn:hover{background:#f5f5f8;color:#5f5f7a}

    /* Welcome screen */
    .kie-welcome{display:flex;flex-direction:column;justify-content:flex-start;flex:1;min-height:0;overflow-y:auto;background:#faf8ff}
    /* Hero band at top */
    .kie-welcome-hero{position:relative;display:flex;flex-direction:column;align-items:center;padding:56px 24px 12px;text-align:center;overflow:hidden;flex-shrink:0}
    .kie-welcome-glow{position:absolute;top:-90px;left:50%;transform:translateX(-50%);width:380px;height:380px;background:radial-gradient(circle,rgba(124,58,237,.16) 0%,rgba(168,85,247,.05) 45%,transparent 72%);pointer-events:none}
    .kie-welcome-av{width:72px;height:72px;border-radius:22px;background:transparent;display:flex;align-items:center;justify-content:center;margin-bottom:10px;filter:drop-shadow(0 8px 20px rgba(124,58,237,.2));position:relative;z-index:1;flex-shrink:0}
    .kie-welcome-title{font-size:21px;font-weight:900;color:#1a1a2e;margin-bottom:4px;letter-spacing:-.5px}
    .kie-wave{display:inline-flex;align-items:center;vertical-align:-5px;animation:wave 2.2s ease-in-out infinite;transform-origin:70% 70%}
    @keyframes wave{0%,100%{transform:rotate(0deg)}20%{transform:rotate(14deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(14deg)}80%{transform:rotate(-4deg)}}
    .kie-welcome-sub{font-size:12px;color:#8b8b9e;max-width:280px;line-height:1.5;margin:0 auto}
    /* ── KIE ECOSYSTEM TOOLS inside welcome ── */
    .kie-eco-wrap{padding:8px 14px 4px}
    .kie-eco-divider{display:flex;align-items:center;gap:8px;margin-bottom:12px}
    .kie-eco-divider-line{flex:1;height:1px;background:var(--border2)}
    .kie-eco-divider-label{font-size:9px;font-weight:800;color:var(--mute);text-transform:uppercase;letter-spacing:1px;white-space:nowrap;display:flex;align-items:center;gap:5px}
    .kie-eco-dot{width:5px;height:5px;border-radius:50%;background:var(--p);opacity:.5;flex-shrink:0}
    .kie-eco-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
    .kie-tool-card{background:#fff;border-radius:14px;border:1.5px solid var(--border2);padding:10px 10px;cursor:pointer;transition:all .17s;display:flex;align-items:center;gap:9px;box-shadow:0 1px 6px rgba(124,58,237,.04);position:relative;overflow:hidden}
    .kie-tool-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(124,58,237,.12)}
    .kie-tool-card:active{transform:scale(.97)}
    .kie-tool-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;background:currentColor;opacity:.7}
    .kie-tool-card[style*="#ede9fe"]::before{background:#7c3aed}
    .kie-tool-card[style*="#d1fae5"]::before{background:#059669}
    .kie-tool-card[style*="#dbeafe"]::before{background:#2563eb}
    .kie-tool-card[style*="#fde68a"]::before{background:#d97706}
    .kie-tool-card[style*="#c7d2fe"]::before{background:#4f46e5}
    .kie-tool-card[style*="#a5f3fc"]::before{background:#0891b2}
    .kie-tool-card[style*="#fed7aa"]::before{background:#ea580c}
    .kie-tool-card[style*="#f5d0fe"]::before{background:#a21caf}
    .kie-tool-card[style*="#99f6e4"]::before{background:#0d9488}
    .kie-tool-card[style*="#fde047"]::before{background:#ca8a04}
    .kie-tool-ico{font-size:18px;flex-shrink:0;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center}
    .kie-tool-info{flex:1;min-width:0}
    .kie-tool-name{font-size:11.5px;font-weight:800;color:var(--txt);letter-spacing:-.2px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .kie-tool-sub{font-size:9.5px;color:var(--sub);margin-top:2px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    /* Swiper section */
    .kie-swiper-section{padding:6px 0 6px;flex-shrink:0}
    .kie-swiper-label{font-size:11px;font-weight:800;color:#b0b0c0;text-transform:uppercase;letter-spacing:.7px;padding:0 14px;margin-bottom:10px}
    .kie-swiper-outer{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 14px 10px;cursor:grab}
    .kie-swiper-outer::-webkit-scrollbar{display:none}
    .kie-swiper-outer:active{cursor:grabbing}
    .kie-swiper-track{display:flex;gap:11px;width:max-content;transition:transform .35s cubic-bezier(.4,0,.2,1)}
    /* Chip 2 — Pinterest-style full-color tile */
    .kie-chip2{border:none;border-radius:16px;padding:11px 10px;text-align:left;cursor:pointer;transition:all .22s cubic-bezier(.4,0,.2,1);font-family:inherit;width:122px;flex-shrink:0;display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(124,58,237,.06)}
    .kie-chip2:nth-child(odd){background:#fff;border:1px solid #ece6fb}
    .kie-chip2:nth-child(even){background:linear-gradient(160deg,#f5f0ff,#ece2fd)}
    .kie-chip2:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(124,58,237,.15)}
    .kie-chip2:active{transform:translateY(-1px) scale(.97)}
    .kie-chip2-ico{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;flex-shrink:0;box-shadow:0 2px 6px rgba(124,58,237,.14)}
    .kie-chip2-txt{font-size:11.5px;font-weight:800;color:#1a1a2e;line-height:1.25;margin-bottom:2px}
    .kie-chip2-sub{font-size:9.5px;color:#8b86a0;font-weight:500;line-height:1.3}
    /* Swiper dots */
    .kie-swiper-dots{display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 0 0}
    .kie-swiper-dot{width:5px;height:5px;border-radius:99px;background:#ddd6fe;border:none;cursor:pointer;transition:all .25s;padding:0}
    .kie-swiper-dot.active{width:16px;background:#7c3aed}
    /* Bottom hint */
    .kie-welcome-hint{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;color:#c0c0cc;padding:10px 20px 4px;font-weight:500}
    /* Old chip styles - keep for compat */
    .kie-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:400px}
    .kie-suggest-row{display:flex;flex-direction:column;gap:7px;margin-top:14px}
    @keyframes kSugFadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
    .kie-suggest-chip{display:flex;align-items:center;gap:9px;background:#fff;border:1.5px solid #ececf2;border-radius:12px;padding:9px 13px;font-size:13px;font-weight:500;color:#1a1a2e;cursor:pointer;font-family:inherit;text-align:left;line-height:1.4;white-space:normal;opacity:0;animation:kSugFadeIn .4s ease both;transition:border-color .15s,background .15s,transform .1s}
    .kie-suggest-chip:hover{border-color:#c4b5fd;background:#faf7ff}
    .kie-suggest-chip:active{transform:scale(.97)}
    .kie-suggest-arrow{flex-shrink:0;color:#a78bfa}
    .kie-gmail-cta-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;border:none;border-radius:14px;padding:13px 18px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 4px 14px rgba(124,58,237,.25);transition:opacity .15s;width:100%;opacity:0;animation:kSugFadeIn .4s ease both}
    .kie-gmail-cta-btn:active{opacity:.85}
    .kie-chip{background:#fff;border:1.5px solid #e8e8ec;border-radius:18px;padding:14px 14px;text-align:left;cursor:pointer;transition:all .2s;font-family:inherit}
    .kie-chip:hover{border-color:#7c3aed;background:#faf5ff;transform:translateY(-2px);box-shadow:0 6px 16px rgba(124,58,237,.12)}
    .kie-chip-ico{font-size:22px;margin-bottom:8px;display:block}
    .kie-chip-txt{font-size:12px;font-weight:700;color:#1a1a2e;line-height:1.4}
    .kie-chip-sub{font-size:11px;color:#8b8b9e;margin-top:3px;font-weight:400}

    /* Messages area */
    .kie-msgs{flex:1;min-height:0;overflow-y:auto;padding:64px 12px 8px;display:flex;flex-direction:column;gap:16px;background:#fff;scroll-behavior:smooth}
    .kie-msgs::-webkit-scrollbar{width:3px}
    .kie-msgs::-webkit-scrollbar-thumb{background:#e0e0e8;border-radius:99px}

    /* Message bubbles */
    .km{max-width:82%;word-break:break-word;overflow-wrap:break-word;animation:kmIn .2s ease;min-width:0}
    @keyframes kmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
    .km-ai{align-self:flex-start;width:100%;max-width:100%;min-width:0}
    .km-user{align-self:flex-end;max-width:82%}
    .km-ai-av{display:none}
    .km-ai-body{display:flex;flex-direction:column;min-width:0;flex:1;overflow:hidden;max-width:100%;padding-right:2px}

    /* ── "KIE's response was interrupted" notice — shown after the user
       taps stop mid-generation, with a one-tap way to pick it back up ── */
    .km-interrupted{
      display:flex;align-items:center;gap:9px;
      margin:6px 4px 10px;padding:11px 12px 11px 13px;
      background:#f8f7fc;border:1px solid #ece7fb;border-radius:14px;
      font-size:12.5px;font-weight:600;color:#6b6478;
      max-width:min(420px,92%);
    }
    .km-int-ico{flex-shrink:0;color:#9c94b3;display:flex}
    .km-int-txt{flex:1}
    .km-int-retry{
      flex-shrink:0;border:1px solid #ded6f7;background:#fff;color:#7c3aed;
      font-size:12px;font-weight:700;padding:6px 13px;border-radius:99px;
      cursor:pointer;font-family:inherit;transition:background .12s;
    }
    .km-int-retry:hover{background:#f3f0ff}
    .km-ai-name{display:none}
    /* AI bubble: plain text, no background box */
    .km-bubble{font-size:13.5px;line-height:1.7;word-break:break-word;overflow-wrap:break-word;white-space:pre-wrap;max-width:100%;min-width:0;display:block;padding:0;color:#1a1a2e}
    /* Streaming cursor — blinks while tokens are arriving from the SSE stream */
    @keyframes kie-blink{0%,100%{opacity:1}50%{opacity:0}}
    .kie-stream-cursor{display:inline-block;width:2px;height:1em;background:#7c3aed;border-radius:1px;margin-left:1px;vertical-align:text-bottom;animation:kie-blink .7s step-end infinite}
    .km-ai .km-bubble{background:none;color:#1a1a2e;border-radius:0;padding:0}
    .km-user .km-bubble{background:#f0f0f0;color:#1a1a2e;border-radius:20px;padding:12px 16px}
    /* Structured AI reply content — paragraphs, lists, mini-headings */
    .km-bubble p{margin:0 0 12px}
    .km-bubble p:last-child{margin-bottom:0}
    .km-bubble ul.km-list,.km-bubble ol.km-list{margin:2px 0 12px;padding-left:20px}
    .km-bubble ul.km-list:last-child,.km-bubble ol.km-list:last-child{margin-bottom:0}
    .km-bubble ul.km-list li,.km-bubble ol.km-list li{margin-bottom:6px;line-height:1.6}
    .km-bubble ul.km-list li:last-child,.km-bubble ol.km-list li:last-child{margin-bottom:0}
    .km-bubble h3.km-heading,.km-bubble h4.km-heading,.km-bubble h5.km-heading,.km-bubble h6.km-heading{font-size:13.5px;font-weight:800;margin:14px 0 6px;color:#1a1a2e;line-height:1.4}
    .km-bubble h3.km-heading:first-child,.km-bubble h4.km-heading:first-child,.km-bubble h5.km-heading:first-child,.km-bubble h6.km-heading:first-child{margin-top:0}
    .km-bubble strong{font-weight:800}
    .km-meta{font-size:10px;color:#b0b0c0;margin-top:5px;padding:0 2px;font-weight:500}
    .km-ai .km-meta{text-align:left}
    .km-user .km-meta{text-align:right}
    /* AI message action bar */
    .km-actions{display:inline-flex;align-items:center;gap:1px;margin-top:8px;opacity:0;transition:opacity .25s;pointer-events:none;flex-wrap:wrap}
    .km-actions.visible{opacity:1;pointer-events:auto}
    .km-act-btn{background:none;border:none;cursor:pointer;padding:8px 10px;border-radius:9px;color:#9a93b5;transition:all .15s;display:flex;align-items:center;justify-content:center;font-family:inherit;flex-shrink:0}
    .km-act-btn:hover{background:#ede9fe;color:#7c3aed}
    .km-act-btn:active{transform:scale(.9)}
    .km-act-btn svg{flex-shrink:0;display:block}
    .km-act-btn.act-speaking{color:#e11d48;background:#fff1f2}
    .km-act-btn:not(:last-child){position:relative}
    .km-act-btn:not(:last-child)::after{content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:1px;height:12px;background:#ede9fe}

    /* ── Sent-message long-press menu (Copy / Select Text / Share) ── */
    .km-user .km-bubble{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:background .12s;cursor:pointer}
    .km-user .km-bubble.km-pressed{background:#e2e2e2}
    .kmenu-overlay{position:fixed;inset:0;z-index:900;background:transparent;opacity:0;pointer-events:none;transition:opacity .15s}
    .kmenu-overlay.show{opacity:1;pointer-events:auto}
    .kmenu{position:fixed;background:rgba(255,255,255,.98);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:14px;box-shadow:0 10px 34px rgba(20,10,50,.22);overflow:hidden;min-width:176px;z-index:901;transform:scale(.92);opacity:0;transition:transform .15s cubic-bezier(.4,0,.2,1),opacity .15s}
    .kmenu.show{transform:scale(1);opacity:1}
    .kmenu-item{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:13.5px;font-weight:700;color:#1a1a2e;cursor:pointer;transition:background .12s}
    .kmenu-item:active{background:#f4f2fb}
    .kmenu-item svg{flex-shrink:0;color:#7c3aed}
    .kmenu-sep{height:1px;background:#eee}

    /* Select-text bottom sheet */
    .ksel-overlay{position:fixed;inset:0;z-index:950;background:rgba(10,5,25,.42);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
    .ksel-overlay.show{opacity:1;pointer-events:auto}
    .ksel-sheet{background:#fff;width:100%;max-width:520px;max-height:68vh;border-radius:20px 20px 0 0;padding:14px 18px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;transform:translateY(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);box-shadow:0 -8px 30px rgba(0,0,0,.18)}
    .ksel-overlay.show .ksel-sheet{transform:translateY(0)}
    .ksel-handle{width:36px;height:4px;background:#e2e2e2;border-radius:99px;margin:0 auto 12px}
    .ksel-title{font-size:11px;font-weight:800;color:#8a8a9c;margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}
    .ksel-text{font-size:14.5px;line-height:1.65;color:#1a1a2e;user-select:text;-webkit-user-select:text;-webkit-touch-callout:default;overflow-y:auto;flex:1;padding:12px 14px;background:#f8f7ff;border-radius:12px;white-space:pre-wrap;word-break:break-word;border:1.5px solid var(--border2)}
    .ksel-foot{display:flex;gap:10px;margin-top:14px}
    .ksel-foot button{flex:1;padding:12px;border-radius:10px;font-size:13.5px;font-weight:700;border:none;cursor:pointer;transition:opacity .15s}
    .ksel-foot button:active{opacity:.8}
    .ksel-copy-all{background:var(--g);color:#fff}
    .ksel-close-btn{background:#f1f0f5;color:#444}


    /* Floating voice player — shown while KIE reads a reply aloud */
    .kie-voice-player{position:fixed;top:14px;left:50%;transform:translateX(-50%) translateY(-14px);width:min(320px,calc(100% - 32px));background:#fff;border-radius:26px;box-shadow:0 10px 30px rgba(15,14,23,.18),0 2px 8px rgba(15,14,23,.06);padding:7px 10px 7px 7px;display:flex;align-items:center;gap:10px;z-index:9999;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}
    .kie-voice-player.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
    .kvp-play{width:34px;height:34px;border-radius:50%;background:#7c3aed;border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0}
    .kvp-play:active{transform:scale(.92)}
    .kvp-icon-loading{display:none;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:kvpSpin .7s linear infinite}
    @keyframes kvpSpin{to{transform:rotate(360deg)}}
    .kvp-play.loading{cursor:default;background:#8b5cf6}
    .kvp-play.loading .kvp-icon-loading{display:block}
    .kvp-play.loading .kvp-icon-pause,.kvp-play.loading .kvp-icon-play{display:none !important}
    .kvp-time{font-size:12.5px;font-weight:700;color:#0f0e17;flex-shrink:0;font-variant-numeric:tabular-nums;min-width:34px}
    .kvp-track{flex:1;height:3px;background:#e5e3ec;border-radius:2px;position:relative;overflow:hidden}
    .kvp-fill{position:absolute;left:0;top:0;height:100%;width:0%;background:#7c3aed;border-radius:2px}
    .kvp-close{width:26px;height:26px;border:none;background:none;color:#9a97a8;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;border-radius:50%;transition:background .15s,color .15s}
    .kvp-close:hover{background:#f2f1f6;color:#0f0e17}

    /* Thinking trace — collapsible step list with a live "Thinking for Ns"
       header, matching Claude/ChatGPT's reasoning-trace UI. Steps append one
       at a time (never loop/repeat); on completion the header freezes to
       "Thought for Ns" and the panel auto-collapses, still tappable to
       re-expand and review the trace. */
    .kie-typing{display:none;align-self:flex-start;width:100%}
    .kie-think{width:100%}
    .kie-think-hdr{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none;padding:2px 0}
    .kie-think-bulb{color:#9ca3af;flex-shrink:0}
    .kie-think-title{font-size:13.5px;font-weight:600;color:#4b5563}
    .kie-think-chevron{color:#9ca3af;flex-shrink:0;transition:transform .2s ease;margin-left:1px}
    .kie-think.collapsed .kie-think-chevron{transform:rotate(-90deg)}
    .kie-think.collapsed .kie-think-body{display:none}
    .kie-think-body{position:relative;padding:10px 0 4px 22px;margin-top:2px}
    .kie-think-body:empty{display:none}
    .kie-think-body::before{content:'';position:absolute;left:7px;top:2px;bottom:14px;width:1.5px;background:#e5e7eb}
    .kie-think-step{position:relative;padding:5px 0 5px 6px;font-size:13.5px;color:#9ca3af;line-height:1.45;transition:color .2s ease}
    .kie-think-step::before{content:'';position:absolute;left:-16px;top:12px;width:7px;height:7px;border-radius:50%;background:#fff;border:1.5px solid #d1d5db;transition:border-color .2s ease,background .2s ease}
    .kie-think-step.current{color:#1f2937;font-weight:500}
    .kie-think-step.current::before{border-color:#7c3aed;background:#7c3aed}
    /* Permanent per-message trace — reuses all .kie-think styling above, plus
       a light divider so it reads as a distinct collapsed header sitting
       above that message's actual answer text, not part of the prose. */
    .kie-think-trace{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #eef0f3}
    .kie-think-trace .kie-think-title{color:#6b7280;font-weight:500}
    @keyframes kdot{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}



    /* Mode pills bar — compact, above input */
    .kie-modes{display:flex;align-items:center;gap:5px;padding:8px 16px 0;overflow-x:auto;scrollbar-width:none;flex-shrink:0;background:transparent}
    .kie-modes::-webkit-scrollbar{display:none}
    .kie-mode-pill{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:700;border:1.5px solid #e8e8ec;background:#fff;color:#8b8b9e;cursor:pointer;transition:all .18s;white-space:nowrap;font-family:inherit;flex-shrink:0}
    .kie-mode-pill:hover{border-color:#c4b5fd;color:#7c3aed;background:#faf5ff}
    .kie-mode-pill.active{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(124,58,237,.25)}
    .kie-mode-pill svg{flex-shrink:0}
    .kie-mode-pill.active svg{filter:brightness(0) invert(1)}
    .kie-mode-pill.mode-locked{background:#faf9ff;border-color:#e9d5ff;color:#a78bfa}
    .pill-lock-badge{font-size:9px;margin-left:1px}
    /* kdot kept for other uses */

    /* Input bar — Claude-style, sticky bottom, never scrolls away */
    .kie-input-wrap{padding:10px 14px 14px;padding-bottom:max(14px,env(safe-area-inset-bottom,14px));background:rgba(255,255,255,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);flex-shrink:0;border-top:none;position:sticky;bottom:0}
    /* Resume/template picker — icon-triggered dropdown (was an always-on bar).
       Icon is always visible now (not just when a resume exists), so KIE
       always has an entry point to create/upload/pick a resume. */
    .kie-tpl-wrap{position:relative;display:inline-flex;flex-shrink:0}
    .kie-resume-picker{position:absolute;top:calc(100% + 10px);right:0;width:210px;background:#fff;border:1px solid #eeeef2;border-radius:16px;box-shadow:0 14px 34px rgba(15,14,23,.14);padding:8px;display:none;flex-direction:column;gap:2px;z-index:60}
    .kie-resume-picker.open{display:flex;animation:kieTplPop .16s ease}
    @keyframes kieTplPop{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
    .kie-resume-picker-label{font-size:10.5px;font-weight:700;color:#b0b0c0;white-space:nowrap;letter-spacing:.05em;padding:4px 8px 6px}
    .kie-resume-pills{display:flex;flex-direction:column;gap:2px;max-height:240px;overflow-y:auto}
    .kie-resume-pills::-webkit-scrollbar{display:none}
    /* Pill is always a flex row [label][dismiss?] so a long name truncates
       with ellipsis instead of pushing the dismiss (×) button out of view */
    .kie-rpill{width:100%;padding:8px 10px;border-radius:10px;border:none;background:transparent;font-size:12.5px;font-weight:600;color:#54536a;cursor:pointer;text-align:left;transition:all .15s;flex-shrink:0;font-family:inherit;display:flex;align-items:center;gap:6px}
    .kie-rpill-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .kie-rpill:hover:not(.active){background:#faf5ff;color:#7c3aed}
    .kie-rpill.active{background:#f3ecff;color:#7c3aed;font-weight:700}
    .kie-rpill-dismiss{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(124,58,237,.12);color:#7c3aed;font-size:13px;line-height:1;cursor:pointer;transition:background .15s;flex-shrink:0;margin-left:auto}
    .kie-rpill-dismiss:hover{background:rgba(124,58,237,.22)}
    /* Empty state — no resume saved or uploaded yet */
    .kie-rpill-empty{display:flex;flex-direction:column;gap:2px}
    .kie-rpill-empty-msg{font-size:12px;color:#9b9bab;padding:6px 10px 8px;line-height:1.4}
    .kie-rpill-action{width:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:none;background:transparent;font-size:12.5px;font-weight:700;color:#7c3aed;cursor:pointer;text-align:left;transition:background .15s;font-family:inherit}
    .kie-rpill-action:hover{background:#faf5ff}
    .kie-rpill-action svg{flex-shrink:0}

    /* ── KIE ATTACHMENT STAGING PREVIEW ── */
    /* Anchoring context for the floating attach-stage below — kie-modes and
       kie-input-wrap stack normally inside this, unaffected by the overlay. */
    .kie-bottom-stack{position:relative;flex-shrink:0}
    .kie-attach-stage{
      display:none;
      position:absolute;left:14px;right:14px;bottom:100%;margin-bottom:8px;
      padding:9px 12px;background:#fff;border:1.5px solid #e8e2fb;border-radius:16px;
      box-shadow:0 8px 24px rgba(30,20,60,.14);z-index:5;
    }
    .kie-attach-stage.visible{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .kie-attach-chip{
      display:inline-flex;align-items:center;gap:8px;
      background:#faf8ff;border:1.5px solid #e0d9f7;border-radius:12px;
      padding:7px 10px;position:relative;max-width:240px;
    }
    .kie-attach-chip-img{
      width:42px;height:42px;border-radius:8px;object-fit:cover;flex-shrink:0;
      border:1px solid rgba(124,58,237,.15);
    }
    .kie-attach-chip-ico{
      width:34px;height:34px;background:linear-gradient(135deg,#7c3aed,#a855f7);
      border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
    }
    .kie-attach-chip-info{flex:1;min-width:0}
    .kie-attach-chip-name{font-size:11.5px;font-weight:700;color:#1e1b4b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
    .kie-attach-chip-type{font-size:10px;color:#7c6fa8;margin-top:1px}
    .kie-attach-chip-dismiss{
      width:18px;height:18px;border-radius:50%;background:rgba(124,58,237,.12);
      border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
      color:#7c3aed;font-size:14px;line-height:1;transition:background .15s;flex-shrink:0;
      padding:0;font-family:inherit;
    }
    .kie-attach-chip-dismiss:hover{background:rgba(124,58,237,.22)}

    /* ── KIE USER IMAGE BUBBLE ── */
    .km-user-img-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:82%}
    .km-user-img{
      width:180px;height:180px;border-radius:16px;object-fit:cover;
      border:2px solid rgba(124,58,237,.25);box-shadow:0 4px 16px rgba(124,58,237,.2);
      cursor:zoom-in;
    }
    .km-user-img:hover{opacity:.9}

    /* ── KIE CODE BLOCK OUTPUT CARD — minimal, neutral header like a standard code viewer ── */
    .kie-code-card{
      background:#fff;border-radius:12px;overflow:hidden;
      border:1px solid #ede9fe;margin-top:10px;
    }
    .kie-code-card-hdr{
      display:flex;align-items:center;justify-content:space-between;
      padding:9px 14px;background:#f5f3ff;
      border-bottom:1px solid #ede9fe;
    }
    .kie-code-card-label{
      font-size:12.5px;font-weight:600;color:#5b21b6;
      display:flex;align-items:center;gap:7px;
    }
    .kie-code-card-label svg{flex-shrink:0;width:13px;height:13px;color:#7c3aed}
    .kie-code-card-copy{
      display:flex;align-items:center;justify-content:center;
      background:transparent;border:none;cursor:pointer;padding:4px;border-radius:6px;
      color:#7c3aed;transition:all .15s;font-family:inherit;
    }
    .kie-code-card-copy:hover{background:#ede9fe;color:#5b21b6}
    .kie-code-card-copy:active{transform:scale(.92)}
    .kie-code-card-body{
      padding:13px 14px;font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
      font-size:12.5px;line-height:1.6;color:#1e293b;
      max-height:380px;overflow:auto;white-space:pre;
      cursor:grab;-webkit-overflow-scrolling:touch;
    }
    /* Plain text (not a diagram/timeline) still reads fine with 'pre' since
       most replies wrap naturally at reasonable width; wide ASCII content
       (trees, timelines) keeps its alignment and scrolls horizontally
       instead of collapsing — this is the "swipe" affordance for code cards. */
    .kie-code-card-body.kie-dragging{cursor:grabbing;user-select:none}
    .kie-code-card-body::-webkit-scrollbar{height:4px;width:4px}
    .kie-code-card-body::-webkit-scrollbar-thumb{background:#ddd6fe;border-radius:99px}
    .kie-typing-dot-sm{width:6px;height:6px;border-radius:50%;background:#a855f7;display:inline-block;animation:kTypDotPulse 1.1s ease-in-out infinite}
    @keyframes kTypDotPulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}

    /* ── KIE COMPARISON TABLE CARD — clean table, no label bar, just the data ── */
    .kie-table-card{
      background:#fff;border-radius:14px;overflow:hidden;
      border:1.5px solid #ede9fe;margin-top:10px;
      box-shadow:0 2px 14px rgba(124,58,237,.08);
    }
    .kie-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;cursor:grab}
    .kie-table-scroll.kie-dragging{cursor:grabbing;user-select:none}
    .kie-table-scroll::-webkit-scrollbar{height:4px}
    .kie-table-scroll::-webkit-scrollbar-thumb{background:#ddd6fe;border-radius:99px}
    .kie-table{
      /* min-width instead of width so a table with many/long columns keeps
         its natural size and overflows into a left-right swipe instead of
         squeezing every column and wrapping cell text into a broken mess. */
      width:max-content;min-width:100%;border-collapse:collapse;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
      font-size:13px;
    }
    .kie-table th{
      text-align:left;padding:13px 16px;background:#f5f3ff;
      color:#5b21b6;font-weight:700;font-size:12.5px;letter-spacing:0;
      white-space:nowrap;border-bottom:1px solid #ede9fe;
    }
    .kie-table td{
      padding:13px 16px;color:#1e293b;line-height:1.5;
      border-bottom:1px solid #f1f0fb;vertical-align:top;
      white-space:nowrap;min-width:110px;
    }
    .kie-table tbody tr:last-child td{border-bottom:none}
    /* Rich source-card row — Deep Think / Web Search / Creative only. Reuses
       the same swipe-scroll pattern as .kie-table-scroll / .kie-code-card-body
       (native touch scroll + JS mouse drag-scroll wired at the #kieMsgs level). */
    .kie-source-cards{
      display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;
      padding:2px 2px 6px;margin:12px 0 4px;cursor:grab;
    }
    .kie-source-cards.kie-dragging{cursor:grabbing;user-select:none}
    .kie-source-cards::-webkit-scrollbar{height:4px}
    .kie-source-cards::-webkit-scrollbar-thumb{background:#ddd6fe;border-radius:99px}
    .kie-source-card{
      flex:0 0 auto;width:158px;border:1px solid #ede9fe;border-radius:14px;
      overflow:hidden;background:#fff;text-decoration:none;display:block;
      box-shadow:0 1px 4px rgba(124,58,237,.07);transition:transform .12s ease;
    }
    .kie-source-card:active{transform:scale(.97)}
    .kie-source-card-img{width:100%;height:90px;object-fit:cover;background:#f5f3ff;display:block}
    .kie-source-card-img-fallback{
      width:100%;height:90px;display:flex;align-items:center;justify-content:center;
      background:linear-gradient(135deg,#7c3aed,#4f46e5);
    }
    .kie-source-card-img-fallback img{width:26px;height:26px;border-radius:6px;background:#fff;padding:3px}
    .kie-source-card-body{padding:9px 10px 11px}
    .kie-source-card-pub{
      display:flex;align-items:center;gap:5px;font-size:10px;color:#7c3aed;
      font-weight:700;margin-bottom:4px;text-transform:uppercase;letter-spacing:.02em;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .kie-source-card-pub img{width:12px;height:12px;border-radius:2px;flex-shrink:0}
    .kie-source-card-title{
      font-size:12px;line-height:1.35;color:#1e293b;font-weight:600;
      display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    }
    .kie-source-card-date{font-size:10px;color:#94a3b8;margin-top:5px}

    /* Plain, un-linked reference image dropped into an answer — no card, no
       click-through, just a bigger illustrative photo (distinct from the
       clickable .kie-source-card row above). */
    .kie-inline-image-wrap{
      margin:14px 0;border-radius:18px;overflow:hidden;
      box-shadow:0 2px 10px rgba(124,58,237,.10);
    }
    .kie-inline-image{width:100%;max-height:240px;object-fit:cover;display:block;background:#f5f3ff}

    /* Inline citation chip — dropped right after a grounded claim by
       formatKieText's [C:n] pass, tappable to open the sources drawer. */
    .kie-cite-pill{
      display:inline-flex;align-items:center;vertical-align:middle;
      font-size:10.5px;font-weight:600;color:#6d28d9;background:#f3f0ff;
      border:1px solid #e4defc;border-radius:999px;padding:1px 8px;
      margin:0 2px;cursor:pointer;font-family:inherit;line-height:1.6;
      white-space:nowrap;transition:background .12s ease;
    }
    .kie-cite-pill:active{background:#ede9fe}

    .kie-table-writing{
      display:flex;align-items:center;gap:6px;padding:10px 16px;
      color:#a855f7;font-size:10px;font-weight:700;
    }

    /* ── KIE PDF GEN PROGRESS STATUS ── */
    .kie-pdf-progress{
      display:none;align-items:center;gap:10px;padding:12px 0;
    }
    .kie-pdf-progress.visible{display:flex}
    .kie-pdf-progress-steps{display:flex;flex-direction:column;gap:4px;flex:1}
    .kie-pdf-step{
      display:flex;align-items:center;gap:8px;font-size:12px;color:#94a3b8;
      transition:color .3s;
    }
    .kie-pdf-step.active{color:#7c3aed;font-weight:600}
    .kie-pdf-step.done{color:#059669}
    .kie-pdf-step-dot{
      width:7px;height:7px;border-radius:50%;background:#ddd6fe;flex-shrink:0;transition:background .3s;
    }
    .kie-pdf-step.active .kie-pdf-step-dot{background:#7c3aed;animation:kpulse 1.2s ease-in-out infinite}
    .kie-pdf-step.done .kie-pdf-step-dot{background:#059669;animation:none}

    /* ── IMAGE LIGHTBOX OVERLAY ── */
    .kie-img-overlay{
      position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:9999;
      display:flex;align-items:center;justify-content:center;
      cursor:zoom-out;opacity:0;transition:opacity .2s;pointer-events:none;
    }
    .kie-img-overlay.open{opacity:1;pointer-events:all}
    .kie-img-overlay img{
      max-width:92vw;max-height:88vh;border-radius:16px;
      box-shadow:0 20px 60px rgba(0,0,0,.5);
    }
    .kie-img-overlay-close{
      position:absolute;top:20px;right:20px;background:rgba(255,255,255,.12);
      border:none;color:#fff;font-size:24px;width:40px;height:40px;border-radius:50%;
      cursor:pointer;display:flex;align-items:center;justify-content:center;
      transition:background .15s;
    }
    .kie-img-overlay-close:hover{background:rgba(255,255,255,.25)}

    /* ── GMAIL CONNECT CARD (Premier-gated nudge) ── */
    .kie-gmail-card{width:100%;background:linear-gradient(135deg,#7c3aed,#5b21b6);border:none;border-radius:16px;padding:11px 12px 9px;cursor:pointer;font-family:inherit;text-align:left;display:flex;flex-direction:column;gap:7px;box-shadow:0 4px 14px rgba(124,58,237,.28);transition:transform .12s}
    .kie-gmail-card:active{transform:scale(.98)}
    .kie-gmail-card-top{display:flex;align-items:center;gap:9px}
    .kie-gmail-card-ico{width:30px;height:30px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15)}
    .kie-gmail-card-text{flex:1;min-width:0}
    .kie-gmail-card-title{font-size:12px;font-weight:800;color:#fff;display:flex;align-items:center;gap:6px;letter-spacing:-.1px}
    .kie-gmail-badge{background:rgba(255,255,255,.24);color:#fff;font-size:8px;font-weight:800;padding:2px 6px;border-radius:20px;letter-spacing:.4px;flex-shrink:0}
    .kie-gmail-card-sub{font-size:10px;color:rgba(255,255,255,.8);margin-top:2px;line-height:1.3}
    .kie-gmail-card-cta{background:#fff;color:#7c3aed;font-size:10px;font-weight:800;padding:6px 10px;border-radius:20px;flex-shrink:0;white-space:nowrap;align-self:center}
    .kie-gmail-card-foot{font-size:8px;color:rgba(255,255,255,.6);text-align:center;padding-top:6px;border-top:1px solid rgba(255,255,255,.16);font-weight:500}


    .kie-file-overlay{
      position:fixed;inset:0;background:rgba(15,14,23,.4);z-index:9999;
      display:flex;align-items:flex-end;justify-content:center;
      opacity:0;transition:opacity .22s;pointer-events:none;
    }
    .kie-file-overlay.open{opacity:1;pointer-events:all}
    .kie-file-sheet{
      width:100%;max-width:760px;height:88vh;background:#fff;border-radius:22px 22px 0 0;
      display:flex;flex-direction:column;overflow:hidden;
      box-shadow:0 -8px 40px rgba(15,14,23,.18);
      transform:translateY(100%);transition:transform .32s cubic-bezier(.32,.72,0,1);
    }
    .kie-file-overlay.open .kie-file-sheet{transform:translateY(0)}
    .kie-file-handle{width:36px;height:4px;background:#e5deff;border-radius:99px;margin:10px auto 4px;flex-shrink:0}
    .kie-file-overlay-hdr{
      display:flex;align-items:center;gap:14px;padding:10px 16px 12px;flex-shrink:0;
      background:#fff;color:#1a1a2e;border-bottom:1px solid #ede9fe;
      position:relative;z-index:2;
    }
    .kie-file-overlay-close{
      background:#f5f3ff;border:none;color:#6b6b80;
      width:32px;height:32px;border-radius:50%;cursor:pointer;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;transition:all .15s;
    }
    .kie-file-overlay-close:hover{background:#ede9fe;color:#7c3aed}
    .kie-file-overlay-close:active{transform:scale(.92)}
    .kie-file-overlay-title{flex:1;min-width:0}
    #kieFilePreviewName{font-size:14.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1a1a2e;letter-spacing:-.2px}
    #kieFilePreviewSub{font-size:11.5px;color:#8b8b9e;margin-top:2px;font-weight:500}
    .kie-file-overlay-body{flex:1;overflow-y:auto;background:#faf8ff;padding:20px 14px 48px;display:flex;flex-direction:column;align-items:center;gap:16px;scroll-behavior:smooth}
    .kie-file-overlay-page{max-width:100%;height:auto;border-radius:6px;box-shadow:0 4px 18px rgba(124,58,237,.12);border:1px solid #ede9fe;background:#fff}
    .kie-file-overlay-txt{
      width:100%;max-width:680px;background:#fff;color:#1e1b4b;border-radius:14px;
      padding:22px;font-size:13px;line-height:1.65;white-space:pre-wrap;word-break:break-word;
      font-family:inherit;box-shadow:0 4px 18px rgba(124,58,237,.08);border:1px solid #ede9fe;
    }
    .kie-file-overlay-loading{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:80px}
    .kie-file-overlay-spinner{
      width:32px;height:32px;border-radius:50%;
      border:3px solid #ede9fe;border-top-color:#7c3aed;
      animation:kieSpin .8s linear infinite;
    }
    @keyframes kieSpin{to{transform:rotate(360deg)}}
    .kie-file-overlay-loading-txt{color:#8b8b9e;font-size:12.5px;font-weight:500}
    .kie-file-overlay-note{color:#a8a2bd;font-size:11px;text-align:center;padding-top:4px}
    .kie-file-overlay-unavail{
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:10px;color:#a8a2bd;margin-top:auto;margin-bottom:auto;padding:60px 20px;
    }
    .kie-file-overlay-unavail-type{font-size:13px;color:#4a4560;margin-top:8px;font-weight:700}
    .kie-file-overlay-unavail-msg{font-size:12.5px;color:#a8a2bd}
    /* KIE file card */
    .km-file-card{display:flex;align-items:center;gap:12px;background:#faf9ff;border:1.5px solid #e0d9f7;border-radius:14px;padding:13px;margin-top:6px;max-width:100%}
    .km-file-ico{width:38px;height:38px;background:linear-gradient(135deg,#7c3aed,#a855f7);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .km-file-info{flex:1;min-width:0}
    .km-file-name{font-size:12.5px;font-weight:700;color:#1e1b4b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .km-file-meta{font-size:10.5px;color:#7c6fa8;margin-top:2px}
    .km-file-dl{display:flex;align-items:center;gap:5px;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border:none;border-radius:10px;padding:8px 12px;font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap;text-decoration:none;flex-shrink:0;transition:all .2s;font-family:inherit}
    .km-file-dl:hover{opacity:.88;transform:translateY(-1px)}
    /* KIE template picker in chat */
    .kie-tpl-pick-grid{display:flex;flex-direction:column;gap:5px;margin-top:8px;max-height:260px;overflow-y:auto}
    .kie-tpl-pick-pill{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;border:1.5px solid #e8e8ec;background:#fff;cursor:pointer;text-align:left;font-family:inherit;transition:all .2s;width:100%}
    .kie-tpl-pick-pill:hover{border-color:#c4b5fd;background:#faf5ff}
    .kie-tpl-pick-pill:disabled{opacity:.5;cursor:not-allowed}
    .kie-tpl-pick-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
    .kie-tpl-pick-name{font-size:12px;font-weight:700;color:#1e1b4b;flex:1}
    .kie-tpl-pick-tag{font-size:10px;color:#999}
    /* Optional sections in builder */
    .opt-sec{margin-top:22px;border:1.5px dashed #ddd6fe;border-radius:14px;overflow:hidden;transition:border-color .2s}
    .opt-sec:focus-within{border-color:#a78bfa}
    .opt-sec-hdr{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:#faf8ff;cursor:pointer;user-select:none;transition:background .15s}
    .opt-sec-hdr:hover{background:#f3eeff}
    .opt-sec-hdr-left{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:#5b21b6}
    .opt-sec-badge{font-size:10px;font-weight:700;background:#ede9fe;color:#7c3aed;padding:2px 8px;border-radius:20px}
    .opt-sec-arrow{font-size:11px;color:#a78bfa;transition:transform .2s}
    .opt-sec-body{padding:16px;border-top:1px solid #ede9fe;display:none}
    .opt-sec-body.open{display:block}
    .kie-input-row{display:flex;flex-direction:column;gap:6px;background:#f7f7fb;border:1.5px solid #e8e8ec;border-radius:20px;padding:10px 10px 8px;transition:border-color .2s,box-shadow .2s;box-shadow:0 6px 24px rgba(15,14,23,.08)}
    .kie-input-row:focus-within{border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.08),0 6px 24px rgba(15,14,23,.08);background:#fff}
    .kie-input-toolrow{display:flex;align-items:center;gap:2px}
    .kie-toolrow-spacer{flex:1}
    .kie-attach{width:32px;height:32px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#c0b8d8;border-radius:10px;transition:all .2s;margin-right:4px;padding:0}
    .kie-attach:hover{background:#f0ecff;color:#7c3aed;transform:scale(1.1)}
    .kie-attach.has-resume{color:#7c3aed}
    .kie-attach.has-resume svg{filter:drop-shadow(0 0 3px rgba(124,58,237,.4))}
    .kie-mic{width:36px;height:36px;background:#f5f2ff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#9d8cd9;border-radius:50%;transition:all .2s;margin-right:2px;padding:0}
    .kie-mic:hover{background:#ede4ff;color:#7c3aed;transform:scale(1.06)}
    .kie-mic.listening{color:#fff;background:#e11d48;box-shadow:0 2px 10px rgba(225,29,72,.35);animation:micPulse 1s ease infinite}
    @keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(225,29,72,.25)}50%{box-shadow:0 0 0 6px rgba(225,29,72,0)}}

    /* ── Live voice chat trigger — merged into kieSend button, see JS ──────── */

    .kie-live-overlay{
      position:fixed;inset:0;z-index:10000;
      background:linear-gradient(180deg, #f6f3ff 0%, #ffffff 60%);
      display:flex;flex-direction:column;
      opacity:0;pointer-events:none;transform:scale(1.02);
      transition:opacity .28s ease, transform .28s ease;
    }
    .kie-live-overlay.open{opacity:1;pointer-events:all;transform:scale(1)}
    .kie-live-top{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:calc(20px + env(safe-area-inset-top)) 20px 8px;flex-shrink:0;text-align:center}
    .kie-live-badge{display:flex;align-items:center;gap:7px;font-size:17px;font-weight:800;color:#7c3aed;letter-spacing:-.2px}
    .kie-live-badge-ico{color:#7c3aed;flex-shrink:0}
    .kie-live-badge-ico line{animation:liveBar 1.1s ease-in-out infinite;transform-origin:center}
    .kie-live-badge-ico line:nth-child(1){animation-delay:-.9s}
    .kie-live-badge-ico line:nth-child(2){animation-delay:-.5s}
    .kie-live-badge-ico line:nth-child(3){animation-delay:0s}
    .kie-live-badge-ico line:nth-child(4){animation-delay:-.7s}
    .kie-live-badge-ico line:nth-child(5){animation-delay:-.3s}
    @keyframes liveBar{0%,100%{opacity:.45;transform:scaleY(.55)}50%{opacity:1;transform:scaleY(1)}}
    .kie-live-app-label{font-size:13px;font-weight:600;color:#9891ac}

    .kie-live-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:0 24px;min-height:0}
    .kie-live-orb-wrap{position:relative;width:290px;height:290px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .kie-live-orb-halo{
      position:absolute;inset:0;border-radius:50%;
      background:radial-gradient(circle, rgba(167,139,250,.32) 0%, rgba(124,58,237,.13) 45%, rgba(124,58,237,0) 72%);
      filter:blur(2px);
      animation:haloBreathe 3.6s ease-in-out infinite;
    }
    @keyframes haloBreathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}
    .kie-live-orb{
      position:relative;width:190px;height:190px;flex-shrink:0;overflow:hidden;
      /* Same layered mesh-gradient approach as before — several soft radial
         gradients plus a blur, so nothing has a hard edge — just recolored
         into Kievora's purple, light lavender up top fading through violet
         into a deeper purple base, instead of the blue/peach/pink mix. */
      background:
        radial-gradient(circle at 28% 22%, rgba(216,199,255,.95) 0%, transparent 46%),
        radial-gradient(circle at 74% 18%, rgba(167,139,250,.6) 0%, transparent 50%),
        radial-gradient(circle at 50% 52%, rgba(196,163,253,.9) 0%, transparent 58%),
        radial-gradient(circle at 66% 78%, rgba(139,92,246,.55) 0%, transparent 52%),
        linear-gradient(165deg, #ddd6fe 0%, #c4b5fd 35%, #a78bfa 65%, #7c3aed 100%);
      filter:blur(.4px) saturate(1.08);
      box-shadow:0 10px 34px rgba(124,58,237,.32), inset 0 0 30px rgba(255,255,255,.4);
      border-radius:50%;border:3px solid #fff;
      transition:box-shadow .25s ease;
      animation:orbDrift 9s ease-in-out infinite;
    }
    /* Slow, subtle shift in gradient focus — an orb that's completely still
       reads as a static image; this keeps it feeling alive even at rest
       (listening) without anything as busy as the old bar equalizer. */
    @keyframes orbDrift{
      0%,100%{background-position:0 0, 0 0, 0 0, 0 0, 0 0}
      50%{background-position:6% 4%, -5% 3%, -3% -4%, 4% -3%, 0 0}
    }
    .kie-live-orb.thinking{animation-duration:5s}
    .kie-live-orb.speaking{
      /* Slightly brighter + more saturated while actually talking, so
         there's still a visible state difference without bringing back
         explicit text. */
      background:
        radial-gradient(circle at 28% 22%, rgba(216,199,255,.8) 0%, transparent 46%),
        radial-gradient(circle at 74% 18%, rgba(167,139,250,.55) 0%, transparent 50%),
        radial-gradient(circle at 50% 48%, rgba(216,180,255,.95) 0%, transparent 58%),
        radial-gradient(circle at 66% 80%, rgba(168,85,247,.6) 0%, transparent 55%),
        linear-gradient(165deg, #e0d4fe 0%, #c9b6fd 30%, #b085f5 65%, #8b3ce8 100%);
      animation-duration:2.4s;
    }
    .kie-live-wave-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
    .kie-live-orb.muted{
      background:
        radial-gradient(circle at 34% 30%, rgba(203,213,225,.9) 0%, transparent 50%),
        linear-gradient(165deg, #cbd5e1 0%, #a8b0c2 60%, #8a92a6 100%);
      animation:none;
    }
    .kie-live-orb.muted ~ .kie-live-orb-halo,
    .kie-live-orb-wrap:has(.kie-live-orb.muted) .kie-live-orb-halo{background:radial-gradient(circle, rgba(90,85,104,.22) 0%, rgba(90,85,104,.08) 45%, rgba(90,85,104,0) 72%)}

    .kie-live-status{font-size:19px;font-weight:800;color:#1a1625;letter-spacing:-.3px;text-align:center}
    .kie-live-caption{
      font-size:13.5px;line-height:1.55;text-align:left;width:100%;max-width:340px;
      max-height:130px;overflow-y:auto;transition:opacity .15s;margin-top:2px;
      display:flex;flex-direction:column;gap:6px;scrollbar-width:none;
    }
    .kie-live-caption::-webkit-scrollbar{display:none}
    .kie-live-overlay.no-caption .kie-live-caption{opacity:0;pointer-events:none;height:0;overflow:hidden}
    .kie-live-tline{word-wrap:break-word}
    .kie-live-tlabel{font-weight:800}
    .kie-live-tline-me .kie-live-tlabel{color:#7c3aed}
    .kie-live-tline-me .kie-live-ttext{color:#4b4560}
    .kie-live-tline-kie .kie-live-tlabel{color:#1a1625}
    .kie-live-tline-kie .kie-live-ttext{color:#5b5568}

    .kie-live-bottom{display:flex;align-items:flex-start;justify-content:center;gap:34px;padding:16px 24px calc(28px + env(safe-area-inset-bottom));flex-shrink:0}
    .kie-live-ctrl-wrap{display:flex;flex-direction:column;align-items:center;gap:7px}
    .kie-live-ctrl-label{font-size:11.5px;font-weight:700;color:#635c78}
    .kie-live-ctrl{width:56px;height:56px;border-radius:50%;border:none;background:#fff;color:#7c3aed;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s,transform .15s;flex-shrink:0;box-shadow:0 4px 16px rgba(124,58,237,.16)}
    .kie-live-ctrl:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(124,58,237,.22)}
    .kie-live-ctrl.active{background:#7c3aed;color:#fff}
    .kie-live-end{width:60px;height:60px;border-radius:50%;border:none;background:#ef4444;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(239,68,68,.4);transition:transform .15s,background .15s;flex-shrink:0}
    .kie-live-end:hover{background:#dc2626;transform:scale(1.05)}
    .kie-inp{width:100%;border:none;background:transparent;font-size:15px;outline:none;font-family:inherit;color:#1a1a2e;line-height:1.5;resize:none;max-height:120px;min-height:24px;overflow-y:auto;padding:2px 2px 0;scrollbar-width:none;box-sizing:border-box}
    .kie-inp::-webkit-scrollbar{display:none}
    .kie-inp::placeholder{color:#b0b0c0}
    .kie-send{width:36px;height:36px;background:var(--g);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;box-shadow:0 2px 8px rgba(124,58,237,.25)}
    .kie-send:hover{transform:scale(1.08);box-shadow:0 4px 14px rgba(124,58,237,.4)}
    .kie-send:disabled{opacity:.4;cursor:not-allowed;transform:none}
    .kie-send.kie-stop{background:#1a1a2e;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
    .kie-send.kie-stop:hover{background:#2d0e6a;transform:scale(1.06)}
    .kie-send.kie-voice-idle{box-shadow:0 2px 8px rgba(124,58,237,.3),0 0 0 4px rgba(124,58,237,.12)}
    .kie-send.kie-voice-idle:hover{box-shadow:0 4px 14px rgba(124,58,237,.45),0 0 0 5px rgba(124,58,237,.16)}
    .kie-footer{text-align:center;padding:5px 0 0;font-size:10px;color:#c0c0cc;font-weight:500;letter-spacing:.03em}

    /* ── MODALS ── */
    .modal-bg{display:none;position:fixed;inset:0;z-index:200;background:rgba(15,14,23,.55);align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px)}
    .modal-bg.open{display:flex}
    .modal{background:#fff;border-radius:22px;max-width:400px;width:100%;padding:32px;box-shadow:0 24px 80px rgba(124,58,237,.2);border:1.5px solid var(--border)}
    .modal h3{font-size:22px;font-weight:900;margin-bottom:10px;letter-spacing:-.3px}
    .modal p{font-size:15px;color:var(--sub);margin-bottom:24px;line-height:1.6}
    .modal-btns{display:flex;gap:12px}
    .modal-btns button{flex:1;padding:14px;border-radius:12px;font-size:15px;font-weight:700;border:none;cursor:pointer;transition:all .15s}
    .mbtn-cancel{background:#f1f5f9;color:#374151}.mbtn-cancel:hover{background:#e2e8f0;transform:translateY(-1px)}
    .mbtn-del{background:linear-gradient(135deg,#e11d48,#f43f5e);color:#fff;box-shadow:0 2px 12px rgba(225,29,72,.25)}.mbtn-del:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 16px rgba(225,29,72,.3)}

    /* ── TOAST — slides down from top, centered, never collides with a
       bottom input bar. One consistent dark card with a colored accent per
       type, instead of swapping the whole background to red/black. ── */
    #toast{
      position:fixed;top:max(14px,env(safe-area-inset-top));left:50%;
      transform:translateX(-50%) translateY(-14px);
      z-index:10050;padding:12px 12px 12px 13px;border-radius:16px;
      font-size:13.5px;font-weight:600;line-height:1.4;color:#0f0e17;
      box-shadow:0 12px 32px rgba(15,14,23,.14),0 2px 10px rgba(15,14,23,.06);
      opacity:0;transition:opacity .25s ease,transform .25s ease;pointer-events:none;
      background:#fff;border:1px solid rgba(15,14,23,.06);
      display:flex;align-items:center;gap:11px;
      max-width:min(420px,calc(100vw - 32px));width:max-content;
    }
    #toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
    #toast .toast-ico{flex-shrink:0;width:22px;height:22px}
    #toast .toast-ico svg{width:22px;height:22px;display:block}
    #toast .toast-msg{flex:1}
    #toast .toast-x{flex-shrink:0;width:22px;height:22px;border:none;background:none;color:#b7b2c4;
      cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;padding:0}
    #toast .toast-x:hover{background:#f5f4fa;color:#6b6478}
    #toast a{color:#7c3aed;text-decoration:underline;font-weight:800;white-space:nowrap;pointer-events:auto;margin-left:2px}

    /* Voice-chat-ended summary card — shown briefly after closing a KIE voice
       call, styled as a sibling of #toast (same pill shape, shadow, and
       top-center placement) but wider, with room for a duration readout and
       quick thumbs up/down feedback on how the call went. */
    #kieVoiceEndCard{
      position:fixed;top:max(14px,env(safe-area-inset-top));left:50%;
      transform:translateX(-50%) translateY(-14px);
      z-index:10050;padding:10px 10px 10px 14px;border-radius:18px;
      box-shadow:0 12px 32px rgba(15,14,23,.14),0 2px 10px rgba(15,14,23,.06);
      opacity:0;transition:opacity .25s ease,transform .25s ease;pointer-events:none;
      background:#fff;border:1px solid rgba(15,14,23,.06);
      display:flex;align-items:center;gap:12px;
      max-width:min(420px,calc(100vw - 32px));width:max-content;
    }
    #kieVoiceEndCard.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
    .kvec-ico{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:#f3e8ff;
      display:flex;align-items:center;justify-content:center;color:#7c3aed}
    .kvec-body{display:flex;flex-direction:column;line-height:1.25}
    .kvec-title{font-size:13.5px;font-weight:700;color:#0f0e17}
    .kvec-sub{font-size:11.5px;font-weight:600;color:#9491a1;margin-top:1px}
    .kvec-fb{display:flex;align-items:center;gap:2px;flex-shrink:0}
    .kvec-fb-btn{width:30px;height:30px;border:none;background:none;color:#b7b2c4;cursor:pointer;
      display:flex;align-items:center;justify-content:center;border-radius:50%;padding:0;transition:all .15s}
    .kvec-fb-btn:hover{background:#f5f4fa;color:#6b6478}
    .kvec-fb-btn.picked{background:#f3e8ff;color:#7c3aed}
    .kvec-fb-btn.picked.down{background:#fee2e2;color:#dc2626}
    .kvec-sep{width:1px;height:22px;background:#eceaf3;flex-shrink:0}
    .kvec-x{flex-shrink:0;width:28px;height:28px;border:none;background:none;color:#b7b2c4;
      cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;padding:0}
    .kvec-x:hover{background:#f5f4fa;color:#6b6478}

    /* print area — download handled by pdfmake */

    /* ── SPINNER ── */
    .spinner-pg{display:flex;align-items:center;justify-content:center;min-height:300px}
    .spin{width:44px;height:44px;border-radius:50%;border:4px solid #ddd6fe;border-top-color:var(--p);animation:sping .7s linear infinite}
    @keyframes sping{to{transform:rotate(360deg)}}

    .rf-sans{font-family:'Inter',system-ui,sans-serif}
    .rf-serif{font-family:Georgia,'Times New Roman',serif}
    .rf-mono{font-family:'Courier New',Courier,monospace}
    .hidden{display:none!important}

    /* Section dividers in step panels */
    .sec-hdr{display:flex;align-items:center;gap:10px;margin:24px 0 14px}
    .sec-hdr-ico{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .sec-hdr-txt{font-size:14px;font-weight:800;color:var(--txt)}
    .sec-divider{flex:1;height:1px;background:var(--border)}

    /* ── AI QUIZ VIEW ── */
    .quiz-wrap{max-width:580px;margin:0 auto;padding:100px 20px 32px}
    .quiz-card{background:#fff;border-radius:24px;border:1.5px solid var(--border2);padding:40px;box-shadow:0 8px 40px rgba(124,58,237,.1)}
    .quiz-spark{width:56px;height:56px;background:var(--g);border-radius:18px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:0 4px 20px rgba(124,58,237,.3)}
    .quiz-title{font-size:26px;font-weight:900;margin-bottom:6px;letter-spacing:-.4px;color:var(--txt)}
    .quiz-sub{color:var(--sub);font-size:14px;margin-bottom:28px;line-height:1.65}
    .quiz-q{margin-bottom:18px}
    .quiz-q label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:#374151;margin-bottom:6px;text-transform:uppercase;letter-spacing:.6px}
    .quiz-q label svg{flex-shrink:0}
    .quiz-q select{width:100%;padding:11px 38px 11px 14px;border:1.5px solid var(--border2);border-radius:10px;font-size:14px;outline:none;color:var(--txt);font-family:inherit;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237c3aed' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center;appearance:none;transition:border-color .15s,box-shadow .15s}
    .quiz-q select:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(124,58,237,.1)}
    .quiz-find-btn{width:100%;background:var(--g);color:#fff;border:none;border-radius:12px;padding:14px;font-size:15px;font-weight:800;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:8px;box-shadow:0 4px 16px rgba(124,58,237,.3)}
    .quiz-find-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(124,58,237,.4)}
    .quiz-skip{text-align:center;margin-top:16px;font-size:13px;color:var(--mute)}
    .quiz-skip a{color:var(--p);font-weight:700;cursor:pointer;text-decoration:none}
    .quiz-skip a:hover{text-decoration:underline}

    /* ── TEMPLATE OVERLAY ── */
    .tpl-overlay{position:fixed;inset:0;background:rgba(15,14,23,.72);z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .2s ease}
    .tpl-ov-box{background:#fff;border-radius:24px;overflow:hidden;width:100%;max-width:500px;box-shadow:0 32px 80px rgba(0,0,0,.3);animation:fadeUp .25s ease}
    .tpl-ov-prev{height:300px;overflow:hidden;position:relative;background:linear-gradient(135deg,#f8f7ff,#ede9fe)}
    .tpl-ov-prev .tpl-scaler{width:600px;transform-origin:top left;pointer-events:none}
    .tpl-ov-badge{position:absolute;top:14px;left:14px;background:var(--g);color:#fff;font-size:12px;font-weight:800;padding:5px 14px;border-radius:99px;display:flex;align-items:center;gap:5px;box-shadow:0 2px 10px rgba(124,58,237,.4)}
    .tpl-ov-close{position:absolute;top:14px;right:14px;width:32px;height:32px;background:rgba(255,255,255,.9);border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#64748b;transition:all .15s}
    .tpl-ov-close:hover{background:#fff;color:var(--txt)}
    .tpl-ov-foot{padding:20px 24px 24px}
    .tpl-ov-name{font-size:20px;font-weight:900;margin-bottom:3px;color:var(--txt)}
    .tpl-ov-tag{font-size:13px;color:var(--sub);margin-bottom:18px}
    .tpl-ov-btns{display:flex;gap:10px}
    .tpl-ov-use{flex:1;background:var(--g);color:#fff;border:none;border-radius:10px;padding:13px;font-size:14px;font-weight:800;cursor:pointer;transition:all .2s;box-shadow:0 3px 12px rgba(124,58,237,.3)}
    .tpl-ov-use:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(124,58,237,.4)}
    .tpl-ov-browse{background:#f5f3ff;color:var(--p);border:none;border-radius:10px;padding:13px 16px;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s}
    .tpl-ov-browse:hover{background:#ede9fe}

    /* ── RECOMMENDED BADGE ON TCARD ── */
    .rec-badge{position:absolute;top:12px;left:12px;background:var(--g);color:#fff;font-size:11px;font-weight:800;padding:4px 12px;border-radius:99px;z-index:3;display:flex;align-items:center;gap:4px;box-shadow:0 2px 10px rgba(124,58,237,.4)}

    /* ── AI ASSIST BUTTON ── */
    .ai-assist-btn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#f5f3ff,#fdf4ff);color:var(--p);border:1.5px solid var(--border2);border-radius:8px;padding:7px 13px;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap}
    .ai-assist-btn:hover{background:linear-gradient(135deg,#ede9fe,#f3e8ff);border-color:var(--p2);transform:translateY(-1px)}
    .ai-assist-btn.loading{opacity:.7;pointer-events:none}
    @keyframes spin{to{transform:rotate(360deg)}}
    .ai-spin{animation:spin .7s linear infinite;display:inline-block}
    .f-row{display:flex;align-items:flex-end;gap:8px}
    .f-row .f{flex:1;margin-bottom:0}

    /* ── COACH PANEL ── */
    .coach-panel{background:#f0f7ff;border:1.5px solid #bfdbfe;border-radius:14px;padding:16px;margin-top:10px;display:none;animation:fadeUp .2s ease}
    .coach-hdr{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;position:relative}
    .coach-spark{width:28px;height:28px;background:var(--g);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
    .coach-title{font-size:14px;font-weight:800;color:#0f172a;line-height:1.3}
    .coach-title .hl{color:#2563eb;background:none;-webkit-text-fill-color:#2563eb}
    .coach-sub{font-size:12px;color:#64748b;margin-top:2px}
    .coach-regen{margin-left:auto;background:none;border:1.5px solid #bfdbfe;border-radius:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;color:#2563eb;font-weight:700;transition:all .15s;flex-shrink:0}
    .coach-regen:hover{background:#dbeafe;border-color:#93c5fd}
    .coach-loading{display:flex;align-items:center;padding:10px 0}
    .coach-items{display:flex;flex-direction:column;gap:10px}
    .coach-item{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;padding:13px 14px;cursor:pointer;transition:all .2s}
    .coach-item:hover{border-color:#93c5fd;background:#f8fbff;transform:translateX(2px)}
    .coach-item-sel{border-color:#2563eb!important;background:#eff6ff!important;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
    .coach-item-icon{width:24px;height:24px;flex-shrink:0;margin-top:1px}
    .coach-item-icon-sel{}
    .coach-item-text{font-size:13px;color:#334155;line-height:1.6}
    .coach-item-text strong{color:#1e40af;font-weight:700}

    /* ── WORK BULLETS PANEL ── */
    .coach-mini-panel{background:#f8fafc;border:1.5px solid var(--border2);border-radius:12px;padding:14px;margin-top:8px;display:none;animation:fadeUp .2s ease}
    .coach-mini-hdr{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--p);margin-bottom:10px}
    .bullet-item{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border:1.5px solid var(--border2);border-radius:9px;cursor:pointer;margin-bottom:7px;font-size:12px;color:#334155;line-height:1.55;background:#fff;transition:all .15s}
    .bullet-item:hover{border-color:var(--p2);background:#faf5ff;transform:translateX(2px)}
    .bullet-item.bullet-used{border-color:#059669;background:#f0fdf4;color:#166534;cursor:default}
    .bullet-item.bullet-used:hover{transform:none}
    .bullet-plus{font-size:15px;font-weight:800;color:var(--p);flex-shrink:0;line-height:1;margin-top:1px;min-width:14px}
    .bullet-item.bullet-used .bullet-plus{color:#059669}

    /* ── SKILL CHIPS ── */
    .skill-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
    .skill-chip{display:inline-flex;align-items:center;background:#fff;border:1.5px solid var(--border2);border-radius:99px;padding:6px 14px;font-size:12px;font-weight:700;color:var(--p);cursor:pointer;transition:all .15s}
    .skill-chip:hover{background:var(--p);color:#fff;border-color:var(--p);transform:translateY(-1px)}
    .skill-chip.chip-used{background:#f0fdf4;color:#059669;border-color:#6ee7b7;cursor:default}
    .skill-chip.chip-used:hover{transform:none;background:#f0fdf4;color:#059669}

    /* ── QUIZ MODAL OVERLAY ── */
    .qm-backdrop{position:fixed;inset:0;background:rgba(15,14,23,.6);z-index:400;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px);animation:fadeIn .2s ease}
    .qm-box{background:#fff;border-radius:20px;width:100%;max-width:420px;box-shadow:0 24px 80px rgba(124,58,237,.2);border:1.5px solid var(--border);overflow:hidden;animation:fadeUp .22s ease}
    .qm-hdr{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 0}
    .qm-title{font-size:16px;font-weight:900;color:var(--txt);display:flex;align-items:center;gap:8px}
    .qm-close{width:30px;height:30px;border-radius:50%;background:#f1f5f9;border:none;cursor:pointer;font-size:14px;color:var(--sub);display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
    .qm-close:hover{background:#e2e8f0;color:var(--txt)}
    /* Phase 1 — questions */
    .qm-body{padding:16px 20px 20px}
    .qm-q{margin-bottom:13px}
    .qm-q label{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:#374151;margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}
    .qm-q label svg{flex-shrink:0}
    .qm-q select{width:100%;padding:10px 34px 10px 12px;border:1.5px solid var(--border2);border-radius:9px;font-size:13px;outline:none;color:var(--txt);font-family:inherit;cursor:pointer;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237c3aed' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;transition:border-color .15s}
    .qm-q select:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(124,58,237,.1)}
    .qm-find-btn{width:100%;background:var(--g);color:#fff;border:none;border-radius:10px;padding:13px;font-size:14px;font-weight:800;cursor:pointer;transition:all .2s;margin-top:4px;box-shadow:0 3px 12px rgba(124,58,237,.3)}
    .qm-find-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(124,58,237,.4)}
    /* Phase 2 — result */
    .qm-result{display:none}
    .qm-loading{display:none;flex-direction:column;align-items:center;text-align:center;padding:50px 24px 46px}
    .qm-loading-spin{margin-bottom:18px;animation:sping 1s linear infinite}
    .qm-loading-title{font-size:15.5px;font-weight:800;color:#0f0e17;margin-bottom:6px}
    .qm-loading-sub{font-size:12.5px;color:#9ca3af;line-height:1.5;max-width:240px}
    .qm-result-prev{height:220px;overflow:hidden;position:relative;background:linear-gradient(135deg,#f8f7ff,#ede9fe)}
    .qm-result-prev .tpl-scaler{width:600px;transform-origin:top left;pointer-events:none}
    .qm-result-badge{position:absolute;top:12px;left:12px;background:var(--g);color:#fff;font-size:11px;font-weight:800;padding:4px 12px;border-radius:99px;display:flex;align-items:center;gap:4px;box-shadow:0 2px 10px rgba(124,58,237,.35)}
    .qm-result-foot{padding:16px 20px 20px}
    .qm-result-name{font-size:18px;font-weight:900;color:var(--txt);margin-bottom:2px}
    .qm-result-tag{font-size:12px;color:var(--sub);margin-bottom:14px}
    .qm-result-btns{display:flex;gap:9px}
    .qm-use-btn{flex:1;background:var(--g);color:#fff;border:none;border-radius:10px;padding:12px;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 3px 12px rgba(124,58,237,.3);transition:all .2s}
    .qm-use-btn:hover{transform:translateY(-1px)}
    .qm-dismiss-btn{background:#f5f3ff;color:var(--p);border:none;border-radius:10px;padding:12px 16px;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s}
    .qm-dismiss-btn:hover{background:#ede9fe}
    /* Helper card on template picker */
    .tpick-helper{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f5f3ff;border:1.5px solid var(--border2);border-radius:12px;padding:10px 14px;margin-bottom:14px}
    .tpick-helper-txt{font-size:12px;font-weight:600;color:#374151;line-height:1.3}
    .tpick-helper-txt strong{font-size:13px;font-weight:800;color:var(--txt)}
    .tpick-quiz-btn{display:inline-flex;align-items:center;gap:5px;background:var(--g);color:#fff;border:none;border-radius:8px;padding:7px 13px;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;flex-shrink:0;box-shadow:0 2px 8px rgba(124,58,237,.3);transition:all .2s}
    .tpick-quiz-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(124,58,237,.4)}
    /* ── WORK COACH BUTTON ── */
    .work-coach-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--p);font-size:12px;font-weight:700;cursor:pointer;padding:4px 0;margin-top:4px;transition:opacity .15s}
    .work-coach-btn:hover{opacity:.75}
    .work-coach-btn:disabled{opacity:.5;pointer-events:none}

    /* ── UPLOAD VIEW ── */
    /* ── UPLOAD SCREEN (premium redesign) ── */
    .upload-wrap{max-width:620px;margin:0 auto;padding:0 0 48px}
    /* Dark hero header */
    .upload-hero{background:linear-gradient(140deg,#1a0540 0%,#3b0f8c 45%,#5c1fd4 100%);border-radius:20px;padding:22px 20px;margin:76px 16px 20px;position:relative;overflow:hidden}
    .upload-hero::before{content:'';position:absolute;right:-80px;top:-80px;width:260px;height:260px;background:radial-gradient(circle,rgba(168,85,247,.2) 0%,transparent 70%);border-radius:50%;pointer-events:none}
    .upload-hero::after{content:'';position:absolute;left:-40px;bottom:-40px;width:160px;height:160px;background:radial-gradient(circle,rgba(124,58,237,.15) 0%,transparent 65%);border-radius:50%;pointer-events:none}
    .upload-hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:4px 12px;font-size:11px;font-weight:700;color:rgba(255,255,255,.85);margin-bottom:14px;position:relative;z-index:1}
    .upload-hero-badge-dot{width:6px;height:6px;border-radius:50%;background:#a855f7;box-shadow:0 0 8px rgba(168,85,247,.8);animation:pulse 2s infinite}
    .upload-hero-title{font-size:24px;font-weight:900;color:#fff;line-height:1.2;letter-spacing:-.4px;margin-bottom:8px;position:relative;z-index:1}
    .upload-hero-title span{background:linear-gradient(90deg,#c084fc,#f0abfc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .upload-hero-sub{font-size:13px;color:rgba(255,255,255,.65);line-height:1.6;max-width:320px;position:relative;z-index:1}
    .upload-hero-stats{display:flex;gap:20px;margin-top:18px;position:relative;z-index:1}
    .upload-hero-stat{text-align:center}
    .upload-hero-stat-num{font-size:16px;font-weight:900;color:#fff;line-height:1}
    .upload-hero-stat-lbl{font-size:10px;color:rgba(255,255,255,.5);font-weight:600;margin-top:2px}
    /* Upload body card */
    .upload-body{padding:24px 20px;background:var(--bg)}
    .upload-zone{border:2px dashed rgba(124,58,237,.3);border-radius:20px;padding:32px 20px 24px;text-align:center;cursor:pointer;transition:all .25s;background:#fff;position:relative;overflow:hidden;box-shadow:0 4px 24px rgba(124,58,237,.06)}
    .upload-zone::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(124,58,237,.03),rgba(168,85,247,.03));pointer-events:none}
    .upload-zone:hover,.upload-zone.drag-over{border-color:var(--p);background:#faf5ff;box-shadow:0 0 0 4px rgba(124,58,237,.08),0 8px 32px rgba(124,58,237,.1)}
    .upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
    .upload-zone-illo{width:72px;height:72px;margin:0 auto 16px;position:relative}
    .upload-zone-illo-bg{width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg,#7c3aed,#a855f7);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(124,58,237,.35)}
    .upload-zone-title{font-size:16px;font-weight:800;color:var(--txt);margin-bottom:4px}
    .upload-zone-sub{font-size:12px;color:var(--sub);line-height:1.5}
    .upload-types{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px}
    .upload-type-badge{display:flex;align-items:center;gap:4px;background:#f8f7ff;border:1.5px solid var(--border2);border-radius:8px;padding:5px 10px;font-size:10.5px;font-weight:800;color:var(--sub);letter-spacing:.2px}
    /* File ready */
    .upload-file-ready{background:linear-gradient(135deg,#ecfdf5,#f0fdf4);border:1.5px solid #86efac;border-radius:14px;padding:14px 16px;display:none;align-items:center;gap:12px;margin-bottom:16px}
    .upload-file-ico{width:38px;height:38px;background:linear-gradient(135deg,#059669,#10b981);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 10px rgba(5,150,105,.25)}
    .upload-file-name{font-size:13px;font-weight:800;color:#065f46;word-break:break-all}
    .upload-file-size{font-size:11px;color:#6ee7b7;margin-top:2px;font-weight:600}
    .upload-file-rm{margin-left:auto;background:rgba(5,150,105,.1);border:none;color:#059669;cursor:pointer;font-size:14px;padding:6px;border-radius:8px;line-height:1;transition:all .15s;flex-shrink:0;display:flex;align-items:center;justify-content:center}
    .upload-file-rm:hover{background:rgba(5,150,105,.2)}
    .upload-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--mute);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
    .upload-or::before,.upload-or::after{content:'';flex:1;height:1px;background:var(--border)}
    .upload-paste-btn{width:100%;background:#fff;color:var(--p);border:1.5px solid var(--border2);border-radius:14px;padding:13px;font-size:13px;font-weight:700;cursor:pointer;transition:all .18s;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 2px 8px rgba(124,58,237,.05)}
    .upload-paste-btn:hover{background:linear-gradient(135deg,#faf5ff,#f5f3ff);border-color:var(--p2)}
    .paste-area-wrap{display:none;margin-top:14px}
    .paste-area-wrap.show{display:block}
    .paste-area-wrap textarea{width:100%;min-height:130px;border:1.5px solid var(--border2);border-radius:14px;padding:14px;font-size:13px;font-family:inherit;outline:none;resize:vertical;color:var(--txt);line-height:1.55;transition:border-color .15s;background:#fff}
    .paste-area-wrap textarea:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(124,58,237,.1)}
    .analyze-btn{width:100%;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border:none;border-radius:16px;padding:17px;font-size:15px;font-weight:900;cursor:pointer;transition:all .22s;box-shadow:0 6px 24px rgba(124,58,237,.35),inset 0 1px 0 rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;gap:9px;margin-top:20px;font-family:inherit;letter-spacing:-.2px}
    .analyze-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 36px rgba(124,58,237,.45),inset 0 1px 0 rgba(255,255,255,.15)}
    .analyze-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
    .upload-hero-top{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:1;margin-bottom:14px}
    .upload-hero-top .upload-hero-badge{margin-bottom:0}
    .kie-flow-dots{display:flex;align-items:center;gap:5px;flex-shrink:0}
    .kie-flow-dot{height:6px;width:6px;border-radius:99px;background:rgba(255,255,255,.25);transition:all .3s cubic-bezier(.32,.72,0,1)}
    .kie-flow-dot.active{width:18px;background:#fff}
    .kie-flow-dot.done{width:6px;background:rgba(255,255,255,.6)}

    /* ── Optimizer step-1 hero — same visual language as ATS Checker's hero,
       compact so it fits inside the stepped panel flow ── */
    .opt-hero{background:linear-gradient(140deg,#1a0540 0%,#3b0f8c 45%,#5c1fd4 100%);border-radius:20px;padding:22px 20px;margin:-22px 0 20px;position:relative;overflow:hidden}
    .opt-hero::before{content:'';position:absolute;right:-60px;top:-60px;width:180px;height:180px;background:radial-gradient(circle,rgba(168,85,247,.22) 0%,transparent 70%);border-radius:50%;pointer-events:none}
    .opt-hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:4px 12px;font-size:10.5px;font-weight:700;color:rgba(255,255,255,.85);margin-bottom:12px;position:relative;z-index:1}
    .opt-hero-badge-dot{width:6px;height:6px;border-radius:50%;background:#a855f7;box-shadow:0 0 8px rgba(168,85,247,.8);animation:pulse 2s infinite}
    .opt-hero-title{font-size:20px;font-weight:900;color:#fff;line-height:1.2;letter-spacing:-.4px;position:relative;z-index:1}
    .opt-hero-title span{background:linear-gradient(90deg,#c084fc,#f0abfc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .opt-hero-stats{display:flex;gap:16px;margin-top:16px;position:relative;z-index:1}
    .opt-hero-stat{text-align:center}
    .opt-hero-stat-num{font-size:15px;font-weight:900;color:#fff;line-height:1}
    .opt-hero-stat-lbl{font-size:9.5px;color:rgba(255,255,255,.55);font-weight:600;margin-top:2px;line-height:1.35}
    .opt-hero-stat-div{width:1px;background:rgba(255,255,255,.12);flex-shrink:0}
    /* file-type badges + spacing to match ATS Checker's dropzone exactly */
    .opt-dropzone{padding:32px 16px 24px}
    .opt-dropzone-title{font-size:16px}
    .opt-dropzone-sub{font-size:12px}
    .opt-dropzone-types{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px}
    .opt-type-badge{display:flex;align-items:center;gap:4px;background:#f8f7ff;border:1.5px solid var(--border2);border-radius:8px;padding:5px 10px;font-size:10.5px;font-weight:800;color:var(--sub);letter-spacing:.2px}
    .upload-trust{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px}
    .upload-trust-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--mute);font-weight:600}

    /* ── COVER LETTER VIEW ── */
    /* BUG FIX: same dead-space bug as .bld above — see that comment.
       Tightened to match. */
    .cl-wrap{max-width:680px;margin:0 auto;padding:74px 20px 48px}
    #v-coverletter{background:#fff}
    .cl-step-hdr{position:relative;display:flex;align-items:center;justify-content:center;min-height:40px;margin-bottom:6px}
    #clBackBtn.back-btn{
      width:40px;height:40px;background:transparent;border:none;
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;border-radius:50%;transition:background .15s;
      color:#0f0e17;padding:0;box-shadow:none;
    }
    #clBackBtn.back-btn:hover{background:rgba(124,58,237,.07);border-color:transparent}
    #clBackBtn.back-btn svg{stroke:#0f0e17}
    .cl-steps{display:flex;align-items:center;gap:6px}
    .cl-stp{width:8px;height:8px;border-radius:50%;background:#e5e0f5;transition:all .25s}
    .cl-stp.cl-stp-cur{background:var(--g);width:20px;border-radius:5px}
    .cl-stp.cl-stp-done{background:#a78bfa}
    .cl-step-panel{display:none}
    .cl-step-panel.active{display:block}
    .cl-panel-card{background:#fff;border-radius:18px;border:1px solid var(--hair);padding:22px;box-shadow:var(--shadow-crisp)}
    .cl-step-nav{margin-top:20px;display:flex;justify-content:flex-end}

    /* Standard inset card on mobile — not edge-to-edge */
    @media(max-width:640px){
      .cl-wrap{padding-left:14px;padding-right:14px}
      .cl-step-hdr{padding:0 2px}
      .cl-panel-card{border-radius:16px;border:1px solid var(--hair);box-shadow:var(--shadow-crisp);padding:18px 16px}
      .cl-step-panel{padding-bottom:78px}
      .cl-step-nav{
        position:sticky;bottom:0;left:0;right:0;margin:0;
        background:rgba(255,255,255,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
        border-top:1px solid rgba(0,0,0,.07);padding:12px 16px max(12px,env(safe-area-inset-bottom,12px));
        box-shadow:0 -2px 12px rgba(0,0,0,.04);z-index:6
      }
      .cl-step-nav .btn{flex:1;justify-content:center}
    }

    /* Source cards */
    .cl-src-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:8px}
    .cl-src-card{background:#fff;border:1.5px solid var(--hair);border-radius:16px;padding:16px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .18s;position:relative;box-shadow:var(--shadow-crisp)}
    .cl-src-card:hover{border-color:var(--p2);box-shadow:0 6px 22px rgba(124,58,237,.1)}
    .cl-src-card.sel{border-color:var(--p);box-shadow:0 0 0 3px rgba(124,58,237,.12);background:#faf5ff}
    .cl-src-card.cl-src-locked{opacity:.7}
    .cl-src-ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .cl-src-info{flex:1;min-width:0}
    .cl-src-title{font-size:13.5px;font-weight:800;color:var(--txt)}
    .cl-src-sub{font-size:11.5px;color:var(--sub);margin-top:2px;line-height:1.4}
    .cl-src-check{width:20px;height:20px;border-radius:50%;background:var(--p);display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;transition:opacity .2s}
    .cl-src-card.sel .cl-src-check{opacity:1}

    /* Resume picker in source step */
    .cl-res-picker{background:#f8f7ff;border:1.5px solid var(--border2);border-radius:12px;padding:14px;margin-top:12px;display:none}
    .cl-res-picker.show{display:block}
    .cl-res-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:all .15s;margin-bottom:4px;border:1.5px solid transparent}
    .cl-res-item:last-child{margin-bottom:0}
    .cl-res-item:hover{background:#fff;border-color:var(--border2)}
    .cl-res-item.sel{background:#fff;border-color:var(--p);box-shadow:0 0 0 3px rgba(124,58,237,.08)}
    .cl-res-thumb{width:32px;height:40px;border-radius:6px;background:linear-gradient(135deg,#ede9fe,#ddd6fe);flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--border2)}
    .cl-res-name{font-size:13px;font-weight:700;color:var(--txt);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .cl-res-date{font-size:11px;color:var(--sub)}

    /* Upload zone in source step */
    .cl-upload-zone{border:2px dashed var(--border2);border-radius:12px;padding:24px 16px;text-align:center;cursor:pointer;transition:all .22s;background:#faf9ff;position:relative;overflow:hidden;margin-top:12px;display:none}
    .cl-upload-zone.show{display:block}
    .cl-upload-zone:hover,.cl-upload-zone.drag-over{border-color:var(--p);background:#f5f3ff}
    .cl-upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
    .cl-upload-zone p{font-size:13px;font-weight:700;color:var(--txt);margin-bottom:3px}
    .cl-upload-zone span{font-size:11px;color:var(--sub)}
    .cl-upload-ready{background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:10px;padding:10px 14px;display:none;align-items:center;gap:10px;margin-top:10px}
    .cl-upload-ready.show{display:flex}

    /* Cover letter template grid */
    .cl-tpl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}
    .cl-tcard{background:#fff;border-radius:16px;border:2px solid var(--border2);overflow:hidden;cursor:pointer;transition:all .25s;position:relative}
    .cl-tcard:hover{border-color:var(--p2);box-shadow:0 10px 28px rgba(124,58,237,.12);transform:translateY(-2px)}
    .cl-tcard.sel{border-color:var(--p);box-shadow:0 0 0 4px rgba(124,58,237,.12)}
    .cl-tcard-prev{height:160px;overflow:hidden;position:relative;background:#f8f7ff}
    .cl-tcard-foot{padding:10px 12px;border-top:1.5px solid #faf5ff;background:#fafaff;display:flex;align-items:center;justify-content:space-between}
    .cl-tcard-name{font-size:12px;font-weight:800;color:var(--txt)}
    .cl-tcard-tag{font-size:10px;padding:2px 8px;border-radius:99px;font-weight:700;background:#f3e8ff;color:var(--p)}
    .cl-tcard-tick{position:absolute;top:8px;right:8px;width:20px;height:20px;background:var(--p);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
    .cl-tcard.sel .cl-tcard-tick{opacity:1}

    /* Cover letter A4-style result preview (smaller paper, not a big plain card) */
    .cl-prev-wrap{background:#f8f7ff;border-radius:14px;border:1.5px solid var(--border2);overflow:hidden;box-shadow:0 4px 20px rgba(124,58,237,.08);max-width:300px;margin:0 auto}
    .cl-prev-scaler{width:600px;transform-origin:top left}
    .cl-prev-scaler [contenteditable]{outline:none;cursor:text;border-radius:3px;transition:background .12s}
    .cl-prev-scaler [contenteditable]:hover{background:rgba(124,58,237,.06)}
    .cl-prev-scaler [contenteditable]:focus{box-shadow:0 0 0 2px rgba(124,58,237,.3);border-radius:4px;background:rgba(124,58,237,.04)}

    /* Cover letter ready state */
    .cl-ready-card{background:#fff;border:1.5px solid var(--border2);border-radius:20px;padding:28px;text-align:center;box-shadow:0 4px 24px rgba(124,58,237,.07);margin-top:8px}
    .cl-ready-ico{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#0e7490,#06b6d4);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 4px 18px rgba(6,182,212,.3)}
    .cl-ready-title{font-size:20px;font-weight:900;color:var(--txt);margin-bottom:8px;letter-spacing:-.3px}
    .cl-ready-sub{font-size:13px;color:var(--sub);line-height:1.65;margin-bottom:6px;max-width:340px;margin-left:auto;margin-right:auto}
    .cl-info-pill{display:inline-flex;align-items:center;gap:6px;background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:99px;padding:6px 14px;font-size:12px;font-weight:700;color:#059669;margin-bottom:20px}
    .cl-preview-strip{background:linear-gradient(135deg,#f0faff,#e0f2fe);border:1.5px solid #bae6fd;border-radius:14px;padding:14px 16px;text-align:left;margin-bottom:20px}
    .cl-preview-row{display:flex;align-items:center;gap:10px;font-size:12px;color:#0369a1;font-weight:600;margin-bottom:6px}
    .cl-preview-row:last-child{margin-bottom:0}
    .cl-coming-badge{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#fef3c7,#fde68a);border:1.5px solid #fcd34d;border-radius:99px;padding:5px 13px;font-size:11px;font-weight:800;color:#92400e;margin-bottom:20px}

    /* ANALYSIS VIEW ── */
    .analysis-wrap{max-width:740px;margin:0 auto;padding:76px 16px 48px}
    .analysis-hdr-row{display:flex;align-items:center;gap:14px;margin-bottom:22px}
    .analysis-back{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:50%;color:#0f0e17;cursor:pointer;transition:background .15s;font-family:inherit;flex-shrink:0;padding:0}
    .analysis-back:hover{background:rgba(124,58,237,.07)}
    .analysis-back:hover{border-color:var(--p);color:var(--p)}
    .analysis-title{font-size:20px;font-weight:900;color:var(--txt)}
    .analysis-subtitle{font-size:12px;color:var(--sub);margin-top:1px}
    /* Score hero */
    .score-hero{background:var(--g);border-radius:22px;padding:24px 22px;color:#fff;margin-bottom:18px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(124,58,237,.3)}
    .score-hero::before{content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;background:rgba(255,255,255,.06);border-radius:50%;pointer-events:none}
    .score-ring-wrap{position:relative;width:92px;height:92px;flex-shrink:0}
    .score-ring-wrap svg{transform:rotate(-90deg);display:block}
    .score-ring-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
    .score-ring-overlay .sn{font-size:21px;font-weight:900;line-height:1;color:#fff}
    .score-ring-overlay .sl{font-size:9px;opacity:.72;margin-top:2px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#fff}
    .score-info{flex:1;min-width:0;position:relative;z-index:1}
    .score-grade{font-size:38px;font-weight:900;line-height:1;margin-bottom:4px}
    .score-grade-lbl{font-size:13px;opacity:.88;font-weight:600;margin-bottom:10px}
    .score-pills{display:flex;flex-wrap:wrap;gap:6px}
    /* ATS Checker score panel — light-background gauge card, same grammar
       as Optimize's Screen 3 gauge, so the two tools read as one family. */
    .ats-score-panel{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:1.5px solid var(--border2);border-radius:22px;padding:26px 20px 22px;margin-bottom:18px}
    .ats-score-grade{font-size:26px;font-weight:900;color:var(--txt);line-height:1;margin-top:14px}
    .ats-score-gradelbl{font-size:12.5px;color:var(--sub);font-weight:700;margin-bottom:14px}
    .ats-score-panel .sc-pill{backdrop-filter:none}
    .ats-score-panel .sc-pill.good{background:#dcfce7;border-color:#bbf7d0;color:#166534}
    .ats-score-panel .sc-pill.warn{background:#fef3c7;border-color:#fde68a;color:#92400e}
    .ats-score-panel .sc-pill.bad{background:#fee2e2;border-color:#fecaca;color:#991b1b}
    .sc-pill{border-radius:99px;padding:4px 10px;font-size:10px;font-weight:700;backdrop-filter:blur(4px);border:1px solid transparent}
    .sc-pill.good{background:rgba(52,211,153,.2);border-color:rgba(52,211,153,.4)}
    .sc-pill.warn{background:rgba(251,191,36,.2);border-color:rgba(251,191,36,.4)}
    .sc-pill.bad{background:rgba(248,113,113,.2);border-color:rgba(248,113,113,.4)}
    /* Analysis cards */
    .analysis-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
    @media(max-width:540px){.analysis-grid{grid-template-columns:1fr}}
    .an-card{background:#fff;border-radius:18px;border:1.5px solid var(--border2);padding:18px 18px 14px;box-shadow:0 2px 12px rgba(124,58,237,.05)}
    .an-card-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px;display:flex;align-items:center;gap:7px}
    .an-item{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--txt);line-height:1.5;margin-bottom:9px}
    .an-item:last-child{margin-bottom:0}
    /* Detail-on-demand: keep the default read short and scannable, let anyone
       who wants the fuller AI explanation tap to expand it — not everyone
       wants to read a full technical breakdown up front. */
    .detail-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
    .detail-clamp.expanded{-webkit-line-clamp:unset;display:block}
    .detail-clamp-hint{font-size:10.5px;font-weight:700;color:#7c3aed;margin-top:2px;opacity:.85;cursor:pointer}
    .detail-clamp.expanded + .detail-clamp-hint{display:none}
    .an-ico{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
    .an-ico.grn{background:#dcfce7;color:#16a34a}
    .an-ico.red{background:#fee2e2;color:#dc2626}
    .an-ico.pur{background:#ede9fe;color:#7c3aed;font-size:9px;font-weight:900}
    .an-ico.ora{background:#fff7ed;color:#ea580c}
    /* Extracted card */
    .extracted-card{background:#fff;border-radius:18px;border:1.5px solid var(--border2);padding:18px;margin-bottom:14px;box-shadow:0 2px 12px rgba(124,58,237,.05)}
    .ext-row{display:flex;gap:10px;margin-bottom:8px;align-items:flex-start}
    .ext-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--mute);min-width:60px;padding-top:2px;flex-shrink:0}
    .ext-val{font-size:13px;color:var(--txt);font-weight:500;flex:1;word-break:break-word}
    .ext-skills{display:flex;flex-wrap:wrap;gap:5px}
    .ext-skill{background:#ede9fe;color:var(--p);padding:2px 9px;border-radius:99px;font-size:10px;font-weight:600}
    /* Action buttons */
    .analysis-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
    @media(max-width:440px){.analysis-actions{grid-template-columns:1fr}}
    .aa-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 18px;border-radius:14px;font-size:14px;font-weight:800;border:none;cursor:pointer;transition:all .2s;font-family:inherit}
    .aa-btn-pri{background:var(--g);color:#fff;box-shadow:0 4px 18px rgba(124,58,237,.3)}
    .aa-btn-pri:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(124,58,237,.4)}
    .aa-btn-sec{background:#fff;color:var(--p);border:2px solid var(--border2)}
    .aa-btn-sec:hover{background:#faf5ff;border-color:var(--p2);transform:translateY(-1px)}

    /* ══ KIE SIDEBAR ══════════════════════════════════════════════════════════ */
    .kie-sidebar-overlay{position:fixed;inset:0;background:rgba(10,8,20,.52);z-index:600;display:none;backdrop-filter:blur(3px)}
    .kie-sidebar-overlay.open{display:block;animation:fadeIn .18s ease}
    /* ── KIE SIDEBAR — see new light styles above ── */

    /* 3-dot context menu */
    .ksb-ctx{position:fixed;background:#fff;border:1.5px solid #ede9fe;border-radius:12px;box-shadow:0 8px 32px rgba(124,58,237,.16);overflow:hidden;z-index:700;min-width:160px;display:none}
    .ksb-ctx.open{display:block;animation:fadeIn .12s ease}
    .ksb-ctx-item{display:flex;align-items:center;gap:9px;padding:11px 15px;font-size:13px;font-weight:600;color:#374151;cursor:pointer;transition:background .12s;border:none;background:none;width:100%;font-family:inherit;text-align:left}
    .ksb-ctx-item:hover{background:#faf5ff;color:var(--p)}
    .ksb-ctx-item.danger{color:#e11d48}
    .ksb-ctx-item.danger:hover{background:#fff1f2;color:#e11d48}

    /* ── KIE HEADER UPGRADES ─────────────────────────────────────────────────── */
    /* Hamburger in KIE header — circular outlined chip button */
    .kie-hbg{width:42px;height:42px;background:#fff;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s;flex-shrink:0;padding:0;box-shadow:0 3px 14px rgba(15,14,23,.13)}
    .kie-hbg:hover{background:#faf8ff;box-shadow:0 3px 13px rgba(124,58,237,.18)}
    .kie-hbg:active{transform:scale(.92)}
    .kie-hbg svg line{stroke:#6b6b80;stroke-width:2.2;stroke-linecap:round;transition:all .22s cubic-bezier(.4,0,.2,1)}
    /* Home icon button — circular outlined chip button */
    .kie-home-pill{width:37px;height:37px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:50%;color:#8b7cb8;cursor:pointer;transition:all .18s;flex-shrink:0;padding:0;box-shadow:none}
    .kie-home-pill:hover{background:#f3ecff;color:var(--p)}
    .kie-home-pill:active{transform:scale(.9)}

    /* ── TOOL CATEGORY SWIPERS ─────────────────────────────────────────────── */
    .kie-toolswiper-section{padding:0 0 6px;flex-shrink:0}
    .kie-toolswiper-label{font-size:9px;font-weight:900;color:rgba(124,58,237,.6);text-transform:uppercase;letter-spacing:1px;padding:0 16px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
    .kie-toolswiper-label::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--p);opacity:.5}
    .kie-toolswiper-outer{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 16px 6px;cursor:grab}
    .kie-toolswiper-outer::-webkit-scrollbar{display:none}
    .kie-toolswiper-outer:active{cursor:grabbing}
    .kie-toolswiper-track{display:flex;gap:9px;width:max-content}

    /* Tool card for swiper */
    .kie-tswipe-card{background:#fff;border:1.5px solid #eeeef5;border-radius:16px;padding:12px 11px;text-align:left;cursor:pointer;transition:all .2s;width:130px;flex-shrink:0;display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(0,0,0,.04);font-family:inherit;border-top-width:3px}
    .kie-tswipe-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(124,58,237,.13)}
    .kie-tswipe-card:active{transform:scale(.97)}
    .kie-tswipe-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;font-size:17px;flex-shrink:0}
    .kie-tswipe-name{font-size:11.5px;font-weight:800;color:#1a1a2e;line-height:1.3;margin-bottom:2px}
    .kie-tswipe-sub{font-size:9.5px;color:#8b8b9e;font-weight:400;line-height:1.4}

    /* New chat icon — hidden by default, shown once there's an active
       conversation to reset (see showPlusFab() in dashboard-kie-sidebar.js) */
    .kie-newchat-btn{display:none;align-items:center;justify-content:center;width:37px;height:37px;background:transparent;border:none;border-radius:50%;cursor:pointer;color:#8b7cb8;transition:all .18s;flex-shrink:0;box-shadow:none}
    .kie-newchat-btn.show{display:flex;animation:fabIn .2s ease}
    .kie-newchat-btn:hover{background:#f3ecff;color:var(--p)}
    .kie-newchat-btn:active{transform:scale(.9)}
    @keyframes fabIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}

    /* Template/resume picker icon — same chip style, plus an "active resume" dot */
    .kie-tpl-btn{position:relative;width:37px;height:37px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:50%;color:#8b7cb8;cursor:pointer;transition:all .18s;flex-shrink:0;padding:0;box-shadow:none}
    .kie-tpl-btn:hover{background:#f3ecff;color:var(--p)}
    .kie-tpl-btn:active{transform:scale(.9)}
    .kie-tpl-btn.open{background:#ede9fe;color:var(--p)}
    .kie-tpl-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--p);border:1.5px solid #fff;display:none}
    .kie-tpl-dot.on{display:block}

    /* ── MODEL DRAWER ───────────────────────────────────────────── */
    #kieModelDrawer{position:fixed;inset:0;z-index:800;display:none}
    #kieModelDrawer.open{display:block}
    #kieSourcesDrawer{position:fixed;inset:0;z-index:800;display:none}
    #kieSourcesDrawer.open{display:block}
    #kieAttachSheet{position:fixed;inset:0;z-index:800;display:none}
    #kieAttachSheet.open{display:block}
    #kieShareDrawer{position:fixed;inset:0;z-index:800;display:none}
    #kieShareDrawer.open{display:block}
    .kas-ico{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:linear-gradient(135deg,#ede9fe,#ddd6fe);margin-right:2px}
    .kmd-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
    .kmd-sheet{position:absolute;bottom:0;left:0;right:0;background:#fff;border-radius:20px 20px 0 0;padding:0 0 36px;max-height:70vh;overflow-y:auto;box-shadow:0 -8px 40px rgba(0,0,0,.12);transform:translateY(100%);transition:transform .32s cubic-bezier(.32,.72,0,1)}
    #kieModelDrawer.open .kmd-sheet{transform:translateY(0)}
    #kieSourcesDrawer.open .kmd-sheet{transform:translateY(0)}
    #kieAttachSheet.open .kmd-sheet{transform:translateY(0)}
    #kieShareDrawer.open .kmd-sheet{transform:translateY(0)}
    .kmd-handle{width:36px;height:4px;background:#e2e8f0;border-radius:99px;margin:14px auto 18px}

    /* ── GOOGLE DRIVE PICKER — OVERLAY WRAPPER ─────────────────────
       Google's Picker widget is mostly a locked iframe (the actual file
       browser inside can't be restyled), but the OUTER dialog/backdrop
       chrome around it is plain DOM that Google injects into our page —
       so we can still reshape *that* to stop it going edge-to-edge and
       make it feel like one of our own drawers instead of a bare Google
       widget. Google sets some of this via inline style, so !important
       is required to win. Unsupported/undocumented class names — if a
       future Google Picker version renames them, this block silently
       stops applying (safe no-op, picker still works, just unstyled). */
    .picker-dialog-bg{
      background:rgba(15,14,23,.55) !important;
      -webkit-backdrop-filter:blur(3px);
      backdrop-filter:blur(3px);
    }
    .picker-dialog{
      border:none !important;
      border-radius:20px !important;
      box-shadow:0 -8px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04) !important;
      overflow:hidden !important;
      top:auto !important;
      bottom:16px !important;
      left:50% !important;
      transform:translateX(-50%) !important;
      width:min(94vw,560px) !important;
      max-width:560px !important;
      height:min(78vh,640px) !important;
      max-height:78vh !important;
    }
    @media (max-width:640px){
      .picker-dialog{
        bottom:0 !important;
        left:0 !important;
        right:0 !important;
        transform:none !important;
        width:100% !important;
        max-width:100% !important;
        border-radius:20px 20px 0 0 !important;
        padding-bottom:env(safe-area-inset-bottom) !important;
        height:min(85vh,640px) !important;
        max-height:85vh !important;
      }
    }

    .kmd-hdr-inner{padding:0 20px 14px;border-bottom:1px solid #f1f5f9}
    .kmd-title{font-size:16px;font-weight:800;color:#0f0e17;letter-spacing:-.3px}
    .kmd-sub{display:none}
    .kmd-list{padding:10px 16px 0;display:flex;flex-direction:column;gap:2px}
    .kmd-note{display:none}

    /* Share drawer — row of round app icons, matches the reference share
       sheet layout (icon circle + label underneath), horizontally scrollable
       so it doesn't wrap awkwardly if more targets get added later. Bottom
       padding respects safe-area-inset so it clears the home-indicator on
       notched phones, same as the rest of the dashboard's sheets. */
    .kie-share-row{display:flex;gap:6px;padding:18px 14px calc(4px + env(safe-area-inset-bottom,0px));overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .kie-share-row::-webkit-scrollbar{display:none}
    #kieRecentFilesList{scrollbar-width:none}
    #kieRecentFilesList::-webkit-scrollbar{display:none}
    .kie-share-item{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:none;padding:6px 8px;cursor:pointer;flex-shrink:0;width:66px;font-family:inherit}
    .kie-share-item:active .kie-share-ico{transform:scale(.92)}
    .kie-share-ico{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .12s;box-shadow:0 1px 3px rgba(0,0,0,.12)}
    .kie-share-label{font-size:11px;font-weight:600;color:#475569;letter-spacing:-.1px;white-space:nowrap}

    /* Model item */
    .kmd-item{display:flex;align-items:center;justify-content:space-between;padding:14px 12px;background:#fff;border:none;border-radius:0;border-bottom:1px solid #f1f5f9;cursor:pointer;transition:background .14s}
    .kmd-item:last-child{border-bottom:none}
    .kmd-item:hover{background:#faf5ff}
    .kmd-item.active{background:#faf5ff}
    .kmd-item::before{display:none}
    .kmd-item-ico{display:none}
    .kmd-item-body{flex:1;min-width:0}
    .kmd-item-name{font-size:14px;font-weight:700;color:#0f0e17;letter-spacing:-.1px}
    .kmd-badge{display:none}
    .kmd-item-tag{font-size:12px;color:#64748b;margin-top:1px;font-weight:400}
    .kmd-item-mode{display:none}
    .kmd-active-dot{width:8px;height:8px;border-radius:50%;background:#7c3aed;flex-shrink:0}
    .kmd-item.locked{opacity:.78}
    .kmd-item.locked .kmd-item-name{color:#6b7280}
    .kmd-lock-badge,.premium-lock-badge{font-size:10.5px;font-weight:800;color:#7c3aed;background:#f3e8ff;border:1px solid #e9d5ff;padding:3px 9px;border-radius:99px;white-space:nowrap;flex-shrink:0;letter-spacing:.1px}
    /* Generic small lock badge for the corner of any card (tool hub, templates, cover-letter source) */
    .premium-lock-corner{position:absolute;top:10px;right:10px;font-size:10px;font-weight:800;color:#fff;
      background:linear-gradient(135deg,#7c3aed,#a855f7);padding:4px 9px;border-radius:99px;z-index:2;
      display:flex;align-items:center;gap:3px;box-shadow:0 2px 8px rgba(124,58,237,.35)}
    .kmd-trigger{display:inline-flex;align-items:center;gap:5px;background:rgba(15,14,23,.07);border:1px solid rgba(124,58,237,.2);border-radius:20px;padding:5px 10px 5px 8px;cursor:pointer;transition:all .18s;font-family:inherit;flex-shrink:0;margin-left:2px}
    .kmd-trigger:hover{background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.35)}
    .kmd-trigger span{font-size:11px;font-weight:700;padding:2px 7px;border-radius:99px;color:#0f0e17}
    .kmd-item{display:flex;align-items:center;justify-content:space-between;padding:14px 12px;background:#fff;border:none;border-radius:0;border-bottom:1px solid #f1f5f9;cursor:pointer;transition:background .14s}
    .kmd-item:last-child{border-bottom:none}
    .kmd-item:hover{background:#faf5ff}
    .kmd-item.active{background:#faf5ff}
    .kmd-item::before{display:none}
    .kmd-item-ico{display:none}
    .kmd-item-body{flex:1;min-width:0}
    .kmd-item-name{font-size:14px;font-weight:700;color:#0f0e17;letter-spacing:-.1px}
    .kmd-badge{display:none}
    .kmd-item-tag{font-size:12px;color:#64748b;margin-top:1px;font-weight:400}
    .kmd-item-mode{display:none}
    .kmd-active-dot{width:8px;height:8px;border-radius:50%;background:#7c3aed;flex-shrink:0}
    .kmd-item.locked{opacity:.78}
    .kmd-item.locked .kmd-item-name{color:#6b7280}
    .kmd-lock-badge,.premium-lock-badge{font-size:10.5px;font-weight:800;color:#7c3aed;background:#f3e8ff;border:1px solid #e9d5ff;padding:3px 9px;border-radius:99px;white-space:nowrap;flex-shrink:0;letter-spacing:.1px}
    /* Generic small lock badge for the corner of any card (tool hub, templates, cover-letter source) */
    .premium-lock-corner{position:absolute;top:10px;right:10px;font-size:10px;font-weight:800;color:#fff;
      background:linear-gradient(135deg,#7c3aed,#a855f7);padding:4px 9px;border-radius:99px;z-index:2;
      display:flex;align-items:center;gap:3px;box-shadow:0 2px 8px rgba(124,58,237,.35)}
    .kmd-trigger{display:inline-flex;align-items:center;gap:5px;background:rgba(15,14,23,.07);border:1px solid rgba(124,58,237,.2);border-radius:20px;padding:5px 10px 5px 8px;cursor:pointer;transition:all .18s;font-family:inherit;flex-shrink:0;margin-left:2px}
    .kmd-trigger:hover{background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.35)}
    .kmd-trigger span{font-size:11px;font-weight:700;padding:2px 7px;border-radius:99px;color:#0f0e17}

    /* ── TOOL SCREEN BACK + EXTRA ACTIONS ─────────────────────────────────── */
    .ctool-kie-bar{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
    .ctool-kie-ask{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;background:linear-gradient(135deg,#1e0845,#3b1a7a);border:1px solid rgba(168,85,247,.3);border-radius:12px;font-size:12.5px;font-weight:700;color:#ddc8ff;cursor:pointer;transition:all .18s;font-family:inherit;white-space:nowrap}
    .ctool-kie-ask:hover{background:linear-gradient(135deg,#2d0e6a,#4c22a0);border-color:rgba(168,85,247,.5);transform:translateY(-1px);color:#ede0ff}
    .ctool-articles-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;background:#f5f3ff;border:1.5px solid var(--border2);border-radius:12px;font-size:12.5px;font-weight:700;color:var(--p);cursor:pointer;transition:all .18s;font-family:inherit;white-space:nowrap;text-decoration:none}
    .ctool-articles-btn:hover{background:#ede9fe;border-color:var(--p2);transform:translateY(-1px)}
    .ctool-jobs-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:12px;font-size:12.5px;font-weight:700;color:#059669;cursor:pointer;transition:all .18s;font-family:inherit;white-space:nowrap;text-decoration:none}
    .ctool-jobs-btn:hover{background:#dcfce7;border-color:#86efac;transform:translateY(-1px)}

    /* Rename modal */
    .ksb-rename-modal{position:fixed;inset:0;background:rgba(10,8,20,.7);z-index:710;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px)}
    .ksb-rename-modal.open{display:flex;animation:fadeIn .15s ease}
    .ksb-rename-box{background:#1a1130;border:1px solid rgba(124,58,237,.3);border-radius:20px;padding:24px;width:100%;max-width:340px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
    .ksb-rename-title{font-size:17px;font-weight:900;color:#fff;margin-bottom:14px;letter-spacing:-.3px}
    .ksb-rename-input{width:100%;padding:12px 14px;background:rgba(255,255,255,.07);border:1.5px solid rgba(124,58,237,.25);border-radius:12px;font-size:14px;color:#fff;font-family:inherit;outline:none;transition:border-color .15s;box-sizing:border-box}
    .ksb-rename-input:focus{border-color:rgba(168,85,247,.6);background:rgba(255,255,255,.09)}
    .ksb-rename-input::placeholder{color:rgba(148,163,184,.45)}
    .ksb-rename-btns{display:flex;gap:10px;margin-top:16px}
    .ksb-rename-cancel{flex:1;padding:11px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:11px;color:rgba(255,255,255,.7);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s}
    .ksb-rename-cancel:hover{background:rgba(255,255,255,.12)}
    .ksb-rename-save{flex:2;padding:11px;background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;border-radius:11px;color:#fff;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;transition:all .15s;box-shadow:0 3px 12px rgba(124,58,237,.3)}
    .ksb-rename-save:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(124,58,237,.45)}


/* ───────────────────────────────────────────────────────────── */

    @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

    /* ── KIE MODEL DRAWER — overridden by main style block; kept for animation only ── */
    @keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
    .kmd-sheet{animation:slideUp .32s cubic-bezier(.32,.72,0,1)}
    /* Sources button in actions bar */
    .km-act-sep{width:1px;height:14px;background:#e2e8f0;margin:0 2px;flex-shrink:0}
    .kie-sources-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:8px;font-family:inherit;font-size:11.5px;font-weight:600;color:#64748b;transition:background .14s;white-space:nowrap}
    .kie-sources-btn:hover{background:#f1f5f9;color:#0f172a}
    .kie-src-fav-sm{border-radius:3px;object-fit:contain;flex-shrink:0;margin-left:-3px}
    .kie-src-fav-sm:first-child{margin-left:0}
    .kie-src-label{margin-left:3px}
    /* Sources drawer rows */
    .kie-src-row{display:flex;align-items:center;gap:10px;padding:12px;text-decoration:none;border-bottom:1px solid #f1f5f9}
    .kie-src-row:last-child{border-bottom:none}
    .kie-src-row:hover{background:#faf5ff}
    .kie-src-fav{border-radius:4px;flex-shrink:0;object-fit:contain}


    /* ── CAREER HUB & TOOL VIEWS — SHARED ── */
    body.ctool-mode .hdr{display:none}
    .ctool-hdr{display:flex;align-items:center;padding:0 12px;height:60px;border-bottom:1px solid var(--border2);position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:100;box-shadow:0 1px 12px rgba(124,58,237,.06)}
    .ctool-hdr-back{width:40px;height:40px;background:transparent;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;color:#0f0e17;border-radius:50%;transition:background .15s;flex-shrink:0}
    .ctool-hdr-back:hover{background:rgba(124,58,237,.07)}
    .ctool-hdr-back:active{background:rgba(124,58,237,.13)}
    .ctool-hdr-title-center{position:absolute;left:50%;transform:translateX(-50%);font-size:16px;font-weight:800;color:var(--txt);letter-spacing:-.3px;white-space:nowrap}
    /* Hide the old ico and sub elements */
    .ctool-hdr-ico{display:none}
    .ctool-hdr>div>div:last-child{display:none}
    .ctool-body{padding:18px;padding-top:74px;padding-bottom:80px}
    .ctool-card{background:#fff;border-radius:16px;border:1.5px solid var(--border2);padding:18px;margin-bottom:14px;box-shadow:0 2px 16px rgba(124,58,237,.05)}
    .ctool-label{font-size:11px;font-weight:800;color:var(--mute);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:6px}
    .ctool-input{width:100%;padding:12px 14px;border:1.5px solid var(--border2);border-radius:12px;font-size:14px;font-family:inherit;color:var(--txt);background:#fafafa;outline:none;box-sizing:border-box;transition:border-color .15s}
    .ctool-input:focus{border-color:var(--p)}
    .ctool-textarea{width:100%;padding:12px 14px;border:1.5px solid var(--border2);border-radius:12px;font-size:13px;font-family:inherit;color:var(--txt);background:#fafafa;outline:none;resize:vertical;min-height:90px;box-sizing:border-box;transition:border-color .15s}
    .ctool-textarea:focus{border-color:var(--p)}
    .ctool-select{width:100%;padding:12px 14px;border:1.5px solid var(--border2);border-radius:12px;font-size:14px;font-family:inherit;color:var(--txt);background:#fafafa;outline:none;appearance:none;box-sizing:border-box;cursor:pointer}
    .ctool-select:focus{border-color:var(--p)}
    .ctool-btn{width:100%;padding:14px 20px;font-size:14px;font-weight:800;background:var(--g);color:#fff;border:none;border-radius:14px;cursor:pointer;font-family:inherit;box-shadow:0 4px 18px rgba(124,58,237,.22);transition:opacity .15s;display:flex;align-items:center;justify-content:center;gap:8px}
    .ctool-btn:hover{opacity:.9}
    .ctool-btn:disabled{opacity:.5;cursor:not-allowed}
    .ctool-chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
    .ctool-chip{padding:5px 12px;background:#f5f3ff;color:var(--p);border:1px solid var(--p2);border-radius:99px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s}
    .ctool-chip:hover{background:#ede9fe}

    /* ═══ New tool-screen system: hero card + icon-field rows + pill row +
       feature grid + results-on-its-own-screen. Shared by every AI career
       tool so they all feel like one consistent product, not 12 one-off
       forms. Themed per-tool via --tc (accent) and --tt (tint) custom
       properties set inline on .ctool-hero / .ctool-field-ico / etc. ═══ */
    .ctool-hero{border-radius:20px;padding:22px 18px;margin-bottom:16px;display:flex;align-items:center;gap:16px;position:relative;overflow:hidden;background:linear-gradient(160deg,var(--tt,#f5f3ff),#fff)}
    .ctool-hero-art{flex-shrink:0;width:88px;height:88px;position:relative;display:flex;align-items:center;justify-content:center}
    .ctool-hero-sparkle{position:absolute;pointer-events:none}
    .ctool-hero-body{flex:1;min-width:0;position:relative;z-index:2}
    .ctool-hero-title{font-size:16.5px;font-weight:900;color:var(--txt);margin-bottom:6px;line-height:1.28}
    .ctool-hero-sub{font-size:12px;color:var(--sub);line-height:1.5}

    .ctool-field{display:flex;align-items:flex-start;gap:12px}
    .ctool-field + .ctool-field{margin-top:16px;padding-top:16px;border-top:1px solid var(--border2)}
    .ctool-field-ico{width:38px;height:38px;border-radius:50%;background:var(--tt,#f5f3ff);color:var(--tc,var(--p));display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .ctool-field-main{flex:1;min-width:0}
    .ctool-field-label{font-size:10.5px;font-weight:800;color:var(--tc,var(--p));text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}

    .ctool-pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
    .ctool-pill{padding:9px 15px;background:#fff;color:var(--tc,var(--p));border:1.5px solid var(--border2);border-radius:99px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s}
    .ctool-pill.active{background:var(--tc,var(--p));color:#fff;border-color:var(--tc,var(--p));box-shadow:0 4px 12px rgba(0,0,0,.16)}
    .ctool-field-hint{font-size:11.5px;color:var(--sub);margin-top:10px;line-height:1.5}

    .ctool-feat-grid{background:#f8f7ff;border-radius:18px;padding:18px 8px;margin-bottom:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px 4px}
    .ctool-feat{text-align:center}
    .ctool-feat-ico{width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(15,14,23,.08);display:flex;align-items:center;justify-content:center;margin:0 auto 7px;color:var(--tc,var(--p))}
    .ctool-feat-title{font-size:11px;font-weight:800;color:var(--txt);margin-bottom:3px;line-height:1.2}
    .ctool-feat-desc{font-size:9.5px;color:var(--sub);line-height:1.35}

    /* Results screen — a second full header+body pair inside the same
       .view, toggled with the form pair so results genuinely replace the
       screen (with their own back button to the form) instead of just
       unhiding a div under the form. */
    .ctool-results-hdr{display:none}
    .ctool-results-hdr.active{display:flex}
    .ctool-results-body{display:none}
    .ctool-results-body.active{display:block}
    .ctool-chip.active{background:var(--p);color:#fff}
    .ctool-result-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px}
    .ctool-result-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .ctool-result-title{font-size:15px;font-weight:900;color:var(--txt)}
    .ctool-result-sub{font-size:11px;color:var(--sub);margin-top:2px}
    .ctool-tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:700}
    .ctool-divider{height:1px;background:var(--border2);margin:14px 0}
    .ctool-list-item{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-bottom:1px solid #f1f5f9}
    .ctool-list-item:last-child{border-bottom:none}
    .ctool-list-dot{width:6px;height:6px;border-radius:50%;background:var(--p);margin-top:6px;flex-shrink:0}
    .ctool-list-txt{font-size:13px;color:var(--txt);line-height:1.5}

    /* ── CAREER HUB ── */
    /* ── KIE ECOSYSTEM HUB ── */
    .hub-eco-hdr{background:linear-gradient(150deg,#0a011f 0%,#1e0845 45%,#2d0f6b 100%);padding:0 0 20px;position:relative;overflow:hidden}
    .hub-eco-hdr::before{content:'';position:absolute;top:-60px;right:-50px;width:200px;height:200px;background:radial-gradient(circle,rgba(168,85,247,.22) 0%,transparent 65%);pointer-events:none}
    .hub-eco-hdr::after{content:'';position:absolute;bottom:-30px;left:-20px;width:140px;height:140px;background:radial-gradient(circle,rgba(124,58,237,.15) 0%,transparent 65%);pointer-events:none}
    .hub-eco-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 0;position:relative;z-index:2}
    .hub-eco-back-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:none;border-radius:50%;color:#fff;cursor:pointer;font-family:inherit;transition:background .15s;flex-shrink:0;padding:0}
    .hub-eco-back-btn:hover{background:rgba(255,255,255,.18)}
    .hub-eco-back-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.25)}
    .hub-eco-body{padding:18px 16px 0;position:relative;z-index:2}
    .hub-eco-brand{display:flex;align-items:center;gap:11px;margin-bottom:10px}
    .hub-eco-av{width:44px;height:44px;background:linear-gradient(135deg,#7c3aed,#a855f7);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#fff;box-shadow:0 4px 18px rgba(124,58,237,.45);letter-spacing:-.5px;flex-shrink:0;overflow:hidden}
    .hub-eco-av img{width:100%;height:100%;object-fit:cover;border-radius:12px}
    .hub-eco-eyebrow{font-size:9px;font-weight:800;color:#a78bfa;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:3px}
    .hub-eco-title{font-size:20px;font-weight:900;color:#fff;letter-spacing:-.4px;line-height:1.1}
    .hub-eco-tagline{font-size:12.5px;color:#c4b5fd;line-height:1.5;margin-bottom:14px}
    .hub-eco-pills{display:flex;gap:7px;flex-wrap:wrap}
    .hub-eco-pill{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:4px 10px;font-size:10.5px;font-weight:700;color:#e9d5ff;display:flex;align-items:center;gap:4px;white-space:nowrap}
    /* KIE chat CTA banner */
    .hub-kie-cta{margin:16px 16px 0;background:rgba(124,58,237,.15);border:1.5px solid rgba(168,85,247,.3);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .18s;position:relative;z-index:2}
    .hub-kie-cta:hover{background:rgba(124,58,237,.22);border-color:rgba(168,85,247,.5)}
    .hub-kie-cta-ico{width:34px;height:34px;background:linear-gradient(135deg,#7c3aed,#a855f7);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 12px rgba(124,58,237,.4)}
    .hub-kie-cta-txt{flex:1;min-width:0}
    .hub-kie-cta-title{font-size:13px;font-weight:800;color:#fff;margin-bottom:1px}
    .hub-kie-cta-sub{font-size:11px;color:#a78bfa}
    /* Grid */
    .hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px 80px}
    .hub-card{background:#fff;border-radius:16px;border:1.5px solid var(--border2);padding:0;cursor:pointer;transition:all .18s;overflow:hidden;box-shadow:0 2px 10px rgba(124,58,237,.05);position:relative}
    .hub-card:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(124,58,237,.14)}
    /* Locked cards stay just as bright as unlocked ones — the Premium badge
       alone communicates the lock, not a dimmed/grayscaled card. */
    .hub-card-top{padding:14px 12px 10px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
    .hub-card-ico-wrap{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
    .hub-card-name{font-size:13px;font-weight:800;color:var(--txt);letter-spacing:-.2px;line-height:1.2}
    .hub-card-sub{font-size:10.5px;color:var(--sub);line-height:1.35}
    .hub-card-foot{padding:8px 12px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f3f0ff}
    .hub-card-kie-tag{font-size:9.5px;font-weight:800;color:var(--p);letter-spacing:.3px;text-transform:uppercase;display:flex;align-items:center;gap:3px}
    .hub-card-arr{color:var(--p);opacity:.5}
    /* hub banner (kept for home screen usage) */
    .hub-banner{background:linear-gradient(135deg,#1e0845,#3b1a7a);border-radius:18px;margin:18px 18px 0;padding:20px 18px;color:#fff;position:relative;overflow:hidden}
    .hub-banner::before{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;background:rgba(168,85,247,.3);border-radius:50%}

    /* ── SCORE RING (AI tool cards — Career Health, Job Match, Promotion
       Readiness, etc.) ──
       BUG FIX: this used to be named .score-ring-wrap, same as the class
       used by the Analyze-tool hero section above (line ~1859). Both rules
       applied together (CSS merges non-conflicting properties across same-
       specificity rules), which meant this class ended up fighting the other
       one's position:relative/width:92px/height:92px against its own
       flex-column/no-fixed-size layout — even though these tool cards
       actually draw a 120px SVG ring, not a 92px one. That mismatch is what
       let the score number/grade drift outside the card and overlap
       whatever was above it (the "Analyze" button, in the reported case).
       Renamed to avoid the collision, sized to match the real 120px ring,
       and paired with .score-ring-overlay-tool below (an absolute-position
       overlay, the same reliable technique the Analyze-hero ring already
       uses) instead of the old inline margin-top:-88px hack, which only
       ever centered correctly by coincidence and broke the moment anything
       about the surrounding layout shifted. */
    .score-ring-wrap-tool{position:relative;width:120px;height:120px;margin:0 auto 8px}
    .score-ring-svg{transform:rotate(-90deg)}
    .score-ring-overlay-tool{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
    .score-ring-val{font-size:32px;font-weight:900;color:var(--txt);letter-spacing:-1px}
    .score-ring-label{font-size:12px;color:var(--sub);margin-top:2px;text-align:center}
    .score-breakdown-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
    .score-breakdown-label{font-size:12px;font-weight:700;color:var(--txt);width:110px;flex-shrink:0}
    .score-breakdown-bar-wrap{flex:1;height:8px;background:#f1f5f9;border-radius:99px;overflow:hidden}
    .score-breakdown-bar{height:100%;border-radius:99px;transition:width .8s ease}
    .score-breakdown-num{font-size:11px;font-weight:800;color:var(--sub);width:28px;text-align:right;flex-shrink:0}

    /* ── SALARY RANGE BAR ── */
    .salary-range-track{position:relative;height:12px;background:#f1f5f9;border-radius:99px;margin:18px 0 28px}
    .salary-range-fill{position:absolute;top:0;height:100%;border-radius:99px;background:var(--g)}
    .salary-range-mid{position:absolute;top:-3px;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--p);transform:translateX(-50%)}
    .salary-range-labels{display:flex;justify-content:space-between;margin-top:6px}
    .salary-label{font-size:10px;font-weight:800;color:var(--sub)}

    /* ── ROADMAP PHASES ── */
    .roadmap-phase{background:#fff;border-radius:14px;border:1.5px solid var(--border2);padding:14px;margin-bottom:10px;position:relative;padding-left:18px}
    .roadmap-phase::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px;background:var(--g)}
    .roadmap-phase-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
    .roadmap-phase-label{font-size:13px;font-weight:800;color:var(--txt)}
    .roadmap-phase-dur{font-size:10px;font-weight:700;color:var(--p);background:#f5f3ff;padding:2px 8px;border-radius:99px}
    .roadmap-phase-focus{font-size:11px;color:var(--sub);margin-bottom:10px}
    .roadmap-mini-list{list-style:none;padding:0;margin:0}
    .roadmap-mini-list li{font-size:12px;color:var(--txt);padding:3px 0 3px 14px;position:relative;line-height:1.4}
    .roadmap-mini-list li::before{content:'→';position:absolute;left:0;color:var(--p);font-size:10px}

    /* ── INTERVIEW VIEW ── */
    .iv-question-card{background:linear-gradient(135deg,#1e0845,#3b1a7a);border-radius:16px;padding:18px;color:#e9d5ff;margin-bottom:14px}
    .iv-question-type{font-size:10px;font-weight:800;color:#a78bfa;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
    .iv-question-txt{font-size:15px;font-weight:700;color:#fff;line-height:1.5;margin-bottom:12px}
    .iv-tips-row{display:flex;flex-wrap:wrap;gap:6px}
    .iv-tip{font-size:10px;font-weight:700;color:#c4b5fd;background:rgba(167,139,250,.2);padding:3px 8px;border-radius:99px}
    .iv-score-badge{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;flex-shrink:0;color:#fff}
    .iv-feedback-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid #f1f5f9}
    .iv-feedback-row:last-child{border-bottom:none}

    /* ── PROMPT RESUME ── */
    .pr-example-chip{display:inline-flex;align-items:center;padding:6px 12px;background:#f5f3ff;border:1px solid var(--p2);color:var(--p);border-radius:99px;font-size:11px;font-weight:700;cursor:pointer;margin:0 4px 6px 0;font-family:inherit;transition:background .15s}
    .pr-example-chip:hover{background:#ede9fe}
    .pr-result-preview{background:#fff;border-radius:14px;border:1.5px solid var(--border2);padding:16px;box-shadow:0 2px 16px rgba(124,58,237,.06)}
    .pr-field{margin-bottom:10px}
    .pr-field-label{font-size:10px;font-weight:800;color:var(--mute);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
    .pr-field-val{font-size:13px;color:var(--txt);line-height:1.5}

    /* ── PHOTO NOT SUPPORTED MODAL ── */
    #photoUnsupportedModal{
      display:none;position:fixed;inset:0;z-index:500;
      background:rgba(15,14,23,.58);align-items:center;
      justify-content:center;padding:20px;backdrop-filter:blur(6px);
      animation:fadeIn .2s ease;
    }
    #photoUnsupportedModal.open{display:flex}
    .pum-box{
      background:#fff;border-radius:22px;max-width:360px;width:100%;
      padding:32px 28px;box-shadow:0 24px 80px rgba(124,58,237,.22);
      border:1.5px solid var(--border);text-align:center;
      animation:fadeUp .22s ease;
    }
    .pum-ico{
      width:60px;height:60px;background:linear-gradient(135deg,#ede9fe,#ddd6fe);
      border-radius:18px;display:flex;align-items:center;justify-content:center;
      margin:0 auto 18px;font-size:28px;
    }
    .pum-title{font-size:18px;font-weight:900;color:var(--txt);margin-bottom:8px;letter-spacing:-.3px}
    .pum-sub{font-size:14px;color:var(--sub);line-height:1.6;margin-bottom:22px}
    .pum-tpls{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:22px}
    .pum-tpl-tag{
      background:#f5f3ff;color:var(--p);border:1.5px solid var(--border2);
      border-radius:99px;padding:4px 12px;font-size:11px;font-weight:700;
    }
    .pum-btns{display:flex;gap:10px;flex-direction:column}
    .pum-btn-ok{
      width:100%;background:var(--g);color:#fff;border:none;border-radius:12px;
      padding:13px;font-size:14px;font-weight:800;cursor:pointer;
      box-shadow:0 3px 12px rgba(124,58,237,.3);transition:all .2s;font-family:inherit;
    }
    .pum-btn-ok:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(124,58,237,.4)}
    .pum-btn-switch{
      width:100%;background:#f5f3ff;color:var(--p);border:1.5px solid var(--border2);
      border-radius:12px;padding:11px;font-size:13px;font-weight:700;cursor:pointer;
      transition:background .15s;font-family:inherit;
    }
    .pum-btn-switch:hover{background:#ede9fe;border-color:var(--p2)}


/* ───────────────────────────────────────────────────────────── */

    /* Funnel stats — no longer boxed; lives inside the unified overview card,
       so it reads as one continuous surface with the stat row above it
       rather than a card nested inside a card. */
    .gpipe-funnel{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0}
    .gpipe-funnel-seg{text-align:center;padding:0 8px}
    .gpipe-funnel-seg:first-child{border-right:.5px solid rgba(60,60,67,.13)}
    .gpipe-funnel-pct{font-size:20px;font-weight:800;color:#7c3aed;line-height:1;letter-spacing:-.6px}
    .gpipe-funnel-lbl{font-size:9.5px;color:#94a3b8;font-weight:700;margin-top:4px;text-transform:uppercase;letter-spacing:.5px}
    .gpipe-funnel-bar{height:3px;background:#ede9fe;border-radius:3px;margin-top:9px;overflow:hidden}
    .gpipe-funnel-bar i{display:block;height:100%;background:linear-gradient(90deg,#7c3aed,#a78bfa);border-radius:3px;transition:width .5s cubic-bezier(.4,0,.2,1)}

    /* Urgent banner */
    .gpipe-urgent{display:flex;gap:10px;align-items:flex-start;padding:13px 15px;font-size:12.5px;color:#3c3c43;line-height:1.55;font-weight:600}

    /* Sections */
    .gpipe-section{margin-bottom:18px}
    .gpipe-section-head{font-size:10px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
    .gpipe-section-count{background:#ede9fe;color:#7c3aed;border-radius:20px;padding:2px 8px;font-size:9.5px;font-weight:800}

    /* Application cards */
    .gpipe-card{background:#fff;border:1.5px solid #ede9fe;border-radius:16px;padding:14px 16px;margin-bottom:8px;box-shadow:0 1px 3px rgba(0,0,0,.03);transition:box-shadow .15s}
    .gpipe-card:hover{box-shadow:0 2px 12px rgba(124,58,237,.08)}
    .gpipe-card-co{font-size:14px;font-weight:800;color:#0f0e17;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.2px}
    .gpipe-card-role{font-size:11.5px;font-weight:500;color:#64748b;margin-top:2px}
    .gpipe-card-meta{font-size:11px;color:#94a3b8;margin-top:6px;line-height:1.4}

    /* Action buttons */
    .gpipe-card-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
    .gpipe-btn{flex:1 1 28%;min-width:88px;border:none;border-radius:10px;padding:8px 10px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .12s}
    .gpipe-btn:active{transform:scale(.97)}
    .gpipe-btn-draft{background:#f5f3ff;color:#7c3aed;border:1.5px solid #ddd6fe}
    .gpipe-btn-resume{background:#ecfeff;color:#0e7490;border:1.5px solid #a5f3fc}
    .gpipe-btn-cal{background:#fff7ed;color:#c2410c;border:1.5px solid #fed7aa}
    .gpipe-btn-prep{background:#f0fdf4;color:#15803d;border:1.5px solid #bbf7d0}
    .gpipe-btn-reply{background:#eff6ff;color:#1d4ed8;border:1.5px solid #bfdbfe}

    /* Trend badges */
    .gpipe-trend{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;border-radius:20px;padding:3px 9px;margin-right:6px;margin-bottom:6px}
    .gpipe-trend-up{background:#f0fdf4;color:#15803d;border:1.5px solid #bbf7d0}
    .gpipe-trend-dn{background:#fff1f2;color:#be123c;border:1.5px solid #fecdd3}
    .gpipe-trend-flat{background:#f8fafc;color:#64748b;border:1.5px solid #e2e8f0}

    /* Insights card — one shared shell for urgent/gap/pattern rows. Collapses
       entirely if every row inside is empty, and each row only grows a top
       divider once a prior row actually has content — so 1 insight looks
       like a clean single row, not a lonely card with dead space. */
    .gpipe-insights-card{background:#fff;border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.04);margin-bottom:14px;overflow:hidden}
    .gpipe-insights-card:empty{display:none;box-shadow:none;margin-bottom:0}
    .gpipe-insights-card > *:not(:empty) ~ *:not(:empty){border-top:.5px solid rgba(60,60,67,.08)}
    .gpipe-insight-row{display:flex;gap:10px;align-items:flex-start;padding:13px 15px;font-size:12px;color:#3c3c43;line-height:1.55}
    .gpipe-insight-ico{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
    .gpipe-insight-row b{font-weight:700}

    /* Gap + pattern rows now live inside .gpipe-insights-card as quiet rows */
    .gpipe-gap,.gpipe-pattern{display:flex;gap:10px;align-items:flex-start;padding:13px 15px;font-size:12px;color:#3c3c43;line-height:1.55}

    /* Draft box */
    .gpipe-draft-box{display:none;margin-top:12px;background:#faf8ff;border:1.5px solid #ddd6fe;border-radius:14px;padding:12px}
    .gpipe-draft-box textarea{width:100%;border:1.5px solid #e9e5ff;border-radius:10px;padding:10px;font-size:11.5px;font-family:inherit;color:#374151;background:#fff;resize:vertical;margin-top:8px;line-height:1.5;outline:none}
    .gpipe-draft-box textarea:focus{border-color:#a78bfa}
    .gpipe-draft-gmail{margin-top:10px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;border:none;border-radius:10px;padding:11px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .15s;text-decoration:none}
    .gpipe-draft-gmail:active{opacity:.85}
    .gpipe-draft-gmail img{width:16px;height:16px;object-fit:contain;flex-shrink:0}
    .gpipe-draft-copy{margin-top:8px;width:100%;background:none;border:none;color:#7c3aed;padding:6px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:underline;text-underline-offset:2px}
    .gpipe-draft-copy:active{opacity:.7}

    /* Opt-out + empty */
    .gpipe-optout{font-size:11px;color:#94a3b8;text-align:center;padding:10px 0 4px}
    .gpipe-optout button{background:none;border:none;color:#94a3b8;font-size:11px;cursor:pointer;text-decoration:underline;font-family:inherit}
    .gpipe-empty{text-align:center;padding:28px 16px;color:#94a3b8;font-size:12.5px;line-height:1.6}


/* ───────────────────────────────────────────────────────────── */

@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}


/* ───────────────────────────────────────────────────────────── */

  #jobDetailDrawer{position:fixed;inset:0;z-index:950;pointer-events:none}
  #jobDetailBackdrop{position:absolute;inset:0;background:rgba(15,14,23,.5);backdrop-filter:blur(4px);opacity:0;transition:opacity .28s;pointer-events:none}
  #jobDetailSheet{position:absolute;bottom:0;left:0;right:0;background:#fff;border-radius:24px 24px 0 0;max-height:90vh;overflow-y:auto;transform:translateY(100%);transition:transform .32s cubic-bezier(.32,.72,0,1);padding:0 0 env(safe-area-inset-bottom,16px)}
  #jobDetailDrawer.open{pointer-events:all}
  #jobDetailDrawer.open #jobDetailBackdrop{opacity:1;pointer-events:all}
  #jobDetailDrawer.open #jobDetailSheet{transform:translateY(0)}
  .jd-handle{width:36px;height:4px;background:#e2e8f0;border-radius:2px;margin:12px auto 18px}
  .jd-header{padding:0 20px 16px;border-bottom:1.5px solid #f1f5f9}
  .jd-logo{width:48px;height:48px;border-radius:14px;border:1.5px solid #f1f5f9;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;background:#f8fafc}
  .jd-company{font-size:12px;color:#64748b;font-weight:600;margin-top:4px}
  .jd-title{font-size:17px;font-weight:900;color:#0f0e17;margin-top:4px;letter-spacing:-.3px;line-height:1.25}
  .jd-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .jd-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;background:#f8f7ff;border:1.5px solid #ede9fe;color:#7c3aed;border-radius:20px;padding:4px 10px}
  .jd-pill.green{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
  .jd-pill.yellow{background:#fffbeb;border-color:#fde68a;color:#92400e}
  .jd-pill.blue{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
  .jd-section-title{font-size:10px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
  .jd-desc{font-size:13px;color:#374151;line-height:1.7}
  .jd-desc p{margin:0 0 10px}
  .jd-desc ul,.jd-desc ol{padding-left:18px;margin:0 0 10px}
  .jd-desc li{margin-bottom:4px}
  .jd-desc h1,.jd-desc h2,.jd-desc h3{font-size:13.5px;font-weight:800;color:#0f0e17;margin:12px 0 6px}
  .jd-desc strong,.jd-desc b{font-weight:700;color:#0f0e17}
  .jd-apply{display:block;width:100%;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;border:none;border-radius:14px;padding:16px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;letter-spacing:-.2px;box-shadow:0 4px 16px rgba(124,58,237,.3);transition:opacity .15s;text-decoration:none;text-align:center}
  .jd-apply:active{opacity:.85}
  .jd-apply.locked{background:linear-gradient(135deg,#94a3b8,#64748b);box-shadow:none;cursor:default}
  .jd-source{text-align:center;font-size:10.5px;color:#94a3b8;margin-top:10px}


/* ───────────────────────────────────────────────────────────── */

@keyframes sping{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP LAYOUT (≥900px) — persistent sidebar instead of the
   mobile off-canvas drawer, so the app reads like a real desktop
   product instead of a phone screen stretched wide.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:900px){
  :root{ --dsb-w:252px; }

  /* Sidebar becomes a static column, always visible, no overlay */
  .hbg-btn{display:none}
  .msb-overlay{display:none!important}
  .msb{
    left:0!important;
    transition:none;
    width:var(--dsb-w);
    border-right:1px solid var(--hair-soft);
    box-shadow:none;
  }
  .msb-item{border-radius:10px;margin:1px 10px;width:calc(100% - 20px);padding:10px 12px}
  .msb-item-kie{margin:2px 10px 14px;width:calc(100% - 20px)}
  .msb-section-label{padding:14px 12px 6px}
  .msb-profile{padding:22px 16px 16px}
  .msb-foot{padding-left:6px;padding-right:6px}

  /* Fixed top bars shift right to sit beside the sidebar, not under it */
  .hdr{left:var(--dsb-w)}
  .i-nav{left:var(--dsb-w)}
  .ctool-hdr{left:var(--dsb-w)}
  #v-kie{left:var(--dsb-w)}

  /* Every screen's content gets pushed over so nothing sits under the sidebar */
  .view:not(#v-kie){margin-left:var(--dsb-w)}

  /* Real desktop breathing room instead of a phone-width column stretched wide */
  .home{max-width:1080px;padding:96px 48px 60px}
  .hdr-inner{max-width:1080px;padding:0 48px}
  .i-nav > *{max-width:1080px}
}

@media (min-width:900px) and (max-width:1279px){
  :root{ --dsb-w:216px; }
  .home{padding:96px 32px 60px}
  .hdr-inner{padding:0 32px}
}

/* ═══════════════════════════════════════════════════════════════
   KIE "AI ecosystem" (desktop) — inside KIE, the main dashboard
   sidebar steps aside and KIE's own chat-history sidebar becomes
   the persistent one, same treatment as the main sidebar (no more
   slide-in drawer, no hamburger toggle). Exiting KIE (the Home
   button in its own header) brings the main sidebar back.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:900px){
  :root{ --kie-sb-w:300px; }

  body.kie-mode .msb{display:none}
  body.kie-mode .msb-overlay{display:none!important}

  body.kie-mode .kie-sidebar{
    left:0!important;
    transition:none;
    box-shadow:none;
    border-right:1px solid var(--border2);
  }
  .kie-sidebar-overlay{display:none!important}
  body.kie-mode #kieHamburger{display:none}

  /* KIE starts right after its own docked sidebar instead of the
     main sidebar's offset — the two are mutually exclusive */
  body.kie-mode #v-kie{left:var(--kie-sb-w)}
}