*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{max-width:100vw;overflow-x:hidden}
img,svg{max-width:100%;display:block}

:root{
  --black:#f2f5fa;
  --dark:#ffffff;
  --card:#ffffff;
  --card2:#eef2f8;
  --card3:#e8edf5;
  --border:#d4dde9;
  --border2:#c8d4e3;
  --accent:#ff4d00;
  --accent-glow:rgba(255,77,0,.15);
  --accent-soft:rgba(255,77,0,.07);
  --a2:#ffb800;
  --vue:#42b883;
  --success:#16a34a;
  --success-bg:rgba(22,163,74,.08);
  --danger:#dc2626;
  --danger-bg:rgba(220,38,38,.06);
  --blue:#2563eb;
  --blue-bg:rgba(37,99,235,.06);
  --white:#111827;
  --muted:#64748b;
  --muted2:#94a3b8;
  --font-d:'Bebas Neue',sans-serif;
  --font-b:'DM Sans',sans-serif;
  --font-m:'JetBrains Mono',monospace;
  --nav-h:64px;
  --radius:12px;
  --radius-sm:8px;
  --radius-xs:5px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow:0 4px 16px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.04);
  --shadow-md:0 8px 28px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.05);
  --shadow-accent:0 8px 28px rgba(255,77,0,.22);
}

html{scroll-behavior:smooth}
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--black);
  color:var(--white);
  font-family:var(--font-b);
  font-size:16px;
  line-height:1.6;
}

/* Subtle grid background */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:48px 48px;
  opacity:.35;
  pointer-events:none;
  z-index:0;
}
body::after{
  content:'';
  position:fixed;
  inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(255,77,0,.06),transparent 70%);
  pointer-events:none;
  z-index:0;
}

/* ─────────── NAV ─────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);
  padding:0 clamp(16px,4vw,44px);
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid transparent;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.nav.stuck{
  background:rgba(242,245,250,.94);
  border-color:var(--border);
  backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.nav-logo{
  font-family:var(--font-d);
  font-size:clamp(1.25rem,3vw,1.75rem);
  letter-spacing:2.5px;
  color:var(--white);
  text-decoration:none;
  flex-shrink:0;
}
.nav-logo b{color:var(--accent);font-weight:400}

.nav-links{display:flex;gap:clamp(12px,2vw,28px);list-style:none;align-items:center}
.nav-links a{
  color:var(--muted);
  text-decoration:none;
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.9px;
  text-transform:uppercase;
  transition:color .2s;
  white-space:nowrap;
  position:relative;
}
.nav-links a::after{
  content:'';
  position:absolute;
  bottom:-3px;left:0;right:0;
  height:1.5px;
  background:var(--accent);
  transform:scaleX(0);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
  transform-origin:left;
}
.nav-links a:hover{color:var(--white)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--accent)}
.nav-links a.nav-feature{
  color:var(--accent);
  border:1px solid rgba(255,77,0,.3);
  border-radius:999px;
  padding:7px 14px;
  background:var(--accent-soft);
}
.nav-links a.nav-feature::after{display:none}
.nav-links a.nav-feature:hover{
  border-color:var(--accent);
  background:rgba(255,77,0,.16);
}
.nav-cta{
  background:var(--accent)!important;
  color:#fff!important;
  padding:7px 18px;
  border-radius:var(--radius-xs);
  font-weight:600!important;
}
.nav-cta::after{display:none!important}

.ham{
  display:none;flex-direction:column;gap:5px;
  cursor:pointer;border:none;background:none;padding:6px;flex-shrink:0;
}
.ham span{
  width:22px;height:2px;
  background:var(--white);border-radius:2px;
  display:block;transition:all .3s;
}
.mob{
  display:none;position:fixed;inset:0;
  background:rgba(242,245,250,.99);
  z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:32px;
  backdrop-filter:blur(16px);
}
.mob.on{display:flex}
.mob a{
  font-family:var(--font-d);
  font-size:clamp(1.8rem,6vw,2.8rem);
  color:var(--white);text-decoration:none;
  letter-spacing:2px;
  transition:color .2s,transform .2s;
}
.mob a:hover{color:var(--accent);transform:translateX(6px)}
.mob a.nav-feature{
  color:var(--accent);
  border:1px solid rgba(255,77,0,.35);
  border-radius:999px;
  padding:8px 18px;
  background:var(--accent-soft);
}
.mob a.nav-feature:hover{transform:none;background:rgba(255,77,0,.16)}
.mob-x{
  position:absolute;top:22px;right:clamp(16px,4vw,38px);
  font-size:1.6rem;background:none;border:none;color:var(--muted);cursor:pointer;
  transition:color .2s,transform .2s;
}
.mob-x:hover{color:var(--accent);transform:rotate(90deg)}

/* ─────────── PAGE ─────────── */
.page{
  position:relative;z-index:1;
  flex:1 0 auto;width:100%;
  padding-top:calc(var(--nav-h) + clamp(28px,4vw,52px));
  padding-bottom:100px;
  padding-left:clamp(16px,4vw,44px);
  padding-right:clamp(16px,4vw,44px);
  max-width:940px;margin:0 auto;
}

