/*
 * Fezma Workspace UI
 * A final, deliberately quiet interaction layer shared by Core and every module.
 * It keeps module markup intact while aligning navigation, records, lists and forms.
 */
:root{
  --ui-accent:#0d98a1;
  --ui-accent-hover:#087981;
  --ui-accent-soft:#e6f7f8;
  --ui-danger:#b4233c;
  --ui-danger-soft:#fff0f2;
  --ui-warning:#9a5d00;
  --ui-warning-soft:#fff7e6;
  --ui-success:#087a55;
  --ui-success-soft:#eaf8f1;
  --ui-control-height:40px;
  --ui-radius-xs:6px;
  --ui-radius-sm:8px;
  --ui-radius-md:12px;
  --ui-radius-lg:16px;
  --ui-shadow-card:0 1px 2px #0f172a0a,0 5px 16px #0f172a08;
  --ui-shadow-float:0 18px 48px #0f172a1a;
  --ui-content:1600px;
}
html:not([data-theme=dark]){
  --bg:#f5f7f8;
  --surface:#fff;
  --surface-2:#f7f9fa;
  --surface-raised:#fff;
  --surface-muted:#f6f8f9;
  --field:#fff;
  --field-border:#cfd8da;
  --text:#20292b;
  --muted:#667477;
  --line:#e2e7e8;
  --border:var(--line);
  --accent:var(--ui-accent);
  --accent-soft:var(--ui-accent-soft);
  --hover:#f0f8f8;
  --focus:#11aeb7;
  --success:var(--ui-success);
  --success-bg:var(--ui-success-soft);
  --danger:var(--ui-danger);
  --danger-bg:var(--ui-danger-soft);
  --warning:var(--ui-warning);
  --warning-bg:var(--ui-warning-soft);
  --shadow:var(--ui-shadow-card);
  --shadow-soft:var(--ui-shadow-card);
  --shadow-raised:var(--ui-shadow-float);
}
html[data-theme=dark]{
  --bg:#0d1112;
  --surface:#161b1c;
  --surface-2:#1b2122;
  --surface-raised:#1b2122;
  --surface-muted:#121718;
  --field:#101516;
  --field-border:#354043;
  --text:#f1f5f5;
  --muted:#a4b0b2;
  --line:#2a3335;
  --border:var(--line);
  --accent:#4bdde2;
  --accent-soft:#13b8c01c;
  --hover:#13b8c014;
  --focus:#56e7eb;
  --success:#6cddb1;
  --success-bg:#103329;
  --danger:#ff8497;
  --danger-bg:#391820;
  --warning:#ffc56b;
  --warning-bg:#382a14;
  --shadow:0 1px 2px #0005,0 8px 24px #0002;
  --shadow-soft:var(--shadow);
  --shadow-raised:0 22px 58px #0008;
}

