/* ===================================================================
   Signalfire — "Glass Sky" design system
   White + blue animated glassmorphism. Same class names as before,
   so index.html / app.js keep working untouched.
=================================================================== */

:root{
  --bg-1: #eef4ff;
  --bg-2: #dce9ff;
  --blue-50: #eaf2ff;
  --blue-100: #d3e4ff;
  --blue-300: #8fb8ff;
  --blue-500: #2f6fed;
  --blue-600: #1f56d6;
  --blue-700: #163f9e;
  --blue-900: #0b2554;
  --ink: #0b1e3d;          /* main text — dark navy, always on light glass */
  --ink-soft: #3f5378;     /* secondary text, still AA-contrast on white/blue-50 */
  --line: rgba(11, 37, 84, 0.14);
  --line-strong: rgba(31, 86, 214, 0.35);
  --accent: #2f6fed;
  --accent-ink: #ffffff;   /* text ON the accent — must stay white for contrast */
  --good: #0f8f5f;
  --good-bg: #e3f8ef;
  --warn-bg: #fff4e0;
  --warn-ink: #7a4a00;
  --card: rgba(255, 255, 255, 0.68);
  --card-solid: #ffffff;
  --glass-border: rgba(255, 255, 255, 0.55);
  --shadow-off: 0 18px 40px -12px rgba(11, 37, 84, 0.28);
  --shadow-off-sm: 0 8px 22px -8px rgba(11, 37, 84, 0.22);
  --radius: 16px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--bg-1);
  color: var(--ink);
  font-size: 16px;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------------- animated sky backdrop ---------------- */
.board-texture{
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(47,111,237,0.30), transparent 45%),
    radial-gradient(circle at 85% 12%, rgba(143,184,255,0.35), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(47,111,237,0.22), transparent 50%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%;
  animation: driftSky 22s ease-in-out infinite alternate;
}
@keyframes driftSky{
  0%{ background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
  100%{ background-position: 30% 20%, 70% 30%, 40% 70%, 0 0; }
}

h1,h2,h3{ font-family: var(--font-display); margin: 0; letter-spacing: -0.01em; color: var(--ink); }
p{ margin: 0; }
:focus-visible{ outline: 3px solid var(--accent); outline-offset: 2px; }
.hidden{ display: none !important; }
.muted{ color: var(--ink-soft); }
.muted.small{ font-size: 0.88rem; margin-top: 6px; }

/* ---------------- glass helper ---------------- */
.glass{
  background: var(--card);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}

/* ---------------- buttons ---------------- */
.btn{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  padding: 11px 20px;
  background: rgba(255,255,255,0.75);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-off-sm);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-off); background: #fff; }
.btn:active{ transform: translateY(0); box-shadow: var(--shadow-off-sm); }
.btn-solid{
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: var(--accent-ink);
  border-color: transparent;
}
.btn-solid:hover{ background: linear-gradient(135deg, var(--blue-600), var(--blue-900)); }
.btn-outline{ background: rgba(255,255,255,0.35); color: var(--blue-700); }
.btn-ghost{ box-shadow: none; border-color: transparent; background: transparent; color: var(--ink-soft); }
.btn-ghost:hover{ transform: none; box-shadow: none; background: rgba(47,111,237,0.10); color: var(--ink); }
.btn-lg{ padding: 16px 30px; font-size: 1.1rem; }
.btn-sm{ padding: 8px 16px; font-size: 0.9rem; }
.btn-block{ width: 100%; }
.btn-row{ display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------- nav ---------------- */
.nav{
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.6);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.nav-inner{
  max-width: 1180px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 24px;
}
.brand{ display:flex; align-items:center; gap:9px; cursor:pointer; margin-right: auto; }
.brand-pin{
  width: 13px; height: 13px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-300), var(--blue-600));
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--blue-500), 0 0 12px rgba(47,111,237,0.6);
  animation: pulseGlow 2.4s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{ box-shadow: 0 0 0 2px var(--blue-500), 0 0 8px rgba(47,111,237,0.5); }
  50%{ box-shadow: 0 0 0 2px var(--blue-500), 0 0 18px rgba(47,111,237,0.9); }
}
.brand-name{ font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink); }
.brand-name b{ color: var(--accent); }
.nav-links{ display:flex; gap: 4px; }
.nav-link{
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  background: none; border: 1.5px solid transparent; border-radius: 10px;
  padding: 8px 14px; cursor: pointer; color: var(--ink-soft);
  transition: all .15s ease;
}
.nav-link:hover{ color: var(--ink); background: rgba(47,111,237,0.08); }
.nav-link.active{ color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); box-shadow: var(--shadow-off-sm); }
.nav-auth{ display:flex; gap: 10px; }
.nav-user{ display:flex; align-items:center; gap: 10px; }
.user-chip{
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-300), var(--blue-600));
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1rem;
}