/* ─────────── HERO ─────────── */
.pg-header{
  margin-bottom:clamp(24px,4vw,40px);
  animation:fadeUp .5s cubic-bezier(.4,0,.2,1) both;
}
.pg-bc{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-m);font-size:.63rem;
  color:var(--muted2);margin-bottom:18px;flex-wrap:wrap;
}
.pg-bc a{color:var(--muted2);text-decoration:none;transition:color .2s}
.pg-bc a:hover{color:var(--accent)}
.pg-bc-sep{color:var(--border2);font-size:.8rem}

.ai-kicker{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent-soft);
  border:1px solid rgba(255,77,0,.2);
  padding:5px 14px 5px 10px;
  border-radius:100px;
  font-family:var(--font-m);font-size:.65rem;
  color:var(--accent);
  margin-bottom:18px;
  letter-spacing:.3px;
}
.kicker-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  animation:blink 1.6s infinite;
  flex-shrink:0;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

.pg-title{
  font-family:var(--font-d);
  font-size:clamp(2.2rem,6vw,4rem);
  line-height:.92;letter-spacing:1.5px;
  color:var(--white);
  margin-bottom:12px;
}
.pg-title span{
  color:var(--accent);
  position:relative;
  display:inline-block;
}
.pg-sub{
  color:var(--muted);font-size:.9rem;
  line-height:1.75;max-width:540px;
}

/* ─────────── HOW IT WORKS ─────────── */
.how-steps{
  display:flex;align-items:center;gap:0;
  overflow-x:auto;padding-bottom:4px;
  margin-bottom:clamp(20px,3vw,32px);
  animation:fadeUp .45s .05s cubic-bezier(.4,0,.2,1) both;
  scrollbar-width:none;
}
.how-steps::-webkit-scrollbar{display:none}
.hs-node{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  flex-shrink:0;
}
.hs-num{
  width:32px;height:32px;border-radius:50%;
  background:var(--card);
  border:1.5px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-m);font-size:.62rem;
  color:var(--muted);
  box-shadow:var(--shadow-sm);
  transition:all .25s;
}
.hs-node:hover .hs-num{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-soft);
}
.hs-lbl{
  font-family:var(--font-m);font-size:.56rem;
  color:var(--muted2);text-transform:uppercase;
  letter-spacing:.5px;white-space:nowrap;
}
.hs-line{
  height:1px;
  background:linear-gradient(90deg,var(--border2),var(--border));
  width:clamp(18px,4vw,52px);
  margin:0 4px;margin-bottom:22px;
  flex-shrink:0;
  position:relative;
}
.hs-line::after{
  content:'';
  position:absolute;
  top:-1.5px;right:-1px;
  width:3px;height:3px;
  border-radius:50%;
  background:var(--border2);
}

/* ─────────── STATUS BAR ─────────── */
.status-bar{
  background:var(--card);
  border:1px solid var(--border2);
  border-radius:var(--radius);
  padding:clamp(14px,2.5vw,20px) clamp(16px,3vw,22px);
  display:flex;align-items:center;gap:14px;
  margin-bottom:clamp(12px,2.5vw,18px);
  animation:fadeUp .4s .06s cubic-bezier(.4,0,.2,1) both;
  transition:all .3s;
  box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
}
.status-bar::before{
  content:'';
  position:absolute;left:0;top:0;bottom:0;
  width:3px;
  border-radius:var(--radius) 0 0 var(--radius);
  background:var(--border2);
  transition:background .3s;
}
.status-bar.ok{border-color:rgba(22,163,74,.2);background:rgba(22,163,74,.03)}
.status-bar.ok::before{background:var(--success)}
.status-bar.err{border-color:rgba(220,38,38,.2);background:rgba(220,38,38,.03)}
.status-bar.err::before{background:var(--danger)}
.status-bar.warn{border-color:rgba(255,184,0,.2);background:rgba(255,184,0,.03)}
.status-bar.warn::before{background:var(--a2)}
.status-bar.rate{border-color:rgba(37,99,235,.2);background:rgba(37,99,235,.03)}
.status-bar.rate::before{background:var(--blue)}
.status-bar.info::before{background:var(--accent)}

