:root {
  --hrtalk-forest-950: #06271f;
  --hrtalk-forest-900: #08392b;
  --hrtalk-forest-800: #0b4d38;
  --hrtalk-forest-700: #0d6545;
  --hrtalk-forest-600: #128057;
  --hrtalk-forest-100: #dff1e8;
  --hrtalk-forest-50: #eef8f3;
  --hrtalk-gold: #c8a86a;
  --hrtalk-gold-soft: #ead9b7;
  --hrtalk-ink: #14221c;
  --hrtalk-muted: #647169;
  --hrtalk-line: #dbe3dd;
  --hrtalk-surface: #fffefa;
  --hrtalk-canvas: #f4f2ec;
  --hrtalk-danger: #b42318;
  --hrtalk-warning: #93621b;
  --hrtalk-radius-sm: 14px;
  --hrtalk-radius: 20px;
  --hrtalk-radius-lg: 30px;
  --hrtalk-shadow-sm: 0 10px 30px rgba(6, 39, 31, .06);
  --hrtalk-shadow: 0 22px 70px rgba(6, 39, 31, .12);
  --hrtalk-bottom-h: 70px;
  --hrtalk-safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-family: "Noto Sans Thai", system-ui, sans-serif !important; color: var(--hrtalk-ink); background: var(--hrtalk-canvas); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body { color: var(--hrtalk-ink); background: var(--hrtalk-canvas); }
a, button, input, textarea, select { -webkit-tap-highlight-color: transparent; }

/* Authentication: premium, mobile first */
.hrtalk-auth { min-height: 100dvh; margin: 0; background: var(--hrtalk-canvas); }
.hrtalk-auth-shell { position: relative; min-height: 100dvh; display: grid; grid-template-rows: minmax(230px, 31vh) 1fr; overflow: hidden; }
.hrtalk-auth-hero { position: relative; isolation: isolate; overflow: hidden; padding: max(24px, env(safe-area-inset-top)) 22px 56px; color: #fff; background: radial-gradient(circle at 12% 16%, rgba(234, 217, 183, .22), transparent 34%), radial-gradient(circle at 90% 90%, rgba(87, 168, 126, .23), transparent 38%), linear-gradient(145deg, var(--hrtalk-forest-950), var(--hrtalk-forest-700)); }
.hrtalk-auth-hero::before, .hrtalk-auth-hero::after { content: ""; position: absolute; z-index: -1; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; }
.hrtalk-auth-hero::before { width: 260px; height: 260px; right: -120px; top: -104px; box-shadow: 0 0 0 36px rgba(255, 255, 255, .025), 0 0 0 78px rgba(255, 255, 255, .02); }
.hrtalk-auth-hero::after { width: 140px; height: 140px; left: -86px; bottom: -78px; }
.hrtalk-hero-content { width: min(560px, 100%); margin: 0 auto; position: relative; z-index: 1; }
.hrtalk-hero-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 5px 11px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .88); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(10px); }
.hrtalk-hero-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hrtalk-gold-soft); box-shadow: 0 0 0 4px rgba(234, 217, 183, .12); }
.hrtalk-hero-title { max-width: 16ch; margin: 18px 0 8px; color: #fff; font-size: clamp(1.6rem, 7vw, 2.25rem); font-weight: 650; line-height: 1.25; letter-spacing: -.025em; }
.hrtalk-hero-copy { max-width: 36ch; margin: 0; color: rgba(255, 255, 255, .72); font-size: .9rem; line-height: 1.65; }
.hrtalk-auth-panel { position: relative; z-index: 2; margin-top: -30px; padding: 28px 20px calc(28px + var(--hrtalk-safe-bottom)); border-radius: var(--hrtalk-radius-lg) var(--hrtalk-radius-lg) 0 0; background: var(--hrtalk-surface); box-shadow: 0 -14px 50px rgba(6, 39, 31, .13); }
.hrtalk-panel-inner { width: min(480px, 100%); margin: 0 auto; }
.hrtalk-auth-brand { margin-bottom: 22px; text-align: left; }
.hrtalk-auth-logo { display: block; width: auto; height: 50px; max-width: 180px; margin: 0 0 18px; object-fit: contain; object-position: left center; }
.hrtalk-auth-kicker { margin: 0 0 4px; color: var(--hrtalk-forest-700); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hrtalk-auth-title { margin: 0 0 7px; color: var(--hrtalk-ink); font-size: clamp(1.65rem, 6vw, 2.15rem); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; }
.hrtalk-auth-sub { max-width: 38ch; margin: 0; color: var(--hrtalk-muted); font-size: .92rem; line-height: 1.65; }
.hrtalk-auth-form { display: grid; gap: 16px; margin-top: 8px; }
.hrtalk-field { display: grid; gap: 7px; margin: 0; color: var(--hrtalk-ink); font-size: .88rem; font-weight: 650; }
.hrtalk-field-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hrtalk-field-row a, .hrtalk-auth-footer a, .hrtalk-auth-link { color: var(--hrtalk-forest-700); font-weight: 650; text-decoration: none; }
.hrtalk-field-row a { font-size: .82rem; }
.hrtalk-field input, .hrtalk-field textarea, .hrtalk-field select { width: 100%; min-height: 52px; border: 1px solid var(--hrtalk-line); border-radius: var(--hrtalk-radius-sm); padding: 12px 14px; color: var(--hrtalk-ink); background: #fff; box-shadow: 0 1px 0 rgba(6, 39, 31, .02); font: inherit; font-size: 1rem; font-weight: 450; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.hrtalk-field input::placeholder, .hrtalk-field textarea::placeholder { color: #9ba49f; }
.hrtalk-field input:focus, .hrtalk-field textarea:focus, .hrtalk-field select:focus { outline: none; border-color: var(--hrtalk-forest-600); box-shadow: 0 0 0 4px rgba(18, 128, 87, .11), 0 10px 24px rgba(6, 39, 31, .05); }
.hrtalk-field input.is-invalid { border-color: #d87a72; }
.hrtalk-check { display: flex; align-items: center; gap: 10px; min-height: 30px; color: var(--hrtalk-muted); font-size: .9rem; cursor: pointer; }
.hrtalk-check input { width: 19px; height: 19px; margin: 0; border: 1px solid #b9c6be; border-radius: 6px; accent-color: var(--hrtalk-forest-700); }
.hrtalk-btn-primary { position: relative; min-height: 54px; border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--hrtalk-radius-sm); padding: 11px 18px; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--hrtalk-forest-700), var(--hrtalk-forest-900)); box-shadow: 0 14px 28px rgba(8, 57, 43, .2), inset 0 1px 0 rgba(255, 255, 255, .12); font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.hrtalk-btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 22%, rgba(255,255,255,.12) 46%, transparent 70%); transform: translateX(-120%); transition: transform .55s ease; }
.hrtalk-btn-primary:hover::after { transform: translateX(120%); }
.hrtalk-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 17px 34px rgba(8, 57, 43, .25); }
.hrtalk-btn-primary:active { transform: translateY(0); }
.hrtalk-btn-primary:disabled { opacity: .65; cursor: wait; }
.hrtalk-auth-note, .hrtalk-auth-footer { margin: 18px 0 0; color: var(--hrtalk-muted); text-align: center; font-size: .86rem; line-height: 1.55; }
.hrtalk-auth-footer { padding-top: 18px; border-top: 1px solid #e7ebe8; }
.hrtalk-trust { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 18px 0 0; color: #77837c; font-size: .75rem; }
.hrtalk-trust::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #35a86f; box-shadow: 0 0 0 4px rgba(53, 168, 111, .1); }
.hrtalk-alert { margin-bottom: 16px; border: 1px solid #efc9c4; border-radius: var(--hrtalk-radius-sm); padding: 12px 14px; color: var(--hrtalk-danger); background: #fff6f4; font-size: .88rem; line-height: 1.5; }
.hrtalk-alert.is-success { border-color: #b9ddca; color: var(--hrtalk-forest-800); background: var(--hrtalk-forest-50); }
.hrtalk-error { color: var(--hrtalk-danger); font-size: .8rem; font-weight: 550; }

@media (min-width: 768px) {
  .hrtalk-auth-shell { min-height: 100dvh; grid-template-columns: minmax(320px, 1.05fr) minmax(440px, .95fr); grid-template-rows: 1fr; }
  .hrtalk-auth-hero { display: flex; align-items: flex-end; min-height: 100dvh; padding: clamp(42px, 7vw, 86px); }
  .hrtalk-auth-hero::before { width: 520px; height: 520px; right: -210px; top: -170px; box-shadow: 0 0 0 70px rgba(255, 255, 255, .025), 0 0 0 145px rgba(255, 255, 255, .018); }
  .hrtalk-hero-content { margin: 0; }
  .hrtalk-hero-title { font-size: clamp(2.35rem, 4.3vw, 4.6rem); line-height: 1.15; }
  .hrtalk-hero-copy { font-size: 1rem; }
  .hrtalk-auth-panel { display: flex; align-items: center; margin: 0; border-radius: 0; padding: clamp(42px, 6vw, 86px); box-shadow: -30px 0 80px rgba(6, 39, 31, .09); }
  .hrtalk-auth-brand { margin-bottom: 28px; }
  .hrtalk-auth-logo { height: 58px; margin-bottom: 24px; }
}

@media (min-width: 1280px) { .hrtalk-auth-shell { grid-template-columns: 56% 44%; } .hrtalk-panel-inner { width: min(460px, 100%); } }

/* App shell */
body.hrtalk-app { min-height: 100dvh; padding-bottom: calc(var(--hrtalk-bottom-h) + var(--hrtalk-safe-bottom) + 18px); background: radial-gradient(circle at 100% 0, rgba(200,168,106,.09), transparent 28rem), var(--hrtalk-canvas); }
.hrtalk-topbar { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 66px; padding: max(8px, env(safe-area-inset-top)) 15px 8px; border-bottom: 1px solid rgba(219, 227, 221, .85); background: rgba(255, 254, 250, .9); box-shadow: 0 8px 30px rgba(6, 39, 31, .04); backdrop-filter: blur(18px) saturate(150%); }
.hrtalk-topbar-brand { display: flex; align-items: center; gap: 11px; min-width: 0; color: inherit; text-decoration: none; }
.hrtalk-topbar-brand img { width: auto; height: 38px; max-width: 112px; object-fit: contain; }
.hrtalk-topbar-brand strong { display: block; overflow: hidden; color: var(--hrtalk-forest-900); font-size: .98rem; font-weight: 750; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.hrtalk-topbar-brand small { display: block; margin-top: 2px; color: var(--hrtalk-muted); font-size: .68rem; }
.hrtalk-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid rgba(13, 101, 69, .1); border-radius: 14px; color: var(--hrtalk-forest-800); background: var(--hrtalk-forest-50); font-size: 1.2rem; }
.hrtalk-main { width: min(1080px, 100%); margin: 0 auto; padding: 16px 14px 28px; }
.hrtalk-welcome { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 18px; margin-bottom: 14px; border: 0; border-radius: 24px; padding: 22px 20px; color: #fff; background: linear-gradient(140deg, var(--hrtalk-forest-900), var(--hrtalk-forest-700)); box-shadow: 0 18px 45px rgba(6, 39, 31, .16); }
.hrtalk-welcome::after { content: ""; position: absolute; z-index: -1; width: 180px; height: 180px; right: -68px; top: -90px; border: 28px solid rgba(255,255,255,.055); border-radius: 50%; }
.hrtalk-welcome-kicker { margin: 0 0 6px; color: var(--hrtalk-gold-soft); font-size: .72rem; font-weight: 700; letter-spacing: .07em; }
.hrtalk-welcome h1 { margin: 0; color: #fff; font-size: clamp(1.45rem, 6vw, 2rem); font-weight: 700; line-height: 1.25; }
.hrtalk-welcome p { max-width: 50ch; margin: 6px 0 0; color: rgba(255,255,255,.72); font-size: .88rem; line-height: 1.55; }
.hrtalk-welcome .btn { width: 100%; border-color: rgba(255,255,255,.16) !important; color: var(--hrtalk-forest-900) !important; background: #fff !important; box-shadow: 0 10px 25px rgba(0,0,0,.12); }
.hrtalk-main .card { overflow: hidden; border: 1px solid rgba(219, 227, 221, .9); border-radius: var(--hrtalk-radius); background: rgba(255, 254, 250, .97); box-shadow: var(--hrtalk-shadow-sm); }
.hrtalk-main .card-header { border-bottom: 1px solid #e7ece8; padding: 18px; background: transparent; }
.hrtalk-main .card-header h5 { color: var(--hrtalk-forest-950); font-weight: 700; letter-spacing: -.015em; }
.hrtalk-main .card-body { padding: 16px 18px 20px; }
.hrtalk-main .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; border-radius: 13px; padding-inline: 16px; font-weight: 650; transition: transform .18s ease, box-shadow .18s ease; }
.hrtalk-main .btn:active { transform: translateY(1px); }
.hrtalk-main .btn-primary, .hrtalk-main .btn-outline-primary { --bs-btn-bg: var(--hrtalk-forest-700); --bs-btn-border-color: var(--hrtalk-forest-700); --bs-btn-hover-bg: var(--hrtalk-forest-900); --bs-btn-hover-border-color: var(--hrtalk-forest-900); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; box-shadow: 0 10px 24px rgba(13, 101, 69, .14); }
.hrtalk-main .btn-outline-primary { --bs-btn-bg: transparent; --bs-btn-color: var(--hrtalk-forest-700); --bs-btn-hover-bg: var(--hrtalk-forest-700); }
.hrtalk-main .btn-outline-dark { --bs-btn-color: var(--hrtalk-forest-900); --bs-btn-border-color: #cfd8d2; --bs-btn-hover-bg: var(--hrtalk-forest-50); --bs-btn-hover-color: var(--hrtalk-forest-900); --bs-btn-hover-border-color: var(--hrtalk-forest-700); }

.hrtalk-list { display: grid; gap: 12px; }
.hrtalk-item { display: grid; gap: 11px; border: 1px solid #e0e7e2; border-radius: 17px; padding: 15px; background: #fff; box-shadow: 0 8px 24px rgba(6, 39, 31, .045); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.hrtalk-item:active { transform: scale(.995); }
.hrtalk-item-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.hrtalk-chip { display: inline-flex; align-items: center; min-height: 29px; border: 1px solid rgba(13, 101, 69, .08); border-radius: 999px; padding: 3px 10px; color: var(--hrtalk-forest-800); background: var(--hrtalk-forest-50); font-size: .76rem; font-weight: 650; }
.hrtalk-chip.is-done { border-color: #dfe5e1; color: var(--hrtalk-muted); background: #f2f4f2; }
.hrtalk-item-title { margin: 0; color: var(--hrtalk-ink); font-size: .98rem; font-weight: 600; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.hrtalk-item-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--hrtalk-muted); font-size: .79rem; }
.hrtalk-item-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 2px; }
.hrtalk-item-actions .btn { width: 100%; font-size: .88rem; }
.hrtalk-desktop-table { display: none; }
.hrtalk-empty-state { padding: 34px 18px; text-align: center; color: var(--hrtalk-muted); }
.hrtalk-empty-state i { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 10px; border-radius: 18px; color: var(--hrtalk-forest-700); background: var(--hrtalk-forest-50); font-size: 1.45rem; }

.hrtalk-bottom-nav { position: fixed; left: 10px; right: 10px; bottom: max(8px, var(--hrtalk-safe-bottom)); z-index: 1040; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; min-height: var(--hrtalk-bottom-h); border: 1px solid rgba(219, 227, 221, .88); border-radius: 21px; padding: 6px; background: rgba(255, 254, 250, .94); box-shadow: 0 16px 45px rgba(6, 39, 31, .17); backdrop-filter: blur(20px) saturate(160%); }
.hrtalk-bottom-nav a, .hrtalk-bottom-nav button { appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; border: 0; border-radius: 15px; color: var(--hrtalk-muted); background: transparent; text-decoration: none; font-family: inherit; font-size: .68rem; font-weight: 650; }
.hrtalk-bottom-nav a.active { color: var(--hrtalk-forest-800); background: var(--hrtalk-forest-50); }
.hrtalk-bottom-nav i { font-size: 1.2rem; line-height: 1; }
.offcanvas.hrtalk-drawer { --bs-offcanvas-width: min(88vw, 350px); }
.hrtalk-drawer { border-left: 1px solid var(--hrtalk-line) !important; background: var(--hrtalk-surface); }
.hrtalk-drawer .offcanvas-header { padding: 22px 20px 12px; }
.hrtalk-drawer .offcanvas-title { color: var(--hrtalk-forest-950); font-weight: 750; }
.hrtalk-drawer .offcanvas-body { padding: 12px 16px 24px; }
.hrtalk-drawer .nav-link { display: flex; align-items: center; gap: 11px; min-height: 50px; border-radius: 14px; padding: 10px 13px; color: var(--hrtalk-ink); text-decoration: none; font-weight: 600; }
.hrtalk-drawer .nav-link.active, .hrtalk-drawer .nav-link:hover { color: var(--hrtalk-forest-800); background: var(--hrtalk-forest-50); }
.hrtalk-drawer .nav-section { margin: 18px 12px 7px; color: #8a958e; font-size: .69rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.hrtalk-main .form-control, .hrtalk-main .form-select { min-height: 50px; border: 1px solid var(--hrtalk-line); border-radius: 13px; color: var(--hrtalk-ink); background-color: #fff; box-shadow: none; }
.hrtalk-main .form-control:focus, .hrtalk-main .form-select:focus { border-color: var(--hrtalk-forest-600); box-shadow: 0 0 0 4px rgba(18, 128, 87, .1); }

@media (min-width: 700px) { .hrtalk-welcome { grid-template-columns: 1fr auto; align-items: center; padding: 28px 30px; } .hrtalk-welcome .btn { width: auto; min-width: 156px; } .hrtalk-main { padding: 24px 22px 40px; } }
@media (min-width: 900px) { .hrtalk-list { display: none; } .hrtalk-desktop-table { display: block; } .hrtalk-main .table > :not(caption) > * > * { padding: 14px 12px; border-bottom-color: #e8ede9; } .hrtalk-main .table thead th { color: var(--hrtalk-muted); font-size: .76rem; font-weight: 700; letter-spacing: .03em; } }
@media (min-width: 1200px) {
  body.hrtalk-app { padding-bottom: 0; }
  .hrtalk-bottom-nav, .hrtalk-topbar { display: none; }
  .hrtalk-app .page-wrapper { display: block; }
  .hrtalk-app .left-sidebar { border-right: 1px solid #e2e8e4; background: var(--hrtalk-surface); box-shadow: 8px 0 40px rgba(6, 39, 31, .04); }
  .hrtalk-app .left-sidebar .brand-logo { min-height: 104px; }
  .hrtalk-app .left-sidebar .app-brand-logo img { max-width: 170px; }
  .hrtalk-app .sidebar-link { margin: 3px 10px; border-radius: 13px; color: var(--hrtalk-muted) !important; transition: background .18s ease, color .18s ease; }
  .hrtalk-app .sidebar-link.active, .hrtalk-app .sidebar-link:hover { color: var(--hrtalk-forest-800) !important; background: var(--hrtalk-forest-50) !important; }
  .hrtalk-app .body-wrapper { min-height: 100vh; margin-left: 270px !important; background: transparent; }
  .hrtalk-app .app-header { border-bottom: 1px solid rgba(219, 227, 221, .72); background: rgba(244, 242, 236, .82); backdrop-filter: blur(15px); }
  .hrtalk-app .hrtalk-main { width: min(1120px, calc(100% - 44px)); padding-top: 30px; }
}
@media (max-width: 1199.98px) { .hrtalk-app .left-sidebar, .hrtalk-app .app-header { display: none !important; } .hrtalk-app .body-wrapper { margin-left: 0 !important; } .hrtalk-app .container-fluid { padding: 0 !important; } }
@media (max-width: 767.98px) { .hrtalk-main .col-md-6, .hrtalk-main .row > .col-6 { width: 100%; } .hrtalk-main textarea.form-control { min-height: 142px; } .hrtalk-main .float-end { float: none !important; width: 100%; } .timeline { padding-left: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }