.dxg-workspace { background:#fff; border:1px solid #d6e1db; border-radius:18px; overflow:hidden; color:#193a2d; font-family:'Outfit',sans-serif; }
.dxg-workspace * { box-sizing:border-box; }
.dxg-top { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 26px; border-bottom:1px solid #e5ece7; }
.dxg-brand { font-weight:750; font-size:18px; }
.dxg-brand span { font-size:13px; font-weight:400; color:#65776c; margin-left:12px; }
.dxg-sample { font-size:11px; background:#f1f5f2; border:1px solid #dfe8e2; border-radius:20px; padding:5px 10px; }
.dxg-intro { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:32px; background:linear-gradient(105deg,#edf5ef,#fafbf7); }
.dxg-intro h3 { font-size:28px; letter-spacing:-.03em; margin:8px 0; line-height:1.2; }
.dxg-intro p { max-width:650px; color:#5a7062; font-size:14px; line-height:1.7; margin:0; }
.dxg-kicker { font-size:10px; font-weight:700; letter-spacing:.13em; color:#547563; }
.dxg-monogram { display:grid; place-items:center; width:68px; height:68px; flex:0 0 68px; border-radius:20px; background:#1d4434; color:#dcf2d9; font-size:22px; }
.dxg-tabs { display:flex; gap:24px; padding:0 32px; border-bottom:1px solid #dfe8e2; }
.dxg-tabs button { font:inherit; font-size:13px; padding:16px 0; background:none; border:0; border-bottom:3px solid transparent; color:#637369; cursor:pointer; }
.dxg-tabs button[aria-selected=true] { color:#1a4832; border-bottom-color:#3b8357; font-weight:650; }
.dxg-tabs button:focus-visible { outline:2px solid #3b8357; outline-offset:4px; }
.dxg-panel { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(230px,1fr); gap:28px; padding:28px 32px 32px; min-height:290px; }
.dxg-panel[hidden] { display:none; }
.dxg-main { min-width:0; }
.dxg-list-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.dxg-list-heading h4,.dxg-next h4 { margin:0; font-size:16px; }
.dxg-list-heading>span { font-size:11px; color:#718177; }
.dxg-records { list-style:none; padding:0; margin:0; }
.dxg-record { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; border-bottom:1px solid #e9eee9; }
.dxg-record strong { display:block; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.dxg-record div>span { display:block; margin-top:5px; color:#6a7c70; font-size:12px; overflow-wrap:anywhere; }
.dxg-record em { font-size:11px; font-style:normal; background:#edf4ee; color:#3b654b; border-radius:6px; padding:5px 8px; flex-shrink:0; }
.dxg-next { padding:22px; background:#f6f3e9; border-radius:12px; align-self:start; }
.dxg-next h4 { margin-top:8px; line-height:1.4; }
.dxg-next ol,.dxg-instructions ol { padding-left:18px; margin:16px 0 0; }
.dxg-next li,.dxg-instructions li { padding:5px 0 5px 4px; font-size:13px; color:#66715f; line-height:1.6; }
.dxg-instructions { display:block; }
.dxg-instructions h4 { margin:0 0 12px; }
.dxg-instructions p { font-size:14px; line-height:1.7; max-width:750px; }
.dxg-note { color:#748074; font-size:12px!important; }
.role-adm .dxg-intro { background:linear-gradient(105deg,#e9eef5,#f7f9fb); }
.role-adm .dxg-monogram { background:#344961; }
@media(max-width:800px) { .dxg-panel { grid-template-columns:1fr; gap:20px; }.dxg-next { width:100%; }.dxg-intro { padding:24px; }.dxg-monogram { display:none; } }
@media(max-width:480px) { .dxg-top { padding:16px; flex-wrap:wrap; gap:8px; }.dxg-brand span { display:block; margin:4px 0 0; }.dxg-intro,.dxg-panel { padding:20px 16px; }.dxg-intro h3 { font-size:24px; }.dxg-tabs { padding:0 16px; }.dxg-record { align-items:flex-start; flex-wrap:wrap; gap:8px; }.dxg-record em { margin-left:0; }.dxg-list-heading { flex-wrap:wrap; } }
/* Module-specific record layouts keep people, documents and time distinct. */
#secSelfService .dxg-records, #secOrganization .dxg-records, #secAdminEmployee .dxg-records { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
#secSelfService .dxg-record, #secOrganization .dxg-record, #secAdminEmployee .dxg-record { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; padding:18px 14px; background:#f5f8f5; border:1px solid #e0e8e2; border-radius:12px; }
#secSelfService .dxg-record:before, #secOrganization .dxg-record:before, #secAdminEmployee .dxg-record:before { content:''; width:32px; height:32px; border-radius:10px; background:linear-gradient(135deg,#8bb59b,#dfece1); }
#secTimesheets .dxg-record, #secAttendance .dxg-record, #secPerformance .dxg-record { border-left:3px solid #92b9a1; padding-left:16px; margin:10px 0; background:#f8faf8; }
#secFiles .dxg-record, #secAdminTemplates .dxg-record { border:1px solid #e1e7df; border-radius:9px; margin-bottom:10px; padding:16px; }
#secAdminDashboard .dxg-records { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
#secAdminDashboard .dxg-record { flex-direction:column; align-items:flex-start; justify-content:space-between; padding:20px 14px; min-height:150px; border:1px solid #dce4ed; background:#f2f5f9; border-radius:12px; }
#secAdminDashboard .dxg-record em { font-size:20px; font-weight:650; background:transparent; padding:0; color:#344961; }
@media(max-width:1050px) { #secSelfService .dxg-records, #secOrganization .dxg-records, #secAdminEmployee .dxg-records, #secAdminDashboard .dxg-records { grid-template-columns:1fr; } }
.welcome-guide-page .wg-subnav-pills-wrap { min-width:0; overflow-x:auto; justify-content:flex-start; }
.welcome-guide-page .wg-subnav-pill { flex:0 0 auto; white-space:nowrap; }

/* Use the same official wordmark as the site navigation. */
.dxg-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.dxg-brand .dx-logo--wordmark { display:block; width:112px; height:auto; max-width:none; flex-shrink:0; object-fit:contain; }
.dxg-brand span { margin-left:0; }
.dxg-monogram img { display:block; width:44px; height:44px; object-fit:contain; }
.welcome-guide-page .wg-stage--screenshot { padding:12px; background:#eef3f0; overflow:visible; }
.wg-real-screen { margin:0; width:100%; min-width:0; }
.wg-real-screen img { display:block; width:100%; max-width:100%; height:auto; max-height:none; object-fit:contain; border-radius:0; cursor:default; }
.wg-real-screen figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:12px 4px 0; color:#425c50; font-size:13px; line-height:1.5; }
.wg-real-screen figcaption span { color:#62796c; }
@media(max-width:480px) { .dxg-brand { align-items:flex-start; flex-direction:column; gap:4px; } }