.status-ico{
  font-size:1.5rem;flex-shrink:0;line-height:1;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.1));
}
.status-body{flex:1;min-width:0}
.status-title{
  font-weight:700;font-size:.85rem;
  color:var(--white);margin-bottom:2px;
}
.status-desc{font-size:.76rem;color:var(--muted);line-height:1.5}
.status-desc a{color:var(--accent);text-decoration:none;font-weight:600}
.status-desc a:hover{text-decoration:underline}

/* ─────────── RATE LIMIT ─────────── */
.rate-banner{
  display:none;
  background:var(--blue-bg);
  border:1px solid rgba(37,99,235,.18);
  border-radius:var(--radius);
  padding:clamp(16px,2.5vw,22px);
  margin-bottom:clamp(12px,2.5vw,18px);
  animation:fadeUp .35s cubic-bezier(.4,0,.2,1) both;
  box-shadow:var(--shadow-sm);
}
.rate-banner.on{display:block}
.rate-title{
  font-family:var(--font-d);font-size:1rem;
  letter-spacing:1px;color:var(--blue);
  margin-bottom:7px;
  display:flex;align-items:center;gap:8px;
}
.rate-desc{color:var(--muted);font-size:.81rem;line-height:1.7;margin-bottom:14px}
.rate-timer{
  font-family:var(--font-m);font-size:.74rem;
  color:var(--blue);
  background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.14);
  border-radius:var(--radius-xs);
  padding:6px 13px;display:inline-block;margin-bottom:10px;
}
.rate-bar-wrap{
  height:5px;background:var(--card2);
  border:1px solid var(--border);
  border-radius:99px;overflow:hidden;margin-top:8px;
}
.rate-bar-fill{
  height:100%;
  background:linear-gradient(90deg,var(--blue),#60a5fa);
  border-radius:99px;
  transition:width 1s linear;width:0%;
}

/* ─────────── PROFILE CARD ─────────── */
.profile-card{
  display:none;
  background:var(--card);
  border:1px solid var(--border2);
  border-radius:var(--radius);
  padding:clamp(16px,2.5vw,22px) clamp(16px,3vw,22px);
  margin-bottom:clamp(12px,2.5vw,18px);
  animation:fadeUp .4s .07s cubic-bezier(.4,0,.2,1) both;
  box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
}
.profile-card.on{display:block}
.profile-card::after{
  content:'';
  position:absolute;
  top:0;right:0;
  width:200px;height:200px;
  background:radial-gradient(circle at 100% 0%,rgba(255,77,0,.04),transparent 65%);
  pointer-events:none;
}
.profile-top{
  display:flex;align-items:center;gap:clamp(12px,2.5vw,16px);
  flex-wrap:wrap;margin-bottom:14px;
}
.profile-av{
  width:clamp(44px,9vw,56px);height:clamp(44px,9vw,56px);
  border-radius:50%;
  background:linear-gradient(135deg,rgba(255,77,0,.1),rgba(255,184,0,.1));
  border:2px solid rgba(255,77,0,.15);
  overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-size:clamp(.9rem,2.5vw,1.3rem);
  color:var(--accent);
  box-shadow:0 0 0 4px rgba(255,77,0,.06);
}
.profile-av img{width:100%;height:100%;object-fit:cover}
.profile-name{
  font-family:var(--font-d);
  font-size:clamp(1.2rem,3vw,1.7rem);
  letter-spacing:.5px;color:var(--white);
  line-height:1;
}
.profile-role{
  font-family:var(--font-m);font-size:.64rem;
  color:var(--muted);margin-top:4px;
  letter-spacing:.3px;
}
.profile-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.ptag{
  padding:3px 9px;border-radius:var(--radius-xs);
  font-family:var(--font-m);font-size:.6rem;
  background:var(--accent-soft);
  border:1px solid rgba(255,77,0,.15);
  color:var(--accent);
  transition:all .2s;
}
.ptag:hover{background:rgba(255,77,0,.12);border-color:rgba(255,77,0,.3)}
.profile-meta{
  display:flex;gap:16px;flex-wrap:wrap;
  margin-top:10px;
  font-family:var(--font-m);font-size:.65rem;
  color:var(--muted);
  padding-top:10px;
  border-top:1px solid var(--border);
}
.profile-meta span{display:flex;align-items:center;gap:4px}

/* ─────────── MISSING FIELDS ─────────── */
.missing-wrap{
  display:none;
  margin-bottom:clamp(12px,2.5vw,18px);
  animation:fadeUp .35s cubic-bezier(.4,0,.2,1) both;
}
.missing-wrap.on{display:block}
.missing-title{
  font-family:var(--font-m);font-size:.67rem;
  text-transform:uppercase;letter-spacing:.6px;
  color:var(--danger);margin-bottom:7px;
  display:flex;align-items:center;gap:6px;
}
.missing-item{
  display:flex;align-items:center;gap:9px;
  padding:9px 14px;
  background:var(--danger-bg);
  border:1px solid rgba(220,38,38,.12);
  border-radius:var(--radius-sm);
  font-size:.8rem;color:var(--danger);
  margin-bottom:6px;
  transition:all .2s;
}
.missing-item:last-child{margin-bottom:0}
.missing-item:hover{background:rgba(220,38,38,.1);border-color:rgba(220,38,38,.2)}

/* ─────────── ACTION CARD ─────────── */
.action-card{
  background:var(--card);
  border:1px solid var(--border2);
  border-radius:var(--radius);
  padding:clamp(18px,3vw,28px);
  margin-bottom:clamp(12px,2.5vw,18px);
  animation:fadeUp .4s .08s cubic-bezier(.4,0,.2,1) both;
  box-shadow:var(--shadow-sm);
}

.find-btn{
  width:100%;
  background:linear-gradient(135deg,#ff4d00,#ff6b2a);
  color:#fff;border:none;
  border-radius:var(--radius-sm);
  padding:clamp(14px,2.2vw,17px) 28px;
  font-size:.9rem;font-weight:700;
  font-family:var(--font-b);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  letter-spacing:.4px;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden;
  min-height:54px;
  box-shadow:0 4px 16px rgba(255,77,0,.2),0 1px 3px rgba(255,77,0,.15);
}
.find-btn::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 60%);
  opacity:0;
  transition:opacity .25s;
}
.find-btn:hover:not(:disabled){
  background:linear-gradient(135deg,#e64400,#ff5a1f);
  transform:translateY(-2px);
  box-shadow:var(--shadow-accent);
}
.find-btn:hover:not(:disabled)::before{opacity:1}
.find-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px rgba(255,77,0,.2)}
.find-btn:disabled{
  opacity:.4;cursor:not-allowed;
  transform:none;box-shadow:none;
  background:linear-gradient(135deg,#ff4d00,#ff6b2a);
}

/* ─────────── LOADING ─────────── */
.loading-area{display:none;margin-top:20px}
.loading-area.on{display:block}
.loading-track{
  height:3px;
  background:var(--card2);
  border-radius:99px;overflow:hidden;
  margin-bottom:18px;
  border:1px solid var(--border);
}
.loading-fill{
  height:100%;
  background:linear-gradient(90deg,var(--accent),var(--a2),var(--accent));
  background-size:200%;
  border-radius:99px;
  animation:shimmer 1.5s linear infinite;
  width:70%;
}
@keyframes shimmer{0%{background-position:0%}100%{background-position:200%}}

.loading-step{
  display:flex;align-items:center;gap:10px;
  padding:8px 0;
  font-family:var(--font-m);font-size:.72rem;
  color:var(--muted2);
  opacity:0;transform:translateX(-10px);
  transition:all .4s cubic-bezier(.4,0,.2,1);
  border-left:2px solid transparent;
  padding-left:10px;margin-left:-1px;
}
.loading-step.active{
  opacity:1;transform:none;
  color:var(--accent);
  border-left-color:var(--accent);
}
.loading-step.done{
  opacity:1;transform:none;
  color:var(--success);
  border-left-color:var(--success);
}
.ls-ico{
  width:18px;height:18px;border-radius:50%;
  border:1.5px solid currentColor;
  display:flex;align-items:center;justify-content:center;
  font-size:.56rem;flex-shrink:0;
  transition:all .3s;
}
.loading-step.done .ls-ico{
  background:var(--success);border-color:var(--success);color:#fff;
  box-shadow:0 2px 8px rgba(22,163,74,.3);
}
.loading-step.active .ls-ico{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,77,0,.1);
}

