/* =========================================================
   Tailrd: styles
   Themes: a palette sets the accent colours; a mode sets the neutrals.
   <html data-palette="terracotta|ocean|forest|plum|rose" data-mode="light|dark|auto">
   ========================================================= */
:root{
  --mono:'SFMono-Regular',Consolas,Menlo,monospace;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --radius:14px;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* light neutrals */
  --bg:#f6f5f1; --panel:#ffffff; --panel-2:#fbfaf7; --ink:#1a1a1a; --sub:#6b6b6b; --border:#e6e3dc;
  --shadow:0 1px 2px rgba(20,16,10,.05),0 6px 20px -8px rgba(20,16,10,.12);
  --good:#1e7a3d; --good-soft:#dff3e4; --mid:#8a5a10; --mid-soft:#fdf1d8; --bad:#a3302a; --bad-soft:#fbe1df;
  --saved-bg:#e9e8e4; --saved-ink:#4a4a4a; --applied-bg:#dceafb; --applied-ink:#1a5fa8;
  --accent:var(--accent-l);
}
:root[data-mode="dark"]{
  --bg:#141311; --panel:#1d1c19; --panel-2:#232220; --ink:#f0efe9; --sub:#a29e93; --border:#33312c;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -10px rgba(0,0,0,.6);
  --good:#7fd99a; --good-soft:#123a1f; --mid:#f0bd5e; --mid-soft:#3a2c0f; --bad:#f29b93; --bad-soft:#3a1512;
  --saved-bg:#3a3a38; --saved-ink:#c9c9c4; --applied-bg:#12283f; --applied-ink:#7cb3ee;
  --accent:var(--accent-d);
}
@media (prefers-color-scheme: dark){
  :root[data-mode="auto"]{
    --bg:#141311; --panel:#1d1c19; --panel-2:#232220; --ink:#f0efe9; --sub:#a29e93; --border:#33312c;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -10px rgba(0,0,0,.6);
    --good:#7fd99a; --good-soft:#123a1f; --mid:#f0bd5e; --mid-soft:#3a2c0f; --bad:#f29b93; --bad-soft:#3a1512;
    --saved-bg:#3a3a38; --saved-ink:#c9c9c4; --applied-bg:#12283f; --applied-ink:#7cb3ee;
    --accent:var(--accent-d);
  }
}
[data-palette="terracotta"]{ --accent-l:#c15f3c; --accent-d:#e07a52; --accent-2:#e9a23b; }
[data-palette="ocean"]     { --accent-l:#1d6fd8; --accent-d:#5b9cf0; --accent-2:#14b8a6; }
[data-palette="forest"]    { --accent-l:#2f7d4f; --accent-d:#5fbf85; --accent-2:#b8a13a; }
[data-palette="plum"]      { --accent-l:#7446c9; --accent-d:#a482ec; --accent-2:#e0609a; }
[data-palette="rose"]      { --accent-l:#cc3f66; --accent-d:#ee7596; --accent-2:#f29f45; }
:root{
  --accent-soft:color-mix(in srgb, var(--accent) 13%, var(--panel));
  --accent-line:color-mix(in srgb, var(--accent) 35%, var(--border));
  --on-accent:#fff;
}

/* =========================================================
   Base
   ========================================================= */
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;transition:background-color .4s var(--ease),color .4s var(--ease);}
.wrap{max-width:980px;margin:0 auto;padding:22px 18px 40px;}
h1,h2,h3{font-family:var(--serif);letter-spacing:-.4px;}
h3{font-size:1.05rem;margin:0 0 4px;}
.muted{color:var(--sub);}
.small{font-size:.82rem;}
[hidden]{display:none !important;}

button{font-family:var(--sans);font-weight:600;font-size:.93rem;background:var(--accent);color:var(--on-accent);border:none;border-radius:10px;padding:11px 20px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;position:relative;overflow:hidden;transition:transform .12s var(--ease),box-shadow .2s var(--ease),background-color .3s,filter .2s,opacity .15s;}
button:hover:not(:disabled){filter:brightness(1.06);box-shadow:0 6px 16px -6px color-mix(in srgb,var(--accent) 70%,transparent);}
button:active:not(:disabled){transform:scale(.97);}
button:disabled{opacity:.45;cursor:default;}
button:focus-visible,.tab:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
button.secondary{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent-line);}
button.ghost{background:transparent;color:var(--sub);box-shadow:inset 0 0 0 1px var(--border);font-size:.8rem;padding:6px 12px;border-radius:8px;}
button.ghost:hover:not(:disabled){color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);filter:none;}
.text-btn{background:transparent;color:var(--accent);padding:0;font-size:.8rem;border-radius:4px;box-shadow:none;margin-top:6px;}
.text-btn:hover:not(:disabled){filter:none;box-shadow:none;text-decoration:underline;}
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.45);animation:ripple .55s ease-out;pointer-events:none;}
@keyframes ripple{to{transform:scale(3.2);opacity:0;}}
.spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite;display:inline-block;flex:none;}
button.secondary .spinner{border-color:color-mix(in srgb,var(--accent) 30%,transparent);border-top-color:var(--accent);}
@keyframes spin{to{transform:rotate(360deg);}}

label{display:block;font-weight:650;font-size:.74rem;margin:0 0 6px;color:var(--sub);text-transform:uppercase;letter-spacing:.06em;}
.label-note{text-transform:none;letter-spacing:0;font-weight:500;}
textarea,input[type=text],input[type=password],input[type=date],select{width:100%;background:var(--panel);color:var(--ink);border:1px solid var(--border);border-radius:10px;padding:11px 12px;font-family:var(--sans);font-size:.9rem;transition:border-color .2s,box-shadow .2s,background-color .4s;}
textarea{resize:vertical;min-height:150px;line-height:1.45;}
textarea.short{min-height:80px;}
textarea:focus,input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent);}
.field{margin-bottom:14px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:700px){.grid2{grid-template-columns:1fr;}}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:border-color .25s,transform .25s var(--ease),box-shadow .25s,background-color .4s;}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px;}
.status{font-size:.84rem;color:var(--sub);margin-top:10px;min-height:1.2em;}
.hint{color:var(--sub);font-size:.8rem;margin:0 0 8px;line-height:1.45;}
.empty{color:var(--sub);font-size:.88rem;}
.encourage{font-size:.84rem;color:var(--sub);margin:0 0 14px;}

/* =========================================================
   Sign-in
   ========================================================= */
.signin-screen{max-width:480px;padding-top:70px;}
.signin-card{padding:32px 28px;text-align:center;}
.signin-card .brand{justify-content:center;font-size:1.8rem;margin:0 0 8px;}
.tag{color:var(--sub);font-size:.95rem;margin:0 0 20px;line-height:1.5;}
.signin-points{list-style:none;padding:0;margin:0 0 24px;text-align:left;display:grid;gap:10px;font-size:.9rem;}
.signin-points li{display:flex;align-items:center;gap:10px;}
.pt-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none;}
.google-btn{background:var(--panel);color:var(--ink);box-shadow:inset 0 0 0 1px var(--border);padding:12px 22px;}
.google-btn:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--accent),0 6px 16px -8px rgba(0,0,0,.25);filter:none;}
.fine{font-size:.76rem;color:var(--sub);margin:16px 0 0;}

/* =========================================================
   Top bar + theme picker
   ========================================================= */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;}
.brand{display:flex;align-items:center;gap:10px;margin:0;font-size:1.55rem;}
.brand-logo{width:1.3em;height:1.3em;flex:none;}
.top-right{display:flex;align-items:center;gap:10px;}
.pop-anchor{position:relative;}
.user-chip{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--sub);white-space:nowrap;}
.user-chip img,.user-chip .avatar{width:30px;height:30px;border-radius:50%;}
.user-chip .avatar{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;display:grid;place-items:center;font-weight:700;font-size:.8rem;}
@media (max-width:560px){.user-chip .name{display:none;}.topbar .brand{font-size:1.25rem;}}
.icon-btn{width:36px;height:36px;padding:0;justify-content:center;border-radius:10px;background:var(--panel);color:var(--ink);box-shadow:inset 0 0 0 1px var(--border);}
.icon-btn:hover:not(:disabled){color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);filter:none;}
.popover{position:absolute;right:0;top:44px;width:280px;padding:16px;z-index:40;opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transition:opacity .18s,transform .18s var(--ease);}
.popover.open{opacity:1;transform:none;pointer-events:auto;}
.pop-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--sub);margin:0 0 10px;}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px;}
.swatch{padding:0;background:none;color:var(--sub);flex-direction:column;gap:5px;font-size:.62rem;font-weight:500;box-shadow:none;overflow:visible;}
.swatch:hover:not(:disabled){filter:none;box-shadow:none;}
.swatch i{display:block;width:100%;aspect-ratio:1;border-radius:12px;background:linear-gradient(135deg,var(--sw1) 0 55%,var(--sw2) 55%);transition:transform .15s var(--ease),box-shadow .15s;}
.swatch:hover i{transform:translateY(-2px);}
.swatch[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--ink);}
.swatch[aria-pressed="true"]{color:var(--ink);}
.seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:3px;gap:3px;}
.seg-wide{max-width:320px;margin-top:10px;}
.seg button{background:transparent;color:var(--sub);font-size:.8rem;padding:7px 0;justify-content:center;border-radius:8px;box-shadow:none;}
.seg button:hover:not(:disabled){filter:none;box-shadow:none;color:var(--ink);}
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:var(--shadow);}

