*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#012169;--gold:#C9A547;--cream:#F5F0E8;--red:#CE1126;--text:#1C1C2E;--white:#fff;--gray:#6B6B80;--light-gray:#E8E8F0;--border:#E8E8F0;--shadow:0 1px 3px rgba(0,0,0,0.08),0 4px 12px rgba(0,0,0,0.04)}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--text);background:#F8F7F4;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{max-width:1280px;margin:0 auto;padding:0 60px}

/* Breaking Bar */
.breaking-bar{background:var(--red);color:var(--white);padding:9px 0;overflow:hidden}
.breaking-bar-inner{display:flex;align-items:center;gap:0}
.breaking-label{background:var(--white);color:var(--red);font-weight:700;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:4px 14px;white-space:nowrap;flex-shrink:0;margin-right:20px}
.breaking-marquee-wrap{overflow:hidden;flex:1}
.breaking-marquee{display:flex;gap:80px;animation:marquee 38s linear infinite;white-space:nowrap}
.breaking-marquee span{font-size:12px;font-weight:500}
.breaking-marquee span::before{content:"—";margin-right:10px;opacity:0.7}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Header */
header{background:var(--white);position:sticky;top:0;z-index:99;box-shadow:0 1px 0 rgba(0,0,0,0.06)}
.header-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 60px;gap:20px}
.header-logo-img{height:48px;width:auto}
.header-nav{display:flex;align-items:center;gap:4px}
.header-nav a{font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--text);padding:8px 14px;border-radius:2px;transition:color 0.2s;position:relative}
.header-nav a::after{content:'';position:absolute;bottom:4px;left:14px;right:14px;height:1px;background:var(--gold);transform:scaleX(0);transition:transform 0.25s}
.header-nav a:hover,.header-nav a.active{color:var(--navy)}
.header-nav a.active::after,.header-nav a:hover::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.btn-login{font-size:12px;font-weight:600;letter-spacing:0.8px;text-transform:uppercase;color:var(--navy);border:1.5px solid var(--navy);padding:8px 18px;border-radius:2px;transition:background 0.2s,color 0.2s}
.btn-login:hover{background:var(--navy);color:var(--white)}
.btn-register{font-size:12px;font-weight:600;letter-spacing:0.8px;text-transform:uppercase;color:var(--white);background:var(--navy);padding:8px 18px;border-radius:2px;transition:background 0.2s}
.btn-register:hover{background:var(--gold);color:var(--navy)}
.tricolor{height:3px;background:linear-gradient(to right,var(--navy) 33.33%,var(--gold) 33.33%,var(--gold) 66.66%,var(--red) 66.66%)}

/* Page Hero */
.page-hero{background:var(--navy);padding:36px 0}
.page-hero-inner{display:flex;align-items:center;justify-content:space-between;gap:40px}
.page-hero-title{font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:700;color:var(--white);line-height:1.1}
.page-hero-sub{font-size:13px;color:rgba(255,255,255,0.6);margin-top:8px;font-weight:400}
.jobs-stats{display:flex;gap:40px}
.jobs-stat{text-align:center}
.jobs-stat-num{display:block;font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:700;color:var(--gold);line-height:1}
.jobs-stat-lbl{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-top:4px;display:block}

