/* Shared finish for the existing workspace. Palette values remain administrator-owned.
   Banking amount controls and payment dialogs keep their own component geometry. */
body.aster-unified-ui{
 --aster-panel-radius:18px;
 --aster-depth-color:color-mix(in srgb,var(--aster-shadow-color) 7%,transparent);
 --aster-panel-shadow:0 1px 2px var(--aster-depth-color),0 10px 30px color-mix(in srgb,var(--aster-depth-color) 45%,transparent);
}
html[data-aster-theme-mode=dark] body.aster-unified-ui{
 --aster-depth-color:color-mix(in srgb,var(--aster-shadow-color) 80%,transparent);
}

/* A quieter heading rhythm leaves room for the next action. */
.aster-unified-ui :is(.page-head,.page-heading,.appearance-heading){gap:20px;margin-bottom:28px}
.aster-unified-ui :is(.page-head,.page-heading,.appearance-heading) h1{
 font-size:clamp(26px,2.35vw,32px);font-weight:650;line-height:1.2;letter-spacing:-.035em;
}
.aster-unified-ui :is(.page-head,.page-heading,.appearance-heading) :is(.subtitle,p){line-height:1.7}
.aster-unified-ui :is(.card-head,.panel-heading,.appearance-panel) h2{letter-spacing:-.025em}
.aster-unified-ui :is(.metric-value,.big-value,.wallet-balance,.asset-price){font-variant-numeric:tabular-nums}

/* The contact account summary has three measures. Fit those cards to the
   available width so a monetary amount does not lose its last decimal to a
   narrow, unused fourth column. Long values retain their full text. */
.aster-unified-ui[data-aster-workspace=crm] .card-body>.metric-grid:has(>.metric>.metric-value>[data-root-account-total]){
 grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
}
.aster-unified-ui[data-aster-workspace=crm] .metric-value>[data-root-account-total]{
 display:block;font-size:clamp(20px,1.8vw,26px);line-height:1.3;
}

/* Resting cards have depth; non-interactive cards do not lift on hover. */
.aster-unified-ui #main :is(.card,.panel,.metric-card,.wallet-card,.appearance-panel){
 border-radius:var(--aster-panel-radius);box-shadow:var(--aster-panel-shadow);
}
.aster-unified-ui :is(.card-head,.panel-heading){row-gap:10px}
.aster-unified-ui .shell>.topbar{box-shadow:0 1px 0 color-mix(in srgb,var(--aster-border) 35%,transparent)}
.aster-unified-ui .sidebar nav.unified-nav{scrollbar-color:var(--aster-border) transparent}
.aster-unified-ui .sidebar nav.unified-nav .unified-nav-link{
 border-radius:11px;transition:background-color 140ms ease,color 140ms ease,box-shadow 140ms ease;
}
.aster-unified-ui .sidebar nav.unified-nav .unified-nav-link.active{
 background:var(--aster-accent-soft);color:var(--aster-on-accent-soft);
 box-shadow:inset 3px 0 var(--aster-accent),inset 0 0 0 1px color-mix(in srgb,var(--aster-accent) 12%,transparent);
}
.aster-unified-ui .sidebar nav.unified-nav .unified-nav-link:focus-visible{
 outline:3px solid var(--aster-focus);outline-offset:2px;
}

/* Keep data dense enough to compare, with a consistent row rhythm. */
.aster-unified-ui #main :is(.table-wrap,.data-panel .table-scroll) th{padding-block:12px;line-height:1.45}
.aster-unified-ui #main :is(.table-wrap,.data-panel .table-scroll) td{padding-block:14px;line-height:1.6;vertical-align:middle}
.aster-unified-ui #main :is(.table-wrap,.data-panel .table-scroll) tbody tr:last-child td{border-bottom:0}

/* The native dialogs retain their existing dimensions, actions and focus behavior. */
.aster-unified-ui dialog:not(.bank-dialog){
 border-radius:20px;border-color:var(--aster-border);
 box-shadow:0 8px 24px var(--aster-depth-color),0 24px 72px var(--aster-depth-color);
}
.aster-unified-ui dialog:not(.bank-dialog)>.dialog-head{
 background:var(--aster-surface-alt);border-bottom-color:var(--aster-border);
}
.aster-unified-ui .appearance-dialog-heading{padding-bottom:12px;border-bottom:1px solid var(--aster-border)}
.aster-unified-ui :is(.page-head .btn-primary,.appearance-apply,.login-form-inner .btn-primary){
 border-radius:11px;min-height:40px;
}
.aster-unified-ui :is(.page-head .btn-primary,.appearance-apply,.login-form-inner .btn-primary):focus-visible{
 outline:3px solid var(--aster-focus);outline-offset:3px;
}

/* A contained sign-in panel uses the same surfaces as the signed-in workspace. */
.aster-unified-ui .login-form-wrap{min-width:0}
.aster-unified-ui .login-form-inner{
 box-sizing:border-box;width:410px;min-width:0;max-width:100%;padding:30px;
 background:var(--aster-surface);border:1px solid var(--aster-border);border-radius:22px;
 box-shadow:var(--aster-panel-shadow);
}
.aster-unified-ui .login-form-inner>h2{letter-spacing:-.035em;line-height:1.25}

@media(max-width:640px){
 .aster-unified-ui :is(.page-head,.page-heading,.appearance-heading){gap:14px;margin-bottom:22px}
 .aster-unified-ui :is(.page-head,.page-heading,.appearance-heading) h1{font-size:26px}
 .aster-unified-ui .login-form-inner{padding:24px 20px;border-radius:18px}
 .aster-unified-ui #main :is(.table-wrap,.data-panel .table-scroll) td{padding-block:12px}
 .aster-unified-ui[data-aster-workspace=crm] .card:has(>.card-body>.metric-grid>.metric>.metric-value>[data-root-account-total])>.card-head{
  flex-wrap:wrap;align-items:flex-start;
 }
 .aster-unified-ui[data-aster-workspace=crm] .card:has(>.card-body>.metric-grid>.metric>.metric-value>[data-root-account-total])>.card-head>div{
  flex-basis:100%;min-width:0;
 }
 .aster-unified-ui[data-aster-workspace=crm] .card:has(>.card-body>.metric-grid>.metric>.metric-value>[data-root-account-total])>.card-head>.btn{
  flex:1 1 auto;max-width:100%;white-space:normal;text-align:center;
 }
}
@media(prefers-reduced-motion:reduce){
 .aster-unified-ui .sidebar nav.unified-nav .unified-nav-link{transition:none}
}