:root{
  --ink:#0d1220;
  --ink-2:#3d465c;
  --muted:#6b7488;
  --line:#e5e8ef;
  --line-2:#f1f3f8;
  --bg:#ffffff;
  --bg-soft:#f7f8fb;
  --brand:#1a56db;
  --brand-dark:#1543ab;
  --brand-soft:#eef3fe;
  --green:#0e9f6e;
  --green-soft:#e6f7f0;
  --amber:#c27803;
  --amber-soft:#fdf6e3;
  --red:#e02424;
  --red-soft:#fdecec;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(13,18,32,.05), 0 4px 16px rgba(13,18,32,.06);
  --shadow-lg:0 8px 32px rgba(13,18,32,.10);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit}

.container{max-width:1180px;margin:0 auto;padding:0 20px}
.container-sm{max-width:820px;margin:0 auto;padding:0 20px}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:66px;gap:24px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-.02em}
.logo-mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#3b82f6);display:grid;place-items:center;color:#fff;font-size:15px;font-weight:800}
.nav{display:flex;align-items:center;gap:4px}
.nav a{padding:8px 13px;border-radius:8px;font-size:14.5px;font-weight:500;color:var(--ink-2);transition:.15s}
.nav a:hover{background:var(--bg-soft);color:var(--ink)}
.nav a.active{color:var(--brand);font-weight:600}
.header-actions{display:flex;align-items:center;gap:9px}
.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;width:38px;height:38px;cursor:pointer;font-size:18px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 18px;border-radius:var(--radius-sm);font-size:14.5px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:.16s;white-space:nowrap}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark);transform:translateY(-1px);box-shadow:0 6px 18px rgba(26,86,219,.28)}
.btn-ads{background:#FF7A00;color:#fff}
.btn-ads:hover{background:#E86E00;transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,122,0,.30)}
.nav a.nav-ads,.header .nav a.nav-ads{background:#FF7A00 !important;color:#fff !important;border:0}
.nav a.nav-ads:hover,.header .nav a.nav-ads:hover{background:#E86E00 !important;color:#fff !important}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-2);background:var(--bg-soft)}
.btn-soft{background:var(--brand-soft);color:var(--brand)}
.btn-soft:hover{background:#e0eaFD}
.btn-danger{background:var(--red);color:#fff}
.btn-sm{padding:7px 13px;font-size:13.5px}
.btn-lg{padding:13px 26px;font-size:15.5px}
.btn-block{width:100%}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg,#f7f9ff 0%,#ffffff 100%);padding:70px 0 56px;border-bottom:1px solid var(--line-2);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-140px;right:-80px;width:420px;height:420px;background:radial-gradient(circle,rgba(26,86,219,.09),transparent 70%);border-radius:50%}
.hero-inner{position:relative;text-align:center;max-width:760px;margin:0 auto}
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);padding:6px 14px;border-radius:100px;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:20px;box-shadow:var(--shadow)}
.hero-badge span{width:7px;height:7px;border-radius:50%;background:var(--green)}
.hero h1{font-size:clamp(31px,5vw,50px);line-height:1.12;letter-spacing:-.033em;font-weight:800;margin-bottom:16px}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero p{font-size:17px;color:var(--muted);max-width:560px;margin:0 auto 30px}

/* ---------- Search Bar ---------- */
.searchbar{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:6px;max-width:900px;margin:0 auto}
.searchbar .field{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:9px;background:transparent;transition:.15s}
.searchbar .field:hover{background:var(--bg-soft)}
.searchbar .field + .field{border-left:1px solid var(--line-2)}
.searchbar .field svg{flex-shrink:0;color:var(--muted)}
.searchbar input,.searchbar select{border:0;outline:0;background:transparent;width:100%;font-size:14.5px;color:var(--ink);cursor:pointer}
.searchbar input{cursor:text}
.searchbar input::placeholder{color:#9aa3b5}

.hero-stats{display:flex;justify-content:center;gap:34px;margin-top:34px;flex-wrap:wrap}
.hero-stat b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em}
.hero-stat span{font-size:13px;color:var(--muted);font-weight:500}

/* ---------- Sections ---------- */
.section{padding:60px 0}
.section-soft{background:var(--bg-soft)}
.section-head{margin-bottom:30px}
.section-head.center{text-align:center;max-width:600px;margin-left:auto;margin-right:auto}
.section-head .eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brand);margin-bottom:9px}
.section-head h2{font-size:clamp(24px,3.4vw,33px);letter-spacing:-.028em;font-weight:800;margin-bottom:9px}
.section-head p{color:var(--muted);font-size:15.5px}
.section-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:30px}

/* ---------- Category Grid ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.cat-card{position:relative;display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2;border:1px solid var(--line);transition:.2s;background:var(--brand-soft)}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cat-card .cat-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,10,24,.82) 0%,rgba(6,10,24,.35) 45%,rgba(6,10,24,.08) 100%)}
.cat-card .cat-text{position:absolute;left:0;right:0;bottom:0;padding:16px}
.cat-card .cat-text h3{color:#fff;font-size:16px;font-weight:700;margin:0 0 2px;letter-spacing:-.01em;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.cat-card .cat-text span{color:rgba(255,255,255,.9);font-size:12.5px;font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.cat-card .cat-fallback{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--brand),#3b82f6)}
/* "View all" tile — same size as a category card, brand-accented */
.cat-card-all .cat-fallback-all{background:linear-gradient(135deg,#0d1220,#1e293b)}
.cat-card-all .cat-overlay{background:linear-gradient(to top,rgba(6,10,24,.55) 0%,rgba(6,10,24,.15) 60%,transparent 100%)}
.cat-card-all .cat-text h3{display:inline-flex;align-items:center;gap:6px}
.cat-card-all .cat-text h3::after{content:"→";font-weight:700}
.cat-card-all:hover .cat-fallback-all{background:linear-gradient(135deg,var(--brand),#3b82f6)}

/* ---------- Job Cards ---------- */
.job-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.job-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;transition:.18s;position:relative;display:flex;flex-direction:column}
.job-card:hover{border-color:#c9d4ea;box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.job-card.featured{border-color:#f2d492;background:linear-gradient(180deg,#fffdf7,#fff)}
.job-top{display:flex;gap:13px;margin-bottom:14px}
.job-logo{width:46px;height:46px;border-radius:10px;background:var(--brand-soft);display:grid;place-items:center;font-weight:800;color:var(--brand);font-size:17px;flex-shrink:0;overflow:hidden}
.job-logo img{width:100%;height:100%;object-fit:cover}
.job-title{font-size:16px;font-weight:700;letter-spacing:-.012em;line-height:1.35;margin-bottom:3px}
.job-company{font-size:13.5px;color:var(--muted);font-weight:500}
.job-meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;padding:4.5px 10px;border-radius:100px;background:var(--bg-soft);color:var(--ink-2);border:1px solid var(--line-2)}
.chip.green{background:var(--green-soft);color:var(--green);border-color:transparent}
.chip.blue{background:var(--brand-soft);color:var(--brand);border-color:transparent}
.chip.amber{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.job-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line-2);margin-top:auto}
.job-salary{font-size:14.5px;font-weight:700;color:var(--green)}
.job-time{font-size:12.5px;color:var(--muted)}
.ribbon{position:absolute;top:14px;right:14px;background:#f7c948;color:#66500a;font-size:11px;font-weight:800;padding:3px 9px;border-radius:100px;letter-spacing:.04em}

/* ---------- Layout / Filters ---------- */
.split{display:grid;grid-template-columns:270px 1fr;gap:26px;align-items:start}
.filter-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:sticky;top:86px}
.filter-group{margin-bottom:20px}
.filter-group:last-child{margin-bottom:0}
.filter-group h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:11px}
.check{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14px;cursor:pointer;color:var(--ink-2)}
.check input{accent-color:var(--brand);width:15px;height:15px;cursor:pointer}
.check:hover{color:var(--ink)}

/* ---------- Forms ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px;box-shadow:var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{margin-bottom:17px}
.form-group label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;color:var(--ink-2)}
.form-group label .opt{font-weight:500;color:#9aa3b5;font-size:12.5px}
.form-control{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:14.5px;background:#fff;transition:.15s;color:var(--ink)}
.form-control:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(26,86,219,.11)}
textarea.form-control{resize:vertical;min-height:110px;line-height:1.6}
.form-hint{font-size:12.5px;color:var(--muted);margin-top:6px}
.file-drop{border:1.5px dashed var(--line);border-radius:var(--radius-sm);padding:22px;text-align:center;cursor:pointer;transition:.15s;background:var(--bg-soft)}
.file-drop:hover{border-color:var(--brand);background:var(--brand-soft)}
.file-drop b{display:block;font-size:14px;margin-bottom:3px}
.file-drop span{font-size:12.5px;color:var(--muted)}
.file-drop input{display:none}

/* ---------- Alerts ---------- */
.alert{padding:13px 16px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;margin-bottom:20px;display:flex;gap:10px;align-items:flex-start}
.alert-success{background:var(--green-soft);color:#046c4e;border:1px solid #a8e6cd}
.alert-error{background:var(--red-soft);color:#9b1c1c;border:1px solid #f5c2c2}
.alert-info{background:var(--brand-soft);color:var(--brand-dark);border:1px solid #c3d7fb}

/* ---------- Job Detail ---------- */
.detail-hero{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:34px 0}
.detail-head{display:flex;gap:18px;align-items:flex-start}
.detail-logo{width:66px;height:66px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:24px;font-weight:800;color:var(--brand);flex-shrink:0}
.detail-head h1{font-size:clamp(22px,3.2vw,30px);letter-spacing:-.028em;line-height:1.2;margin-bottom:7px}
.prose h3{font-size:17px;font-weight:700;margin:26px 0 11px;letter-spacing:-.015em}
.prose h3:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink-2);font-size:15px;line-height:1.75}
.prose ul{padding-left:20px;margin:10px 0}
.prose li{margin-bottom:5px}
.info-list{list-style:none}
.info-list li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.info-list li:last-child{border:0}
.info-list span{color:var(--muted)}
.info-list b{font-weight:600;text-align:right}
.sticky-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;position:sticky;top:86px}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.step{text-align:center;padding:8px}
.step-num{width:46px;height:46px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:17px;margin:0 auto 15px;box-shadow:0 6px 18px rgba(26,86,219,.25)}
.step h3{font-size:16.5px;font-weight:700;margin-bottom:7px}
.step p{font-size:14px;color:var(--muted)}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(135deg,#0d1220,#1a2942);border-radius:18px;padding:48px 40px;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;top:-60px;left:-60px;width:280px;height:280px;background:radial-gradient(circle,rgba(26,86,219,.4),transparent 70%)}
.cta > *{position:relative}
.cta h2{font-size:clamp(24px,3.4vw,33px);letter-spacing:-.028em;margin-bottom:11px}
.cta p{color:rgba(255,255,255,.7);max-width:480px;margin:0 auto 26px;font-size:15.5px}
.cta .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.cta .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* ---------- Footer ---------- */
.footer{background:#0d1220;color:rgba(255,255,255,.62);padding:52px 0 26px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;margin-bottom:38px}
.footer h4{color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:15px}
.footer ul{list-style:none}
.footer li{margin-bottom:9px}
.footer a{font-size:14px;transition:.15s}
.footer a:hover{color:#fff}
.footer .logo{color:#fff;margin-bottom:13px}
.footer-about{font-size:14px;line-height:1.7;max-width:290px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px}

/* ---------- Misc ---------- */
.empty{text-align:center;padding:60px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.empty-icon{width:60px;height:60px;border-radius:16px;background:var(--bg-soft);display:grid;place-items:center;margin:0 auto 16px;color:var(--muted)}
.empty h3{font-size:17px;margin-bottom:6px}
.empty p{color:var(--muted);font-size:14.5px}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;font-size:14px;font-weight:600;background:#fff;padding:0 10px}
.pagination a:hover{border-color:var(--brand);color:var(--brand)}
.pagination .active{background:var(--brand);color:#fff;border-color:var(--brand)}
.page-head{padding:34px 0;border-bottom:1px solid var(--line);background:var(--bg-soft)}
.page-head h1{font-size:clamp(24px,3.4vw,33px);letter-spacing:-.028em;margin-bottom:6px}
.page-head p{color:var(--muted)}
.result-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.result-bar b{font-size:15px}
.tabs{display:flex;gap:4px;background:var(--bg-soft);padding:4px;border-radius:10px;margin-bottom:24px;width:fit-content}
.tabs a{padding:8px 18px;border-radius:7px;font-size:14px;font-weight:600;color:var(--muted)}
.tabs a.active{background:#fff;color:var(--ink);box-shadow:var(--shadow)}

@media(max-width:960px){
  .split{grid-template-columns:1fr}
  .split-side340,.split-side360{grid-template-columns:1fr}
  .filter-box{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}
  .searchbar{grid-template-columns:1fr 1fr}
  .searchbar .field + .field{border-left:0}
}
@media(max-width:720px){
  .nav{display:none}
  .menu-toggle{display:block}
  .nav.open{display:flex;position:absolute;top:66px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:12px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg)}
  .searchbar{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero{padding:46px 0 40px}
  .section{padding:44px 0}
  .detail-head{flex-direction:column}
  .header-actions .btn-ghost{display:none}
}

/* =========================================================
   AUTH / USER MENU / DASHBOARD  (added in v2)
   ========================================================= */

/* ---------- Header user dropdown ---------- */
.user-menu{position:relative}
.user-btn{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:100px;padding:4px 10px 4px 4px;cursor:pointer;transition:.15s;color:var(--ink-2)}
.user-btn:hover{border-color:var(--ink-2);background:var(--bg-soft)}
.user-menu.open .user-btn{border-color:var(--brand);background:var(--brand-soft)}
.user-avatar{width:29px;height:29px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#3b82f6);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;overflow:hidden;flex-shrink:0}
.user-avatar img{width:100%;height:100%;object-fit:cover}

.user-dropdown{position:absolute;top:calc(100% + 9px);right:0;min-width:246px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:7px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;z-index:200}
.user-menu.open .user-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.user-dropdown a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink-2);transition:.12s}
.user-dropdown a:hover{background:var(--bg-soft);color:var(--ink)}
.user-dropdown a.danger{color:var(--red)}
.user-dropdown a.danger:hover{background:var(--red-soft)}
.user-dropdown-head{padding:11px 12px 12px;border-bottom:1px solid var(--line-2);margin-bottom:6px}
.user-dropdown-head b{display:block;font-size:14.5px;letter-spacing:-.01em;margin-bottom:2px}
.user-dropdown-head span{display:block;font-size:12.5px;color:var(--muted);word-break:break-all}
.user-dropdown-label{padding:9px 12px 5px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.user-dropdown-sep{height:1px;background:var(--line-2);margin:6px 0}
.badge-role{display:inline-block;margin-top:7px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:100px;letter-spacing:.03em}
.badge-role.employer{background:var(--brand-soft);color:var(--brand)}
.badge-role.jobseeker{background:var(--green-soft);color:var(--green)}
.nav-sep{display:none}
.nav-mobile-only{display:none}

/* ---------- Auth pages ---------- */
.auth-section{padding:52px 0 70px;background:linear-gradient(180deg,#f7f9ff,#fff)}
.auth-card{max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px;box-shadow:var(--shadow-lg)}
.auth-card.wide{max-width:720px}
.auth-head{text-align:center;margin-bottom:26px}
.auth-head h1{font-size:26px;letter-spacing:-.028em;margin-bottom:7px}
.auth-head p{color:var(--muted);font-size:14.5px}
.auth-foot{text-align:center;margin-top:20px;padding-top:19px;border-top:1px solid var(--line-2);font-size:14px;color:var(--muted)}
.auth-foot a{color:var(--brand);font-weight:600}
.role-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--bg-soft);border:1px solid var(--line);padding:5px;border-radius:11px;margin-bottom:24px}
.role-switch a{text-align:center;padding:10px 8px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--muted);transition:.15s}
.role-switch a.active{background:#fff;color:var(--brand);box-shadow:var(--shadow)}
.role-switch a:hover:not(.active){color:var(--ink)}
.pw-wrap{position:relative}
.pw-wrap .form-control{padding-right:52px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;font-size:12px;font-weight:700;color:var(--brand);padding:7px 9px;border-radius:6px}
.pw-toggle:hover{background:var(--brand-soft)}

/* ---------- Dashboard ---------- */
.dash-head{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:28px 0 0}
.dash-head-top{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.dash-avatar{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--brand),#3b82f6);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:800;overflow:hidden;flex-shrink:0}
.dash-avatar img{width:100%;height:100%;object-fit:cover}
.dash-head h1{font-size:24px;letter-spacing:-.028em;margin-bottom:3px}
.dash-head p{color:var(--muted);font-size:14px}
.dash-tabs{display:flex;gap:2px;overflow-x:auto}
.dash-tabs a{padding:12px 16px;font-size:14px;font-weight:600;color:var(--muted);border-bottom:2.5px solid transparent;white-space:nowrap;transition:.15s}
.dash-tabs a:hover{color:var(--ink)}
.dash-tabs a.active{color:var(--brand);border-bottom-color:var(--brand)}

.dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:26px}
.dash-stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;align-items:center;gap:14px}
.dash-stat .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex-shrink:0}
.dash-stat .ic.blue{background:var(--brand-soft);color:var(--brand)}
.dash-stat .ic.green{background:var(--green-soft);color:var(--green)}
.dash-stat .ic.amber{background:var(--amber-soft);color:var(--amber)}
.dash-stat .ic.red{background:var(--red-soft);color:var(--red)}
.dash-stat b{display:block;font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.dash-stat span{font-size:12.5px;color:var(--muted);font-weight:500}

.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:20px;overflow:hidden}
.panel-head{padding:16px 20px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.panel-head h3{font-size:15.5px;font-weight:700;letter-spacing:-.015em}
.panel-body{padding:20px}
.panel-body.flush{padding:0}

.dtable-wrap{overflow-x:auto}
.dtable{width:100%;border-collapse:collapse;font-size:14px}
.dtable th{text-align:left;padding:11px 18px;background:var(--bg-soft);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap;border-bottom:1px solid var(--line)}
.dtable td{padding:13px 18px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.dtable tr:last-child td{border-bottom:0}
.dtable tbody tr:hover{background:#fafbfd}
.dtable .t-main{font-weight:600;color:var(--ink)}
.dtable .t-sub{font-size:12.5px;color:var(--muted)}
.dbadge{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:100px;white-space:nowrap}
.dbadge.green{background:var(--green-soft);color:var(--green)}
.dbadge.amber{background:var(--amber-soft);color:var(--amber)}
.dbadge.red{background:var(--red-soft);color:var(--red)}
.dbadge.blue{background:var(--brand-soft);color:var(--brand)}
.dbadge.gray{background:var(--line-2);color:var(--ink-2)}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}

.login-nudge{background:var(--brand-soft);border:1px solid #c3d7fb;border-radius:var(--radius);padding:15px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.login-nudge p{font-size:14px;color:var(--brand-dark);margin:0}
.login-nudge b{font-weight:700}
.posting-as{display:flex;align-items:center;gap:13px;background:var(--green-soft);border:1px solid #a8e6cd;border-radius:var(--radius);padding:15px 18px;margin-bottom:24px}
.posting-as .ic{width:40px;height:40px;border-radius:10px;background:#fff;display:grid;place-items:center;font-weight:800;color:var(--green);flex-shrink:0;overflow:hidden}
.posting-as .ic img{width:100%;height:100%;object-fit:cover}
.posting-as b{display:block;font-size:14.5px;color:#046c4e}
.posting-as span{font-size:12.5px;color:#057a57}

@media(max-width:720px){
  .nav.open .nav-mobile-only{display:block}
  .nav.open .nav-sep{display:block;height:1px;background:var(--line-2);margin:7px 0}
  .header-actions .btn-ghost{display:inline-flex}
  .auth-card{padding:24px 20px}
  .role-switch{grid-template-columns:1fr}
  .user-dropdown{right:-40px}
}

/* Terms & Privacy agreement checkbox (register pages) */
.terms-check{display:flex;align-items:flex-start;gap:9px;margin:6px 0 18px;font-size:14px;color:#475569;line-height:1.5;cursor:pointer}
.terms-check input[type="checkbox"]{margin-top:3px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--brand);cursor:pointer}
.terms-link{color:var(--brand);font-weight:600;text-decoration:none}
.terms-link:hover{text-decoration:underline}

/* ============ Save / bookmark on job cards ============ */
.job-card{ position:relative; }

/* bookmark sits in the title row, pushed to the right edge */
.job-save{
  margin-left:auto;      /* push to the far right of the title row */
  flex:0 0 auto;
  align-self:flex-start;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:transparent;
  border:1px solid transparent;
  color:#64748b;         /* professional slate/dark-gray by default */
  cursor:pointer;
  transition:background .15s, color .15s, border-color .15s, transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.job-save:hover{ color:#1a56db; border-color:#dbe4f5; background:#f4f7fe; }
.job-save:active{ transform:scale(.9); }
.job-save.is-saved{ color:#1a56db; }          /* solid blue when saved */
.job-save.is-saved:hover{ background:#f4f7fe; border-color:#dbe4f5; }
.job-save.just-saved{ animation:hs-pop .28s ease; }
@keyframes hs-pop{ 0%{transform:scale(1)} 45%{transform:scale(1.2)} 100%{transform:scale(1)} }

/* ---- Save button on the job detail page (apply box) ---- */
.job-save-btn{ display:flex; align-items:center; justify-content:center; gap:7px; }
.job-save-btn.is-saved{ color:#1a56db; border-color:#bcd0f5; background:#eef3fe; }

/* ============ Notification bell (header) ============ */
.notif-bell{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px; height:42px;
  border-radius:11px;
  color:#475569;
  transition:background .15s, color .15s;
}
.notif-bell:hover{ background:#eff3fa; color:#1a56db; }
.notif-bell-badge{
  position:absolute;
  top:3px; right:3px;
  min-width:18px; height:18px;
  padding:0 5px;
  display:none;
  align-items:center;
  justify-content:center;
  background:#ef4444;
  color:#fff;
  font-size:10.5px;
  font-weight:800;
  line-height:1;
  border-radius:999px;
  border:2px solid #fff;
  box-shadow:0 1px 4px rgba(239,68,68,.4);
  box-sizing:border-box;
}

/* ============ Notifications page ============ */
.notif-wrap{ max-width:720px; margin:0 auto; }

/* segmented tabs */
.notif-tabs{
  display:inline-flex; gap:4px;
  background:#eef1f6; padding:4px; border-radius:12px;
  margin-bottom:22px;
}
.notif-tab{
  padding:9px 22px; border:none; background:transparent;
  border-radius:9px; font-size:14px; font-weight:600; color:#64748b;
  cursor:pointer; transition:all .18s;
}
.notif-tab.active{ background:#fff; color:#0f172a; box-shadow:0 1px 4px rgba(15,23,42,.08); }

.notif-list{ display:flex; flex-direction:column; gap:0; }
.notif-loading{ padding:50px; text-align:center; color:#94a3b8; font-size:14px; }

/* each notification — clean card row with a coloured icon tile */
.notif-item{
  display:flex; gap:14px; align-items:flex-start;
  background:#fff;
  border:1px solid #eceff4;
  border-radius:16px;
  padding:16px 18px;
  margin-bottom:11px;
  cursor:pointer;
  position:relative;
  transition:border-color .16s, box-shadow .16s, transform .1s;
}
.notif-item:hover{ border-color:#d3ddee; box-shadow:0 6px 20px rgba(20,40,80,.07); transform:translateY(-1px); }
.notif-item:active{ transform:translateY(0); }
.notif-item.unread{ background:linear-gradient(90deg,#f7faff,#fff 60%); border-color:#dbe6fb; }

/* coloured icon tile (left) */
.notif-ic{
  flex:0 0 auto;
  width:42px; height:42px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.notif-ic svg{ width:20px; height:20px; }

.notif-body{ flex:1; min-width:0; padding-top:1px; }
.notif-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.notif-title{ font-weight:700; color:#0f172a; font-size:14.5px; line-height:1.35; }
.notif-time{ flex:0 0 auto; font-size:11.5px; color:#9aa6b8; white-space:nowrap; padding-top:2px; }
.notif-text{ color:#5b6472; font-size:13px; margin-top:4px; line-height:1.5; }

/* unread blue dot on the right */
.notif-item.unread::after{
  content:''; position:absolute; top:18px; right:16px;
  width:9px; height:9px; border-radius:50%; background:#2563eb;
}
.notif-item.unread .notif-title{ padding-right:16px; }

/* empty state */
.notif-empty{ text-align:center; padding:64px 20px; color:#64748b; }
.notif-empty-ic{
  width:64px; height:64px; margin:0 auto 14px;
  border-radius:50%; background:#eef3fe; color:#1a56db;
  display:flex; align-items:center; justify-content:center; font-size:28px;
}
.notif-empty h3{ margin:0 0 6px; color:#0f172a; font-size:17px; }
.notif-empty p{ margin:0; font-size:13.5px; }

/* mark-all button spacing */
#notifMarkAll{ white-space:nowrap; }


/* =====================================================================
   PROFILE & JOB-DETAIL — professional layout + full responsive
   (candidate-profile, employer-profile, employer-dashboard, job-detail)
   These pages use .split-side340 / .split-side360 as a STANDALONE grid
   (no .split base class), so there is never a column-direction conflict.
   ===================================================================== */

/* ---- Two-column layout: main content (flexible) + sidebar (fixed) ---- */
.split-side340,
.split-side360{
  display:grid;
  gap:24px;
  align-items:start;
  margin:22px 0 44px;
}
.split-side340{ grid-template-columns:minmax(0,1fr) 340px; }
.split-side360{ grid-template-columns:minmax(0,1fr) 360px; }

/* min-width:0 lets inner content shrink instead of overflowing the column */
.split-side340 > *,
.split-side360 > *{ min-width:0; }

/* ---- Sticky sidebar on desktop only ---- */
@media (min-width:993px){
  .split-side340 > :last-child,
  .split-side360 > :last-child{ position:sticky; top:86px; }
}

/* ---- Panels: softer, more premium ---- */
.panel{ box-shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.03); }
.panel-head h3{ color:var(--ink); }

/* ---- Forms: comfortable, clear focus ---- */
.form-control{ border-radius:10px; transition:border-color .15s, box-shadow .15s; }
.form-control:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); outline:none; }
.form-group label{ font-weight:600; font-size:13.5px; color:var(--ink); margin-bottom:6px; }
.form-group .opt{ font-weight:500; color:var(--muted); }

/* ---- Job-detail body typography + bullets ---- */
.detail-body{ font-size:15px; line-height:1.75; color:var(--ink-2); }
.detail-body h2,.detail-body h3{ margin:22px 0 10px; font-size:17px; letter-spacing:-.01em; color:var(--ink); }
.detail-body ul{ margin:6px 0 6px 2px; padding:0; list-style:none; }
.detail-body li{ position:relative; padding-left:22px; margin-bottom:8px; }
.detail-body li::before{ content:""; position:absolute; left:2px; top:9px; width:7px; height:7px; border-radius:50%; background:var(--brand); }
.sticky-card{ box-shadow:0 6px 22px rgba(16,24,40,.07); }

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Tablet / small laptop: sidebar drops below, both full width */
@media (max-width:992px){
  .split-side340,
  .split-side360{
    grid-template-columns:1fr;
    gap:18px;
    margin:16px 0 30px;
  }
  .split-side340 > :last-child,
  .split-side360 > :last-child{ position:static; }
  .sticky-card{ position:static; }
}

/* Large phones */
@media (max-width:640px){
  .container{ padding-left:16px; padding-right:16px; }
  .panel-head{ padding:14px 16px; }
  .panel-body{ padding:16px; }
  .form-row{ grid-template-columns:1fr; gap:14px; }
  .detail-hero{ padding:22px 0; }
  .detail-head{ flex-direction:column; gap:12px; }
  .detail-logo{ width:56px; height:56px; font-size:20px; }
  .detail-head h1{ font-size:21px; }
  /* action buttons inside panels go full width for easy tapping */
  .panel-body > .btn,
  .panel-body > form > .btn{ width:100%; }
  .panel-body > .btn + .btn{ margin-top:8px; }
}

/* Small phones */
@media (max-width:400px){
  .panel-head h3{ font-size:14.5px; }
  .detail-head h1{ font-size:19px; }
  .panel-body{ padding:14px; }
}