/* ---------------- landing ---------------- */
.landing{ max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.hero{ padding: 84px 0 60px; max-width: 760px; }
.hero-tag{
  display:inline-block; font-family: var(--font-mono); font-size: 0.85rem;
  background: rgba(255,255,255,0.6); border: 1.5px solid var(--line-strong); border-radius: 999px;
  padding: 6px 16px; margin-bottom: 22px; letter-spacing: 0.02em; color: var(--blue-700);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: dropIn .5s ease both;
}
.hero-title{
  font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; font-weight: 700; color: var(--ink);
  animation: dropIn .6s ease both .05s;
}
.hero-underline{ position: relative; white-space: nowrap; color: var(--blue-700); }
.hero-underline::after{
  content:""; position:absolute; left:0; right:0; bottom: 4px; height: 14px;
  background: linear-gradient(90deg, var(--blue-300), var(--blue-600)); z-index: -1; opacity: 0.55;
  transform-origin: left; animation: growLine .6s ease .5s both;
}
@keyframes growLine{ from{ transform: scaleX(0);} to{ transform: scaleX(1);} }
.hero-sub{
  display:block; margin-top: 22px; font-size: 1.12rem; color: var(--ink-soft); max-width: 560px; line-height: 1.55;
  animation: dropIn .6s ease both .12s;
}
.hero-cta{ display:flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; animation: dropIn .6s ease both .18s; }
.hero-stats{ display:flex; gap: 34px; margin-top: 56px; flex-wrap: wrap; animation: dropIn .6s ease both .24s; }
.stat{ display:flex; flex-direction: column; }
.stat-num{ font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; color: var(--accent); }
.stat-label{ font-size: 0.88rem; color: var(--ink-soft); margin-top: 2px; line-height: 1.4; }

@keyframes dropIn{ from{ opacity:0; transform: translateY(12px);} to{ opacity:1; transform: translateY(0);} }
@keyframes floatCard{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }

.section-title{ font-size: 1.8rem; margin-bottom: 26px; color: var(--ink); }
.how{ padding: 40px 0 70px; border-top: 1.5px dashed var(--line-strong); }
.how-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.how-card{
  background: var(--card); border: 1px solid var(--glass-border); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-off-sm);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.how-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-off); animation: floatCard 2.4s ease-in-out infinite; }
.how-index{
  font-family: var(--font-mono); font-size: 0.76rem; color: var(--blue-700); font-weight: 600;
  background: var(--blue-50); border: 1.5px solid var(--line-strong); border-radius: 999px;
  padding: 4px 12px; display:inline-block; margin-bottom: 12px;
}
.how-card h3{ font-size: 1.12rem; margin-bottom: 8px; color: var(--ink); }
.how-card p{ font-size: 0.92rem; color: var(--ink-soft); line-height: 1.5; }
.landing-footer{
  border-top: 1px solid var(--line); padding: 22px 0 40px;
  font-size: 0.88rem; color: var(--ink-soft); font-family: var(--font-mono);
}

/* ---------------- app shell ---------------- */
.app{ max-width: 1000px; margin: 0 auto; padding: 34px 24px 80px; }
.panel{ display:none; animation: dropIn .35s ease both; }
.panel.active{ display:block; }
.panel-head{ margin-bottom: 24px; }
.panel-head h2{ font-size: 1.7rem; margin-bottom: 5px; color: var(--ink); }
.panel-head p{ color: var(--ink-soft); font-size: 1rem; }