/* =========================================================
   Progress bar: slim line (level, XP, streak, badges) that expands
   ========================================================= */
.progress-bar{margin-bottom:16px;overflow:hidden;}
.pb-toggle{width:100%;background:transparent;color:var(--ink);box-shadow:none;border-radius:var(--radius);padding:10px 14px;display:flex;align-items:center;gap:12px;font-weight:500;font-size:.82rem;}
.pb-toggle:hover:not(:disabled){filter:none;box-shadow:none;background:var(--panel-2);}
.pb-level{display:flex;align-items:baseline;gap:6px;white-space:nowrap;}
.pb-level small{font-size:.66rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;}
.pb-level b{font-family:var(--serif);font-size:.95rem;}
.pb-xp{color:var(--sub);white-space:nowrap;}
.pb-chip{display:inline-flex;align-items:center;gap:4px;color:var(--sub);white-space:nowrap;}
.pb-chip svg{color:var(--accent);}
.pb-chev{color:var(--sub);flex:none;transition:transform .25s var(--ease);}
.pb-toggle[aria-expanded="true"] .pb-chev{transform:rotate(180deg);}
.pb-more{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:4px 14px 14px;border-top:1px solid var(--border);padding-top:14px;animation:fadein .25s var(--ease);}
@media (max-width:700px){.pb-more{grid-template-columns:1fr;}}
@media (max-width:560px){.pb-xp{display:none;}.pb-level small{display:none;}}
.xp-bar{display:block;flex:1;min-width:60px;height:8px;border-radius:99px;background:var(--panel-2);border:1px solid var(--border);overflow:hidden;}
[data-focus="on"] .progress-bar{display:none;}
.xp-fill{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width 1s var(--ease);position:relative;overflow:hidden;}
.xp-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,#fff 28%,transparent),transparent);transform:translateX(-100%);animation:shine 2.6s infinite;}
@keyframes shine{60%,100%{transform:translateX(100%);}}
.level-next{font-size:.8rem;color:var(--sub);}
.stats{display:flex;gap:18px;margin-top:10px;flex-wrap:wrap;}
.stat b{display:block;font-size:1.25rem;font-family:var(--serif);}
.stat span{font-size:.7rem;color:var(--sub);text-transform:uppercase;letter-spacing:.05em;}
.streak{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.flame{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(160deg,var(--accent-2),var(--accent));color:#fff;flex:none;}
.flame.cold{background:var(--panel-2);color:var(--sub);border:1px solid var(--border);}
.flame:not(.cold) svg{animation:flicker 1.6s ease-in-out infinite;transform-origin:bottom center;}
@keyframes flicker{50%{transform:scale(1.08) rotate(-3deg);}}
.week-dots{display:flex;gap:5px;margin-top:6px;}
.week-dots i{width:18px;height:6px;border-radius:3px;background:var(--border);}
.week-dots i.on{background:var(--accent);}
.week-dots i.now{outline:1.5px solid var(--accent-line);outline-offset:1px;}
.badges-title{margin-bottom:8px;}
.badges-title .muted{text-transform:none;letter-spacing:0;font-weight:500;}
.badges{display:flex;gap:8px;flex-wrap:wrap;}
.badge{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--border);color:var(--sub);position:relative;transition:transform .2s var(--ease);}
.badge:hover,.badge:focus{transform:translateY(-2px);outline:none;}
.badge.locked{opacity:.4;filter:grayscale(1);}
.badge.unlocked{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line);}
.badge.pop{animation:pop .7s var(--ease);}
@keyframes pop{0%{transform:scale(.4);}60%{transform:scale(1.25);}100%{transform:scale(1);}}
.badge .tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);white-space:nowrap;background:var(--ink);color:var(--bg);font-size:.72rem;padding:5px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:5;}
.badge:hover .tip,.badge:focus .tip{opacity:1;transform:translateX(-50%);}

/* =========================================================
   Tabs with sliding indicator
   ========================================================= */
.tabs{position:relative;display:inline-flex;gap:2px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:18px;box-shadow:var(--shadow);max-width:100%;}
.tab{position:relative;z-index:1;background:transparent;color:var(--sub);padding:8px 16px;font-size:.84rem;border-radius:9px;box-shadow:none;transition:color .25s;}
.tab:hover:not(.active):not(:disabled){color:var(--ink);filter:none;box-shadow:none;}
.tab.active{color:var(--on-accent);}
.tab-ind{position:absolute;top:4px;bottom:4px;left:4px;border-radius:9px;background:var(--accent);transition:transform .35s var(--ease),width .35s var(--ease),background-color .3s;}
@media (max-width:420px){.tab{padding:8px 11px;}}
.panel{display:none;}
.panel.show{display:block;animation:fadein .35s var(--ease);}
.signin-screen,.app-screen{animation:fadein .3s var(--ease);}
@keyframes fadein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* =========================================================
   Tailor: stepper, inputs
   ========================================================= */
.stepper{display:flex;align-items:center;margin:0 0 18px;padding:14px 16px;}
.step{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--sub);white-space:nowrap;}
.step .dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--border);background:var(--panel);font-size:.75rem;transition:all .3s var(--ease);}
.step.done .dot{background:var(--accent);border-color:var(--accent);color:#fff;}
.step.current .dot{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);}
.step.current{color:var(--ink);}
.step-line{flex:1;height:2px;background:var(--border);margin:0 10px;min-width:16px;position:relative;overflow:hidden;border-radius:2px;}
.step-line::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);}
.step-line.done::after{transform:scaleX(1);}
@media (max-width:640px){.step .lbl{display:none;}}
.inputs{padding:18px;}
.upload-drop{width:100%;background:transparent;color:var(--sub);font-weight:500;font-size:.82rem;border:1.5px dashed var(--accent-line);border-radius:10px;padding:10px 12px;margin-bottom:8px;box-shadow:none;justify-content:flex-start;transition:background .2s,border-color .2s;}
.upload-drop:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent);filter:none;box-shadow:none;}
.upload-drop b{color:var(--accent);}
.filename{margin-left:auto;color:var(--ink);font-weight:600;}
.resume-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;}
.resume-tools .text-btn{margin-top:0;}
.latex-toggle{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--sub);cursor:pointer;text-transform:none;letter-spacing:normal;font-weight:500;margin:0;}
.latex-toggle input{width:auto;margin:0;accent-color:var(--accent);}
.master-note{margin-top:8px;font-size:.8rem;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);padding:7px 10px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.master-note .text-btn{margin:0;}

/* skeleton + rotating tips */
.skeleton{padding:20px;margin-top:18px;display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center;}
.sk{background:linear-gradient(90deg,var(--panel-2) 0%,var(--border) 50%,var(--panel-2) 100%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:8px;}
@keyframes sk{to{background-position:-200% 0;}}
.rotating-tip{font-size:.84rem;color:var(--sub);margin-top:10px;transition:opacity .3s;}

/* =========================================================
   Fit result: ring gauge, keywords, gap checklist
   ========================================================= */
.fit{margin-top:18px;padding:20px;}
.fit-head{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;}
@media (max-width:560px){.fit-head{grid-template-columns:1fr;justify-items:center;text-align:center;}}
.ring{position:relative;width:128px;height:128px;flex:none;}
.ring svg{transform:rotate(-90deg);display:block;}
.ring .track{stroke:var(--panel-2);}
.ring .bar{stroke:var(--ring-color,var(--accent));stroke-linecap:round;transition:stroke-dashoffset 1.3s var(--ease),stroke .4s;}
.ring .ghost-bar{stroke:var(--ring-color,var(--accent));opacity:.22;stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease);}
.ring .val{position:absolute;inset:0;display:grid;place-items:center;text-align:center;}
.ring .val b{font-family:var(--serif);font-size:2.1rem;line-height:1;}
.ring .val span{display:block;font-size:.66rem;color:var(--sub);text-transform:uppercase;letter-spacing:.06em;margin-top:3px;}
.verdict{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;padding:4px 11px;border-radius:99px;}
.verdict.strong{background:var(--good-soft);color:var(--good);}
.verdict.moderate{background:var(--mid-soft);color:var(--mid);}
.verdict.weak{background:var(--bad-soft);color:var(--bad);}
.fit-summary{margin:10px 0 0;font-size:.92rem;line-height:1.5;}
.potential{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:.8rem;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:5px 10px;border-radius:8px;}
.bump{animation:bump .5s var(--ease);}
@keyframes bump{40%{transform:scale(1.12);}}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:22px 0 8px;flex-wrap:wrap;}
.section-head h3{margin:0;}
.section-sub{font-size:.8rem;color:var(--sub);margin:-2px 0 8px;}
.gap-progress{flex:1;max-width:260px;}
.gap-progress .meta{font-size:.76rem;color:var(--sub);text-align:right;margin-bottom:5px;}
.mini-bar{height:8px;border-radius:99px;background:var(--panel-2);border:1px solid var(--border);overflow:hidden;}
.mini-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:99px;transition:width .6s var(--ease);}

