/* CareerBuilder.in — shared styles for interior pages (tools, careers, blog, admin) */
/* Reuses the --navy/--blue/--orange tokens defined inline in layouts/main.php */

.page-hero{
  padding:64px 0 40px;
  background:var(--mist);
  border-bottom:1px solid var(--line);
}
.page-hero h1{font-size:clamp(28px,4vw,42px);}
.page-hero p{color:var(--slate); font-size:17px; max-width:640px; margin-top:12px;}
.breadcrumbs{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--slate-light); margin-bottom:16px;}
.breadcrumbs a{color:var(--blue);}

.tool-shell{padding:56px 0 100px;}
.tool-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:40px;}
@media (max-width:900px){.tool-grid{grid-template-columns:1fr;}}

/* Career roadmap detail page — 2 column with sidebar cards */
.career-detail-grid{display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start; width:100%;}
.career-detail-main{flex:1 1 0; min-width:0;}
.career-detail-sidebar{flex:0 0 380px; width:380px; max-width:100%;}
@media (max-width:960px){
  .career-detail-sidebar{flex:1 1 100%; width:100%; position:static;}
  .career-detail-main{flex:1 1 100%;}
}

.career-detail-main h2{font-size:24px; margin-top:36px; margin-bottom:14px;}
.career-detail-main h2:first-child{margin-top:0;}
.career-detail-main p{margin-bottom:16px; color:var(--navy); line-height:1.75; font-size:16.5px;}

.career-detail-sidebar{display:flex; flex-direction:column; gap:20px; position:sticky; top:24px;}

.sidebar-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px;
}
.sidebar-card .sc-head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.sidebar-card .sc-icon{
  width:34px; height:34px; border-radius:10px;
  background:var(--mist); display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.sidebar-card h3{font-size:15.5px; font-weight:700; color:var(--navy);}
.sidebar-card p{font-size:14.5px; line-height:1.7; color:var(--slate); margin:0;}
.sidebar-card .tag-pill{margin:0 6px 6px 0;}

.growth-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--mist-2); color:var(--blue-deep);
  border-radius:999px; padding:6px 14px; font-size:13px; font-weight:600;
  margin-bottom:20px;
}
.growth-badge .gb-dot{width:7px; height:7px; border-radius:50%; background:var(--orange);}

.panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px;
}
.panel h2{font-size:20px; margin-bottom:20px;}

.field{margin-bottom:18px;}
.field label{display:block; font-weight:600; font-size:14px; margin-bottom:6px; color:var(--navy);}
.field textarea,
.field input[type=text],
.field input[type=password],
.field input[type=email],
.field input[type=tel],
.field input[type=number],
.field select{
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-family:'Inter',sans-serif;
  font-size:14.5px;
  color:var(--navy);
  background:var(--mist);
}
.field textarea{min-height:160px; resize:vertical;}
.field small{color:var(--slate-light); font-size:12.5px;}

.btn-block{width:100%; justify-content:center; display:flex;}

.result-panel{
  background:var(--mist);
  border:1px dashed var(--line);
  border-radius:var(--radius-lg);
  padding:32px;
  min-height:200px;
}
.score-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:88px; height:88px; border-radius:50%;
  background:var(--blue); color:#fff; font-family:'Space Grotesk',sans-serif;
  font-size:28px; font-weight:700; margin-bottom:16px;
}
.result-list{margin-top:16px;}
.result-list li{padding:10px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--slate);}
.result-list li:last-child{border-bottom:none;}
/* Modifier for plain lists with no leading symbol of their own (e.g. generic
   tool "list" output) — explicit dot bullet since relying on default <ul>
   browser styling was rendering with no visible marker at all. */
.result-list-dots{list-style:none; padding-left:0;}
.result-list-dots li{padding-left:22px; position:relative;}
.result-list-dots li::before{
  content:''; position:absolute; left:2px; top:19px;
  width:7px; height:7px; border-radius:50%; background:var(--blue);
}
.tag-pill{
  display:inline-block; background:var(--mist-2); color:var(--blue-deep);
  border-radius:999px; padding:4px 12px; font-size:12.5px; font-weight:600; margin:0 6px 6px 0;
}

/* /tools directory page — category overview cards */
.category-overview-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:64px;}
@media (max-width:900px){.category-overview-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.category-overview-grid{grid-template-columns:1fr;}}

.category-card{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px;
  text-decoration:none; color:inherit; display:block; position:relative; overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1);
}
.category-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px -14px rgba(20,38,74,0.18);
}
.category-card .cc-icon{
  width:52px; height:52px; border-radius:15px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.category-card:hover .cc-icon{transform:scale(1.08) rotate(-4deg);}
.category-card h3{font-size:17.5px; font-weight:700; color:var(--navy); margin-bottom:6px;}
.category-card .cc-count{font-size:12.5px; color:var(--slate-light); font-weight:600; margin-bottom:12px;}
.category-card p{font-size:13.5px; color:var(--slate); line-height:1.6; margin-bottom:20px;}
.category-card .cc-cta{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:700;
}
.category-card .cc-cta svg{transition:transform .22s ease;}
.category-card:hover .cc-cta svg{transform:translateX(3px);}

/* Individual tool cards below — premium version of list-card, specific to /tools */
.tool-listing-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px;
  text-decoration:none; color:inherit; display:block; position:relative;
  transition:transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s cubic-bezier(.2,.8,.2,1), border-color .24s ease;
}
.tool-listing-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px -12px rgba(20,38,74,0.14);
  border-color:transparent;
}
.tool-listing-card h4{font-size:15px; font-weight:700; color:var(--navy); margin-bottom:6px; display:flex; align-items:center; gap:6px;}
.tool-listing-card h4 .tlc-arrow{opacity:0; transform:translateX(-4px); transition:opacity .2s ease, transform .2s ease; display:inline-flex;}
.tool-listing-card:hover h4 .tlc-arrow{opacity:1; transform:translateX(0);}
.tool-listing-card p{font-size:13px; color:var(--slate); line-height:1.55; margin:0;}

/* Swipeable category pill row (works on /careers and /careers/category/{slug}) */
.pill-scroll-row{
  display:flex; gap:10px; flex-wrap:wrap;
}
@media (max-width:768px){
  .pill-scroll-row{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding-bottom:6px;
    margin:0 -24px; padding-left:24px; padding-right:24px;
  }
  .pill-scroll-row::-webkit-scrollbar{display:none;}
  .pill-scroll-row{scrollbar-width:none;}
  .pill-scroll-row .cat-pill{scroll-snap-align:start; flex-shrink:0;}
}

/* Premium career cards — color-coded by category */
.career-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px;
  text-decoration:none; color:inherit; display:block; position:relative;
  transition:transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s cubic-bezier(.2,.8,.2,1);
}
.career-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 36px -14px rgba(20,38,74,0.16);
}
.career-card .cc-icon-sm{
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
  transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.career-card:hover .cc-icon-sm{transform:scale(1.08) rotate(-4deg);}
.career-card h3{font-size:16px; font-weight:700; color:var(--navy); margin-bottom:6px; display:flex; align-items:center; gap:6px;}
.career-card h3 .kc-arrow{opacity:0; transform:translateX(-4px); transition:opacity .2s ease, transform .2s ease; display:inline-flex;}
.career-card:hover h3 .kc-arrow{opacity:1; transform:translateX(0);}
.career-card p{font-size:13.5px; color:var(--slate); line-height:1.6; margin-bottom:14px;}
.career-card .cc-salary{font-size:13px; font-weight:700; color:var(--blue-deep);}

/* Question Bank page */
.qb-topic-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media (max-width:900px){.qb-topic-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.qb-topic-grid{grid-template-columns:1fr;}}

.qb-topic-card{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px;
  text-decoration:none; color:var(--navy); font-size:14px; font-weight:600;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease;
}
.qb-topic-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px -12px rgba(20,38,74,0.16);
  border-color:transparent;
}
.qb-topic-icon{
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}

.qb-choice{
  padding:8px 16px; border-radius:999px; border:1px solid var(--line);
  font-size:13.5px; font-weight:600; color:var(--slate); cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.qb-choice-group{display:flex; gap:8px; flex-wrap:wrap;}
.qb-choice-active{background:var(--blue); color:#fff; border-color:var(--blue);}

.qb-question{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 22px;
  margin-bottom:16px;
}
.qb-question summary{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:12px;
}
.qb-question summary::-webkit-details-marker{display:none;}
.qb-qnum{
  width:24px; height:24px; border-radius:8px; background:var(--mist-2); color:var(--blue-deep);
  display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; flex-shrink:0;
}
.qb-qtext{flex:1; font-size:15px; font-weight:600; color:var(--navy); line-height:1.5;}
.qb-toggle-label{font-size:13.5px; font-weight:700; color:var(--blue); white-space:nowrap; flex-shrink:0;}
.qb-toggle-label .hide-label{display:none;}
.qb-question[open] .qb-toggle-label .show-label{display:none;}
.qb-question[open] .qb-toggle-label .hide-label{display:inline;}

.qb-answer{
  margin-top:16px; margin-left:36px;
  background:#F0FBF4; border:1px solid #CFEEDA; border-radius:12px; padding:16px 18px;
}
.qb-answer-head{color:#1E8A4C; font-weight:700; font-size:13.5px; margin-bottom:8px;}
.qb-answer p{font-size:14px; line-height:1.65; color:var(--navy); margin:0 0 12px;}
.qb-tip{
  background:var(--mist-2); border-radius:10px; padding:10px 14px;
  font-size:13px; color:var(--blue-deep); line-height:1.55;
}

/* Mock Interview */
.mi-type-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.mi-type-card{
  border:1px solid var(--line); border-radius:12px; padding:16px 10px; text-align:center;
  font-size:13.5px; font-weight:600; color:var(--slate); cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.mi-type-active{background:var(--blue); color:#fff; border-color:var(--blue);}

.mi-qa-block{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin-bottom:16px;
}
.mi-q-row{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--navy);}
.mi-bot-icon{font-size:16px; flex-shrink:0;}
.mi-feedback-box{
  margin:12px 0 0 32px; background:#F0FBF4; border:1px solid #CFEEDA; border-radius:10px; padding:12px 14px;
}

.mi-report-top{display:grid; grid-template-columns:280px 1fr; gap:20px;}
@media (max-width:700px){.mi-report-top{grid-template-columns:1fr;}}
.mi-score-ring{
  width:110px; height:110px; border-radius:50%; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--blue) calc(var(--pct)*1%), var(--line) 0);
  position:relative;
}
.mi-score-ring::before{
  content:""; position:absolute; inset:8px; background:#fff; border-radius:50%;
}
.mi-score-ring span{
  position:relative; z-index:1; font-size:26px; font-weight:800; color:var(--navy); font-family:'Space Grotesk',sans-serif;
}
.mi-score-ring span small{font-size:13px; font-weight:600; color:var(--slate-light);}
.mi-stat{background:var(--mist); border-radius:10px; padding:10px 6px;}
.mi-stat strong{display:block; font-size:12.5px; color:var(--navy);}
.mi-stat span{font-size:10.5px; color:var(--slate-light);}

/* Homepage Mock Interview teaser mockup */
.mi-mockup{display:flex; justify-content:center;}
.mi-phone{
  background:#fff; border:1px solid var(--line); border-radius:22px; padding:22px;
  width:100%; max-width:400px; box-shadow:0 30px 60px -20px rgba(20,38,74,0.16);
}
.mi-phone-head{
  display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700;
  color:var(--slate-light); letter-spacing:.04em; margin-bottom:16px;
}
.mi-live-dot{width:7px; height:7px; border-radius:50%; background:#E11D48; animation:mi-pulse 1.6s infinite;}
@keyframes mi-pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.mi-phone-bubble{border-radius:14px; padding:12px 14px; font-size:13px; line-height:1.55; margin-bottom:12px;}
.mi-bubble-bot{background:var(--mist); color:var(--navy); display:flex; gap:8px; align-items:flex-start;}
.mi-bubble-user{background:var(--blue); color:#fff; margin-left:24px;}
.mi-phone-feedback{background:#F0FBF4; border:1px solid #CFEEDA; border-radius:14px; padding:12px 14px;}

/* Skill Tests */
.cat-pill.st-pill-active{background:var(--blue); color:#fff; border-color:var(--blue);}
.st-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px;
  display:flex; flex-direction:column;
  transition:transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s cubic-bezier(.2,.8,.2,1);
}
.st-card:hover{transform:translateY(-4px); box-shadow:0 16px 32px -14px rgba(20,38,74,0.15);}
.st-difficulty{
  font-size:11px; font-weight:700; color:var(--slate-light); text-transform:uppercase; letter-spacing:.03em;
  padding:4px 0;
}
.st-meta-row{
  display:flex; gap:16px; margin-bottom:20px; padding-top:14px; border-top:1px solid var(--line);
}
.st-meta-row span{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; color:var(--slate-light); font-weight:600;
}
.st-start-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  background:transparent; border:1.5px solid var(--sc, var(--blue)); color:var(--sc, var(--blue));
  border-radius:999px; padding:11px; font-size:13.5px; font-weight:700; cursor:pointer;
  font-family:'Inter',sans-serif; text-decoration:none; box-sizing:border-box;
  transition:background .2s ease, color .2s ease;
}
.st-start-btn:hover{background:var(--sc, var(--blue)); color:#fff;}
.st-option{
  display:flex; align-items:center; gap:12px;
  border:1.5px solid var(--line); border-radius:12px; padding:13px 16px;
  font-size:14px; color:var(--navy); cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.st-option:hover{border-color:#BFDBFE;}
.st-option-active{border-color:var(--blue); background:#EAF0FB; font-weight:600;}
.st-option-letter{
  width:24px; height:24px; border-radius:50%; background:var(--mist); color:var(--slate);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0;
}
.st-option-active .st-option-letter{background:var(--blue); color:#fff;}

/* ================= RESUME BUILDER ================= */
.rb-shell{display:grid; grid-template-columns:460px 1fr; gap:28px; align-items:start;}
@media (max-width:1000px){.rb-shell{grid-template-columns:1fr;}}

.rb-editor{background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; max-height:calc(100vh - 40px); overflow-y:auto; position:sticky; top:20px;}
@media (max-width:1000px){.rb-editor{position:static; max-height:none;}}
.rb-editor-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--line);}

.rb-section{margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--line);}
.rb-section:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;}
.rb-label{display:block; font-size:12.5px; font-weight:700; color:var(--navy); text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px;}
.rb-label-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.rb-label-row .rb-label{margin-bottom:0;}

.rb-input{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  font-family:'Inter',sans-serif; font-size:13.5px; color:var(--navy); background:var(--mist);
  margin-bottom:8px; box-sizing:border-box;
}
.rb-input:focus{outline:2px solid var(--blue); outline-offset:1px;}
.rb-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.rb-grid-2 .rb-input{margin-bottom:8px;}

.rb-ai-btn{
  background:var(--mist-2); color:var(--blue-deep); border:none; border-radius:999px;
  padding:6px 14px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:background .18s ease;
}
.rb-ai-btn:hover{background:#DCE6FA;}
.rb-ai-btn:disabled{opacity:.6; cursor:default;}

.rb-add-btn{
  background:none; border:1px dashed var(--blue); color:var(--blue); border-radius:999px;
  padding:6px 14px; font-size:12px; font-weight:700; cursor:pointer;
}
.rb-add-btn:hover{background:var(--mist-2);}

.rb-photo-preview{
  width:64px; height:64px; border-radius:12px; background:var(--mist); border:1px dashed var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden;
}
.rb-photo-preview span{font-size:9.5px; color:var(--slate-light); text-align:center; padding:4px;}
.rb-photo-preview img{width:100%; height:100%; object-fit:cover;}
.rb-sidebar-photo{width:88px; height:88px; border-radius:50%; object-fit:cover; margin-bottom:16px; border:3px solid rgba(255,255,255,0.25);}

/* ================= DASHBOARD ================= */
.dash-shell{display:grid; grid-template-columns:220px 1fr; gap:32px; align-items:start; max-width:1180px; margin:0 auto; padding:32px 24px 80px;}
@media (max-width:900px){.dash-shell{grid-template-columns:1fr; padding:24px 10px 60px;}}

.dash-sidebar{position:sticky; top:20px; display:flex; flex-direction:column; gap:2px;}
@media (max-width:900px){
  .dash-sidebar{
    position:static; flex-direction:row; flex-wrap:nowrap; gap:6px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px;
  }
  .dash-nav-item{white-space:nowrap; flex-shrink:0; padding:9px 14px; font-size:13.5px;}
}
.dash-sidebar-eyebrow{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--slate-light); margin:18px 0 6px; padding:0 12px;}
.dash-sidebar-eyebrow:first-child{margin-top:0;}
@media (max-width:900px){.dash-sidebar-eyebrow{display:none;}}
.dash-nav-item{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  font-size:14px; font-weight:600; color:var(--slate);
  transition:background .15s ease, color .15s ease;
}
.dash-nav-item:hover{background:var(--mist); color:var(--navy);}
.dash-nav-active{background:var(--blue); color:#fff;}
.dash-nav-active:hover{background:var(--blue); color:#fff;}

.dash-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:14px;}
@media (max-width:900px){
  .dash-topbar{flex-direction:column !important; align-items:flex-start !important;}
  .dash-topbar > a.btn{width:100% !important; max-width:100% !important; box-sizing:border-box !important; justify-content:center;}
}

.dash-stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px;}
@media (max-width:700px){.dash-stat-row{grid-template-columns:1fr 1fr;}}
@media (max-width:460px){.dash-stat-row{grid-template-columns:1fr;}}
.dash-stat{background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; display:flex; align-items:center; gap:14px;}
.dash-stat-icon{width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.dash-stat-num{font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; color:var(--navy); line-height:1.1;}
.dash-stat-label{font-size:12px; color:var(--slate-light); margin-top:2px;}

.dash-grid-top{display:grid; grid-template-columns:340px 1fr; gap:20px; margin-bottom:24px;}
@media (max-width:900px){.dash-grid-top{grid-template-columns:1fr;}}

.dash-readiness-bar{margin-bottom:14px;}
.dash-readiness-bar:last-child{margin-bottom:0;}
.dash-rb-head{display:flex; justify-content:space-between; font-size:12.5px; color:var(--slate); margin-bottom:5px;}
.dash-rb-head strong{color:var(--navy);}
.dash-rb-track{height:6px; background:var(--mist); border-radius:999px; overflow:hidden;}
.dash-rb-track div{height:100%; border-radius:999px;}

.dash-cta-banner{
  background:linear-gradient(135deg, var(--blue), var(--blue-deep)); border-radius:18px; padding:24px 28px;
  display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:20px; flex-wrap:wrap;
}
.dash-quick-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:520px){.dash-quick-grid{grid-template-columns:1fr;}}
.dash-stat-row > *, .dash-quick-grid > *, .dash-grid-top > *, .dash-grid-bottom > *{min-width:0;}
.dash-stat{overflow:hidden;}
.dash-stat-label{overflow-wrap:break-word;}
.dash-quick-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.dash-quick-card:hover{transform:translateY(-3px); box-shadow:0 14px 28px -14px rgba(20,38,74,0.15);}
.dash-quick-card strong{display:block; font-size:14px; color:var(--navy); margin-bottom:3px;}
.dash-quick-card p{font-size:12px; color:var(--slate-light); margin:0;}

.dash-grid-bottom{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:900px){.dash-grid-bottom{grid-template-columns:1fr;}}
.dash-panel-head{display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line);}
.dash-panel-head h3{font-size:15px;}
.dash-panel-head a{font-size:12.5px; color:var(--blue); font-weight:600;}
.dash-empty{padding:32px 20px; text-align:center; color:var(--slate-light); font-size:13.5px;}
.dash-empty a{color:var(--blue); font-weight:600;}
.dash-row{display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line);}
.dash-row:last-child{border-bottom:none;}
.dash-row strong{font-size:13.5px; color:var(--navy);}
.dash-row-meta{font-size:11.5px; color:var(--slate-light); margin-top:2px;}
.dash-row-actions{display:flex; align-items:center; gap:8px;}
.dash-score-pill{font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap;}
.dash-score-pill.good{background:#E6F6EC; color:#16A34A;}
.dash-score-pill.mid{background:#FFEDE5; color:#FF6A3D;}
.dash-score-pill.low{background:#FDE8EC; color:#E11D48;}
.dash-icon-btn{
  width:28px; height:28px; border-radius:8px; background:var(--mist); color:var(--slate);
  display:flex; align-items:center; justify-content:center; border:none; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.dash-icon-btn:hover{background:var(--mist-2); color:var(--blue);}
.dash-icon-danger:hover{background:#FDE8EC; color:#DC2626;}

/* Resume file upload (ATS Checker + any resume_text field) */
.ru-upload-row{display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap;}
.ru-upload-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--mist-2); color:var(--blue-deep); border-radius:999px;
  padding:7px 16px; font-size:12.5px; font-weight:700; cursor:pointer;
  transition:background .18s ease;
}
.ru-upload-btn:hover{background:#DCE6FA;}
.ru-status{font-size:12px; color:var(--slate-light);}

/* Resume Builder: ATS Score button + modal */
.rb-ats-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  background:#FEF9E7; color:#B45309; border:1px solid #FDE9B8; border-radius:12px;
  padding:12px; font-size:14px; font-weight:700; cursor:pointer; margin-bottom:20px;
  transition:background .18s ease;
}
.rb-ats-btn:hover{background:#FEF3D9;}

.rb-import-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  background:#EAF0FB; color:var(--blue-deep); border:1px solid #D6E2F9; border-radius:12px;
  padding:12px; font-size:14px; font-weight:700; cursor:pointer; margin-bottom:14px;
  transition:background .18s ease;
}
.rb-import-btn:hover{background:#DCE7FA;}

.rb-modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(20,38,74,0.5); z-index:200;
  align-items:center; justify-content:center; padding:20px;
}
.rb-modal-overlay.rb-modal-open{display:flex;}
.rb-modal{
  background:#fff; border-radius:20px; width:100%; max-width:480px; max-height:88vh;
  overflow-y:auto; box-shadow:0 30px 70px -20px rgba(20,38,74,0.35);
}
.rb-modal-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:20px 24px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; z-index:1;
}
.rb-modal-close{background:none; border:none; font-size:22px; color:var(--slate-light); cursor:pointer; line-height:1;}
.rb-modal-body{padding:20px 24px 28px;}

.rb-ats-breakdown{background:var(--mist); border-radius:14px; padding:16px 18px;}
.rb-ats-breakdown h4{font-size:13px; margin-bottom:12px;}
.rb-ats-row{display:flex; justify-content:space-between; font-size:13px; color:var(--navy); margin-bottom:4px;}
.rb-ats-bar{height:5px; background:#E2E8F0; border-radius:999px; overflow:hidden; margin-bottom:12px;}
.rb-ats-bar div{height:100%; border-radius:999px;}

.rb-ats-keyword-chip{
  display:inline-flex; align-items:center; gap:5px; background:#FDE8EC; color:#DC2626;
  border:none; border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:600; cursor:pointer;
  transition:background .15s ease, opacity .15s ease;
}
.rb-ats-keyword-chip:hover{background:#FBD3DA;}
.rb-ats-keyword-chip.rb-ats-added{background:#E6F6EC; color:#16A34A; cursor:default;}

.rb-ats-suggestions{margin-top:18px; background:#FEF9E7; border-radius:14px; padding:16px 18px;}
.rb-ats-suggestions h4{font-size:13px; margin-bottom:10px;}
.rb-ats-suggestions ol{margin:0; padding-left:18px;}
.rb-ats-suggestions li{font-size:13px; color:var(--navy); line-height:1.6; margin-bottom:6px;}

/* ================= BLOG ================= */
.blog-featured{
  display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; margin-bottom:40px;
  transition:box-shadow .2s ease;
}
.blog-featured:hover{box-shadow:0 20px 44px -18px rgba(20,38,74,0.18);}
@media (max-width:800px){.blog-featured{grid-template-columns:1fr;}}
.blog-featured-img{
  height:320px; background:var(--mist) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:800px){.blog-featured-img{height:220px;}}
.blog-featured-body{padding:32px 36px 32px 0;}
@media (max-width:800px){.blog-featured-body{padding:0 24px 28px;}}
.blog-featured-body h2{font-size:26px; margin:12px 0 10px; line-height:1.25;}
.blog-featured-body p{color:var(--slate); font-size:15px; line-height:1.6; margin-bottom:14px;}

.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.blog-grid{grid-template-columns:1fr;}}
.blog-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1);
}
.blog-card:hover{transform:translateY(-4px); box-shadow:0 16px 32px -14px rgba(20,38,74,0.15);}
.blog-card-img{height:170px; background:var(--mist) center/cover no-repeat; display:flex; align-items:center; justify-content:center;}
.blog-img-fallback{font-size:32px; opacity:.35;}
.blog-card-body{padding:20px;}
.blog-card-cat{font-size:11px; font-weight:700; color:var(--blue); text-transform:uppercase; letter-spacing:.04em;}
.blog-card-body h3{font-size:16px; margin:8px 0 6px; line-height:1.35;}
.blog-card-body p{font-size:13.5px; color:var(--slate); line-height:1.55; margin-bottom:10px;}
.blog-meta{font-size:12px; color:var(--slate-light);}

/* Article body typography (rendered rich-text content) */
.article-body{font-size:16.5px; line-height:1.8; color:#222;}
.article-body h2{font-size:24px; margin:36px 0 14px; color:var(--navy); font-family:'Space Grotesk',sans-serif;}
.article-body h3{font-size:19px; margin:28px 0 12px; color:var(--navy); font-family:'Space Grotesk',sans-serif;}
.article-body p{margin-bottom:18px;}
.article-body ul, .article-body ol{margin:0 0 18px; padding-left:26px;}
.article-body li{margin-bottom:8px;}
.article-body a{color:var(--blue); text-decoration:underline;}
.article-body blockquote{
  border-left:3px solid var(--blue); margin:20px 0; padding:4px 20px; color:var(--slate); font-style:italic;
}
.article-body img{max-width:100%; border-radius:14px; margin:20px 0;}
.article-body code{background:var(--mist); padding:2px 6px; border-radius:5px; font-family:'JetBrains Mono',monospace; font-size:14px;}
.article-body pre{background:var(--navy); color:#fff; padding:16px 18px; border-radius:12px; overflow-x:auto; margin:20px 0;}
.article-body pre code{background:none; color:inherit; padding:0;}
.article-body strong{color:var(--navy);}

/* ================= FEATURES PAGE ================= */
.feat-hero{
  padding:88px 0 56px; text-align:center;
  background:radial-gradient(ellipse 900px 500px at 50% -10%, rgba(255,106,61,0.09), transparent 70%), var(--mist);
}
.feat-hero .eyebrow{justify-content:center; margin:0 auto 20px;}
.feat-hero h1{font-size:44px; line-height:1.15; max-width:760px; margin:0 auto 18px;}
.feat-hero .lead{max-width:560px; margin:0 auto 28px; text-align:center;}
.feat-hero .hero-actions{justify-content:center; margin-bottom:52px;}
@media (max-width:720px){.feat-hero h1{font-size:30px;}}

.feat-stat-row{
  display:flex; justify-content:center; gap:0; max-width:640px; margin:0 auto;
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px 0;
  box-shadow:0 20px 44px -22px rgba(20,38,74,0.14);
}
.feat-stat{flex:1; text-align:center; border-right:1px solid var(--line);}
.feat-stat:last-child{border-right:none;}
.feat-stat strong{display:block; font-family:'Space Grotesk',sans-serif; font-size:28px; color:var(--navy); font-weight:700;}
.feat-stat span{font-size:12.5px; color:var(--slate-light); font-weight:600;}
@media (max-width:600px){.feat-stat-row{flex-wrap:wrap; gap:16px 0;} .feat-stat{flex:0 0 50%; border-right:none; margin-bottom:12px;}}

.feat-section-head{text-align:center; margin-bottom:40px;}
.feat-section-head .eyebrow{justify-content:center; margin:0 auto 14px;}
.feat-section-head h2{font-size:30px; margin-bottom:10px;}
.feat-section-head .lead{margin:0 auto; text-align:center;}

.feat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:980px){.feat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.feat-grid{grid-template-columns:1fr;}}
.feat-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px;
  display:block; text-decoration:none; transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease;
}
.feat-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -18px rgba(20,38,74,0.18); border-color:transparent;}
.feat-card-icon{width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.feat-card h3{font-size:16px; color:var(--navy); margin-bottom:8px; font-weight:700;}
.feat-card p{font-size:13.5px; color:var(--slate); line-height:1.6; margin-bottom:14px;}
.feat-card-link{font-size:13px; font-weight:700; color:var(--blue);}

/* Deep-dive alternating rows */
.dd-row{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-bottom:64px;}
.dd-row:last-child{margin-bottom:0;}
.dd-reverse .dd-text{order:2;}
.dd-reverse .dd-visual{order:1;}
@media (max-width:860px){
  .dd-row{grid-template-columns:1fr; gap:28px;}
  .dd-reverse .dd-text, .dd-reverse .dd-visual{order:initial;}
}
.dd-text h3{font-size:24px; color:var(--navy); margin-bottom:12px; line-height:1.3;}
.dd-text p{font-size:15px; color:var(--slate); line-height:1.7; margin-bottom:18px;}
.dd-list{list-style:none; padding:0; margin-bottom:26px;}
.dd-list li{
  font-size:14px; color:var(--navy); padding:8px 0 8px 26px; position:relative; line-height:1.5;
}
.dd-list li::before{
  content:''; position:absolute; left:0; top:14px; width:14px; height:14px; border-radius:50%;
  background:var(--mist-2);
}
.dd-list li::after{
  content:''; position:absolute; left:4.5px; top:18.5px; width:5px; height:8px;
  border-right:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:rotate(45deg);
}

.dd-visual{display:flex; justify-content:center;}

/* ATS mockup (signature visual) */
.dd-mock-ats{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:26px; width:100%; max-width:400px;
  box-shadow:0 28px 60px -24px rgba(20,38,74,0.22);
}
.dd-mock-head{display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--navy); margin-bottom:20px;}
.dd-mock-score-row{display:flex; align-items:center; gap:18px; margin-bottom:20px;}
.dd-mock-ring{
  width:76px; height:76px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(#16A34A 0% 78%, #E2E8F0 78% 100%);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.dd-mock-ring::before{content:''; position:absolute; inset:8px; background:#fff; border-radius:50%;}
.dd-mock-ring span{position:relative; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; color:var(--navy);}
.dd-mock-ring span small{font-size:10px; font-weight:600; color:var(--slate-light);}
.dd-mock-score-row p{font-size:12px; color:var(--slate); margin:6px 0 0; line-height:1.5;}
.dd-mock-bars{background:var(--mist); border-radius:12px; padding:14px 16px; margin-bottom:16px;}
.dd-mock-bar-row{display:flex; justify-content:space-between; font-size:12.5px; color:var(--navy); margin-bottom:4px;}
.dd-mock-bar{height:5px; background:#E2E8F0; border-radius:999px; overflow:hidden; margin-bottom:10px;}
.dd-mock-bar div{height:100%; border-radius:999px;}
.dd-mock-chips{display:flex; flex-wrap:wrap; gap:6px;}

/* Mock Interview mockup */
.dd-mock-interview{
  background:var(--navy); color:#fff; border-radius:20px; padding:26px; width:100%; max-width:400px;
  box-shadow:0 28px 60px -24px rgba(20,38,74,0.35);
}
.dd-mock-interview .dd-mock-head{color:#fff; justify-content:space-between; font-size:12.5px; opacity:.8;}
.dd-live-badge{background:#E11D48; color:#fff; font-size:10px; font-weight:700; padding:3px 8px; border-radius:999px; letter-spacing:.04em;}
.dd-mock-q{font-size:15px; font-weight:600; margin-bottom:14px; line-height:1.5;}
.dd-mock-answer{background:rgba(255,255,255,0.08); border-radius:10px; padding:12px 14px; font-size:12.5px; line-height:1.6; color:#CBD5E1; margin-bottom:14px; font-style:italic;}
.dd-mock-feedback{font-size:12.5px; color:#86EFAC; line-height:1.5;}

/* Skill Test mockup */
.dd-mock-test{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:26px; width:100%; max-width:400px;
  box-shadow:0 28px 60px -24px rgba(20,38,74,0.22);
}
.dd-mock-test .dd-mock-head{justify-content:space-between; font-size:12.5px; color:var(--slate);}
.dd-mock-timer{color:#E11D48; font-weight:700;}
.dd-mock-q code{background:var(--mist); padding:1px 6px; border-radius:4px; font-family:'JetBrains Mono',monospace; font-size:13px;}
.dd-mock-options{margin:16px 0;}
.dd-mock-opt{padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:12.5px; color:var(--navy); margin-bottom:8px;}
.dd-mock-opt-selected{border-color:var(--blue); background:var(--mist-2); font-weight:600;}
.dd-mock-progress{height:5px; background:var(--mist); border-radius:999px; overflow:hidden; margin-bottom:8px;}
.dd-mock-progress div{height:100%; background:var(--blue); border-radius:999px;}
.dd-mock-qcount{font-size:11.5px; color:var(--slate-light);}

/* Comparison table */
.feat-compare-wrap{overflow-x:auto; border-radius:16px; border:1px solid var(--line);}
.feat-compare{width:100%; border-collapse:collapse; background:#fff; min-width:560px;}
.feat-compare th, .feat-compare td{padding:14px 20px; text-align:center; font-size:13.5px; border-bottom:1px solid var(--line);}
.feat-compare th{font-family:'Space Grotesk',sans-serif; font-size:13px; color:var(--slate); font-weight:700; background:var(--mist);}
.feat-compare td:first-child, .feat-compare th:first-child{text-align:left; color:var(--navy); font-weight:600;}
.feat-compare tr:last-child td{border-bottom:none;}
.feat-compare-highlight{background:var(--mist-2); color:var(--blue-deep); font-weight:700;}
.feat-compare td.feat-compare-highlight{font-size:16px;}

.feat-final-cta{
  background:var(--navy); color:#fff; text-align:center; padding:72px 0;
  background-image:radial-gradient(ellipse 700px 400px at 50% 0%, rgba(255,106,61,0.18), transparent 70%);
}
.feat-final-cta h2{color:#fff; font-size:30px; margin-bottom:10px;}
.feat-final-cta p{color:#B8C4DE; font-size:15px; margin-bottom:28px;}
.feat-final-cta .btn-ghost{color:#fff; border-color:rgba(255,255,255,0.35);}
.feat-final-cta .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,0.08);}

/* ================= LAYOFF TRACKER ================= */
.lt-hero{padding:64px 0 40px; background:var(--mist); text-align:center;}
.lt-hero .eyebrow{justify-content:center; margin:14px auto 10px;}
.lt-hero h1{font-size:36px; margin-bottom:10px;}
.lt-hero .lead{max-width:520px; margin:0 auto 28px;}
@media (max-width:600px){.lt-hero h1{font-size:26px;}}

.lt-stat-row{display:flex; justify-content:center; gap:0; max-width:480px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 0;}
.lt-stat{flex:1; text-align:center; border-right:1px solid var(--line); min-width:0;}
.lt-stat:last-child{border-right:none;}
.lt-stat strong{display:block; font-family:'Space Grotesk',sans-serif; font-size:24px; color:var(--navy);}
.lt-stat span{font-size:11.5px; color:var(--slate-light); font-weight:600; padding:0 8px;}

.lt-note{background:var(--mist-2); border-radius:12px; padding:14px 18px; font-size:12.5px; color:var(--blue-deep); line-height:1.6; margin-bottom:28px;}

.lt-timeline{position:relative; padding-left:24px; border-left:2px solid var(--line);}
.lt-event{position:relative; margin-bottom:28px;}
.lt-event::before{content:''; position:absolute; left:-29px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--orange); border:2px solid #fff; box-shadow:0 0 0 2px var(--line);}
.lt-event-date{font-size:11.5px; font-weight:700; color:var(--slate-light); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;}
.lt-event-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px;}
.lt-event-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; flex-wrap:wrap;}
.lt-event-head h3{font-size:17px; color:var(--navy); margin:0;}
.lt-event-meta{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--slate); margin-bottom:10px;}
.lt-event-meta strong{color:var(--navy);}
.lt-event-card p{font-size:14px; color:var(--slate); line-height:1.6; margin-bottom:12px;}
.lt-source-link{font-size:12.5px; font-weight:600; color:var(--blue);}
@media (max-width:600px){
  .lt-timeline{padding-left:18px;}
  .lt-event::before{left:-22px;}
  .lt-event-card{padding:16px;}
}

.lt-controls{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:24px;}
.lt-search-box{
  display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--line);
  border-radius:100px; padding:10px 16px; flex:1; min-width:200px;
}
.lt-search-box input{border:none; outline:none; flex:1; min-width:0; font-family:'Inter',sans-serif; font-size:13.5px; color:var(--navy); background:transparent;}
.lt-search-box input::placeholder{color:var(--slate-light);}
.lt-pills{display:flex; gap:6px; flex-wrap:wrap;}
.lt-pill{
  background:#fff; border:1px solid var(--line); border-radius:100px; padding:8px 14px;
  font-size:12.5px; font-weight:600; color:var(--slate); cursor:pointer; transition:all .15s ease; white-space:nowrap;
}
.lt-pill:hover{border-color:var(--blue);}
.lt-pill-active{background:var(--navy); border-color:var(--navy); color:#fff;}

.lt-section-head{margin-bottom:32px;}
.lt-section-head .eyebrow{display:inline-flex;}
.lt-section-head h2{font-size:26px; margin-bottom:8px;}

.lt-trends{background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px;}
.lt-trend-row{margin-bottom:18px;}
.lt-trend-row:last-child{margin-bottom:0;}
.lt-trend-label{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px; flex-wrap:wrap;}
.lt-trend-label span{font-size:14px; font-weight:700; color:var(--navy);}
.lt-trend-label strong{font-size:12px; font-weight:600; color:var(--slate-light);}
.lt-trend-bar{height:8px; background:var(--mist); border-radius:999px; overflow:hidden;}
.lt-trend-bar div{height:100%; background:linear-gradient(90deg, var(--orange), #FF8F63); border-radius:999px;}

.lt-tips-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:36px;}
.lt-tip{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px;}
.lt-tip-num{font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700; color:var(--orange); margin-bottom:10px;}
.lt-tip h3{font-size:15px; color:var(--navy); margin-bottom:8px; line-height:1.35;}
.lt-tip p{font-size:13px; color:var(--slate); line-height:1.6;}
.lt-cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
@media (max-width:860px){.lt-tips-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.lt-tips-grid{grid-template-columns:1fr;}}

/* ================= JOB FINDER ================= */
.jf-hero{padding:64px 0 40px; background:var(--mist); text-align:center;}
.jf-hero .eyebrow{justify-content:center; margin:14px auto 10px;}
.jf-hero h1{font-size:36px; margin-bottom:10px;}
.jf-hero .lead{max-width:520px; margin:0 auto 28px;}
@media (max-width:600px){.jf-hero h1{font-size:26px;}}

.jf-search-form{
  display:flex; gap:10px; max-width:620px; margin:0 auto; background:#fff;
  border:1.5px solid var(--line); border-radius:16px; padding:10px; box-shadow:0 12px 30px rgba(20,38,74,0.06);
}
.jf-search-form input{
  border:none; outline:none; flex:1; min-width:0; font-family:'Inter',sans-serif; font-size:14px;
  color:var(--navy); background:var(--mist); border-radius:10px; padding:12px 14px;
}
.jf-search-form input::placeholder{color:var(--slate-light);}
.jf-search-form button{
  background:var(--orange); color:#fff; border:none; border-radius:10px; padding:12px 22px;
  font-size:14px; font-weight:700; cursor:pointer; flex-shrink:0; white-space:nowrap;
}
.jf-search-form button:hover{background:#E85A2E;}
@media (max-width:600px){
  .jf-search-form{flex-direction:column; border-radius:18px;}
  .jf-search-form button{width:100%;}
}

.jf-suggest-pills{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:20px; align-items:center;}
.jf-suggest-pills span{font-size:12.5px; color:var(--slate-light); font-weight:600;}
.jf-suggest-pills a{
  background:#fff; border:1px solid var(--line); border-radius:100px; padding:7px 14px;
  font-size:12.5px; font-weight:600; color:var(--slate); text-decoration:none; transition:border-color .15s ease, color .15s ease;
}
.jf-suggest-pills a:hover{border-color:var(--blue); color:var(--blue);}

.jf-results-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:10px;}
.jf-results-head p{font-size:13.5px; color:var(--slate); font-weight:600;}
.jf-sort{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--slate-light);}
.jf-sort select{border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:12.5px; color:var(--navy); background:#fff;}

.jf-job-list{display:flex; flex-direction:column; gap:16px;}
.jf-job-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; transition:box-shadow .18s ease;}
.jf-job-card:hover{box-shadow:0 14px 30px -18px rgba(20,38,74,0.18);}
.jf-job-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; flex-wrap:wrap;}
.jf-job-head h3{font-size:17px; color:var(--navy); margin-bottom:4px;}
.jf-job-company{font-size:13px; color:var(--slate);}
.jf-salary{font-size:13px; font-weight:700; color:#16A34A; background:#E6F6EC; padding:5px 12px; border-radius:100px; white-space:nowrap;}
.jf-job-desc{font-size:13.5px; color:var(--slate); line-height:1.6; margin-bottom:16px;}
.jf-job-foot{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}
.jf-job-date{font-size:12px; color:var(--slate-light);}
.jf-apply-btn{padding:10px 20px; font-size:13.5px;}

.jf-pagination{display:flex; justify-content:center; gap:12px; margin-top:28px;}

/* Homepage teaser mock card */
.jf-teaser-card{background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px; box-shadow:0 30px 60px -24px rgba(20,38,74,0.22);}
.jf-teaser-search{display:flex; align-items:center; gap:8px; background:var(--mist); border-radius:100px; padding:10px 16px; margin-bottom:18px; font-size:13px; color:var(--slate);}
.jf-teaser-job{border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:12px;}
.jf-teaser-job:last-child{margin-bottom:0;}
.jf-teaser-job-dim{opacity:.55;}
.jf-teaser-job-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px;}
.jf-teaser-job-head strong{display:block; font-size:14.5px; color:var(--navy); margin-bottom:2px;}
.jf-teaser-job-head span{font-size:12px; color:var(--slate-light);}
.jf-teaser-salary{font-size:12px; font-weight:700; color:#16A34A; background:#E6F6EC; padding:4px 10px; border-radius:100px; white-space:nowrap;}
.jf-teaser-job p{font-size:12.5px; color:var(--slate); line-height:1.5; margin-bottom:10px;}
.jf-teaser-apply{font-size:12px; font-weight:700; color:var(--blue);}

/* ================= SCHOLARSHIP DIRECTORY ================= */
.sch-list{display:flex; flex-direction:column; gap:16px;}
.sch-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px;}
.sch-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; flex-wrap:wrap;}
.sch-head h3{font-size:17px; color:var(--navy); margin-bottom:3px;}
.sch-provider{font-size:12.5px; color:var(--slate-light); font-weight:600;}
.sch-desc{font-size:13.5px; color:var(--slate); line-height:1.6; margin-bottom:14px;}
.sch-meta{display:flex; flex-wrap:wrap; gap:12px; background:var(--mist); border-radius:10px; padding:12px 14px; margin-bottom:12px;}
.sch-meta-item{display:flex; flex-direction:column; gap:2px;}
.sch-meta-item span{font-size:10.5px; color:var(--slate-light); text-transform:uppercase; font-weight:700; letter-spacing:.03em;}
.sch-meta-item strong{font-size:13px; color:var(--navy);}
.sch-eligibility{font-size:12.5px; color:var(--slate); line-height:1.6; margin-bottom:16px;}
.sch-apply-btn{width:100%; justify-content:center;}

/* ================= SEARCH ================= */
.search-section{margin-bottom:36px;}
.search-section h2{font-size:16px; color:var(--navy); margin-bottom:14px; font-family:'Space Grotesk',sans-serif;}
.search-result-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:860px){.search-result-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.search-result-grid{grid-template-columns:1fr;}}
.search-result-card{
  display:block; background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.search-result-card:hover{transform:translateY(-3px); box-shadow:0 14px 28px -16px rgba(20,38,74,0.18);}
.search-result-cat{font-size:10.5px; font-weight:700; color:var(--blue); text-transform:uppercase; letter-spacing:.04em;}
.search-result-card h3{font-size:14.5px; color:var(--navy); margin:6px 0 6px; font-weight:700;}
.search-result-card p{font-size:12.5px; color:var(--slate); line-height:1.5;}

/* ================= RESPONSIVE GRID UTILITY ================= */
/* Comprehensive safety net for every grid on the site whose class name
   ends in "-grid" (card-grid, feat-grid, search-result-grid, etc) — not
   just the ones explicitly listed here. Two problems, one fix:
   1. min-width:0 on children — without it, a grid item's own content
      (long text, a badge that won't wrap) can force the whole grid wider
      than the viewport ("min-width:auto" trap), even though the grid
      column itself is sized correctly.
   2. A real mobile breakpoint — many of these grids are defined with an
      inline style="grid-template-columns:repeat(3,1fr)" and no class-based
      responsive override at all, so without this they stay multi-column
      even on a phone. The !important is required specifically to win over
      that inline style at the mobile breakpoint (inline styles otherwise
      always beat classes regardless of source order).
   This one rule is why fixing it here, instead of on each individual grid
   as they're found one at a time, matters: any -grid class added to any
   future page automatically gets correct mobile behavior for free. */
[class$="-grid"] > *{min-width:0;}
@media (max-width:900px){
  [class$="-grid"]{grid-template-columns:1fr !important; gap:16px !important;}
}

.rgrid{display:grid;}
@media (max-width:900px){
  .rgrid{grid-template-columns:1fr !important; gap:32px !important;}
}

/* ================= RESUME BUILDER LOGIN GATE ================= */
.rb-gate{position:relative;}
.rb-gate-blur{
  filter:blur(6px); pointer-events:none; user-select:none;
  max-height:900px; overflow:hidden;
}
.rb-gate-cta{
  position:absolute; top:0; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:32px; z-index:5;
}
.rb-gate-cta::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(243,246,252,0.35) 0%, rgba(243,246,252,0.92) 40%);
  z-index:-1;
}
.rb-gate-cta-icon{
  width:56px; height:56px; border-radius:16px; background:var(--navy);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  box-shadow:0 16px 30px -10px rgba(20,38,74,0.35);
}
.rb-gate-cta h2{font-size:24px; color:var(--navy); margin-bottom:8px;}
.rb-gate-cta p{font-size:14.5px; color:var(--slate); max-width:380px; margin-bottom:22px; line-height:1.6;}
@media (max-width:600px){
  .rb-gate-cta h2{font-size:19px;}
  .rb-gate-blur{max-height:640px;}
}

/* Admin: article cover image upload + Quill sizing */
.admin-cover-upload{display:flex; align-items:flex-start; gap:16px;}
.admin-cover-preview{
  width:180px; height:100px; border-radius:10px; background:var(--mist) center/cover no-repeat;
  border:1px dashed var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.admin-cover-preview span{font-size:11px; color:var(--slate-light); text-align:center; padding:8px;}
#quillToolbar{border:1px solid var(--line); border-bottom:none; border-radius:10px 10px 0 0; background:var(--mist);}
#quillEditor{min-height:320px; border:1px solid var(--line); border-radius:0 0 10px 10px; font-size:15px;}
.ql-editor{min-height:320px;}

.rb-entry{background:var(--mist); border-radius:12px; padding:14px; margin-bottom:10px;}
.rb-entry-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.rb-entry-head strong{font-size:12.5px; color:var(--slate-light); text-transform:uppercase; letter-spacing:.03em;}
.rb-remove-btn{background:none; border:none; color:#DC2626; font-size:12px; font-weight:700; cursor:pointer;}

.rb-bullets{display:flex; flex-direction:column; gap:6px; margin-top:8px;}
.rb-bullet-row{display:flex; gap:6px; align-items:center;}
.rb-bullet-row .rb-input{margin-bottom:0; flex:1;}
.rb-bullet-del{background:none; border:none; color:var(--slate-light); font-size:18px; cursor:pointer; padding:0 6px; line-height:1;}
.rb-bullet-del:hover{color:#DC2626;}

.rb-tag-input{border:1px solid var(--line); border-radius:10px; padding:8px; background:var(--mist);}
.rb-tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px;}
.rb-tags:empty{margin-bottom:0;}
.rb-tag{
  display:inline-flex; align-items:center; gap:4px; background:var(--mist-2); color:var(--blue-deep);
  border-radius:999px; padding:4px 6px 4px 12px; font-size:12.5px; font-weight:600;
}
.rb-tag button{background:none; border:none; color:var(--blue-deep); cursor:pointer; font-size:15px; line-height:1; padding:2px 6px;}
#skillEntry{border:none; background:none; width:100%; font-size:13.5px; padding:4px; font-family:'Inter',sans-serif;}
#skillEntry:focus{outline:none;}

.rb-template-picker{display:flex; gap:12px;}
.rb-tpl-option{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--slate); cursor:pointer;}
.rb-tpl-option input{display:none;}
.rb-tpl-swatch{width:56px; height:72px; border-radius:8px; border:2px solid var(--line); background:#fff; position:relative; overflow:hidden;}
.rb-tpl-option input:checked + .rb-tpl-swatch{border-color:var(--blue);}
.rb-tpl-modern::after,.rb-tpl-classic::after,.rb-tpl-minimal::after{content:""; position:absolute; inset:6px; background:linear-gradient(180deg, var(--mist) 0 8px, transparent 8px);}
.rb-tpl-modern{background:linear-gradient(90deg, var(--blue) 0 14px, #fff 14px);}
.rb-tpl-classic{background:#fff;}
.rb-tpl-classic::before{content:""; position:absolute; top:8px; left:8px; right:8px; height:2px; background:var(--navy);}
.rb-tpl-minimal{background:#fff;}
.rb-tpl-sidebar{background:linear-gradient(90deg, var(--navy) 0 20px, #fff 20px);}

/* Preview pane */
.rb-preview-pane{position:sticky; top:20px;}
@media (max-width:1000px){.rb-preview-pane{position:static;}}
.rb-preview-toolbar{font-size:12.5px; font-weight:700; color:var(--slate-light); text-transform:uppercase; letter-spacing:.04em; margin-bottom:12px;}
.rb-preview-scroll{max-height:calc(100vh - 60px); overflow-y:auto; display:flex; justify-content:center; background:var(--mist); border-radius:18px; padding:24px;}
@media (max-width:1000px){.rb-preview-scroll{max-height:none;}}

.rb-page{
  width:100%; max-width:680px; min-height:900px; background:#fff; box-shadow:0 20px 50px -20px rgba(20,38,74,0.25);
  padding:48px 44px; font-family:'Inter',sans-serif; color:#1a1a1a; box-sizing:border-box;
}
.rb-page h1{font-size:26px; margin:0 0 4px; font-family:'Space Grotesk',sans-serif;}
.rb-page .rb-sec{margin-top:20px;}
.rb-page .rb-sec h3{font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; color:#334; border-bottom:1px solid #e2e2e2; padding-bottom:4px;}
.rb-page .rb-item{margin-bottom:12px;}
.rb-page .rb-item-head{display:flex; justify-content:space-between; font-size:13.5px;}
.rb-page .rb-item-head span{color:#666; font-size:12px;}
.rb-page .rb-item-sub{font-size:12.5px; color:#555; margin-bottom:4px;}
.rb-page ul{margin:4px 0 0; padding-left:18px;}
.rb-page li{font-size:12.5px; line-height:1.6; margin-bottom:2px;}
.rb-page p{font-size:12.5px; line-height:1.6; color:#333;}
.rb-skill-chips{display:flex; flex-wrap:wrap; gap:6px;}
.rb-skill-chips span{background:#f0f0f0; border-radius:6px; padding:3px 10px; font-size:11.5px; color:#333;}

/* Modern template */
.rb-tpl-modern-page .rb-modern-head{border-left:5px solid var(--blue); padding-left:16px; margin-bottom:8px;}
.rb-tpl-modern-page .rb-modern-title{font-size:14px; color:var(--blue); font-weight:600; margin-bottom:6px;}
.rb-tpl-modern-page .rb-modern-contact{font-size:11.5px; color:#666;}

/* Classic template */
.rb-tpl-classic-page{font-family:'Georgia',serif;}
.rb-tpl-classic-page .rb-classic-head{text-align:center; border-bottom:2px solid #1a1a1a; padding-bottom:14px; margin-bottom:8px;}
.rb-tpl-classic-page h1{font-family:'Georgia',serif; letter-spacing:.02em;}
.rb-tpl-classic-page .rb-classic-contact{font-size:11.5px; color:#555; margin-top:6px;}
.rb-tpl-classic-page .rb-sec h3{text-align:center; letter-spacing:.1em;}

/* Minimal template */
.rb-tpl-minimal-page{padding:56px 50px;}
.rb-tpl-minimal-page .rb-minimal-head h1{font-size:22px; font-weight:600;}
.rb-tpl-minimal-page .rb-minimal-head h1 span{font-size:14px; font-weight:400; color:#777;}
.rb-tpl-minimal-page .rb-minimal-contact{font-size:11px; color:#888; margin-top:4px;}
.rb-tpl-minimal-page .rb-minimal-summary{font-size:13px; color:#333; margin-top:14px; line-height:1.7;}
.rb-tpl-minimal-page .rb-sec-min{margin-top:18px;}
.rb-tpl-minimal-page .rb-sec-min h3{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#999; margin-bottom:8px; font-weight:600; border:none; padding:0;}
.rb-tpl-minimal-page .rb-item{margin-bottom:10px;}

/* Sidebar template — 2 column, own layout, overrides base .rb-page padding */
.rb-tpl-sidebar-page{
  padding:0; display:grid; grid-template-columns:34% 66%; min-height:900px;
}
.rb-sidebar-left{
  background:var(--navy); color:#fff; padding:40px 26px; box-sizing:border-box;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.rb-sidebar-right{padding:40px 34px; box-sizing:border-box;}
.rb-sidebar-name{font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; line-height:1.2; margin-bottom:4px;}
.rb-sidebar-title{font-size:13px; color:#93A6D6; margin-bottom:24px;}
.rb-sidebar-sec{margin-bottom:22px;}
.rb-sidebar-sec h4{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:#93A6D6; margin-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.15); padding-bottom:6px;}
.rb-sidebar-sec div{font-size:11.5px; color:#E3E9FA; margin-bottom:6px; line-height:1.5;}
.rb-sidebar-skills{display:flex; flex-wrap:wrap; gap:6px;}
.rb-sidebar-skills span{background:rgba(255,255,255,0.12); border-radius:6px; padding:3px 9px; font-size:10.5px; color:#fff;}
.rb-sidebar-edu{font-size:11px; color:#E3E9FA; line-height:1.6; margin-bottom:12px;}
.rb-sidebar-edu span{color:#93A6D6;}
.rb-sidebar-right .rb-sec{margin-top:0; margin-bottom:20px;}
.rb-sidebar-right .rb-sec:first-child{margin-top:0;}
.rb-sidebar-right .rb-sec h3{color:var(--navy); border-bottom-color:#e2e2e2;}
@media print{
  .rb-tpl-sidebar-page{ display:grid !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .rb-sidebar-left{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .rb-entry, .rb-item, .rb-sidebar-sec{ break-inside:avoid; }
}

/* Print / PDF export */
@media print{
  header, footer, .rb-editor, .rb-preview-toolbar, .breadcrumbs, .page-hero{ display:none !important; }
  body{ margin:0 !important; padding:0 !important; background:#fff !important; }
  .tool-shell{ padding:0 !important; }
  .container{ max-width:none !important; padding:0 !important; margin:0 !important; width:100% !important; }
  .rb-shell{ display:block !important; gap:0 !important; }
  .rb-preview-pane{ position:static !important; }
  .rb-preview-scroll{
    max-height:none !important; overflow:visible !important; padding:0 !important;
    background:#fff !important; display:block !important; border-radius:0 !important;
  }
  #resumePreview{
    box-shadow:none !important; max-width:none !important; width:100% !important;
    min-height:0 !important; margin:0 !important;
  }
  @page{ margin:0.4in; size:A4; }
}
.error-box{
  background:#FFF3EF; border:1px solid #FFD3C2; color:#B84A26;
  border-radius:var(--radius-sm); padding:14px 16px; font-size:14px; margin-bottom:16px;
}

/* Career/article listing */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px;}
@media (max-width:900px){.card-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.card-grid{grid-template-columns:1fr;}}
.list-card{
  border:1px solid var(--line); border-radius:var(--radius-md); padding:24px; background:#fff;
  transition:transform .2s ease, box-shadow .2s ease;
}
.list-card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(20,38,74,0.08);}
.list-card h3{font-size:18px; margin-bottom:8px;}
.list-card p{color:var(--slate); font-size:14px; line-height:1.5;}
.list-card .salary{color:var(--blue-deep); font-weight:600; font-size:13.5px; margin-top:10px;}

/* Simple content article */
.article-body{max-width:720px; margin:0 auto; font-size:16.5px; line-height:1.75; color:var(--navy);}
.article-body h2{margin-top:36px; margin-bottom:14px; font-size:24px;}
.article-body p{margin-bottom:16px; color:var(--navy);}

/* Admin */
.admin-shell{display:grid; grid-template-columns:240px 1fr; min-height:100vh;}
.admin-sidebar{background:var(--navy); color:#fff; padding:28px 20px;}
.admin-sidebar a{display:block; color:#C7D2E8; padding:10px 12px; border-radius:10px; font-size:14.5px; margin-bottom:4px;}
.admin-sidebar a:hover,.admin-sidebar a.active{background:rgba(255,255,255,0.08); color:#fff;}
.admin-main{padding:36px 40px; background:var(--mist); min-height:100vh;}
.admin-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; flex-wrap:wrap; gap:12px;}
.stat-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:32px;}
.stat-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:20px;}
.stat-card .num{font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:700; color:var(--blue-deep);}
@media (max-width:900px){
  .admin-shell{grid-template-columns:1fr;}
  .admin-sidebar{
    padding:16px 20px; display:flex; align-items:center; gap:6px; overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .admin-sidebar h2{display:none;}
  .admin-sidebar a{white-space:nowrap; margin-bottom:0; padding:8px 12px; font-size:13.5px;}
  .admin-sidebar form{flex-shrink:0; margin-top:0 !important;}
  .admin-main{padding:24px 16px;}
  .stat-cards{grid-template-columns:repeat(2,1fr); gap:12px;}
}
@media (max-width:520px){
  .stat-cards{grid-template-columns:1fr;}
}
/* Admin tables need to scroll horizontally on narrow screens rather than
   squeezing columns unreadably thin or overflowing the page. */
@media (max-width:900px){
  .admin-table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap;}
}
.stat-card .label{color:var(--slate); font-size:13px; margin-top:4px;}
.admin-table{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius-md); overflow:hidden;}
.admin-table th,.admin-table td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); font-size:14px;}
.admin-table th{background:var(--mist); color:var(--slate); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em;}
.status-pill{padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600;}
.status-pill.published{background:#E4F6EA; color:#1E8A4C;}
.status-pill.draft{background:#FFF3EF; color:#B84A26;}
.login-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--mist);}
.login-box{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:40px; width:380px;}