/* ─────────── RESULTS ─────────── */
.results-section{display:none;margin-top:24px;animation:fadeUp .4s cubic-bezier(.4,0,.2,1) both}
.results-section.on{display:block}
.results-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;gap:10px;
}
.results-title{
  font-family:var(--font-d);font-size:1.1rem;
  letter-spacing:1.5px;color:var(--white);
}
.results-badge{
  background:rgba(22,163,74,.1);
  border:1px solid rgba(22,163,74,.2);
  color:var(--success);
  font-family:var(--font-m);font-size:.63rem;
  font-weight:700;padding:3px 11px;border-radius:100px;
}

.job-grid{display:flex;flex-direction:column;gap:8px}

.job-subtitle{
  font-family:var(--font-m);font-size:.66rem;
  color:var(--accent);text-transform:uppercase;
  letter-spacing:.8px;
  margin-top:10px;margin-bottom:4px;
  display:flex;align-items:center;gap:8px;
}
.job-subtitle::after{
  content:'';flex:1;
  height:1px;background:linear-gradient(90deg,rgba(255,77,0,.2),transparent);
}

.job-card{
  background:var(--card2);
  border:1px solid var(--border2);
  border-radius:var(--radius-sm);
  padding:clamp(13px,2vw,18px);
  display:grid;grid-template-columns:1fr auto;
  gap:12px;align-items:start;
  transition:all .22s cubic-bezier(.4,0,.2,1);
  text-decoration:none;color:inherit;
  cursor:pointer;
  animation:fadeUp .35s cubic-bezier(.4,0,.2,1) both;
  box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
}
.job-card::before{
  content:'';
  position:absolute;left:0;top:0;bottom:0;
  width:2px;background:transparent;
  transition:background .22s;
}
.job-card:hover{
  border-color:rgba(255,77,0,.25);
  transform:translateY(-2px);
  box-shadow:0 6px 22px rgba(0,0,0,.08);
  background:var(--card);
}
.job-card:hover::before{background:var(--accent)}