html{scroll-behavior:smooth;scroll-padding-top:86px}
body{color:var(--text);background:var(--bg);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.skip-link{position:fixed;left:14px;top:10px;z-index:200;translate:0 -150%;padding:10px 14px;border-radius:8px;background:var(--accent);color:#fff;font-weight:700;text-decoration:none;box-shadow:var(--ui-shadow-float);transition:translate .15s ease}
.skip-link:focus{translate:0 0;outline:3px solid #fff;outline-offset:2px}
.ui-route-progress{position:fixed;inset:0 auto auto 0;z-index:190;width:0;height:3px;background:linear-gradient(90deg,#0d98a1,#55e7eb);opacity:0;pointer-events:none;box-shadow:0 0 10px #28d3da80;transition:width .35s ease,opacity .2s ease}
html[data-route-loading] .ui-route-progress{width:72%;opacity:1}
html[data-route-loaded] .ui-route-progress{width:100%;opacity:0}

/* Application frame */
.app-shell{grid-template-columns:252px minmax(0,1fr)}
.app-shell .main{min-width:0;background:var(--bg)}
.app-shell .sidebar{padding:16px 13px}
.app-shell .brand{min-height:58px;padding:2px 9px 14px}
.app-shell .organization-chip{margin:0 4px 15px;padding:9px 11px;border-radius:var(--ui-radius-sm)}
.app-shell .navigation{gap:2px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.app-shell .nav-group{margin:0 0 9px}
.app-shell .nav-group>summary{min-height:31px;padding:6px 10px;color:#9da8aa;font-size:9px;font-weight:750;letter-spacing:.1em;cursor:pointer}
.app-shell .nav-link{min-height:39px;padding:7px 9px;border-radius:var(--ui-radius-sm);font-size:12.5px;font-weight:520}
.app-shell .nav-icon{width:25px;height:25px;flex-basis:25px}
.app-shell .nav-link.active{font-weight:680}
.app-shell .sidebar-footer{padding-top:11px}
.app-shell .topbar{grid-template-columns:minmax(190px,auto) minmax(260px,580px) auto;height:64px;padding:0 clamp(18px,2.2vw,34px);gap:22px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 1px 0 #0f172a05;backdrop-filter:blur(16px) saturate(130%)}
.topbar-heading{gap:9px}
.topbar-home-link{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border:1px solid transparent;border-radius:var(--ui-radius-sm);color:var(--muted);text-decoration:none}
.topbar-home-link:hover{border-color:var(--line);background:var(--surface-2);color:var(--accent)}
.topbar-home-link .ui-icon{width:17px;height:17px}
.app-shell .topbar h1{font-size:16px;font-weight:680;letter-spacing:-.015em}
.app-shell .topbar-search{height:38px;border-color:var(--line);border-radius:var(--ui-radius-sm);background:var(--surface-2)}
.app-shell .content{width:100%;max-width:var(--ui-content);padding:24px clamp(18px,2.2vw,34px) 52px}

/* Page hierarchy */
.app-shell .content :is(h1,h2,h3,h4){color:var(--text);text-wrap:balance}
.app-shell .content h2{font-size:clamp(24px,2.1vw,31px);font-weight:690;letter-spacing:-.035em}
.app-shell .content h3{font-size:16px;font-weight:680;letter-spacing:-.012em}
.app-shell .content h4{font-size:13px;font-weight:680}
.app-shell .section-label,.app-shell .eyebrow{font-size:9px;font-weight:800;letter-spacing:.115em}
.app-shell .content :is(.page-intro,.base-page-head,.record-page-head,.customer-page-head,.sales-record-head,.shared-record-head,.svc-header){align-items:flex-end;gap:18px;margin:2px 0 18px}
.app-shell .content :is(.page-intro,.base-page-head,.record-page-head,.customer-page-head,.sales-record-head,.shared-record-head,.svc-header) h2{margin:4px 0 4px}
.app-shell .content :is(.page-intro,.base-page-head,.record-page-head,.customer-page-head,.sales-record-head,.shared-record-head,.svc-header) p{max-width:780px;margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.content-navigation{height:auto;min-height:32px;margin:-4px 0 10px}
.content-back,.back-link,.visit-back,.asset-back-button{min-height:34px;color:var(--muted);font-size:12px;font-weight:620}

/* Large decorative introductions become useful, compact context panels. */
.app-shell .content :is(.hero-card,.shared-hero,.sales-hero,.module-hero,.sales-start){min-height:0;padding:25px 28px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-card)}
.app-shell .content :is(.hero-card,.shared-hero,.sales-hero,.module-hero,.sales-start) h2{margin:10px 0 6px;font-size:27px}
.app-shell .content :is(.hero-card,.shared-hero,.sales-hero,.module-hero,.sales-start) p{max-width:760px;margin:0;font-size:13px;line-height:1.55}
.app-shell .content :is(.core-visual,.shared-hero-mark,.sales-hero-visual){scale:.74;margin:0}

/* Surfaces: same radius, same border, restrained motion. */
.app-shell .main .content :is(.card,.module-card,.kpi-card,.workflow-tile,.service-card,.record-card,.supplier-card,.overview-module,.overview-metric,.tracking-stats article,.sales-total-grid article,.record-meta-grid article,.billing-summary>a,.process-strip>a,.customer-list-card,.asset-directory-list,.asset-detail-head,.asset-block,.asset-create-section){border:1px solid var(--line);border-radius:var(--ui-radius-md);background:var(--surface);box-shadow:var(--ui-shadow-card)}
.app-shell .main .content :is(.card,.module-card,.kpi-card,.workflow-tile,.service-card,.record-card,.supplier-card,.overview-module,.overview-metric,.asset-directory-row){transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .15s ease}
.app-shell .main .content :is(.card,.module-card,.kpi-card,.workflow-tile,.service-card,.record-card,.supplier-card,.overview-module,.overview-metric):hover{transform:none;border-color:color-mix(in srgb,var(--accent) 24%,var(--line));box-shadow:0 2px 8px #0f172a0b}
.premium-pointer-glow::after{display:none!important}
.app-shell .card{padding:18px}
.app-shell .card-head{align-items:center;min-height:39px;margin-bottom:13px;padding-bottom:12px;border-color:var(--line)}
.app-shell .card-head h3{margin:2px 0 0}
.app-shell .kpi-grid{gap:12px;margin-top:14px}
.app-shell .kpi-card{min-height:105px;padding:16px 17px}
.app-shell .kpi-card span{font-size:11px;font-weight:650}
.app-shell .kpi-card strong{margin-top:7px;font-size:23px;font-variant-numeric:tabular-nums}
.app-shell .kpi-card small{font-size:10.5px}

/* Buttons and action hierarchy */
.app-shell :is(.button,button.button),.platform-shell :is(.button,button.button),.login-panel :is(.button,button.button){min-height:var(--ui-control-height);padding:8px 14px;border-radius:var(--ui-radius-sm);font-size:12px;font-weight:680;line-height:1.2;box-shadow:none;transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,translate .14s ease}
.app-shell :is(.button,button.button):hover,.platform-shell :is(.button,button.button):hover{transform:none;translate:0 -1px}
.app-shell .button.primary,.platform-shell .button.primary,.login-panel .button.primary{border-color:var(--ui-accent);background:var(--ui-accent);color:#fff;box-shadow:0 1px 2px #063e4226}
.app-shell .button.primary:hover,.platform-shell .button.primary:hover,.login-panel .button.primary:hover{border-color:var(--ui-accent-hover);background:var(--ui-accent-hover)}
.app-shell .button.secondary,.platform-shell .button.secondary,.login-panel .button.secondary{border-color:var(--field-border);background:var(--surface);color:var(--text)}
.app-shell .button.secondary:hover,.platform-shell .button.secondary:hover,.login-panel .button.secondary:hover{border-color:color-mix(in srgb,var(--accent) 32%,var(--field-border));background:var(--surface-2)}
.app-shell .button.danger,.platform-shell .button.danger{border-color:var(--danger);background:var(--danger);color:#fff}
.app-shell :is(button,.button):is([disabled],[aria-disabled=true]),.platform-shell :is(button,.button):is([disabled],[aria-disabled=true]){opacity:.6;translate:none;pointer-events:none;cursor:wait}
.app-shell .text-button{font-size:11.5px;font-weight:650}
.app-shell :is(.page-actions,.hero-actions,.sales-head-actions,.asset-editor-actions,.form-actions){gap:8px}

/* Forms */
.app-shell :is(.form-grid,.form-stack),.platform-shell form{--form-gap:13px}
.app-shell .form-stack{gap:var(--form-gap)}
.app-shell .form-grid{gap:var(--form-gap)}
.app-shell label,.platform-shell label,.login-panel label{color:var(--text);font-size:11.5px;font-weight:650;line-height:1.35}
.app-shell label>small,.platform-shell label>small,.form-hint,.field-help{color:var(--muted);font-size:10px;font-weight:450;line-height:1.4}
.app-shell :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),textarea,select),.platform-shell :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),textarea,select){min-height:var(--ui-control-height);margin-top:5px;padding:8px 11px;border:1px solid var(--field-border);border-radius:var(--ui-radius-sm);background:var(--field);color:var(--text);font-size:13px;box-shadow:0 1px 1px #0f172a05;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}
.app-shell textarea,.platform-shell textarea{min-height:86px;line-height:1.5;resize:vertical}
.app-shell select,.platform-shell select{padding-right:32px}
.app-shell :is(input,textarea)::placeholder,.platform-shell :is(input,textarea)::placeholder{color:color-mix(in srgb,var(--muted) 72%,transparent);opacity:1}
.app-shell :is(input,textarea,select):hover,.platform-shell :is(input,textarea,select):hover{border-color:color-mix(in srgb,var(--accent) 34%,var(--field-border))}
.app-shell :is(input,textarea,select):focus,.platform-shell :is(input,textarea,select):focus{outline:0;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 15%,transparent)}
.app-shell :is(input,textarea,select):user-invalid,.platform-shell :is(input,textarea,select):user-invalid{border-color:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 11%,transparent)}
.app-shell :is(input[type=checkbox],input[type=radio]){accent-color:var(--accent)}
.app-shell fieldset{min-width:0;margin:0;padding:15px;border:1px solid var(--line);border-radius:var(--ui-radius-md)}
.app-shell legend{padding:0 7px;color:var(--muted);font-size:11px;font-weight:700}
.app-shell .form-card{overflow:hidden;padding:0}
.app-shell .form-card .card-head{padding:15px 18px 12px}
.app-shell .form-card .form-grid{padding:17px 18px}

/* Search and filter areas are one predictable row. */
.app-shell :is(.list-toolbar,.customer-toolbar,.shared-filter,.svc-toolbar){gap:9px;padding:12px 14px;border-color:var(--line);background:var(--surface)}
.app-shell :is(.search-field,.customer-search){min-width:min(100%,250px)}
.app-shell :is(.search-field,.customer-search) input[type=search]{margin:0}
.app-shell .segmented-control{gap:3px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.app-shell .segmented-control a{min-height:32px;padding:7px 11px;border-radius:7px;color:var(--muted);font-size:11.5px;font-weight:600;text-decoration:none}
.app-shell .segmented-control a.selected{background:var(--surface);color:var(--accent);box-shadow:0 1px 3px #0f172a10}

/* Record lists */
.app-shell .table-wrap{max-width:100%;overflow:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}
.app-shell table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;font-variant-numeric:tabular-nums}
.app-shell th{position:sticky;top:0;z-index:1;padding:10px 13px;border-bottom:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.055em;text-align:left;text-transform:uppercase;white-space:nowrap}
.app-shell td{padding:12px 13px;border-bottom:1px solid var(--line);vertical-align:middle}
.app-shell tbody tr:last-child td{border-bottom:0}
.app-shell tbody tr:hover{background:var(--hover)}
.app-shell tbody tr:focus-within{background:var(--accent-soft)}
.app-shell td small{color:var(--muted)}
.app-shell .table-card{overflow:hidden;padding:0}
.app-shell .table-card>.card-head,.app-shell .table-card>.shared-card-head{padding:15px 17px;margin:0;border-bottom:1px solid var(--line)}
.app-shell .empty-cell,.app-shell .shared-empty,.app-shell .empty-state{padding:34px 20px;color:var(--muted);text-align:center}

/* Status, feedback and expandable areas */
.app-shell :is(.badge,.status-dot,.sales-status,.record-count),.platform-shell .badge{min-height:24px;padding:4px 8px;border:1px solid var(--line);border-radius:999px;font-size:9.5px;font-weight:750;letter-spacing:.025em;line-height:1.2}
.app-shell .alert,.platform-shell .alert,.login-panel .alert{padding:12px 14px;border:1px solid var(--line);border-left-width:3px;border-radius:var(--ui-radius-sm);font-size:12px;box-shadow:none}
.app-shell .alert.success,.platform-shell .alert.success,.login-panel .alert.success{border-color:color-mix(in srgb,var(--success) 28%,var(--line));border-left-color:var(--success);background:var(--success-bg);color:var(--success)}
.app-shell .alert.error,.platform-shell .alert.error,.login-panel .alert.error{border-color:color-mix(in srgb,var(--danger) 28%,var(--line));border-left-color:var(--danger);background:var(--danger-bg);color:var(--danger)}
.app-shell details:not(.nav-group):not(.topbar-popover):not(.login-recovery){border-color:var(--line)}
.app-shell details:not(.nav-group):not(.topbar-popover)>summary{min-height:38px;border-radius:var(--ui-radius-sm);cursor:pointer}
.app-shell details:not(.nav-group):not(.topbar-popover)>summary:hover{color:var(--accent)}
.app-shell :is(.record-tabs,.visit-pane-tabs){gap:3px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);overflow-x:auto;scrollbar-width:none}
.app-shell .record-tabs a,.app-shell .visit-pane-tabs button{min-height:34px;padding:7px 12px;border-radius:7px;white-space:nowrap}
.app-shell .record-tabs a.selected,.app-shell .visit-pane-tabs button[aria-selected=true]{background:var(--surface);color:var(--accent);box-shadow:0 1px 3px #0f172a10}

/* Dialogs */
.app-shell dialog,.customer-dialog{border-radius:var(--ui-radius-lg)}
.command-menu-panel,.customer-dialog-card{border-radius:var(--ui-radius-lg);background:var(--surface)}
.command-menu::backdrop,.customer-dialog::backdrop{background:#07101299;backdrop-filter:blur(4px)}
.customer-dialog-card>header,.customer-dialog-card>footer{padding:17px 21px}
.customer-form-columns>section{padding:20px 21px}

/* Platform operator area follows the same density. */
.platform-shell{background:var(--bg);color:var(--text)}
.platform-shell .platform-bar{min-height:64px;padding:11px clamp(18px,3vw,42px);background:color-mix(in srgb,#101617 96%,transparent)}
.platform-shell .platform-content{width:min(var(--ui-content),calc(100% - 40px));padding:26px 0 56px}
.platform-shell .platform-head{margin-bottom:18px}
.platform-shell .platform-head h1{font-size:30px;letter-spacing:-.035em}
.platform-shell .card{border-color:var(--line);border-radius:var(--ui-radius-md);background:var(--surface);box-shadow:var(--ui-shadow-card)}
.platform-shell .provision-card .card-head,.platform-shell .provision-section,.platform-shell .provision-actions{padding-left:20px;padding-right:20px}
.platform-shell .organization-list{gap:14px}
.platform-shell .organization-card{border-radius:var(--ui-radius-md)}
.platform-shell .package-card{border-color:var(--line);border-radius:var(--ui-radius-md);background:var(--surface-2)}

/* Login keeps its branded scene while matching control behavior. */
.login-panel .form-stack{gap:14px}
.login-panel label{font-size:11px}
.login-panel input{min-height:46px;border-radius:var(--ui-radius-sm)}
.login-panel .button{border-radius:var(--ui-radius-sm)}

.ui-submit-spinner{width:13px;height:13px;flex:0 0 auto;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ui-spin .65s linear infinite}
@keyframes ui-spin{to{rotate:1turn}}

@media(max-width:1200px){
  .app-shell .content :is(.core-visual,.shared-hero-mark,.sales-hero-visual){display:none}
}
@media(max-width:1050px) and (min-width:861px){
  .app-shell{grid-template-columns:76px minmax(0,1fr)}
  .topbar-home-link{display:none}
}
@media(max-width:860px){
  html{scroll-padding-top:72px}
  .app-shell .topbar{grid-template-columns:minmax(0,1fr) auto;height:60px;padding:0 13px}
  .topbar-home-link{display:none}
  .app-shell .content{padding:17px 13px 38px}
  .app-shell .content :is(.page-intro,.base-page-head,.record-page-head,.customer-page-head,.sales-record-head,.shared-record-head,.svc-header){align-items:flex-start;flex-direction:column}
  .app-shell .content :is(.hero-card,.shared-hero,.sales-hero,.module-hero,.sales-start){padding:21px}
  .app-shell .content :is(.hero-card,.shared-hero,.sales-hero,.module-hero,.sales-start) h2{font-size:24px}
  .app-shell :is(.list-toolbar,.customer-toolbar,.shared-filter,.svc-toolbar){align-items:stretch;flex-wrap:wrap}
  .app-shell :is(.search-field,.customer-search){flex-basis:100%;width:100%}
  .platform-shell .platform-content{width:min(100% - 26px,var(--ui-content));padding-top:20px}
}
@media(max-width:600px){
  .app-shell .content h2{font-size:24px}
  .app-shell .kpi-grid{grid-template-columns:1fr 1fr;gap:8px}
  .app-shell .kpi-card{min-height:92px;padding:13px}
  .app-shell .kpi-card strong{font-size:20px}
  .app-shell :is(.page-actions,.hero-actions,.sales-head-actions,.asset-editor-actions,.form-actions){align-items:stretch;flex-direction:column;width:100%}
  .app-shell :is(.page-actions,.hero-actions,.sales-head-actions,.asset-editor-actions,.form-actions) .button{width:100%}
  .app-shell .segmented-control{width:100%;overflow-x:auto}
  .app-shell .segmented-control a{flex:0 0 auto}
  .app-shell .card{padding:15px}
  .customer-dialog-card>header,.customer-dialog-card>footer,.customer-form-columns>section{padding-left:16px;padding-right:16px}
}
@media(max-width:380px){.app-shell .kpi-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .skip-link,.ui-route-progress,.app-shell *,.platform-shell *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{
  .sidebar,.topbar,.content-navigation,.ui-route-progress,.skip-link,.page-actions,.hero-actions{display:none!important}
  .app-shell{display:block}.app-shell .main{background:#fff}.app-shell .content{max-width:none;padding:0}
  .app-shell .card{break-inside:avoid;box-shadow:none}
}

/* Service workspace: keep its workflow colors, align its controls and density. */
.app-shell .main .content .svc .svc-panel{padding:18px;border:1px solid var(--line);border-radius:var(--ui-radius-md);background:var(--surface);box-shadow:var(--ui-shadow-card)}
.app-shell .main .content .svc .svc-btn{min-height:var(--ui-control-height);padding:8px 14px;border:1px solid var(--field-border);border-radius:var(--ui-radius-sm);background:var(--surface);color:var(--text);font-size:12px;font-weight:680;box-shadow:none;transition:background-color .14s ease,border-color .14s ease,color .14s ease,translate .14s ease}
.app-shell .main .content .svc .svc-btn:hover{border-color:color-mix(in srgb,var(--accent) 32%,var(--field-border));background:var(--surface-2);filter:none;translate:0 -1px}
.app-shell .main .content .svc .svc-primary{border-color:var(--ui-accent);background:var(--ui-accent);color:#fff}
.app-shell .main .content .svc .svc-primary:hover{border-color:var(--ui-accent-hover);background:var(--ui-accent-hover)}
.app-shell .main .content .svc :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),select,textarea){min-height:var(--ui-control-height);padding:8px 11px;border:1px solid var(--field-border)!important;border-radius:var(--ui-radius-sm);background:var(--field)!important;color:var(--text)!important;font-size:13px;box-shadow:0 1px 1px #0f172a05;color-scheme:normal}
.app-shell .main .content .svc :is(input,select,textarea):focus{outline:0;border-color:var(--focus)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 15%,transparent)}
.app-shell .main .content .svc :is(.svc-filter[aria-current=true],.svc-tabs a[aria-current=page],.svc-case-flow a.current){border-color:var(--ui-accent);background:var(--ui-accent);color:#fff!important}
.app-shell .main .content .svc .svc-card{border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-card)}
.app-shell .main .content .svc .svc-card:hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--line));transform:none;box-shadow:0 2px 8px #0f172a0b}
.app-shell .main .content .svc .svc-column{border-radius:var(--ui-radius-md);background:var(--surface-muted)}
.app-shell .main .content .svc :is(.svc-worklist,.svc-week,.svc-day){border-color:var(--line);border-radius:var(--ui-radius-md);background:var(--surface)}
.app-shell .main .content .svc .svc-workrow{padding:14px 16px;border-color:var(--line);font-size:13px}
.app-shell .main .content .svc .svc-workhead{background:var(--surface-2);color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.055em}
html[data-theme=dark] .app-shell .main .content .svc :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),select,textarea){background:var(--field)!important;color:var(--text)!important;border-color:var(--field-border)!important;color-scheme:dark}

/* Authentication choices: password and device-bound passkeys */
.login-inline-link{align-self:flex-end;margin-top:-5px;color:var(--accent,#087f87);font-size:.84rem;font-weight:750;text-decoration:none}
.login-inline-link:hover{text-decoration:underline}
.auth-divider{display:flex;align-items:center;gap:12px;margin:17px 0 14px;color:var(--muted);font-size:.72rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.auth-divider::before,.auth-divider::after{content:"";height:1px;flex:1;background:var(--line)}
.passkey-login-button{gap:9px;justify-content:center}
.passkey-icon{font-size:1.2rem;line-height:1}
.passkey-status{min-height:1.2em;margin:9px 0 0;color:var(--muted);font-size:.8rem;line-height:1.45;text-align:center}
.passkey-status.error-text{color:var(--danger,#b42318)}
.login-secondary-links{display:flex;justify-content:center;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.login-secondary-links a{color:var(--muted);font-size:.8rem;font-weight:700;text-decoration:none}
.login-secondary-links a:hover{color:var(--accent,#087f87);text-decoration:underline}
.auth-page-body{display:grid;place-items:center;min-height:100vh;padding:72px 20px 30px;background:radial-gradient(circle at 15% 15%,rgba(22,175,183,.11),transparent 36%),var(--bg)}
.auth-page-card{position:relative;width:min(100%,560px);padding:38px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 24px 70px rgba(0,20,24,.16)}
.auth-page-card-wide{width:min(100%,620px)}
.auth-page-logo{display:block;width:150px;height:auto;margin:18px 0 34px}
.auth-page-logo-dark{display:none}
html:not([data-theme=dark]) .auth-page-logo-light{display:none}
html:not([data-theme=dark]) .auth-page-logo-dark{display:block}
.auth-back-link{color:var(--muted);font-size:.84rem;font-weight:750;text-decoration:none}
.auth-back-link:hover{color:var(--accent,#087f87)}
.auth-page-card h1{margin:7px 0 10px;font-size:clamp(1.7rem,5vw,2.25rem);letter-spacing:-.035em}
.auth-page-lead{margin:0 0 25px;color:var(--muted);font-size:.95rem;line-height:1.65}
.auth-help-step{display:flex;gap:13px;margin:12px 0;padding:15px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.auth-help-step>span{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:var(--accent,#087f87);color:white;font-size:.8rem;font-weight:800}
.auth-help-step strong{display:block;font-size:.88rem}
.auth-help-step p{margin:4px 0 0;color:var(--muted);font-size:.8rem;line-height:1.5}
.auth-page-card>.button{margin-top:22px}
.passkey-unavailable{margin:10px 0 0;color:var(--muted);font-size:.78rem;line-height:1.5}
.passkey-account-card .passkey-status{text-align:left}
.passkey-list{display:grid;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.passkey-item{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:13px 14px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2)}
.passkey-item strong,.passkey-item span{display:block}
.passkey-item strong{font-size:.87rem}.passkey-item span{margin-top:3px;color:var(--muted);font-size:.74rem}
.passkey-item details{min-width:92px;text-align:right}.passkey-item summary{cursor:pointer;color:var(--danger,#b42318);font-size:.78rem;font-weight:750}
.passkey-item form{margin-top:10px;text-align:left}.passkey-item label{font-size:.74rem}
@media (max-width:640px){.auth-page-body{align-items:start;padding:68px 12px 18px}.auth-page-card{padding:26px 21px;border-radius:14px}.auth-page-logo{margin-bottom:27px}.login-secondary-links{margin-top:12px}.passkey-item{display:block}.passkey-item details{margin-top:10px;text-align:left}}