/* Filters */
.filters-bar{background:var(--white);border-bottom:1px solid var(--border);padding:16px 0}
.filters-inner{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.filter-search-wrap{position:relative;flex:1;min-width:240px}
.filter-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#94a3b8}
.filter-search{width:100%;padding:10px 12px 10px 36px;border:1.5px solid var(--border);border-radius:4px;font-size:13px;font-family:inherit;outline:none;transition:border-color 0.2s;background:#fff}
.filter-search:focus{border-color:var(--navy)}
.filter-select{padding:10px 12px;border:1.5px solid var(--border);border-radius:4px;font-size:13px;font-family:inherit;outline:none;background:#fff;cursor:pointer;color:var(--text);transition:border-color 0.2s}
.filter-select:focus{border-color:var(--navy)}
.filter-reset{padding:10px 16px;background:transparent;border:1.5px solid var(--border);border-radius:4px;font-size:12px;font-weight:600;letter-spacing:0.5px;cursor:pointer;color:var(--gray);transition:all 0.2s}
.filter-reset:hover{border-color:var(--red);color:var(--red)}

/* Category Pills */
.category-pills{background:var(--white);border-bottom:1px solid var(--border);padding:12px 0}
.pills-inner{display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:6px 16px;border-radius:20px;border:1.5px solid var(--border);background:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s;color:var(--gray);font-family:inherit}
.pill:hover{border-color:var(--navy);color:var(--navy)}
.pill.active{background:var(--navy);border-color:var(--navy);color:var(--white)}

/* Layout */
main{padding:32px 0 60px}
.jobs-layout{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start}

/* Jobs Main */
.jobs-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.jobs-count{font-size:13px;color:var(--gray)}
.jobs-view{display:flex;gap:4px}
.view-btn{padding:6px 8px;border:1.5px solid var(--border);background:#fff;border-radius:4px;cursor:pointer;transition:all 0.2s;line-height:0}
.view-btn svg{width:16px;height:16px;color:var(--gray)}
.view-btn.active{border-color:var(--navy);background:var(--navy)}
.view-btn.active svg{color:#fff}

/* Job Card — List View */
.jobs-list{display:flex;flex-direction:column;gap:12px}
.jobs-list.grid-view{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.job-card{background:var(--white);border:1px solid var(--border);border-radius:4px;padding:20px 24px;transition:box-shadow 0.2s,border-color 0.2s;cursor:pointer;position:relative}
.job-card:hover{box-shadow:var(--shadow);border-color:rgba(1,33,105,0.2)}
.job-card.featured{border-left:3px solid var(--gold)}
.job-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:10px}
.job-card-logo{width:44px;height:44px;border-radius:4px;background:var(--light-gray);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.job-card-logo img{width:100%;height:100%;object-fit:contain}
.job-card-logo-placeholder{font-size:18px;font-weight:700;color:var(--navy);font-family:'Cormorant Garamond',serif}
.job-card-title-wrap{flex:1}
.job-card-title{font-size:15px;font-weight:600;color:var(--text);line-height:1.3;margin-bottom:4px;transition:color 0.2s}
.job-card:hover .job-card-title{color:var(--navy)}
.job-card-company{font-size:13px;color:var(--gray)}
.job-card-badge{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;border-radius:2px;white-space:nowrap;flex-shrink:0}
.badge-featured{background:#fdf4e0;color:#a07d25;border:1px solid #e8d38a}
.badge-new{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7}
.job-card-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--gray)}
.job-meta-item{display:flex;align-items:center;gap:5px}
.job-meta-item svg{width:13px;height:13px;flex-shrink:0}
.job-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.job-card-salary{font-size:13px;font-weight:600;color:var(--navy)}
.job-card-time{font-size:11px;color:var(--gray)}
.job-card-apply{padding:7px 18px;background:var(--navy);color:var(--white);border:none;border-radius:3px;font-size:12px;font-weight:600;cursor:pointer;transition:background 0.2s;font-family:inherit;letter-spacing:0.3px}
.job-card-apply:hover{background:var(--gold);color:var(--navy)}

/* Sidebar */
.jobs-sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:100px}
.sidebar-widget{background:var(--white);border:1px solid var(--border);border-radius:4px;padding:20px}
.widget-title{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:700;color:var(--text);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--gold)}
.widget-text{font-size:13px;color:var(--gray);line-height:1.6;margin-bottom:16px}
.widget-btn{display:block;text-align:center;padding:10px 20px;background:var(--navy);color:var(--white);border-radius:3px;font-size:12px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;transition:background 0.2s}
.widget-btn:hover{background:var(--gold);color:var(--navy)}
.cities-list{display:flex;flex-direction:column;gap:2px}
.city-item{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px;cursor:pointer;transition:color 0.2s}
.city-item:last-child{border-bottom:none}
.city-item:hover{color:var(--navy)}
.city-count{font-size:11px;color:var(--gray);background:var(--light-gray);padding:2px 8px;border-radius:10px}
.featured-job-item{padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer}
.featured-job-item:last-child{border-bottom:none}
.featured-job-item:hover .featured-job-title{color:var(--navy)}
.featured-job-title{font-size:13px;font-weight:600;margin-bottom:4px;transition:color 0.2s}
.featured-job-meta{font-size:11px;color:var(--gray)}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:28px;flex-wrap:wrap}
.page-btn{padding:8px 14px;border:1.5px solid var(--border);background:#fff;border-radius:3px;font-size:13px;cursor:pointer;transition:all 0.2s;font-family:inherit;color:var(--text)}
.page-btn:hover{border-color:var(--navy);color:var(--navy)}
.page-btn.active{background:var(--navy);border-color:var(--navy);color:#fff}
.page-btn:disabled{opacity:0.4;cursor:not-allowed}

/* Empty & Loading */
.jobs-empty{text-align:center;padding:60px 20px;color:var(--gray)}
.jobs-empty-title{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--text);margin-bottom:8px}
.jobs-skeleton{background:var(--white);border:1px solid var(--border);border-radius:4px;padding:20px 24px;margin-bottom:12px}
.skeleton-line{height:14px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.2s infinite;border-radius:3px;margin-bottom:10px}
.skeleton-line.short{width:40%}
.skeleton-line.medium{width:60%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Footer */
.footer{background:var(--navy);color:rgba(255,255,255,0.8);padding:60px 0 0}
.footer-inner{padding-bottom:40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;margin-bottom:40px}
.footer-logo-img{height:36px;width:auto;margin-bottom:14px}
.footer-desc{font-size:13px;line-height:1.7;color:rgba(255,255,255,0.45);max-width:280px}
.footer-col-title{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer-links a{font-size:13px;color:rgba(255,255,255,0.55);transition:color 0.2s}
.footer-links a:hover{color:var(--white)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding:20px 0;display:flex;justify-content:space-between;align-items:center}
.footer-copy{font-size:12px;color:rgba(255,255,255,0.35)}

/* Responsive */
@media(max-width:1024px){
.container{padding:0 30px}
.header-top{padding:16px 30px}
.jobs-layout{grid-template-columns:1fr;gap:24px}
.jobs-sidebar{position:static}
.filters-bar .container .filters-inner{gap:8px}
.page-hero-inner{flex-direction:column;gap:20px}
.jobs-stats{gap:24px}
}
@media(max-width:768px){
.container{padding:0 16px}
.header-top{padding:14px 16px;grid-template-columns:1fr 1fr}
.header-nav{display:none}
.page-hero{padding:24px 0}
.page-hero-title{font-size:28px}
.jobs-stats{gap:16px}
.jobs-stat-num{font-size:24px}
.filters-inner{flex-direction:column;align-items:stretch}
.filter-search-wrap{min-width:unset}
.jobs-list.grid-view{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr}
.footer-bottom{flex-direction:column;gap:8px;text-align:center}
}