.chips{display:flex;flex-wrap:wrap;gap:6px;}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;padding:5px 10px;border-radius:99px;border:1px solid var(--border);background:var(--panel-2);color:var(--sub);transition:all .3s var(--ease);}
.chip.hit{background:var(--good-soft);color:var(--good);border-color:transparent;}
.chip.new{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line);animation:pop .5s var(--ease);}
.chip svg{flex:none;}

.gap{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:12px 14px;margin-top:8px;border-radius:12px;border:1px solid var(--border);background:var(--panel-2);transition:border-color .25s,background-color .25s;}
.gap:hover{border-color:var(--accent-line);}
.gap .check{width:24px;height:24px;border-radius:8px;border:2px solid var(--border);display:grid;place-items:center;margin-top:1px;transition:all .3s var(--ease);color:transparent;}
.gap.done{background:var(--accent-soft);border-color:var(--accent-line);}
.gap.done .check{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(-8deg) scale(1.05);}
.gap.done .q{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent);color:var(--sub);}
.gap .q{font-size:.88rem;line-height:1.45;}
.gap-tag{font-size:.7rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;}
.gap .answer{display:none;margin-top:8px;}
.gap.open .answer{display:block;animation:fadein .25s var(--ease);}
.gap .answer textarea{min-height:64px;font-size:.85rem;}
.gap .row{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;}
.gap .row button{font-size:.78rem;padding:7px 12px;}
.gap .add-link{margin-top:6px;}
.gap.shake{animation:shake .35s;}
@keyframes shake{25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}
details.review{margin-top:18px;border-top:1px dashed var(--border);padding-top:12px;}
details.review summary{cursor:pointer;font-weight:650;font-size:.88rem;list-style:none;display:flex;align-items:center;gap:8px;}
details.review summary::-webkit-details-marker{display:none;}
details.review summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);transform:rotate(-45deg);transition:transform .2s;}
details.review[open] summary::before{transform:rotate(45deg);}
.review-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px;font-size:.84rem;}
@media (max-width:600px){.review-cols{grid-template-columns:1fr;}}
.review-cols ul{margin:6px 0 0;padding-left:18px;line-height:1.5;}
.review-cols h4{margin:0;font-family:var(--sans);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;}
.review-cols .plus h4{color:var(--good);} .review-cols .minus h4{color:var(--mid);}

/* =========================================================
   Result: score boost + output
   ========================================================= */
.boost{margin-top:18px;padding:16px 18px;background:linear-gradient(120deg,var(--accent-soft),var(--panel) 70%);border-color:var(--accent-line);}
.boost-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.boost .nums{font-family:var(--serif);font-size:1.6rem;font-weight:700;display:flex;align-items:center;gap:10px;}
.boost .nums .from{color:var(--sub);text-decoration:line-through;text-decoration-thickness:2px;}
.delta{font-family:var(--sans);font-size:.85rem;font-weight:700;color:var(--good);background:var(--good-soft);padding:4px 10px;border-radius:99px;}
.delta.flat{color:var(--sub);background:var(--panel-2);}
.boost .msg{font-size:.86rem;flex:1;min-width:200px;line-height:1.5;}
.boost .chips{margin-top:12px;}
.output-wrap{margin-top:14px;}
.output-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.output-label{font-weight:700;font-size:.74rem;color:var(--sub);text-transform:uppercase;letter-spacing:.06em;}
.output{padding:20px;white-space:pre-wrap;font-family:var(--mono);font-size:.84rem;line-height:1.6;max-height:420px;overflow:auto;margin-bottom:12px;}

/* =========================================================
   History
   ========================================================= */
.history-item{padding:14px 16px;margin-bottom:10px;}
.history-item:hover,.app-card:hover{border-color:var(--accent-line);transform:translateY(-2px);}
.history-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;}
@media (max-width:560px){.history-row{grid-template-columns:auto 1fr;}.history-row .h-actions{grid-column:1 / -1;}}
.mini-ring{width:48px;height:48px;}
.mini-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:.8rem;}
.mini-ring.none b{color:var(--sub);}
.h-title{font-weight:650;font-size:.92rem;}
.h-meta{font-size:.76rem;color:var(--sub);margin-top:2px;}
.h-delta{font-size:.72rem;font-weight:700;color:var(--good);background:var(--good-soft);padding:2px 8px;border-radius:99px;margin-left:6px;white-space:nowrap;}
.h-actions{display:flex;gap:6px;flex-wrap:wrap;}
.history-item .output{margin:12px 0 0;display:none;box-shadow:none;}
.history-item .output.show{display:block;}

/* =========================================================
   Tracker
   ========================================================= */
.pipeline{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px;}
@media (max-width:640px){.pipeline{grid-template-columns:repeat(3,1fr);}}
.pipe{padding:12px;text-align:center;position:relative;overflow:hidden;}
.pipe b{display:block;font-family:var(--serif);font-size:1.4rem;}
.pipe span{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--sub);}
.pipe::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--pc);}
.pipe.saved{--pc:#9a9a94;} .pipe.applied{--pc:#3b82f6;} .pipe.interview{--pc:#e0a526;} .pipe.offer{--pc:#22a55a;} .pipe.rejected{--pc:#d0584e;}
.tracker-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.tracker-head .encourage{margin:0;flex:1;min-width:220px;}
.tracker-form{padding:18px;margin-bottom:16px;}
.app-card{padding:14px 16px;margin-bottom:10px;}
.app-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.app-title{font-weight:650;font-size:.92rem;}
.app-meta{font-size:.76rem;color:var(--sub);margin-top:2px;}
.app-notes{font-size:.82rem;color:var(--sub);margin-top:8px;white-space:pre-wrap;}
.app-actions{display:flex;gap:8px;margin-top:10px;}
.status-select{width:auto;font-size:.78rem;font-weight:700;border-radius:99px;padding:6px 12px;border:none;cursor:pointer;}
.status-select.saved{background:var(--saved-bg);color:var(--saved-ink);}
.status-select.applied{background:var(--applied-bg);color:var(--applied-ink);}
.status-select.interview{background:var(--mid-soft);color:var(--mid);}
.status-select.offer{background:var(--good-soft);color:var(--good);}
.status-select.rejected{background:var(--bad-soft);color:var(--bad);}

/* =========================================================
   Settings
   ========================================================= */
.settings{padding:20px;display:grid;gap:24px;}
.settings .small{margin:0 0 12px;}
.theme-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
@media (max-width:560px){.theme-grid{grid-template-columns:repeat(3,1fr);}}
.theme-card{padding:0;flex-direction:column;align-items:stretch;gap:0;background:var(--panel);color:var(--ink);box-shadow:inset 0 0 0 1px var(--border);border-radius:12px;overflow:hidden;font-size:.78rem;}
.theme-card:hover:not(:disabled){filter:none;box-shadow:inset 0 0 0 1px var(--accent);}
.theme-card .prev{height:52px;background:linear-gradient(135deg,var(--sw1) 0 60%,var(--sw2) 60%);}
.theme-card span:last-child{padding:8px;}
.theme-card[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--accent);}
.switch-row{display:flex;align-items:flex-start;gap:10px;text-transform:none;letter-spacing:0;font-weight:500;font-size:.86rem;color:var(--ink);cursor:pointer;margin:8px 0 0;line-height:1.45;}
.switch-row input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--accent);flex:none;}
.key-row{display:flex;align-items:center;gap:10px;}
.key-row input{flex:1;}
.key-badge{font-size:.75rem;font-weight:600;padding:4px 10px;border-radius:12px;white-space:nowrap;}
.key-badge:empty{display:none;}
.key-badge.ok{background:var(--good-soft);color:var(--good);}
.key-badge.bad{background:var(--bad-soft);color:var(--bad);}
.key-badge.warn{background:var(--mid-soft);color:var(--mid);}

/* =========================================================
   Toasts, confetti, footer
   ========================================================= */
.toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:60;max-width:calc(100vw - 32px);}
.toast{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;background:var(--ink);color:var(--bg);font-size:.84rem;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);animation:toastin .4s var(--ease);}
.toast.out{animation:toastout .3s ease forwards;}
.toast .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;flex:none;}
.toast b{display:block;}
.toast .tb{opacity:.8;}
@keyframes toastin{from{opacity:0;transform:translateY(12px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes toastout{to{opacity:0;transform:translateY(8px);}}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:55;}
.app-footer{text-align:center;font-size:.76rem;color:var(--sub);padding:0 20px 40px;}

/* =========================================================
   Premium layer: moving aurora background, frosted-glass surfaces,
   modern type, gradient pill buttons, pointer spotlight.
   ========================================================= */
:root{
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --radius:20px;
  --bg:#f4f3f0;
  --glass:rgba(255,255,255,.58); --glass-strong:rgba(255,255,255,.78); --glass-border:rgba(255,255,255,.75);
  --field:rgba(255,255,255,.6); --hairline:rgba(24,20,14,.08);
  --shadow:0 1px 0 rgba(255,255,255,.7) inset,0 12px 40px -14px rgba(30,24,16,.22),0 2px 6px -2px rgba(30,24,16,.06);
  --aurora-opacity:.62;
}
:root[data-mode="dark"]{
  --bg:#0d0c0b;
  --glass:rgba(30,28,26,.52); --glass-strong:rgba(34,32,30,.8); --glass-border:rgba(255,255,255,.09);
  --field:rgba(0,0,0,.22); --hairline:rgba(255,255,255,.07);
  --shadow:0 1px 0 rgba(255,255,255,.06) inset,0 16px 48px -16px rgba(0,0,0,.7);
  --aurora-opacity:.42;
}
@media (prefers-color-scheme: dark){
  :root[data-mode="auto"]{
    --bg:#0d0c0b;
    --glass:rgba(30,28,26,.52); --glass-strong:rgba(34,32,30,.8); --glass-border:rgba(255,255,255,.09);
    --field:rgba(0,0,0,.22); --hairline:rgba(255,255,255,.07);
    --shadow:0 1px 0 rgba(255,255,255,.06) inset,0 16px 48px -16px rgba(0,0,0,.7);
    --aurora-opacity:.42;
  }
}
[data-palette="terracotta"]{ --accent-3:#e0609a; }
[data-palette="ocean"]     { --accent-3:#8b5cf6; }
[data-palette="forest"]    { --accent-3:#14b8a6; }
[data-palette="plum"]      { --accent-3:#3b82f6; }
[data-palette="rose"]      { --accent-3:#8b5cf6; }

body{font-feature-settings:"cv11","ss01";letter-spacing:-.005em;}
h1,h2,h3{font-weight:700;letter-spacing:-.025em;}

/* aurora: large soft colour fields drifting slowly behind everything */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:var(--aurora-opacity);transition:opacity .6s;}
.aurora i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;will-change:transform;}
.aurora i:nth-child(1){background:radial-gradient(circle,var(--accent) 0%,transparent 62%);top:-24vmax;left:-18vmax;animation:drift1 34s ease-in-out infinite alternate;}
.aurora i:nth-child(2){background:radial-gradient(circle,var(--accent-2) 0%,transparent 62%);top:-10vmax;right:-26vmax;animation:drift2 42s ease-in-out infinite alternate;}
.aurora i:nth-child(3){background:radial-gradient(circle,var(--accent-3) 0%,transparent 62%);bottom:-34vmax;left:12vmax;opacity:.75;animation:drift3 48s ease-in-out infinite alternate;}
.aurora i:nth-child(4){background:radial-gradient(circle,var(--accent) 0%,transparent 60%);bottom:-30vmax;right:-20vmax;opacity:.55;animation:drift4 56s ease-in-out infinite alternate;}
@keyframes drift1{to{transform:translate(22vmax,18vmax) scale(1.15);}}
@keyframes drift2{to{transform:translate(-20vmax,22vmax) scale(.9);}}
@keyframes drift3{to{transform:translate(18vmax,-20vmax) scale(1.2);}}
@keyframes drift4{to{transform:translate(-24vmax,-14vmax) scale(1.05);}}

/* frosted glass surfaces + pointer spotlight */
.card{
  background:radial-gradient(520px circle at var(--mx,-600px) var(--my,-600px),color-mix(in srgb,var(--accent) 9%,transparent),transparent 45%),var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--glass-border);box-shadow:var(--shadow);
}
.card:not(.popover){position:relative;}
.popover.card{background:var(--glass-strong);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card{background:var(--panel);}
}
.history-item .output,.card .card{background:var(--field);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;}

/* sticky glass top bar */
.topbar{position:sticky;top:10px;z-index:30;padding:8px 10px 8px 14px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);box-shadow:var(--shadow);}
.brand{font-size:1.3rem;font-weight:800;letter-spacing:-.03em;white-space:nowrap;}
@media (max-width:560px){
  .topbar .brand{font-size:1.08rem;gap:7px;}
  .topbar{padding:7px 8px 7px 10px;}
  .pb-toggle{gap:8px;padding:10px 12px;}
  .xp-bar{min-width:32px;}
  .user-chip button{padding:5px 10px;}
}
@media (max-width:380px){ .user-chip button{display:none;} }
.icon-btn{background:var(--field);border-radius:12px;}

/* fields */
textarea,input[type=text],input[type=password],input[type=date],select{background:var(--field);border:1px solid var(--hairline);border-radius:14px;}
textarea:focus,input:focus,select:focus{background:var(--glass-strong);}
.upload-drop{border-radius:14px;}

/* buttons: gradient pills with a soft glow */
button{border-radius:999px;padding:11px 22px;}
button:not(.secondary):not(.ghost):not(.text-btn):not(.tab):not(.icon-btn):not(.swatch):not(.theme-card):not(.pb-toggle):not(.upload-drop):not(.google-btn):not(.seg button):not(.danger):not(.tpl-card):not(.wz-choice){
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--accent-2)));
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 8px 22px -8px color-mix(in srgb,var(--accent) 80%,transparent);
}
button:not(:disabled):hover{transform:translateY(-1px);}
button.secondary{background:var(--field);box-shadow:inset 0 0 0 1.5px var(--accent-line);}
button.ghost{border-radius:999px;background:var(--field);}
.seg button,.theme-card,.swatch,.pb-toggle,.tab,.upload-drop{border-radius:12px;}
.google-btn{background:var(--glass-strong);border-radius:999px;box-shadow:inset 0 0 0 1px var(--hairline),0 8px 22px -12px rgba(0,0,0,.3);}

/* segmented tabs */
.tabs{background:var(--glass);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);border-radius:16px;}
.tab-ind{border-radius:12px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--accent-2)));box-shadow:0 6px 16px -6px color-mix(in srgb,var(--accent) 80%,transparent);}
.seg{background:var(--field);border-color:var(--hairline);border-radius:14px;}
.seg button[aria-pressed="true"]{background:var(--glass-strong);}

/* sign-in hero */
.signin-screen{padding-top:9vh;}
.signin-card{padding:36px 30px;}
.hero{font-size:clamp(2.1rem,6vw,2.9rem);font-weight:800;letter-spacing:-.045em;line-height:1.05;margin:6px 0 12px;}
.grad-text{background:linear-gradient(120deg,var(--accent),var(--accent-2) 55%,var(--accent-3));-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;animation:gradshift 8s ease-in-out infinite alternate;}
@keyframes gradshift{to{background-position:100% 0;}}
.pt-ic{border-radius:10px;}

/* small refinements */
.stepper .step:not(.done) .dot{background:var(--field);}
.gap{background:var(--field);border-color:var(--hairline);border-radius:14px;}
.gap.done{background:var(--accent-soft);}
.chip{background:var(--field);border-color:var(--hairline);}
.xp-bar,.mini-bar{background:var(--field);border-color:var(--hairline);}
.badge{background:var(--field);border-color:var(--hairline);}
.pipe b,.stat b,.ring .val b{font-family:var(--sans);font-weight:800;letter-spacing:-.03em;}
.panel.show > *{animation:rise .45s var(--ease) both;}
.panel.show > *:nth-child(2){animation-delay:.05s;} .panel.show > *:nth-child(3){animation-delay:.1s;} .panel.show > *:nth-child(4){animation-delay:.15s;}
@keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.toast{background:color-mix(in srgb,var(--ink) 88%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:16px;}

/* =========================================================
   Touches borrowed from air.inc: bold tight headlines, glass pill
   badges, white pill call-to-action, floating appearance switch.
   ========================================================= */
[data-palette="sky"]{ --accent-l:#1f6bff; --accent-d:#5b9bff; --accent-2:#46b6ff; --accent-3:#6366f1; }
h1,h2,h3,.hero,.brand,.level-name,.pb-level b{font-family:'Inter Tight',var(--sans);}

.signin-screen{max-width:620px;}
.signin-card{padding:44px 36px 36px;}
.hero{font-size:clamp(2.8rem,8vw,4.4rem);font-weight:700;letter-spacing:-.055em;line-height:.98;margin:18px 0 16px;}
.signin-card .tag{font-size:1.02rem;max-width:440px;margin:0 auto 22px;}
.signin-points{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 28px;font-size:.84rem;}
.signin-points li{background:var(--field);border:1px solid var(--hairline);padding:6px 14px 6px 6px;border-radius:999px;}
.signin-points .pt-ic{width:24px;height:24px;border-radius:999px;}
.google-btn{background:#fff !important;color:#111;font-size:1rem;padding:14px 28px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 14px 34px -12px rgba(0,0,0,.55) !important;}
.google-btn:hover:not(:disabled){transform:translateY(-1px);}

.mode-rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:45;display:flex;flex-direction:column;gap:4px;padding:5px;border-radius:14px;
  background:var(--glass);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:var(--shadow);}
.mode-rail button{width:30px;height:30px;padding:0;justify-content:center;border-radius:9px;background:transparent !important;color:var(--sub);box-shadow:none !important;}
.mode-rail button:hover:not(:disabled){color:var(--ink);background:var(--field) !important;transform:none;filter:none;}
.mode-rail button[aria-pressed="true"]{background:var(--ink) !important;color:var(--bg);box-shadow:0 4px 12px -4px rgba(0,0,0,.35) !important;}
@media (max-width:760px){.mode-rail{display:none;}}
.toasts{right:64px;}
@media (max-width:760px){.toasts{right:16px;}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  .aurora i{animation:none !important;}
}

/* ---------------------------------------------------------------- legal pages + data controls */
.legal-wrap{max-width:760px;margin:0 auto;padding:28px 18px 56px;}
.legal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.legal-top .brand{font-size:1.2rem;color:var(--ink);text-decoration:none;}
.legal-nav{display:flex;gap:6px;flex-wrap:wrap;}
.legal-nav a{font-size:.82rem;color:var(--sub);text-decoration:none;padding:6px 12px;border-radius:999px;border:1px solid var(--border);}
.legal-nav a[aria-current="page"],.legal-nav a:hover{color:var(--ink);border-color:var(--accent-line);}
.legal{padding:clamp(20px,5vw,40px);}
.legal h1{font-size:clamp(1.7rem,5vw,2.3rem);margin:0 0 6px;text-wrap:balance;}
.legal .eff{color:var(--sub);font-size:.85rem;margin:0 0 22px;}
.legal .summary{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:14px;padding:14px 16px;margin:0 0 26px;}
.legal .summary ul{margin:6px 0 0;padding-left:18px;}
.legal h2{font-size:1.12rem;margin:30px 0 8px;text-wrap:balance;}
.legal h3{font-size:.98rem;margin:18px 0 6px;}
.legal p,.legal li{line-height:1.65;color:var(--ink);max-width:68ch;}
.legal li{margin:4px 0;}
.legal a{color:var(--accent);}
.legal code{font-size:.85em;background:var(--field);padding:1px 6px;border-radius:6px;}
.legal .toc{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;padding:0;list-style:none;}
.legal .toc a{display:inline-block;font-size:.8rem;text-decoration:none;color:var(--sub);background:var(--field);padding:5px 10px;border-radius:999px;}
.legal .toc a:hover{color:var(--ink);}
.legal .table-wrap{overflow-x:auto;margin:10px 0;}
.legal table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:520px;}
.legal th,.legal td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1px solid var(--border);}
.legal th{color:var(--sub);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;}
.legal-foot{text-align:center;color:var(--sub);font-size:.78rem;margin-top:22px;}
.app-footer a,.fine a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.app-footer a:hover,.fine a:hover{color:var(--accent);}
.data-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
button.danger{background:transparent;color:var(--bad);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--bad) 55%,transparent);}
button.danger.solid{background:var(--bad);color:var(--bg);box-shadow:none;}
.confirm-box{margin-top:12px;padding:14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 8%,transparent);}
.confirm-box p{margin:0 0 10px;}
.settings a,.hint a{color:var(--accent);text-underline-offset:2px;}

