:root{
 --wh:#1264f4;--wh2:#0b4ecb;--navy:#081f3f;--ink:#172033;--muted:#708096;
 --bg:#f5f8fc;--card:#fff;--line:#e4eaf2;--success:#16a34a;--warning:#f59e0b;--danger:#dc2626;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}
a{text-decoration:none}.brand{font-weight:800;color:#fff;font-size:1.18rem}.brand span{color:#55a0ff}
.topbar{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:50}
.sidebar{width:245px;background:linear-gradient(180deg,#08254a,#061b37);min-height:calc(100vh - 68px);position:fixed;top:68px;left:0;padding:18px 12px;z-index:40;overflow:auto}
.sidebar a{display:flex;align-items:center;gap:11px;color:#cbd7e7;padding:11px 13px;border-radius:10px;font-size:.87rem;margin:2px 0;transition:.18s}
.sidebar a:hover,.sidebar a.active{background:linear-gradient(90deg,#1468f5,#0e58d2);color:#fff;box-shadow:0 5px 14px #0057d922}
.main{margin-left:245px;padding:28px;min-height:calc(100vh - 68px);max-width:1700px}
.cardx{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 28px rgba(20,45,80,.055)}
.stat{padding:18px;position:relative;overflow:hidden}.stat .ico{width:43px;height:43px;border-radius:12px;background:#edf4ff;color:var(--wh);display:grid;place-items:center;font-size:1.1rem}.stat h3{font-size:1.52rem;margin:11px 0 3px;font-weight:800}
.btn-primary{background:var(--wh);border-color:var(--wh)}.btn-primary:hover{background:var(--wh2);border-color:var(--wh2)}
.form-control,.form-select{border-color:#d9e2ee;border-radius:10px;padding:.72rem .85rem}.form-control:focus,.form-select:focus{box-shadow:0 0 0 .2rem rgba(18,100,244,.12);border-color:#82aef8}
.page-title{font-size:1.4rem;font-weight:800}.text-muted{color:var(--muted)!important}.badge-soft{background:#edf4ff;color:#075cd7}
.hero{background:linear-gradient(135deg,#08254a 0%,#1264f4 100%);color:#fff;border-radius:22px;padding:52px 34px;box-shadow:0 18px 40px #0b55c52b}
.job-card{transition:.2s}.job-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(25,55,90,.10)}
.plan{height:100%;padding:22px}.plan.featured{border:2px solid var(--wh);position:relative}.price{font-size:2rem;font-weight:800}.feature-list{padding:0;list-style:none}.feature-list li{padding:7px 0;border-bottom:1px dashed #e8edf4}
.table-card{overflow:hidden}.table-card table{margin:0}.table-card th{font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;color:#718096;background:#f8fafc}.table-card td{vertical-align:middle}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 20% 10%,#dceaff 0,transparent 32%),linear-gradient(135deg,#f2f7ff,#fff)}
.login-box{max-width:460px;width:100%;padding:32px}
.login-brand{font-size:2rem;font-weight:900;color:var(--wh)}
.public-nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}.public-nav .navbar-brand{font-weight:900;color:#08254a}
.section{padding:70px 0}.icon-box{width:46px;height:46px;border-radius:13px;background:#edf4ff;color:var(--wh);display:grid;place-items:center}
.mobile-nav{display:none}.empty{padding:42px 20px;text-align:center;color:var(--muted)}
.kpi-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:#7b8799}.progress{height:8px;border-radius:20px}
@media(max-width:991px){
 .sidebar{display:none}.main{margin-left:0;padding:18px 14px 84px}.topbar{height:60px;padding:0 14px}
 .mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:66px;background:#fff;border-top:1px solid var(--line);z-index:80;justify-content:space-around}
 .mobile-nav a{font-size:.64rem;color:#738096;text-align:center;padding:8px 4px 0;min-width:58px}.mobile-nav a i{display:block;font-size:1.08rem;margin-bottom:2px}.mobile-nav a.active{color:var(--wh)}
 .hero{padding:34px 22px}.section{padding:45px 0}
}
@media(max-width:575px){.page-title{font-size:1.18rem}.stat h3{font-size:1.28rem}.hero h1{font-size:1.7rem}.cardx{border-radius:13px}.login-box{padding:24px 18px}}

/* WorkHai public mobile application-style layout */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.public-nav{width:100%;overflow:hidden}.public-nav-inner{width:100%;max-width:1200px!important}.public-nav .container{padding-left:12px;padding-right:12px}.brand-logo{width:30px;height:30px;border-radius:50%;object-fit:cover}.public-nav .navbar-brand{font-size:1.15rem;white-space:nowrap}.public-actions{display:flex;align-items:center;gap:6px}.public-home{width:100%;overflow:hidden}.hero-mobile{display:flex;align-items:center;gap:18px;overflow:hidden}.hero-copy{min-width:0;flex:1}.hero-visual{width:220px;flex:0 0 220px;display:flex;flex-direction:column;align-items:center;gap:10px}.hero-bubble{width:150px;height:150px;border-radius:40px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:5rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}.hero-mini-card{background:#fff;color:#08254a;border-radius:12px;padding:9px 13px;font-size:.78rem;font-weight:700;box-shadow:0 8px 25px #0002}.search-panel{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center}.search-field{position:relative}.search-field i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#7b8799;z-index:2}.search-field .form-control{padding-left:35px;height:48px}.search-btn{height:48px;color:#08254a;font-weight:800;white-space:nowrap}.hero-lead p{margin-bottom:0}.public-search{max-width:1200px}.public-search .search-results-form{position:sticky;top:70px;z-index:20}
@media(max-width:991px){.hero-mobile{display:block}.hero-copy{width:100%}.hero-visual{display:none}.hero{width:100%;border-radius:18px}.search-panel{grid-template-columns:1fr;gap:8px}.search-field,.search-btn{width:100%}.search-btn{background:#fff}.public-nav .container{max-width:100%!important}.public-home .container,.public-search{max-width:100%!important;width:100%!important}.public-home .row,.public-search .row{--bs-gutter-x:12px}.public-nav .btn{font-size:.76rem;padding:.42rem .62rem}.seo-badge{font-size:.66rem;line-height:1.5;white-space:normal}.hero h1{font-size:1.85rem;line-height:1.15}.hero-lead{font-size:1rem}.stat{padding:14px}.stat .ico{width:38px;height:38px}.public-search .search-results-form{top:60px}}
@media(max-width:575px){.public-nav .navbar-brand,.public-nav .navbar-brand span{font-size:1.02rem}.brand-logo{width:28px;height:28px}.public-nav .container{padding-left:10px!important;padding-right:10px!important}.public-nav .public-actions{gap:4px}.hero{padding:25px 16px}.hero h1{font-size:1.62rem}.hero-lead{font-size:.94rem}.search-panel{margin-top:18px!important}.search-field .form-control{height:46px;font-size:.92rem}.search-btn{height:46px}.public-home section.container,.public-search{padding-left:10px!important;padding-right:10px!important}.job-card{padding:14px!important}.page-title{font-size:1.15rem}}

.login-back{position:fixed;top:18px;left:18px;z-index:20;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#fff;color:#08254a;text-decoration:none;font-weight:700;box-shadow:0 8px 24px rgba(8,37,74,.12);border:1px solid #e5edf8}.login-back:hover{color:#1264f4;transform:translateY(-1px)}
@media(max-width:575px){.login-wrap{padding:76px 14px 22px}.login-back{top:12px;left:12px;padding:9px 12px;font-size:13px}.login-back span{display:none}.login-back i{font-size:20px}}
.wh-support{position:fixed;right:18px;bottom:18px;z-index:1080}.wh-support-fab{border:0;border-radius:999px;background:#1264f4;color:#fff;padding:12px 17px;display:flex;gap:8px;align-items:center;font-weight:800;box-shadow:0 14px 34px rgba(18,100,244,.3)}.wh-support-panel{width:min(380px,calc(100vw - 24px));background:#fff;border:1px solid #dbe5f2;border-radius:18px;overflow:hidden;box-shadow:0 24px 70px rgba(8,37,74,.22);margin-bottom:10px}.wh-support-head{background:#08254a;color:#fff;padding:14px 16px;display:flex;justify-content:space-between;align-items:center}.wh-support-body{padding:14px;max-height:360px;overflow:auto;background:#f7faff}.wh-msg{max-width:90%;padding:10px 12px;border-radius:14px;margin-bottom:10px;font-size:14px;line-height:1.5}.wh-msg.bot{background:#fff;border:1px solid #e4ebf5}.wh-msg.user{margin-left:auto;background:#1264f4;color:#fff}.wh-quick{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0}.wh-quick button{border:1px solid #cbd8ea;background:#fff;border-radius:999px;padding:7px 10px;font-size:12px}.wh-support-input{display:flex;gap:7px;padding:10px;border-top:1px solid #e5ebf4;background:#fff}.wh-support-input input{flex:1;border:1px solid #d7e0ed;border-radius:10px;padding:10px 12px;outline:none}.custom-footer-cms{overflow:hidden}.custom-footer-cms img{max-width:100%;height:auto}@media(max-width:575px){.wh-support{right:10px;bottom:10px}.wh-support-fab{padding:11px 14px}.wh-support-panel{width:calc(100vw - 20px)}}
.custom-header-cms{width:100%;position:relative;z-index:1000}.custom-header-cms img{max-width:100%;height:auto}.custom-header-cms a{max-width:100%}

/* WorkHai media avatars / company logos */
.avatar{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px;border-radius:12px;object-fit:contain;object-position:center;background:#f4f7fb;border:1px solid #e3eaf3;overflow:hidden;vertical-align:middle}
.avatar img{width:100%;height:100%;object-fit:contain}
.avatar-sm{width:36px;height:36px;flex-basis:36px;border-radius:10px}
.avatar-lg{width:76px;height:76px;flex-basis:76px;border-radius:16px}
.avatar-xl{width:104px;height:104px;flex-basis:104px;border-radius:20px}
.avatar-initial{font-weight:800;color:#1264f4;background:#edf4ff;border-color:#d8e7ff;font-size:1rem}
.avatar-lg.avatar-initial{font-size:1.35rem}
.avatar-xl.avatar-initial{font-size:1.65rem}
.company-logo-box{width:76px;height:76px;flex:0 0 76px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #dfe7f1;box-shadow:0 6px 18px rgba(8,37,74,.08);overflow:hidden}
.company-logo-box img{display:block;width:100%;height:100%;object-fit:contain;padding:8px}
.company-logo-box .avatar-initial{width:100%;height:100%;border:0;border-radius:0}
.company-logo-preview{width:112px;height:112px;border-radius:20px;background:#fff;border:1px solid #dfe7f1;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 8px 24px rgba(8,37,74,.08)}
.company-logo-preview img{width:100%;height:100%;object-fit:contain;padding:10px}
.profile-photo-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
.profile-photo-wrap .avatar{width:96px;height:96px;flex-basis:96px;border-radius:50%}
.photo-edit{position:absolute;right:-2px;bottom:-2px;width:32px;height:32px;border-radius:50%;background:#1264f4;color:#fff;display:grid;place-items:center;border:3px solid #fff;cursor:pointer;box-shadow:0 5px 15px rgba(18,100,244,.25)}
@media(max-width:575px){.avatar-lg{width:64px;height:64px;flex-basis:64px}.company-logo-box{width:64px;height:64px;flex-basis:64px}.company-logo-preview{width:92px;height:92px}.profile-photo-wrap .avatar{width:82px;height:82px;flex-basis:82px}}