:root{
  --green:#0E8B61;
  --dark:#11132E;
  --bg:#F7F6F2;
  --border:#E5E7EB;
  --muted:#6B7280;
  --light-green:#dcfce7;
  --text-green:#15803d;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif;}
html{overflow-x:clip;}
body{background:var(--bg);color:var(--dark);padding-bottom:max(90px, calc(72px + env(safe-area-inset-bottom, 0px)));overflow-x:clip;max-width:100vw;}
.container{padding:18px 20px;max-width:100%;min-width:0;}

/* TOP BAR */
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.logo-text{font-size:24px;font-weight:800;color:var(--dark);white-space:nowrap;text-decoration:none;}
.logo-text span{color:var(--green);}
.search-bar{flex:1;height:48px;background:#fff;border:2px solid var(--border);border-radius:24px;display:flex;align-items:center;padding:0 16px;gap:8px;transition:.2s;}
.search-bar:focus-within{border-color:var(--green);}
.search-bar input{background:none;border:none;outline:none;width:100%;color:var(--dark);font-size:15px;}
.search-bar input::placeholder{color:var(--muted);}
.notification-btn{width:48px;height:48px;background:#fff;border:2px solid var(--border);border-radius:14px;display:flex;justify-content:center;align-items:center;font-size:20px;cursor:pointer;flex-shrink:0;}
.profile-link{width:48px;height:48px;background:var(--green);border-radius:50%;display:flex;justify-content:center;align-items:center;color:#fff;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;flex-shrink:0;}

/* INSIGHT BOXES ROW */
.insight-row{display:flex;gap:14px;overflow-x:auto;padding-bottom:4px;margin-bottom:4px;}
.insight-row::-webkit-scrollbar{display:none;}

.insight-box{background:#fff;border-radius:20px;padding:18px;min-width:min(200px,100%);flex:1;box-shadow:0 1px 4px rgba(0,0,0,.06);cursor:pointer;transition:.2s;border:2px solid transparent;}
.insight-box-wide{min-width:240px;flex:1.2 0 240px;}
.insight-box:hover{border-color:var(--green);}

.insight-box .box-label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;}

/* Profile box */
.profile-box-inner{display:flex;align-items:center;gap:12px;}
.profile-ring{position:relative;width:56px;height:56px;flex-shrink:0;}
.profile-ring svg{position:absolute;top:0;left:0;}
.profile-ring .ring-bg{stroke:#e5e7eb;fill:none;stroke-width:5;}
.profile-ring .ring-fill{stroke:var(--green);fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:138.2;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50% 50%;transition:1s;}
.profile-avatar-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:var(--dark);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;overflow:hidden;}
.profile-pct{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:20px;white-space:nowrap;}
.profile-box-text h3{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:3px;word-break:break-word;}
.profile-box-text p{font-size:12px;color:var(--muted);margin-bottom:6px;}
.profile-box-text a{color:var(--green);font-size:13px;font-weight:700;text-decoration:none;}

/* Search appearances box */
.search-box-inner{display:flex;align-items:center;gap:14px;}
.score-ring{width:60px;height:60px;border-radius:50%;border:5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.score-ring .score-num{font-size:20px;font-weight:800;color:var(--dark);}
.search-box-text h3{font-size:22px;font-weight:800;color:var(--dark);margin-bottom:2px;}
.search-box-text p{font-size:12px;color:var(--muted);margin-bottom:6px;}
.search-box-text a{color:var(--green);font-size:13px;font-weight:700;text-decoration:none;}

/* Recruiter box */
.recruiter-box-inner{display:flex;flex-direction:column;gap:8px;}
.recruiter-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg);border-radius:12px;}
.recruiter-item .r-icon{font-size:16px;flex-shrink:0;}
.recruiter-item .r-text{font-size:13px;font-weight:500;color:var(--dark);}
.recruiter-item .r-new{margin-left:auto;background:var(--light-green);color:var(--text-green);font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;white-space:nowrap;}

/* SECTION */
.section{margin-top:24px;}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap;}
.section-header h2{font-size:20px;font-weight:700;color:var(--dark);line-height:1.3;min-width:0;}
.section-header a{color:var(--green);text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap;}

/* JOBS */
.jobs-container{display:flex;overflow-x:auto;gap:14px;padding-bottom:10px;}
.jobs-container::-webkit-scrollbar{display:none;}
.job-card{min-width:260px;background:#fff;border-radius:22px;padding:18px;box-shadow:0 2px 8px rgba(0,0,0,.06);border:2px solid transparent;transition:.2s;cursor:pointer;}
.job-card:hover{border-color:var(--green);}
.company-logo{width:52px;height:52px;background:var(--bg);border-radius:14px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;font-size:24px;}
.job-title{font-size:18px;font-weight:700;color:var(--dark);margin-bottom:6px;}
.company{color:var(--muted);margin-bottom:6px;font-size:14px;}
.location{font-size:13px;color:var(--muted);margin-bottom:10px;}
.match{color:var(--green);font-weight:700;font-size:14px;margin-bottom:14px;}
.apply-btn{display:flex;align-items:center;justify-content:center;width:100%;height:44px;border:none;border-radius:12px;background:var(--dark);color:white;font-weight:700;font-size:14px;cursor:pointer;transition:.2s;text-decoration:none;box-sizing:border-box;}
.apply-btn:hover{background:var(--green);}
.apply-btn.is-applied,.apply-btn:disabled{background:var(--green);cursor:default;opacity:.92;}

/* LEARNING */
.learning-card{background:#fff;padding:18px;border-radius:18px;margin-bottom:12px;box-shadow:0 1px 4px rgba(0,0,0,.05);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.learning-card-info h3{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:4px;}
.learning-card-info p{color:var(--muted);font-size:13px;}
.progress-pill{height:6px;background:var(--border);border-radius:999px;overflow:hidden;margin-top:8px;width:160px;}
.progress-pill-fill{height:100%;background:var(--green);border-radius:999px;}
.learning-icon{font-size:28px;flex-shrink:0;}

/* BOTTOM NAV */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:72px;background:#fff;display:flex;justify-content:space-around;align-items:center;border-top:2px solid var(--border);}
.nav-item{display:flex;flex-direction:column;align-items:center;font-size:12px;color:var(--muted);cursor:pointer;font-weight:500;text-decoration:none;}
.nav-item.active{color:var(--green);}
.nav-icon{font-size:22px;margin-bottom:3px;}
.floating-apply{background:var(--dark);padding:10px 20px;border-radius:18px;margin-top:-28px;color:white;font-weight:700;font-size:14px;box-shadow:0 4px 16px rgba(17,19,46,.3);}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  body.job-search-page {
    overflow-x: clip;
    padding-bottom: max(80px, calc(64px + env(safe-area-inset-bottom, 0px)));
  }
  body.job-search-page .container {
    padding: 14px 16px 20px;
  }
  body.job-search-page .topbar {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
  }
  body.job-search-page .logo-text {
    font-size: 20px;
  }
  body.job-search-page .search-bar {
    order: 3;
    flex: 1 1 100%;
    height: 44px;
  }
  body.job-search-page .notification-btn,
  body.job-search-page .profile-link {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  body.job-search-page .insight-row {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  body.job-search-page .insight-box,
  body.job-search-page .insight-box-wide {
    min-width: min(280px, 82vw);
    padding: 16px;
    scroll-snap-align: start;
    flex: 0 0 auto;
  }
  body.job-search-page .section-header {
    align-items: flex-start;
    gap: 8px;
  }
  body.job-search-page .section-header h2 {
    font-size: 18px;
  }
  body.job-search-page .learning-card {
    flex-direction: column;
    align-items: flex-start;
  }
  body.job-search-page .progress-pill {
    width: 100%;
    max-width: none;
  }
  body.job-search-page .bottom-nav {
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  body.job-search-page .nav-item {
    font-size: 11px;
  }
  body.job-search-page .floating-apply {
    font-size: 12px;
    padding: 8px 14px;
    margin-top: -24px;
  }
  body.job-search-page #toast {
    left: 16px;
    right: 16px;
    bottom: 82px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  body.job-search-page .container {
    padding: 12px 14px 20px;
  }
  body.job-search-page .job-card {
    min-width: 220px;
    padding: 16px;
  }
  body.job-search-page .job-title {
    font-size: 16px;
  }
  body.job-search-page .recruiter-item {
    padding: 6px 8px;
  }
  body.job-search-page .recruiter-item .r-text {
    font-size: 12px;
  }
  body.job-search-page .search-box-text h3 {
    font-size: 18px;
  }
}