/* ---------------------------------------------------------------- laptop and desktop layout */
/* Wider working area, and the job description sits beside the resume so both are visible at once. */
.io-grid{display:grid;grid-template-columns:1fr;gap:0 18px;}
@media (min-width:1000px){
  .app-screen{max-width:1200px;}
  .io-grid{grid-template-columns:1fr 1fr;align-items:stretch;}
  .io-grid > .field{display:flex;flex-direction:column;min-width:0;}
  .io-grid > .field > textarea{flex:1;min-height:300px;}
  .io-grid > .field > #detectBtn{align-self:flex-start;}
  .io-grid .upload-drop{margin-bottom:8px;}
}
/* Sign-in fits a laptop screen without scrolling */
@media (min-width:760px) and (max-height:860px){
  .signin-screen{padding-top:max(20px,calc((100vh - 620px) / 2));}
  .signin-card{padding:32px 36px 28px;}
  .hero{font-size:clamp(2.6rem,7vh,3.8rem);margin:12px 0 12px;}
  .signin-points{margin-bottom:22px;}
}

/* ---------------------------------------------------------------- v1.3: key banner, output options, templates, ATS check, key wizard */
.key-banner{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:16px;border-color:var(--accent-line);
  background:linear-gradient(120deg,var(--accent-soft),var(--glass) 70%);}
.kb-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);flex:none;}
.kb-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:.88rem;}
.kb-text span{color:var(--sub);font-size:.82rem;}
@media (max-width:560px){.key-banner{flex-wrap:wrap}.key-banner button{width:100%;justify-content:center}}

.output-options{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;margin:4px 0 16px;padding:14px;border-radius:14px;background:var(--field);border:1px solid var(--hairline);}
@media (max-width:700px){.output-options{grid-template-columns:1fr;}}
.opt{min-width:0;display:flex;flex-direction:column;gap:7px;}
.opt-label{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--sub);}
.opt .seg{grid-template-columns:1fr 1fr;max-width:360px;}
.opt-note{margin:0;font-size:.78rem;color:var(--sub);line-height:1.45;}

.result-card{padding:18px;}
.result-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.result-head h3{margin:0;}
.page-badge{font-size:.76rem;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--good-soft);color:var(--good);}
.page-badge.over{background:var(--mid-soft);color:var(--mid);}
.page-badge:empty{display:none;}
.tpl-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px;}
@media (max-width:760px){.tpl-picker{grid-template-columns:repeat(5,minmax(118px,1fr));overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;}}
.tpl-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:10px;border-radius:14px;
  background:var(--field);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hairline);scroll-snap-align:start;min-width:0;}
.tpl-card:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--accent-line);transform:none;filter:none;}
.tpl-card[aria-checked="true"]{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft);}
.tpl-card b{font-size:.84rem;}
.tpl-card small{font-size:.7rem;color:var(--sub);font-weight:500;line-height:1.3;}
/* tiny page sketch per template */
.tpl-mini{width:100%;height:70px;overflow:hidden;background:#fbfaf7;border-radius:6px;padding:7px;display:flex;flex-direction:column;gap:4px;margin-bottom:5px;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.tpl-mini i{display:block;height:3px;border-radius:2px;background:#c9c6bf;}
.tpl-mini i:nth-child(1){height:6px;width:55%;background:#2a2a2a;}
.tpl-mini i:nth-child(2){width:80%;}
.tpl-mini i:nth-child(3){height:3px;width:35%;background:#555;margin-top:3px;}
.tpl-mini i:nth-child(4){width:92%;}
.tpl-mini i:nth-child(5){width:70%;}
.tpl-card.classic .tpl-mini i:nth-child(1),.tpl-card.executive .tpl-mini i:nth-child(1){align-self:center;}
.tpl-card.classic .tpl-mini i:nth-child(2),.tpl-card.executive .tpl-mini i:nth-child(2){align-self:center;width:62%;}
.tpl-card.modern .tpl-mini i:nth-child(3){background:#1f4e79;}
.tpl-card.technical .tpl-mini i:nth-child(3){background:#145a46;}
.tpl-card.executive .tpl-mini i:nth-child(3){align-self:center;letter-spacing:2px;}
.tpl-card.compact .tpl-mini{gap:2px;}
.paper-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.paper-row .seg{grid-template-columns:1fr 1fr;width:220px;}
.fit-note{margin:0 0 10px;font-size:.82rem;color:var(--mid);background:var(--mid-soft);padding:8px 12px;border-radius:10px;}
.fit-note .text-btn{font-size:.82rem;}
.preview-wrap{display:flex;justify-content:center;background:var(--field);border:1px solid var(--hairline);border-radius:14px;padding:14px;margin-bottom:14px;overflow:hidden;}
.preview-wrap canvas{background:#fff;border-radius:3px;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);max-width:100%;}
.docx-preview{background:#fff;color:#222;border-radius:12px;padding:22px 26px;margin-bottom:14px;max-height:520px;overflow:auto;font-family:Georgia,'Times New Roman',serif;font-size:.86rem;line-height:1.45;}
.docx-preview h1,.docx-preview h2,.docx-preview h3{font-family:inherit;color:#111;margin:.6em 0 .3em;}
.docx-preview p{margin:.25em 0;}
.docx-preview ul{margin:.2em 0 .4em 1.2em;padding:0;}
.docx-preview .dp-note{font-family:var(--sans);font-size:.74rem;color:#666;background:#f3f1ec;padding:6px 10px;border-radius:8px;margin:-6px 0 12px;}
.docx-preview table{border-collapse:collapse;width:100%;}
.docx-preview td{vertical-align:top;padding:2px 6px;}

.ats-card{margin-top:14px;padding:18px;}
.ats-head{display:flex;align-items:center;gap:16px;margin-bottom:12px;}
.ats-head h3{margin:0 0 2px;}
.ats-head p{margin:0;}
.ats-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.ats-list li{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-radius:12px;background:var(--field);border:1px solid var(--hairline);font-size:.84rem;}
.ats-list li > div{flex:1;min-width:0;}
.ats-list li b{font-weight:600;}
.ats-list .pts{float:right;font-variant-numeric:tabular-nums;color:var(--sub);font-size:.78rem;margin-left:8px;}
.ats-list p{margin:3px 0 0;color:var(--sub);font-size:.78rem;}
.ats-ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:800;font-size:.75rem;}
.ats-list li.ok .ats-ic{background:var(--good-soft);color:var(--good);}
.ats-list li.warn .ats-ic{background:var(--mid-soft);color:var(--mid);}
.ats-ic svg{width:12px;height:12px;}

/* key wizard */
.wizard{width:min(540px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:26px 24px 22px;color:var(--ink);background:var(--glass-strong);border:1px solid var(--glass-border);}
.wizard::backdrop{background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.wizard h2{margin:6px 0 8px;font-size:1.35rem;text-wrap:balance;}
.wz-close{position:absolute;top:12px;right:12px;}
.wz-dots{display:flex;gap:6px;list-style:none;margin:0;padding:0;}
.wz-dots li{width:22px;height:4px;border-radius:99px;background:var(--hairline);}
.wz-dots li.on{background:var(--accent);}
.wz-choices{display:grid;gap:10px;margin:16px 0;}
.wz-choice{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;text-align:left;padding:14px 16px;border-radius:14px;
  background:var(--field);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hairline);}
.wz-choice:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--accent);filter:none;}
.wz-choice small{grid-column:1/-1;color:var(--sub);font-weight:500;font-size:.8rem;}
.tag-free,.tag-paid{font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:99px;}
.tag-free{background:var(--good-soft);color:var(--good);}
.tag-paid{background:var(--panel-2);color:var(--sub);}
.wz-faq{margin-top:8px;font-size:.84rem;}
.wz-faq summary{cursor:pointer;font-weight:600;color:var(--sub);}
.wz-faq p{color:var(--sub);margin:6px 0 0;line-height:1.5;}
.wz-faq a,.wz-list a{color:var(--accent);}
.wz-list{margin:14px 0;padding-left:20px;display:grid;gap:10px;line-height:1.5;font-size:.92rem;}
.wz-list code{background:var(--field);padding:1px 6px;border-radius:6px;font-size:.85em;}
.btn-link{font-weight:700;}
.wz-tip{font-size:.8rem;color:var(--sub);background:var(--field);padding:8px 12px;border-radius:10px;margin:0 0 6px;}
.wz-actions{display:flex;justify-content:space-between;gap:10px;margin-top:16px;}
.wz-actions:has(> :only-child){justify-content:flex-end;}
.wz-hint{font-size:.8rem;margin:6px 0 0;min-height:1.2em;color:var(--sub);}
.wz-hint.ok{color:var(--good);}
.wz-hint.warn{color:var(--mid);}
.wz-error{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--bad-soft);color:var(--bad);font-size:.84rem;line-height:1.45;}
.wz-done-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--good-soft);color:var(--good);margin:6px 0 4px;}

/* ---------------------------------------------------------------- v1.4: cover letter */
.cover-card{margin-top:14px;padding:18px;}
.cover-head{display:flex;gap:12px;align-items:center;margin-bottom:14px;}
.cover-head h3{margin:0 0 2px;}
.cover-head p{margin:0;}
.cover-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-bottom:12px;}
.cover-opts .field{margin-bottom:0;}
@media (max-width:700px){.cover-opts{grid-template-columns:1fr;}}
.seg.seg3{grid-template-columns:repeat(3,1fr);max-width:420px;}
.cl-paper{background:#fff;color:#1b1b1b;border-radius:6px;padding:40px 44px;margin:14px 0 6px;max-width:720px;
  font-family:Georgia,'Times New Roman',serif;font-size:.95rem;line-height:1.6;box-shadow:0 12px 34px -14px rgba(0,0,0,.55);outline:none;}
.cl-paper:focus{box-shadow:0 0 0 3px var(--accent-line),0 12px 34px -14px rgba(0,0,0,.55);}
.cl-paper p{margin:0 0 12px;}
.cl-paper .cl-name{font-size:1.5rem;font-weight:700;margin:0 0 2px;}
.cl-paper .cl-contact{color:#555;font-size:.82rem;border-bottom:1px solid #ccc;padding-bottom:12px;margin-bottom:18px;}
.cl-paper .cl-date,.cl-paper .cl-to{margin:0 0 2px;}
.cl-paper .cl-greet{margin-top:16px;}
.cl-paper .cl-sign{font-weight:700;}
.cl-paper.sans{font-family:Helvetica,Arial,sans-serif;font-size:.9rem;}
.cl-paper.center .cl-name,.cl-paper.center .cl-contact{text-align:center;}
@media (max-width:560px){.cl-paper{padding:24px 20px;font-size:.88rem;}}
.cl-edit-note{margin:0 0 8px;}
/* ---------------------------------------------------------------- v1.5: support */
.support-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:14px;padding:12px 16px;
  border:1px dashed var(--border);border-radius:14px;color:var(--sub);font-size:.86rem;}
/* Buy Me a Coffee's official button look (yellow, Cookie font), drawn in CSS so no third-party script runs in the app. */
.coffee-btn{display:inline-flex;align-items:center;gap:8px;padding:6px 18px 6px 14px;border-radius:10px;
  background:#FFDD00;color:#000;border:1px solid #000;text-decoration:none;
  font-family:'Cookie',cursive;font-size:1.55rem;line-height:1.2;letter-spacing:.2px;
  box-shadow:0 2px 0 rgba(0,0,0,.25);transition:transform .15s,box-shadow .15s;}
.coffee-btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.25);color:#000;}
.coffee-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.app-footer{display:flex;flex-direction:column;align-items:center;gap:12px;}
.app-footer a.coffee-btn{color:#000;text-decoration:none;}
.coffee-btn.coffee-sm{font-size:1.25rem;padding:4px 14px 4px 11px;gap:6px;border-radius:9px;}
/* ---------------------------------------------------------------- v1.6: blog */
.legal-nav a.nav-cta{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
.legal-nav a.nav-cta:hover{color:var(--on-accent);filter:brightness(1.08);}
.blog-post .crumbs{font-size:.8rem;color:var(--sub);margin:0 0 14px;}
.blog-post .crumbs a{color:var(--sub);text-decoration:none;}
.blog-post .crumbs a:hover{color:var(--accent);}
.blog-post h2{font-size:1.25rem;margin:34px 0 10px;}
.blog-post h3{font-size:1.04rem;margin:22px 0 6px;}
.blog-post p,.blog-post li{font-size:1rem;line-height:1.75;}
.blog-post blockquote{margin:14px 0;padding:10px 16px;border-left:3px solid var(--accent);background:var(--field);border-radius:0 10px 10px 0;}
.blog-post blockquote p{margin:6px 0;}
.blog-post table{border-collapse:collapse;width:100%;margin:14px 0;font-size:.92rem;}
.blog-post th,.blog-post td{border:1px solid var(--border);padding:8px 10px;text-align:left;}
.blog-post th{background:var(--field);}
.blog-post article{min-width:0;overflow-wrap:anywhere;}
.blog-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;margin:36px 0 8px;padding:18px 20px;
  border-radius:16px;background:var(--accent-soft);border:1px solid var(--accent-line);}
.blog-cta > div{flex:1 1 320px;min-width:0;}
.blog-cta p{margin:6px 0 0;font-size:.92rem;color:var(--sub);line-height:1.55;}
.btn-cta{display:inline-block;padding:11px 20px;border-radius:999px;background:var(--accent);color:var(--on-accent)!important;font-weight:700;text-decoration:none;white-space:nowrap;}
.btn-cta:hover{filter:brightness(1.08);}
.related ul{padding-left:18px;}
.post-list{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px;}
.post-card a{display:block;padding:16px 18px;border:1px solid var(--border);border-radius:14px;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s;}
.post-card a:hover{border-color:var(--accent-line);transform:translateY(-1px);}
.post-card h2{font-size:1.08rem;margin:0 0 6px;}
.post-card p{margin:0 0 8px;color:var(--sub);font-size:.92rem;}
.post-card .eff{margin:0;font-size:.78rem;}
.signin-blog{margin-top:14px;font-size:.84rem;color:var(--sub);}
.signin-blog a{color:var(--accent);}
.legal-foot a{color:var(--sub);}
.legal-foot a:hover{color:var(--accent);}
/* ---------------------------------------------------------------- v1.7: browser extension */
.signin-clip{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--accent-line);font-size:.88rem;color:var(--ink);}

/* =========================================================
   2.1 Workspace redesign: calm, flat, editorial.
   One brand colour, paper neutrals, Fraunces for display type,
   Inter for UI. Overrides the earlier glass/aurora layer.
   ========================================================= */
:root{
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --bg:#f5f2eb; --panel:#ffffff; --panel-2:#faf8f3; --ink:#1c1a17; --sub:#6e665b; --border:#e5dfd3;
  --accent-l:#b8572f; --accent-d:#e07a52; --accent-2:var(--accent); --accent-3:var(--accent);
  --glass:var(--panel); --glass-strong:var(--panel); --glass-border:var(--border);
  --field:#fdfcf9; --hairline:var(--border); --aurora-opacity:0;
  --shadow:0 1px 2px rgba(28,26,23,.04),0 2px 8px -2px rgba(28,26,23,.05);
  --shadow-lg:0 12px 40px -12px rgba(28,26,23,.18);
  --radius:14px;
}
:root[data-mode="dark"]{
  --bg:#12110f; --panel:#1b1a17; --panel-2:#211f1c; --ink:#f1eee7; --sub:#a39d92; --border:#2f2c27;
  --field:#161513; --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 16px 48px -16px rgba(0,0,0,.7);
  --glass:var(--panel); --glass-strong:var(--panel); --glass-border:var(--border); --hairline:var(--border);
}
@media (prefers-color-scheme: dark){
  :root[data-mode="auto"]{
    --bg:#12110f; --panel:#1b1a17; --panel-2:#211f1c; --ink:#f1eee7; --sub:#a39d92; --border:#2f2c27;
    --field:#161513; --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 16px 48px -16px rgba(0,0,0,.7);
    --glass:var(--panel); --glass-strong:var(--panel); --glass-border:var(--border); --hairline:var(--border);
  }
}
.aurora,.mode-rail,#confetti,.progress-bar,.stepper{display:none !important;}
body{font-family:var(--sans);background:var(--bg);font-size:15px;letter-spacing:-.006em;}
h1,h2,h3,.brand{font-family:var(--sans);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.card,.card:not(.popover){background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--border);box-shadow:var(--shadow);}
.card .card,.history-item .output{background:var(--panel-2);border:1px solid var(--border);box-shadow:none;}
.panel.show > *{animation:none;}
.panel.show{animation:fadein .25s var(--ease);}

/* buttons: flat, quiet, one strong primary */
button{border-radius:10px;padding:10px 16px;font-size:.88rem;font-weight:600;letter-spacing:-.005em;}
button:not(:disabled):hover{transform:none;}
button:not(.secondary):not(.ghost):not(.text-btn):not(.tab):not(.icon-btn):not(.swatch):not(.theme-card):not(.pb-toggle):not(.upload-drop):not(.google-btn):not(.seg button):not(.danger):not(.tpl-card):not(.wz-choice):not(.ws-tab){
  background:var(--accent);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 1px 2px rgba(28,26,23,.12);}
button:hover:not(:disabled){filter:brightness(1.05);box-shadow:none;}
button.secondary{background:var(--panel);color:var(--ink);box-shadow:inset 0 0 0 1px var(--border),0 1px 2px rgba(28,26,23,.05);}
button.secondary:hover:not(:disabled){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 30%,var(--border));filter:none;}
button.ghost{background:transparent;color:var(--sub);border-radius:8px;box-shadow:none;padding:7px 10px;font-size:.84rem;}
button.ghost:hover:not(:disabled){background:var(--panel-2);color:var(--ink);box-shadow:none;}
.text-btn{font-size:.82rem;font-weight:500;}
.seg{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;}
.seg button{border-radius:7px;font-weight:500;font-size:.82rem;}
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(28,26,23,.1),inset 0 0 0 1px var(--border);font-weight:600;}

