.nav-beta-badge { margin-inline-start:auto; padding:.12rem .35rem; border-radius:999px; background:var(--brand-primary-soft); color:var(--brand-primary); font-size:.55rem; font-weight:800; letter-spacing:.05em; }
.hr-beta-page { display:grid; gap:1rem; }
.hr-beta-hero { display:flex; align-items:center; justify-content:space-between; gap:1.25rem; padding:1.4rem; border:1px solid var(--border-default); border-radius:18px; background:var(--bg-surface-elevated); box-shadow:var(--shadow-sm); }
.hr-beta-hero h1 { margin:.18rem 0 0; font-size:clamp(1.45rem,3vw,2.15rem); }
.hr-beta-hero p { margin:.65rem 0 0; color:var(--color-text-secondary); }
.hr-beta-title-line { display:flex; align-items:center; gap:.85rem; }
.hr-beta-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:15px; background:var(--action-primary-bg); color:var(--action-primary-text); box-shadow:var(--shadow-sm); }
.hr-beta-icon svg { width:26px; height:26px; }
.hr-beta-badge { display:inline-flex; padding:.16rem .45rem; border-radius:999px; background:var(--brand-primary-soft); color:var(--brand-primary); font-size:.62rem; font-weight:900; letter-spacing:.08em; }
.hr-beta-notice { display:flex; align-items:center; gap:.75rem; padding:.8rem 1rem; border:1px solid color-mix(in srgb,var(--success) 34%,var(--border-default)); border-radius:12px; background:var(--success-soft); color:var(--text-primary); }
.hr-beta-notice svg { flex:0 0 auto; color:var(--success); }.hr-beta-notice div { display:grid; gap:.12rem; }.hr-beta-notice span { color:var(--text-secondary); font-size:.8rem; }
.hr-beta-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.hr-beta-metric { display:flex; align-items:center; gap:.75rem; padding:1rem; border:1px solid var(--color-border); border-radius:14px; background:var(--color-bg-surface); box-shadow:var(--shadow-sm); }
.hr-beta-metric > span { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; }.hr-beta-metric svg { width:20px; }.hr-beta-metric div { display:grid; }.hr-beta-metric strong { font-size:1.35rem; }.hr-beta-metric small { color:var(--color-text-secondary); }
.hr-beta-metric > span { color:var(--brand-primary); background:var(--brand-primary-soft); }
.hr-beta-tabs { display:flex; gap:.4rem; overflow-x:auto; padding:.3rem; border:1px solid var(--color-border); border-radius:12px; background:var(--color-bg-surface); scrollbar-width:thin; }
.hr-beta-tabs button { display:inline-flex; align-items:center; gap:.45rem; flex:0 0 auto; padding:.55rem .75rem; border:0; border-radius:9px; background:transparent; color:var(--text-secondary); font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; }.hr-beta-tabs button span { display:grid; place-items:center; min-width:20px; height:20px; padding:0 .3rem; border-radius:999px; background:var(--bg-subtle); font-size:.65rem; }.hr-beta-tabs button.active { background:var(--action-primary-bg); color:var(--action-primary-text); }.hr-beta-tabs button.active span { background:color-mix(in srgb,var(--action-primary-text) 20%,transparent); color:var(--action-primary-text); }
.hr-beta-workspace { padding:0; overflow:hidden; }.hr-beta-workspace-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.15rem; border-bottom:1px solid var(--color-border); }.hr-beta-workspace-head h2 { margin:0; font-size:1.05rem; }.hr-beta-workspace-head p { margin:.2rem 0 0; color:var(--color-text-secondary); font-size:.78rem; }
.hr-beta-table th { white-space:nowrap; }.hr-beta-table td { vertical-align:middle; }.hr-beta-row-note { display:block; max-width:300px; margin-top:.18rem; color:var(--color-text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hr-beta-category { display:inline-flex; padding:.25rem .48rem; border-radius:999px; background:var(--bg-subtle); color:var(--brand-primary); font-size:.67rem; font-weight:800; white-space:nowrap; }.category-recruitment,.category-onboarding,.category-leave,.category-payroll,.category-compliance,.category-offboarding { color:var(--brand-primary); }
.hr-beta-status { min-width:108px; padding:.36rem .5rem; border:1px solid var(--color-border); border-radius:8px; background:var(--color-bg-surface); color:var(--color-text); font-size:.7rem; }
.hr-beta-empty { min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; }.hr-beta-empty > svg { width:38px; height:38px; color:var(--color-primary); }.hr-beta-empty h3 { margin:.7rem 0 .25rem; }.hr-beta-empty p { max-width:560px; margin:0 0 1rem; color:var(--color-text-secondary); }
.hr-beta-capabilities { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }.hr-beta-capabilities article { padding:1rem; border:1px solid var(--color-border); border-radius:14px; background:var(--color-bg-surface); }.hr-beta-capabilities svg { color:var(--color-primary); }.hr-beta-capabilities h3 { margin:.55rem 0 .3rem; font-size:.88rem; }.hr-beta-capabilities p { margin:0; color:var(--color-text-secondary); font-size:.75rem; line-height:1.55; }
.hr-beta-modal { z-index:13000; }.hr-beta-modal-content { width:min(760px,calc(100vw - 1rem)); }.hr-beta-modal-content .modal-header h3 { margin:.25rem 0 0; }.hr-beta-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }.hr-beta-notes-field { grid-column:1/-1; }
html[dir="rtl"] .hr-beta-page { direction:rtl; }
@media (max-width:960px) { .hr-beta-metrics,.hr-beta-capabilities { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .hr-beta-hero { align-items:stretch; flex-direction:column; padding:1rem; }.hr-beta-hero .btn { width:100%; }.hr-beta-metrics,.hr-beta-capabilities,.hr-beta-form-grid { grid-template-columns:minmax(0,1fr); }.hr-beta-notes-field { grid-column:auto; }.hr-beta-workspace-head { align-items:flex-start; }.hr-beta-modal-content { width:calc(100vw - .7rem); max-height:calc(100dvh - .7rem); overflow:auto; } }