/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:       #0a66c2;
  --blue-dark:  #004182;
  --blue-light: #e8f0fe;
  --green:      #057642;
  --amber:      #b45309;
  --amber-light:#fef3c7;
  --purple:     #7c3aed;
  --purple-light:#ede9fe;
  --white:      #ffffff;
  --bg:         #f3f2ef;
  --card:       #ffffff;
  --border:     #e0e0e0;
  --text-primary:   #191919;
  --text-secondary: #666666;
  --text-muted:     #999999;
  --nav-height: 52px;
  --radius:     8px;
  --shadow:     0 0 0 1px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.06);
}

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text-primary); font-size: 14px; line-height: 1.5; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: 14px; }
::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* ===== UTILITY ===== */
.container { max-width: 1128px; margin: 0 auto; padding: 0 16px; }
.flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.text-sm { font-size: 12px; } .text-muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); }
.font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .w-full { width: 100%; } .hidden { display: none !important; }

/* ===== ROLE BADGES ===== */
.role-badge-inline {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 700;
}
.role-seeker    { background: var(--blue-light);   color: var(--blue);   }
.role-employer  { background: #e6f4ea;              color: var(--green);  }
.role-recruiter { background: var(--amber-light);   color: var(--amber);  }
.role-freelancer{ background: var(--purple-light);  color: var(--purple); }

/* ===== BUTTONS ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 16px; border-radius: 16px; font-size: 14px; font-weight: 600; border: none; transition: all .15s ease; white-space: nowrap; }
.btn-primary  { background: var(--blue);  color: #fff; }
.btn.is-pending { cursor: wait; opacity: .88; }
.btn.is-pending::after { content: ''; width: 12px; height: 12px; flex: 0 0 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: action-spin .7s linear infinite; }
.application-status-select.is-pending { cursor: wait; opacity: .72; }
@keyframes action-spin { to { transform: rotate(360deg); } }
.btn-primary:hover  { background: var(--blue-dark); color:#fff; text-decoration:none; }
.btn-outline  { background: transparent; border: 1.5px solid var(--blue); color: var(--blue); }
.btn-outline:hover  { background: var(--blue-light); text-decoration:none; }
.btn-ghost    { background: transparent; border: 1.5px solid var(--text-secondary); color: var(--text-secondary); }
.btn-ghost:hover    { background: rgba(0,0,0,.05); border-color: var(--text-primary); color: var(--text-primary); text-decoration:none; }
.btn-green    { background: var(--green); color: #fff; border: none; }
.btn-green:hover    { background: #045e34; color:#fff; text-decoration:none; }
.btn-amber    { background: var(--amber); color: #fff; border: none; }
.btn-amber:hover    { background: #92400e; color:#fff; text-decoration:none; }
.btn-purple   { background: var(--purple); color: #fff; border: none; }
.btn-purple:hover   { background: #5b21b6; color:#fff; text-decoration:none; }
.btn-lg   { padding: 14px 24px; border-radius: 24px; font-size: 16px; }
.btn-sm   { padding: 4px 12px;  font-size: 12px; }
.btn-block { width: 100%; }

/* ===== CARD ===== */
.card { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; }

/* ===== NAVBAR ===== */
.navbar { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--border); height: var(--nav-height); }
.navbar .inner { max-width: 1128px; margin: 0 auto; padding: 0 16px; height: 100%; display: flex; align-items: center; gap: 4px; }
.navbar .logo { display:flex;align-items:center;gap:8px;font-size:24px;font-weight:800;color:var(--blue);letter-spacing:-.5px;margin-right:8px;flex-shrink:0; }
.brand-mark { display:block;width:38px;height:38px;flex:0 0 38px;border-radius:6px;object-fit:cover; }
.brand-mark-link { display:flex;align-items:center;flex:0 0 auto;margin-right:4px; }
.navbar .logo span { color: var(--blue-dark); }
.search-bar { display: flex; align-items: center; background: #eef3f8; border-radius: 4px; padding: 0 8px; height: 34px; width: 240px; gap: 6px; flex-shrink: 0; }
.search-bar input { background: transparent; border: none; outline: none; width: 100%; font-size: 14px; }
.global-search { position: relative; display: flex; align-items: center; gap: 9px; width: clamp(240px, 30vw, 380px); height: 40px; padding: 0 11px; border: 1px solid #e2e8f0; border-radius: 11px; background: #f7f9fc; color: #667085; flex: 0 1 380px; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.global-search:focus-within { border-color: #9dbcf5; background: #fff; box-shadow: 0 0 0 3px rgba(21,94,239,.1), 0 2px 6px rgba(20,38,63,.06); }
.global-search-icon { flex: 0 0 auto; color: #667085; }
.global-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-size: 13px; }
.global-search input::placeholder { color: #78869a; }
.global-search input::-webkit-search-cancel-button { display: none; }
.global-search-shortcut { display: none; }
.global-search-clear { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #667085; font-family: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.global-search-clear[hidden], .global-search-results[hidden] { display: none; }
.global-search-clear:hover { background: #eef2f7; color: var(--text-primary); }
.global-search-results { position: absolute; top: calc(100% + 9px); left: 0; z-index: 300; width: min(440px, calc(100vw - 24px)); max-height: min(72vh, 560px); overflow: auto; overscroll-behavior: contain; border: 1px solid #dce5f0; border-radius: 14px; background: #fff; box-shadow: 0 18px 48px rgba(20,38,63,.2), 0 3px 8px rgba(20,38,63,.06); }
.global-search-group { padding: 7px; }
.global-search-group + .global-search-group { border-top: 1px solid #edf1f6; }
.global-search-group-label { padding: 5px 9px 6px; color: #78869a; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.global-search-result { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 7px 9px; border-radius: 9px; color: var(--text-primary); text-decoration: none; transition: background .12s ease; }
.global-search-result:hover, .global-search-result:focus-visible, .global-search-result[aria-selected="true"] { background: #f3f7fd; color: var(--text-primary); text-decoration: none; outline: 0; }
.global-search-result-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #edf4ff; color: var(--blue); font-size: 15px; font-weight: 700; flex: 0 0 34px; }
.global-search-result-icon.is-job { background: #eef8f3; color: #16835d; }
.global-search-result-avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; object-fit: cover; background: #edf1f7; }
.global-search-result-copy { min-width: 0; flex: 1; }
.global-search-result strong, .global-search-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result strong { font-size: 12px; font-weight: 650; }
.global-search-result small { margin-top: 3px; color: var(--text-muted); font-size: 11px; }
.global-search-result-enter { color: #8a97a8; font-size: 13px; opacity: 0; transition: opacity .12s ease; }
.global-search-result:hover .global-search-result-enter, .global-search-result:focus-visible .global-search-result-enter, .global-search-result[aria-selected="true"] .global-search-result-enter { opacity: 1; }
.global-search-status, .global-search-empty { display: flex; align-items: center; gap: 9px; padding: 12px 16px; color: var(--text-muted); font-size: 12px; }
.global-search-empty { justify-content: center; text-align: center; }
.global-search-spinner { width: 14px; height: 14px; border: 2px solid #dbe5f1; border-top-color: var(--blue); border-radius: 50%; animation: global-search-spin .7s linear infinite; }
@keyframes global-search-spin { to { transform: rotate(360deg); } }
.profile-activity-post { display: block; padding: 12px 10px; margin: 0 -10px; border-bottom: 1px solid var(--border); border-radius: 9px; color: inherit; text-decoration: none; transition: background .15s ease; }
.profile-activity-post:hover, .profile-activity-post:focus-visible { background: #f5f8fd; text-decoration: none; outline: 0; }
.profile-activity-post:focus-visible { box-shadow: 0 0 0 2px rgba(21,94,239,.28); }
.post-card-target { scroll-margin-top: calc(var(--nav-height) + 24px); border-color: #9dbcf5 !important; box-shadow: 0 0 0 4px rgba(21,94,239,.12), 0 12px 32px rgba(20,38,63,.12) !important; animation: target-post-arrive 1.8s ease-out; }
@keyframes target-post-arrive { 0%, 45% { background-color: #edf4ff; } 100% { background-color: var(--card); } }
.nav-spacer { flex: 1; }
.nav-links { display: flex; align-items: center; height: 100%; }
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 12px; height: 100%; color: var(--text-secondary); font-size: 11px; font-weight: 400; text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s; position: relative; min-width: 64px; }
.nav-item svg { margin-bottom: 2px; }
.nav-item:hover { color: var(--text-primary); text-decoration: none; border-bottom-color: var(--text-primary); }
.nav-item.active { color: var(--text-primary); border-bottom-color: var(--text-primary); font-weight: 600; }
.nav-divider { width: 1px; height: 32px; background: var(--border); margin: 0 8px; }
.notification-count { position:absolute;top:3px;right:8px;min-width:17px;height:17px;padding:0 4px;align-items:center;justify-content:center;border-radius:9px;background:#b42318;color:#fff;font-size:10px;font-weight:700; }
.notifications-page { max-width:820px;margin:24px auto;padding:0 16px; }
.notifications-header { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px; }
.notification-header-actions { display:flex;align-items:center;gap:8px; }
.notification-header-actions select { min-height:36px;padding:6px 10px;border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--text-primary); }
.notifications-header h1 { font-size:22px; }
.notification-list { border-top:1px solid var(--border); }
.notification-item { display:flex;align-items:flex-start;gap:16px;padding:16px 8px;border-bottom:1px solid var(--border);background:#fff; }
.notification-item.unread { background:#f0f6fc; }
.notification-content { flex:1;min-width:0; }
.notification-labels { display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:5px; }
.notification-category,.notification-type,.notification-read-state { display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:10px;padding:2px 7px;font-size:10px;font-weight:700;line-height:1.4;text-transform:capitalize; }
.notification-category { background:#f4f6f8;color:#344054; }
.notification-category.category-job { background:#e8f0fe;color:var(--blue);border-color:#b6cdf8; }
.notification-category.category-application { background:#e6f4ea;color:#176b42;border-color:#a8d5b5; }
.notification-category.category-interview { background:#fff4e5;color:#8a4b08;border-color:#f3d19c; }
.notification-category.category-communication { background:#eef4f8;color:#3d5668;border-color:#cfdae2; }
.notification-category.category-system { background:#f4f6f8;color:#475467; }
.notification-read-state { background:#fff;color:var(--text-muted); }
.notification-item.unread .notification-read-state { background:#fff7e6;color:#8a4b08;border-color:#f3d19c; }
.notification-title { color:var(--text-primary);font-weight:700; }
.notification-message { margin:4px 0;color:var(--text-secondary);overflow-wrap:anywhere; }
.notification-meta { color:var(--text-muted);font-size:12px; }
.notification-related { display:flex;gap:12px;flex-wrap:wrap;margin-top:5px;font-size:12px;color:var(--text-muted);overflow-wrap:anywhere; }
.notification-related a { color:var(--blue); }
.notification-actions { display:flex;align-items:center;gap:8px;flex-shrink:0; }
.notification-dismiss { border:0;background:transparent;color:var(--text-secondary);padding:6px 8px;font-size:18px; }
@media (max-width:700px) { .notification-actions { flex-direction:column;align-items:stretch; } .notifications-header { align-items:flex-start;flex-direction:column; } .notification-header-actions { width:100%;flex-wrap:wrap; } }

/* ===== LOGIN PAGE ===== */
.login-page-wrap { min-height: 100vh; background: var(--bg); }
.login-nav { background: #fff; border-bottom: 1px solid var(--border); padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; }
.login-nav .logo { font-size: 28px; font-weight: 800; color: var(--blue); letter-spacing: -.5px; }
.login-nav .nav-actions { display: flex; gap: 12px; align-items: center; }
.login-hero { display: flex; align-items: center; justify-content: center; padding: 40px 16px; gap: 48px; max-width: 1128px; margin: 0 auto; }
.login-hero-text { max-width: 480px; }
.login-hero-text h1 { font-size: 48px; font-weight: 300; color: #8b6914; line-height: 1.1; margin-bottom: 28px; }
.login-form-card { width: 100%; max-width: 400px; background: #fff; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.verification-badge { display:inline-flex;align-items:center;margin:4px 0 8px;padding:4px 10px;border:1px solid #b7dec5;border-radius:16px;background:#eef8f1;color:#126b3b;font-size:12px;font-weight:700; }
.login-form-card h2 { font-size: 24px; font-weight: 600; margin-bottom: 20px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; border: 1px solid #ccc; border-radius: 4px; padding: 10px 12px; font-size: 14px; outline: none; transition: border-color .15s; background: #fff; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.form-group textarea { resize: vertical; min-height: 80px; }
.form-divider { text-align: center; color: var(--text-secondary); font-size: 13px; margin: 16px 0; position: relative; }
.form-divider::before, .form-divider::after { content:''; position: absolute; top: 50%; width: 44%; height: 1px; background: var(--border); }
.form-divider::before { left: 0; } .form-divider::after { right: 0; }
.login-footer-text { text-align: center; font-size: 13px; color: var(--text-secondary); margin-top: 16px; }

/* Role badge strip on login */
.role-badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.role-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.role-badge.blue   { background: var(--blue-light);   color: var(--blue);   }
.role-badge.green  { background: #e6f4ea;              color: var(--green);  }
.role-badge.amber  { background: var(--amber-light);   color: var(--amber);  }
.role-badge.purple { background: var(--purple-light);  color: var(--purple); }

/* ===== MAIN LAYOUT ===== */
.main-layout { max-width: 1128px; margin: 24px auto; padding: 0 16px; display: grid; grid-template-columns: 225px 1fr 300px; gap: 24px; }
.main-layout.two-col  { grid-template-columns: 225px 1fr; }
.main-layout.full-col { grid-template-columns: 1fr; }

/* ===== LEFT SIDEBAR ===== */
.sidebar-left .profile-card { text-align: center; overflow: hidden; }
.profile-banner { height: 56px; background: linear-gradient(135deg, #0a66c2 0%, #004182 100%); }
.profile-card-body { padding: 0 16px 16px; }
.profile-avatar-wrap { margin-top: -24px; margin-bottom: 8px; display: flex; justify-content: center; }
.avatar { border-radius: 50%; object-fit: cover; background: #ccc; flex-shrink: 0; }
.avatar-placeholder { border-radius: 50%; background: linear-gradient(135deg, #0a66c2, #004182); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.sidebar-profile-name  { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.sidebar-profile-title { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
.sidebar-profile-details { display:grid;gap:6px;margin:8px 0 10px;text-align:left; }
.sidebar-profile-detail { display:flex;align-items:flex-start;gap:7px;min-width:0;color:var(--text-secondary);font-size:11px;line-height:1.4;overflow-wrap:anywhere; }
.sidebar-profile-detail svg { width:14px;height:14px;flex:0 0 14px;margin-top:1px;color:var(--blue); }
.sidebar-profile-detail span { min-width:0; }
.sidebar-profile-detail strong { color:var(--text-primary);font-weight:650; }
.sidebar-stats { border-top: 1px solid var(--border); padding-top: 12px; text-align: left; }
.sidebar-stat-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 12px; }
.sidebar-stat-row span:last-child { font-weight: 700; color: var(--blue); }
.sidebar-widget { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-top: 8px; }
.sidebar-widget h4 { font-size: 13px; font-weight: 700; margin-bottom: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; }
.profile-completion-widget h4 { color: var(--text); font-size: 15px; text-transform: none; letter-spacing: 0; margin-bottom: 10px; }
.profile-completion-track { height: 10px; overflow: hidden; border-radius: 99px; background: #e7edf5; margin-bottom: 12px; }
.profile-completion-track > div { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1672ca, #27a879); transition: width .35s ease; }
.profile-completion-widget p { margin: 0 0 9px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.profile-completion-widget small { display: block; margin-bottom: 12px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.profile-link-list { display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.company-website-link { display:inline-flex;align-items:center;gap:9px;max-width:100%;padding:10px 14px;border:1px solid #cfe2f5;border-radius:11px;background:linear-gradient(135deg,#f2f8ff,#fff);color:#205f9e;font-size:13px;font-weight:700;text-decoration:none;box-shadow:0 4px 12px #17365d0a;transition:background .18s,border-color .18s,transform .18s; }
.company-website-link:hover { transform:translateY(-1px);border-color:#9fc5e9;background:#eaf4ff;color:#174f86; }
.company-website-link svg { width:17px;height:17px;flex:none; }
.company-website-link .company-website-external { width:14px;height:14px;color:#7189a3; }
.work-experience-icon { color:#2569b5; background:#eaf3ff; }
.work-experience-icon svg { width:23px;height:23px; }
.work-experience-info { min-width:0;flex:1; }
.work-experience-info h4 { margin:0 0 7px;color:#1d3858;font-size:15px;font-weight:750; }
.work-experience-info .work-experience-detail { display:flex;align-items:center;gap:8px;margin:4px 0;color:#65778e;font-size:13px;line-height:1.5; }
.work-experience-detail svg { width:15px;height:15px;flex:none;color:#7c91aa; }
.profile-entry-card legend { display:flex;align-items:center;gap:8px;color:#234363; }
.profile-entry-card legend svg { width:19px;height:19px;color:#2873c8; }
.profile-entry-card select { width:100%;min-width:0;padding:9px 10px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text);font:inherit; }
.education-field-other[hidden] { display:none; }
.education-icon { color:#2873c8;background:#eaf3ff; }
.education-icon svg { width:23px;height:23px; }
.education-info { min-width:0;flex:1; }
.education-info h4 { margin:0 0 6px;color:#1d3858;font-size:15px;font-weight:750; }
.education-detail { display:flex;align-items:center;gap:8px;margin:4px 0;color:#65778e;font-size:13px;line-height:1.5; }
.education-detail svg { width:15px;height:15px;flex:none;color:#7c91aa; }
.employer-verified-badge { display: inline-flex; align-items: center; gap: 4px; width: fit-content; margin: 3px 4px 3px 0; padding: 4px 9px; border: 1px solid #b8d7f5; border-radius: 999px; background: #eaf3fc; color: #0a66c2; font-size: 11px; font-weight: 700; line-height: 1.25; cursor: help; }
.employer-verified-badge:focus-visible { outline: 3px solid rgba(10,102,194,.35); outline-offset: 2px; }
.draft-jobs-panel { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.draft-jobs-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.draft-jobs-heading h3 { margin:0; font-size:15px; }
.draft-jobs-heading span { color:var(--text-muted); font-size:12px; }
.draft-job-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--border); }
.draft-job-row > div:first-child { display:flex; flex-direction:column; gap:4px; min-width:0; }
.draft-job-row strong { overflow-wrap:anywhere; font-size:13px; }
.draft-job-row span,.draft-jobs-empty { color:var(--text-secondary); font-size:12px; }
.draft-job-actions { display:flex; gap:7px; flex-shrink:0; }
.publish-verification-note { display:flex; flex-direction:column; align-items:flex-start; gap:7px; margin-bottom:16px; padding:13px; border:1px solid #f0d38a; border-radius:10px; background:#fff8e6; color:#624b14; font-size:13px; line-height:1.45; }
.publish-verification-note .btn { margin-top:3px; }
.verification-required-copy { display:inline-block; margin:8px 10px 0 0; color:#fff; font-size:13px; font-weight:700; }
.verify-profile-cta { display:inline-flex; margin-top:8px; padding:8px 12px; border-radius:8px; background:#fff; color:#145f47; text-decoration:none; font-size:13px; font-weight:700; }
.draft-preview-notice { display:flex; flex-direction:column; gap:3px; margin-bottom:18px; padding:11px 13px; border:1px solid #f0d38a; border-radius:9px; background:#fff8e6; color:#624b14; font-size:13px; }
.draft-preview-notice span { font-size:12px; }

/* ===== FEED ===== */
.feed { display: flex; flex-direction: column; gap: 8px; }
.post-composer { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; }
.composer-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.composer-input { flex: 1; border: 1px solid #ccc; border-radius: 20px; padding: 8px 16px; font-size: 14px; outline: none; background: #f3f2ef; cursor: pointer; color: var(--text-secondary); }
.composer-input:focus { background: #fff; border-color: var(--blue); cursor: text; color: var(--text-primary); }
.composer-actions { display: flex; gap: 4px; border-top: 1px solid var(--border); padding-top: 8px; }
.composer-action-btn { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 4px; border: none; background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 600; transition: background .15s; }
.composer-action-btn:hover { background: var(--bg); }
.post-attachment-picker { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px; }
.post-attachment-picker [hidden] { display:none; }
.post-attachment-picker small { color:var(--text-muted);font-size:11px; }
.post-attachment-selection { min-width:0;flex:1;color:var(--text-secondary);font-size:12px;overflow-wrap:anywhere; }
.post-attachments { display:grid;gap:7px;margin:0 16px 12px; }
.post-attachment-preview { min-width:0;max-width:100%;overflow:hidden;border:1px solid var(--border);border-radius:10px;background:var(--bg); }
.post-attachment-preview-loading { display:block;padding:12px;color:var(--text-muted);font-size:12px; }
.post-attachment-image { display:block;max-width:100%;max-height:520px;object-fit:contain;margin:0 auto; }
.post-attachment-pdf { display:block;width:100%;height:420px;border:0;background:#fff; }
.post-attachment-text { max-height:280px;overflow:auto;margin:0;padding:12px;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.5 ui-monospace,monospace;color:var(--text-primary); }
.post-attachment-media { display:block;width:100%;max-height:420px;background:#111; }
.post-attachment-file-tile { display:flex;align-items:center;gap:10px;padding:12px; }
.post-attachment-file-icon { display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:9px;background:var(--blue-light);color:var(--blue);font-size:10px;font-weight:800; }
.post-attachment-file-name { min-width:0;overflow-wrap:anywhere;color:var(--text-primary);font-size:13px;font-weight:650; }
.post-attachment-file-meta { margin-left:auto;color:var(--text-muted);font-size:11px;overflow-wrap:anywhere; }

/* ===== POST CARD ===== */
.post-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.post-pending-card { border-style: dashed; opacity: .86; }
.post-pending-content { margin: 16px 16px 8px; color: var(--text-primary); white-space: pre-line; overflow-wrap: anywhere; }
.post-pending-status { display: block; margin: 0 16px 14px; color: var(--text-muted); font-size: 12px; }
.post-header { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px 8px; }
.post-author-info { flex: 1; }
.post-author-name { font-size: 14px; font-weight: 600; line-height: 1.2; }
.post-author-meta { font-size: 12px; color: var(--text-secondary); }
.post-time { font-size: 12px; color: var(--text-muted); }
.post-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.post-owner-actions { display: flex; gap: 4px; }
.post-owner-actions button { padding: 2px 5px; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 11px; cursor: pointer; }
.post-owner-actions button:hover { color: var(--blue); text-decoration: underline; }
.post-owner-actions button:last-child:hover { color: #b42318; }
.post-body { padding: 0 16px 12px; font-size: 14px; line-height: 1.6; }
.job-description-toolbar { display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 8px; }
.job-description-toolbar button { min-height:31px;padding:5px 10px;border:1px solid #d7e1ed;border-radius:7px;background:#fff;color:#344b68;font:inherit;font-size:12px;font-weight:650;cursor:pointer; }
.job-description-toolbar button:hover { border-color:#9dbce0;background:#f2f7fd;color:#155eef; }
.job-description-editor { min-height:110px;max-height:420px;overflow:auto;padding:12px 14px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--text-primary);font:inherit;font-size:14px;line-height:1.65;outline:none; }
.job-description-editor:focus { border-color:#8fb2ef;box-shadow:0 0 0 3px rgba(21,94,239,.09); }
.job-description-editor:empty::before { color:#9aa7b7;content:attr(data-placeholder);pointer-events:none; }
.job-description-editor p { margin:0 0 9px; }
.job-description-editor h4,.post-formatted-content h4 { margin:12px 0 6px;color:#1a3555;font-size:14px; }
.job-description-editor ul,.job-description-editor ol,.post-formatted-content ul,.post-formatted-content ol { margin:4px 0 10px;padding-left:24px; }
.post-formatted-content p { margin:0 0 9px;overflow-wrap:anywhere; }
.post-tag { display: inline-block; background: var(--blue-light); color: var(--blue); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.post-stats { padding: 6px 16px; display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); border-top: 1px solid var(--border); }
.post-repost-attribution { padding: 10px 16px 0; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.post-comment-list { padding: 0 16px 10px; }
.post-comment { margin-top: 8px; padding: 9px 11px; border-radius: 8px; background: var(--bg); font-size: 12px; }
.post-comment strong { color: var(--text-primary); }
.post-comment-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.post-comment-delete { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: 11px; padding: 2px 0; }
.post-comment-delete:hover { color: #b42318; text-decoration: underline; }
.post-comment p { margin: 3px 0 0; color: var(--text-secondary); white-space: pre-line; overflow-wrap: anywhere; }
.post-comments-more { color: var(--text-muted); }
.post-actions { display: flex; border-top: 1px solid var(--border); }
.post-action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border: none; background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 600; border-radius: 4px; transition: background .15s; }
.post-action-btn:hover { background: var(--bg); color: var(--text-primary); }
.post-action-btn.liked { color: #378fe9; }
.post-action-btn:disabled { opacity: .85; cursor: wait; }

/* ===== RIGHT SIDEBAR ===== */
.sidebar-right .news-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.news-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.news-card-updated { margin: -6px 0 6px; color: var(--text-muted); font-size: 11px; }
.news-item { padding: 8px 0; border-bottom: 1px solid var(--border); }
.news-item:last-child { border-bottom: none; }
.news-item-title { display: block; color: var(--text-primary); text-decoration: none; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.news-item-title:hover { color: var(--blue); text-decoration: underline; }
.news-item-summary { color: var(--text-secondary); font-size: 12px; line-height: 1.45; margin-bottom: 4px; }
.news-item-meta  { font-size: 11px; color: var(--text-muted); }

/* ===== PROFILE PAGE ===== */
.profile-hero-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 8px; }
.profile-hero-banner { height: 200px; background: linear-gradient(135deg, #0a66c2 0%, #004182 100%); position: relative; }
.profile-banner-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-image-input { display: none; }
.profile-banner-edit { position: absolute; top: 12px; right: 12px; padding: 8px 12px; border: 0; border-radius: 6px; background: rgba(255,255,255,.94); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow); }
.profile-banner-edit:hover, .profile-photo-edit:hover { background: #fff; }
.profile-hero-body { padding: 0 24px 24px; position: relative; }
.profile-avatar-box { width: 128px; height: 128px; border-radius: 50%; border: 4px solid #fff; overflow: hidden; margin-top: -52px; margin-bottom: 12px; background: #ccc; display: flex; align-items: center; justify-content: center; position: relative; }
.profile-photo-edit { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; padding: 5px 2px; border: 0; background: rgba(255,255,255,.94); color: var(--text); font-size: 11px; font-weight: 700; cursor: pointer; }
.profile-hero-name     { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.profile-verified-icon { width: 24px; height: 24px; flex: 0 0 24px; filter: drop-shadow(0 2px 3px rgba(10,102,194,.22)); }
.profile-hero-headline { font-size: 16px; color: var(--text-secondary); margin-bottom: 4px; }
.profile-hero-meta     { font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; }
.profile-hero-meta span { margin-right: 12px; }
.profile-relationship-link { border: 0; padding: 0; background: transparent; color: var(--blue); font: inherit; cursor: pointer; }
.profile-relationship-link:hover { text-decoration: underline; }
.profile-relationship-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.profile-relationship-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.profile-relationship-person { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; padding: 2px 0; border-radius: 8px; color: var(--text-primary); text-decoration: none; }
.profile-relationship-person:hover { color: var(--text-primary); text-decoration: none; }
.profile-relationship-person > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-relationship-person:focus-visible { outline: 2px solid rgba(21,94,239,.5); outline-offset: 3px; }
.profile-relationship-connect { flex: 0 0 auto; min-width: 92px; }
.connect-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.profile-section { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 8px; }
.profile-section h3 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.profile-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-section-heading h3 { margin-bottom: 16px; }
.section-edit-btn { flex: 0 0 32px; width: 32px; height: 32px; margin-top: -8px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.section-edit-btn:hover, .section-edit-btn:focus-visible { background: var(--bg); }
.profile-empty-copy { margin: 0; color: var(--text-muted); font-size: 13px; }
.profile-languages-list { display: grid; gap: 10px; margin: 0; padding-left: 20px; color: var(--text-secondary); font-size: 14px; }
.profile-languages-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; line-height: 1.5; }
.profile-language-name { min-width: 0; overflow-wrap: anywhere; }
.profile-languages-list .skill-tag { display: inline-block; flex: 0 1 auto; padding: 4px 10px; line-height: 1.4; }
.profile-entry-card { position: relative; display: grid; gap: 12px; margin: 0 0 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.profile-entry-card legend { padding: 0 6px; font-weight: 700; }
.profile-entry-card legend svg { width: 18px; height: 18px; margin-right: 6px; color: var(--blue); vertical-align: -4px; }
.profile-entry-card label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; }
.profile-entry-card input, .profile-entry-card textarea { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 4px; font: inherit; }
.profile-entry-card textarea { resize: vertical; }
.education-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.education-remove-btn { position: absolute; top: 6px; right: 8px; }
.public-slug-input { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.public-slug-input span { padding: 9px 10px; background: var(--bg); color: var(--text-secondary); font-size: 13px; }
.public-slug-input input { flex: 1; min-width: 0; border: 0; border-radius: 0; }
@media (max-width: 540px) { .education-editor-grid { grid-template-columns: 1fr; } }
.experience-item, .education-item { display: flex; gap: 14px; margin-bottom: 16px; }
.exp-icon { width: 48px; height: 48px; border-radius: 4px; background: var(--blue-light); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.exp-info h4 { font-size: 15px; font-weight: 600; } .exp-info p { font-size: 13px; color: var(--text-secondary); }
.skills-list { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-tag { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 6px 14px; font-size: 13px; font-weight: 500; }
.edit-btn { position: absolute; top: 16px; right: 16px; background: #fff; border: 1px solid var(--border); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow); }
.edit-btn:hover { background: var(--bg); }
.profile-2col { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
@media(max-width:768px){ .profile-2col { grid-template-columns: 1fr; } }

/* ===== JOBS PAGE ===== */
.jobs-layout { max-width: 1128px; margin: 24px auto; padding: 0 16px; display: grid; grid-template-columns: 360px 1fr; gap: 8px; }
.jobs-list { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; max-height: calc(100vh - var(--nav-height) - 100px); overflow-y: auto; }
.jobs-list-header { padding: 16px; border-bottom: 1px solid var(--border); font-size: 16px; font-weight: 700; position: sticky; top: 0; background: #fff; z-index: 2; }
.job-item { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s; }
.job-item:hover, .job-item.active { background: var(--blue-light); }
.job-item:last-child { border-bottom: none; }
.job-logo { width: 48px; height: 48px; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex-shrink: 0; color: var(--blue); }
.job-item-info h4 { font-size: 14px; font-weight: 600; margin-bottom: 2px; color: var(--blue); }
.job-item-info p  { font-size: 13px; color: var(--text-secondary); margin-bottom: 2px; }
.job-item-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.job-tag { font-size: 11px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 2px 8px; color: var(--text-secondary); }
.job-tag.ft   { background: #e8f0fe; border-color: #93c5fd; color: var(--blue); }
.job-tag.pt   { background: #fef3c7; border-color: #fcd34d; color: var(--amber); }
.job-tag.ct   { background: #e6f4ea; border-color: #86efac; color: var(--green); }
.job-tag.fl   { background: var(--purple-light); border-color: #c4b5fd; color: var(--purple); }
.job-tag.applied { background: #e6f4ea; border-color: #a8d5b5; color: var(--green); font-weight: 700; }
.job-vacancy-tag,.job-vacancy-badge { display:inline-flex;align-items:center;gap:5px;border:1px solid #a7dfc2;border-radius:999px;background:#e9f8ef;color:#176b42;font-size:11px;font-weight:700;line-height:1.35;white-space:nowrap; }
.job-vacancy-tag { padding:3px 8px; }
.job-vacancy-badge { padding:6px 10px;font-size:12px; }
.job-vacancy-tag svg,.job-vacancy-badge svg { width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none; }
.job-reference { display:inline-flex;align-items:center;max-width:100%;padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text-secondary);font:600 10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.025em;overflow-wrap:anywhere; }
.job-detail { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; position: sticky; top: calc(var(--nav-height) + 16px); height: fit-content; max-height: calc(100vh - var(--nav-height) - 32px); overflow-y: auto; }
.job-detail-header h2 { font-size: 22px; font-weight: 700; color: var(--blue); margin-bottom: 4px; }
.job-detail-header h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.job-detail-meta { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.job-detail-meta span { display: inline-flex; align-items: center; gap: 4px; }
.job-detail-actions { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.job-detail-section h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; margin-top: 20px; }
.job-detail-section ul { padding-left: 20px; }
.job-detail-section li { margin-bottom: 6px; font-size: 14px; color: var(--text-secondary); }

/* Employment type pill on job detail */
.emp-type-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 700; }
.emp-type-pill.Full-Time  { background: var(--blue-light);   color: var(--blue);   }
.emp-type-pill.Part-Time  { background: var(--amber-light);   color: var(--amber);  }
.emp-type-pill.Contract   { background: #e6f4ea;              color: var(--green);  }
.emp-type-pill.Freelance  { background: var(--purple-light);  color: var(--purple); }

/* ===== NETWORK PAGE ===== */
.network-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.person-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-align: center; }
.person-card-banner { height: 48px; background: linear-gradient(135deg, #0a66c2 0%, #004182 100%); }
.person-card-body { padding: 0 16px 16px; }
.person-card-avatar { margin-top: -24px; margin-bottom: 8px; display: flex; justify-content: center; }
.person-card-name  { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.person-card-profile-details { display: grid; gap: 6px; margin: 8px auto 12px; max-width: 100%; text-align: left; }
.person-card-detail { display: flex; align-items: flex-start; justify-content: center; gap: 7px; min-width: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.person-card-detail svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 1px; color: var(--blue); }
.person-card-detail span { min-width: 0; }
.person-card-location { color: #536b86; font-weight: 600; }
.suggested-person-row { display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border); }
.suggested-person-info { flex:1;min-width:0; }
.suggested-person-name { display:block;overflow:hidden;color:var(--text-primary);font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap; }
.suggested-person-details { display:grid;gap:3px;margin-top:3px; }
.suggested-person-detail { display:flex;align-items:flex-start;gap:5px;min-width:0;color:var(--text-secondary);font-size:10px;line-height:1.35; }
.suggested-person-detail svg { width:12px;height:12px;flex:0 0 12px;margin-top:1px;color:var(--blue); }
.suggested-person-detail span { min-width:0;overflow-wrap:anywhere; }
.suggested-person-location { color:#536b86;font-weight:600; }

/* ===== MESSAGES PAGE ===== */
.messages-layout { max-width: 960px; margin: 24px auto; padding: 0 16px; display: grid; grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; height: calc(100vh - var(--nav-height) - 48px); min-height: 0; }
.msg-sidebar { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.msg-sidebar-header { padding: 16px; border-bottom: 1px solid var(--border); font-size: 18px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.msg-search { padding: 8px 16px; border-bottom: 1px solid var(--border); }
.msg-search input { width: 100%; background: var(--bg); border: none; border-radius: 20px; padding: 8px 14px; font-size: 13px; outline: none; }
.msg-list { overflow-y: auto; flex: 1; }
.msg-item { display: flex; gap: 10px; padding: 12px 16px; cursor: pointer; transition: background .15s; border-bottom: 1px solid var(--border); }
.msg-item:hover, .msg-item.active { background: var(--blue-light); }
.msg-item-info { flex: 1; overflow: hidden; }
.msg-item-header { display: flex; justify-content: space-between; margin-bottom: 2px; }
.msg-item-name { font-size: 14px; font-weight: 600; } .msg-item-time { font-size: 11px; color: var(--text-muted); }
.msg-item-preview { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-unread { font-weight: 700; color: var(--text-primary); }
.msg-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.msg-main-header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.msg-main-header .person-info h4 { font-size: 15px; font-weight: 700; }
.msg-main-header .person-info p  { font-size: 12px; color: var(--text-secondary); }
.msg-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.msg-bubble-wrap { display: flex; gap: 8px; max-width: 70%; }
.msg-bubble-wrap.sent { align-self: flex-end; flex-direction: row-reverse; }
.msg-bubble { background: var(--bg); border-radius: 12px; padding: 10px 14px; font-size: 14px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.msg-bubble-wrap.sent .msg-bubble { background: var(--blue); color: #fff; }
.msg-bubble-time { display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:11px;color:var(--text-muted);margin-top:2px;text-align:right; }
.msg-bubble-wrap.sent .msg-bubble-time { color: rgba(255,255,255,.7); }
.msg-read-state { font-weight:700; }
.msg-bubble-wrap:not(.sent) .msg-bubble-time { justify-content:flex-start; }
.shared-post-note { margin-bottom: 9px; white-space: pre-line; overflow-wrap: anywhere; }
.shared-post-card { min-width: 260px; max-width: 390px; overflow: hidden; border: 1px solid rgba(120,145,180,.28); border-radius: 12px; background: #fff; color: var(--text-primary); text-align: left; }
.shared-post-card-header { display: flex; align-items: center; gap: 8px; padding: 11px 12px 9px; border-bottom: 1px solid #edf1f6; }
.shared-post-card-author { display: grid; min-width: 0; flex: 1; gap: 2px; }
.shared-post-card-author strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.shared-post-card-author span { overflow: hidden; color: var(--text-secondary); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.shared-post-card-tag { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; background: var(--blue-light); color: var(--blue); font-size: 10px; font-weight: 700; }
.shared-post-card-content { padding: 12px; font-size: 12px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.shared-post-card-footer { padding: 8px 12px; border-top: 1px solid #edf1f6; color: var(--text-muted); font-size: 10px; font-weight: 650; }
.msg-bubble-wrap.sent .shared-post-note { color: rgba(255,255,255,.92); }
.msg-bubble-wrap.sent .shared-post-card { color: var(--text-primary); }
.msg-attachment-link { display:flex;align-items:center;gap:8px;max-width:100%;margin-top:8px;padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--blue);font-size:12px;text-decoration:none; }
.msg-attachment-link span:nth-child(2) { overflow-wrap:anywhere; }
.msg-attachment-size { margin-left:auto;color:var(--text-muted);white-space:nowrap;font-size:11px; }
.msg-attachment-image-wrap { display:flex;flex-direction:column;gap:5px;max-width:min(360px,100%);margin-top:8px;overflow:hidden; }
.msg-attachment-image { display:block;max-width:100%;max-height:360px;object-fit:contain;border-radius:8px;background:rgba(0,0,0,.06); }
.msg-attachment-image-name { color:var(--text-muted);font-size:11px;overflow-wrap:anywhere; }
.msg-input-area { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; align-items: flex-end; gap: 8px; }
.msg-composer { flex:1;min-width:0;display:flex;flex-direction:column;gap:5px; }
.msg-attachment-input { display:none; }
.msg-selected-attachments { color:var(--text-secondary);font-size:11px;overflow-wrap:anywhere; }
.msg-attach-btn { width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;background:#fff;color:var(--text-secondary);cursor:pointer; }
.msg-attach-btn:hover { color:var(--blue);border-color:var(--blue); }
.msg-input { flex: 1; border: 1px solid var(--border); border-radius: 20px; padding: 10px 16px; font-size: 14px; outline: none; resize: none; max-height: 180px; overflow-y: auto; background: var(--bg); }
.msg-input:focus { border-color: var(--blue); background: #fff; }
.msg-send-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--blue); border: none; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; }
.msg-send-btn:hover { background: var(--blue-dark); }
.msg-send-btn[aria-busy="true"] { cursor: wait; opacity: .8; }
.msg-bubble-wrap.message-pending { opacity: .7; }
.msg-actions { display:flex;justify-content:flex-end;gap:8px;margin-top:4px; }
.msg-action-btn { border:0;background:transparent;padding:2px 4px;color:var(--text-muted);font:inherit;font-size:11px;cursor:pointer; }
.msg-action-btn:hover { color:var(--blue);text-decoration:underline; }
.msg-delete-action:hover { color:#b42318; }
.msg-edit-input { display:block;width:min(360px,65vw);min-height:76px;resize:vertical;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font:inherit;font-size:14px;line-height:1.5; }
.msg-edit-input:focus { outline:2px solid color-mix(in srgb, var(--blue) 28%, transparent);border-color:var(--blue); }
.message-confirm-dialog { max-width: 430px; overflow: hidden; }
.message-confirm-dialog .modal-header { align-items: flex-start; padding: 20px 22px 16px; }
.message-confirm-dialog .modal-footer { background: #fbfcfe; }
.btn-danger { border: 1px solid #e6b8b4; background: #b42318; color: #fff; }
.btn-danger:hover { background: #8f1d14; }
.professional-confirm-dialog { max-width: 440px; overflow: hidden; }
.professional-confirm-dialog .modal-header { align-items: flex-start; padding: 20px 22px 16px; }
.professional-confirm-dialog .modal-footer { background: #fbfcfe; }

/* ===== SIGNUP PAGE ===== */
.signup-page { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
.signup-container { max-width: 540px; width: 100%; margin: 40px auto; padding: 0 16px; }
.signup-card { background: #fff; border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.signup-card h2 { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.signup-card .subtitle { font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; }
.role-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.role-option { border: 2px solid var(--border); border-radius: var(--radius); padding: 14px; text-align: center; cursor: pointer; transition: all .15s; }
.role-option:hover { border-color: var(--blue); }
.role-option.selected-seeker    { border-color: var(--blue);   background: var(--blue-light);   }
.role-option.selected-employer  { border-color: var(--green);  background: #e6f4ea; }
.role-option.selected-recruiter { border-color: var(--amber);  background: var(--amber-light);  }
.role-option.selected-freelancer{ border-color: var(--purple); background: var(--purple-light); }
.role-option .role-icon { font-size: 26px; margin-bottom: 6px; }
.role-option .role-name { font-size: 13px; font-weight: 700; }
.role-option .role-desc { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.role-option input[type="radio"] { display: none; }

/* ===== HERO BANNER ===== */
.hero-banner {
  border-radius: var(--radius); padding: 24px; margin-bottom: 8px; color: #fff;
  background: linear-gradient(135deg, #0a66c2 0%, #004182 100%);
}
.hero-banner.employer  { background: linear-gradient(135deg, #057642 0%, #034d2a 100%); }
.hero-banner.recruiter { background: linear-gradient(135deg, #b45309 0%, #78350f 100%); }
.hero-banner.freelancer{ background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%); }
.hero-banner h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.hero-banner p  { font-size: 14px; opacity: .85; margin-bottom: 14px; }

/* ===== TABS / FILTERS ===== */
.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tab { padding: 12px 20px; font-size: 14px; font-weight: 600; color: var(--text-secondary); border-bottom: 2px solid transparent; cursor: pointer; transition: all .15s; background: none; border-top: none; border-left: none; border-right: none; }
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--text-primary); border-bottom-color: var(--text-primary); }
.filter-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-chip { padding: 6px 14px; border-radius: 16px; font-size: 13px; font-weight: 500; border: 1px solid var(--border); background: var(--card); color: var(--text-secondary); cursor: pointer; transition: all .15s; }
.filter-chip:hover, .filter-chip.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.filter-chip.active-amber   { background: var(--amber);  color: #fff; border-color: var(--amber);  }
.filter-chip.active-green   { background: var(--green);  color: #fff; border-color: var(--green);  }
.filter-chip.active-purple  { background: var(--purple); color: #fff; border-color: var(--purple); }

/* ===== MODAL ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: #fff; border-radius: var(--radius); width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.2); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-header h3 { font-size: 18px; font-weight: 700; }
.modal-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--bg); font-size: 18px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.modal-close:hover { background: var(--border); }
.modal-body   { padding: 20px; }
.modal-footer { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
.modal-footer[hidden] { display: none; }
.comment-dialog { max-width: 520px; overflow: hidden; }
.comment-dialog .modal-header { align-items: flex-start; padding: 20px 22px 16px; }
.comment-dialog-subtitle { margin-top: 4px; color: var(--text-secondary); font-size: 13px; }
.comment-dialog-label { display: block; margin-bottom: 8px; color: var(--text-primary); font-size: 13px; font-weight: 650; }
.comment-dialog-input { display: block; width: 100%; min-height: 128px; resize: vertical; padding: 12px 13px; border: 1px solid #d6e0ec; border-radius: 10px; color: var(--text-primary); line-height: 1.5; outline: none; }
.comment-dialog-input:focus { border-color: #8fb2ef; box-shadow: 0 0 0 3px rgba(21,94,239,.1); }
.comment-dialog-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--text-muted); font-size: 11px; }
.comment-dialog-meta b { color: var(--text-secondary); font-weight: 700; }
.share-post-dialog { max-width: 560px; overflow: hidden; }
.share-post-dialog .modal-header { align-items: flex-start; padding: 20px 22px 16px; }
.share-post-dialog .modal-body { max-height: 70vh; overflow-y: auto; }
.share-recipient-search { width: 100%; padding: 11px 13px; border: 1px solid #d6e0ec; border-radius: 10px; background: #fff; }
.share-recipient-results { display: grid; gap: 6px; max-height: 210px; margin-top: 8px; overflow-y: auto; }
.share-recipient-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; background: #fff; color: var(--text-primary); text-align: left; cursor: pointer; }
.share-recipient-option:hover, .share-recipient-option:focus-visible { border-color: #b9cef7; background: #f5f8ff; }
.share-recipient-option > span { display: grid; gap: 2px; min-width: 0; }
.share-recipient-option strong { font-size: 13px; }
.share-recipient-option small { overflow: hidden; color: var(--text-secondary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.share-recipient-status { padding: 16px 8px; color: var(--text-muted); font-size: 12px; text-align: center; }
.share-recipient-selected { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1px solid #cfe0f7; border-radius: 10px; background: #f5f8ff; }
.share-recipient-selected-label { color: var(--text-muted); font-size: 11px; }
.share-recipient-selected > span:not(.share-recipient-selected-label) { overflow: hidden; color: var(--text-secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.share-recipient-change { margin-left: auto; border: 0; background: transparent; color: var(--blue); font-size: 12px; font-weight: 650; cursor: pointer; }
.share-message-label { margin-top: 18px; }
.share-message-label span { color: var(--text-muted); font-size: 11px; font-weight: 400; }

/* ===== EMPTY STATE ===== */
.empty-state { text-align: center; padding: 48px 24px; color: var(--text-secondary); }
.empty-state-icon { font-size: 48px; margin-bottom: 16px; }
.empty-state h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }
.empty-state p  { font-size: 14px; margin-bottom: 20px; }

/* ===== TOAST ===== */
.toast-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: #333; color: #fff; padding: 12px 20px; border-radius: 20px; font-size: 14px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,.2); animation: fadeInUp .3s ease; }
.toast.success { background: var(--green); } .toast.error { background: #cc1016; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* ===== ALERT BOX ===== */
.alert-box { border-radius: 6px; padding: 12px 16px; font-size: 13px; margin-bottom: 16px; }
.alert-warn  { background: #fff3cd; border-left: 4px solid #f59e0b; color: #92400e; }
.alert-error { background: #fee2e2; border-left: 4px solid #dc2626; color: #7f1d1d; }

/* ===== FEATURES STRIP ===== */
.features-strip { background: #fff; padding: 48px 16px; border-top: 1px solid var(--border); }
.features-grid { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; text-align: center; }
.feature-item .icon { font-size: 36px; margin-bottom: 12px; }
.feature-item h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.feature-item p  { font-size: 13px; color: var(--text-secondary); }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .main-layout { grid-template-columns: 1fr; }
  .main-layout .sidebar-left, .main-layout .sidebar-right { display: none; }
  .jobs-layout { grid-template-columns: 1fr; }
  .jobs-layout .job-detail { display: none; }
  .login-hero { flex-direction: column; gap: 24px; }
  .login-hero-text h1 { font-size: 36px; }
  .messages-layout { grid-template-columns: 1fr; }
  .messages-layout .msg-sidebar { display: none; }
  .role-selector { grid-template-columns: 1fr 1fr; }
}

/* ===== PAGE TRANSITION ===== */
.page { animation: pageFade .2s ease; }
@keyframes pageFade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

.hero-banner.hiring { background: linear-gradient(135deg, #057642 0%, #034d2a 100%); }
.hero-banner.Fresher { background: linear-gradient(135deg, #0a66c2 0%, #004182 100%); }

/* ===== Chatbot Widget ===== */
.chatbot-fab {
  position: fixed; bottom: 22px; right: 22px; z-index: 999;
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--blue), #004182);
  color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(10,102,194,.4); transition: transform .15s;
}
.chatbot-fab:hover { transform: scale(1.06); }
.chatbot-fab .fab-badge {
  position: absolute; top: -2px; right: -2px; background: #e34141; color: #fff;
  font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.chatbot-panel {
  position: fixed; bottom: 90px; right: 22px; z-index: 999;
  width: 390px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 120px);
  background: #fff; border-radius: 16px; box-shadow: 0 12px 36px rgba(0,0,0,.22);
  display: none; flex-direction: column; overflow: hidden; border: 1px solid var(--border);
}
.chatbot-panel.open { display: flex; }
.chatbot-header {
  background: linear-gradient(135deg, var(--blue), #004182); color: #fff;
  padding: 16px 18px; display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.chatbot-header .bot-avatar { font-size: 22px; }
.chatbot-header .bot-title { font-size: 16px; font-weight: 700; }
.chatbot-header .bot-subtitle { font-size: 12px; opacity: .9; margin-top: 2px; }
.chatbot-header .chatbot-close { margin-left: auto; background: none; border: none; color: #fff; font-size: 19px; cursor: pointer; opacity: .9; width: 34px; height: 34px; border-radius: 50%; }
.chatbot-header .chatbot-close:hover { opacity: 1; }
.chatbot-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; background: #f5f7fb; scroll-behavior: smooth; }
.chat-bubble { max-width: 94%; padding: 11px 14px; border-radius: 15px; font-size: 14px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.chat-bubble.bot { align-self: flex-start; background: #fff; color: #202a38; border: 1px solid #e1e6ef; border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(20,35,60,.04); }
.chat-bubble.user { align-self: flex-end; background: #145fba; color: #fff; border-bottom-right-radius: 5px; }
.chatbot-suggestions { display: flex; flex-wrap: wrap; gap: 8px; max-height: 104px; overflow-y: auto; padding: 10px 14px 12px; background: #f5f7fb; border-top: 1px solid #e5e9f0; flex-shrink: 0; }
.chat-suggestion-chip {
  font-size: 12px; line-height: 1.35; font-weight: 600; padding: 7px 11px; border-radius: 14px;
  border: 1px solid #b9cee8; color: #174f91; background: #fff; cursor: pointer; transition: all .15s;
}
.chat-suggestion-chip:hover { background: #eaf2fc; border-color: #7ea9dc; }
.chatbot-input-row { display: flex; gap: 10px; padding: 12px; border-top: 1px solid #e1e6ef; background: #fff; flex-shrink: 0; }
.chatbot-input-row input {
  flex: 1; min-width: 0; border: 1px solid #cbd3df; border-radius: 22px; padding: 11px 15px; font-size: 14px; color: #202a38; outline: none;
}
.chatbot-input-row input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10,102,194,.14); }
.chatbot-input-row button {
  width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--blue); color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chatbot-input-row button:hover { background: #004182; }
.chatbot-panel button:focus-visible, .chatbot-panel a:focus-visible { outline: 3px solid #f4c542; outline-offset: 2px; }
@media (max-width: 600px) {
  .draft-job-row { align-items:flex-start; flex-direction:column; }
  .publish-verification-note { font-size:12px; }
}
@media (max-width: 480px) {
  .chatbot-panel { right: 12px; left: 12px; width: auto; bottom: 82px; height: min(620px, calc(100dvh - 112px)); max-height: calc(100dvh - 112px); }
  .chatbot-fab { right: 16px; bottom: 16px; }
  .chat-bubble { max-width: 97%; }
}

/* ===== SHARED VISUAL POLISH ===== */
:root {
  --blue: #155eef;
  --blue-dark: #1248b3;
  --blue-light: #edf4ff;
  --green: #16805d;
  --bg: #f4f7fb;
  --card: #ffffff;
  --border: #e3e9f2;
  --text-primary: #172b45;
  --text-secondary: #52647b;
  --text-muted: #8290a3;
  --nav-height: 64px;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(20, 38, 63, .04), 0 8px 24px rgba(20, 38, 63, .06);
  --shadow-sm: 0 1px 2px rgba(20, 38, 63, .04), 0 4px 12px rgba(20, 38, 63, .06);
}

body { color: var(--text-primary); background: var(--bg); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
::selection { color: #123b5d; background: #dceaff; }
a { transition: color .16s ease; }
a:hover { color: var(--blue-dark); }
:focus-visible { outline: 3px solid rgba(21, 94, 239, .28); outline-offset: 2px; }

.navbar { height: var(--nav-height); background: rgba(255,255,255,.96); border-bottom-color: #e5eaf1; box-shadow: 0 3px 16px rgba(21, 40, 67, .045); backdrop-filter: blur(14px); }
.navbar .inner { gap: 8px; }
.navbar .logo { font-size: 21px; letter-spacing: -.7px; }
.brand-mark { border-radius: 10px; box-shadow: 0 2px 8px rgba(20, 38, 63, .12); }
.brand-mark-link { margin-right: 2px; }
.search-bar { width: clamp(190px, 22vw, 280px); height: 38px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px; background: #f1f4f8; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.search-bar:focus-within { border-color: #b7cdf7; background: #fff; box-shadow: 0 0 0 3px rgba(21,94,239,.08); }
.nav-item { min-width: 68px; padding-inline: 10px; font-size: 11px; font-weight: 550; }
.nav-item.active { color: var(--blue); border-bottom-color: var(--blue); }
.nav-item:hover { color: var(--blue); border-bottom-color: #b9cef7; }
.nav-divider { background: #e6ebf2; }

.btn { min-height: 38px; padding: 8px 16px; border-radius: 9px; font-weight: 650; transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, #1a6cf0, #1554c0); box-shadow: 0 3px 8px rgba(21,94,239,.16); }
.btn-primary:hover { background: linear-gradient(135deg, #155bd2, #10469f); box-shadow: 0 5px 12px rgba(21,94,239,.2); }
.btn-outline { border-width: 1px; border-color: #b8c9e0; background: #fff; }
.btn-outline:hover { border-color: #8eafe7; background: #f5f8ff; }
.btn-ghost { border-width: 1px; border-color: #d8e0eb; }
.btn-lg { min-height: 48px; border-radius: 11px; }
.btn-sm { min-height: 30px; }

.card, .post-card, .post-composer, .sidebar-widget, .draft-jobs-panel, .news-card, .profile-hero-card, .profile-section, .person-card, .jobs-list, .job-detail, .messages-layout, .signup-card, .modal, .employer-verification-card {
  border-color: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.main-layout { max-width: 1240px; margin-top: 28px; margin-bottom: 32px; gap: 18px; }
.dashboard-layout { grid-template-columns: minmax(210px, 245px) minmax(0, 1fr) minmax(250px, 292px); align-items: start; }
.dashboard-layout > * { min-width: 0; }
.dashboard-layout .composer-actions { flex-wrap: wrap; }
.dashboard-layout .filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-sm); }
.dashboard-layout .filter-bar .filter-chip { display: inline-flex; min-width: max-content; min-height: 38px; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 999px; line-height: 1.2; white-space: nowrap; }
.main-layout.two-col { max-width: 1080px; grid-template-columns: 250px minmax(0, 1fr); }
.main-layout > main, .main-layout > section { min-width: 0; }
.feed { gap: 14px; }
.post-composer { padding: 16px 18px; }
.composer-input { border-color: #e1e7ef; background: #f5f7fa; }
.post-card { transition: box-shadow .18s ease, transform .18s ease; }
.post-card:hover { box-shadow: 0 8px 24px rgba(20,38,63,.075); }
.post-header { padding-top: 16px; }
.post-actions button { min-height: 42px; }
.sidebar-widget, .sidebar-right .news-card { padding: 18px; }
.sidebar-widget h4 { color: var(--text-primary); letter-spacing: .04em; }
.profile-card, .sidebar-left .profile-card { border-radius: var(--radius); box-shadow: var(--shadow-sm); }

.profile-hero-card { margin-bottom: 16px; }
.profile-hero-banner { background: linear-gradient(120deg, #1769d2 0%, #123d79 58%, #182e58 100%); }
.profile-hero-body { padding: 0 28px 28px; }
.profile-avatar-box { box-shadow: 0 5px 18px rgba(19,43,74,.16); }
.profile-hero-name { letter-spacing: -.025em; }
.profile-section { padding: 22px 26px; margin-bottom: 14px; }
.profile-section h3 { color: #1a3555; letter-spacing: -.015em; }
.profile-section-heading { border-bottom: 1px solid #edf0f5; margin-bottom: 14px; }
.profile-section-heading h3 { margin-bottom: 12px; }
.section-edit-btn { margin: -4px 0 8px; background: #f4f7fb; color: #536781; transition: color .15s ease, background .15s ease; }
.section-edit-btn:hover, .section-edit-btn:focus-visible { background: #eaf1fc; color: var(--blue); }
.experience-item, .education-item { padding: 2px 0 12px; border-bottom: 1px solid #edf0f5; }
.experience-item:last-child, .education-item:last-child { border-bottom: 0; }
.internship-experience-item { align-items: flex-start; gap: 16px; }
.internship-experience-item .exp-icon { display: grid; place-items: center; border-radius: 12px; }
.internship-company-icon svg { width: 23px; height: 23px; }
.internship-experience-info { min-width: 0; flex: 1; }
.internship-experience-info h4 { margin: 0 0 8px; color: var(--text-primary); font-size: 16px; }
.internship-detail { display: flex; align-items: flex-start; gap: 8px; margin: 5px 0; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.internship-detail svg, .internship-skills strong svg, .internship-description strong svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; color: #6381a5; }
.internship-experience-info > p:not(.internship-detail) { display: flex; align-items: center; gap: 8px; margin: 5px 0; line-height: 1.55; }
.internship-experience-info > p:not(.internship-detail)::before { content: ""; width: 14px; height: 14px; flex: 0 0 14px; border: 1.5px solid #6381a5; border-radius: 3px; background: linear-gradient(#6381a5,#6381a5) top / 100% 4px no-repeat; box-shadow: inset 0 5px 0 -3.5px #fff; }
.internship-skills, .internship-description { margin-top: 12px; }
.internship-skills strong, .internship-description strong { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: var(--text-primary); font-size: 13px; }
.internship-skill-list { display: flex; flex-wrap: wrap; gap: 7px; }
.internship-description-copy { min-width: 0; overflow-wrap: anywhere; }
.profile-description { min-width: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.profile-description-paragraph { margin: 0 0 12px; color: inherit; font-size: inherit; line-height: inherit; white-space: normal; }
.profile-description-list { display: block; margin: 0 0 12px; padding-left: 24px; color: inherit; font-size: inherit; line-height: 1.65; list-style-position: outside; }
.profile-description-list li { margin: 0 0 6px; padding-left: 2px; }
.profile-description h4 { margin: 14px 0 7px; color: var(--text-primary); font-size: 14px; line-height: 1.4; }
.profile-description-paragraph:last-child, .profile-description-list:last-child { margin-bottom: 0; }
.resume-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.resume-upload-row input[type="file"] { flex: 1 1 260px; min-width: 0; max-width: 360px; }
.exp-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(145deg, #edf4ff, #e4edfc); color: #245eaa; }
.skill-tag { border-color: #d8e5f7; border-radius: 999px; background: #f1f6ff; color: #315783; font-weight: 600; }

.jobs-layout { max-width: 1240px; margin-top: 28px; margin-bottom: 32px; grid-template-columns: minmax(300px, 370px) minmax(0,1fr); gap: 16px; }
.jobs-list { box-shadow: var(--shadow-sm); }
.jobs-list-header { padding: 18px 20px; color: #1a3555; }
.job-item { padding: 16px 18px; transition: background .15s ease, box-shadow .15s ease; }
.job-item:hover, .job-item.active { background: #f2f6ff; }
.job-item.active { box-shadow: inset 3px 0 var(--blue); }
.job-logo { border-radius: 12px; background: #f2f6fc; }
.job-item-info h4 { color: #1b4f8c; font-weight: 700; }
.job-detail { padding: 28px; }
.job-detail-header h2 { color: #173c68; letter-spacing: -.02em; }
.job-detail-section { padding-top: 4px; }
.job-tag, .emp-type-pill { border-radius: 999px; }

.network-grid { gap: 16px; }
.person-card { box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.person-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20,38,63,.11); }
.person-card-banner { background: linear-gradient(120deg, #1769d2, #123d79); }
.person-card-body { padding: 0 18px 18px; }

.notifications-page { max-width: 900px; margin-top: 30px; }
.notifications-page > h1, .notifications-header h1 { color: #1a3555; letter-spacing: -.025em; }
.notification-list { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.notification-item { padding: 18px 20px; transition: background .15s ease; }
.notification-item.unread { background: #f3f7ff; }
.notification-item:hover { background: #f8faff; }

.messages-layout { max-width: 1120px; margin-top: 28px; margin-bottom: 28px; border-radius: 16px; box-shadow: var(--shadow); }
.msg-sidebar-header { color: #1a3555; }
.msg-item { transition: background .15s ease; }
.msg-item.active { box-shadow: inset 3px 0 var(--blue); }
.msg-search input { border: 1px solid transparent; border-radius: 10px; }
.msg-search input:focus { border-color: #b7cdf7; background: #fff; box-shadow: 0 0 0 3px rgba(21,94,239,.08); }
.msg-bubble-wrap.sent .msg-bubble { background: linear-gradient(135deg, #1b6ae2, #1554b7); }

.modal-overlay { background: rgba(15,29,48,.48); backdrop-filter: blur(3px); }
.modal { box-shadow: 0 24px 70px rgba(15,29,48,.22); }
.modal-header, .modal-footer { background: #fbfcfe; }
.profile-entry-card { background: #fbfcfe; border-radius: 12px; }
.profile-entry-card input, .profile-entry-card select, .profile-entry-card textarea, .public-slug-input { border-radius: 8px; }
.work-experience-editor { padding:20px 16px 16px; border-color:#d9e4f2; background:linear-gradient(145deg,#f8fbff,#fff); }
.work-experience-editor legend { color:#234363; }
.profile-entry-card .work-present-toggle { display:inline-flex; align-items:center; justify-self:start; gap:9px; width:fit-content; min-height:38px; padding:7px 11px; border:1px solid #d7e4f1; border-radius:9px; background:#fff; color:#344b68; font-size:13px; font-weight:600; cursor:pointer; }
.profile-entry-card .work-present-toggle input[type="checkbox"] { appearance:auto; width:16px; height:16px; min-width:16px; margin:0; padding:0; accent-color:var(--blue); box-shadow:none; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, select:focus, textarea:focus {
  border-color: #8fb2ef;
  box-shadow: 0 0 0 3px rgba(21,94,239,.09);
}

.toast { border-radius: 10px; box-shadow: 0 8px 24px rgba(15,29,48,.2); }
.empty-state { padding: 64px 24px; }
.empty-state-icon { color: #5278ad; }

@media (max-width: 900px) {
  .main-layout { gap: 14px; }
  .dashboard-layout { grid-template-columns: minmax(0, 1fr); }
  .dashboard-layout .sidebar-left, .dashboard-layout .sidebar-right { display: none; }
  .main-layout.two-col { grid-template-columns: 1fr; }
  .main-layout.two-col .sidebar-left { display: none; }
  .jobs-layout { gap: 14px; }
  .messages-layout { margin: 14px; }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .dashboard-layout { grid-template-columns: minmax(190px, 220px) minmax(0, 1fr); gap: 16px; }
  .dashboard-layout .sidebar-right { display: none; }
}
@media (max-width: 700px) {
  :root { --nav-height: 58px; }
  .navbar .inner { padding-inline: 12px; gap: 4px; }
  .navbar .logo { font-size: 18px; }
  .search-bar { width: min(34vw, 190px); }
  .global-search { width: min(38vw, 230px); flex: 0 1 min(38vw, 230px); padding-inline: 8px; gap: 6px; }
  .nav-item { min-width: 52px; padding-inline: 6px; font-size: 10px; }
  .main-layout, .main-layout.two-col { margin-top: 16px; padding-inline: 12px; }
  .dashboard-layout .filter-bar { gap: 7px; padding: 8px; }
  .dashboard-layout .filter-bar .filter-chip { min-width: 0; min-height: 36px; padding: 7px 11px; font-size: 12px; }
  .profile-section { padding: 18px; }
  .profile-hero-banner { height: 160px; }
  .profile-hero-body { padding-inline: 18px; }
  .jobs-layout { margin: 16px 12px; padding: 0; }
  .job-detail { padding: 20px; }
  .messages-layout { height: calc(100dvh - var(--nav-height) - 28px); min-height: 420px; }
  .notifications-page { margin-top: 18px; padding-inline: 12px; }
}

.profile-account-danger-divider { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.profile-delete-account-button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 2px; border: 0; background: transparent; color: #b42318; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.profile-delete-account-button:hover { color: #8f1b13; text-decoration: underline; }

/* ===== SITE-WIDE PROFESSIONAL FINISH ===== */
body { background: linear-gradient(180deg, #edf4fc 0, #f4f7fb 260px, #f4f7fb 100%); }
.navbar { border-bottom-color: #dce5f0; }
.nav-item { border-radius: 10px 10px 0 0; transition: color .16s ease, background .16s ease, border-color .16s ease; }
.nav-item:hover { background: #f5f8fd; }
.search-bar { box-shadow: inset 0 1px 2px rgba(20,38,63,.025); }
.main-layout { position: relative; }
.main-layout > .sidebar-left, .main-layout > .sidebar-right { min-width: 0; }
.sidebar-left .profile-card, .sidebar-widget, .sidebar-right .news-card { border-color: #e1e8f1; }
.sidebar-widget, .sidebar-right .news-card { box-shadow: 0 5px 18px rgba(20,38,63,.045); }
.profile-card .profile-banner, .person-card-banner { background-image: linear-gradient(125deg, rgba(13,67,132,.08), rgba(36,132,203,.08)); }
.hero-banner { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 12px 28px rgba(20,54,91,.14); }
.hero-banner::after { position: absolute; top: -68px; right: -28px; width: 210px; height: 210px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 24px rgba(255,255,255,.045), 0 0 0 50px rgba(255,255,255,.035); content: ""; pointer-events: none; }
.hero-banner > * { position: relative; z-index: 1; }
.jobs-list, .job-detail, .messages-layout, .profile-hero-card, .profile-section { border-color: #e1e8f1; }
.jobs-list-header { background: linear-gradient(135deg, #fff, #f7faff); }
.jobs-list-header h2, .jobs-list-header h3 { letter-spacing: -.02em; }
.job-item { border-bottom-color: #edf1f6; }
.job-detail-header { padding-bottom: 18px; border-bottom: 1px solid #edf1f6; }
.person-card { overflow: hidden; }
.person-card:hover { border-color: #cbdcf1; }
.profile-hero-card { overflow: hidden; }
.notifications-header { padding: 4px 0 8px; }
.notifications-header h1, .main-layout h1 { letter-spacing: -.03em; }
.messages-layout { overflow: hidden; }
button, .btn { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}