/* Shared Office / Helpdesk experience layer. */
:root[data-workspace]{--ux-violet:#7145c8;--ux-violet-soft:#f0eaff;--ux-teal:#076f74;--ux-teal-soft:#e1f5f1;--ux-sky:#126c90;--ux-sky-soft:#e4f4fb;--ws-radius:22px;--ws-bg:#f3f5fa;--ws-glass:#ffffffd9;--ws-shadow:0 12px 32px -24px #31477542,0 2px 6px #31477505}
:root[data-workspace].dark{--ux-violet:#c0a5ff;--ux-violet-soft:#302645;--ux-teal:#79dbcb;--ux-teal-soft:#163a37;--ux-sky:#88d4f5;--ux-sky-soft:#1a3445;--ws-bg:#10151f;--ws-glass:#192230db;--ws-surface:#192230;--ws-raised:#1e2a3b;--ws-line:#303d51;--ws-shadow:0 14px 36px -24px #000b}
:root[data-workspace] body{background:radial-gradient(ellipse at 90% 0%,var(--ws-accent-soft),transparent 48%),var(--ws-bg);background-attachment:fixed}
:root[data-workspace='office'] :is(.sidebar,.topbar),:root[data-workspace='helpdesk'] .app>header{background:var(--ws-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
:root[data-workspace='office'] .sidebar{border-right:1px solid var(--ws-line)}
:root[data-workspace='office'] .nav-link{border-radius:13px;transition:background .2s,color .2s,transform .2s}
:root[data-workspace='office'] .nav-link:hover{transform:translateX(2px)}
:root[data-workspace] :is(.metric,.project-card,.ticket-row,.knowledge-card,.login-card,.insight-card){box-shadow:var(--ws-shadow)}
:root[data-workspace] :is(.project-card,.ticket-row,.knowledge-card){transition:transform .22s ease,border-color .22s,box-shadow .22s}
:root[data-workspace] :is(.project-card,.ticket-row,.knowledge-card):hover{transform:translateY(-2px);border-color:var(--ws-control-line);box-shadow:0 14px 36px -24px var(--ws-control-line)}
:root[data-workspace] :is(.button,button.primary,button.secondary,.icon-button){border-radius:13px;transition:background .18s,box-shadow .18s,transform .18s}
:root[data-workspace] :is(.button,button.primary,button.secondary,.icon-button):active:not(:disabled){transform:translateY(1px)}
:root[data-workspace] :is(.button.primary,button.primary){box-shadow:0 5px 14px -8px var(--ws-button)}
:root[data-workspace] [data-action-tone='teal']{background:var(--ux-teal-soft);border-color:var(--ux-teal);color:var(--ux-teal)}
:root[data-workspace] [data-action-tone='violet']{background:var(--ux-violet-soft);border-color:var(--ux-violet);color:var(--ux-violet)}
:root[data-workspace] [data-action-tone='sky']{background:var(--ux-sky-soft);border-color:var(--ux-sky);color:var(--ux-sky)}
:root[data-workspace] :is(.manage-project,.project-document-controls button){min-height:38px;min-width:38px;border-radius:11px}
:root[data-workspace] :is(input,select,textarea):not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']){border-radius:12px;transition:border-color .18s,box-shadow .18s;background:var(--ws-surface)}
:root[data-workspace] :is(input,select,textarea):focus{border-color:var(--ws-accent);box-shadow:0 0 0 3px var(--ws-accent-soft)}
:root[data-workspace] dialog{border-radius:24px;box-shadow:var(--ws-modal-shadow)}
:root[data-workspace] dialog::backdrop{background:#080f2369;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
:root[data-workspace] dialog[open]{animation:ux-dialog-in .2s ease-out}
@keyframes ux-dialog-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
:root[data-workspace] .metric{position:relative;overflow:hidden;border-radius:22px;padding-top:25px}
:root[data-workspace] .metric>span:first-child{padding-right:48px;display:block}
:root[data-workspace] .metric>strong{font-variant-numeric:tabular-nums;letter-spacing:-.045em}
.metric-symbol{position:absolute;right:22px;top:22px;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;font-size: 19px;background:var(--ws-accent-soft);color:var(--ws-accent)}
.metric:nth-child(2) .metric-symbol{background:var(--ux-violet-soft);color:var(--ux-violet)}
.metric:nth-child(3) .metric-symbol{background:var(--ux-teal-soft);color:var(--ux-teal)}
:root[data-workspace] .metric.accent .metric-symbol{background:#ffffff26;color:white}
.dashboard-insights{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);gap:20px;margin:0 0 32px}
.insight-card{background:var(--ws-surface);border:1px solid var(--ws-line);border-radius:22px;padding:24px;min-width:0}
.insight-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.insight-heading h3{font-size: 15px;font-weight:650;margin:0}.insight-heading small{font-size: 12px;color:var(--ws-muted)}
.insight-heading>i{color:var(--ux-violet);font-size: 21px}
.project-distribution{display:flex;height:10px;border-radius:999px;overflow:hidden;gap:3px;background:var(--ws-raised);margin-bottom:20px}
.project-distribution span{background:var(--segment-color);min-width:0;transition:width .5s ease}
.project-stage-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.project-stage{background:transparent;border:1px solid transparent;border-radius:12px;padding:9px 4px;cursor:pointer;text-align:left;color:var(--ws-text);min-width:0}
.project-stage:hover,.project-stage[aria-pressed='true']{background:var(--ws-raised);border-color:var(--ws-line)}
.project-stage strong{display:block;font-size: 20px;line-height:1.4;font-variant-numeric:tabular-nums}.project-stage small{display:block;color:var(--ws-muted);font-size: 11px;white-space:nowrap}.stage-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--segment-color);margin-right:5px}
.work-progress-body{display:flex;gap:24px;align-items:center}.work-ring{width:110px;height:110px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--ux-teal) calc(var(--progress)*1%),var(--ws-raised) 0);position:relative}
.work-ring:before{content:'';position:absolute;inset:10px;border-radius:50%;background:var(--ws-surface)}.work-ring strong{position:relative;font-size: 22px;letter-spacing:-.04em}.work-legend{flex:1;margin:0;min-width:0}.work-legend>div{display:flex;justify-content:space-between;gap:12px;margin:7px 0;font-size: 13px}.work-legend dt{color:var(--ws-muted)}.work-legend dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums}
.process-guide{display:flex;gap:12px;padding:14px 16px;background:var(--ws-raised);border:1px solid var(--ws-line);border-radius:15px;margin:0 0 8px;list-style:none;counter-reset:guide}
.process-guide li{display:flex;align-items:center;gap:8px;flex:1;font-size: 12px;color:var(--ws-muted);counter-increment:guide}.process-guide li:before{content:counter(guide);display:grid;place-items:center;flex:none;width:25px;height:25px;border-radius:9px;background:var(--ux-violet-soft);color:var(--ux-violet);font-weight:700}.process-guide small{display:block;font-size: 10px}
/* The original input and its listeners remain intact under the drop target. */
:root[data-workspace] .drop-label{display:block;width:100%;padding:0;background:none;border:0;box-shadow:none;text-align:left;color:var(--ws-text)}
:root[data-workspace] .drop-zone{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;padding:24px 18px;min-height:138px;width:100%;box-sizing:border-box;border:1.5px dashed var(--ws-control-line);border-radius:17px;background:var(--ws-raised);text-align:center;transition:background .2s,border-color .2s,box-shadow .2s;margin-top:6px;color:var(--ws-text);overflow:hidden;isolation:isolate}
:root[data-workspace] .drop-zone>i{font-size: 24px;color:var(--ux-violet);background:var(--ux-violet-soft);width:46px;height:46px;display:grid;place-items:center;border-radius:15px;pointer-events:none}
.drop-zone strong{font-size: 13px;font-weight:600;pointer-events:none}.drop-zone small{font-size: 12px;color:var(--ws-muted);pointer-events:none;overflow-wrap:anywhere;max-width:100%}
:root[data-workspace] .drop-zone input[type='file']{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;cursor:pointer;margin:0!important;padding:0!important;z-index:2}
:root[data-workspace] .drop-zone:is(:hover,:focus-within,.is-dragging){border-color:var(--ux-violet);background:var(--ux-violet-soft);box-shadow:0 0 0 3px var(--ws-accent-soft)}
:root[data-workspace] .drop-zone:has(input:disabled){opacity:.5;cursor:not-allowed}
:root[data-workspace] .drop-zone.is-error{border-color:var(--ws-danger)}
:root[data-workspace] .drop-zone.is-error small{color:var(--ws-danger)}
:root[data-workspace] :is(.payment-heading,.detail-section-head):has(.drop-label){flex-wrap:wrap}.file-compose:has(.drop-zone){align-items:stretch}.file-compose>.drop-zone{flex:1}
:root[data-workspace] .project-document-row{padding:13px;border:1px solid var(--ws-line);border-radius:13px;background:var(--ws-raised);margin:8px 0}
:root[data-workspace] .document-position{display:grid;place-items:center;width:26px;height:28px;border-radius:8px;background:var(--ux-violet-soft);color:var(--ux-violet)}
:root[data-workspace='helpdesk'] .hero{border-radius:24px;background:linear-gradient(120deg,var(--ws-accent-soft),var(--ux-violet-soft));padding:30px;border:1px solid var(--ws-line)}
:root[data-workspace='helpdesk'] .metrics>article{border-radius:20px;box-shadow:var(--ws-shadow)}
:root[data-workspace='helpdesk'] .metrics>article:nth-child(2)>i{color:var(--ux-violet);background:var(--ux-violet-soft)}
:root[data-workspace='helpdesk'] .metrics>article:nth-child(3)>i{color:var(--ux-teal);background:var(--ux-teal-soft)}
@media(max-width:1100px){.dashboard-insights{grid-template-columns:1fr}.work-progress-body{justify-content:flex-start}.work-legend{max-width:360px}}
@media(max-width:650px){.insight-card{padding:18px}.project-stage-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-insights{gap:14px;margin-bottom:24px}.process-guide{gap:6px;padding:10px}.process-guide li{font-size: 11px;gap:5px;align-items:flex-start}.process-guide li:before{width:20px;height:22px}.work-progress-body{gap:18px}.metric-symbol{width:32px;height:32px;right:16px;top:18px;font-size: 16px}:root[data-workspace] .drop-zone{min-height:140px;padding:22px 14px}.file-compose:has(.drop-zone){flex-direction:column}.project-document-controls{gap:3px}}
@media(prefers-reduced-motion:reduce){:root[data-workspace] *, :root[data-workspace] *:before,:root[data-workspace] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.dashboard-insights{margin-top:24px}
.project-stage small{white-space:normal;line-height:1.5}
:root[data-workspace] label.drop-label{background:transparent;border:0;padding:0;box-shadow:none;color:var(--ws-text)}
:root[data-workspace] .drop-zone strong{color:var(--ws-text)}
@media(forced-colors:active){:root[data-workspace] .drop-zone{border:2px dashed ButtonText}.project-stage[aria-pressed='true']{outline:2px solid Highlight}.metric-symbol{border:1px solid ButtonText}}
:root[data-workspace] :is(.button,button)[data-action-tone='teal']{background:var(--ux-teal-soft);border-color:var(--ux-teal);color:var(--ux-teal)}
:root[data-workspace] :is(.button,button)[data-action-tone='violet']{background:var(--ux-violet-soft);border-color:var(--ux-violet);color:var(--ux-violet)}
:root[data-workspace] :is(.button,button)[data-action-tone='sky']{background:var(--ux-sky-soft);border-color:var(--ux-sky);color:var(--ux-sky)}
:root[data-workspace] :is(.button,button)[data-action-tone='primary']{background:var(--ws-button);border-color:var(--ws-button);color:white}

.project-distribution span{animation:ux-chart-grow .5s ease-out both;transform-origin:left}
@keyframes ux-chart-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
:root[data-workspace] label.drop-label.drop-label{display:block;border:0;background:transparent;padding:0;box-shadow:none;color:var(--ws-text);overflow:visible}

/* Compact type hierarchy and consistent spacing across both workspaces. */
:root[data-workspace]{--ux-space-xs:6px;--ux-space-sm:10px;--ux-space-md:16px;--ux-space-lg:24px;--ws-block-gap:20px}
:root[data-workspace] body{font-size:15px;line-height:1.65}
:root[data-workspace] :is(.task-form,#ticket-form,#comment-form,.login-card){gap:16px}
:root[data-workspace] label:not(.inline-check):not(.drop-label):not(.attachment-upload-label){line-height:1.55}
:root[data-workspace] :is(.task-form,#ticket-form,.login-card) label{gap:7px}
:root[data-workspace] :is(.form-grid,.project-schedule-grid){gap:16px}
:root[data-workspace] :is(.dialog-heading,.dialog-head,.detail-head){gap:16px;margin-bottom:4px}
:root[data-workspace] .dialog-actions{gap:10px;padding-top:18px;margin-top:8px}
:root[data-workspace] :is(.section-heading,.section-head){gap:16px;margin-bottom:18px}
:root[data-workspace] :is(.project-card,.metric,.insight-card){padding:22px}
:root[data-workspace] .project-card h3{margin:14px 0 6px;line-height:1.5}
:root[data-workspace] .project-card p{margin:0 0 14px}
:root[data-workspace] .project-card .project-team{margin:12px 0 16px}
:root[data-workspace] .project-foot{gap:12px;margin-top:8px}
:root[data-workspace] .team-section{padding:18px;gap:12px}
:root[data-workspace] .team-section h3{margin:0 0 10px;font-size:16px}
:root[data-workspace] .team-section>p{margin:6px 0 12px}
:root[data-workspace] .team-section>label{margin-top:12px}
:root[data-workspace] :is(.form-error,.error):empty{display:none}
:root[data-workspace] :is(.form-error,.error):not(:empty){margin:8px 0;line-height:1.6}
:root[data-workspace] .drop-zone{margin-top:8px;min-height:130px;padding:20px 16px}
:root[data-workspace] .drop-zone+small{margin-top:8px;display:block}
:root[data-workspace] :is(#contract-file-help,#project-documents-error){line-height:1.65}
:root[data-workspace] .project-document-row{padding:12px;gap:10px}
:root[data-workspace] .project-document-name{font-size:14px;line-height:1.55}
:root[data-workspace] .project-document-name small{font-size:12px;margin-top:4px}
:root[data-workspace] :is(.project-list-table th,.project-list-table td){padding:14px 16px}
:root[data-workspace] :is(.project-list-table,.project-list-table .project-open){font-size:14px}
:root[data-workspace] .project-list-table small{font-size:12px;line-height:1.6}
:root[data-workspace] .process-guide{margin:2px 0 12px;padding:12px;gap:12px}
:root[data-workspace] .process-guide li{line-height:1.5;min-width:0}
:root[data-workspace] .insight-heading{margin-bottom:16px}
:root[data-workspace] .project-stage-grid{gap:8px}
:root[data-workspace] .project-stage{padding:8px 5px}
:root[data-workspace] .work-legend>div{margin:9px 0}
:root[data-workspace='helpdesk'] :is(.ticket-section,.knowledge-section){padding:24px}
:root[data-workspace='helpdesk'] .ticket-row{padding:18px;gap:16px}
:root[data-workspace='helpdesk'] :is(.detail-description,.knowledge-content,.comment-body p){font-size:14px;line-height:1.75}
:root[data-workspace='helpdesk'] :is(.ticket-files,.conversation,.feedback){margin-top:20px;padding-top:18px}
:root[data-workspace='helpdesk'] .conversation h3{margin:0 0 14px}
:root[data-workspace='helpdesk'] .comment{gap:12px;padding-block:14px}
:root[data-workspace='helpdesk'] .hero h1{font-size:clamp(24px,2.4vw,32px);margin:8px 0 10px}
:root[data-workspace='helpdesk'] .hero p{font-size:15px;line-height:1.65}
@media(max-width:1100px){:root[data-workspace] .dashboard-project-actions{flex-wrap:wrap;gap:14px}:root[data-workspace] .project-display-actions{margin-left:auto}}
@media(max-width:720px){
 :root[data-workspace] :is(.project-card,.metric,.insight-card,.team-section){padding:18px}
 :root[data-workspace] :is(input,select,textarea):not([type='checkbox']):not([type='radio']):not([type='file']){font-size:16px}
 :root[data-workspace] :is(.form-grid,.project-schedule-grid){grid-template-columns:minmax(0,1fr);gap:14px}
 :root[data-workspace] :is(.button,button.primary,button.secondary){min-height:44px}
 :root[data-workspace] .project-document-controls .button{min-width:36px;min-height:40px}
 :root[data-workspace] .project-document-row{padding:10px;gap:8px}
 :root[data-workspace] .project-document-name{font-size:13px}
 :root[data-workspace] .process-guide{padding:10px;gap:8px}
 :root[data-workspace] .process-guide li{flex-wrap:wrap;font-size:11px}
 :root[data-workspace] .project-status-filters{gap:6px}
 :root[data-workspace='helpdesk'] :is(.ticket-section,.knowledge-section){padding:18px}
 :root[data-workspace='helpdesk'] .ticket-side{padding-left:0}
}
@media(max-width:380px){:root[data-workspace] .project-document-row{flex-wrap:wrap}:root[data-workspace] .project-document-controls{margin-left:auto}:root[data-workspace] .project-document-name{flex-basis:calc(100% - 44px)}:root[data-workspace] .metric-symbol{right:12px}:root[data-workspace] .process-guide li{font-size:11px}}

/* Full profile card target, with an independent logout control. */
:root[data-workspace] .profile-block{position:relative}
:root[data-workspace] .profile-card-button{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;z-index:1;box-shadow:none}
:root[data-workspace] .profile-card-button:hover{background:var(--ws-accent-soft);opacity:.25}
:root[data-workspace] .profile-card-button:focus-visible{outline:2px solid var(--ws-focus);outline-offset:3px}
:root[data-workspace] #logout-button{position:relative;z-index:2}

/* Nested fieldsets need their own rhythm: the parent form gap does not reach them. */
:root[data-workspace] form fieldset{min-width:0;row-gap:18px}
:root[data-workspace] form fieldset:not([class]){display:grid;gap:18px;padding:18px;border:1px solid var(--ws-line);border-radius:14px}
:root[data-workspace] form fieldset>legend{padding:0 8px;margin-bottom:10px;line-height:1.6}
:root[data-workspace] form fieldset>label:not(.inline-check):not(.drop-label):not(:has(input[type='checkbox'])):not(:has(input[type='radio'])){display:grid;gap:8px}
:root[data-workspace] form .inline-check{display:flex;flex-direction:row;align-items:flex-start;gap:10px;line-height:1.65}
:root[data-workspace] form .inline-check>input{flex:0 0 18px;width:18px;height:18px;margin:3px 0 0;order:-1}
:root[data-workspace] form .inline-check>.field-label-text{min-width:0;flex:1}
:root[data-workspace] .workflow-callout{margin:var(--ws-block-gap) 0;line-height:1.7}
/* Forms already provide a gap; standalone notices need their own separation. */
:root[data-workspace] .task-form .workflow-callout{margin:0}
:root[data-workspace] #asset-list:empty{display:none}
:root[data-workspace] .signing-asset{margin:0;padding:18px;gap:18px}
:root[data-workspace] #asset-list{display:grid;gap:14px}
:root[data-workspace] #profile-signature-assets{margin-right:auto}
@media(max-width:720px){:root[data-workspace] form fieldset:not([class]){padding:14px;gap:16px}:root[data-workspace] .signing-asset{flex-wrap:wrap;gap:14px}:root[data-workspace] .signing-asset>div{min-width:140px}:root[data-workspace] #profile-signature-assets{margin-right:0}}
:root[data-workspace] .workflow-dialog>.task-form{--form-inset:24px;padding:var(--form-inset)}
:root[data-workspace] .workflow-dialog .dialog-heading{margin:calc(-1 * var(--form-inset)) calc(-1 * var(--form-inset)) 4px;padding:20px var(--form-inset)}
:root[data-workspace] .workflow-dialog .dialog-actions{margin:8px calc(-1 * var(--form-inset)) calc(-1 * var(--form-inset));padding:18px var(--form-inset)}
@media(max-width:720px){:root[data-workspace] .workflow-dialog>.task-form{--form-inset:16px}}
.employee-display-photo{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
:root[data-workspace] #profile-photo-section{display:grid;gap:14px;padding:18px;border:1px solid var(--ws-line);border-radius:16px}
:root[data-workspace] #profile-photo-section.hidden{display:none}
.profile-photo-preview{width:112px;height:112px;display:grid;place-items:center;background:var(--ws-raised);color:var(--ws-text);border:1px solid var(--ws-line);font-size:28px;overflow:hidden}
.profile-photo-preview img{display:block;width:100%;height:100%;object-fit:cover}
#profile-photo-message:empty{display:none}
#profile-photo-message{margin:0}

.employee-photo-section{display:grid;gap:14px;padding:18px;border:1px solid var(--ws-line);border-radius:16px}

/* Refined workspace surfaces: indigo navigation, neutral canvas, soft semantic accents. */
:root[data-workspace]{--ws-bg:#f4f5f9;--ws-surface:#ffffff;--ws-raised:#f7f8fc;--ws-hover:#edf0fa;--ws-text:#252b40;--ws-muted:#626b82;--ws-line:#e1e5ef;--ws-control-line:#8993aa;--ws-accent:#4d50bf;--ws-accent-soft:#eeedfc;--ws-button:#5555ce;--ws-button-hover:#4544b4;--ws-glass:#ffffffed;--ws-focus:#6666da;--ws-shadow:0 2px 4px #272b4903,0 10px 28px -18px #272b492b;--ws-modal-shadow:0 32px 100px #151b4533}
:root[data-workspace].dark{--ws-bg:#11131c;--ws-surface:#1b1e2b;--ws-raised:#222636;--ws-hover:#2b2e43;--ws-text:#eef0fa;--ws-muted:#abb2c9;--ws-line:#33384d;--ws-control-line:#69748f;--ws-accent:#b6b5ff;--ws-accent-soft:#30304c;--ws-button:#5958d4;--ws-button-hover:#6766e2;--ws-glass:#1b1e2bf0;--ws-focus:#b6b5ff;--ws-shadow:0 3px 5px #0000000d,0 12px 30px -20px #0009;--ws-modal-shadow:0 32px 100px #0009}
:root[data-workspace] body{background:radial-gradient(ellipse at 85% -15%,var(--ws-accent-soft),transparent 55%),var(--ws-bg)}
:root[data-workspace='office'] .sidebar{background:var(--ws-glass);box-shadow:8px 0 36px -32px #141a4633}
:root[data-workspace='office'] .sidebar .menu-caption{font-size:10px;letter-spacing:.16em;opacity:.9}
:root[data-workspace='office'] .sidebar nav.kt-menu>.nav-link{margin-block:3px;border-radius:12px;gap:12px}
:root[data-workspace='office'] .sidebar .nav-link.active{background:var(--ws-accent-soft);color:var(--ws-accent);box-shadow:none;border-left-color:transparent;font-weight:650}
:root[data-workspace='office'] .sidebar .nav-link.active i{color:var(--ws-accent)}
:root[data-workspace='office'] .profile-block{background:var(--ws-raised);border-color:var(--ws-line);border-radius:18px;box-shadow:none}
:root[data-workspace='office'] .avatar{background:linear-gradient(135deg,#6862d9,#4679c9);color:#fff}
:root[data-workspace] :is(.topbar,.app>header){box-shadow:0 1px 0 var(--ws-line)}
:root[data-workspace] :is(.metric,.project-card,.insight-card,.report-card,.settings-card,.knowledge-card,.knowledge-admin-card,.finance-chart-card,.ticket-section,.knowledge-section,.metrics article){border:1px solid var(--ws-line);border-radius:20px;box-shadow:var(--ws-shadow)}
:root[data-workspace] :is(.project-card,.ticket-row,.knowledge-card):hover{transform:translateY(-2px);border-color:var(--ws-accent);box-shadow:0 12px 30px -20px var(--ws-control-line)}
:root[data-workspace] .metric{background:linear-gradient(145deg,var(--ws-surface),var(--ws-raised))}
:root[data-workspace] .metric.accent{background:linear-gradient(125deg,#5555c8,#4772c9);border-color:transparent;color:#fff}
:root[data-workspace] .metric.accent :is(span,small,strong){color:#fff}
:root[data-workspace] .metric.accent .metric-symbol{background:#ffffff20;color:#fff}
:root[data-workspace] .metric-symbol{border-radius:12px}
:root[data-workspace] .project-card h3{letter-spacing:-.025em}
:root[data-workspace] .project-code{border-radius:8px;letter-spacing:.09em;background:var(--ws-accent-soft);color:var(--ws-accent)}
:root[data-workspace] .project-card .manage-project{background:var(--ws-raised);border-color:var(--ws-line);color:var(--ws-muted)}
:root[data-workspace] .project-status-filter{border-radius:10px;background:var(--ws-surface)}
:root[data-workspace] .project-status-filter.active{background:var(--ws-accent-soft);border-color:var(--ws-accent);color:var(--ws-accent)}
:root[data-workspace] .project-view-toggle{background:var(--ws-raised);border-radius:12px;padding:3px}
:root[data-workspace] .project-stage{border-radius:12px;background:var(--ws-raised)}
:root[data-workspace] .project-stage[aria-pressed='true']{background:var(--ws-accent-soft);border-color:var(--ws-accent)}
:root[data-workspace] :is(.button,button.primary,button.secondary){border-radius:11px;font-weight:550}
:root[data-workspace] :is(.button.primary,button.primary){background:var(--ws-button);border-color:var(--ws-button);box-shadow:0 5px 12px -7px #4544b499;color:#fff}
:root[data-workspace] :is(.button.primary,button.primary):hover{background:var(--ws-button-hover)}
:root[data-workspace] :is(input,select,textarea):not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']){background:var(--ws-raised);border-radius:11px}
:root[data-workspace] :is(input,select,textarea):focus{background:var(--ws-surface);box-shadow:0 0 0 3px var(--ws-accent-soft)}
:root[data-workspace] input:read-only{color:var(--ws-muted)}
:root[data-workspace] .table-card{border-radius:18px}
:root[data-workspace] table thead th{background:var(--ws-raised);color:var(--ws-muted);font-weight:600;border-color:var(--ws-line)}
:root[data-workspace] table tbody td{border-color:var(--ws-line)}
:root[data-workspace] table tbody tr:hover{background:var(--ws-raised)}
:root[data-workspace] .drop-zone{background:var(--ws-raised);border-color:var(--ws-control-line);border-radius:14px}
:root[data-workspace] dialog{border:1px solid var(--ws-line);background:var(--ws-surface);border-radius:24px}
:root[data-workspace] dialog::backdrop{background:#0d122657;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
:root[data-workspace].dark dialog::backdrop{background:#05081391}
:root[data-workspace='helpdesk'] .hero{position:relative;background:linear-gradient(115deg,var(--ws-accent-soft),var(--ws-surface));border:1px solid var(--ws-line);border-radius:24px;padding:32px;box-shadow:var(--ws-shadow)}
:root[data-workspace='helpdesk'] .hero .eyebrow{letter-spacing:.17em}
:root[data-workspace='helpdesk'] .metrics>article{background:var(--ws-surface);padding:22px;gap:16px}
:root[data-workspace='helpdesk'] .ticket-row{background:var(--ws-raised);border-radius:14px;box-shadow:none}
:root[data-workspace='helpdesk'] .ticket-icon{border-radius:12px;background:var(--ws-accent-soft);color:var(--ws-accent)}
:root[data-workspace='helpdesk'] .comment{border-radius:14px;background:var(--ws-raised);padding:16px;gap:12px;margin-bottom:12px}
:root[data-workspace='helpdesk'] .comment.customer{background:var(--ws-accent-soft)}
:root[data-workspace] .login-card{border:1px solid var(--ws-line);background:var(--ws-glass);border-radius:24px;box-shadow:var(--ws-shadow)}
@media(max-width:720px){:root[data-workspace='helpdesk'] .hero{padding:22px}:root[data-workspace] :is(.metric,.project-card,.insight-card,.ticket-section,.knowledge-section){border-radius:17px}:root[data-workspace] dialog{border-radius:22px 22px 0 0}:root[data-workspace='helpdesk'] .metrics>article{padding:18px}}
@media(prefers-reduced-motion:reduce){:root[data-workspace] :is(.project-card,.ticket-row,.knowledge-card):hover{transform:none}}
/* Static CSS ornament: no images, timers, animation or additional requests. */
:root[data-workspace='helpdesk'] .hero{isolation:isolate;overflow:hidden}
:root[data-workspace='helpdesk'] .hero:after{content:'';position:absolute;width:230px;height:230px;right:7%;top:-100px;border:1px solid var(--ws-accent);border-radius:50%;box-shadow:0 0 0 28px var(--ws-accent-soft),0 0 0 29px var(--ws-line),0 0 0 56px var(--ws-accent-soft),0 0 0 57px var(--ws-line);opacity:.24;pointer-events:none;z-index:-1}
:root[data-workspace] .metric.accent{background-image:radial-gradient(circle at 95% 0%,#ffffff16 0 24%,transparent 24.5%),radial-gradient(circle at 95% 0%,transparent 0 37%,#ffffff12 37.3% 37.8%,transparent 38%),linear-gradient(125deg,#5555c8,#4772c9)}
:root[data-workspace] .insight-card{position:relative;isolation:isolate;overflow:hidden}
:root[data-workspace] .insight-card:after{content:'';position:absolute;right:0;top:0;width:70px;height:55px;background-image:radial-gradient(circle,var(--ws-control-line) .8px,transparent 1px);background-size:9px 9px;opacity:.15;pointer-events:none;z-index:-1}
.employee-list-person{display:flex;align-items:center;gap:12px;min-width:0}
.employee-list-avatar{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:10px;background:var(--ws-accent-soft);color:var(--ws-accent);font-size:13px;font-weight:600;overflow:hidden}
.employee-list-person small{display:block;margin-top:3px;color:var(--ws-muted);font-size:12px}
@media(max-width:720px){:root[data-workspace='helpdesk'] .hero:after{right:-150px;opacity:.16}}

/* Neutral pearl surfaces; restrained peach, blue and lilac light on accents. */
:root[data-workspace]{--ws-brand:#a1a9be;--ws-bg:#f1f1f2;--ws-surface:#fcfcfd;--ws-raised:#ececef;--ws-hover:#e6e6eb;--ws-text:#303137;--ws-muted:#65666f;--ws-line:#dcdde2;--ws-control-line:#83858f;--ws-accent:#5d667e;--ws-accent-soft:#e9eaf0;--ws-button:#596278;--ws-button-hover:#485267;--ws-glass:#fcfcfdee;--ws-focus:#727f9d;--relief-edge:#ffffffed;--relief-end:#f2f2f4;--relief-light:#eae7fb33;--pearl-blue:#cbe5ff3d;--pearl-glow:#ffdccc45;--pearl-action-start:#f5e9e6;--pearl-action-end:#eeedf7;--pearl-action-text:#5b5367;--pearl-action-edge:#ffffff;--relief-shadow:#34343e26;--ws-shadow:inset 0 1px 1px var(--relief-edge),-3px -3px 9px #ffffffb8,6px 9px 18px -11px #42424e40;--ws-modal-shadow:0 30px 85px #27272e40}
:root[data-workspace].dark{--ws-bg:#111113;--ws-surface:#202023;--ws-raised:#28282d;--ws-hover:#323238;--ws-text:#f0f0f3;--ws-muted:#b9b9c2;--ws-line:#3b3b43;--ws-control-line:#777781;--ws-accent:#c2c7da;--ws-accent-soft:#303138;--ws-button:#596278;--ws-button-hover:#69748e;--ws-glass:#19191dec;--ws-focus:#bdc6e0;--relief-edge:#ffffff20;--relief-end:#1b1b1f;--relief-light:#c0b1e812;--pearl-blue:#9abaff0d;--pearl-glow:#ffc2a312;--pearl-action-start:#423739;--pearl-action-end:#363642;--pearl-action-text:#f5eff8;--pearl-action-edge:#b7a8c347;--relief-shadow:#00000066;--ws-shadow:inset 0 1px 1px var(--relief-edge),-2px -2px 7px #ffffff08,6px 9px 20px -11px #000000b3;--ws-modal-shadow:0 32px 90px #000000bd}
:root[data-workspace] body{background:radial-gradient(ellipse at 100% 0%,var(--pearl-glow),transparent 45%),radial-gradient(ellipse at 65% 0%,var(--pearl-blue),transparent 50%),var(--ws-bg);background-attachment:scroll}
:root[data-workspace] :is(.metric,.project-card,.insight-card,.report-card,.settings-card,.knowledge-card,.knowledge-admin-card,.finance-chart-card,.ticket-section,.knowledge-section,.metrics article,.login-card){background:radial-gradient(ellipse at 100% 0%,var(--relief-light),transparent 65%),linear-gradient(145deg,var(--ws-surface),var(--relief-end));border:1px solid var(--ws-line);border-radius:24px;box-shadow:var(--ws-shadow)}
:root[data-workspace] :is(.metric,.project-card,.insight-card){padding:16px;min-height:0}
:root[data-workspace] :is(.metric-grid,.project-grid){gap:12px}
:root[data-workspace] .metric>strong{font-size:28px;margin:3px 0;line-height:1.25}
:root[data-workspace] .metric-symbol{width:34px;height:34px;right:16px;top:16px;border-radius:50%;box-shadow:inset 0 1px 0 var(--relief-edge),0 3px 6px var(--relief-shadow)}
:root[data-workspace] .metric.accent{background:radial-gradient(ellipse at 100% 0%,var(--pearl-glow),transparent 70%),radial-gradient(ellipse at 0% 100%,var(--pearl-blue),transparent 65%),linear-gradient(145deg,var(--ws-accent-soft),var(--ws-surface));color:var(--ws-text);border-color:var(--ws-line)}
:root[data-workspace] .metric.accent :is(span,strong,small){color:var(--ws-text)}
:root[data-workspace] .dashboard-insights{gap:12px;margin:14px 0 18px;grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr)}
:root[data-workspace] .insight-heading{margin-bottom:10px}
:root[data-workspace] .insight-card:after{display:none}
:root[data-workspace] .project-stage-grid{gap:6px}
:root[data-workspace] .project-stage{padding:7px 5px;border-radius:10px;background:var(--ws-raised);box-shadow:inset 0 1px 3px #0000000c}
:root[data-workspace] .project-stage strong{font-size:18px}
:root[data-workspace] .work-ring{width:86px;height:86px}
:root[data-workspace] .work-ring:before{inset:8px}
:root[data-workspace] .work-ring strong{font-size:21px}
:root[data-workspace] .work-progress-body{gap:14px}
:root[data-workspace] .work-legend>div{margin:5px 0}
:root[data-workspace] .project-card h3{font-size:17px;margin:10px 0 4px;line-height:1.45}
:root[data-workspace] .project-card p{margin:0 0 10px}
:root[data-workspace] .project-card .project-team{margin:8px 0 10px;min-height:28px}
:root[data-workspace] .project-foot{margin-top:6px;gap:8px}
:root[data-workspace] :is(.section-heading,.section-head){margin-bottom:10px}
:root[data-workspace] :is(.button,button.primary,button.secondary,.icon-button,.appearance-toggle,.theme-button,.notification-button){border-radius:11px;box-shadow:inset 0 1px 0 var(--relief-edge),0 3px 5px var(--relief-shadow)}
:root[data-workspace] :is(.button.secondary,button.secondary,.icon-button,.theme-button,.notification-button){background:linear-gradient(145deg,var(--ws-raised),var(--ws-surface));color:var(--ws-text);border-color:var(--ws-line)}
:root[data-workspace] :is(.button.primary,button.primary){background:var(--ws-button);border-color:var(--ws-button);color:#fff}
:root[data-workspace] :is(.button,button):active:not(:disabled){box-shadow:inset 0 2px 4px #0002}
:root[data-workspace] :is(input,select,textarea):not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']){background:var(--ws-raised);box-shadow:inset 0 2px 4px #0000000d;border-color:var(--ws-control-line)}
:root[data-workspace] :is(input,select,textarea):focus{box-shadow:0 0 0 3px var(--ws-accent-soft);border-color:var(--ws-focus)}
:root[data-workspace] dialog{background:linear-gradient(145deg,var(--ws-surface),var(--relief-end));box-shadow:inset 0 1px 0 var(--relief-edge),var(--ws-modal-shadow)}
:root[data-workspace] .drop-zone{background:var(--ws-raised);box-shadow:inset 0 2px 5px #0000000d}
:root[data-workspace='office'] .sidebar{background:var(--ws-glass);box-shadow:inset -1px 0 0 var(--relief-edge)}
:root[data-workspace='office'] .sidebar .nav-link.active{background:var(--ws-accent-soft);box-shadow:inset 0 1px 0 var(--relief-edge),0 2px 4px var(--relief-shadow)}
:root[data-workspace='office'] .profile-block{background:linear-gradient(145deg,var(--ws-raised),var(--ws-surface));box-shadow:var(--ws-shadow)}
:root[data-workspace='helpdesk'] .hero{padding:18px 20px;background:radial-gradient(ellipse at 100% 0%,var(--ws-accent-soft),transparent 68%),linear-gradient(145deg,var(--ws-surface),var(--relief-end));border-radius:20px;box-shadow:var(--ws-shadow)}
:root[data-workspace='helpdesk'] .hero:after{display:none}
:root[data-workspace='helpdesk'] .hero h1{font-size:clamp(23px,2.2vw,29px);margin:6px 0 8px}
:root[data-workspace='helpdesk'] .metrics>article{padding:14px 16px;gap:12px}
:root[data-workspace='helpdesk'] :is(.ticket-section,.knowledge-section){padding:16px}
:root[data-workspace='helpdesk'] .ticket-row{padding:12px 14px;background:var(--ws-raised);box-shadow:inset 0 1px 0 var(--relief-edge)}
:root[data-workspace] :is(.project-list-table th,.project-list-table td){padding:10px 12px}
@media(max-width:1100px){:root[data-workspace] .dashboard-insights{grid-template-columns:1fr}}
@media(max-width:720px){:root[data-workspace] :is(.metric,.project-card,.insight-card){padding:16px}:root[data-workspace] .metric>strong{font-size:26px}:root[data-workspace] :is(.metric-grid,.project-grid){gap:12px}:root[data-workspace='helpdesk'] .hero{padding:20px}:root[data-workspace='helpdesk'] :is(.ticket-section,.knowledge-section){padding:16px}:root[data-workspace] .dashboard-insights{margin:14px 0 20px}}

/* Compact the shell and section spacing without reducing mobile touch targets. */
:root[data-workspace='office'] .main{padding-inline:24px;padding-bottom:24px}
:root[data-workspace='office'] .topbar{height:64px;margin-inline:-24px;margin-bottom:18px;padding-inline:24px}
:root[data-workspace='office'] .sidebar-brand{height:64px}
:root[data-workspace='office'] .sidebar .menu-caption{padding-block:12px 6px}
:root[data-workspace='office'] .sidebar nav.kt-menu>.nav-link{margin-block:2px;padding-block:8px}
:root[data-workspace='office'] .avatar{background:linear-gradient(135deg,#6d7380,#515763)}
:root[data-workspace] .progress-track i{background:linear-gradient(90deg,var(--ws-accent),var(--ws-brand))}
:root[data-workspace] .dashboard-project-actions{gap:10px}
:root[data-workspace] .dashboard-project-heading{gap:12px}
:root[data-workspace] :is(.project-status-filters,.project-display-actions){gap:6px}
:root[data-workspace] .table-card :is(th,td){padding-block:10px}
:root[data-workspace] :is(.task-form,#ticket-form,.login-card){gap:14px}
:root[data-workspace] :is(.form-grid,.project-schedule-grid){gap:14px}
:root[data-workspace] form fieldset:not([class]){gap:16px}
:root[data-workspace] .workflow-dialog>.task-form{--form-inset:20px}
:root[data-workspace] .workflow-dialog .dialog-heading{padding-block:16px}
:root[data-workspace] .workflow-dialog .dialog-actions{padding-block:14px}
:root[data-workspace='helpdesk'] .app>header{height:64px}
:root[data-workspace='helpdesk'] main{margin-bottom:32px}
:root[data-workspace='helpdesk'] .hero{margin:20px 0 16px}
:root[data-workspace='helpdesk'] .metrics{gap:12px;margin-bottom:20px}
:root[data-workspace='helpdesk'] .knowledge-section{margin-top:18px}
:root[data-workspace='helpdesk'] .empty{padding:24px 18px}
@media(min-width:721px){
 :root[data-workspace] :is(.button,button.primary,button.secondary){min-height:38px;padding:8px 14px}
 :root[data-workspace] input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']),:root[data-workspace] select:not([multiple]){height:42px;min-height:42px}
}
@media(max-width:720px){
 :root[data-workspace='office'] .main{padding-inline:14px}
 :root[data-workspace='office'] .topbar{margin-inline:-14px;padding-inline:14px;margin-bottom:14px}
 :root[data-workspace='office'] .sidebar nav.kt-menu>.nav-link{min-height:44px}
 :root[data-workspace] .workflow-dialog>.task-form{--form-inset:16px}
 :root[data-workspace='helpdesk'] .hero{margin-top:14px;padding:16px;gap:14px}
 :root[data-workspace='helpdesk'] .metrics{gap:10px;margin-bottom:16px}
}

/* One-step smaller content type; navigation, section headings and form controls retain their sizes. */
:root[data-workspace] :is(main,dialog){font-size:14px}
:root[data-workspace] :is(table,.project-list-table,.project-list-table .project-open,td strong,.detail-description,.knowledge-content,.comment-body p,.activity-item p,.workflow-callout,.project-document-name){font-size:13px;line-height:1.65}
:root[data-workspace] :is(.metric span,.metric small,.metrics span,.project-card p,.project-foot,.task-meta,.project-team-count,.empty-team span,.project-list-table small,.knowledge-card p,.knowledge-admin-card p,.payment-row small,.report-row-head small){font-size:12px;line-height:1.6}
:root[data-workspace] .project-card h3{font-size:16px}
:root[data-workspace] :is(.task-card h4,.routing-rule strong,.finance-master-item strong,.report-row-head strong,.finance-chart-project strong){font-size:13px}
:root[data-workspace] .task-card h4{font-size:14px}
:root[data-workspace='helpdesk'] :is(.ticket-copy strong,.hero p){font-size:14px}
:root[data-workspace='helpdesk'] .knowledge-card strong{font-size:15px}
:root[data-workspace='helpdesk'] :is(.detail-description,.knowledge-content,.comment-body p,.comment-body strong){font-size:13px;line-height:1.7}
:root[data-workspace='helpdesk'] .ticket-side small{font-size:12px}

/* Finance: distinguish cash totals, then let the user narrow the transaction ledger. */
:root[data-workspace] #finance-page .finance-year-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px;padding:16px 18px;border:1px solid var(--ws-line);border-radius:16px;background:linear-gradient(125deg,var(--ws-surface),var(--ws-accent-soft));box-shadow:var(--ws-shadow)}
:root[data-workspace] #finance-page .finance-year-toolbar h2{font-size:21px;margin:4px 0}
:root[data-workspace] #finance-page .finance-year-toolbar>label{display:grid;gap:5px;min-width:145px}
:root[data-workspace] #finance-page .finance-tabs{padding:4px;margin:0 0 16px;gap:4px;border:1px solid var(--ws-line);border-radius:13px;background:var(--ws-raised)}
:root[data-workspace] #finance-page .finance-tab{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;padding:9px 12px;min-height:40px;border:0;border-radius:9px;color:var(--ws-muted);background:transparent}
:root[data-workspace] #finance-page .finance-tab.active{background:var(--ws-surface);color:var(--ws-accent);box-shadow:var(--ws-shadow)}
:root[data-workspace] #finance-page .metric>strong{font-size:clamp(20px,1.9vw,27px);overflow-wrap:anywhere}
:root[data-workspace] #finance-page .metric>span:first-child{padding-right:0}
:root[data-workspace] #finance-page .metric:nth-child(1){border-top:3px solid var(--ws-success)}
:root[data-workspace] #finance-page .metric:nth-child(2){border-top:3px solid var(--ws-warning)}
:root[data-workspace] #finance-page .metric:nth-child(4){border-top:3px solid var(--ux-violet)}
:root[data-workspace] #finance-pending{display:flex;gap:16px}
:root[data-workspace] #finance-pending small{display:block;font-size:11px;font-weight:400;letter-spacing:0;line-height:1.5;margin-top:3px}
:root[data-workspace] #finance-page .metric:last-child>small{display:none}
:root[data-workspace] .finance-browse-toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-top:18px}
:root[data-workspace] .finance-search-label{display:grid;gap:6px;flex:1;min-width:220px}
:root[data-workspace] .finance-browse-toolbar .inline-check{align-self:center;margin:18px 0 0;gap:8px;white-space:nowrap}
:root[data-workspace] .finance-search-hint{font-size:12px;color:var(--ws-muted);margin:7px 0 14px}
:root[data-workspace] #finance-page .finance-month-columns{gap:16px;margin-top:12px}
:root[data-workspace] #finance-page .finance-month-columns>section{min-width:0;padding:16px;border:1px solid var(--ws-line);border-radius:16px;background:var(--ws-surface)}
:root[data-workspace] #finance-page .finance-month-columns h2{font-size:17px;margin:4px 0}
:root[data-workspace] #finance-page .finance-month-list{gap:8px}
:root[data-workspace] #finance-page [data-finance-month]{margin:0 0 8px;border:1px solid var(--ws-line);border-radius:12px;background:var(--ws-raised);overflow:hidden}
:root[data-workspace] #finance-page [data-finance-month]>summary{padding:12px;gap:10px;cursor:pointer}
:root[data-workspace] #finance-page [data-finance-month][open]>summary{border-bottom:1px solid var(--ws-line);background:var(--ws-accent-soft)}
:root[data-workspace] #finance-page .finance-month-items{padding:0 12px}
:root[data-workspace] #finance-page .workflow-cash-row{padding:14px 0}
:root[data-workspace] #finance-page .workflow-row-main{gap:12px;align-items:start}
:root[data-workspace] #finance-page .workflow-row-main>span:first-child{min-width:0;flex:1;overflow-wrap:anywhere}
:root[data-workspace] #finance-page .workflow-row-main>span:last-child{flex-shrink:0}
:root[data-workspace] #finance-page .workflow-amounts{gap:8px;margin:12px 0}
:root[data-workspace] #finance-page .workflow-amounts>div{padding:8px;border-radius:8px;background:var(--ws-surface);min-width:0}
:root[data-workspace] #finance-page .workflow-amounts dd{font-size:13px;overflow-wrap:anywhere;margin:4px 0 0}
:root[data-workspace] #finance-page .workflow-amounts dt{font-size:11px}
:root[data-workspace] #finance-page .workflow-actions{gap:8px;margin-top:10px}
:root[data-workspace] #finance-page [hidden]{display:none!important}
:root[data-workspace] #finance-page .finance-export-actions{display:flex;flex-wrap:wrap;gap:6px}
:root[data-workspace] #finance-page .finance-documents-table{min-width:760px}
@media(max-width:1100px){:root[data-workspace] #finance-page .finance-month-columns{grid-template-columns:1fr}}
@media(max-width:720px){:root[data-workspace] #finance-page .finance-year-toolbar{padding:14px;align-items:start;flex-wrap:wrap}:root[data-workspace] #finance-page .finance-year-toolbar>label{min-width:0;width:100%}:root[data-workspace] #finance-page .finance-tabs{display:grid;grid-template-columns:1fr 1fr}:root[data-workspace] #finance-page .finance-tab{white-space:normal;min-height:44px;padding:8px 6px;font-size:12px}:root[data-workspace] .finance-search-label{min-width:0;flex-basis:100%}:root[data-workspace] .finance-browse-toolbar .inline-check{margin:0;flex-basis:100%}:root[data-workspace] #finance-page .finance-month-columns>section{padding:12px}:root[data-workspace] #finance-page .workflow-amounts{grid-template-columns:1fr}:root[data-workspace] #finance-page .workflow-amounts>div{display:flex;justify-content:space-between;gap:8px}:root[data-workspace] #finance-page .workflow-amounts dd{margin:0}}
:root[data-workspace] #finance-pending .finance-pending-count{font-size:23px;line-height:1.3;color:var(--ws-text);font-variant-numeric:tabular-nums}
:root[data-workspace] #finance-page .finance-tabs{width:100%;box-sizing:border-box}
:root[data-workspace] #finance-page .finance-month-columns .section-heading{margin:0 0 12px;padding:0}
:root[data-workspace] #finance-page .finance-column-empty{padding:18px 12px;margin:0;color:var(--ws-muted);font-size:13px;text-align:center;border:1px dashed var(--ws-line);border-radius:10px}

/* Pearl lighting is static CSS; no decorative images, animated filters or timers. */
:root[data-workspace='helpdesk'] .hero{background:radial-gradient(ellipse at 95% 5%,var(--pearl-glow),transparent 68%),radial-gradient(ellipse at 60% 100%,var(--pearl-blue),transparent 70%),linear-gradient(135deg,var(--ws-surface),var(--relief-end));border-color:var(--ws-line);box-shadow:var(--ws-shadow);color:var(--ws-text)}
:root[data-workspace='helpdesk'] .hero h1{color:var(--ws-text)}
:root[data-workspace='helpdesk'] .hero p{color:var(--ws-muted)}
:root[data-workspace='helpdesk'] .hero .eyebrow{color:var(--ws-accent)}
:root[data-workspace='helpdesk'] .hero .primary{background:var(--ws-button);border-color:var(--ws-button);color:#fff;box-shadow:0 4px 10px -5px var(--relief-shadow)}
:root[data-workspace='helpdesk'] .hero .primary:hover{background:var(--ws-button-hover)}
:root[data-workspace] #finance-page .finance-year-toolbar{background:radial-gradient(ellipse at 100% 0%,var(--pearl-glow),transparent 70%),linear-gradient(130deg,var(--ws-surface),var(--relief-end))}
:root[data-workspace] :is(.theme-button,.appearance-toggle,.notification-button){background:radial-gradient(ellipse at 90% 0%,var(--pearl-glow),transparent 70%),linear-gradient(135deg,var(--ws-surface),var(--ws-raised));border:1px solid var(--ws-line);box-shadow:inset 0 1px 0 var(--relief-edge),-2px -2px 6px var(--relief-light),3px 4px 9px var(--relief-shadow)}
:root[data-workspace] :is(.theme-button,.notification-button){border-radius:50%}
:root[data-workspace] .metric.accent .metric-symbol{background:var(--ws-surface);color:var(--ws-accent)}
:root[data-workspace] .metric.accent strong.money-negative{color:var(--ws-danger)}
:root[data-workspace] .metric.accent strong.money-positive{color:var(--ws-success)}
:root[data-workspace] .drop-zone{background:radial-gradient(ellipse at 100% 0%,var(--pearl-blue),transparent 65%),var(--ws-raised);border-color:var(--ws-control-line)}
:root[data-workspace] .project-stage[aria-pressed='true']{box-shadow:inset 0 1px 0 var(--relief-edge),0 2px 5px var(--relief-shadow)}

/* Capsule controls and rounded panels, with the same compact dimensions. */
:root[data-workspace] :is(.button,button.primary,button.secondary,.appearance-toggle,.project-status-filter,.manage-project){border-radius:999px}
:root[data-workspace] :is(.button.primary,button.primary),:root[data-workspace] :is(.button,button)[data-action-tone='primary'],:root[data-workspace='helpdesk'] .hero .primary{background:linear-gradient(135deg,var(--pearl-action-start),var(--pearl-action-end));color:var(--pearl-action-text);border:1px solid var(--pearl-action-edge);box-shadow:inset 0 1px 1px var(--relief-edge),0 2px 3px #00000004,4px 6px 12px -5px var(--relief-shadow)}
:root[data-workspace] :is(.button.primary,button.primary):hover,:root[data-workspace] :is(.button,button)[data-action-tone='primary']:hover,:root[data-workspace='helpdesk'] .hero .primary:hover{background:linear-gradient(135deg,var(--pearl-action-end),var(--pearl-action-start));color:var(--pearl-action-text)}
:root[data-workspace] :is(.button.secondary,button.secondary){background:radial-gradient(ellipse at 85% 0%,var(--pearl-blue),transparent 70%),linear-gradient(135deg,var(--ws-surface),var(--ws-raised));box-shadow:inset 0 1px 1px var(--relief-edge),3px 5px 9px -4px var(--relief-shadow)}
:root[data-workspace] :is(.button,button):active:not(:disabled){box-shadow:inset 0 2px 4px var(--relief-shadow)}
:root[data-workspace] .icon-button{border-radius:50%}
:root[data-workspace] :is(input,select,textarea):not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']){border-radius:14px}
:root[data-workspace] :is(.project-code,.status-pill,.project-status,.sla-chip,.status){border-radius:999px}
:root[data-workspace] :is(.project-view-toggle,.finance-tabs,.activity-tabs,.master-tabs){border-radius:22px}
:root[data-workspace] .project-view-toggle .button{border-radius:50%}
:root[data-workspace] #finance-page .finance-tab{border-radius:18px}
:root[data-workspace] :is(.workflow-dialog,.wide-dialog){border-radius:28px}
:root[data-workspace] :is(.drop-zone,.team-section,.employee-photo-section,#profile-photo-section){border-radius:20px}
:root[data-workspace='office'] .profile-block{border-radius:24px}
:root[data-workspace='office'] .sidebar nav.kt-menu>.nav-link{border-radius:18px}
:root[data-workspace='helpdesk'] .hero{border-radius:28px;background:radial-gradient(ellipse at 92% 0%,var(--pearl-glow),transparent 70%),radial-gradient(ellipse at 5% 100%,var(--pearl-blue),transparent 65%),linear-gradient(135deg,var(--ws-surface),var(--relief-end))}
:root[data-workspace='helpdesk'] .ticket-row{border-radius:18px}
:root[data-workspace] #finance-page .finance-year-toolbar{border-radius:24px}
@media(max-width:720px){:root[data-workspace] :is(.metric,.project-card,.insight-card,.ticket-section,.knowledge-section){border-radius:20px}:root[data-workspace] :is(.workflow-dialog,.wide-dialog){border-radius:24px 24px 0 0}:root[data-workspace='helpdesk'] .hero{border-radius:24px}}

/* Keep fields and controls separate without increasing the surrounding canvas. */
:root[data-workspace] :is(.task-form,#ticket-form){gap:16px}
:root[data-workspace] :is(.form-grid,.project-schedule-grid){row-gap:18px;column-gap:16px}
:root[data-workspace] .finance-party-card{display:grid;gap:16px}
:root[data-workspace] .project-document-section{display:grid;gap:12px}
:root[data-workspace] .project-document-section>:is(h3,label,small,.form-error){margin:0}
:root[data-workspace] .project-document-section>#project-contract-list:empty{display:none}
:root[data-workspace] .project-document-section>.button{justify-self:start;max-width:100%;white-space:normal}
:root[data-workspace] :is(.project-status-filters,.project-display-actions){gap:10px}
:root[data-workspace] .project-view-toggle{gap:6px}
:root[data-workspace] .dialog-actions{flex-wrap:wrap;gap:10px}
:root[data-workspace] :is(.insight-heading,.section-heading,.section-head)>div>:is(h2,h3)+:is(small,p){display:block;margin-block:4px 0}
@media(max-width:720px){:root[data-workspace] :is(.form-grid,.project-schedule-grid){row-gap:16px}:root[data-workspace] .project-status-filters{gap:8px}}

/* Independent page regions: alerts must never overlap summary cards. */
:root[data-workspace] .sla-alert-bar{margin-block:var(--ws-block-gap)}
:root[data-workspace] :is(.section-heading,.section-head){margin-bottom:14px}
:root[data-workspace] :is(.metric-grid,.project-grid,.dashboard-insights){gap:16px}
@media(max-width:720px){:root[data-workspace]{--ws-block-gap:16px}:root[data-workspace] :is(.metric-grid,.project-grid,.dashboard-insights){gap:12px}}

/* A static glass rim replaces the hard accent border on interactive cards. */
:root[data-workspace]{
 --glass-rim-blue:#cbddeb;--glass-rim-lilac:#dfd6e9;--glass-rim-peach:#eed8d0;
 --glass-sheen-blue:#ddebfa4d;--glass-sheen-peach:#fce4db40;
 --glass-glow-blue:#b7d8f033;--glass-glow-peach:#e7c6db33;
 --glass-card-background:radial-gradient(ellipse at 0% 0%,var(--glass-sheen-blue),transparent 55%) padding-box,radial-gradient(ellipse at 100% 0%,var(--glass-sheen-peach),transparent 55%) padding-box,linear-gradient(145deg,var(--ws-surface),var(--relief-end)) padding-box,linear-gradient(120deg,var(--glass-rim-blue),var(--glass-rim-lilac) 40%,var(--glass-rim-peach) 75%,var(--relief-edge)) border-box;
 --glass-card-shadow:inset 0 1px 1px var(--relief-edge),-3px -2px 12px var(--glass-glow-blue),3px 2px 12px var(--glass-glow-peach),0 9px 18px -11px var(--relief-shadow);
}
:root[data-workspace].dark{
 --glass-rim-blue:#465563;--glass-rim-lilac:#514858;--glass-rim-peach:#5d4b47;
 --glass-sheen-blue:#9fcaf512;--glass-sheen-peach:#edbdb512;
 --glass-glow-blue:#80b5ec0d;--glass-glow-peach:#d39abe0d;
}
:root[data-workspace] :is(.project-card,.task-card,.knowledge-admin-card,.ticket-row,.knowledge-card):is(:hover,:focus-within){
 border-color:transparent;background:var(--glass-card-background);box-shadow:var(--glass-card-shadow);transform:translateY(-1px);
}
:root[data-workspace] :is(.project-card,.task-card,.knowledge-admin-card,.ticket-row,.knowledge-card):focus-visible{
 outline:2px solid var(--ws-focus);outline-offset:3px;
}
:root[data-workspace] .project-card .manage-project:focus-visible{outline-width:2px;outline-offset:2px}
@media(prefers-reduced-motion:reduce){:root[data-workspace] :is(.project-card,.task-card,.knowledge-admin-card,.ticket-row,.knowledge-card):is(:hover,:focus-within){transform:none}}
@media(forced-colors:active){
 :root[data-workspace] :is(.project-card,.task-card,.knowledge-admin-card,.ticket-row,.knowledge-card):is(:hover,:focus-within){border-color:Highlight;background:Canvas;box-shadow:none}
 :root[data-workspace] :is(.project-card,.task-card,.knowledge-admin-card,.ticket-row,.knowledge-card):focus-visible{outline-color:Highlight}
}

/* Appearance and project views share a visible 44px capsule and 36px lens. */
:root[data-workspace] body :is(.appearance-toggle[data-theme-toggle],.project-view-toggle) {
  --toggle-width: 88px;
  --toggle-slide: 0px;
  --toggle-track: linear-gradient(180deg,#e9edf2,#f0f2f6);
  --toggle-edge: #c5ccd6;
  --toggle-lens: linear-gradient(145deg,#fffffff5,#ffffffad);
  --toggle-lens-edge: #fff;
  --toggle-shadow: #303e561c;
  position: relative; isolation: isolate; display: inline-flex;
  box-sizing: border-box; width: var(--toggle-width); min-width: var(--toggle-width);
  height: 44px; min-height: 44px; flex: 0 0 var(--toggle-width);
  padding: 0; gap: 0; overflow: visible;
  border: 0; border-radius: 999px; background: transparent; box-shadow: none;
  color: var(--ws-muted); cursor: pointer; vertical-align: middle;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
:root[data-workspace] body .appearance-toggle[data-theme-toggle].with-label { --toggle-width: 112px; }
:root[data-workspace] body .appearance-toggle[data-theme-toggle]:hover { background: transparent; color: var(--ws-text); transform: none; }
:root[data-workspace] body .appearance-toggle[data-theme-toggle]:focus-visible { outline: 2px solid var(--ws-focus); outline-offset: 2px; }
:root[data-workspace] .appearance-toggle .theme-track,
:root[data-workspace] .project-view-toggle::before {
  position: absolute; inset: 0; border: 1px solid var(--toggle-edge); border-radius: inherit;
  background: var(--toggle-track); box-shadow: inset 0 1px 2px #1d293b08;
  transition: border-color .2s;
}
:root[data-workspace] .appearance-toggle .theme-glass,
:root[data-workspace] .project-view-toggle::after {
  position: absolute; left: 4px; top: 4px; width: 36px; height: 36px;
  box-sizing: border-box; border-radius: 50%; border: 1px solid var(--toggle-lens-edge);
  background: var(--toggle-lens); box-shadow: 0 2px 4px var(--toggle-shadow),inset 0 1px 0 #ffffff24;
  transform: translateX(var(--toggle-slide));
  transition: transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .2s;
}
:root[data-workspace] .appearance-toggle :is(.theme-sun,.theme-moon) {
  position: absolute; top: 13px; width: 18px; height: 18px;
  display: block; margin: 0; pointer-events: none;
  transition: color .2s,opacity .18s;
}
:root[data-workspace] .appearance-toggle .theme-sun { left: 13px; color: #915713; }
:root[data-workspace] .appearance-toggle .theme-moon { right: 13px; color: #687387; }
:root[data-workspace] .appearance-toggle .theme-caption {
  position: absolute; inset: 0 8px 0 44px; display: grid; place-items: center;
  color: var(--ws-text); font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.2;
  letter-spacing: 0; pointer-events: none;
  transform: translateX(var(--toggle-caption-shift,0px));
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
:root[data-workspace] .appearance-toggle.with-label .theme-moon { opacity: 0; }
:root[data-workspace].dark body :is(.appearance-toggle[data-theme-toggle],.project-view-toggle) {
  --toggle-track: linear-gradient(180deg,#1d1f27,#252832);
  --toggle-edge: #515766;
  --toggle-lens: linear-gradient(145deg,#5a6275,#3d4455);
  --toggle-lens-edge: #7b859b80;
  --toggle-shadow: #00000040;
}
:root[data-workspace].dark body .appearance-toggle[data-theme-toggle] {
  --toggle-slide: calc(var(--toggle-width) - 44px);
  --toggle-caption-shift: -36px;
}
:root[data-workspace] body .project-view-toggle:has([data-project-view="list"][aria-pressed="true"]) { --toggle-slide: 44px; }
:root[data-workspace] .project-view-toggle::before,
:root[data-workspace] .project-view-toggle::after { content: ''; pointer-events: none; }
:root[data-workspace] body .project-view-toggle .button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 44px; min-width: 44px; height: 44px; min-height: 44px; flex: 0 0 44px;
  margin: 0; padding: 0; gap: 0; border: 0; border-radius: 50%;
  background: transparent; box-shadow: none; color: var(--ws-muted); transform: none;
}
:root[data-workspace] body .project-view-toggle .button[aria-pressed="true"] { background: transparent; color: var(--ws-text); box-shadow: none; }
/* Hover feedback belongs to the capsule; the selected lens is the only filled circle. */
:root[data-workspace] body .project-view-toggle .button:is(:hover,:active) { background: transparent; box-shadow: none; transform: none; }
:root[data-workspace] body .project-view-toggle .button:focus-visible { outline: 2px solid var(--ws-focus); outline-offset: 2px; }
:root[data-workspace] .project-view-toggle .button i { font-size: 18px; line-height: 1; }
/* Neighbouring actions use the same box height, without changing badge positioning. */
:root[data-workspace='office'] body :is(.top-actions,.project-display-actions) { align-items: center; }
:root[data-workspace='office'] body :is(#notification-button,#new-task-button,#new-project-button) {
  box-sizing: border-box; height: 44px; min-height: 44px; padding-block: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
:root[data-workspace='office'] body #notification-button { width: 44px; min-width: 44px; flex-basis: 44px; }
:root[data-workspace='office'] body #notification-button>i { font-size: 20px; line-height: 1; }
:root[data-workspace].dark .appearance-toggle .theme-sun { color: #929aac; }
:root[data-workspace].dark .appearance-toggle .theme-moon { color: #f2edff; }
:root[data-workspace].dark .appearance-toggle.with-label .theme-sun { opacity: 0; }
:root[data-workspace].dark .appearance-toggle.with-label .theme-moon { opacity: 1; }
@media(hover:hover) {
  :root[data-workspace] .appearance-toggle:hover .theme-track,
  :root[data-workspace] .project-view-toggle:hover::before { border-color: var(--ws-control-line); }
  :root[data-workspace] .appearance-toggle:hover .theme-glass,
  :root[data-workspace] .project-view-toggle:hover::after { box-shadow: 0 2px 6px var(--toggle-shadow),inset 0 1px 0 #ffffff40; }
}
@media(prefers-reduced-motion:reduce) {
  :root[data-workspace] .appearance-toggle :is(.theme-glass,.theme-caption,.theme-track,svg),
  :root[data-workspace] .project-view-toggle::after { transition: none; }
}
@media(forced-colors:active) {
  :root[data-workspace] .appearance-toggle .theme-track,
  :root[data-workspace] .project-view-toggle::before { background: Canvas; border-color: ButtonText; box-shadow: none; }
  :root[data-workspace] .appearance-toggle .theme-glass,
  :root[data-workspace] .project-view-toggle::after { background: Canvas; border-color: Highlight; box-shadow: none; }
  :root[data-workspace] .appearance-toggle :is(.theme-sun,.theme-moon,.theme-caption) { color: ButtonText; }
}
@media(max-width:360px) {
  :root[data-workspace='office'] body .topbar { padding-inline: 10px; gap: 4px; }
  :root[data-workspace='office'] body .top-actions { gap: 4px; }
  :root[data-workspace='office'] body .topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media(max-width:600px) {
  :root[data-workspace='helpdesk'] .app>header {
    height: auto; min-height: 112px; padding: 12px 16px;
    flex-wrap: wrap; gap: 12px;
  }
  :root[data-workspace='helpdesk'] .header-actions {
    width: 100%; justify-content: flex-end; gap: 12px;
  }
  :root[data-workspace='helpdesk'] .header-actions .appearance-toggle { margin-right: auto; }
}