.job-role{font-weight:700;font-size:.9rem;color:var(--white);margin-bottom:4px}
.job-company{
  font-size:.75rem;color:var(--muted);
  margin-bottom:8px;
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
}
.job-company-sep{color:var(--border2);margin:0 2px}
.job-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.job-tag{
  padding:2px 8px;border-radius:var(--radius-xs);
  font-family:var(--font-m);font-size:.62rem;
  background:var(--card3);
  border:1px solid var(--border2);
  color:var(--muted);
}
.job-tag.match{
  background:var(--accent-soft);
  border-color:rgba(255,77,0,.18);
  color:var(--accent);
  font-weight:600;
}
.job-url{
  font-family:var(--font-m);font-size:.65rem;
  color:var(--blue);word-break:break-word;overflow-wrap:anywhere;
  display:flex;align-items:flex-start;gap:4px;line-height:1.5;
  opacity:.8;
}
.job-actions{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.job-link-btn{
  font-family:var(--font-m);font-size:.62rem;
  border:1px solid var(--border2);
  background:var(--card);
  color:var(--muted);border-radius:var(--radius-xs);
  padding:6px 10px;text-decoration:none;
  display:inline-flex;align-items:center;gap:5px;
  transition:all .2s;
}
.job-link-btn:hover{border-color:var(--accent);color:var(--accent)}
.job-link-btn.apply{
  background:rgba(22,163,74,.1);
  border-color:rgba(22,163,74,.25);
  color:var(--success);font-weight:700;
}
.job-link-btn.apply:hover{background:rgba(22,163,74,.18);border-color:rgba(22,163,74,.4)}

.match-box{
  background:var(--card);
  border:1px solid var(--border2);
  border-radius:var(--radius-sm);
  padding:10px 12px;text-align:center;
  min-width:56px;flex-shrink:0;
  box-shadow:var(--shadow-sm);
}
.match-pct{
  font-family:var(--font-d);font-size:1.25rem;
  letter-spacing:1px;color:var(--success);line-height:1;
}
.match-lbl{
  font-family:var(--font-m);font-size:.54rem;
  color:var(--muted2);text-transform:uppercase;
  letter-spacing:.6px;margin-top:3px;
}

/* ─────────── TIPS ─────────── */
.tips-card{
  display:none;
  background:var(--card);
  border:1px solid rgba(37,99,235,.18);
  border-radius:var(--radius);
  padding:clamp(16px,2.5vw,22px);
  margin-top:14px;
  animation:fadeUp .4s cubic-bezier(.4,0,.2,1) both;
  box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
}
.tips-card::before{
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,var(--blue),#60a5fa,transparent);
}
.tips-card.on{display:block}
.tips-head{
  font-family:var(--font-d);font-size:.95rem;
  letter-spacing:1.5px;color:var(--blue);
  margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.tips-body{
  font-size:.84rem;color:var(--muted);
  line-height:1.9;white-space:pre-wrap;
}
.tips-body strong{color:var(--white)}

/* ─────────── TOAST ─────────── */
.toasts{
  position:fixed;bottom:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);
  z-index:9998;display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
}
.toast{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--card);
  border:1px solid var(--border2);
  border-radius:var(--radius-sm);
  padding:12px 16px;
  max-width:min(340px,90vw);
  pointer-events:all;
  animation:slin .28s cubic-bezier(.4,0,.2,1) both;
  box-shadow:var(--shadow-md);
}
.toast.out{animation:slout .28s cubic-bezier(.4,0,.2,1) forwards}
@keyframes slin{from{opacity:0;transform:translateX(22px) scale(.97)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes slout{to{opacity:0;transform:translateX(22px) scale(.97)}}
.toast-ico{font-size:.9rem;flex-shrink:0;margin-top:1px}
.toast-title{font-weight:700;font-size:.8rem;color:var(--white);margin-bottom:2px}
.toast-msg{font-size:.71rem;color:var(--muted);line-height:1.5}
.toast.ts{border-color:rgba(22,163,74,.2)}.toast.ts .toast-title{color:var(--success)}
.toast.te{border-color:rgba(220,38,38,.2)}.toast.te .toast-title{color:var(--danger)}
.toast.ti{border-color:rgba(255,77,0,.18)}.toast.ti .toast-title{color:var(--accent)}
.toast.tw{border-color:rgba(37,99,235,.2)}.toast.tw .toast-title{color:var(--blue)}

/* ─────────── BTN ─────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 16px;border-radius:var(--radius-sm);
  font-weight:600;font-size:.78rem;
  cursor:pointer;font-family:var(--font-b);
  transition:all .22s cubic-bezier(.4,0,.2,1);
  border:1px solid transparent;text-decoration:none;
  min-height:36px;
}
.btn-g{
  border:1px solid var(--border2);
  color:var(--muted);
  background:var(--card);
  box-shadow:var(--shadow-sm);
}
.btn-g:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.btn-p{background:var(--accent);color:#fff;box-shadow:0 3px 10px rgba(255,77,0,.2)}
.btn-p:hover{background:#e64400;box-shadow:0 4px 14px rgba(255,77,0,.3)}
.btn-sm{padding:5px 11px;font-size:.71rem}

/* ─────────── SPINNER ─────────── */
.spin-ico{
  display:inline-block;width:15px;height:15px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;
  animation:rot .7s linear infinite;flex-shrink:0;
}
@keyframes rot{to{transform:rotate(360deg)}}

/* ─────────── ANIMATIONS ─────────── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

/* ─────────── FOOTER ─────────── */
footer{
  position:relative;z-index:1;
  margin-top:auto;
  background:var(--dark);
  border-top:1px solid var(--border);
  padding:clamp(18px,3vw,32px) clamp(16px,4vw,44px);
}
.fi{
  max-width:940px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
}
.fl{
  font-family:var(--font-d);
  font-size:clamp(1rem,2.5vw,1.3rem);
  letter-spacing:2px;color:var(--white);
}
.fl b{color:var(--accent);font-weight:400}
.fc{color:var(--muted2);font-size:.71rem}
.flinks{display:flex;gap:clamp(12px,2vw,20px);list-style:none;flex-wrap:wrap}
.flinks a{
  color:var(--muted2);text-decoration:none;
  font-size:.71rem;transition:color .2s;
}
.flinks a:hover{color:var(--white)}

/* ─────────── DIVIDER ─────────── */
.section-divider{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
  margin:clamp(14px,2.5vw,20px) 0;
}


.profile-main{flex:1;min-width:0}
.loading-track-wrap{margin-top:16px}

/* ─────────── RESPONSIVE ─────────── */
@media(max-width:820px){.nav-links{display:none}.ham{display:flex}}
@media(max-width:600px){
  :root{--nav-h:58px}
  .page{padding-left:14px;padding-right:14px}
  .action-card,.status-bar,.profile-card,.tips-card,.rate-banner{border-radius:var(--radius-sm)}
  .job-card{grid-template-columns:1fr;gap:10px;padding:12px}
  .match-box{width:fit-content}
  .find-btn{width:100%;justify-content:center}
}
@media(max-width:430px){
  :root{--nav-h:54px}
  .pg-title{font-size:1.9rem}
  .profile-top{flex-wrap:wrap;gap:10px}
  .profile-top .btn{width:100%}
  .results-header{flex-direction:column;align-items:flex-start;gap:8px}
  .fi{flex-direction:column;align-items:center;text-align:center}
  .flinks{justify-content:center}
}

 .ai-best {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 6px 20px rgba(16,185,129,.35);
}
.ai-best:hover:not(:disabled) {
  background: linear-gradient(135deg, #0ea371, #047857);
}
.btn-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-m);
  font-size: .6rem;
  background: #10b981;
  color: #fff;
  padding: 3px 12px;
  border-radius: 20px;
  letter-spacing: .5px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(16,185,129,.4);
  animation: badgePulse 2.2s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}

@keyframes badgePulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%       { transform: translateX(-50%) scale(1.06); }
}

