:root {
  font-size:15px;
  --brand-blue: #0878d1;
  --brand-green: #4a9d22;
  --brand-gold: #f5aa00;
  --brand-charcoal: #172a37;
  --brand-blue-pale: #eaf5fc;
  --brand-green-pale: #eff8e9;
  --brand-gold-pale: #fff6df;
  color: #0c315b;
  background: var(--brand-blue-pale);
  font-family: "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin:0; font-size:.94rem; line-height:1.5; background:#f5f9fb; }
a { color: var(--brand-blue); }
.topbar {
  min-height: 82px;
  padding: 8px max(calc((100vw - 1080px) / 2), 5.5vw);
  display: flex;
  align-items: center;
  gap: 42px;
  color:#13385f;
  background:#fff;
  box-shadow:0 2px 12px #163b5912;
}
.brand { display:flex; flex:0 0 auto; align-items:center; gap:12px; color:#13385f; text-decoration:none; white-space:nowrap; }
.brand-mark { display:flex; flex:0 0 auto; flex-direction:column; align-items:center; }
.brand-logo { display:block; width:102px; height:94px; object-fit:contain; }
.brand-tagline { display:none!important; }
.brand-name,.brand-divider { display:none; }
.kbs-word { display:inline-flex; font-weight:inherit; white-space:nowrap; }
.kbs-k { color:var(--brand-blue)!important; }
.kbs-b { color:var(--brand-green)!important; }
.kbs-s { color:var(--brand-gold)!important; }
.brand-divider { width: 1px; height: 28px; margin: 0 3px; background: #bdc9ce; }
.brand-subtitle { color:#3b5c73; font-size:.95rem; }
.main-nav,.account-nav { display: flex; align-items: center; gap: 22px; }
.main-nav { flex: 1; justify-content: center; }
.signed-in { color:#3d617d; font-size:.78rem; white-space:nowrap; }
.signed-in strong { color:#123d69; }
.signed-in-role { color:#54748a; }
.management-session .account-nav { margin-left:auto; }
.topbar nav a { color:#173b68; text-decoration:none; font-size:.88rem; }
.main-nav a { padding: 8px 3px; border-bottom: 2px solid transparent; }
.main-nav a:hover,.main-nav a[aria-current="page"] { border-color: var(--brand-gold); }
.nav-pill { border: 1px solid #84949d; border-radius: 24px; padding: 7px 15px; white-space: nowrap; }
.nav-pill span { margin-right: 5px; }
.person-icon { display:inline-block; width:15px; height:15px; margin-right:5px; vertical-align:-2px; fill:currentColor; }
.notification-count { display:inline-grid; place-items:center; min-width:19px; height:19px; margin-left:5px; padding:0 5px; border-radius:99px; color:#fff; background:#b33a34; font-size:.7rem; font-weight:800; }
.topbar .nav-primary { color: #fff; border-color: var(--brand-green); background: var(--brand-green); }
.container { width: min(1080px, 90%); margin: 0 auto; }
.management-layout { display:flex; align-items:stretch; gap:24px; width:min(1440px,96%); min-height:calc(100vh - 126px); margin:0 auto; padding:24px 0; }
.management-sidebar { flex:0 0 220px; align-self:flex-start; padding:18px 12px; border:1px solid #d9e5e9; border-radius:10px; background:#fff; box-shadow:0 4px 16px #172a370a; }
.management-sidebar h2 { margin:0 10px 12px; color:#526a80; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }
.management-sidebar nav { display:grid; gap:5px; }
.management-sidebar a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:7px; color:#254d70; font-size:.9rem; font-weight:650; text-decoration:none; }
.management-sidebar a:hover,.management-sidebar a[aria-current="page"] { color:#075d9f; background:var(--brand-blue-pale); }
.management-sidebar a[aria-current="page"] { box-shadow:inset 3px 0 var(--brand-blue); }
.management-sidebar .management-logout { margin-top:10px; color:#fff; background:var(--brand-green); }
.management-sidebar .management-logout:hover { color:#fff; background:#3d861b; }
.management-main { flex:1; min-width:0; width:auto; margin:0; }
.home-main { width:100%; margin:0; }
.home-shell { position:relative; overflow:hidden; padding:18px 0 0; background:linear-gradient(135deg,#f1faff 0%,#f8fcff 54%,#edf8ff 100%); }
.home-shell::before { position:absolute; z-index:0; top:0; right:-170px; width:410px; height:330px; content:""; border-radius:0 0 0 100%; background:linear-gradient(145deg,#e1f3ff 0%,#eef9ff 72%,transparent 72%); opacity:.8; }
.home-shell::after { display:none; }
.home-content { position:relative; z-index:1; width:min(1235px,91%); }
.hero { position:relative; max-width:860px; padding:0 0 12px; color:#123e70; }
.eyebrow { color:var(--brand-green); text-transform:uppercase; letter-spacing:.16em; font-weight:800; font-size:.8rem; }
.hero h1 { max-width:780px; margin:5px 0 8px; color:#103c70; font-size:clamp(1.6rem,2.6vw,2rem); line-height:1.1; letter-spacing:-.035em; font-weight:850; }
.hero h1 .accent { color:var(--brand-blue); }
.hero p { max-width:670px; margin:5px 0; color:#28557f; }
.status-pill { display:inline-flex; align-items:center; gap:8px; margin-top:10px; padding:7px 15px; border-radius:99px; color:#2d6418; background:var(--brand-green-pale); font-weight:700; font-size:.85rem; }
.status-pill::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--brand-green); }
.status-pill.closed { color:#825900; background:var(--brand-gold-pale); }
.status-pill.closed::before { background:var(--brand-gold); }
.responsibility-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:7px; }
.responsibility-card,.qualification-card,.vacancy-card,.about-card { border:1px solid #d9e5e9; border-radius:10px; background:#ffffffed; box-shadow:0 6px 20px #172a3709; }
.responsibility-card { min-height:270px; padding:18px 19px; }
.card-heading { display:flex; align-items:center; gap:13px; margin-bottom:10px; }
.heading-icon,.qualification-icon,.vacancy-icon,.value-icon { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--brand-blue); background:var(--brand-blue-pale); font-size:1.25rem; font-weight:800; }
.card-heading h2 { margin:0; color:#123f70; font-size:1.1rem; line-height:1.2; white-space:nowrap; }
.heading-line { height:1px; flex:1; background:var(--brand-gold); }
.responsibility-card ul { list-style:none; padding:0; margin:0; }
.responsibility-card li { position:relative; padding-left:22px; margin:7px 0; color:#315a82; font-size:.82rem; line-height:1.38; }
.responsibility-card li::before { content:"✓"; position:absolute; left:0; top:-1px; color:var(--brand-green); font-size:1.05rem; font-weight:900; }
.qualification-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:14px; margin:13px 0 14px; }
.qualification-card { min-height:80px; display:flex; align-items:center; gap:14px; padding:12px 17px; }
.qualification-card h3 { margin:0 0 3px; color:#103f70; font-size:.91rem; }
.qualification-card p { margin:0; color:#426488; font-size:.78rem; line-height:1.35; }
.qualification-card .qualification-icon { width:48px; height:48px; }
.deadline-bar { position:relative; overflow:hidden; color:#fff; background:var(--brand-charcoal); }
.deadline-bar::before,.deadline-bar::after { content:""; position:absolute; width:140px; height:110px; transform:rotate(35deg); background:linear-gradient(130deg,transparent 15%,var(--brand-blue) 15% 50%,var(--brand-green) 50% 70%,transparent 70%); opacity:.8; }
.deadline-bar::before { bottom:-66px; left:-52px; }
.deadline-bar::after { top:-76px; right:-44px; }
.deadline-inner { position:relative; z-index:1; min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0; }
.date-group { display:flex; align-items:center; gap:12px; padding-right:20px; border-right:1px solid #667780; }
.date-icon { color:var(--brand-gold); font-size:1.6rem; }
.date-label { display:block; color:#d5e5f2; font-size:.72rem; }
.date-value { display:block; color:#fff; font-size:.88rem; font-weight:750; }
.date-sub { color:#cfdfeb; font-size:.7rem; }
.apply-area { min-width:215px; text-align:center; }
.apply-button { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-width:185px; padding:10px 20px; border:1px solid var(--brand-green); border-radius:25px; color:#fff; background:linear-gradient(100deg,#4a9d22,#0878d1); text-decoration:none; font-weight:800; box-shadow:0 5px 18px #0878d144; }
.apply-button:hover { filter:brightness(1.08); transform:translateY(-1px); }
.apply-button.disabled { color:#d7e5ef; border-color:#4f6e8d; background:#24496e; box-shadow:none; cursor:not-allowed; }
.view-link { display:block; width:max-content; margin:4px auto 0; color:#e7b33d; font-size:.72rem; }
.notice { margin:16px 0; padding:13px 16px; border-radius:7px; }
.login-card .notice { position:static; width:100%; margin:0 0 12px; box-shadow:none; }
.notice-info { color:#155273; border:1px solid #c9dff0; background:#eff7fc; }
.success { color:#315f1c; background:#eff8e9; }
.error { color:#8f2824; background:#fde9e8; }
.button,button { display:inline-block; padding:11px 18px; border:0; border-radius:7px; color:white; background:var(--brand-blue); text-decoration:none; font:inherit; font-weight:700; cursor:pointer; }
.button.secondary { color:#173b5e; background:#e8eef4; }
.button.danger { background:#a33131; }
label { display:block; margin:14px 0 5px; font-weight:650; }
input,select,textarea { width:100%; padding:10px; border:1px solid #b8c5d2; border-radius:6px; background:white; font:inherit; }
textarea { min-height:100px; }
input[type=checkbox] { width:auto; margin-right:8px; }
.password-field { position:relative; display:flex; flex:1; min-width:0; }
.registration-input>.password-field { width:auto; flex:1; color:inherit; text-align:left; font-size:inherit; }
.login-input>.password-field { width:auto; flex:1; color:inherit; text-align:left; }
.password-field input { min-width:0; padding-right:42px; }
.password-toggle { position:absolute; top:50%; right:5px; display:grid; place-items:center; width:34px; height:34px; padding:0; transform:translateY(-50%); color:#526a80; background:transparent; }
.password-toggle:hover { color:var(--brand-blue); background:#eaf5fc; }
.password-toggle:focus-visible { outline:2px solid var(--brand-blue); outline-offset:1px; }
.password-toggle svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.password-toggle .eye-slash { display:none; }
.password-toggle[aria-pressed="true"] .eye-slash { display:block; }
.field-help,.muted { color:#667686; font-size:.9rem; }
.panel,.about-card,.vacancy-card { margin:18px 0; padding:24px; }
.vacancy-list { display:grid; gap:14px; }
.vacancy-card { display:flex; align-items:center; gap:15px; }
.vacancy-card .grow { flex:1; }
.vacancy-card h2,.about-card h2 { margin:0 0 4px; color:#103f70; font-size:1.2rem; line-height:1.3; }
.about-card h3 { font-size:1rem; line-height:1.35; }
.panel h1,.card h1 { margin-top:0; font-size:1.65rem; line-height:1.25; }
.vacancy-card p,.about-card p { margin:4px 0; color:#426488; }
.about-layout { display:grid; grid-template-columns:1.2fr 1fr; gap:16px; align-items:stretch; }
.values-card { display:grid; gap:12px; align-content:center; padding:20px; border:1px solid #d9e5e9; border-radius:10px; background:#f4f8f6; }
.value-row { display:flex; align-items:center; gap:12px; }
.value-row h3 { margin:0; color:#103f70; font-size:.9rem; }
.value-row p { margin:2px 0 0; color:#426488; font-size:.8rem; }
.mission-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.mission-grid>div+div { padding-left:20px; border-left:1px solid #cfe7f3; }
.badge { display:inline-block; padding:5px 12px; border-radius:99px; color:#17633b; background:#e6f4ec; font-size:.85rem; font-weight:700; }
.badge.closed { color:#9b2c25; background:#fce8e7; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.notification-center { max-width:900px; margin:0 auto; padding:20px 0 34px; }
.notification-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
.notification-heading h1 { margin:2px 0; color:#123f70; font-size:clamp(1.45rem,2.3vw,1.8rem); }
.notification-heading .eyebrow { margin:0; }
.notification-list { display:grid; gap:12px; }
.notification-item { margin:0; padding:18px 20px; border:1px solid #d9e8ef; border-radius:11px; background:#fff; }
.notification-item.unread { border-left:4px solid var(--brand-blue); background:#f4faff; }
.notification-item-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }
.notification-item h2 { margin:0; color:#123f70; font-size:1.02rem; }
.notification-item time { color:#718598; font-size:.76rem; white-space:nowrap; }
.notification-item p { margin:9px 0 12px; color:#355b79; }
.notification-actions { display:flex; align-items:center; gap:16px; font-size:.86rem; }
.notification-actions form { margin:0; }
.link-button { padding:0; color:var(--brand-blue); background:transparent; font-size:inherit; font-weight:750; }
.link-button:hover { color:#075d9f; text-decoration:underline; background:transparent; }
.management-main .notification-actions .link-button { padding:0; color:#0878d1; background:transparent!important; font-size:inherit; font-weight:700; }
.management-main .notification-actions .link-button:hover { color:#075d9f; text-decoration:underline; }
.management-main .notification-actions .link-button:focus-visible { outline:2px solid #0878d1; outline-offset:3px; }
.notification-empty { padding:24px; }
.pagination { display:flex; align-items:center; justify-content:space-between; margin-top:18px; color:#526a80; font-size:.86rem; }
.pagination a { font-weight:700; text-decoration:none; }
footer { padding:12px 0; color:#3b5c73; background:#fff; border-top:1px solid #dce8ee; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.78rem; }
.footer-brand { display:inline-flex; align-items:center; gap:8px; color:#173b68; font-weight:800; }
.footer-logo { display:block; width:102px; height:94px; object-fit:contain; }
.required { color:#a33131; }
.security-page { min-height:100vh; display:flex; flex-direction:column; background:radial-gradient(ellipse at 12% 18%,#e0f2fb 0,transparent 34%),radial-gradient(ellipse at 88% 82%,#e7f4e3 0,transparent 30%),#f5f9fb; }
.security-page>main.container { width:min(560px,92%); flex:1 0 auto; display:flex; flex-direction:column; justify-content:center; padding:32px 0; }
.security-page>.topbar { flex:0 0 auto; }
.security-page .notice { width:100%; margin:0 auto 12px; }
.security-card { width:100%; margin:0; padding:36px 40px; border:1px solid #dce8ee; border-radius:16px; background:#fff; box-shadow:0 18px 48px #123b5718; }
.security-card .security-icon { display:grid; place-items:center; width:52px; height:52px; margin:0 0 16px; border-radius:15px; color:#0878d1; background:#eaf5fc; font-size:1.55rem; }
.security-card h1 { margin:0; color:#123f70; font-size:clamp(1.55rem,4vw,1.9rem); line-height:1.2; }
.security-intro { margin:9px 0 22px; color:#526f87; line-height:1.6; }
.security-card label { margin:16px 0 6px; color:#173d66; font-size:.88rem; font-weight:750; }
.security-card input { min-height:46px; border-color:#c5d5e0; border-radius:8px; }
.security-card input:focus { border-color:#0878d1; outline:3px solid #0878d11c; }
.security-card input[name="code"] { letter-spacing:.12em; }
.security-destination { margin:0 0 16px; color:#526f87; font-size:.88rem; }
.security-destination strong { color:#234d6e; }
.security-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.security-actions button { min-height:46px; padding:10px 12px; }
.security-actions .secondary { color:#155f96; border:1px solid #c9ddec; background:#f3f9fd; }
.security-submit { width:100%; min-height:47px; margin-top:20px; }
.security-footer { margin:20px 0 0; padding-top:16px; border-top:1px solid #e8eef2; color:#526f87; text-align:center; }
.security-footer a { font-weight:700; text-decoration:none; }
.security-footer a:hover { text-decoration:underline; }
@media(max-width:850px) {
  .topbar { flex-wrap:wrap; gap:10px 22px; padding:10px 5%; }
  .main-nav { order:3; flex-basis:100%; justify-content:flex-start; gap:20px; }
  .account-nav { margin-left:auto; gap:8px; }
  .management-layout { gap:14px; width:94%; }
  .management-sidebar { flex-basis:190px; }
  .signed-in { font-size:.72rem; }
  .home-shell { padding-top:24px; }
  .home-shell::before { right:-270px; opacity:.22; }
  .responsibility-card { padding:15px; }
  .responsibility-card li { font-size:.78rem; }
  .deadline-inner { flex-wrap:wrap; justify-content:center; }
}
@media(max-width:620px) {
  .brand-logo { width:100px; height:96px; }
  .brand-subtitle { font-size:.85rem; }
  .account-nav .nav-pill { padding:6px 9px; font-size:.74rem!important; }
  .account-nav { flex-wrap:wrap; justify-content:flex-end; }
  .signed-in { flex-basis:100%; text-align:right; }
  .management-layout { display:block; width:92%; padding:14px 0; }
  .management-sidebar { margin-bottom:14px; padding:10px; }
  .management-sidebar h2 { margin:2px 8px 7px; }
  .management-sidebar nav { display:flex; flex-wrap:wrap; }
  .management-sidebar a { padding:8px 10px; font-size:.8rem; }
  .home-shell { padding-top:22px; }
  .hero h1 { font-size:1.9rem; }
  .responsibility-grid,.qualification-grid { grid-template-columns:1fr; }
  .responsibility-card { min-height:0; }
  .qualification-card { min-height:72px; }
  .deadline-inner { align-items:stretch; justify-content:flex-start; padding:15px 0; }
  .date-group { flex:1 1 43%; min-width:135px; padding-right:8px; }
  .apply-area { flex:1 1 100%; }
  .vacancy-card { align-items:flex-start; flex-wrap:wrap; }
  .vacancy-card .grow { flex-basis:70%; }
  .vacancy-card .button { margin-left:55px; }
  .about-layout,.mission-grid { grid-template-columns:1fr; }
  .mission-grid>div+div { padding:15px 0 0; border-top:1px solid #cfe7f3; border-left:0; }
  .footer-inner { align-items:flex-start; flex-direction:column; }
  .security-card { padding:27px 22px; }
  .security-actions { grid-template-columns:1fr; }
}
.register-page { min-height:100vh; display:flex; flex-direction:column; background:#edf7fc; }
.register-page .topbar { flex:0 0 auto; min-height:82px; padding:7px max(calc((100vw - 1120px) / 2), 4.5vw); color:var(--brand-charcoal); background:#fff; box-shadow:0 2px 12px #163b5912; }
.register-page .brand { color:var(--brand-charcoal); }
.register-page .brand-subtitle { color:#314754; }
.register-page .topbar nav a { color:#17324b; }
.register-page .nav-pill { border-color:var(--brand-blue); color:var(--brand-blue)!important; }
.register-page .topbar .nav-primary { border-color:var(--brand-green); color:#fff!important; background:var(--brand-green); }
.register-page .main-nav a:hover,.register-page .main-nav a[aria-current="page"] { border-color:var(--brand-gold); }
.register-page>main.container { width:min(1120px,94%); flex:1 0 auto; display:flex; flex-direction:column; align-items:stretch; justify-content:center; padding:18px 0; }
.registration-layout { position:relative; isolation:isolate; width:100%; min-height:590px; display:grid; grid-template-columns:1fr .98fr; gap:16px; }
.registration-layout::before,.registration-layout::after { position:absolute; z-index:-1; content:""; pointer-events:none; }
.registration-layout::before { width:150px; height:190px; right:-62px; top:-55px; border-radius:0 0 0 100%; background:linear-gradient(140deg,var(--brand-gold) 0 28%,var(--brand-green) 28% 55%,var(--brand-blue) 55%); opacity:.92; }
.registration-layout::after { width:155px; height:135px; left:-85px; bottom:-54px; border-radius:0 100% 0 0; background:linear-gradient(40deg,var(--brand-blue) 0 30%,var(--brand-green) 30% 63%,var(--brand-gold) 63%); opacity:.75; }
.registration-welcome,.registration-card { position:relative; overflow:hidden; min-width:0; border:1px solid #d5e8f3; border-radius:14px; background:#fff; box-shadow:0 8px 26px #103d6012; }
.registration-welcome { display:flex; flex-direction:column; align-items:flex-start; padding:26px 30px; background:linear-gradient(135deg,#fff 8%,#f0f9ff 66%,#e9f4f9); }
.registration-welcome::after { position:absolute; z-index:0; content:""; width:250px; height:470px; right:-128px; top:90px; border-radius:49%; transform:rotate(24deg); background:linear-gradient(145deg,var(--brand-gold) 0 20%,#fff 20% 22%,var(--brand-green) 22% 43%,#fff 43% 45%,var(--brand-blue) 45% 72%,#fff 72% 74%,#0a4f91 74%); opacity:.92; }
.welcome-logo,.welcome-kicker,.registration-welcome h1,.registration-welcome>p,.welcome-benefit,.welcome-signoff { position:relative; z-index:1; }
.welcome-logo { width:min(190px,100%); height:auto; object-fit:contain; object-position:left center; margin:0 0 8px; }
.welcome-kicker { color:var(--brand-blue); text-transform:uppercase; font-weight:800; letter-spacing:.14em; font-size:.88rem; }
.registration-welcome h1 { margin:0; color:var(--brand-charcoal); font-size:clamp(1.8rem,2.8vw,2.4rem); line-height:1.08; letter-spacing:-.04em; }
.registration-welcome h1 .kbs-word { font-size:.9em; }
.registration-welcome>p { max-width:365px; margin:14px 0 12px; color:#31577b; font-size:.95rem; }
.welcome-benefit { display:flex; align-items:center; gap:13px; margin:9px 0; }
.benefit-icon { width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:50%; color:#fff; font-size:1.25rem; font-weight:800; box-shadow:0 4px 10px #172a371b; }
.benefit-blue { background:var(--brand-blue); }
.benefit-green { background:var(--brand-green); }
.benefit-gold { background:var(--brand-gold); }
.welcome-benefit strong,.welcome-benefit small { display:block; }
.welcome-benefit strong { color:#123e70; font-size:.84rem; }
.welcome-benefit small { margin-top:2px; color:#456783; font-size:.76rem; }
.welcome-signoff { margin-top:auto; padding-top:16px; color:#173c60; font-size:1.05rem; font-style:italic; line-height:1.3; }
.welcome-signoff::after { display:block; width:84px; height:3px; margin-top:7px; content:""; background:linear-gradient(90deg,var(--brand-blue) 0 38%,var(--brand-green) 38% 70%,var(--brand-gold) 70%); }
.registration-card { align-self:center; padding:25px 30px 19px; }
.registration-kicker { color:var(--brand-green); text-transform:uppercase; font-size:.76rem; letter-spacing:.1em; font-weight:850; }
.registration-card h2 { margin:2px 0 1px; color:#12375e; font-size:clamp(1.25rem,1.8vw,1.45rem); line-height:1.2; letter-spacing:-.03em; }
.registration-intro { margin:4px 0 12px; color:#426488; font-size:.84rem; line-height:1.4; }
.registration-card>label:not(.privacy-check) { margin:8px 0 3px; color:#193a5b; font-size:.76rem; }
.registration-input { display:flex; align-items:center; gap:10px; height:39px; padding:0 11px; border:1px solid #d5e2eb; border-radius:9px; background:#fff; box-shadow:0 1px 3px #153d5d08; }
.registration-input:focus-within { border-color:var(--brand-blue); box-shadow:0 0 0 3px #0878d11a; }
.registration-input>span { width:17px; flex:none; color:#274b69; text-align:center; font-size:1rem; }
.registration-input input { min-width:0; height:100%; padding:0; border:0; outline:0; background:transparent; color:#17324b; font-size:.78rem; box-shadow:none; }
.registration-input input::placeholder { color:#94a9bb; }
.password-help { display:block; margin:3px 0 5px 27px; color:#63809a; font-size:.65rem; }
.registration-card .privacy-check { display:flex; align-items:flex-start; gap:7px; margin:11px 0; color:#365675; font-size:.71rem; line-height:1.4; font-weight:500; }
.registration-card .privacy-check input { flex:none; margin:2px 0 0; accent-color:var(--brand-green); }
.create-account-button { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; min-height:40px; border-radius:24px; background:linear-gradient(100deg,var(--brand-green),var(--brand-blue)); font-size:.82rem; box-shadow:0 5px 14px #0878d124; }
.create-account-button:hover { filter:brightness(1.04); transform:translateY(-1px); }
.registration-login { display:flex; justify-content:center; align-items:center; gap:7px; margin:12px 0 8px; padding-top:10px; border-top:1px solid #e6edf2; color:#526d83; font-size:.68rem; }
.registration-login a { color:var(--brand-blue); font-weight:750; text-decoration:none; }
.secure-note { padding-top:8px; border-top:1px solid #edf1f4; color:#47708b; text-align:center; font-size:.65rem; }
.secure-note span { color:var(--brand-blue); margin-right:4px; }
.vacancy-closed-card { display:flex; flex-direction:column; justify-content:center; min-height:340px; padding:36px; }
.vacancy-closed-card p { margin:10px 0 20px; color:#426488; }
.vacancy-closed-card .button { align-self:flex-start; }
.register-page footer { flex:0 0 auto; background:linear-gradient(105deg,#064c87,var(--brand-blue) 58%,#075287); }
.register-page footer .container { width:min(1120px,94%); }
.register-page .footer-inner { min-height:52px; }
.auth-page { height:100vh; overflow:hidden; display:flex; flex-direction:column; background:linear-gradient(135deg,#edfaff 0%,#ffffff 45%,#e5f5fc 100%); }
.auth-page::before,.auth-page::after { position:fixed; z-index:-1; content:""; pointer-events:none; }.auth-page::before { width:280px; height:170px; right:-68px; top:74px; border-radius:0 0 0 100%; transform:rotate(-7deg); background:linear-gradient(135deg,var(--brand-green) 0 37%,var(--brand-gold) 37% 62%,var(--brand-blue) 62%); }.auth-page::after { width:430px; height:180px; right:-100px; bottom:-95px; border-radius:100% 0 0 0; transform:rotate(-14deg); background:linear-gradient(120deg,var(--brand-blue) 0 34%,var(--brand-green) 34% 68%,var(--brand-gold) 68%); }
.auth-page .topbar { flex:0 0 auto; min-height:76px; padding:6px max(calc((100vw - 1440px) / 2), 9vw); color:#16385e; background:#fff; box-shadow:0 2px 12px #163b5912; }
.auth-page .brand { color:#16385e; }
.auth-page .brand-subtitle,.auth-page .topbar nav a { color:#173b68; }
.auth-page .nav-pill { border-color:var(--brand-blue); color:var(--brand-blue)!important; }
.auth-page .nav-current { cursor:default; }
.auth-page .topbar .nav-primary { border-color:var(--brand-green); color:#fff!important; background:var(--brand-green); }
.auth-page>main.container { width:min(1440px,92%); min-height:0; flex:1 1 auto; display:flex; align-items:center; padding:20px 0; }
.auth-page footer { display:none; }
.login-layout { position:relative; isolation:isolate; width:100%; height:100%; min-height:0; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:54px; }
.login-layout::before,.login-layout::after { position:absolute; z-index:-1; content:""; pointer-events:none; }
.login-layout::before { width:240px; height:165px; top:-78px; left:-150px; border-radius:0 0 100% 0; transform:rotate(-12deg); background:linear-gradient(130deg,var(--brand-green) 0 58%,var(--brand-gold) 58% 73%,var(--brand-blue) 73%); opacity:.92; }
.login-layout::after { width:370px; height:180px; bottom:-86px; left:19%; border-radius:56% 56% 0 0; transform:rotate(-17deg); background:linear-gradient(100deg,var(--brand-blue) 0 25%,var(--brand-green) 25% 70%,var(--brand-gold) 70%); opacity:.9; }
.login-welcome { position:relative; padding:18px 0; color:#103d70; }
.login-welcome::after { position:absolute; z-index:-1; width:340px; height:580px; right:-70px; top:-35px; content:""; border-radius:45%; transform:rotate(30deg); background:linear-gradient(140deg,transparent 0 26%,#dff5ff 26% 44%,transparent 44% 52%,#ebf8ed 52% 67%,transparent 67%); opacity:.78; }
.login-kicker { display:inline-block; padding-bottom:9px; border-bottom:3px solid transparent; border-image:linear-gradient(90deg,var(--brand-blue) 0 42%,var(--brand-green) 42% 78%,var(--brand-gold) 78%) 1; color:#174579; text-transform:uppercase; letter-spacing:.22em; font-size:.78rem; font-weight:850; }
.login-welcome h1 { margin:20px 0 16px; max-width:600px; color:#123f72; font-size:clamp(1.9rem,3vw,2.5rem); line-height:1.08; letter-spacing:-.045em; }
.login-welcome h1 .kbs-word { font-size:.94em; }
.login-welcome>p { max-width:555px; margin:0; color:#29547f; font-size:1.02rem; line-height:1.58; }
.login-benefits { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; max-width:680px; margin-top:32px; }
.login-benefits>div { min-width:0; padding-right:11px; border-right:1px solid #a9c7df; }
.login-benefits>div:last-child { border-right:0; }
.login-benefits span { display:grid; place-items:center; width:43px; height:43px; margin-bottom:10px; border-radius:50%; color:#0d5b9f; background:#dff1f8; font-size:1.2rem; font-weight:800; }
.login-benefits>div:nth-child(2) span { color:#1375bb; background:#dcefff; }.login-benefits>div:nth-child(3) span { color:#397f26; background:#fff3cd; }.login-benefits>div:nth-child(4) span { color:#1470b4; background:#dff3fa; }
.login-benefits strong,.login-benefits small { display:block; }.login-benefits strong { color:#133d70; font-size:.78rem; line-height:1.25; }.login-benefits small { margin-top:6px; color:#456a8a; font-size:.67rem; line-height:1.35; }
.login-signoff { display:flex; align-items:center; gap:18px; margin-top:51px; color:#174b80; font-family:Georgia,serif; font-size:1.25rem; font-style:italic; }.login-signoff i { width:1px; height:21px; background:#9fc3df; }.login-signoff::after { position:absolute; bottom:9px; left:75px; width:210px; height:3px; content:""; background:linear-gradient(90deg,var(--brand-blue) 0 33%,var(--brand-green) 33% 67%,var(--brand-gold) 67%); }
.login-card { width:min(100%,666px); justify-self:end; max-height:100%; padding:37px 57px 45px; border:1px solid #e2edf3; border-radius:15px; background:#ffffffef; box-shadow:0 16px 36px #0e47731c; }
.login-logo { display:block; width:min(350px,82%); height:105px; margin:0 auto 15px; object-fit:contain; }.login-brand { display:flex; flex-direction:column; align-items:center; }.login-brand img { display:block; width:min(135px,100%); height:auto; object-fit:contain; }.login-card h2 { margin:0; color:#103f70; font-size:1.95rem; line-height:1.2; }.login-intro { margin:5px 0 22px; color:#527399; font-size:1rem; }.login-role { margin-bottom:7px; color:var(--brand-green); font-size:.66rem; }
.login-card>label { margin:15px 0 6px; color:#163d6b; font-size:.82rem; font-weight:750; }.login-input { display:flex; align-items:center; gap:11px; height:49px; padding:0 14px; border:1px solid #c8daea; border-radius:8px; background:#fff; }.login-input:focus-within { border-color:var(--brand-blue); box-shadow:0 0 0 3px #0878d114; }.login-input>span { width:18px; flex:none; color:#1d568c; text-align:center; }.login-input input { min-width:0; height:100%; padding:0; border:0; outline:0; background:transparent; color:#17324b; font-size:.9rem; }.login-input input::placeholder { color:#9aafc7; }
.login-options { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:19px 0 24px; font-size:.82rem; }.login-options label { display:flex; align-items:center; gap:7px; margin:0; color:#294f78; font-weight:600; }.login-options input { width:auto; margin:0; accent-color:var(--brand-blue); }.login-options a,.manager-switch a { color:#0878d1; font-weight:750; text-decoration:none; }
.login-button { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; min-height:53px; border-radius:9px; background:linear-gradient(100deg,#52c42d,var(--brand-blue)); font-size:1rem; box-shadow:0 8px 18px #0878d12b; }.login-button:hover { filter:brightness(1.04); transform:translateY(-1px); }.login-button span { font-size:1.45rem; font-weight:400; }.login-divider { display:flex; align-items:center; gap:15px; margin:25px 0; color:#315a85; font-size:.8rem; }.login-divider::before,.login-divider::after { height:1px; flex:1; content:""; background:#d2e1ec; }.create-login-account { display:flex; justify-content:center; align-items:center; gap:11px; min-height:52px; border:2px solid #1685f2; border-radius:9px; color:#0878d1; font-size:.9rem; font-weight:800; text-decoration:none; }.create-login-account:hover { color:#fff; background:var(--brand-blue); }.manager-switch { margin:17px 0 0; color:#55738c; text-align:center; font-size:.78rem; }
@media (min-width:701px) and (max-height:760px) {
  html:has(body.auth-page) { height:100%; overflow:hidden; }
  .auth-page .topbar { min-height:72px; padding-top:5px; padding-bottom:5px; }
  .auth-page .brand-logo { width:66px; height:60px; }
  .auth-page>main.container { padding:8px 0; }
  .login-layout { gap:38px; }
  .login-welcome { padding:0; }
  .login-welcome h1 { margin:11px 0 8px; font-size:clamp(1.8rem,2.7vw,2.35rem); }
  .login-welcome>p { font-size:.92rem; line-height:1.45; }
  .login-benefits { margin-top:16px; }
  .login-benefits span { width:36px; height:36px; margin-bottom:6px; font-size:1rem; }
  .login-benefits small { margin-top:3px; }
  .login-signoff { margin-top:17px; font-size:1.08rem; }
  .login-signoff::after { display:none; }
  .login-card { padding:17px 38px 18px; }
  .login-logo { height:54px; margin-bottom:4px; }
  .login-card h2 { font-size:1.55rem; }
  .login-intro { margin:2px 0 9px; font-size:.86rem; }
  .login-card>label { margin:7px 0 3px; }
  .login-input { height:39px; }
  .login-options { margin:10px 0 12px; }
  .login-button { min-height:41px; }
  .login-divider { margin:11px 0; }
  .create-login-account { min-height:40px; }
  .manager-switch { margin-top:8px; }
}
@media(max-width:950px) { .auth-page>main.container { width:min(1120px,94%); padding:20px 0; }.login-layout { gap:28px; }.login-card { padding:30px 35px; }.login-benefits { grid-template-columns:repeat(2,1fr); max-width:440px; }.login-benefits>div:nth-child(2) { border-right:0; }.login-signoff { margin-top:30px; } }
@media(max-width:700px) { .auth-page { height:auto; min-height:100vh; overflow:auto; }.auth-page .topbar { padding:8px 4%; gap:8px 15px; }.auth-page .main-nav { order:3; flex-basis:100%; }.auth-page>main.container { width:92%; align-items:flex-start; padding:13px 0 25px; }.login-layout { grid-template-columns:1fr; min-height:0; gap:12px; }.login-layout::before { left:-145px; top:-65px; }.login-layout::after { display:none; }.login-welcome { padding:37px 0 18px; }.login-welcome h1 { margin:14px 0 10px; font-size:2.45rem; }.login-welcome>p { font-size:.88rem; }.login-benefits { grid-template-columns:repeat(2,1fr); margin-top:20px; }.login-benefits>div:nth-child(2) { border-right:0; }.login-signoff { display:none; }.login-card { justify-self:stretch; padding:27px 21px; }.login-brand { margin-bottom:8px; }.login-brand img { width:min(175px,100%); }.login-logo { height:76px; margin-bottom:8px; }.login-card h2 { font-size:1.65rem; }.login-intro { margin-bottom:18px; }.login-options { margin:16px 0 20px; } }

/* Reference login composition */
@media (min-width:701px) {
  .auth-page { background:linear-gradient(135deg,#effaff 0%,#fff 48%,#e8f6fc 100%); }
  .auth-page .topbar { min-height:76px; padding:5px max(calc((100vw - 1300px) / 2), 7vw); }
  .auth-page .brand-logo { width:76px; height:70px; }
  .auth-page>main.container { width:min(1300px,88%); padding:20px 0; }
  .login-layout { grid-template-columns:minmax(0,1fr) 602px; gap:76px; }
  .login-layout::before { width:220px; height:155px; top:-105px; left:-165px; }
  .login-layout::after { width:540px; height:160px; bottom:-100px; left:22%; }
  .login-welcome { padding:18px 0 12px; }
  .login-welcome::after { right:-94px; top:-80px; opacity:.55; }
  .login-kicker { padding-bottom:10px; font-size:.76rem; }
  .login-welcome h1 { margin:19px 0 17px; font-size:3.35rem; line-height:1.08; }
  .login-welcome>p { max-width:485px; font-size:.95rem; line-height:1.55; }
  .login-benefits { max-width:625px; gap:10px; margin-top:27px; }
  .login-benefits>div { padding-right:10px; }.login-benefits span { width:43px; height:43px; margin-bottom:8px; }
  .login-benefits strong { font-size:.77rem; }.login-benefits small { font-size:.66rem; }
  .login-signoff { margin-top:47px; font-size:1.2rem; }.login-signoff::after { bottom:6px; }
  .login-card { width:602px; padding:33px 50px 40px; border-radius:14px; box-shadow:0 12px 32px #17476714; }
  .login-logo { display:none; }
  .login-brand { display:flex; justify-content:center; margin:0 auto 8px; }
  .login-brand img { display:block; width:min(135px,100%); height:auto; object-fit:contain; }
  .login-card h2 { font-size:1.82rem; }.login-intro { margin:4px 0 20px; font-size:.95rem; }
  .login-card>label { margin:13px 0 5px; }.login-input { height:47px; }
  .login-options { margin:17px 0 21px; }.login-button { min-height:51px; }.login-divider { margin:23px 0; }.create-login-account { min-height:50px; }
}

/* Medium desktop/tablet: keep the sign-in interface compact instead of stretching across the page. */
@media (min-width:701px) and (max-width:1100px) {
  .auth-page>main.container { width:min(620px,92%); padding:16px 0; }
  .login-layout { display:grid; grid-template-columns:1fr; gap:0; align-items:start; }
  .login-welcome { display:none; }
  .login-card { width:min(500px,100%); justify-self:center; padding:20px 32px 24px; }
  .login-brand img { width:94px; }
  .login-card h2 { font-size:1.52rem; }
  .login-intro { margin-bottom:11px; font-size:.84rem; }
  .login-card>label { margin-top:8px; }
  .login-input { height:40px; }
  .login-options { margin:11px 0 14px; }
  .login-button { min-height:43px; }
  .login-divider { margin:14px 0; }
  .create-login-account { min-height:42px; }
}

/* Keep the applicant registration call-to-action visible directly below “New here?”. */
@media (min-width:1101px) {
  .auth-page>main.container { padding:12px 0; }
  .login-card { padding:18px 42px 20px; }
  .login-brand { margin-bottom:2px; }.login-brand img { width:82px; }
  .login-card h2 { font-size:1.52rem; }.login-intro { margin:2px 0 10px; font-size:.84rem; }
  .login-card>label { margin:7px 0 3px; font-size:.77rem; }.login-input { height:39px; }
  .login-options { margin:10px 0 12px; }.login-button { min-height:42px; }
  .login-divider { margin:12px 0; }.create-login-account { min-height:42px; font-size:.83rem; }
  .manager-switch { margin:8px 0 0; font-size:.7rem; }
  .login-kicker { padding-bottom:7px; font-size:.67rem; letter-spacing:.19em; }
  .login-welcome h1 { max-width:455px; margin:12px 0 10px; font-size:clamp(2rem,2.9vw,2.55rem); line-height:1.12; }
  .login-welcome>p { max-width:510px; font-size:.82rem; line-height:1.45; }
  .login-benefits { margin-top:18px; }.login-benefits strong { font-size:.68rem; }.login-benefits small { font-size:.59rem; }
  .login-signoff { margin-top:22px; font-size:.98rem; }
}

/* Narrow viewports keep a portrait card instead of a full-width landscape panel. */
@media (max-width:700px) {
  .auth-page>main.container { width:min(460px,92%); margin:0 auto; }
  .login-layout { justify-items:center; }
  .login-card { width:min(420px,100%); justify-self:center; padding:18px 22px 20px; }
  .login-brand { margin:0 auto 3px; }.login-brand img { width:78px; }
  .login-card h2 { font-size:1.48rem; }.login-intro { margin:2px 0 10px; font-size:.84rem; }
  .login-card>label { margin:8px 0 3px; font-size:.76rem; }.login-input { height:39px; }
  .login-options { margin:10px 0 12px; font-size:.76rem; }.login-button { min-height:42px; }
  .login-divider { margin:12px 0; }.create-login-account { min-height:42px; font-size:.82rem; }
  .manager-switch { margin-top:8px; font-size:.68rem; }
}

/* Browser zoom can create a short effective viewport; preserve the whole sign-in card. */
@media (min-width:701px) and (max-height:800px) {
  .auth-page>main.container { padding:4px 0; }
  .login-layout { align-items:center; }
  .login-card { width:min(500px,100%); padding:12px 32px 14px; }
  .login-brand { margin:0 auto 0; }.login-brand img { width:58px; }
  .login-card h2 { font-size:1.34rem; }.login-intro { margin:1px 0 6px; font-size:.78rem; }
  .login-card>label { margin:5px 0 2px; font-size:.7rem; }.login-input { height:35px; padding:0 10px; }
  .login-input input { font-size:.78rem; }.login-options { margin:7px 0 8px; font-size:.72rem; }
  .login-button { min-height:38px; font-size:.86rem; }.login-divider { margin:8px 0; font-size:.7rem; }
  .create-login-account { min-height:37px; font-size:.75rem; }.manager-switch { margin:5px 0 0; font-size:.62rem; }
}

/* Desktop applicant sign-in: a calm, branded workspace composition. */
@media (min-width:1101px) {
  html:has(body.auth-page) { min-height:100%; background:#edf7fc; }
  .auth-page {
    min-height:100vh!important;
    background:
      linear-gradient(90deg, #f7fcff 0%, #f7fcff 47%, #edf8fc 100%);
  }
  .auth-page::before {
    display:block;
    position:fixed;
    inset:76px 0 0;
    z-index:-2;
    width:auto;
    height:auto;
    border-radius:0;
    transform:none;
    background:
      linear-gradient(90deg, #f7fcffef 0%, #f7fcffe8 42%, #ffffffb8 63%, #eaf7fc99 100%),
      url("kbs-career-art.jpg") center bottom / cover no-repeat;
    opacity:1;
  }
  .auth-page::after {
    z-index:-1;
    width:48vw;
    height:138px;
    right:16vw;
    bottom:-75px;
    border-radius:55% 55% 0 0;
    transform:rotate(-7deg);
    background:linear-gradient(100deg,#0878d1 0 28%,#4a9d22 28% 69%,#f5aa00 69%);
    opacity:.78;
  }
  .auth-page .topbar {
    min-height:76px;
    padding:6px clamp(38px,4vw,68px);
    border-bottom:1px solid #e1edf3;
    box-shadow:0 2px 13px #163b590e;
  }
  .auth-page .brand-logo { width:88px; height:80px; }
  .auth-page>main.container { width:min(1440px,90%); padding:16px 0; }
  .auth-page .login-layout {
    grid-template-columns:minmax(0,1fr) 596px;
    gap:clamp(56px,7vw,124px);
  }
  .auth-page .login-welcome { max-width:610px; }
  .auth-page .login-kicker { padding-bottom:9px; font-size:.74rem; }
  .auth-page .login-welcome h1 { max-width:530px; margin:17px 0 16px; font-size:clamp(2.45rem,3.55vw,3.7rem); line-height:1.05; }
  .auth-page .login-welcome>p { max-width:560px; font-size:1rem; line-height:1.5; }
  .auth-page .login-benefits { max-width:650px; margin-top:31px; gap:18px; }
  .auth-page .login-benefits>div { padding-right:13px; }
  .auth-page .login-benefits span { width:58px; height:58px; margin-bottom:10px; font-size:1.35rem; }
  .auth-page .login-benefits strong { font-size:.8rem; }
  .auth-page .login-benefits small { font-size:.68rem; }
  .auth-page .login-signoff { margin-top:34px; }
  .auth-page .login-card {
    width:596px;
    padding:27px 46px 29px;
    border:1px solid #dfeaf0;
    border-radius:16px;
    background:#fffffff2;
    box-shadow:0 18px 40px #123c5d24;
  }
  .auth-page .login-brand { margin:0 auto 6px; }
  .auth-page .login-brand img { width:96px; }
  .auth-page .login-card h2 { font-size:1.72rem; }
  .auth-page .login-intro { margin:4px 0 15px; font-size:.91rem; }
  .auth-page .login-card>label { margin:10px 0 4px; }
  .auth-page .login-input { height:44px; border-radius:9px; }
  .auth-page .login-options { margin:13px 0 16px; }
  .auth-page .login-button { min-height:48px; border-radius:10px; }
  .auth-page .login-divider { margin:14px 0; }
  .auth-page .create-login-account { min-height:44px; }
}
@media (min-width:701px) and (max-height:800px) {
  .auth-page .topbar { min-height:72px; }.auth-page>main.container { padding:10px 0; }
  .login-layout { grid-template-columns:minmax(0,1fr) 560px; gap:54px; }.login-card { width:560px; padding:22px 42px 25px; }
  .login-brand { margin-bottom:5px; }
  .login-welcome h1 { font-size:2.85rem; margin:12px 0; }.login-benefits { margin-top:18px; }.login-signoff { margin-top:22px; }
  .login-card h2 { font-size:1.6rem; }.login-intro { margin-bottom:11px; }.login-card>label { margin:8px 0 3px; }.login-input { height:40px; }.login-options { margin:11px 0 13px; }.login-button { min-height:43px; }.login-divider { margin:13px 0; }.create-login-account { min-height:42px; }
}

/* Login notices must not become a second column beside the sign-in layout. */
.auth-page>main.container { position:relative; flex-direction:column; overflow:hidden; }
.auth-page .login-layout { min-width:0; flex:1 1 auto; }
.auth-page .notice { position:absolute; z-index:5; top:14px; left:0; width:min(440px,90%); margin:0; box-shadow:0 8px 22px #173b5e18; }
html:has(body.auth-page), body.auth-page { max-width:100%; overflow-x:hidden; }
.auth-page::before,.login-layout::before { display:none; }
@media(max-width:700px) { .auth-page .notice { position:static; width:100%; margin:0 0 12px; }.auth-page>main.container { overflow:visible; } }

/* Keep the desktop login content compact and aligned to a shared left edge. */
@media (min-width:701px) {
  .login-layout { align-items:start; }
  .login-welcome { align-self:start; margin-top:58px; padding:0; text-align:left; }
  .login-kicker,.login-welcome h1,.login-welcome>p,.login-signoff { margin-left:0; }
  .login-welcome h1 { max-width:510px; margin-top:15px; margin-bottom:12px; font-size:clamp(1.8rem,2.8vw,2.35rem); line-height:1.1; }
  .login-welcome>p { max-width:510px; font-size:.9rem; line-height:1.5; }
  .login-benefits { justify-items:start; max-width:590px; margin-top:22px; }
  .login-benefits strong { font-size:.73rem; }.login-benefits small { font-size:.63rem; }
  .login-signoff { margin-top:30px; font-size:1.06rem; }
  .login-card { align-self:start; width:580px; padding:22px 46px 26px; }
  .login-brand { margin-bottom:4px; }.login-brand img { width:min(108px,100%); }
  .login-card h2 { font-size:1.62rem; }.login-intro { margin:3px 0 13px; font-size:.88rem; }
  .login-card>label { margin:9px 0 4px; font-size:.78rem; }.login-input { height:42px; }
  .login-options { margin:12px 0 15px; }.login-button { min-height:45px; }.login-divider { margin:15px 0; }.create-login-account { min-height:44px; }.manager-switch { margin-top:9px; }
}
@media (min-width:701px) {
  .auth-page { height:auto; min-height:100vh; overflow-x:hidden; overflow-y:auto; }
  .auth-page>main.container { overflow:visible; flex:1 0 auto; }
  .auth-page .login-layout { height:auto; min-height:0; flex:1 0 auto; }
  .auth-page .login-card { max-height:none; }
}
@media(max-width:850px) {
  .register-page .topbar { gap:8px 15px; }
  .registration-layout { grid-template-columns:1fr 1fr; gap:12px; }
  .registration-welcome { padding:22px; }
  .registration-card { padding:22px; }
  .registration-welcome::after { right:-175px; opacity:.65; }
}
@media(max-width:650px) {
  .register-page .topbar { padding:8px 4%; }
  .register-page .main-nav { order:3; }
  .register-page>main.container { width:92%; align-items:stretch; padding:14px 0; }
  .registration-layout { grid-template-columns:1fr; min-height:0; }
  .registration-welcome { min-height:310px; padding:20px; }
  .welcome-logo { width:min(175px,100%); height:auto; margin-bottom:8px; }
  .registration-welcome h1 { font-size:2.05rem; }
  .registration-welcome>p { max-width:70%; margin:8px 0; font-size:.82rem; }
  .welcome-benefit { margin:6px 0; }
  .benefit-icon { width:34px; height:34px; }
  .registration-welcome::after { width:180px; height:330px; right:-100px; top:60px; opacity:.52; }
  .welcome-signoff { display:none; }
  .registration-card { padding:22px 19px 17px; }
  .registration-card h2 { font-size:1.45rem; }
  .registration-closed .registration-welcome { min-height:300px; }
}
.landing-hero { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.08fr); align-items:center; gap:48px; min-height:430px; padding:24px 0 30px; }
.landing-copy { position:relative; z-index:1; max-width:540px; }
.landing-copy .hero-title { color:#172a37; }
.landing-copy h1 { margin:9px 0 12px; color:#172a37; font-size:clamp(1.6rem,2.4vw,1.95rem); line-height:1.12; letter-spacing:-.035em; }
.landing-copy>p { max-width:490px; margin:0 0 12px; color:#405d70; font-size:.9rem; }
.landing-copy .status-pill { margin-top:4px; font-size:.76rem; }
.landing-actions { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:16px; }
.landing-actions .apply-button { min-width:150px; font-size:.82rem; padding:8px 16px; }
.landing-secondary { color:#28526e; font-size:.88rem; font-weight:700; text-decoration-thickness:1px; text-underline-offset:4px; }
.landing-values { display:flex; flex-wrap:wrap; gap:22px; margin-top:22px; color:#36566d; font-size:.75rem; font-weight:650; }
.landing-values>span { display:flex; align-items:center; gap:7px; }
.value-dot { width:9px; height:9px; border-radius:50%; }
.value-dot.blue { background:var(--brand-blue); }
.value-dot.green { background:var(--brand-green); }
.value-dot.gold { background:var(--brand-gold); }
.landing-art { position:relative; display:flex; justify-content:center; align-items:center; min-width:0; height:340px; overflow:hidden; border:1px solid #d5e8f3; border-radius:14px; background:#e9f7ff; box-shadow:0 10px 24px #0878d114; }
.landing-art>img { display:block; width:100%; height:100%; object-fit:cover; }
.featured-vacancy { display:grid; grid-template-columns:1fr auto; align-items:center; gap:28px; margin:6px 0 22px; padding:17px 22px; border:1px solid #d8e6ec; border-radius:12px; background:#fff; box-shadow:0 6px 20px #172a3709; }
.featured-label { color:var(--brand-green); text-transform:uppercase; font-size:.69rem; letter-spacing:.12em; font-weight:850; }
.featured-copy h2 { margin:2px 0; color:#173b5b; font-size:1.05rem; }
.featured-copy p { margin:2px 0 0; color:#587184; font-size:.8rem; }
.featured-deadline { display:flex; flex-direction:column; padding-left:22px; border-left:1px solid #e0e9ed; }
.featured-deadline span,.featured-deadline small { color:#6b8190; font-size:.7rem; }
.featured-deadline strong { color:#193b56; font-size:.9rem; }
.featured-link { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid #d2e5ef; border-radius:7px; color:var(--brand-blue); font-size:.78rem; font-weight:750; text-decoration:none; white-space:nowrap; }
.featured-link:hover { border-color:var(--brand-blue); background:var(--brand-blue-pale); }
.vacancy-card[id],.vacancy-requirements,.vacancy-responsibilities { scroll-margin-top:24px; }
.vacancy-bullet-list { margin:8px 0 0; padding-left:20px; color:#315a82; }
.vacancy-bullet-list li { margin:5px 0; padding-left:2px; line-height:1.45; }
.vacancy-bullet-list li::marker { color:#0878d1; }
.no-vacancy-card { grid-template-columns:60px minmax(0,1fr) auto; gap:20px; min-height:88px; align-items:center; margin:4px 0 18px; padding:13px 20px; }
.featured-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:50%; color:var(--brand-green); background:#eaf7ec; }
.featured-icon svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.no-vacancy-card .featured-copy { padding-left:20px; border-left:1px solid #cfe0e8; }

/* KBS branded internal management workspace */
.management-session { min-height:100vh; display:flex; flex-direction:column; color:#173b5e; background:linear-gradient(135deg,#f1fbff 0%,#f8fcfd 48%,#edf8f2 100%); }
.management-session .topbar { min-height:76px; padding:6px max(calc((100vw - 1440px) / 2), 4vw); color:#13385f; background:#fff; box-shadow:0 2px 14px #113b5d14; }
.management-session .brand { color:#13385f; }.management-session .brand-logo { width:76px; height:70px; }.management-session .brand-subtitle { color:#3b5c73; }
.management-session .account-nav { margin-left:auto; }.signed-in { display:grid; justify-items:end; color:#3d617d; font-size:.82rem; line-height:1.25; }.signed-in-name { display:block; }.signed-in strong { color:#123d69; }.signed-in-role { display:block; margin-top:2px; color:var(--brand-green); font-size:.78rem; font-weight:750; }
.management-layout { width:min(1440px,96%); min-height:0; flex:1; display:grid; grid-template-columns:246px minmax(0,1fr); align-items:start; gap:24px; margin:22px auto; }
.management-sidebar { position:relative; overflow:hidden; padding:22px 13px; border:1px solid #d6e7ef; border-radius:15px; color:#173b5e; background:linear-gradient(160deg,#fff 0%,#f5fbff 74%,#edf8f0 100%); box-shadow:0 12px 26px #163d5d14; }.management-sidebar::after { position:absolute; right:-80px; bottom:-88px; width:180px; height:180px; content:""; border:22px solid #f6b500; border-radius:50%; opacity:.18; }.management-sidebar h2 { position:relative; z-index:1; margin:0 8px 19px; padding-bottom:12px; border-bottom:2px solid transparent; border-image:linear-gradient(90deg,#1c9af0 0 33%,#57b834 33% 67%,#f6b500 67%) 1; color:#123f70; font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; }
.management-sidebar nav { position:relative; z-index:1; display:grid; gap:7px; }.management-sidebar a { display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid transparent; border-radius:8px; color:#285779; font-size:.87rem; font-weight:650; text-decoration:none; }.management-sidebar a:hover { border-color:#cce5f3; color:#0878d1; background:#edf8ff; }.management-sidebar a[aria-current="page"] { border-color:#c8e7d1; color:#176a36; background:#eaf7ec; box-shadow:inset 3px 0 0 var(--brand-green); }.management-sidebar a span { width:18px; color:#0878d1; text-align:center; font-size:1.05rem; }.management-sidebar a[aria-current="page"] span { color:var(--brand-green); }.management-sidebar .notification-count { display:inline; width:auto; min-width:0; height:auto; margin-left:auto; padding:0 2px; border-radius:0; color:var(--brand-green); background:transparent; font-size:.72rem; font-weight:400; }.management-sidebar .management-logout { margin-top:12px; color:#a43731; background:#fff5f4; border-color:#f3d4d1; }.management-sidebar .management-logout span { color:#b64039; }
.management-main { min-width:0; padding:0 0 26px; }.management-main>h1 { margin:0 0 4px; color:#123f70; font-size:clamp(1.4rem,2.3vw,1.9rem); letter-spacing:-.03em; }.management-main>h1::after { display:block; width:135px; height:3px; margin-top:10px; content:""; background:linear-gradient(90deg,var(--brand-blue) 0 33%,var(--brand-green) 33% 67%,var(--brand-gold) 67%); }.management-main h2,.management-main h3 { color:#123f70; }.management-main .muted { color:#53718a; }
.management-main .card,.management-main .panel { margin:16px 0; padding:22px; border:1px solid #d9e8ef; border-radius:12px; background:#fff; box-shadow:0 7px 20px #133e6010; }.management-main .grid { gap:14px; }.management-main .grid>.card { margin:0; min-height:105px; border-top:4px solid var(--brand-blue); }.management-main .grid>.card:nth-child(3n+2) { border-top-color:var(--brand-green); }.management-main .grid>.card:nth-child(3n) { border-top-color:var(--brand-gold); }.management-main .grid>.card strong { display:block; margin-top:8px; color:#123f70; font-size:1.8rem; }
.management-main label { color:#173e69; font-size:.82rem; }.management-main input,.management-main select,.management-main textarea { border-color:#cbdde8; border-radius:7px; }.management-main input:focus,.management-main select:focus,.management-main textarea:focus { outline:0; border-color:var(--brand-blue); box-shadow:0 0 0 3px #0878d112; }.management-main button,.management-main .button { border-radius:7px; background:linear-gradient(100deg,var(--brand-green),var(--brand-blue)); }.management-main .button.secondary { color:#124b80; border:1px solid #bcdced; background:#eef8ff; }.management-main .button.danger { background:#b33a34; }.management-main .actions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.management-main form:not(.vacancy-form-wizard) { display:grid; gap:15px; }.management-main form:not(.vacancy-form-wizard)>label { display:block; margin:0; font-weight:700; line-height:1.4; }.management-main form:not(.vacancy-form-wizard)>label>input,.management-main form:not(.vacancy-form-wizard)>label>select,.management-main form:not(.vacancy-form-wizard)>label>textarea { display:block; width:100%; min-height:42px; margin-top:6px; }.management-main form:not(.vacancy-form-wizard)>label>textarea { min-height:110px; }.management-main .field-help { display:block; margin-top:5px; color:#71889a; font-size:.72rem; line-height:1.4; }
.management-main .table-wrap { overflow:auto; margin:16px 0; border:1px solid #d8e7ed; border-radius:11px; background:#fff; box-shadow:0 7px 20px #133e600d; }.management-main table { width:100%; border-collapse:collapse; font-size:.82rem; }.management-main th { padding:12px 14px; color:#fff; background:#123f70; text-align:left; white-space:nowrap; }.management-main th:first-child { border-top-left-radius:10px; }.management-main th:last-child { border-top-right-radius:10px; }.management-main td { padding:11px 14px; border-top:1px solid #e3edf2; color:#345b79; vertical-align:top; }.management-main tbody tr:nth-child(even) { background:#f6fbfd; }.management-main tbody tr:hover { background:#edf8f0; }.management-main td a { color:#0878d1; font-weight:750; }.management-main .badge { font-size:.76rem; }
.management-session footer { margin-top:auto; background:#fff; }.management-session footer .container { width:min(1440px,96%); }
.applicant-session .topbar { gap:24px; }
.applicant-session .account-nav { margin-left:auto; }
.applicant-session .signed-in { text-align:right; }
.applicant-layout { grid-template-columns:220px minmax(0,1fr); }
.applicant-sidebar h2 { font-size:.72rem; }
.applicant-sidebar a { font-size:.82rem; }
.applicant-sidebar a span { font-size:.95rem; }
.applicant-main { font-size:.9rem; }
.applicant-main>section { min-width:0; }
.applicant-main .applicant-dashboard { max-width:none; }
.dashboard-mobile-greeting { display:none; }
.dashboard-mobile-greeting h1 { margin:2px 0 5px; color:#123f70; font-size:clamp(1.35rem,2vw,1.7rem); line-height:1.25; }
.dashboard-mobile-greeting .eyebrow { margin:0 0 5px; }
.applicant-main .applicant-dashboard h1 { margin:2px 0 5px; color:#123f70; font-size:clamp(1.35rem,2vw,1.7rem); line-height:1.25; }
.applicant-main .applicant-dashboard>.muted { margin:0 0 16px; }
.applicant-profile-prompt { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 16px; padding:15px 18px; }
.applicant-profile-prompt h2,.applicant-profile-card h2,.applicant-profile-note h2 { margin:0 0 4px; color:#123f70; font-size:1rem; }
.applicant-profile-prompt p,.applicant-profile-note p { margin:0; color:#5a7489; font-size:.8rem; }
.applicant-profile-prompt .button { white-space:nowrap; }
.applicant-profile { max-width:820px!important; }
.applicant-profile-card,.applicant-profile-note { margin-top:16px; padding:20px; }
.applicant-profile-form { display:grid; gap:10px; max-width:620px; }
.applicant-profile-form label { margin:0; color:#173e69; font-size:.8rem; }
.applicant-profile-form input { margin-top:5px; }
.applicant-profile-form input[readonly] { color:#587187; background:#f3f8fb; }
.applicant-profile-form small { display:block; margin-top:4px; color:#6a8193; font-size:.7rem; font-weight:400; }
.applicant-profile-note { background:#f7fbfe; }
@media (max-width:620px) {
  .dashboard-mobile-greeting { display:block; width:92%; margin:14px auto 0; }
  .applicant-session .applicant-dashboard>.eyebrow,.applicant-session .applicant-dashboard>h1,.applicant-session .applicant-dashboard>p.muted { display:none; }
  .management-session .manager-welcome>div:first-child { display:none; }
  .management-session .admin-overview-heading>div:first-child>.admin-breadcrumb,.management-session .admin-overview-heading>div:first-child>h1 { display:none; }
  .applicant-profile-prompt { align-items:flex-start; flex-direction:column; }
  .applicant-profile-prompt .button { width:100%; text-align:center; }
}
.applicant-main .notification-center { max-width:none; margin:0; padding:0 0 20px; }
.applicant-session footer { margin-top:auto; background:#fff; }
.applicant-session footer .container { width:min(1440px,96%); }
.manager-welcome { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(240px,.7fr); align-items:center; gap:18px; margin:0 0 16px; }
.management-main .section-heading-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.management-main .section-heading-row h2 { margin:0; }
.management-main .section-heading-row .muted { margin:5px 0 12px; }
.management-main .audit-actions { display:grid; justify-items:end; gap:8px; }
.management-main form.audit-retention-form,.management-main form.audit-clear-form { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
.management-main .audit-retention-form label { white-space:nowrap; }
.management-main .audit-retention-form select { min-height:36px; }
.management-main .audit-retention-form button { min-height:36px; padding:7px 12px; white-space:nowrap; }
.manager-welcome h1 { margin:2px 0 4px; color:#123f70; font-size:clamp(1.45rem,2.4vw,2rem); letter-spacing:-.03em; }
.manager-welcome h1::after { display:none; }
.manager-welcome p { margin:0; color:#53718a; font-size:.86rem; }
.manager-welcome .manager-eyebrow { color:var(--brand-blue); font-size:.68rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.manager-role-card { position:relative; overflow:hidden; display:grid; gap:3px; min-height:86px; padding:16px 19px; border:1px solid #cfe5f2; border-radius:12px; background:linear-gradient(110deg,#edf8ff,#fff 67%,#eff8e9); }
.manager-role-card::after { position:absolute; top:-46px; right:-42px; width:125px; height:165px; content:""; transform:rotate(35deg); background:linear-gradient(130deg,#4a9d2260 0 37%,#0878d180 37% 70%,transparent 70%); }
.manager-role-card span,.manager-role-card small { color:#53718a; font-size:.7rem; }
.manager-role-card strong { color:#123f70; font-size:1rem; }
.manager-role-card small,.manager-role-card strong,.manager-role-card span { position:relative; z-index:1; }
.manager-metrics { grid-template-columns:repeat(5,minmax(0,1fr)); margin:12px 0; }
.management-main .grid.manager-metrics>.manager-metric { position:relative; min-height:106px; padding:17px 15px 14px 54px; }
.manager-metrics .manager-metric-link { display:block; cursor:pointer; color:inherit; text-decoration:none; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; }.manager-metrics .manager-metric-link:hover { transform:translateY(-2px); border-color:#b9ddec; box-shadow:0 7px 18px #173b6818; }.manager-metrics .manager-metric-link:focus-visible { outline:3px solid #0878d1; outline-offset:2px; }
.manager-metric .manager-metric-icon { position:absolute; top:17px; left:15px; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#fff; background:var(--brand-blue); font-size:.8rem; }
.manager-metric:nth-child(2) .manager-metric-icon { background:var(--brand-green); }.manager-metric:nth-child(3) .manager-metric-icon { background:var(--brand-gold); }.manager-metric:nth-child(4) .manager-metric-icon { background:#7c42d8; }.manager-metric:nth-child(5) .manager-metric-icon { background:#08a98c; }
.management-main .grid.manager-metrics>.manager-metric strong { margin-top:5px; font-size:1.55rem; }
.manager-quick-actions { display:grid; grid-template-columns:minmax(150px,.4fr) minmax(0,1fr); align-items:center; gap:14px; }
.manager-quick-actions h2 { margin:0; font-size:1.05rem; }.manager-quick-actions p { margin:3px 0 0; font-size:.77rem; }.manager-quick-actions .actions { margin:0; }
.management-search { display:flex; flex:1 1 270px; max-width:360px; min-width:190px; height:36px; border:1px solid #d5e5ee; border-radius:20px; background:#f6fbff; }
.management-search input { width:100%; min-width:0; padding:7px 12px; border:0!important; border-radius:20px 0 0 20px!important; outline:0; color:#234d6e; background:transparent; font-size:.72rem; }
.management-search button { flex:none; width:38px; padding:0; border:0; border-radius:0 20px 20px 0!important; color:#0878d1; background:transparent!important; font-size:1.2rem; }
.management-search button:hover { color:#4a9d22; }.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:820px) { .management-session .topbar { min-height:82px; flex-wrap:wrap; gap:8px 14px; }.management-session .brand-logo { width:100px; height:96px; }.management-search { order:3; flex:1 0 100%; max-width:none; }.signed-in { display:none; }.management-layout { width:94%; grid-template-columns:1fr; gap:13px; margin:14px auto; }.management-sidebar { padding:13px; }.management-sidebar h2 { margin:0 5px 9px; }.management-sidebar nav { grid-template-columns:repeat(2,minmax(0,1fr)); }.management-sidebar .management-logout { margin-top:0; }.management-main { padding-top:0; }.management-main .card,.management-main .panel { padding:16px; }.management-main .section-heading-row { align-items:flex-start; flex-direction:column; }.management-main .audit-actions { justify-items:start; }.management-main form.audit-retention-form,.management-main form.audit-clear-form { justify-content:flex-start; } }
@media(max-width:500px) { .management-sidebar nav { grid-template-columns:1fr; }.management-main .grid { grid-template-columns:1fr; }.management-main .actions .button { width:100%; text-align:center; } }
@media(max-width:980px) { .manager-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:620px) { .manager-welcome { grid-template-columns:1fr; }.manager-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }.manager-quick-actions { grid-template-columns:1fr; } }
/* Keep management typography compact and readable across dashboard and detail pages. */
.management-session .management-sidebar h2 { font-size:.72rem; }
.management-session .management-sidebar a { font-size:.78rem; }
.management-session .management-sidebar a span { font-size:.9rem; }
.management-session .management-main { font-size:.86rem; }
.management-session .management-main>h1,
.management-session .manager-welcome h1 { font-size:clamp(1.25rem,1.8vw,1.55rem); line-height:1.25; }
.management-session .management-main h2 { font-size:1rem; }
.management-session .management-main h3 { font-size:.9rem; }
.management-session .manager-welcome { gap:14px; margin-bottom:12px; }
.management-session .manager-welcome p:not(.manager-eyebrow) { font-size:.78rem; }
.management-session .manager-role-card { min-height:74px; padding:12px 15px; }
.management-session .manager-role-card strong { font-size:.9rem; }
.management-session .manager-role-card span,
.management-session .manager-role-card small { font-size:.66rem; }
.management-session .management-main .card,
.management-session .management-main .panel { padding:17px; }
.management-session .management-main .grid>.card { min-height:86px; }
.management-session .management-main .grid>.card strong,
.management-session .management-main .grid.manager-metrics>.manager-metric strong { font-size:1.25rem; }
.management-session .manager-metrics { gap:10px; }
.management-session .management-main table { font-size:.76rem; }
.management-session .management-main th { padding:9px 11px; }
.management-session .management-main td { padding:8px 11px; }
.management-session .management-main label,
.management-session .management-main input,
.management-session .management-main select,
.management-session .management-main textarea,
.management-session .management-main button,
.management-session .management-main .button { font-size:.78rem; }
.management-session .vacancy-date-range { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.management-session .vacancy-date-range label { min-width:0; }
.management-session .vacancy-date-range input { width:100%; min-width:0; }
.management-session .signed-in { font-size:.76rem; }
.management-session .signed-in-role { font-size:.72rem; }
@media(max-width:620px) { .management-session .vacancy-date-range { grid-template-columns:1fr; gap:0; } }
.management-main .vacancy-page-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 14px; }
.management-main .vacancy-page-heading h1 { margin:2px 0 3px; color:#123f70; font-size:1.42rem; }
.management-main .vacancy-page-heading h1::after { display:none; }
.management-main .vacancy-page-heading p { margin:0; color:#53718a; font-size:.76rem; }
.management-main .vacancy-page-heading .vacancy-breadcrumb { margin-bottom:5px; color:#0878d1; font-size:.68rem; }
.vacancy-breadcrumb span { padding:0 5px; color:#9aafbd; }
.management-main .vacancy-editor-card { padding:0; overflow:hidden; }
.vacancy-form-wizard { display:block; }
.vacancy-stepper { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding:13px 18px; border-bottom:1px solid #e0ebf0; background:#fbfdfe; }
.management-main .vacancy-step { position:relative; display:flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:5px 8px; border:0; border-radius:0; color:#637e93; background:transparent; font-size:.73rem; font-weight:650; }
.management-main .vacancy-step:hover { color:#0878d1; background:transparent; }
.management-main .vacancy-step[aria-current="step"] { color:#075d9f; }
.vacancy-step span { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; color:#668197; background:#e8f0f4; font-size:.67rem; }
.management-main .vacancy-step[aria-current="step"] span { color:#fff; background:var(--brand-green); }
.management-main .vacancy-step.is-complete span { color:#fff; background:var(--brand-blue); }
.vacancy-step-panel { padding:18px 20px 16px; }
.vacancy-step-panel[hidden] { display:none; }
.management-main .vacancy-step-panel>h2 { margin:0 0 13px; padding-bottom:7px; border-bottom:2px solid #f1b728; font-size:.92rem; }
.vacancy-step-description { margin:-5px 0 14px; color:#617d91; font-size:.74rem; }
.vacancy-fields-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px 14px; }
.management-main .vacancy-fields-grid label,
.management-main .vacancy-step-panel>label { display:block; min-width:0; margin:0 0 14px; color:#234f72; font-size:.78rem; font-weight:700; line-height:1.35; }
.management-main .vacancy-fields-grid label>input,
.management-main .vacancy-fields-grid label>select,
.management-main .vacancy-step-panel>label>input,
.management-main .vacancy-step-panel>label>select { display:block; width:100%; min-width:0; height:42px; margin-top:6px; padding:8px 11px; }
.management-main .vacancy-step-panel>label>textarea { display:block; width:100%; min-height:112px; margin-top:6px; padding:10px 11px; resize:vertical; }
.management-main .vacancy-step-panel>label>small { display:block; margin-top:5px; color:#748b9b; font-size:.69rem; font-weight:400; line-height:1.4; }
.required-mark { color:#c54a3c; }
.vacancy-wide-field { grid-column:1/-1; }
.management-main .vacancy-date-range { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:14px 0; }
.management-main .vacancy-date-range label { display:block; color:#234f72; font-size:.78rem; font-weight:700; line-height:1.35; }
.management-main .vacancy-date-range input { display:block; width:100%; min-width:0; height:42px; margin-top:6px; padding:8px 11px; }
.vacancy-date-help { margin:3px 0 18px; padding:10px 12px; border-radius:7px; color:#275b80; background:#edf8ff; font-size:.72rem; }
.vacancy-wizard-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding-top:13px; border-top:1px solid #e6eef2; }
.management-main .vacancy-wizard-actions .button { min-height:34px; padding:7px 12px; font-size:.72rem; }
.management-main .vacancy-wizard-actions .button.secondary { background:#f7fbfd; }
.vacancy-save-actions { display:flex; flex-wrap:wrap; gap:8px; }
.management-main .posted-vacancies-card { margin-top:15px; padding:16px; }
.posted-vacancies-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.posted-vacancies-heading h2 { margin:0; font-size:.95rem; }
.posted-vacancies-heading p { margin:2px 0 0; color:#6b8293; font-size:.69rem; }
.management-main .posted-vacancies-heading .button { padding:7px 10px; font-size:.7rem; }
.management-main .posted-vacancies-table { min-width:850px; font-size:.68rem; }
.management-main .posted-vacancies-table th { padding:9px 10px; }
.management-main .posted-vacancies-table td { padding:8px 10px; white-space:nowrap; }
.management-main .vacancy-row-actions { display:flex; align-items:center; gap:8px; }.management-main .vacancy-row-actions form { display:inline; }.management-main .vacancy-row-actions button { min-height:28px; padding:4px 8px; border-radius:5px; font-size:.67rem; white-space:nowrap; }.management-main .vacancy-row-actions small { color:#668197; font-size:.67rem; }
.vacancy-status-badge { display:inline-block; padding:3px 8px; border-radius:20px; color:#fff; background:#348f47; font-size:.64rem; font-weight:750; }
.vacancy-status-badge.open { color:#fff; background:#348f47; }
.vacancy-status-badge.upcoming,.vacancy-status-badge.scheduled { color:#8a5d00; background:#fff1cf; }
.vacancy-status-badge.draft { color:#8a5d00; background:#fff1cf; }
.vacancy-status-badge.closed { color:#a12d2a; background:#fde4e2; }
.vacancy-status-badge.unpublished { color:#647887; background:#e7edf1; }
@media(max-width:900px) { .vacancy-fields-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) {
  .vacancy-stepper { padding:9px 6px; }
  .management-main .vacancy-step { flex-direction:column; gap:3px; font-size:.64rem; }
  .vacancy-step-panel { padding:14px 13px; }
  .vacancy-fields-grid { grid-template-columns:1fr; gap:8px; }
  .management-main .vacancy-date-range { grid-template-columns:1fr; gap:8px; }
  .posted-vacancies-heading { align-items:flex-start; flex-direction:column; }
  .vacancy-save-actions { justify-content:flex-end; }
}
@media(max-width:850px) {
  .landing-hero { grid-template-columns:1fr 1fr; gap:20px; min-height:340px; }
  .landing-copy h1 { font-size:clamp(1.6rem,2.5vw,1.9rem); }
  .landing-art { height:280px; }
  .featured-vacancy { gap:16px; }
}
.topbar,.register-page .topbar,.auth-page .topbar,.management-session .topbar {
  padding-left:clamp(16px,3vw,48px);
  padding-right:clamp(16px,3vw,48px);
}
@media(max-width:650px) {
  .register-page { overflow-x:hidden; }
  .register-page>main.container { overflow:hidden; }
  .registration-layout { overflow:hidden; }
  .registration-layout::before { right:-95px; }
  .registration-layout::after { left:-100px; }
  .landing-hero { grid-template-columns:1fr; gap:0; padding:24px 0 14px; }
  .landing-copy { max-width:none; }
  .landing-copy h1 { font-size:clamp(1.5rem,5.5vw,1.9rem); }
  .landing-copy>p { font-size:.88rem; }
  .landing-values { margin-top:19px; }
  .landing-art { grid-row:1; width:100%; height:auto; aspect-ratio:1.9; margin-bottom:16px; }
  .featured-vacancy { grid-template-columns:1fr auto; gap:12px; padding:15px; }
  .no-vacancy-card { grid-template-columns:48px minmax(0,1fr); gap:12px; padding:15px; }
  .featured-icon { width:46px; height:46px; }
  .featured-icon svg { width:24px; height:24px; }
  .no-vacancy-card .featured-copy { grid-column:2; padding-left:0; border-left:0; }
  .no-vacancy-card .featured-link { grid-column:1/-1; grid-row:auto; justify-self:start; }
  .featured-copy { grid-column:1/-1; }
  .featured-deadline { grid-column:1; padding-left:0; border-left:0; }
  .featured-link { grid-column:2; grid-row:2; white-space:normal; }
}

/* The registration form is intentionally a complete, single desktop view.
   Phone layouts may still scroll so no field becomes inaccessible. */
@media (min-width:651px) {
  html:has(body.register-page),
  body.register-page { height:100%; overflow:hidden; }
  .register-page { height:100vh; min-height:0; overflow:hidden; }
  .register-page .topbar { min-height:64px; padding-top:3px; padding-bottom:3px; }
  .register-page .brand-logo { width:58px; height:54px; }
  .register-page>main.container { min-height:0; flex:1 1 auto; justify-content:center; padding:6px 0; }
  .register-page>main.container>.notice { flex:0 0 auto; margin:0 0 7px; padding:8px 14px; font-size:.76rem; line-height:1.3; }
  .registration-layout { min-height:0; flex:1 1 auto; height:100%; gap:13px; }
  .registration-welcome { padding:18px 23px; }
  .welcome-logo { width:145px; margin:0 0 4px; }
  .welcome-kicker { font-size:.7rem; }
  .registration-welcome h1 { font-size:clamp(1.55rem,2.25vw,2rem); }
  .registration-welcome>p { margin:7px 0; font-size:.78rem; line-height:1.4; }
  .welcome-benefit { gap:9px; margin:5px 0; }
  .benefit-icon { width:32px; height:32px; font-size:.95rem; }
  .welcome-benefit strong { font-size:.71rem; }
  .welcome-benefit small { font-size:.64rem; }
  .welcome-signoff { padding-top:7px; font-size:.82rem; }
  .welcome-signoff::after { width:60px; height:2px; margin-top:4px; }
  .registration-card { align-self:stretch; padding:13px 24px 9px; }
  .registration-kicker { font-size:.62rem; }
  .registration-card h2 { margin:1px 0; font-size:1.2rem; }
  .registration-intro { margin:2px 0 6px; font-size:.7rem; line-height:1.3; }
  .registration-card>label:not(.privacy-check) { margin:4px 0 2px; font-size:.67rem; line-height:1.15; }
  .registration-input { height:32px; gap:8px; padding:0 9px; border-radius:7px; }
  .registration-input>span { width:15px; font-size:.8rem; }
  .registration-input input { font-size:.7rem; }
  .password-help { margin:1px 0 2px 24px; font-size:.56rem; line-height:1.15; }
  .registration-card .privacy-check { gap:6px; margin:5px 0; font-size:.61rem; line-height:1.25; }
  .create-account-button { min-height:33px; font-size:.7rem; }
  .registration-login { margin:6px 0 4px; padding-top:5px; font-size:.6rem; }
  .secure-note { padding-top:4px; font-size:.56rem; }
  .register-page .footer-inner { min-height:32px; padding:3px 0; font-size:.62rem; }
}

/* Final login-page composition.  These selectors intentionally sit last so
   the login reference styling is not replaced by the compact page rules. */
@media (min-width:1101px) {
  .auth-page {
    background:linear-gradient(90deg,#f7fcff 0%,#f7fcff 47%,#edf8fc 100%)!important;
  }
  .auth-page::before {
    display:block!important;
    position:fixed;
    inset:76px 0 0;
    z-index:-2;
    width:auto;
    height:auto;
    border-radius:0;
    transform:none;
    background:linear-gradient(90deg,#f7fcfff2 0%,#f7fcffe8 42%,#ffffffbd 63%,#eaf7fc9c 100%),url("kbs-career-art.jpg") center bottom / cover no-repeat;
    opacity:1;
  }
  .auth-page::after {
    display:block;
    z-index:-1;
    width:48vw;
    height:138px;
    right:16vw;
    bottom:-75px;
    border-radius:55% 55% 0 0;
    transform:rotate(-7deg);
    background:linear-gradient(100deg,#0878d1 0 28%,#4a9d22 28% 69%,#f5aa00 69%);
    opacity:.78;
  }
  .auth-page .topbar { min-height:76px!important; padding:6px clamp(38px,4vw,68px)!important; border-bottom:1px solid #e1edf3; }
  .auth-page .brand-logo { width:88px; height:80px; }
  .auth-page>main.container { width:min(1440px,90%); padding:16px 0!important; }
  .auth-page .login-layout { grid-template-columns:minmax(0,1fr) 596px!important; gap:clamp(56px,7vw,124px)!important; }
  .auth-page .login-welcome { max-width:610px; }
  .auth-page .login-kicker { padding-bottom:9px; font-size:.74rem; }
  .auth-page .login-welcome h1 { max-width:530px; margin:17px 0 16px; font-size:clamp(2.45rem,3.55vw,3.7rem); line-height:1.05; }
  .auth-page .login-welcome>p { max-width:560px; font-size:1rem; line-height:1.5; }
  .auth-page .login-benefits { max-width:650px; margin-top:31px; gap:18px; }
  .auth-page .login-benefits>div { padding-right:13px; }
  .auth-page .login-benefits span { width:58px; height:58px; margin-bottom:10px; font-size:1.35rem; }
  .auth-page .login-card { width:596px!important; padding:27px 46px 29px!important; border:1px solid #dfeaf0; border-radius:16px; background:#fffffff2; box-shadow:0 18px 40px #123c5d24; }
  .auth-page .login-brand { margin:0 auto 6px!important; }.auth-page .login-brand img { width:96px!important; }
  .auth-page .login-card h2 { font-size:1.72rem!important; }.auth-page .login-intro { margin:4px 0 15px!important; font-size:.91rem!important; }
  .auth-page .login-card>label { margin:10px 0 4px!important; }.auth-page .login-input { height:44px!important; border-radius:9px; }
  .auth-page .login-options { margin:13px 0 16px!important; }.auth-page .login-button { min-height:48px!important; border-radius:10px; }
  .auth-page .login-divider { margin:14px 0!important; }.auth-page .create-login-account { min-height:44px!important; }
}

@media (min-width:1101px) and (max-height:800px) {
  .auth-page .topbar { min-height:58px!important; padding-top:3px!important; padding-bottom:3px!important; }
  .auth-page .brand-logo { width:60px; height:55px; }
  .auth-page>main.container { padding:6px 0!important; }
  .auth-page .login-layout { grid-template-columns:minmax(0,1fr) 500px!important; gap:42px!important; }
  .auth-page .login-welcome h1 { margin:8px 0!important; font-size:clamp(1.65rem,2.4vw,2.15rem)!important; }
  .auth-page .login-welcome>p { font-size:.78rem!important; line-height:1.35!important; }.auth-page .login-benefits { margin-top:12px!important; }.auth-page .login-signoff { margin-top:15px!important; font-size:.9rem!important; }
  .auth-page .login-card { width:500px!important; padding:10px 29px 12px!important; }
  .auth-page .login-brand { margin:0 auto 1px!important; }.auth-page .login-brand img { width:54px!important; }
  .auth-page .login-card h2 { font-size:1.25rem!important; }.auth-page .login-intro { margin:1px 0 5px!important; font-size:.74rem!important; }
  .auth-page .login-card>label { margin:4px 0 2px!important; font-size:.67rem!important; }.auth-page .login-input { height:33px!important; }.auth-page .login-input input { font-size:.7rem!important; }
  .auth-page .login-options { margin:6px 0 7px!important; font-size:.68rem!important; }.auth-page .login-button { min-height:35px!important; font-size:.78rem!important; }.auth-page .login-divider { margin:7px 0!important; }.auth-page .create-login-account { min-height:34px!important; }.auth-page .manager-switch { margin:4px 0 0!important; font-size:.57rem!important; }
}

/* Use a real office environment behind the login interface; KBS artwork stays
   in the logo and never becomes a full-page background graphic. */
@media (min-width:701px) {
  .auth-page {
    background:
      linear-gradient(90deg,#f8fdfff5 0%,#f8fdffe9 40%,#ffffffbd 61%,#f1f9fc94 100%),
      url("login-office-workspace.jpg") center / cover fixed no-repeat!important;
  }
  .auth-page::before,
  .auth-page::after { display:none!important; }
  .auth-page .login-layout::before,
  .auth-page .login-layout::after { display:none!important; }
  .auth-page .login-welcome::after { display:none!important; }
  .auth-page .login-card { background:#fffffff5!important; }
}

@media (min-width:651px) and (max-height:800px) {
  .register-page .topbar { min-height:58px; }
  .register-page .brand-logo { width:49px; height:46px; }
  .register-page>main.container { padding:3px 0; }
  .register-page>main.container>.notice { margin-bottom:4px; padding:5px 11px; font-size:.67rem; }
  .registration-layout { gap:10px; }
  .registration-welcome { padding:12px 18px; }
  .welcome-logo { width:112px; margin-bottom:2px; }
  .welcome-kicker { font-size:.62rem; }
  .registration-welcome h1 { font-size:1.48rem; }
  .registration-welcome>p { margin:4px 0; font-size:.69rem; line-height:1.3; }
  .welcome-benefit { margin:3px 0; }
  .benefit-icon { width:27px; height:27px; font-size:.8rem; }
  .welcome-benefit strong { font-size:.65rem; }
  .welcome-benefit small { font-size:.57rem; }
  .welcome-signoff { padding-top:4px; font-size:.7rem; }
  .registration-card { padding:8px 19px 6px; }
  .registration-kicker { font-size:.55rem; }
  .registration-card h2 { font-size:1.05rem; }
  .registration-intro { margin:1px 0 4px; font-size:.62rem; }
  .registration-card>label:not(.privacy-check) { margin:3px 0 1px; font-size:.6rem; }
  .registration-input { height:28px; }
  .registration-input input { font-size:.64rem; }
  .password-help { font-size:.5rem; }
  .registration-card .privacy-check { margin:3px 0; font-size:.55rem; }
  .create-account-button { min-height:29px; font-size:.63rem; }
  .registration-login { margin:4px 0 2px; padding-top:3px; font-size:.54rem; }
  .secure-note { padding-top:2px; font-size:.5rem; }
  .register-page .footer-inner { min-height:25px; padding:2px 0; font-size:.55rem; }
}

/* Administrator overview dashboard */
.admin-overview { color:#10508e; }
.admin-overview-heading { display:flex; align-items:center; justify-content:space-between; gap:22px; margin:0 0 16px; }
.admin-breadcrumb { margin:0 0 5px; color:#0878d1; font-size:.68rem; font-weight:750; }
.admin-overview-heading h1 { margin:0; color:#10508e; font-size:clamp(1.45rem,2.2vw,2rem); letter-spacing:-.04em; }
.admin-overview-heading>div>p:last-child { margin:5px 0 0; color:#477492; font-size:.8rem; }
.application-period { display:flex; align-items:center; gap:11px; min-width:300px; padding:11px 14px; border:1px solid #cce8f6; border-radius:9px; background:linear-gradient(110deg,#f0fbff,#fff); }
.application-period>span { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; color:#fff; background:#0878d1; font-size:1rem; }
.application-period strong,.application-period small { display:block; }.application-period strong { display:inline-block; margin-right:8px; font-size:.7rem; }.application-period b { display:inline-block; padding:3px 12px; border-radius:20px; color:#fff; font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; }.application-period b.is-open { background:#19a852; }.application-period b.is-closed { background:#d0453d; }.application-period small { margin-top:3px; color:#5180a0; font-size:.62rem; }
.admin-kpis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.admin-kpi { display:flex; align-items:flex-start; gap:9px; min-height:109px; padding:13px 11px; border:1px solid #d2e9f5; border-radius:9px; color:inherit; background:#fff; box-shadow:0 5px 14px #0d5a8710; text-decoration:none; transition:transform .16s ease,box-shadow .16s ease; }.admin-kpi:hover { transform:translateY(-2px); box-shadow:0 9px 18px #0d5a8718; }.admin-kpi>span { display:grid; place-items:center; width:33px; height:33px; flex:none; border-radius:50%; color:#fff; background:#0878d1; font-size:.88rem; }.admin-kpi.green>span { background:#22a84d; }.admin-kpi.gold>span { background:#f5ac12; }.admin-kpi.purple>span { background:#7435d8; }.admin-kpi.teal>span { background:#0daf9d; }.admin-kpi small,.admin-kpi em { display:block; color:#226096; font-size:.61rem; font-style:normal; line-height:1.25; }.admin-kpi strong { display:block; margin:5px 0 1px; color:#075395; font-size:1.5rem; line-height:1; }.admin-kpi em { color:#5382a3; font-size:.55rem; }
.admin-dashboard-split { display:grid; grid-template-columns:minmax(0,2.05fr) minmax(255px,1fr); gap:14px; margin-bottom:14px; }.admin-panel { padding:14px; border:1px solid #d2e9f5; border-radius:9px; background:#fff; box-shadow:0 5px 14px #0d5a870d; }.admin-panel h2 { margin:0; color:#075395; font-size:.92rem; }.admin-panel>p,.panel-title p { margin:3px 0 10px; color:#4f82a4; font-size:.62rem; }
.pipeline-stages { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }.pipeline-stage { position:relative; min-width:0; padding:10px 8px 15px; overflow:hidden; border-radius:7px; color:#fff; background:#0878d1; text-decoration:none; }.pipeline-stage.review { background:#20a94d; }.pipeline-stage.shortlisted { background:#f2ae17; }.pipeline-stage.interview { background:#7535dd; }.pipeline-stage.selected { background:#08aa99; }.pipeline-stage span { display:block; overflow:hidden; font-size:.58rem; text-overflow:ellipsis; white-space:nowrap; }.pipeline-stage strong { display:block; margin-top:4px; font-size:1.25rem; }.pipeline-stage i { position:absolute; right:8px; bottom:6px; left:8px; height:3px; overflow:hidden; border-radius:4px; background:#ffffff70; }.pipeline-stage i::after { display:block; width:var(--progress); height:100%; content:""; border-radius:inherit; background:#fff; }
.attention-panel { display:grid; gap:5px; }.attention-panel h2 { margin-bottom:3px; }.attention-panel>a { display:flex; align-items:center; gap:9px; padding:7px; border:1px solid #d8ecf6; border-radius:6px; color:#17629b; font-size:.64rem; text-decoration:none; }.attention-panel>a:hover { background:#f3fbff; }.attention-panel b { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:#fff; background:#f5ac12; font-size:.62rem; }.attention-panel>a:nth-of-type(2) b { background:#ef5656; }.attention-panel>a:nth-of-type(3) b { background:#7435d8; }.attention-panel>a:nth-of-type(4) b { background:#0878d1; }.attention-panel span { margin-left:auto; font-size:1rem; }
.admin-recent-grid { grid-template-columns:1fr 1fr; }.panel-title { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }.panel-title>a { color:#0878d1; font-size:.6rem; font-weight:750; text-decoration:none; }.admin-mini-table { overflow-x:auto; }.admin-mini-table table { width:100%; border-collapse:collapse; color:#23618f; font-size:.59rem; }.admin-mini-table th { padding:6px; color:#075395; background:#edf9ff; text-align:left; white-space:nowrap; }.admin-mini-table td { padding:6px; border-top:1px solid #e0eff6; white-space:nowrap; }.mini-status { display:inline-block; padding:2px 6px; border-radius:12px; color:#aa6800; background:#fff1cc; }.interview-status { color:#6531be; background:#eee5ff; }
.admin-recent-grid.showing-all-applications { grid-template-columns:1fr; }
.system-links>div { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-top:11px; }.system-links a { position:relative; display:grid; grid-template-columns:27px 1fr 10px; column-gap:7px; align-items:center; min-width:0; padding:9px; border:1px solid #d7ebf5; border-radius:7px; color:#135d95; text-decoration:none; }.system-links a:hover { background:#f3fbff; }.system-links a>span { display:grid; grid-row:span 2; place-items:center; width:27px; height:27px; border-radius:50%; color:#fff; background:#0878d1; font-size:.75rem; }.system-links a:nth-child(2)>span { background:#20a94d; }.system-links a:nth-child(3)>span { background:#7435d8; }.system-links a:nth-child(4)>span { background:#f2ae17; }.system-links a:nth-child(5)>span { background:#08aa99; }.system-links strong { overflow:hidden; font-size:.61rem; text-overflow:ellipsis; white-space:nowrap; }.system-links small { overflow:hidden; color:#5482a2; font-size:.52rem; text-overflow:ellipsis; white-space:nowrap; }.system-links b { grid-column:3; grid-row:1 / span 2; font-size:.95rem; }
@media(max-width:1200px) { .admin-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }.system-links>div { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:850px) { .admin-overview-heading,.admin-dashboard-split { display:grid; grid-template-columns:1fr; }.application-period { min-width:0; }.pipeline-stages { grid-template-columns:repeat(3,minmax(0,1fr)); }.admin-recent-grid { grid-template-columns:1fr; }.system-links>div { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px) { .admin-kpis,.pipeline-stages,.system-links>div { grid-template-columns:1fr 1fr; }.admin-overview-heading h1 { font-size:1.35rem; } }
.system-links h2 { white-space:nowrap; }

/* Signed-in account controls in the shared top bar. */
.account-nav { margin-left:auto; gap:12px!important; }.topbar-notification { position:relative; display:grid; place-items:center; width:28px; height:28px; color:#0878d1!important; text-decoration:none; }.topbar-notification svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }.topbar-notification>b { position:absolute; top:-1px; right:-3px; display:grid; place-items:center; min-width:14px; height:14px; padding:0 3px; border:2px solid #fff; border-radius:50%; color:#fff; background:#f04747; font-size:.5rem; line-height:1; }.user-menu { position:relative; }.user-menu summary { list-style:none; cursor:pointer; }.user-menu summary::-webkit-details-marker { display:none; }.user-chip { display:flex; align-items:center; gap:6px; color:#163d69!important; text-decoration:none; }.user-avatar { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#fff; background:#0878d1; font-size:.58rem; font-weight:850; }.user-chip .signed-in { display:grid; justify-items:start; color:#315d80; font-size:.64rem; line-height:1.18; }.user-chip .signed-in strong { color:#123d69; font-weight:800; }.user-chip .signed-in-role { margin-top:1px; color:#2582cf; font-size:.56rem; font-weight:650; }.user-chip>i { margin-left:1px; color:#0878d1; font-size:.76rem; font-style:normal; }.user-menu[open] .user-chip>i { transform:rotate(180deg); }.user-menu-popover { position:absolute; z-index:30; top:calc(100% + 8px); right:0; display:grid; min-width:150px; padding:5px; border:1px solid #d3e6f2; border-radius:8px; background:#fff; box-shadow:0 10px 24px #163d5d25; }.user-menu-popover a { padding:8px 10px; border-radius:5px; color:#1a5b8f!important; font-size:.7rem!important; font-weight:700; text-decoration:none; white-space:nowrap; }.user-menu-popover a:hover { background:#eff9ff; }.user-menu-popover .user-menu-logout { color:#b33a34!important; }.user-menu-popover .user-menu-logout:hover { background:#fff3f2; }
@media(max-width:820px) { .management-session .topbar .user-chip .signed-in { display:none; }.management-session .topbar .user-chip>i { display:none; }.management-session .topbar .topbar-notification { display:grid; } }

/* Keep the public home page in one complete desktop interface. */
@media (min-width:651px) {
  html:has(body.home-page),body.home-page { height:100%; overflow:hidden; }
  .home-page { min-height:100vh; display:flex; flex-direction:column; }
  .home-page .topbar { flex:0 0 auto; min-height:70px; padding-top:4px; padding-bottom:4px; }
  .home-page .brand-logo { width:60px; height:56px; }
  .home-page .home-main { min-height:0; flex:1 1 auto; display:flex; }
  .home-page .home-shell { min-height:0; flex:1 1 auto; display:flex; padding:7px 0; }
  .home-page .home-content { min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto; }
  .home-page .landing-hero { min-height:0; height:100%; gap:clamp(24px,4vw,48px); padding:12px 0; }
  .home-page .landing-copy h1 { margin:6px 0 9px; font-size:clamp(1.65rem,2.35vw,2rem); }
  .home-page .landing-copy>p { margin-bottom:8px; font-size:.84rem; line-height:1.42; }
  .home-page .landing-actions { margin-top:11px; }.home-page .landing-values { margin-top:14px; }
  .home-page .landing-art { height:min(100%,290px); }
  .home-page .featured-vacancy { min-height:70px; margin:5px 0 7px; padding:11px 18px; }
  .home-page .featured-icon { width:42px; height:42px; }.home-page .featured-icon svg { width:21px; height:21px; }
  .home-page .featured-copy h2 { font-size:.92rem; }.home-page .featured-copy p { font-size:.69rem; }
  .home-page .featured-link { padding:7px 11px; font-size:.68rem; }
  .home-page footer { flex:0 0 auto; padding:7px 0; border-top:2px solid transparent; border-image:linear-gradient(90deg,#0878d1,#4a9d22,#f5aa00) 1; background:linear-gradient(105deg,#e7f6ff,#eff9eb 58%,#fff7e5); }.home-page .footer-inner { min-height:54px; color:#1c5a84; font-size:.68rem; }.home-page .footer-brand { color:#124b79; }.home-page .footer-logo { width:62px; height:54px; }
}
@media (min-width:651px) and (max-height:760px) {
  .home-page .topbar { min-height:58px; }.home-page .brand-logo { width:50px; height:47px; }
  .home-page .landing-hero { padding:5px 0; }.home-page .landing-copy h1 { font-size:1.5rem; }.home-page .landing-copy>p { font-size:.75rem; }.home-page .eyebrow { font-size:.65rem; }.home-page .status-pill { margin-top:6px; padding:5px 10px; font-size:.66rem; }.home-page .apply-button { padding:7px 12px; font-size:.7rem; }.home-page .landing-values { margin-top:9px; font-size:.64rem; }.home-page .landing-art { height:min(100%,240px); }.home-page .featured-vacancy { min-height:58px; margin:3px 0; padding:8px 13px; }.home-page .featured-label { font-size:.57rem; }.home-page .featured-copy h2 { font-size:.82rem; }.home-page .footer-inner { min-height:31px; }.home-page .footer-logo { width:38px; height:32px; }
}

/* Compact public header modeled on the KBS reference composition. */
@media (min-width:651px) {
  body.home-page .topbar { min-height:58px; gap:28px; padding:4px clamp(32px,4vw,56px); border-bottom:1px solid #d8ecf5; box-shadow:0 2px 10px #0c4a7510; }
  body.home-page .brand { gap:8px; }.home-page .brand-logo { width:48px; height:44px; }.home-page .brand-subtitle { display:block; padding-left:9px; border-left:1px solid #d5e6ef; color:#1b5790; font-size:.7rem; font-weight:700; }
  body.home-page .main-nav { gap:31px; }.home-page .main-nav a { padding:6px 2px; color:#124d85; font-size:.63rem; font-weight:700; }.home-page .main-nav a[aria-current="page"] { border-width:2px; }
  body.home-page .account-nav { gap:8px!important; }.home-page .nav-pill { padding:5px 13px; border-color:#0878d1; border-radius:18px; color:#0878d1!important; font-size:.62rem!important; font-weight:750; }.home-page .nav-primary { color:#fff!important; border-color:#289b35!important; background:linear-gradient(100deg,#3d9d2e,#0878d1)!important; }.home-page .person-icon { width:11px; height:11px; margin-right:3px; }
}

/* Applicant and staff sign-in remain a complete, non-scrolling desktop view. */
@media (min-width:701px) {
  html:has(body.auth-page), body.auth-page { height:100%; overflow:hidden!important; }
  .auth-page { min-height:100vh; height:100vh!important; display:flex; flex-direction:column; }
  .auth-page>main.container { min-height:0; flex:1 1 auto!important; overflow:hidden!important; padding:6px 0!important; }
  .auth-page .login-layout { min-height:0; height:100%!important; flex:1 1 auto!important; align-items:center!important; }
  .auth-page .login-welcome { align-self:center; margin-top:0; }
  .auth-page .login-card { align-self:center; max-height:100%; overflow:hidden; }
}
@media (min-width:701px) and (max-height:800px) {
  .auth-page .topbar { min-height:58px!important; padding-top:3px; padding-bottom:3px; }
  .auth-page .brand-logo { width:52px; height:48px; }
  .auth-page .login-layout { grid-template-columns:minmax(0,1fr) 500px!important; gap:42px!important; }
  .auth-page .login-welcome h1 { margin:8px 0; font-size:clamp(1.65rem,2.4vw,2.15rem); }
  .auth-page .login-welcome>p { font-size:.78rem; line-height:1.35; }.auth-page .login-benefits { margin-top:12px; }.auth-page .login-signoff { margin-top:15px; font-size:.9rem; }
  .auth-page .login-card { width:500px!important; padding:10px 29px 12px!important; }
  .auth-page .login-brand { margin:0 auto 1px!important; }.auth-page .login-brand img { width:54px!important; }
  .auth-page .login-card h2 { font-size:1.25rem!important; }.auth-page .login-intro { margin:1px 0 5px!important; font-size:.74rem!important; }
  .auth-page .login-card>label { margin:4px 0 2px!important; font-size:.67rem!important; }.auth-page .login-input { height:33px!important; }.auth-page .login-input input { font-size:.7rem!important; }
  .auth-page .login-options { margin:6px 0 7px!important; font-size:.68rem!important; }.auth-page .login-button { min-height:35px!important; font-size:.78rem!important; }.auth-page .login-divider { margin:7px 0!important; }.auth-page .create-login-account { min-height:34px!important; }.auth-page .manager-switch { margin:4px 0 0!important; font-size:.57rem!important; }
}

/* Place the home-page opening card directly beneath the hero. */
@media (min-width:651px) {
  .home-page .home-content { display:flex; flex-direction:column; justify-content:center; }
  .home-page .landing-hero { height:auto; flex:0 0 auto; }
  .home-page .featured-vacancy { flex:0 0 auto; }
  .home-page .main-nav a,
  .home-page .main-nav a[aria-current="page"] { font-family:"Segoe UI",Arial,sans-serif; font-size:.68rem; font-weight:700; line-height:1.2; letter-spacing:0; }
}

/* Login page reference layout — deliberately placed last to override compact rules. */
@media (min-width:1101px) {
  .auth-page { background:linear-gradient(90deg,#f7fcfff2 0%,#f7fcffe5 42%,#ffffffb8 63%,#eaf7fc9a 100%),url("kbs-career-art.jpg") center bottom / cover fixed no-repeat!important; }
  .auth-page::before { display:block!important; position:fixed; inset:76px 0 0; z-index:-2; width:auto; height:auto; border-radius:0; transform:none; background:linear-gradient(90deg,#f7fcfff0 0%,#f7fcffe5 42%,#ffffffb8 63%,#eaf7fc9a 100%),url("kbs-career-art.jpg") center bottom / cover no-repeat; opacity:1; }
  .auth-page::after { display:block; z-index:-1; width:48vw; height:138px; right:16vw; bottom:-75px; border-radius:55% 55% 0 0; transform:rotate(-7deg); background:linear-gradient(100deg,#0878d1 0 28%,#4a9d22 28% 69%,#f5aa00 69%); opacity:.78; }
  .auth-page .topbar { min-height:76px!important; padding:6px clamp(38px,4vw,68px)!important; border-bottom:1px solid #e1edf3; }
  .auth-page .brand-logo { width:88px; height:80px; }
  .auth-page>main.container { width:min(1440px,90%); padding:16px 0!important; }
  .auth-page .login-layout { grid-template-columns:minmax(0,1fr) 596px!important; gap:clamp(56px,7vw,124px)!important; }
  .auth-page .login-welcome { max-width:610px; }
  .auth-page .login-kicker { padding-bottom:9px; font-size:.74rem; }.auth-page .login-welcome h1 { max-width:530px; margin:17px 0 16px; font-size:clamp(2.45rem,3.55vw,3.7rem); line-height:1.05; }.auth-page .login-welcome>p { max-width:560px; font-size:1rem; line-height:1.5; }
  .auth-page .login-benefits { max-width:650px; margin-top:31px; gap:18px; }.auth-page .login-benefits>div { padding-right:13px; }.auth-page .login-benefits span { width:58px; height:58px; margin-bottom:10px; font-size:1.35rem; }
  .auth-page .login-card { width:596px!important; padding:27px 46px 29px!important; border:1px solid #dfeaf0; border-radius:16px; background:#fffffff2; box-shadow:0 18px 40px #123c5d24; }
  .auth-page .login-brand { margin:0 auto 6px!important; }.auth-page .login-brand img { width:96px!important; }.auth-page .login-card h2 { font-size:1.72rem!important; }.auth-page .login-intro { margin:4px 0 15px!important; font-size:.91rem!important; }.auth-page .login-card>label { margin:10px 0 4px!important; }.auth-page .login-input { height:44px!important; border-radius:9px; }.auth-page .login-options { margin:13px 0 16px!important; }.auth-page .login-button { min-height:48px!important; border-radius:10px; }.auth-page .login-divider { margin:14px 0!important; }.auth-page .create-login-account { min-height:44px!important; }
}
@media (min-width:1101px) and (max-height:800px) {
  .auth-page .topbar { min-height:58px!important; padding-top:3px!important; padding-bottom:3px!important; }.auth-page .brand-logo { width:60px; height:55px; }.auth-page>main.container { padding:6px 0!important; }.auth-page .login-layout { grid-template-columns:minmax(0,1fr) 500px!important; gap:42px!important; }.auth-page .login-welcome h1 { margin:8px 0!important; font-size:clamp(1.65rem,2.4vw,2.15rem)!important; }.auth-page .login-welcome>p { font-size:.78rem!important; line-height:1.35!important; }.auth-page .login-benefits { margin-top:12px!important; }.auth-page .login-signoff { margin-top:15px!important; font-size:.9rem!important; }.auth-page .login-card { width:500px!important; padding:10px 29px 12px!important; }.auth-page .login-brand { margin:0 auto 1px!important; }.auth-page .login-brand img { width:54px!important; }.auth-page .login-card h2 { font-size:1.25rem!important; }.auth-page .login-intro { margin:1px 0 5px!important; font-size:.74rem!important; }.auth-page .login-card>label { margin:4px 0 2px!important; font-size:.67rem!important; }.auth-page .login-input { height:33px!important; }.auth-page .login-input input { font-size:.7rem!important; }.auth-page .login-options { margin:6px 0 7px!important; font-size:.68rem!important; }.auth-page .login-button { min-height:35px!important; font-size:.78rem!important; }.auth-page .login-divider { margin:7px 0!important; }.auth-page .create-login-account { min-height:34px!important; }.auth-page .manager-switch { margin:4px 0 0!important; font-size:.57rem!important; }
}

/* Final desktop background: photograph only, never the KBS hero artwork. */
@media (min-width:701px) {
  .auth-page {
    background:linear-gradient(90deg,#f8fdfff5 0%,#f8fdffe9 40%,#ffffffbd 61%,#f1f9fc94 100%),url("login-office-workspace.jpg") center / cover fixed no-repeat!important;
  }
  .auth-page::before,.auth-page::after,.auth-page .login-layout::before,.auth-page .login-layout::after,.auth-page .login-welcome::after { display:none!important; }
  .auth-page .login-card { background:#fffffff5!important; }
}

/* Homepage layout follows the KBS careers reference. */
.home-page {
  color:#183e63;
  background:#e9f7fe;
}
.home-page .topbar {
  position:relative;
  z-index:2;
  width:min(1520px,95%);
  min-height:68px;
  margin:12px auto 0;
  padding:7px 26px;
  gap:clamp(18px,3vw,48px);
  border:1px solid #e6f0f5;
  border-radius:40px;
  box-shadow:0 6px 24px #0e4d7710;
}
.home-page .home-brand { gap:12px; }
.home-page .home-brand .brand-logo { width:54px; height:54px; object-fit:contain; }
.home-page .home-brand-wordmark { display:grid; gap:1px; min-width:154px; }
.home-page .home-brand-wordmark strong { color:#123e70; font-size:1.12rem; font-weight:900; letter-spacing:.025em; line-height:1; }
.home-page .home-brand-wordmark small { color:#17436d; font-size:.48rem; font-weight:850; letter-spacing:.085em; line-height:1.2; white-space:nowrap; }
.home-page .home-brand-divider { width:1px; height:35px; background:#bdd4e0; }
.home-page .home-brand .brand-subtitle { padding-left:2px; color:#153d67; font-size:1.05rem; font-weight:800; }
.home-page .main-nav { gap:clamp(18px,3vw,44px); }
.home-page .main-nav a { display:flex; align-items:center; gap:7px; color:#35546d; font-size:.84rem; font-weight:750; }
.home-page .main-nav a::before { color:#0878d1; font-size:1rem; }
.home-page .main-nav a:nth-child(1)::before { content:"⌂"; }
.home-page .main-nav a:nth-child(2)::before { content:"▣"; }
.home-page .main-nav a:nth-child(3)::before { content:"♙"; }
.home-page .main-nav a[aria-current="page"] { color:#0878d1; }
.home-page .account-nav { gap:10px!important; }
.home-page .account-nav .nav-pill { padding:8px 17px; border-radius:22px; font-size:.78rem!important; font-weight:750; }
.home-page .account-nav .nav-primary { background:linear-gradient(100deg,#43aa35,#1685ae)!important; }
.home-page .home-shell {
  isolation:isolate;
  min-height:0;
  flex:1 1 auto;
  display:flex;
  padding:10px 0;
  background:
    radial-gradient(ellipse at 2% 5%,#ffffffa8 0 18%,transparent 48%),
    linear-gradient(135deg,#dff4ff 0%,#f2fbff 53%,#e0f4fd 100%);
}
.home-page .home-shell::before {
  z-index:-1;
  top:auto;
  right:-90px;
  bottom:-95px;
  width:390px;
  height:245px;
  border-radius:100% 0 0;
  background:linear-gradient(140deg,#ffe24a 0 19%,#89d83a 19% 46%,#0878d1 46% 65%,transparent 65%);
  opacity:.8;
}
.home-page .home-shell::after {
  position:absolute;
  z-index:-1;
  bottom:-115px;
  left:-130px;
  display:block;
  width:480px;
  height:235px;
  content:"";
  border-radius:0 100% 0 0;
  background:linear-gradient(145deg,#8fe0f8 0 40%,#b4e9fb 40% 62%,transparent 62%);
  opacity:.55;
}
.home-page .home-content { width:min(1468px,92%); display:flex; flex-direction:column; justify-content:center; }
.home-page .landing-hero {
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(35px,5vw,82px);
  min-height:365px;
  padding:24px 12px 30px;
}
.home-page .landing-copy { max-width:560px; }
.home-page .landing-copy .eyebrow { color:#29996b; font-size:.88rem; letter-spacing:.18em; }
.home-page .landing-copy h1 { margin:10px 0 14px; color:#153a67; font-size:clamp(2.35rem,3.3vw,3.2rem); line-height:1.04; letter-spacing:-.04em; }
.home-page .landing-copy h1 .kbs-word { color:#0878d1; }
.home-page .landing-copy>p { max-width:560px; margin:0 0 20px; color:#49677e; font-size:1rem; line-height:1.55; }
.home-page .landing-actions { margin-top:17px; }
.home-page .landing-actions .apply-button { min-width:220px; padding:12px 20px; border-radius:26px; font-size:.9rem; }
.home-page .landing-values { gap:0; margin-top:22px; color:#527088; font-size:.9rem; }
.home-page .landing-values>span { gap:9px; padding:0 18px; border-right:1px solid #c7dce7; }
.home-page .landing-values>span:first-child { padding-left:4px; }
.home-page .landing-values>span:last-child { border:0; }
.home-page .value-dot { width:17px; height:17px; box-shadow:0 0 0 5px #ffffff9e; }
.home-page .landing-art { height:275px; border-color:#dbeef6; border-radius:18px; box-shadow:0 12px 30px #1256821b; }
.home-page .landing-art>img { object-fit:cover; }
.home-page .featured-vacancy {
  min-height:104px;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  margin:7px 0 16px;
  padding:18px 27px;
  border-color:#e6f1f5;
  border-radius:17px;
  box-shadow:0 9px 26px #14527712;
}
.home-page .featured-vacancy.no-vacancy-card { grid-template-columns:60px minmax(0,1fr) auto; gap:20px; }
.home-page .featured-icon { width:62px; height:62px; background:#e4f7ef; }
.home-page .featured-icon svg { width:29px; height:29px; }
.home-page .no-vacancy-card .featured-copy { padding-left:24px; }
.home-page .featured-label { font-size:.78rem; letter-spacing:.08em; }
.home-page .featured-copy h2 { margin:3px 0; color:#173b62; font-size:1.16rem; }
.home-page .featured-copy p { margin:3px 0 0; color:#62798b; font-size:.86rem; }
.home-page .featured-link { padding:11px 20px; border-color:#8fc4e0; border-radius:24px; font-size:.82rem; }
.home-page .featured-deadline { padding-left:20px; }
.home-page footer {
  flex:0 0 auto;
  padding:6px 0;
  border-top:2px solid transparent;
  border-image:linear-gradient(90deg,#1685c3,#4a9d22,#f5aa00) 1;
  background:#ffffffc9;
}
.home-page .footer-inner { min-height:49px; color:#557088; font-size:.74rem; }
.home-page .footer-brand { gap:9px; color:#174b79; font-size:.92rem; }
.home-page .footer-logo { width:39px; height:39px; object-fit:contain; }
@media(max-width:900px) and (min-width:651px) {
  .home-page .topbar { gap:15px; padding-right:17px; padding-left:17px; }
  .home-page .home-brand { gap:8px; }
  .home-page .home-brand .brand-logo { width:46px; height:46px; }
  .home-page .home-brand-wordmark { min-width:120px; }
  .home-page .home-brand-wordmark strong { font-size:.94rem; }
  .home-page .home-brand-wordmark small { font-size:.4rem; }
  .home-page .home-brand .brand-subtitle { font-size:.9rem; }
  .home-page .main-nav { gap:13px; }
  .home-page .main-nav a { font-size:.74rem; }
  .home-page .account-nav .nav-pill { padding:7px 10px; font-size:.7rem!important; }
  .home-page .landing-hero { gap:24px; }
}
@media(max-width:650px) {
  .home-page { min-height:100vh; height:auto; overflow-x:hidden; }
  .home-page .topbar { width:94%; min-height:62px; margin:8px auto 0; padding:7px 10px; gap:8px 12px; border-radius:20px; flex-wrap:wrap; }
  .home-page .home-brand { gap:7px; }
  .home-page .home-brand .brand-logo { width:42px; height:42px; }
  .home-page .home-brand-wordmark { min-width:0; }
  .home-page .home-brand-wordmark strong { font-size:.84rem; }
  .home-page .home-brand-wordmark small { font-size:.36rem; }
  .home-page .home-brand-divider { height:26px; }
  .home-page .home-brand .brand-subtitle { padding-left:0; font-size:.82rem; }
  .home-page .account-nav { gap:5px!important; }
  .home-page .account-nav .nav-pill { padding:6px 9px; font-size:.65rem!important; }
  .home-page .account-nav .person-icon { display:none; }
  .home-page .main-nav { order:3; flex:1 0 100%; justify-content:center; gap:25px; padding-top:2px; }
  .home-page .main-nav a { font-size:.75rem; }
  .home-page .home-shell { min-height:0; padding:10px 0 18px; }
  .home-page .home-content { width:92%; }
  .home-page .landing-hero { display:grid; grid-template-columns:1fr; gap:17px; min-height:0; padding:24px 0 16px; }
  .home-page .landing-copy { max-width:none; }
  .home-page .landing-copy h1 { margin:9px 0 11px; font-size:clamp(2rem,8vw,2.7rem); }
  .home-page .landing-copy>p { font-size:.94rem; }
  .home-page .landing-actions .apply-button { min-width:190px; }
  .home-page .landing-values { gap:0; margin-top:18px; font-size:.79rem; }
  .home-page .landing-values>span { padding:0 9px; }
  .home-page .landing-art { grid-row:auto; height:auto; aspect-ratio:1.95; margin:0; }
  .home-page .featured-vacancy,.home-page .featured-vacancy.no-vacancy-card { grid-template-columns:46px minmax(0,1fr); gap:12px; min-height:0; margin:8px 0 0; padding:14px; }
  .home-page .featured-icon { width:46px; height:46px; }
  .home-page .no-vacancy-card .featured-copy { grid-column:2; padding-left:0; border:0; }
  .home-page .featured-copy h2 { font-size:1rem; }
  .home-page .featured-copy p { font-size:.78rem; }
  .home-page .featured-link { grid-column:1/-1; grid-row:auto; justify-self:start; padding:8px 14px; }
  .home-page .featured-deadline { grid-column:1; padding-left:0; border:0; }
  .home-page .footer-inner { align-items:center; flex-direction:row; min-height:44px; font-size:.64rem; }
  .home-page .footer-brand { font-size:.79rem; }
  .home-page .footer-logo { width:32px; height:32px; }
}

/* Login page composition follows the supplied KBS sign-in reference. */
@media (min-width:701px) {
  .auth-page {
    background:
      linear-gradient(90deg,#f8fcffed 0%,#f8fcffd9 36%,#f8fcff9c 54%,#f8fcff33 100%),
      url("login-office-workspace.jpg") center center / cover fixed no-repeat !important;
  }
  .auth-page .topbar {
    min-height:68px !important;
    padding:5px clamp(28px,3.2vw,56px) !important;
    gap:clamp(28px,5vw,82px);
    border-bottom:1px solid #e6eef3;
    background:#fff;
    box-shadow:0 2px 12px #163b5910;
  }
  .auth-page .auth-brand { gap:11px; }
  .auth-page .auth-brand .brand-logo { width:48px; height:48px; }
  .auth-page .auth-brand-wordmark { display:grid; gap:1px; }
  .auth-page .auth-brand-wordmark strong { color:#123e70; font-size:1.04rem; font-weight:900; letter-spacing:.015em; line-height:1; }
  .auth-page .auth-brand-wordmark small { color:#17436d; font-size:.45rem; font-weight:850; letter-spacing:.07em; line-height:1.2; white-space:nowrap; }
  .auth-page .auth-brand-divider { width:1px; height:32px; margin:0 3px; background:#bdd4e0; }
  .auth-page .auth-brand .brand-subtitle { padding-left:4px; color:#153d67; font-size:1rem; font-weight:800; }
  .auth-page .main-nav { flex:1; justify-content:flex-start; gap:clamp(20px,3vw,48px); }
  .auth-page .main-nav a { color:#35546d; font-size:.9rem; }
  .auth-page .account-nav { gap:12px!important; }
  .auth-page .account-nav .nav-pill { padding:9px 18px; border-radius:24px; font-size:.83rem!important; }
  .auth-page .account-nav .nav-primary { background:#4aab32!important; }
  .auth-page>main.container { width:min(1470px,91%); padding:22px 0!important; }
  .auth-page .login-layout {
    grid-template-columns:minmax(0,1fr) minmax(480px,540px)!important;
    gap:clamp(48px,6vw,100px)!important;
    align-items:center!important;
  }
  .auth-page .login-welcome { max-width:660px; padding:16px 0; }
  .auth-page .login-kicker { padding-bottom:9px; font-size:.82rem; letter-spacing:.2em; }
  .auth-page .login-welcome h1 {
    max-width:670px;
    margin:17px 0 15px!important;
    color:#123f72;
    font-size:clamp(2.7rem,4vw,3.65rem)!important;
    line-height:1.03!important;
    letter-spacing:-.04em;
  }
  .auth-page .login-welcome>p { max-width:580px; color:#42668b; font-size:1.08rem!important; line-height:1.48!important; }
  .auth-page .login-benefits { max-width:680px; gap:0; margin-top:32px!important; }
  .auth-page .login-benefits>div { padding:0 16px 0 0; }
  .auth-page .login-benefits>div+div { padding-left:17px; }
  .auth-page .login-benefits>div:not(:last-child) { border-right:1px solid #bfd4e4; }
  .auth-page .login-benefits span { width:56px; height:56px; margin-bottom:11px; font-size:1.35rem; }
  .auth-page .login-benefits strong { color:#174777; font-size:.82rem!important; }
  .auth-page .login-benefits small { color:#557598; font-size:.74rem!important; line-height:1.4; }
  .auth-page .login-signoff { margin-top:28px!important; font-size:1.1rem!important; }
  .auth-page .login-card {
    width:100%!important;
    max-width:540px;
    padding:25px 40px 28px!important;
    border:1px solid #e2edf3;
    border-radius:17px;
    background:#ffffffed!important;
    box-shadow:0 18px 42px #173b5e25;
  }
  .auth-page .login-brand { margin:0 auto 6px!important; }
  .auth-page .login-brand img { width:104px!important; }
  .auth-page .login-brand .brand-tagline { font-size:.66rem; }
  .auth-page .login-card h2 { color:#123f72; font-size:1.72rem!important; }
  .auth-page .login-intro { margin:4px 0 15px!important; color:#527399; font-size:.95rem!important; }
  .auth-page .login-card>label { margin:10px 0 4px!important; font-size:.82rem; }
  .auth-page .login-input { height:46px!important; border-radius:9px; }
  .auth-page .login-input input { font-size:.9rem; }
  .auth-page .login-options { margin:14px 0 18px!important; font-size:.82rem; }
  .auth-page .login-button { min-height:52px!important; border-radius:10px; font-size:1rem; }
  .auth-page .login-divider { margin:17px 0!important; }
  .auth-page .create-login-account { min-height:46px!important; }
  .auth-page .manager-switch { margin:9px 0 0!important; font-size:.76rem; }
  .auth-page .login-card .notice { margin-bottom:12px; }
}
@media (min-width:701px) and (max-width:1100px) {
  .auth-page .topbar { gap:18px; }
  .auth-page .auth-brand { gap:7px; }
  .auth-page .auth-brand .brand-logo { width:42px; height:42px; }
  .auth-page .auth-brand-wordmark strong { font-size:.88rem; }
  .auth-page .auth-brand-wordmark small { font-size:.37rem; }
  .auth-page .auth-brand .brand-subtitle { font-size:.85rem; }
  .auth-page .main-nav { gap:14px; }
  .auth-page .main-nav a { font-size:.78rem; }
  .auth-page .account-nav .nav-pill { padding:7px 10px; font-size:.73rem!important; }
  .auth-page>main.container { width:min(620px,92%); }
  .auth-page .login-layout { grid-template-columns:1fr!important; gap:0!important; }
  .auth-page .login-welcome { display:none; }
  .auth-page .login-card { width:min(500px,100%)!important; justify-self:center; padding:20px 32px 24px!important; }
}
@media (max-width:700px) {
  .auth-page .auth-brand { gap:7px; }
  .auth-page .auth-brand .brand-logo { width:39px; height:39px;   }
  .auth-page .auth-brand-wordmark strong { font-size:.82rem; }
  .auth-page .auth-brand-wordmark small { font-size:.34rem; }
  .auth-page .auth-brand-divider { height:25px; }
  .auth-page .auth-brand .brand-subtitle { font-size:.78rem; }
  .auth-page .login-brand .brand-tagline { font-size:.72rem; }
}

/* One complete KBS lockup everywhere.  The slogan is part of the logo image,
   which keeps it readable without introducing a second, oversized line. */
.brand-tagline,.home-brand-wordmark,.auth-brand-wordmark,.home-brand-divider,.auth-brand-divider { display:none!important; }
.brand-logo { width:84px!important; height:78px!important; object-fit:contain; }
.footer-logo { width:76px!important; height:70px!important; object-fit:contain; }
.welcome-logo { width:156px!important; height:auto!important; object-fit:contain; }
.login-brand img { width:104px!important; height:auto!important; object-fit:contain; }
@media (max-width:700px) {
  .brand-logo { width:62px!important; height:58px!important; }
  .footer-logo { width:58px!important; height:54px!important; }
  .welcome-logo { width:126px!important; }
  .login-brand img { width:88px!important; }
}

@media (min-width:701px) and (max-height:800px) {
  html:has(body.auth-page),body.auth-page {
    height:auto!important;
    min-height:100%;
    overflow-y:auto!important;
  }
  .auth-page {
    height:auto!important;
    min-height:100vh;
    overflow:visible!important;
  }
  .auth-page>main.container {
    overflow:visible!important;
  }
  .auth-page .login-layout {
    height:auto!important;
    min-height:0;
  }
  .auth-page .login-card {
    max-height:none!important;
    overflow:visible!important;
  }
}

/* Final sign-in refinements keep the reference lockup visible after shared logo rules. */
@media (min-width:701px) {
  .auth-page {
    background:
      linear-gradient(90deg,#f8fcffeb 0%,#f8fcffd4 36%,#f8fcff8c 56%,#f8fcff22 100%),
      url("login-office-workspace.jpg") center center / cover fixed no-repeat !important;
  }
  .auth-page .topbar { min-height:68px!important; }
  .auth-page .auth-brand { gap:11px; }
  .auth-page .auth-brand .brand-logo { width:48px!important; height:48px!important; }
  .auth-page .auth-brand-wordmark { display:grid!important; }
  .auth-page .auth-brand-wordmark strong { color:#123e70; font-size:1.04rem; font-weight:900; letter-spacing:.015em; line-height:1; }
  .auth-page .auth-brand-wordmark small { color:#17436d; font-size:.45rem; font-weight:850; letter-spacing:.07em; line-height:1.2; white-space:nowrap; }
  .auth-page .auth-brand-divider { display:block!important; }
  .auth-page .auth-brand-divider { width:1px; height:32px; margin:0 3px; background:#bdd4e0; }
  .auth-page .auth-brand .brand-subtitle { padding-left:4px; color:#153d67; font-size:1rem; font-weight:800; }
  .auth-page .login-welcome { transform:translate(7px,-83px); }
  .auth-page .login-signoff { display:none!important; }
  .auth-page .login-card {
    width:100%!important;
    max-width:530px!important;
    min-height:500px!important;
    padding:14px 35px 22px 40px!important;
    transform:translate(-28px,-23px);
  }
  .auth-page .login-brand { margin:0 auto 28px!important; }
  .auth-page .login-brand img { width:64px!important; height:64px!important; object-fit:contain; }
  .auth-page .login-card h2 { font-size:1.9rem!important; }
  .auth-page .login-intro { margin:4px 0 12px!important; font-size:1rem!important; }
  .auth-page .login-card>label { margin:12px 0 3px!important; font-size:.86rem!important; }
  .auth-page .login-options { margin:17px 0 16px!important; font-size:.86rem!important; }
  .auth-page .login-button { min-height:60px!important; }
  .auth-page .manager-switch { margin:14px 0 0!important; font-size:.79rem!important; }
}
@media (min-width:701px) and (max-width:1100px) {
  .auth-page .topbar { min-height:68px!important; }
  .auth-page .auth-brand .brand-logo { width:42px!important; height:42px!important; }
  .auth-page .auth-brand-wordmark { display:none!important; }
  .auth-page .auth-brand-divider { display:none!important; }
  .auth-page .login-welcome { transform:none!important; }
  .auth-page .login-card { width:min(500px,100%)!important; min-height:0!important; padding:20px 32px 24px!important; transform:none!important; }
  .auth-page .login-brand { margin:0 auto 6px!important; }
  .auth-page .login-brand img { width:82px!important; height:82px!important; }
}

/* Keep every part of the compact desktop home page visible. */
@media (min-width:651px) {
  html:has(body.home-page), body.home-page { overflow-y:auto!important; }
  .home-page .brand-logo { width:68px!important; height:63px!important; }
  .home-page .topbar { min-height:72px!important; margin-top:8px!important; }
  .home-page .home-content { justify-content:flex-start!important; }
  .home-page .landing-hero { min-height:300px!important; padding:16px 12px 12px!important; }
  .home-page .landing-art { height:245px!important; }
  .home-page .featured-vacancy { min-height:82px!important; margin:4px 0 8px!important; padding:13px 20px!important; }
  .home-page .featured-icon { width:50px!important; height:50px!important; }
  .home-page .footer-inner { min-height:46px!important; }
  .home-page .footer-logo { width:58px!important; height:54px!important; }
}
@media (min-width:651px) and (max-height:700px) {
  .home-page .topbar { min-height:66px!important; }
  .home-page .brand-logo { width:62px!important; height:58px!important; }
  .home-page .home-shell { padding:0!important; }
  .home-page .landing-hero { min-height:278px!important; padding:10px 12px 8px!important; }
  .home-page .landing-copy h1 { margin:6px 0 8px!important; font-size:2.1rem!important; }
  .home-page .landing-copy>p { margin-bottom:9px!important; font-size:.82rem!important; }
  .home-page .landing-actions { margin-top:8px!important; }.home-page .landing-values { margin-top:12px!important; }
  .home-page .landing-art { height:222px!important; }
  .home-page .featured-vacancy { min-height:74px!important; margin:2px 0 4px!important; padding:10px 18px!important; }
  .home-page .featured-icon { width:44px!important; height:44px!important; }.home-page .featured-copy h2 { font-size:.98rem!important; }.home-page .featured-copy p { font-size:.72rem!important; }
  .home-page .footer-inner { min-height:40px!important; }
}

/* Shared KBS lockup: the approved “ONE PEOPLE” tagline. */
.brand-lockup,.footer-lockup,.login-lockup,.welcome-lockup { display:grid; justify-items:center; line-height:1; }
.brand-lockup small,.footer-lockup small,.login-lockup small,.welcome-lockup small {
  display:flex;
  align-items:center;
  justify-self:center;
  gap:.38em;
  width:max-content;
  margin-top:-2px;
  color:#172a37;
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:.42rem;
  font-weight:850;
  letter-spacing:.075em;
  line-height:1.15;
  white-space:nowrap;
}
.brand-lockup small::before,.footer-lockup small::before,.login-lockup small::before,.welcome-lockup small::before,
.brand-lockup small::after,.footer-lockup small::after,.login-lockup small::after,.welcome-lockup small::after {
  display:block;
  width:2.8em;
  height:2px;
  flex:none;
  content:"";
}
.brand-lockup small::before,.footer-lockup small::before,.login-lockup small::before,.welcome-lockup small::before { background:#0878d1; }
.brand-lockup small::after,.footer-lockup small::after,.login-lockup small::after,.welcome-lockup small::after { background:#f5aa00; }
.brand .brand-logo { width:72px!important; height:67px!important; object-fit:contain; }
.footer-lockup .footer-logo { width:70px!important; height:65px!important; object-fit:contain; }
.login-lockup img { display:block; width:100px!important; height:92px!important; object-fit:contain; }
.welcome-lockup { justify-items:start; }.welcome-lockup .welcome-logo { width:156px!important; height:145px!important; margin:0!important; object-fit:contain; }
@media (max-width:700px) {
  .brand .brand-logo { width:58px!important; height:54px!important; }
  .footer-lockup .footer-logo { width:56px!important; height:52px!important; }
  .login-lockup img { width:86px!important; height:80px!important; }
  .welcome-lockup .welcome-logo { width:126px!important; height:117px!important; }
}

/* The sign-in card must fit its content rather than reserve a large empty area. */
@media (min-width:701px) {
  .auth-page .login-card { min-height:0!important; height:auto!important; padding:16px 34px 18px!important; transform:none!important; }
  .auth-page .login-brand { margin:0 auto 8px!important; }
  .auth-page .login-lockup img { width:72px!important; height:66px!important; }
  .auth-page .login-card h2 { font-size:1.55rem!important; }
  .auth-page .login-intro { margin:3px 0 10px!important; font-size:.86rem!important; }
  .auth-page .login-card>label { margin:8px 0 3px!important; font-size:.75rem!important; }
  .auth-page .login-input { height:40px!important; }
  .auth-page .login-options { margin:11px 0 13px!important; font-size:.75rem!important; }
  .auth-page .login-button { min-height:44px!important; }
  .auth-page .manager-switch { margin:8px 0 0!important; font-size:.68rem!important; }
}

/* Keep the public sign-in header aligned with the homepage header. */
@media (min-width:651px) {
  .auth-page .topbar {
    width:min(1520px,95%);
    height:82px!important;
    min-height:82px!important;
    margin:8px auto 0;
    padding:4px clamp(32px,4vw,56px)!important;
    gap:clamp(18px,3vw,48px)!important;
    border:1px solid #e6f0f5;
    border-radius:40px;
    box-shadow:0 6px 24px #0e4d7710;
  }
  .auth-page .brand { gap:8px; }
  .auth-page .brand-subtitle {
    display:block;
    padding-left:9px;
    border-left:1px solid #d5e6ef;
    color:#1b5790;
    font-size:.7rem;
    font-weight:700;
  }
  .auth-page .main-nav { flex:1; justify-content:center; gap:31px; }
  .auth-page .main-nav a {
    display:flex;
    align-items:center;
    gap:7px;
    padding:6px 2px;
    border-bottom-width:2px;
    color:#35546d;
    font-size:.84rem;
    font-weight:750;
    line-height:1.2;
    letter-spacing:0;
  }
  .auth-page .main-nav a::before { color:#0878d1; font-size:1rem; }
  .auth-page .main-nav a:nth-child(1)::before { content:"⌂"; }
  .auth-page .main-nav a:nth-child(2)::before { content:"▣"; }
  .auth-page .main-nav a:nth-child(3)::before { content:"♙"; }
  .auth-page .main-nav a[aria-current="page"] { color:#0878d1; }
  .auth-page .account-nav { gap:8px!important; }
  .auth-page .account-nav .nav-pill { padding:8px 17px; border-radius:22px; font-size:.78rem!important; font-weight:750; }
  .auth-page .account-nav .nav-primary { background:linear-gradient(100deg,#43aa35,#1685ae)!important; }
  .auth-page .person-icon { width:11px; height:11px; margin-right:3px; }
}
@media (min-width:651px) and (max-width:900px) {
  .auth-page .topbar { gap:15px!important; padding-right:17px!important; padding-left:17px!important; }
  .auth-page .brand { gap:8px; }
  .auth-page .main-nav { gap:13px; }
  .auth-page .main-nav a { font-size:.74rem; }
  .auth-page .account-nav .nav-pill { padding:7px 10px; font-size:.7rem!important; }
}
@media (max-width:650px) {
  .auth-page .topbar {
    width:94%;
    min-height:62px;
    margin:8px auto 0;
    padding:7px 10px!important;
    gap:8px 12px!important;
    border:1px solid #e6f0f5;
    border-radius:20px;
    box-shadow:0 6px 24px #0e4d7710;
    flex-wrap:wrap;
  }
  .auth-page .account-nav { gap:5px!important; }
  .auth-page .account-nav .nav-pill { padding:6px 9px; font-size:.65rem!important; }
  .auth-page .account-nav .person-icon { display:none; }
  .auth-page .main-nav { order:3; flex:1 0 100%; justify-content:center; gap:25px; padding-top:2px; }
  .auth-page .main-nav a { display:flex; align-items:center; gap:7px; font-size:.75rem; }
  .auth-page .main-nav a::before { color:#0878d1; font-size:1rem; }
  .auth-page .main-nav a:nth-child(1)::before { content:"⌂"; }
  .auth-page .main-nav a:nth-child(2)::before { content:"▣"; }
  .auth-page .main-nav a:nth-child(3)::before { content:"♙"; }
}

@media (min-width:701px) {
  .home-page .main-nav a,
  .auth-page .main-nav a { font-size:.72rem!important; }
  .home-page .landing-copy .eyebrow,
  .auth-page .login-kicker { font-size:.72rem!important; }
  .home-page .landing-copy h1,
  .auth-page .login-welcome h1 {
    font-size:clamp(1.7rem,2.4vw,1.9rem)!important;
    line-height:1.12!important;
  }
  .home-page .landing-copy>p,
  .auth-page .login-welcome>p { font-size:.86rem!important; line-height:1.45!important; }
  .home-page .landing-actions .apply-button,
  .home-page .landing-values,
  .auth-page .login-benefits strong,
  .auth-page .login-card>label,
  .auth-page .login-options,
  .auth-page .create-login-account { font-size:.76rem!important; }
  .home-page .featured-label,
  .auth-page .login-benefits small,
  .auth-page .manager-switch { font-size:.72rem!important; }
  .home-page .featured-copy h2 { font-size:.95rem!important; }
  .home-page .featured-copy p { font-size:.78rem!important; }
  .home-page .featured-link { font-size:.76rem!important; }
  .auth-page .login-card h2 { font-size:1.25rem!important; }
  .auth-page .login-intro { font-size:.84rem!important; }
  .auth-page .login-input input { font-size:.82rem!important; }
  .auth-page .login-button { font-size:.82rem!important; }
}
@media (max-width:700px) {
  .home-page .main-nav a,
  .auth-page .main-nav a { font-size:.72rem!important; }
  .home-page .landing-copy .eyebrow,
  .auth-page .login-kicker { font-size:.68rem!important; }
  .home-page .featured-label { font-size:.68rem!important; }
  .home-page .landing-copy h1 {
    font-size:clamp(1.45rem,6.5vw,1.7rem)!important;
    line-height:1.12!important;
  }
  .home-page .landing-copy>p,
  .auth-page .login-intro { font-size:.82rem!important; line-height:1.45!important; }
  .home-page .landing-actions .apply-button,
  .home-page .landing-values,
  .home-page .featured-copy p,
  .home-page .featured-link,
  .auth-page .login-card>label,
  .auth-page .login-options,
  .auth-page .login-button,
  .auth-page .create-login-account { font-size:.74rem!important; }
  .home-page .featured-copy h2 { font-size:.96rem!important; }
  .auth-page .login-card h2 { font-size:.96rem!important; }
  .auth-page .login-input input { font-size:.8rem!important; }
  .auth-page .manager-switch { font-size:.7rem!important; }
}

/* Read-only vacancy details opened from the posted-vacancies list. */
.management-main .vacancy-row-actions .vacancy-view-link {
  display:inline-flex; align-items:center; min-height:28px; padding:4px 8px;
  border:1px solid #0f7edb; border-radius:5px; color:#086ac2; font-weight:750; white-space:nowrap;
}
.management-main .vacancy-row-actions .vacancy-view-link:hover { background:#edf8ff; text-decoration:none; }
.vacancy-view-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.vacancy-view-heading-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.vacancy-view-heading-actions .button { min-height:34px; padding:7px 11px; font-size:.72rem; }
.vacancy-view-card { padding:18px; }
.vacancy-view-form { display:grid; gap:18px; }
.vacancy-view-form fieldset { min-width:0; margin:0; padding:16px; border:1px solid #d9e9f4; border-radius:10px; background:#fbfdff; }
.vacancy-view-form legend { padding:0 6px; color:#0a579f; font-size:.9rem; font-weight:800; }
.vacancy-view-form textarea[readonly], .vacancy-view-form input[readonly] { background:#f4f9fd; color:#254966; cursor:default; }
.vacancy-view-form textarea[readonly] { resize:vertical; }
@media (max-width:620px) {
  .vacancy-view-heading { flex-direction:column; }
  .vacancy-view-heading-actions { justify-content:flex-start; }
  .vacancy-view-form fieldset { padding:12px; }
}

/* Public vacancy posting cards. */
.vacancy-posting-card {
  display:block; max-width:1280px; margin:0 auto 20px; padding:22px 26px;
  border-color:#dbe9f0; border-radius:12px; background:#fff; box-shadow:0 8px 22px #143b5e0c;
}
.vacancy-posting-header { display:flex; justify-content:space-between; gap:28px; padding-bottom:16px; border-bottom:1px solid #dbe8ed; }
.vacancy-posting-title { display:flex; gap:15px; min-width:0; }
.vacancy-posting-card .vacancy-icon { display:grid; flex:0 0 auto; place-items:center; width:48px; height:48px; border-radius:12px; color:#0a7bce; background:#e7f5ff; font-size:1.55rem; }
.vacancy-posting-card h2 { margin:0 0 4px; color:#104f8d; font-size:1.18rem; }
.vacancy-department { display:inline-block; padding:3px 9px; border-radius:12px; color:#1267ad; background:#e6f4ff; font-size:.72rem; font-weight:750; }
.vacancy-meta { display:flex; flex-wrap:wrap; gap:8px 15px; margin:8px 0; color:#59718a; font-size:.78rem; }
.vacancy-meta span { white-space:nowrap; }
.vacancy-purpose { max-width:770px; margin:0; color:#4c687f; font-size:.82rem; line-height:1.48; }
.vacancy-application-state { flex:0 1 390px; min-width:260px; padding-top:3px; }
.vacancy-state-pill { display:inline-flex; align-items:center; padding:8px 13px; border-radius:16px; color:#996800; background:#fff4db; font-size:.77rem; font-weight:800; }
.vacancy-state-pill.is-open { color:#16703c; background:#e6f7eb; }
.vacancy-application-state p { margin:10px 0 0; padding:11px 13px; border-radius:7px; color:#3172a4; background:#eaf7ff; font-size:.76rem; line-height:1.35; }
.vacancy-detail-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; padding:16px 0; }
.vacancy-detail-panel { min-width:0; padding:15px 18px; border:1px solid #dbe8ed; border-radius:8px; background:#fff; }
.vacancy-detail-panel h3 { display:flex; align-items:center; gap:9px; margin:0 0 12px; color:#155589; font-size:.93rem; }
.vacancy-detail-panel h3 span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#0878d1; background:#e9f7ff; font-size:.9rem; }
.vacancy-detail-panel h4 { margin:14px 0 6px; color:#315a82; font-size:.8rem; }
.vacancy-posting-card .vacancy-bullet-list { margin:0; padding-left:18px; color:#59758a; font-size:.78rem; }
.vacancy-posting-card .vacancy-bullet-list li { margin:5px 0; line-height:1.38; }
.vacancy-posting-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:15px; border-top:1px solid #dbe8ed; }
.vacancy-deadline { display:flex; align-items:center; gap:10px; margin:0; color:#5a7489; font-size:.72rem; }
.vacancy-deadline>span:first-child { color:#0878d1; font-size:1.1rem; }.vacancy-deadline-copy { display:grid; gap:3px; color:#5a7489; }.vacancy-deadline-copy>span { font-size:.72rem; font-weight:700; }.vacancy-deadline strong { color:#315a82; font-size:.76rem; }
.vacancy-apply-action { display:grid; justify-items:end; gap:5px; }.vacancy-apply-action .button { min-width:210px; padding:9px 15px; font-size:.78rem; text-align:center; }.vacancy-apply-action small { color:#668197; font-size:.66rem; }
.vacancy-apply-disabled { color:#8da0ae!important; background:#e7eef2!important; box-shadow:none!important; cursor:not-allowed; }
@media (max-width:760px) {
  .vacancy-posting-card { padding:17px; }.vacancy-posting-header,.vacancy-posting-footer { align-items:flex-start; flex-direction:column; }.vacancy-application-state { min-width:0; width:100%; }.vacancy-detail-panels { grid-template-columns:1fr; gap:12px; }.vacancy-apply-action { justify-items:start; width:100%; }.vacancy-apply-action .button { width:100%; }
}

/* Four-stage applicant application portal. Review, declaration, and success occur after these stages. */
.applicant-main .applicant-application-wizard { max-width:none; margin:0; padding:0; overflow:hidden; border:0; background:transparent; box-shadow:none; }
.application-form-header { margin-bottom:14px; padding:2px 2px 0; }.application-form-header h1 { margin:3px 0 5px!important; color:#123f70; font-size:1.55rem!important; }.application-form-header>div>p:last-child { margin:0; color:#58738b; font-size:.82rem; }
.application-progress { display:grid; grid-template-columns:minmax(170px,.95fr) repeat(4,minmax(105px,1fr)); align-items:center; gap:10px; margin:0 0 18px; padding:17px 20px; border:1px solid #b9ddf2; border-radius:12px; background:linear-gradient(110deg,#effaff,#fff 58%,#f2fbf4); }
.application-progress-intro { display:grid; gap:5px; color:#124a80; }.application-progress-intro strong { font-size:1rem; }.application-progress-intro span { color:#6184a4; font-size:.78rem; }
.application-step { position:relative; display:grid; justify-items:center; gap:6px; min-width:0; padding:0; border:0; color:#4c78a3; background:transparent; font-weight:650; text-align:center; cursor:pointer; }.application-step:not(:last-child)::after { position:absolute; top:18px; left:calc(50% + 25px); width:calc(100% - 38px); height:2px; content:""; background:#bedcf2; }.application-step i { position:relative; z-index:1; display:grid; place-items:center; width:37px; height:37px; border:1px solid #a8d3f0; border-radius:50%; color:#1965a1; background:#fff; font-style:normal; font-weight:800; }.application-step span { font-size:.76rem; line-height:1.25; }.application-step.is-active { color:#0878d1; }.application-step.is-active i { color:#fff; border-color:#0878d1; background:linear-gradient(135deg,#0878d1,#08a4c5); box-shadow:0 5px 12px #0878d130; }.application-step.is-complete i { color:#fff; border-color:#46aa35; background:#46aa35; }
.application-step-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 28px; margin:0; padding:24px 28px 28px; border:1px solid #d5e9f4; border-radius:12px; background:#fff; box-shadow:0 7px 20px #0c4d7410; }.application-step-panel[hidden] { display:none; }.application-section-heading { grid-column:1/-1; display:flex; align-items:center; gap:13px; margin-bottom:3px; }.application-section-heading>span { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; color:#0878d1; background:#e3f4ff; font-size:1.35rem; }.application-section-heading h2 { margin:0; color:#123f70; font-size:1.28rem; }.application-section-heading p { margin:2px 0 0; color:#52789a; font-size:.82rem; }
.application-step-panel>label { margin:0; color:#123f70; font-size:.82rem; font-weight:750; }.application-step-panel input,.application-step-panel select,.application-step-panel textarea { margin-top:6px; border-color:#bddbf0; border-radius:8px; }.application-step-panel input:focus,.application-step-panel select:focus,.application-step-panel textarea:focus { outline:0; border-color:#0878d1; box-shadow:0 0 0 3px #0878d114; }.application-step-panel>.field-help { grid-column:1/-1; margin:0; }.application-step-panel>.card,.application-step-panel>.application-subsection,.application-step-panel>h3 { grid-column:1/-1; }.application-step-panel>.card { margin:0; padding:16px; border-color:#dceaf1; box-shadow:none; }.application-step-panel>.card h3,.application-step-panel>h3,.application-subsection h3 { margin:0 0 8px; color:#174e81; font-size:.95rem; }.application-step-panel>.card { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px; }.application-step-panel>.card h3 { grid-column:1/-1; }.application-step-panel>.card label { margin:0; }.application-subsection { margin:0; padding-top:5px; }.application-subsection label { margin:10px 0 0; }.application-subsection input,.application-subsection textarea,.application-subsection select { margin-top:5px; }
.academic-certificates { display:grid; gap:9px; }.academic-certificates label { margin:0; }.academic-certificates .field-help { margin:0; }.add-certificate { justify-self:start; min-width:0!important; padding:7px 11px!important; font-size:.76rem!important; }.additional-academic-certificate { display:flex; align-items:center; gap:8px; }.additional-academic-certificate input { margin:0!important; }.remove-certificate { min-width:0!important; padding:7px 10px!important; color:#a6312a!important; border:1px solid #efc4c0!important; background:#fff5f4!important; font-size:.72rem!important; }.saved-certificates { color:#397252!important; }
.application-wizard-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0 6px; padding-top:17px; border-top:1px solid #d6e7f1; }.application-wizard-actions>div { display:flex; gap:10px; }.application-wizard-actions button { min-width:112px; }.application-wizard-actions .secondary { color:#1161a2; border:1px solid #1685f2; background:#f7fbff; }.application-wizard-actions [data-application-next],.application-wizard-actions [data-eligibility-submit] { color:#fff; border:0; background:linear-gradient(100deg,#49b834,#0878d1); }.application-wizard-actions button:disabled { color:#9ab1c3; border-color:#dce7ee; background:#edf2f6; cursor:not-allowed; }.application-wizard-actions [hidden] { display:none!important; }
.application-autosave-status { flex:1; color:#53758c; font-size:.74rem; }.application-autosave-status[data-state="saving"],.application-autosave-status[data-state="pending"] { color:#926500; }.application-autosave-status[data-state="saved"] { color:#277344; }.application-autosave-status[data-state="error"] { color:#a52e2e; }
@media (max-width:900px) { .application-progress { grid-template-columns:1fr repeat(4,minmax(76px,1fr)); padding:14px; }.application-step span { font-size:.68rem; }.application-step:not(:last-child)::after { left:calc(50% + 21px); width:calc(100% - 30px); }.application-step i { width:32px; height:32px; } }
@media (max-width:680px) { .application-progress { grid-template-columns:repeat(4,1fr); gap:5px; }.application-progress-intro { grid-column:1/-1; padding-bottom:8px; }.application-step:not(:last-child)::after { display:none; }.application-step span { font-size:.63rem; }.application-step i { width:29px; height:29px; }.application-step-panel { grid-template-columns:1fr; padding:18px; }.application-step-panel>.card { grid-template-columns:1fr; }.application-wizard-actions { align-items:stretch; flex-direction:column; }.application-wizard-actions>div { display:grid; grid-template-columns:1fr 1fr; }.application-wizard-actions>div button:last-child { grid-column:1/-1; }.application-wizard-actions>button { width:100%; } }
.applicant-main .application-final-progress { display:flex; justify-content:flex-end; gap:10px; margin:0 0 14px; color:#65839b; font-size:.76rem; }.application-final-progress span { display:flex; align-items:center; gap:6px; }.application-final-progress i { display:grid; place-items:center; width:27px; height:27px; border:1px solid #b9d9ee; border-radius:50%; font-style:normal; font-weight:800; }.application-final-progress .is-active { color:#0878d1; font-weight:800; }.application-final-progress .is-active i { color:#fff; border-color:#0878d1; background:#0878d1; }.application-final-progress .is-complete i { color:#fff; border-color:#48aa38; background:#48aa38; }
.application-declaration { display:grid; gap:12px; margin-top:18px; padding:16px; border:1px solid #cce4f3; border-radius:10px; background:#f7fcff; }.application-declaration h2 { margin:0; color:#124b80; font-size:1rem; }.application-declaration h2 span { display:inline-grid; place-items:center; width:26px; height:26px; margin-right:7px; border-radius:50%; color:#fff; background:#0878d1; font-size:.78rem; }.application-declaration label { margin:0; }.application-declaration button { justify-self:start; background:linear-gradient(100deg,#49b834,#0878d1); }
.management-main .application-declaration>label { display:flex; align-items:flex-start; gap:8px; line-height:1.45; }
.management-main .application-declaration>label>input[type="checkbox"] { display:inline-block; flex:none; width:16px; min-height:16px; height:16px; margin:3px 0 0; padding:0; accent-color:#0878d1; }
.applicant-main .application-review-actions { display:grid; grid-template-columns:minmax(150px,.32fr) minmax(0,1.68fr); align-items:start; gap:12px; margin:18px 0 0; }
.application-review-actions>.button { justify-self:start; min-height:42px; }
.application-review-actions .application-declaration { min-width:0; margin:0; padding:16px; }
@media (max-width:680px) { .applicant-main .application-review-actions { grid-template-columns:1fr; }.application-review-actions>.button { width:100%; justify-content:center; }.application-review-actions .application-declaration { width:100%; } }

/* The application-step controls are navigation, not primary action buttons. */
.applicant-main .application-step,
.applicant-main .application-step:hover {
  min-height:0; padding:0; color:#315e8c!important; background:transparent!important;
  box-shadow:none!important; transform:none!important;
}
.applicant-main .application-step span { position:relative; z-index:2; color:#315e8c!important; text-shadow:0 1px #fff; }
.applicant-main .application-step.is-active span { color:#0878d1!important; font-weight:800; }
.applicant-main .application-step.is-complete span { color:#26813d!important; }

/* Login composition based on the supplied reference: welcome, centered form, and a visible image area. */
@media (min-width:1101px) {
  .auth-page {
    background:
      linear-gradient(90deg,#f4fbfff5 0%,#f4fbffed 31%,#f4fbffc9 46%,#f4fbff52 68%,#f4fbff24 100%),
      url("login-office-workspace.jpg") right center / cover fixed no-repeat!important;
  }
  .auth-page::before,.auth-page::after,.auth-page .login-layout::before,.auth-page .login-layout::after {
    display:none!important;
  }
  .auth-page>main.container {
    width:min(1470px,94%);
    padding:12px 0!important;
  }
  .auth-page .login-layout {
    grid-template-columns:minmax(300px,.95fr) minmax(390px,1.05fr) minmax(180px,.7fr)!important;
    gap:clamp(22px,3vw,46px)!important;
    align-items:center!important;
  }
  .auth-page .login-welcome {
    grid-column:1;
    max-width:480px;
    padding:0!important;
    transform:none!important;
  }
  .auth-page .login-kicker { font-size:.72rem!important; }
  .auth-page .login-welcome h1 {
    margin:15px 0 12px!important;
    font-size:clamp(2rem,3.2vw,2.85rem)!important;
    line-height:1.08!important;
  }
  .auth-page .login-welcome>p { font-size:.91rem!important; line-height:1.5!important; }
  .auth-page .login-benefits {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 10px;
    margin-top:22px!important;
  }
  .auth-page .login-benefits>div,
  .auth-page .login-benefits>div+div { padding:0 10px 0 0; border-right:0; }
  .auth-page .login-benefits span { width:40px; height:40px; margin-bottom:6px; font-size:1.05rem; }
  .auth-page .login-benefits strong { font-size:.72rem!important; }
  .auth-page .login-benefits small { margin-top:3px; font-size:.64rem!important; }
  .auth-page .login-signoff {
    position:absolute;
    right:0;
    bottom:4px;
    left:0;
    display:flex!important;
    justify-content:center;
    margin:0!important;
    font-family:"Segoe UI",Arial,sans-serif;
    font-size:.62rem!important;
    font-style:normal;
    font-weight:800;
    letter-spacing:.2em;
    text-transform:uppercase;
  }
  .auth-page .login-signoff::after { display:none; }
  .auth-page .login-card {
    grid-column:2;
    justify-self:center;
    width:100%!important;
    max-width:440px!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    padding:20px 34px 22px!important;
    overflow:visible!important;
    transform:none!important;
    border:1px solid #e2edf3;
    border-radius:17px;
    background:#ffffffed!important;
    box-shadow:0 16px 38px #123c5d20;
  }
  .auth-page .login-brand { margin:0 auto 10px!important; }
  .auth-page .login-lockup img { width:82px!important; height:76px!important; }
  .auth-page .login-card h2 { font-size:1.58rem!important; }
  .auth-page .login-intro { margin:3px 0 10px!important; font-size:.86rem!important; }
  .auth-page .login-card>label { margin:8px 0 3px!important; font-size:.75rem!important; }
  .auth-page .login-input { height:40px!important; }
  .auth-page .login-options { margin:10px 0 12px!important; font-size:.74rem!important; }
  .auth-page .login-button { min-height:45px!important; }
  .auth-page .login-divider { margin:11px 0!important; }
  .auth-page .create-login-account { min-height:42px!important; }
}

@media (min-width:701px) and (max-width:1100px) {
  .auth-page {
    background:
      linear-gradient(90deg,#f4fbfff2,#f4fbffb8),
      url("login-office-workspace.jpg") center / cover fixed no-repeat!important;
  }
}

@media (max-width:700px) {
  .auth-page {
    background:
      linear-gradient(180deg,#f4fbfff0,#f4fbffcf),
      url("login-office-workspace.jpg") center / cover fixed no-repeat!important;
  }
}

/* Match the supplied sign-in reference: wide header, left welcome panel, central form, and open image area on the right. */
@media (min-width:1101px) {
  html:has(body.auth-page) { min-height:100%; background:#eef7fc; }
  .auth-page {
    min-height:100vh!important;
    background:
      linear-gradient(rgba(244,251,255,.78),rgba(244,251,255,.78)),
      url("login-office-workspace.jpg") center / cover fixed no-repeat!important;
  }
  .auth-page::before,.auth-page::after,.auth-page .login-layout::before,.auth-page .login-layout::after { display:none!important; }
  .auth-page .topbar {
    width:calc(100% - 30px)!important;
    height:72px!important;
    min-height:72px!important;
    margin:0 15px!important;
    padding:4px clamp(36px,5vw,68px)!important;
    gap:clamp(20px,4vw,54px)!important;
    border:0!important;
    border-radius:0 0 34px 34px!important;
    box-shadow:0 6px 20px #173b5e18!important;
  }
  .auth-page .auth-header-brand { gap:10px; }
  .auth-page .auth-header-emblem { width:52px; height:52px; object-fit:contain; }
  .auth-page .auth-header-wordmark { display:grid; gap:1px; color:#123e70; line-height:1; }
  .auth-page .auth-header-wordmark strong { font-size:1.04rem; font-weight:900; white-space:nowrap; }
  .auth-page .auth-header-wordmark small { font-size:.39rem; font-weight:850; letter-spacing:.06em; white-space:nowrap; }
  .auth-page .auth-header-divider { width:1px; height:34px; margin:0 5px; background:#bdd4e0; }
  .auth-page .auth-header-brand .brand-subtitle { padding-left:0; border:0; color:#153d67; font-size:.95rem; font-weight:800; }
  .auth-page .main-nav { flex:1; justify-content:center; gap:clamp(22px,3vw,42px); }
  .auth-page .main-nav a { font-size:.8rem; }
  .auth-page .account-nav { gap:9px!important; }
  .auth-page .account-nav .nav-pill { padding:8px 15px; font-size:.76rem!important; }
  .auth-page .auth-header-emblem { width:52px; height:52px; }
  .auth-page .auth-header-wordmark strong { font-size:1.04rem; }
  .auth-page .auth-header-wordmark small { font-size:.39rem; }
  .auth-page .auth-header-divider { height:34px; }
  .auth-page .auth-header-brand .brand-subtitle { font-size:.95rem; }
  .auth-page>main.container {
    width:100%!important;
    max-width:none!important;
    min-height:0;
    padding:0 0 70px!important;
    overflow:visible!important;
    background:transparent!important;
  }
  .auth-page .login-layout {
    width:100%;
    height:auto!important;
    min-height:0;
    grid-template-columns:minmax(360px,380px) minmax(400px,414px) minmax(190px,1fr)!important;
    gap:20px!important;
    align-items:center!important;
    padding:0 4vw 0 6vw;
  }
  .auth-page .login-welcome {
    grid-column:1;
    grid-row:1;
    max-width:380px;
    padding:0!important;
    transform:none!important;
  }
  .auth-page .login-side-note {
    grid-column:3;
    grid-row:1;
    max-width:330px;
    padding-left:clamp(0px,1.3vw,18px);
    color:#103d70;
  }
  .auth-page .login-side-note .login-kicker { padding-bottom:8px; font-size:.7rem!important; }
  .auth-page .login-side-note h2 {
    margin:16px 0 13px;
    color:#123f72;
    font-size:clamp(1.65rem,2.4vw,2.25rem);
    line-height:1.08;
    letter-spacing:-.035em;
  }
  .auth-page .login-side-note>p { margin:0; color:#29547f; font-size:.85rem; line-height:1.48; }
  .auth-page .login-side-values { display:grid; gap:10px; margin-top:23px; }
  .auth-page .login-side-values>div { display:flex; align-items:center; gap:10px; color:#174777; font-size:.76rem; font-weight:750; }
  .auth-page .login-side-values span {
    display:grid;
    flex:none;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:50%;
    color:#0d5b9f;
    background:#dff1f8;
    font-size:.95rem;
  }
  .auth-page .login-side-values>div:nth-child(2) span { color:#397f26; background:#fff3cd; }
  .auth-page .login-side-values>div:nth-child(3) span { color:#1470b4; background:#dff3fa; }
  .auth-page .login-kicker { padding-bottom:8px; font-size:.7rem!important; }
  .auth-page .login-welcome h1 {
    margin:16px 0 13px!important;
    font-size:clamp(2.15rem,3.35vw,2.8rem)!important;
    line-height:1.08!important;
  }
  .auth-page .login-welcome>p { font-size:.88rem!important; line-height:1.48!important; }
  .auth-page .login-benefits {
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:0!important;
    margin-top:30px!important;
  }
  .auth-page .login-benefits>div:nth-child(2) { display:none; }
  .auth-page .login-benefits>div,
  .auth-page .login-benefits>div+div {
    padding:0 9px!important;
    border-right:1px solid #bfd4e4!important;
  }
  .auth-page .login-benefits>div:first-child { padding-left:0!important; }
  .auth-page .login-benefits>div:last-child { border-right:0!important; }
  .auth-page .login-benefits span { width:42px; height:42px; margin-bottom:8px; font-size:1.05rem; }
  .auth-page .login-benefits strong { font-size:.68rem!important; }
  .auth-page .login-benefits small { margin-top:5px; font-size:.61rem!important; line-height:1.35; }
  .auth-page .login-signoff {
    position:absolute;
    right:0;
    bottom:-54px;
    left:0;
    display:flex!important;
    justify-content:center;
    gap:12px;
    margin:0!important;
    color:#6989a7;
    font-family:"Segoe UI",Arial,sans-serif;
    font-size:.58rem!important;
    font-style:normal;
    font-weight:800;
    letter-spacing:.2em;
  }
  .auth-page .login-signoff i { width:4px; height:4px; border-radius:50%; background:#4a9d22; }
  .auth-page .login-signoff::after { display:none; }
  .auth-page .login-card {
    grid-column:2;
    grid-row:1;
    justify-self:start;
    width:414px!important;
    max-width:100%!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    padding:18px 34px 22px!important;
    overflow:visible!important;
    transform:none!important;
    border:1px solid #e4edf3;
    border-radius:17px;
    background:#ffffffed!important;
    box-shadow:0 14px 36px #173b5e1c;
  }
  .auth-page .login-brand {
    display:flex;
    flex-direction:row;
    justify-content:center;
    gap:10px;
    margin:0 auto 12px!important;
  }
  .auth-page .login-brand-emblem { width:58px!important; height:58px!important; object-fit:contain; }
  .auth-page .login-brand-copy { display:grid; align-content:center; gap:3px; color:#123e70; }
  .auth-page .login-brand-copy strong { font-size:1.25rem; font-weight:900; line-height:1; white-space:nowrap; }
  .auth-page .login-brand-copy small { color:#17436d; font-size:.45rem; font-weight:850; letter-spacing:.06em; white-space:nowrap; }
  .auth-page .login-card h2 { font-size:1.56rem!important; }
  .auth-page .login-intro { margin:2px 0 12px!important; font-size:.86rem!important; }
  .auth-page .login-card>label { margin:8px 0 3px!important; font-size:.75rem!important; }
  .auth-page .login-input { height:40px!important; }
  .auth-page .login-options { margin:10px 0 13px!important; font-size:.74rem!important; }
  .auth-page .login-button { min-height:46px!important; }
  .auth-page .login-divider { margin:11px 0!important; }
  .auth-page .create-login-account { min-height:42px!important; }
}

@media (max-width:650px) {
  .auth-page .login-side-note { display:none; }
  .auth-page .auth-header-brand { gap:7px; }
  .auth-page .auth-header-emblem { width:42px; height:42px; flex:none; object-fit:contain; }
  .auth-page .auth-header-wordmark { display:grid; gap:1px; color:#123e70; line-height:1; }
  .auth-page .auth-header-wordmark strong { font-size:.82rem; font-weight:900; white-space:nowrap; }
  .auth-page .auth-header-wordmark small { font-size:.34rem; font-weight:850; letter-spacing:.04em; white-space:nowrap; }
  .auth-page .auth-header-divider { width:1px; height:25px; margin:0 2px; background:#bdd4e0; }
  .auth-page .auth-header-brand .brand-subtitle { padding-left:0; border:0; color:#153d67; font-size:.78rem; }
}

/* Keep the KBS emblem, wordmark, and tagline in one lockup across the portal. */
.kbs-logo-lockup {
  display:grid;
  flex:none;
  justify-items:center;
  align-content:center;
  color:#123f70;
  line-height:1;
  text-align:center;
  white-space:nowrap;
}
.kbs-logo-lockup img {
  display:block;
  width:38px;
  height:35px;
  margin:0 0 1px;
  object-fit:contain;
}
.kbs-logo-lockup strong {
  color:#123f70;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:-.025em;
  line-height:1;
}
.kbs-logo-lockup small {
  display:flex;
  align-items:center;
  justify-self:center;
  gap:.38em;
  width:max-content;
  margin-top:2px;
  color:#123f70;
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:.36rem;
  font-weight:850;
  letter-spacing:.055em;
  line-height:1.15;
}
.kbs-logo-lockup small::before,
.kbs-logo-lockup small::after {
  display:block;
  width:2.8em;
  height:2px;
  flex:none;
  content:"";
}
.kbs-logo-lockup small::before { background:#0878d1; }
.kbs-logo-lockup small::after { background:#f5aa00; }
.kbs-logo-header img { width:38px; height:35px; }
.kbs-logo-header strong { font-size:.72rem; }
.kbs-logo-header small { font-size:.36rem; }
.kbs-logo-footer img { width:30px; height:28px; }
.kbs-logo-footer strong { font-size:.59rem; }
.kbs-logo-footer small { font-size:.3rem; }
.kbs-logo-login img { width:58px; height:54px; }
.kbs-logo-login strong { font-size:1rem; }
.kbs-logo-login small { font-size:.46rem; }
.kbs-logo-welcome { position:relative; z-index:1; margin:0 0 8px; }
.kbs-logo-welcome img { width:82px; height:76px; }
.kbs-logo-welcome strong { font-size:1.15rem; }
.kbs-logo-welcome small { font-size:.52rem; }
.kbs-logo-login { margin:0 auto 12px; }
@media (max-width:650px) {
  .kbs-logo-header img { width:34px; height:31px; }
  .kbs-logo-header strong { font-size:.65rem; }
  .kbs-logo-header small { font-size:.32rem; }
  .kbs-logo-login img { width:50px; height:47px; }
  .kbs-logo-login strong { font-size:.9rem; }
  .kbs-logo-login small { font-size:.41rem; }
  .kbs-logo-welcome img { width:68px; height:63px; }
  .kbs-logo-welcome strong { font-size:1rem; }
  .kbs-logo-welcome small { font-size:.46rem; }
}

[data-eligibility-submit].is-ineligible { opacity:.55; cursor:help; }
.eligibility-submit-hint { margin:0 0 12px; }