/* Shared salary period and numeral treatment; profile text restored by owner request. */
#app .salary-period-control{padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:14px;margin:16px 0 20px;min-width:0}
#app .salary-period-presets{display:flex;gap:6px;flex-wrap:wrap}
#app .salary-period-presets button{min-height:36px;padding:7px 12px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:13px;white-space:nowrap;cursor:pointer}
#app .salary-period-presets button[aria-pressed=true]{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-border);font-weight:600}
#app .salary-period-context{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px}
#app .salary-period-context strong{font-weight:600;color:var(--design-ink)}#app .salary-period-context span{font-size:12px;color:var(--muted)}
#app .salary-period-custom{display:flex;align-items:end;gap:10px;margin-top:14px;flex-wrap:wrap}
#app .salary-period-custom[hidden]{display:none}
#app .salary-period-custom label{display:grid;gap:6px;min-width:0;font-size:12px;color:var(--muted)}
#app .salary-period-custom input{width:100%;min-width:0;box-sizing:border-box;min-height:40px;font:inherit;padding:8px 10px;border:1px solid var(--input-border);border-radius:9px;background:var(--panel);color:var(--design-ink)}
#app .salary-period-custom>p{flex-basis:100%;font-size:12px;margin:0;color:var(--brand)}
#app .salary-period-custom>p:empty{display:none}
#app .payroll-summary strong,#app .salary-summary strong{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:30px;font-weight:700;font-variant-numeric:lining-nums tabular-nums;font-stretch:normal;letter-spacing:-.035em;line-height:1.2;color:var(--design-ink)}
#app .payroll-table .payroll-money,#app .salary-amount{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-variant-numeric:lining-nums tabular-nums;font-weight:650}
#app .shell.design-workspace .topbar .user-copy{display:grid!important;gap:2px;min-width:0;max-width:165px;text-align:left}
#app .shell.design-workspace .topbar .user-copy b{font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .shell.design-workspace .topbar .user-copy small{font-size:11px;line-height:1.3;color:var(--muted)}
#app .shell.design-workspace .topbar .profile-button{display:flex;align-items:center;gap:8px;width:auto!important}
@media(max-width:760px){
 #app .salary-period-control{padding:12px;margin:12px 0 16px}
 #app .salary-period-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 #app .salary-period-presets button{padding:9px 6px;font-size:12px;min-height:40px}
 #app .salary-period-presets button:last-child{grid-column:1/-1}
 #app .salary-period-context{gap:5px;margin-top:12px}#app .salary-period-context span{flex-basis:100%}
 #app .salary-period-custom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#app .salary-period-custom>button,#app .salary-period-custom>p{grid-column:1/-1}
 #app .payroll-summary strong,#app .salary-summary strong{font-size:25px}
 #app .shell.design-workspace .topbar .user-copy{max-width:86px!important}
 #app .shell.design-workspace .topbar .user-copy b{font-size:10px}#app .shell.design-workspace .topbar .user-copy small{font-size:9px}
 #app .shell.design-workspace .topbar .profile-button{gap:5px}
}
@media(max-width:760px){
 #app .payroll-summary strong,#app .salary-summary strong{font-size:clamp(18px,5.5vw,25px);white-space:nowrap;overflow-wrap:normal}
 #app .shell.design-workspace .topbar>.user-menu #profile-open{width:auto!important;min-width:0!important;gap:5px!important}
 #app .shell.design-workspace .topbar>.user-menu #profile-open .avatar{width:30px!important;height:30px!important;flex:0 0 30px!important;border-radius:50%;object-fit:cover}
 #app .shell.design-workspace .topbar>.user-menu #profile-open .user-copy{width:50px;max-width:50px!important;flex:0 0 50px}
 #app .shell.design-workspace .topbar>.user-menu #profile-open .user-copy small{white-space:nowrap;font-size:8px}
}
@media(max-width:360px){
 #app .shell.design-workspace .topbar>.user-menu #profile-open{gap:4px!important}
 #app .shell.design-workspace .topbar>.user-menu #profile-open .avatar{width:28px!important;height:28px!important;flex-basis:28px!important}
 #app .shell.design-workspace .topbar>.user-menu #profile-open .user-copy{width:44px;max-width:44px!important;flex-basis:44px}
}