.ai-btn-wrap {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  margin-top: 18px;
  overflow: visible;
}

.ai-btn-wrap .find-btn { width: 100%; }

@media (max-width: 500px) {
  .ai-btn-wrap { grid-column: 1; }
}

.find-btn {
  font-size: clamp(.72rem, 2vw, .9rem);
  white-space: nowrap;
  padding-left: 12px;
  padding-right: 12px;
}

@media (max-width: 480px) {
  .find-btn {
    font-size: .75rem;
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
  }
}




.jc {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 10px;
  transition: border-color .2s, transform .2s;
  overflow: hidden;        /* ← ADD THIS */
  min-width: 0;            /* ← ADD THIS */
  width: 100%;             /* ← ADD THIS */
}

.jc-url {
  font-family: var(--font-m);
  font-size: .63rem;
  color: var(--blue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .75;
  margin-bottom: 12px;
  max-width: 100%;         /* ← ADD THIS */
  display: block;          /* ← CHANGE to block, not flex */
}
 
.jc:hover { border-color: rgba(255,77,0,.3); transform: translateY(-1px); }
.jc-seen { opacity: .65; }

.jc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.jc-title { font-size: .9rem; font-weight: 700; color: var(--white); line-height: 1.4; margin: 0; }

.jc-viewed-badge {
  font-size: .6rem; padding: 3px 9px; border-radius: 99px;
  background: var(--card2); color: var(--muted2);
  border: 1px solid var(--border); white-space: nowrap; flex-shrink: 0;
  font-family: var(--font-m);
}

.jc-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-bottom: 10px; }
.jc-meta span { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.jc-meta-icon { font-size: .78rem; width: 16px; text-align: center; }

.jc-url {
  font-family: var(--font-m); font-size: .63rem; color: var(--blue);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: .75; margin-bottom: 12px;
}
.jc-divider { height: 1px; background: var(--border); margin-bottom: 12px; }

.jc-actions { display: flex; gap: 8px; }
.jc-btn {
  font-size: .72rem; font-weight: 600; padding: 7px 14px;
  border-radius: var(--radius-xs); border: 1px solid var(--border2);
  cursor: pointer; text-decoration: none; display: inline-flex;
  align-items: center; gap: 5px; color: var(--muted);
  background: var(--card); transition: all .15s;
}
.jc-btn:hover { border-color: var(--accent); color: var(--accent); }
.jc-btn.primary { background: var(--success-bg); color: var(--success); border-color: rgba(22,163,74,.25); font-weight: 700; }
.jc-btn.primary:hover { background: rgba(22,163,74,.15); }
.jc-btn.seen { color: var(--muted2); background: var(--card2); border-color: var(--border); }