.search-bar{ display:flex; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; }
.search-bar input, .search-bar select{
  flex: 1; min-width: 180px;
  font-family: var(--font-body); font-size: 1rem;
  padding: 12px 15px; border: 1.5px solid var(--line-strong); border-radius: 10px;
  background: rgba(255,255,255,0.7); color: var(--ink);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.search-bar input::placeholder{ color: var(--ink-soft); opacity: 0.85; }
.search-bar input:focus, .search-bar select:focus{ outline: none; border-color: var(--accent); background: #fff; }

.notice{ font-size: 0.92rem; color: var(--warn-ink); background: var(--warn-bg); border: 1.5px solid rgba(122,74,0,0.25); border-radius: 10px; padding: 11px 15px; margin-bottom: 18px; }
.notice:empty{ display:none; }

/* ---------------- result / opportunity cards ---------------- */
.results{ display:grid; gap: 14px; }
.opp-card{
  position: relative;
  background: var(--card); border: 1px solid var(--glass-border); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow-off-sm);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .18s ease, box-shadow .18s ease;
}
.opp-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-off); }
.opp-top{ display:flex; justify-content: space-between; gap: 12px; align-items:flex-start; }
.opp-title{ font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin-bottom: 3px; color: var(--ink); }
.opp-company{ font-size: 0.95rem; color: var(--ink-soft); }
.opp-score{
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700;
  background: var(--good-bg); color: var(--good); border: 1.5px solid rgba(15,143,95,0.3);
  border-radius: 999px; padding: 5px 12px; white-space: nowrap;
}
.opp-meta{ display:flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tag{
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500;
  border: 1.5px solid var(--line-strong); border-radius: 7px; padding: 4px 10px;
  background: var(--blue-50); color: var(--blue-700);
}
.opp-desc{ font-size: 0.94rem; color: var(--ink-soft); margin-top: 12px; line-height: 1.55; }
.opp-actions{ display:flex; gap: 10px; margin-top: 16px; }

.empty-state{
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
  padding: 44px 20px; text-align:center; color: var(--ink-soft); font-size: 1rem;
  background: rgba(255,255,255,0.35);
}
.spinner-row{ display:flex; align-items:center; gap:10px; color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.9rem; padding: 20px 0; }
.spinner{
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid var(--blue-100); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------------- profile ---------------- */
.profile-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.card{
  background: var(--card); border: 1px solid var(--glass-border); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-off-sm);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.card h3{ font-size: 1.12rem; margin-bottom: 10px; color: var(--ink); }
.resume-card{ grid-column: 1 / -1; }
.dropzone{
  display:flex; align-items:center; justify-content:center;
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
  padding: 28px; margin-top: 12px; cursor: pointer; text-align:center;
  font-size: 0.95rem; color: var(--ink-soft); transition: border-color .15s, background .15s;
  background: rgba(255,255,255,0.35);
}
.dropzone:hover{ border-color: var(--accent); background: var(--blue-50); color: var(--blue-700); }
.chip-row{ display:flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.chip{
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500;
  background: var(--good-bg); color: var(--good); border: 1.5px solid rgba(15,143,95,0.3);
  border-radius: 999px; padding: 5px 12px;
}

.stacked-form{ display:flex; flex-direction: column; gap: 14px; }
.stacked-form label{ font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); display:flex; flex-direction: column; gap: 6px; }
.stacked-form input, .stacked-form select{
  font-family: var(--font-body); font-size: 1rem; font-weight: 400; color: var(--ink);
  padding: 11px 13px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: rgba(255,255,255,0.7);
}
.stacked-form input::placeholder{ color: var(--ink-soft); opacity: 0.85; }
.stacked-form input:focus, .stacked-form select:focus{ outline:none; border-color: var(--accent); background: #fff; }
.check-row{ flex-direction: row !important; align-items:center; gap: 9px !important; }
.check-row input{ width: 19px; height: 19px; accent-color: var(--accent); }

/* ---------------- modal ---------------- */
.modal-backdrop{
  position: fixed; inset: 0; background: rgba(11, 37, 84, 0.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; z-index: 100; padding: 20px;
  animation: dropIn .2s ease both;
}
.modal{
  background: rgba(255,255,255,0.85); border: 1px solid var(--glass-border); border-radius: var(--radius);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 30px 60px -20px rgba(11,37,84,0.5); width: 100%; max-width: 400px; padding: 30px; position: relative;
}
.modal-close{
  position:absolute; top: 14px; right: 16px; background:none; border:none;
  font-size: 1.6rem; cursor:pointer; color: var(--ink-soft); line-height: 1;
}
.modal-close:hover{ color: var(--ink); }
.modal-tabs{ display:flex; gap: 8px; margin-bottom: 22px; }
.modal-tab{
  flex:1; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  padding: 10px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: rgba(255,255,255,0.5); cursor:pointer;
  color: var(--ink-soft);
}
.modal-tab.active{ background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); color:#fff; border-color: transparent; }
.modal-form{ display:none; }
.modal-form.active{ display:flex; }
.form-error{ color: #c02b2b; font-size: 0.86rem; min-height: 1em; font-weight: 500; }

/* ---------------- toast ---------------- */
.toast{
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(11, 30, 61, 0.92); color: #ffffff; font-family: var(--font-body); font-size: 0.95rem;
  padding: 13px 22px; border-radius: 12px; box-shadow: var(--shadow-off);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease; z-index: 200;
}
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error{ background: rgba(150, 30, 30, 0.94); }

/* ---------------- responsive ---------------- */
@media (max-width: 860px){
  .nav-links{ display:none; }
  .how-steps{ grid-template-columns: 1fr 1fr; }
  .profile-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .how-steps{ grid-template-columns: 1fr; }
  .hero{ padding-top: 56px; }
  .nav-inner{ padding: 12px 16px; }
  body{ font-size: 15px; }
}

/* ===================================================================
   SignalHire dashboard — glass sky UI (React app.js class names)
=================================================================== */
:root{--navy:#10264d;--text:#172b4d;--text-muted:#536987;--blue:#246bfd;--blue-dark:#1548b8;--sky:#eaf2ff;--glass:rgba(255,255,255,.72);--glass-strong:rgba(255,255,255,.9);--stroke:rgba(47,91,168,.18);--shadow:0 18px 50px rgba(33,75,145,.15)}
body{font-family:'DM Sans',var(--font-body);font-size:16px;background:linear-gradient(135deg,#f9fbff 0%,#e8f1ff 48%,#dceaff 100%);color:var(--text)}
body:before,body:after{content:"";position:fixed;z-index:-1;width:46vw;height:46vw;border-radius:50%;filter:blur(12px);opacity:.45;animation:orb 15s ease-in-out infinite alternate}body:before{top:-18vw;right:-12vw;background:#8db6ff}body:after{bottom:-20vw;left:-14vw;background:#b8d4ff;animation-delay:-7s}@keyframes orb{to{transform:translate(6vw,4vw) scale(1.12)}}
button,input,select,textarea{font:inherit}.app-layout{min-height:100vh;display:flex}.sidebar{width:252px;min-height:100vh;padding:24px 14px;display:flex;flex-direction:column;background:rgba(255,255,255,.67);border-right:1px solid var(--stroke);backdrop-filter:blur(22px) saturate(150%);position:sticky;top:0;height:100vh}.sidebar-brand{display:flex;align-items:center;gap:11px;padding:7px 12px 28px}.brand-logo,.auth-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;color:#fff;font:800 20px Manrope,sans-serif;background:linear-gradient(135deg,#5e9cff,#1d54d2);box-shadow:0 10px 22px rgba(31,86,214,.35)}.sidebar-brand .brand-name{font:800 18px Manrope,sans-serif;color:var(--navy)}.sidebar-nav{display:grid;gap:7px}.nav-item{border:0;background:transparent;color:#4d6383;border-radius:12px;padding:11px 12px;display:flex;gap:12px;align-items:center;cursor:pointer;text-align:left;font-weight:700;transition:.2s}.nav-item:hover{background:#edf4ff;color:var(--blue-dark);transform:translateX(2px)}.nav-item.active{color:#fff;background:linear-gradient(135deg,#367bff,#1d51c6);box-shadow:0 9px 22px rgba(36,107,253,.28)}.nav-icon{display:inline-grid;place-items:center}.sidebar-profile{margin-top:auto;border-top:1px solid var(--stroke);padding-top:14px}.profile-info{display:flex;align-items:center;gap:10px;padding:12px}.profile-avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;background:linear-gradient(135deg,#75a7ff,#2455c9)}.profile-name{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.signout-button{color:#b43e50}.content-area{width:calc(100% - 252px);padding:42px clamp(20px,4vw,62px);max-width:1480px}.view-header{margin-bottom:25px}.view-header h1{font:800 clamp(27px,3vw,40px)/1.15 Manrope,sans-serif;color:var(--navy);letter-spacing:-1.4px}.view-header>div>p:last-child{color:var(--text-muted);margin-top:9px;line-height:1.55;max-width:720px}.kicker{font-size:11px!important;font-weight:800!important;letter-spacing:1.3px;text-transform:uppercase;color:var(--blue)!important;margin-bottom:9px}.location-banner,.search-card,.source-section,.job-card,.ai-card,.stat-metric-card,.chart-panel,.setting-card,.hackathon-card,.research-card{background:var(--glass);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(145%)}.location-banner{padding:13px 16px;border-radius:14px;margin-bottom:22px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--navy);font-size:14px}.location-banner-text{display:flex;align-items:center;gap:7px}.location-badge{color:#1644a5;font-weight:800}.change-loc-btn,.search-button,.primary-button,.apply-direct-btn,.auto-detect-btn{border:0;border-radius:10px;padding:11px 16px;background:linear-gradient(135deg,#377dff,#194fc6);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 8px 17px rgba(36,107,253,.24);transition:.18s}.change-loc-btn:hover,.search-button:hover,.primary-button:hover,.apply-direct-btn:hover,.auto-detect-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}.search-card{border-radius:18px;padding:18px;display:grid;grid-template-columns:1.5fr 1.2fr auto;gap:12px}.search-card label,.filter-group{display:grid;gap:6px;color:#506683;font-size:12px;font-weight:800}.search-card input,.filter-select,.sort-select select,.manual-loc-input,.setting-input,.resume-textarea{border:1px solid #ccdcf5;border-radius:10px;background:rgba(255,255,255,.85);color:var(--text);padding:11px 12px;outline:0;min-width:0}.search-card input:focus,.filter-select:focus,.manual-loc-input:focus,.setting-input:focus,.resume-textarea:focus{border-color:#4b83fa;box-shadow:0 0 0 3px rgba(56,125,255,.14)}.search-button{align-self:end}.filter-bar{display:flex;gap:20px;margin:18px 0}.filter-group{display:flex;align-items:center;gap:8px}.filter-select{padding:7px 10px}.source-section{border-radius:16px;padding:17px;margin-bottom:25px}.section-label{display:flex;justify-content:space-between;color:#36516f;font-size:12px;font-weight:800;letter-spacing:.7px}.source-list{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}.source-pill{border:1px solid #cbdcf6;border-radius:999px;background:rgba(255,255,255,.7);color:#45617f;padding:8px 12px;cursor:pointer;font-size:13px;font-weight:700}.source-pill.selected{border-color:#4a82fa;background:#e8f1ff;color:#1649b7}.source-pill small{margin-left:5px;opacity:.7}.source-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6aa0ff;margin-right:6px}.results-head{display:flex;justify-content:space-between;align-items:center;margin:20px 0;color:#536987;font-size:14px}.results-head strong{color:var(--navy)}.sort-select{display:flex;gap:7px;align-items:center;font-size:13px;font-weight:700}.sort-select select{border:1px solid #cbdcf6;border-radius:8px;padding:6px;background:white;color:var(--text)}.job-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:18px}.job-card{border-radius:18px;padding:19px;cursor:pointer;transition:.2s;min-height:260px;display:flex;flex-direction:column}.job-card:hover{transform:translateY(-5px);box-shadow:0 24px 54px rgba(33,75,145,.2)}.job-topline,.job-badge-row,.job-footer,.tag-row{display:flex;align-items:center}.job-topline{justify-content:space-between}.job-badge-row{gap:9px}.company-mark{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;background:#e3eeff;color:#2457be;font-weight:800}.company-logo-img{width:31px;height:31px;object-fit:contain;border-radius:8px;background:#fff}.job-source{font-size:11px;font-weight:800;color:#52709c}.save-icon-button{border:0;background:transparent;color:#7087a8;cursor:pointer;padding:5px}.save-icon-button.saved{color:#eb9b16}.job-card h3{margin-top:17px;color:var(--navy);font:800 18px/1.3 Manrope,sans-serif}.company-name,.job-location,.job-description{color:var(--text-muted)}.company-name{font-size:14px;font-weight:700;margin-top:5px}.job-location{font-size:12px;margin-top:8px}.job-description{font-size:13px;line-height:1.55;margin:13px 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tag-row{gap:6px;flex-wrap:wrap}.tag-row span{font-size:11px;font-weight:700;color:#315dba;background:#e7f0ff;border-radius:99px;padding:5px 8px}.job-footer{justify-content:space-between;margin-top:auto;padding-top:14px;border-top:1px solid var(--stroke);font-size:12px;color:#315dba}.inspect-btn{font-weight:800}.empty-state{grid-column:1/-1;background:rgba(255,255,255,.56);border:1px dashed #a7c3ef;border-radius:16px;padding:42px;text-align:center;color:var(--text-muted)}.empty-state strong{display:block;color:var(--navy);margin-bottom:8px}.skeleton-card{height:260px;border-radius:18px;padding:20px;background:rgba(255,255,255,.6)}.skeleton-line{border-radius:7px;margin-bottom:15px;background:linear-gradient(90deg,#e4edfb,#f8fbff,#e4edfb);background-size:200% 100%;animation:shine 1.5s infinite}@keyframes shine{to{background-position:-200% 0}}.ai-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.ai-card{border-radius:18px;padding:20px}.ai-card h3{font:800 16px Manrope,sans-serif;color:var(--navy);display:flex;gap:8px;align-items:center}.ai-card p{line-height:1.5}.resume-textarea{width:100%;height:140px;margin:15px 0;resize:vertical}.ats-score-display{padding:18px;border-radius:14px;background:linear-gradient(135deg,#347bff,#1649b5);display:flex;justify-content:space-between;align-items:center}.ats-score-num{font:800 32px Manrope;color:#fff}.skill-tag-group{display:flex;gap:7px;flex-wrap:wrap}.skill-tag-matched,.skill-tag-missing{font-size:12px;border-radius:8px;padding:6px 8px}.skill-tag-matched{background:#e3f7ef;color:#08724a}.skill-tag-missing{background:#fff0e5;color:#a34b12}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.stat-metric-card,.chart-panel{border-radius:18px;padding:20px}.stat-metric-card h3,.chart-panel h3{color:var(--text-muted);font-size:13px}.stat-value{font:800 34px Manrope;color:var(--blue-dark);margin:9px 0}.stat-metric-card p{color:var(--text-muted);font-size:13px}.charts-container{margin-top:18px}.chart-panel{max-width:680px}.chart-bar-row{display:grid;grid-template-columns:90px 1fr 30px;gap:10px;align-items:center;margin-top:14px;font-size:13px;color:var(--text-muted)}.bar-outer{height:10px;border-radius:99px;background:#dbe8fb;overflow:hidden}.bar-inner{height:100%;border-radius:inherit;background:linear-gradient(90deg,#5d99ff,#2457d2);transition:width .5s}.auth-shell{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:6vw;padding:9vw}.auth-intro h1{font:800 clamp(37px,5vw,62px)/1.1 Manrope;color:var(--navy);letter-spacing:-2px}.lede{max-width:590px;color:var(--text-muted);line-height:1.7;margin-top:18px}.intro-stats{display:flex;gap:28px;margin-top:30px}.intro-stats strong{display:block;color:var(--blue-dark);font:800 25px Manrope}.auth-panel{background:rgba(255,255,255,.77);border:1px solid #fff;border-radius:24px;padding:35px;box-shadow:0 26px 70px rgba(31,73,140,.2);backdrop-filter:blur(20px)}.auth-panel h2{color:var(--navy);font:800 25px Manrope;margin:16px 0 23px}.auth-panel form{display:grid;gap:14px}.auth-panel label{display:grid;gap:6px;color:#506683;font-size:13px;font-weight:800}.auth-panel input{border:1px solid #ccdcf5;border-radius:10px;padding:12px;background:white;color:var(--text)}.auth-error{color:#ad3547;font-size:13px;font-weight:700}.switcher,.auth-note{color:var(--text-muted);font-size:13px;margin-top:17px}.switcher button{border:0;background:transparent;color:var(--blue-dark);font-weight:800;cursor:pointer;padding:0}.modal-overlay,.slide-over-overlay{position:fixed;inset:0;background:rgba(16,38,77,.29);backdrop-filter:blur(7px);z-index:10}.modal-overlay{display:grid;place-items:center;padding:20px}.modal-box{width:min(460px,100%);background:#fafdff;border:1px solid #fff;border-radius:20px;padding:25px;box-shadow:0 24px 70px rgba(16,38,77,.28);position:relative}.modal-title{color:var(--navy);font:800 22px Manrope}.modal-subtitle{color:var(--text-muted);line-height:1.55;margin:9px 0 20px}.modal-close-btn,.slide-over-close{border:0;background:transparent;color:#536987;cursor:pointer}.modal-close-btn{position:absolute;right:14px;top:14px}.loc-detect-options{display:grid;gap:13px}.modal-divider{text-align:center;font-size:11px;font-weight:800;color:#8093ae}.manual-loc-form{display:flex;gap:8px}.manual-loc-input{flex:1}.slide-over-panel{position:absolute;right:0;top:0;height:100%;width:min(490px,100%);padding:28px;background:#f8fbff;box-shadow:-18px 0 60px rgba(16,38,77,.22);overflow:auto;animation:slideIn .25s ease}@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}.slide-over-header{margin-top:18px}.slide-over-company,.slide-over-meta,.slide-over-desc{color:var(--text-muted);margin-top:8px;line-height:1.6}.slide-over-section{margin-top:25px}.slide-over-section h3{color:var(--navy);font-size:15px}.slide-over-actions{display:flex;gap:10px;margin-top:28px}.setting-card{border-radius:18px;padding:20px;max-width:680px}.setting-card h3{color:var(--navy)}.setting-tip{color:var(--text-muted);font-size:13px;margin-top:9px}.hackathons-view,.research-view,.saved-view,.analytics-view,.settings-view,.ai-workspace{animation:dropIn .32s ease}.hackathon-card,.research-card{border-radius:16px;padding:18px;margin-bottom:13px}.hackathon-card h3,.research-card h3{color:var(--navy)}
@media(max-width:900px){.sidebar{width:72px;padding:18px 10px}.sidebar-brand{padding:6px 6px 22px}.sidebar-brand .brand-name,.nav-label,.profile-info{display:none}.content-area{width:calc(100% - 72px)}.nav-item{justify-content:center}.ai-grid{grid-template-columns:1fr}}@media(max-width:650px){.app-layout{display:block}.sidebar{width:100%;height:auto;min-height:0;position:static;flex-direction:row;align-items:center;padding:10px}.sidebar-brand{padding:0;margin-right:auto}.sidebar-nav{display:flex;gap:2px}.sidebar-profile{margin:0;padding:0;border:0;display:flex}.sidebar-profile .nav-item{display:none}.content-area{width:100%;padding:25px 16px}.search-card{grid-template-columns:1fr}.search-button{width:100%}.stats-grid{grid-template-columns:1fr}.auth-shell{grid-template-columns:1fr;padding:38px 20px}.auth-intro{display:none}.filter-bar{flex-wrap:wrap}.location-banner{align-items:flex-start;flex-direction:column}}