/* fields */
label{font-size:.78rem;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink);margin-bottom:6px;}
.label-note{color:var(--sub);font-weight:400;}
textarea,input[type=text],input[type=password],input[type=date],select{background:var(--field);border:1px solid var(--border);border-radius:10px;font-size:.9rem;padding:10px 12px;}
textarea:focus,input:focus,select:focus{background:var(--panel);border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);}
.upload-drop{border-radius:10px;border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--border));background:color-mix(in srgb,var(--accent) 4%,var(--panel));padding:12px 14px;font-size:.84rem;}

/* app bar */
.app-screen{max-width:none;padding:0;}
.appbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.appbar-in{max-width:1360px;margin:0 auto;padding:0 28px;height:62px;display:flex;align-items:center;gap:28px;}
.brand{font-family:var(--display);font-weight:600;font-size:1.45rem;letter-spacing:-.02em;gap:9px;}
.brand-logo{width:1.15em;height:1.15em;}
.appbar .tabs{background:none;border:none;box-shadow:none;padding:0;margin:0;gap:4px;height:62px;align-items:stretch;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;}
.appbar .tab{color:var(--sub);font-weight:500;font-size:.9rem;padding:0 12px;border-radius:0;background:none;}
.appbar .tab:hover:not(.active):not(:disabled){color:var(--ink);}
.appbar .tab.active{color:var(--ink);font-weight:600;}
.appbar .tab-ind{top:auto;bottom:-1px;height:2px;border-radius:2px;background:var(--accent);box-shadow:none;left:4px;}
.top-right{margin-left:auto;gap:6px;}
.fb-open{display:inline-flex;align-items:center;gap:6px;}
.user-chip{gap:8px;font-size:.84rem;color:var(--sub);padding-left:10px;margin-left:4px;border-left:1px solid var(--border);}
.user-chip img,.user-chip .avatar{width:30px;height:30px;}
.user-chip .avatar{background:var(--accent);}
.user-chip button.ghost{border-radius:8px;}

/* main + footer */
.app-main{max-width:1360px;margin:0 auto;padding:28px 28px 20px;}
.app-footer{max-width:1360px;margin:0 auto;padding:22px 28px 36px;display:flex;flex-direction:row;align-items:center;gap:20px;border-top:1px solid var(--border);font-size:.82rem;color:var(--sub);}
.app-footer nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center;}
.app-footer nav a{color:var(--sub);text-decoration:none;}
.app-footer nav a:hover,.app-footer nav .text-btn:hover{color:var(--ink);text-decoration:none;}
.app-footer nav .text-btn{margin:0;color:var(--sub);font-size:.82rem;}
.foot-brand{font-family:var(--display);font-weight:600;color:var(--ink);font-size:1rem;}
.app-footer .coffee-btn{margin-left:auto;}
.coffee-btn.coffee-sm{font-size:1.05rem;padding:3px 12px 3px 9px;border-radius:8px;}

/* key banner */
.key-banner{margin-bottom:20px;}

/* ---------- workspace: compose on the left, results on the right ---------- */
.workspace{display:grid;grid-template-columns:minmax(380px,440px) 1fr;gap:24px;align-items:start;}
.workspace > .compose{display:flex;flex-direction:column;position:sticky;top:86px;max-height:calc(100vh - 106px);overflow:hidden;padding:0;}
.compose-scroll{overflow:auto;padding:24px 24px 8px;scrollbar-width:thin;}
.compose-head{margin-bottom:18px;}
.page-title{font-family:var(--display);font-weight:600;font-size:1.75rem;letter-spacing:-.02em;margin:0 0 4px;line-height:1.1;}
.compose-head .muted,.page-head .muted{margin:0;font-size:.9rem;}
.sect{padding:18px 0 4px;border-top:1px solid var(--border);}
.sect-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.sect-head h2{font-family:var(--sans);font-size:.95rem;font-weight:600;margin:0;letter-spacing:-.01em;}
.sect-num{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);}
.compose .grid2{gap:12px;}
.compose .field{margin-bottom:12px;}
.compose #jd{min-height:170px;}
.compose #resume{min-height:130px;}
.compose .text-btn{margin-top:6px;}
.more{border-top:1px solid var(--border);padding:14px 0 6px;margin-top:6px;}
.more summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:10px;font-weight:600;font-size:.92rem;}
.more summary::-webkit-details-marker{display:none;}
.more summary::before{content:"";width:7px;height:7px;border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);transform:rotate(-45deg) translateY(-1px);transition:transform .2s;margin-right:2px;}
.more[open] summary::before{transform:rotate(45deg) translateY(-2px);}
.more summary small{color:var(--sub);font-weight:400;font-size:.8rem;}
.more-body{padding-top:14px;display:grid;gap:14px;}
.more-body .opt{margin:0;}
.compose-foot{padding:14px 24px 16px;border-top:1px solid var(--border);background:var(--panel);}
.compose-foot .actions{margin:0;}
.compose-foot .actions button{flex:1;justify-content:center;}
.compose-foot .status{margin-top:8px;font-size:.82rem;min-height:0;}
.compose-foot .status:empty{display:none;}

.results{padding:0;min-height:calc(100vh - 140px);display:flex;flex-direction:column;}
.ws-head{padding:0 20px;border-bottom:1px solid var(--border);position:sticky;top:62px;z-index:5;background:var(--panel);border-radius:var(--radius) var(--radius) 0 0;}
.ws-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;}
.ws-tab{background:none !important;color:var(--sub);box-shadow:none !important;border-radius:0;padding:16px 12px 14px;font-size:.88rem;font-weight:500;border-bottom:2px solid transparent;white-space:nowrap;}
.ws-tab:hover:not(:disabled){color:var(--ink);filter:none;box-shadow:none;}
.ws-tab.active{color:var(--ink);font-weight:600;border-bottom-color:var(--accent);}
.ws-tab:disabled{opacity:.4;}
.ws-body{padding:24px;flex:1;}
.ws-body .card{box-shadow:none;}
.ws-panel > .card,.ws-panel #fitResult > .card,.ws-panel > #boostArea > .card{border:none;background:none;padding:0;margin:0;}
.ws-panel #fitResult > .fit{margin:0;}
.ws-panel .boost{background:color-mix(in srgb,var(--accent) 7%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 25%,var(--border)) !important;padding:16px 18px !important;margin-bottom:22px !important;border-radius:12px;}
.ws-panel .skeleton{padding:6px 0;margin:0;}
.empty-state{max-width:520px;margin:48px auto;text-align:center;}
.es-art{color:var(--ink);opacity:.9;}
.empty-state h2{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:-.015em;margin:14px 0 6px;}
.empty-state > .muted{margin:0 0 26px;}
.es-steps{list-style:none;padding:0;margin:0;text-align:left;display:grid;gap:0;border-top:1px solid var(--border);}
.es-steps li{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:12px 2px;border-bottom:1px solid var(--border);font-size:.88rem;color:var(--sub);}
.es-steps li span{color:var(--ink);font-weight:600;}
.working{max-width:640px;}
.working .paper{height:360px;border-radius:8px;}
.working p{margin-top:14px;}
.result-card{padding:0;border:none;background:none;}
.result-head h3{font-family:var(--display);font-weight:600;font-size:1.25rem;}
.dl-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:16px 0 4px;position:sticky;bottom:0;background:var(--panel);padding:12px 0;border-top:1px solid var(--border);z-index:2;}
.dl-bar #trackBtn{margin-left:auto;}
details.plain{margin-top:10px;border:1px solid var(--border);border-radius:12px;padding:0 14px;}
details.plain summary{cursor:pointer;list-style:none;padding:12px 0;font-weight:600;font-size:.88rem;display:flex;gap:8px;align-items:baseline;}
details.plain summary::-webkit-details-marker{display:none;}
details.plain summary small{color:var(--sub);font-weight:400;}
details.plain[open] summary{border-bottom:1px solid var(--border);margin-bottom:10px;}
details.plain .output{max-height:360px;}
.preview-wrap{background:var(--panel-2);border-radius:12px;}
.support-note{margin-top:18px;padding:12px 0 0;border:none;border-top:1px solid var(--border);background:none;font-size:.84rem;color:var(--sub);border-radius:0;}
.ats-head h3,.cover-head h3,.fit-head h3{font-family:var(--display);font-weight:600;}
.cover-head .kb-icon{display:none;}

/* pages: history, tracker, settings */
.panel.page{max-width:980px;margin:0 auto;}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:6px 0 22px;}
.settings{padding:0;display:grid;gap:14px;background:none;border:none;box-shadow:none;}
.set-row{display:grid;grid-template-columns:240px 1fr;gap:24px;padding:22px 24px;}
.set-label h3{font-family:var(--sans);font-size:.95rem;font-weight:600;margin:0 0 4px;}
.set-label p{margin:0;}
.set-body .field:last-of-type{margin-bottom:12px;}
@media (max-width:760px){.set-row{grid-template-columns:1fr;gap:12px;}}
.history-item,.app-card{box-shadow:none;}
.history-item:hover,.app-card:hover{transform:none;}

/* feedback dialog (shares the wizard's modal look) */
.dlg{width:min(520px,calc(100vw - 32px));padding:28px;border-radius:16px;box-shadow:var(--shadow-lg);color:var(--ink);background:var(--panel);}
.dlg::backdrop{background:rgba(20,18,15,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.dlg h2{font-family:var(--display);font-weight:600;font-size:1.5rem;margin:0 0 6px;}
.dlg .seg{grid-template-columns:repeat(3,1fr);margin-top:16px;}
.dlg textarea{min-height:130px;}
.dlg-close{position:absolute;top:14px;right:14px;}
.dlg-actions{justify-content:flex-end;margin-top:16px;}
.check-row{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;font-weight:400;color:var(--ink);cursor:pointer;}
.check-row input{width:auto;margin-top:3px;accent-color:var(--accent);}
.wizard{background:var(--panel);box-shadow:var(--shadow-lg);}
.toast{background:var(--ink);color:var(--bg);border-radius:12px;}

/* sign-in */
.signin-screen{max-width:none;padding:0;min-height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden;
  background-image:linear-gradient(color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px);
  background-size:48px 48px;}
.signin-top{max-width:1200px;width:100%;margin:0 auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;}
.signin-top .brand{font-size:1.5rem;}
.signin-guides{color:var(--ink);font-weight:500;font-size:.9rem;text-decoration:none;}
.signin-guides:hover{color:var(--accent);}
.signin-main{flex:1;max-width:1200px;width:100%;margin:0 auto;padding:4vh 32px 90px;display:grid;grid-template-columns:1.25fr .9fr;gap:64px;align-items:center;}
.eyebrow{font:500 .78rem/1 ui-monospace,'SFMono-Regular',Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin:0 0 18px;}
.display{font-family:var(--display);font-weight:600;font-size:clamp(2.6rem,5.2vw,4.4rem);line-height:1.0;letter-spacing:-.03em;margin:0 0 22px;}
.display em{font-style:italic;font-weight:400;color:var(--accent);}
.lede{font-size:1.08rem;line-height:1.55;color:var(--sub);max-width:560px;margin:0 0 30px;}
.how{list-style:none;padding:0;margin:0;max-width:560px;border-top:1px solid var(--border);}
.how li{display:grid;grid-template-columns:52px 1fr;padding:14px 0;border-bottom:1px solid var(--border);font-size:.92rem;color:var(--sub);}
.how li span{font:500 .8rem ui-monospace,Menlo,monospace;color:var(--accent);padding-top:2px;}
.how li b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px;}
.signin-card{padding:34px 32px;text-align:left;border-radius:18px;box-shadow:var(--shadow-lg);}
.signin-card h2{font-family:var(--display);font-weight:600;font-size:1.7rem;margin:0 0 6px;letter-spacing:-.02em;}
.signin-card > .muted{margin:0 0 24px;line-height:1.5;}
.google-btn{width:100%;justify-content:center;background:var(--panel) !important;color:var(--ink);border-radius:10px;padding:12px 18px;box-shadow:inset 0 0 0 1px var(--border),0 1px 2px rgba(28,26,23,.06) !important;font-size:.92rem;}
.google-btn:hover:not(:disabled){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 35%,var(--border)) !important;filter:none;transform:none;}
.signin-card .fine{text-align:left;font-size:.8rem;line-height:1.5;margin-top:18px;}
.signin-clip{font-size:.86rem;background:color-mix(in srgb,var(--accent) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));border-radius:10px;padding:10px 12px;margin:14px 0 0;}
.stitch{position:absolute;left:0;right:0;bottom:64px;width:100%;height:60px;pointer-events:none;}
.stitch path{fill:none;stroke:var(--accent);stroke-width:3;stroke-dasharray:12 10;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.85;}
.signin-foot{max-width:1200px;width:100%;margin:0 auto;padding:0 32px 26px;display:flex;gap:22px;flex-wrap:wrap;font-size:.84rem;}
.signin-foot a{color:var(--sub);text-decoration:none;}
.signin-foot a:hover{color:var(--ink);}

/* responsive */
@media (max-width:1099px){
  .workspace{grid-template-columns:1fr;}
  .workspace > .compose{position:static;max-height:none;overflow:visible;}
  .compose-scroll{overflow:visible;}
  .results{min-height:0;}
  .ws-head{top:62px;}
}
@media (max-width:860px){
  .signin-main{grid-template-columns:1fr;gap:36px;padding-top:2vh;}
  .stitch{display:none;}
}
@media (max-width:700px){
  .appbar-in{padding:0 14px;gap:12px;height:56px;}
  .appbar .tabs{height:56px;}
  .appbar .tab{padding:0 8px;font-size:.86rem;}
  .fb-open span,.user-chip .name{display:none;}
  .user-chip{border:none;padding:0;margin:0;}
  .app-main{padding:16px 12px;}
  .compose-scroll{padding:18px 16px 4px;}
  .compose-foot{padding:12px 16px 14px;position:sticky;bottom:0;z-index:6;box-shadow:0 -6px 16px -10px rgba(28,26,23,.2);border-radius:0 0 var(--radius) var(--radius);}
  .ws-body{padding:16px;}
  .ws-head{top:56px;padding:0 8px;}
  .es-steps li{grid-template-columns:96px 1fr;}
  .app-footer{flex-wrap:wrap;padding:20px 16px 30px;}
  .app-footer .coffee-btn{margin-left:0;}
  .signin-top,.signin-main,.signin-foot{padding-left:18px;padding-right:18px;}
}
@media (max-width:520px){
  .appbar .brand{font-size:0;gap:0;}
  .appbar .brand-logo{width:26px;height:26px;}
  .user-chip button.ghost{display:none;}
  .appbar .tabs{overflow-x:auto;scrollbar-width:none;}
}
.account-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.workspace > *{min-width:0;}
#results{scroll-margin-top:74px;}
.ws-panel .tpl-picker{overflow-x:auto;scrollbar-width:thin;padding-bottom:4px;}
.preview-wrap canvas{max-width:100%;height:auto;}
@media (max-width:700px){ #results{scroll-margin-top:64px;} .ws-panel .tpl-picker{display:flex;} .ws-panel .tpl-card{flex:0 0 140px;} }
/* legal pages and blog follow the same calm look */
.legal h1,.blog-post h1,.blog-index h1,.legal-top .brand{font-family:var(--display);font-weight:600;letter-spacing:-.02em;}
.legal h2,.blog-post h2{letter-spacing:-.01em;}
/* 2.1.1: notice for Instagram/Facebook in-app browsers, where Google sign-in is blocked */
.inapp-note{border:1px solid color-mix(in srgb,var(--accent) 40%,var(--border));background:color-mix(in srgb,var(--accent) 8%,var(--panel));border-radius:12px;padding:14px 16px;margin:0 0 16px;font-size:.88rem;line-height:1.5;}
.inapp-note p{margin:0 0 8px;}
.inapp-note .muted{font-size:.84rem;}
.inapp-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 8px;}
.inapp-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-weight:600;font-size:.88rem;padding:10px 16px;border-radius:10px;text-decoration:none;}
.inapp-btn:hover{filter:brightness(1.05);text-decoration:none;}
.inapp-url{display:block;font-size:.74rem;color:var(--sub);word-break:break-all;user-select:all;-webkit-user-select:all;}