/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-teal-50:oklch(98.4% .014 180.72);--color-teal-700:oklch(51.1% .096 186.391);--color-teal-800:oklch(43.7% .078 188.216);--color-violet-50:oklch(96.9% .016 293.756);--color-slate-50:oklch(98.4% .003 247.858);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-white:#fff;--spacing:.25rem;--container-2xl:42rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-widest:.1em;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components{.revolut-card-grid{gap:calc(var(--spacing) * 4);display:grid}@media (min-width:48rem){.revolut-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:80rem){.revolut-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.revolut-card-grid{margin:20px 0}.revolut-card{color:#f8fafc;background:linear-gradient(135deg,#173e4d,#112033);border-radius:22px;min-width:0;padding:24px;box-shadow:0 12px 24px #132d4014}.revolut-card-top,.revolut-card-bottom{justify-content:space-between;align-items:center;gap:calc(var(--spacing) * 3);display:flex}.revolut-card-top{color:#c6dce7;font-size:12px}.revolut-card-top>span:first-child{align-items:center;gap:calc(var(--spacing) * 2);display:inline-flex}.revolut-card h3{overflow-wrap:anywhere;margin:26px 0 16px;font-size:17px;font-weight:600}.revolut-card-digits{letter-spacing:.06em;white-space:nowrap;margin:0 0 24px;font-size:19px}.revolut-card-limits{gap:calc(var(--spacing) * 3);border-top:1px solid #ffffff29;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px;padding-top:18px;display:grid}.revolut-card-limits dt{color:#b7d0dc;font-size:11px}.revolut-card-limits dd{margin:5px 0 0;font-size:13px;font-weight:600}.revolut-card-note{color:#b7d0dc;margin:15px 0 0;font-size:11px}.revolut-amount{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}.revolut-metrics{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:40rem){.revolut-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}.revolut-card .badge{font-size:11px}.revolut-card .ui-icon{width:16px;height:16px}.employee-metrics{gap:calc(var(--spacing) * 3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}@media (min-width:64rem){.employee-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}.employee-metrics{margin-bottom:16px}.employee-metric{background-color:var(--color-white);color:#17243a;border:1px solid #dbe3ec;border-radius:16px;padding:18px;display:block}.employee-metric:hover{border-color:#0d8173;text-decoration:none}.employee-metric>div{align-items:center;gap:10px;font-size:13px;font-weight:600;display:flex}.employee-metric>strong{letter-spacing:-.03em;margin:16px 0 8px;font-size:28px;line-height:1.2;display:block}.employee-metric small{color:#607087;font-size:12px;display:block}.employee-quick-actions{gap:calc(var(--spacing) * 2);flex-wrap:wrap;margin-bottom:24px;display:flex}.employee-overview-grid{gap:calc(var(--spacing) * 5);display:grid}@media (min-width:64rem){.employee-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.employee-overview-grid .panel{min-width:0}.employee-overview-grid h2{align-items:center;gap:8px;margin:0;display:flex}.employee-overview-grid .staff-section-head{margin:0 0 16px}.employee-activity-list,.employee-leave-list{margin:0;padding:0;list-style:none}.employee-activity-list li{border-top:1px solid #edf1f5;align-items:center;gap:12px;padding:14px 0;display:flex}.employee-activity-list li:first-child{border-top:0}.employee-activity-list li>div{flex:1;min-width:0}.employee-activity-list strong,.employee-activity-list small{overflow-wrap:anywhere;display:block}.employee-activity-list small{color:#607087;margin-top:3px;font-size:12px}.employee-activity-value{white-space:nowrap;font-size:13px;font-weight:700}.employee-leave-list li{border-top:1px solid #edf1f5;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;display:flex}.employee-leave-list li:first-child{border-top:0}.employee-leave-list strong{font-size:13px}.employee-text-link{font-size:13px;font-weight:600}.employee-useful-links{margin-top:18px}.employee-useful-links>a{color:#17243a;border-top:1px solid #edf1f5;align-items:center;gap:12px;padding:14px 0;display:flex}.employee-useful-links>a:first-child{border-top:0}.employee-useful-links>a>span:nth-child(2){flex:1;min-width:0}.employee-useful-links strong,.employee-useful-links small{display:block}.employee-useful-links small{color:#607087;margin-top:3px;font-size:12px}.staff-profile-summary{align-items:center;gap:calc(var(--spacing) * 4);background-color:var(--color-white);border:1px solid #dde5ec;border-radius:18px;flex-wrap:wrap;margin-bottom:24px;padding:20px;display:flex}.staff-profile-name{flex:1;min-width:150px}.staff-profile-name p{margin:0 0 4px}.staff-profile-name strong{font-size:18px;line-height:1.4}.staff-profile-summary .btn{margin-left:auto}.avatar img{object-fit:cover;border-radius:inherit;width:100%;height:100%}.photo-picker{align-items:flex-start;gap:calc(var(--spacing) * 5);flex-wrap:wrap;margin-bottom:24px;display:flex}.photo-picker-fields{flex:1;min-width:180px}.avatar.profile-photo-preview{color:#087568;background:#e0f2ef;border-radius:20px;width:80px;height:80px;font-size:28px;overflow:hidden}.photo-picker-fields label{margin-bottom:8px}.photo-picker-fields p{margin:8px 0}.mobile-account .avatar{vertical-align:middle;margin-right:8px;display:inline-flex}body{background-color:var(--color-slate-50);font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#17243a;background:#f4f7f9;margin:0;line-height:1.6}a{color:#087568;text-decoration:none}a:hover{text-decoration:underline}h1{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);letter-spacing:-.035em;margin:8px 0 12px;font-size:clamp(28px,2.4vw,34px);line-height:1.15}h2{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);margin:0 0 20px;line-height:1.4}h3{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);margin:0 0 12px}.muted,small{color:#526176}.eyebrow{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.13em;color:#526176}.panel{border-radius:var(--radius-xl);border-style:var(--tw-border-style);background-color:var(--color-white);padding:calc(var(--spacing) * 6);border-width:1px;border-color:#e0e6ec;border-radius:14px;margin-bottom:24px;box-shadow:0 3px 14px #17243a03}.page-head{justify-content:space-between;align-items:center;gap:calc(var(--spacing) * 4);flex-wrap:wrap;margin-bottom:28px;display:flex}.page-head>div:first-child{min-width:0}.page-head p{max-width:70ch;margin:0}.actions{align-items:center;gap:calc(var(--spacing) * 2);flex-wrap:wrap;margin:0 0 16px;display:flex}.page-head .actions{margin:0}.btn{justify-content:center;align-items:center;gap:calc(var(--spacing) * 2);border-radius:var(--radius-lg);border-style:var(--tw-border-style);background-color:var(--color-white);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:#33435a;cursor:pointer;border-width:1px;border-color:#7b8899;min-height:44px;line-height:1.3;text-decoration:none;display:inline-flex}.btn:hover{background:#eef2f7;text-decoration:none}.btn.primary{color:#fff;background:#087568;border-color:#087568}.btn.primary:hover{background:#065c52}.btn.danger{color:#9e3039;background:#fff6f6;border-color:#b64b52}button:disabled{opacity:.6;cursor:wait}button,input,textarea,select{font:inherit}:focus-visible{outline-offset:3px;outline:3px solid #096cbd}.skip-link{z-index:99;background:#fff;border:2px solid #096cbd;border-radius:8px;padding:12px 20px;position:absolute;top:-100px;left:16px}.skip-link:focus{top:16px}label{gap:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:#33435a;margin-bottom:20px;display:grid}input,select,textarea{border-radius:var(--radius-lg);border-style:var(--tw-border-style);background-color:var(--color-white);width:100%;min-width:0;padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);color:#17243a;border-width:1px;border-color:#7b8899;max-width:100%;min-height:46px;display:block}input::placeholder,textarea::placeholder{color:#526176}textarea{resize:vertical;min-height:110px}input:focus,select:focus,textarea:focus{outline-offset:2px;outline:3px solid #096cbd}input[type=checkbox],input[type=radio]{accent-color:#087568;flex-shrink:0;width:20px;height:20px;min-height:20px;padding:0}.check{align-items:flex-start;gap:calc(var(--spacing) * 3);color:#33435a;background:#f5f7fb;border-radius:8px;padding:12px;font-weight:400;display:flex}.check input{margin-top:2px}.grid{column-gap:calc(var(--spacing) * 6);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.grid>*{min-width:0}.wide{grid-column:1/-1}.columns{gap:calc(var(--spacing) * 6);grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);display:grid}.columns>*{min-width:0}.stats{gap:calc(var(--spacing) * 4);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:24px;display:grid}.stats .panel{margin:0;padding:20px}.stats p{margin:0}.big{letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:12px;font-size:32px;font-weight:700;line-height:1.2;display:block}.area-grid{gap:calc(var(--spacing) * 3);flex-wrap:wrap;display:flex}.table-wrap{border:1px solid #dce2eb;border-radius:8px;max-width:100%;overflow-x:auto}table{border-collapse:collapse;text-align:left;width:100%}th{text-transform:uppercase;letter-spacing:.055em;color:#526176;white-space:nowrap;background:#f3f5f9;padding:14px 16px;font-size:11px}td{vertical-align:top;border-bottom:1px solid #e8edf3;padding:14px 16px;font-size:13px}tr:last-child td{border-bottom:0}td small,article small{margin-top:4px;display:block}tbody tr:hover{background:#f8fafc}td .btn{font-size:12px}td form{min-width:180px}td label{margin-bottom:10px}.badge{color:#345687;white-space:nowrap;background:#edf1fa;border-radius:6px;padding:5px 9px;font-size:12px;font-weight:600;display:inline-block}.available,.success{color:#146346;background:#e7f5ef}.maintenance,.warning{color:#785517;background:#fff3d9}.retired,.error{color:#9e3039;background:#fff0f0}.alert{border:1px solid;border-radius:10px;margin:0 0 24px;padding:16px 20px;line-height:1.6}.empty{text-align:center;color:#526176;background:#f8fafc;border:1px dashed #a6b1bf;border-radius:8px;margin:16px 0;padding:28px 20px}.empty p{margin:8px 0 0}.empty-mark{color:#526176;font-size:22px}.filters{align-items:flex-end;gap:calc(var(--spacing) * 4);flex-wrap:wrap;display:flex}.filters label{flex:1;min-width:160px;margin:0}.filters .btn{min-height:46px}.pagination{margin-top:20px}.pagination .muted{margin-right:auto}.timeline{border-left:3px solid #7caba2;margin-bottom:20px;padding:8px 20px}.timeline p{margin:8px 0}.logo{color:#fff;letter-spacing:-1.8px;font-size:29px;font-weight:800;line-height:1.2;text-decoration:none}.logo:hover{text-decoration:none}.logo span{color:#50ceb5}.logo.dark{color:#17243a}.logo.dark span{color:#087568}.brand-subtitle{letter-spacing:.08em;text-transform:uppercase;color:#a8b5ca;margin:8px 0 0;font-size:11px;display:block}.sidebar{background:#111c30;flex-direction:column;width:232px;padding:24px 16px 16px;display:flex;position:fixed;inset:0 auto 0 0;overflow-y:auto}.sidebar>nav{scrollbar-width:thin;flex:1;min-height:0;margin-top:24px;padding-right:4px;overflow-y:auto}.nav-group{margin-bottom:18px}.nav-group-title{color:#a8b5ca;text-transform:uppercase;letter-spacing:.12em;margin:0 12px 9px;font-size:10px;font-weight:600}.nav-link{color:#d0d8e5;border-radius:10px;align-items:center;gap:12px;min-height:44px;margin-bottom:3px;padding:8px 10px;font-size:13px;display:flex}.nav-link:hover{color:#fff;background:#22324d;text-decoration:none}.nav-link.active{color:#fff;background:#24473f;font-weight:600;box-shadow:inset 3px 0 #50ceb5}.nav-dot{border:1px solid;border-radius:2px;flex-shrink:0;width:6px;height:6px;display:block}.active .nav-dot{background:#50ceb5;border-color:#50ceb5}.account{color:#fff;border-top:1px solid #3c4b61;flex-shrink:0;grid-template-columns:36px 1fr;gap:10px;margin-top:16px;padding-top:16px;display:grid}.account strong{font-size:13px}.account small{color:#a8b5ca;font-size:11px;display:block}.account form{grid-column:1/-1;margin-top:4px}.account .btn{color:#d0d8e5;background:0 0;border-color:#53647b;width:100%}.avatar{background:#22324d;border-radius:10px;place-items:center;width:36px;height:36px;font-weight:700;display:grid}.workspace{min-width:0;margin-left:232px}.topbar{background:#fff;border-bottom:1px solid #dce2eb;justify-content:space-between;align-items:center;gap:24px;padding:16px 28px;display:flex}.topbar-context{gap:3px;min-width:0;display:grid}.topbar-context .eyebrow{font-size:10px}.topbar-context strong{font-size:14px}.global-search{gap:8px;width:min(440px,55%);display:flex}.global-search input{background:#f8fafc;font-size:13px}main{min-width:0;max-width:1440px;margin:0 auto;padding:28px}main:focus{outline:none}footer{color:#526176;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:24px 32px;font-size:11px;display:flex}.mobile-menu{display:none}.public-main{max-width:1080px;margin:0 auto;padding:36px 24px 56px}.public-brand{border-bottom:1px solid #dce2eb;justify-content:space-between;align-items:center;gap:20px;margin-bottom:40px;padding:0 0 24px;display:flex}.public-brand .brand-subtitle{color:#526176;margin:0}.public-main .page-head{margin-bottom:32px}.auth-card{max-width:520px;margin:40px auto}.auth-card .btn{width:100%}.setup-banner{color:#fff;background:#111c30;border-radius:12px;margin-bottom:24px;padding:24px 28px}.setup-banner h2{color:#fff;margin-bottom:8px}.setup-banner p{color:#d0d8e5;max-width:80ch;margin:0}.setup-step{align-items:center;gap:12px;margin-bottom:20px;display:flex}.setup-step h2{margin:0}.step-number{color:#17243a;background:#edf2f9;border:1px solid #a6b1bf;border-radius:8px;flex-shrink:0;place-items:center;width:32px;height:32px;font-size:13px;font-weight:700;display:grid}.requirement-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 20px;padding:0;list-style:none;display:grid}.requirement{border:1px solid #a6b1bf;border-radius:8px;gap:8px;padding:12px;display:grid}.requirement strong{font-size:13px}.requirement .badge{width:fit-content}.field-help{color:#526176;margin:-8px 0 20px;font-size:12px}.install-actions{border-top:1px solid #dce2eb;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:24px;padding-top:24px;display:flex}.install-actions p{max-width:42ch;margin:0}.install-actions .actions{margin:0}.password-control{align-items:stretch;gap:8px;min-width:0;display:flex}.password-control input{flex:1}.password-toggle{color:#33435a;cursor:pointer;background:#fff;border:1px solid #7b8899;border-radius:8px;min-height:44px;padding:8px 12px;font-size:12px;font-weight:600}.load-row{border:1px solid #a6b1bf;border-radius:10px;margin:16px 0;padding:20px}.load-row.done{background:#f3faf7;border-color:#63a68f}.load-row .quantities{flex-wrap:wrap;gap:28px;margin:20px 0;display:flex}.load-row .quantities strong{margin-top:5px;font-size:20px;display:block}.load-row form{max-width:280px}.calendar{border:1px solid #a6b1bf;border-radius:8px;grid-template-columns:repeat(7,minmax(0,1fr));display:grid;overflow:hidden}.day{border-bottom:1px solid #dce2eb;border-right:1px solid #dce2eb;min-height:118px;padding:10px}.day.outside{color:#526176;background:#f3f5f9}.day a{color:#146346;background:#e7f5ef;border-radius:6px;margin:8px 0;padding:8px;font-size:12px;display:block}.calendar-label{text-align:center;color:#526176;background:#f3f5f9;padding:10px;font-size:12px;font-weight:600}.file-path{white-space:pre-wrap;word-break:break-all;background:#f3f5f9;border-radius:8px;padding:16px}.mono{font-family:ui-monospace,monospace}.print-preview{background:#fff;padding:32px}details{margin:16px 0}summary{cursor:pointer;color:#087568;font-size:14px;font-weight:600}details>div{margin-top:20px}.tabs{flex-wrap:wrap;gap:10px;margin:16px 0;display:flex}.priorities{margin-bottom:28px}.priorities .panel{border-top:3px solid #087568}.priority-list{gap:12px;display:grid}.priority-item{border-bottom:1px solid #dce2eb;padding:12px 0}.priority-item:last-child{border:0}.priority-item small{display:block}.priority-item .badge{margin-bottom:8px}.tone-blue{--tone:#2454a6;--tone-bg:#eaf1ff;--tone-edge:#a6bff0}.tone-teal{--tone:#086a56;--tone-bg:#e5f7f0;--tone-edge:#81c7b1}.tone-violet{--tone:#6b3bb0;--tone-bg:#f2eaff;--tone-edge:#c2a5e9}.tone-amber{--tone:#885613;--tone-bg:#fff3d8;--tone-edge:#dfb85c}.tone-rose{--tone:#a53049;--tone-bg:#ffebf0;--tone-edge:#e9a1b0}.tone-cyan{--tone:#126a80;--tone-bg:#e5f6fc;--tone-edge:#87c6d7}.area-button:not(.primary){background:var(--tone-bg);border-color:var(--tone-edge);color:var(--tone)}.area-button:not(.primary):hover{border-color:var(--tone);filter:brightness(.98)}.ui-icon{vertical-align:middle;flex-shrink:0;width:20px;height:20px;display:inline-block}.nav-icon,.icon-tile,.section-icon{color:var(--tone,#2454a6);background:var(--tone-bg,#eaf1ff);border:1px solid var(--tone-edge,#a6bff0);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.nav-icon{width:28px;height:28px}.nav-icon .ui-icon{width:17px;height:17px}.nav-link{gap:10px}.nav-link.active{box-shadow:inset 3px 0 var(--tone-edge);background:#22324d}.nav-link.active .nav-icon{border-color:var(--tone-edge)}.sidebar .nav-link:hover .nav-icon{filter:brightness(1.03)}.metric-card{background:#fff;border-color:#e0e6ec}.metric-label{justify-content:space-between;align-items:center;gap:8px;display:flex}.metric-label p{line-height:1.4}.icon-tile{width:36px;height:36px}.metric-card .big{color:#17243a}.action-icon{color:var(--tone);align-items:center;display:inline-flex}.btn.primary .action-icon{color:#fff}.btn>.ui-icon{width:18px;height:18px}.panel-title{align-items:center;gap:10px;display:flex}.section-icon{width:32px;height:32px}.section-icon .ui-icon{width:18px;height:18px}.badge{align-items:center;gap:6px;display:inline-flex}.badge .ui-icon{width:14px;height:14px}.job-planned{color:#2454a6;background:#eaf1ff}.job-active{color:#6b3bb0;background:#f2eaff}.job-completed{color:#086a56;background:#e5f7f0}.job-cancelled{color:#a53049;background:#ffebf0}@media (max-width:767px){.mobile-menu .nav-link.active{background:var(--tone-bg);color:var(--tone);border-color:var(--tone-edge);box-shadow:inset 3px 0 var(--tone)}.metric-label{flex-direction:column-reverse;align-items:start;gap:10px}.metric-card .big{margin-top:10px}}.app-dialog.user-dialog{width:min(960px,100% - 32px)}.user-dialog[open]{flex-direction:column;display:flex}.user-dialog .dialog-content{min-height:0;overflow-y:auto}.user-dialog .dialog-header,.user-dialog .dialog-actions{flex-shrink:0}.user-dialog .dialog-header{border-bottom:1px solid #dce2eb;padding-bottom:16px}.user-dialog .dialog-content>p{margin-bottom:20px}.user-dialog .dialog-content form>.btn{width:100%;margin-top:16px}.user-email{overflow-wrap:anywhere;margin-top:4px;display:block}.user-edit-button{color:#6d3cb0;background:#f4efff;border-color:#c5ade7}.app-dialog{color:#17243a;background:#fff;border:1px solid #a6b1bf;border-radius:14px;width:min(600px,100% - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:0;overflow:auto;box-shadow:0 24px 80px #111c3040}.app-dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#111c3099}.dialog-header{align-items:center;gap:12px;padding:24px 24px 0;display:flex}.dialog-header h2{overflow-wrap:anywhere;flex:1;min-width:0;margin:0;font-size:20px;line-height:1.3}.dialog-symbol{background:var(--tone-bg);color:var(--tone);border:1px solid var(--tone-edge);border-radius:10px;flex-shrink:0;place-items:center;width:40px;height:40px;display:grid}.dialog-close{color:#526176;cursor:pointer;background:#fff;border:1px solid #7b8899;border-radius:8px;flex-shrink:0;place-items:center;width:44px;height:44px;display:grid}.dialog-close .ui-icon{transform:rotate(45deg)}.dialog-content{padding:16px 24px 24px}.dialog-content p{margin:0;line-height:1.65}.dialog-actions{background:#f8fafc;border-top:1px solid #dce2eb;flex-wrap:wrap;justify-content:flex-end;gap:12px;padding:20px 24px;display:flex}.dialog-actions [hidden]{display:none}.record-summary{border-top:1px solid #dce2eb;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px 20px;margin:24px 0 0;padding-top:20px;display:grid}.record-summary dt{color:#526176;font-size:12px;font-weight:600}.record-summary dd{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font-size:14px}.row-summary-cell{white-space:nowrap}.summary-button{color:#2454a6;background:#eaf1ff;border-color:#a6bff0;min-height:44px}.toast-message{z-index:60;align-items:center;gap:16px;max-width:min(520px,100% - 32px);display:flex;position:fixed;top:20px;right:20px;box-shadow:0 12px 36px #111c3020}.toast-close{color:inherit;cursor:pointer;background:0 0;border:0;flex-shrink:0;min-height:44px;padding:8px;font-size:12px;font-weight:600;text-decoration:underline}@media (max-width:767px){.dialog-header{gap:10px;padding:20px 16px 0}.dialog-header h2{font-size:18px}.dialog-content{padding:16px 20px 20px}.dialog-actions{gap:8px;padding:16px}.dialog-actions .btn{flex:1}.record-summary{grid-template-columns:1fr;gap:6px}.record-summary dd{margin-bottom:12px}.toast-message{width:auto;margin:0;top:16px;left:16px;right:16px}}@media (max-width:1099px){.sidebar{width:208px;padding:20px 12px}.workspace{margin-left:208px}main{padding:24px}.topbar{padding:16px 24px}.columns{grid-template-columns:1fr}.requirement-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:767px){body{font-size:15px}.sidebar{display:none}.workspace{margin-left:0}.topbar{flex-direction:column;align-items:stretch;gap:12px;padding:16px}.global-search{width:100%}.mobile-menu{background:#fff;border-bottom:1px solid #dce2eb;margin:0;display:block}.mobile-menu>summary{color:#17243a;min-height:48px;padding:16px}.mobile-menu nav{padding:8px 16px}.mobile-menu .nav-group-title{color:#526176}.mobile-menu .nav-link{color:#33435a;border:1px solid #dce2eb}.mobile-menu .nav-link.active{color:#146346;background:#e7f5ef;box-shadow:inset 3px 0 #087568}.mobile-account{color:#526176;padding:0 16px}.mobile-menu form{padding:0 16px 20px}.mobile-menu form .btn{width:100%}main{padding:24px 16px}.grid{grid-template-columns:1fr;gap:0}.panel{box-shadow:none;margin-bottom:20px;padding:20px 16px}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.stats .panel{padding:16px}.big{font-size:28px}.filters{display:block}.filters label{min-width:0;margin-bottom:16px}.filters .btn{width:100%}.page-head{display:block}.page-head .actions{margin-top:16px}.public-main{padding:24px 16px 40px}.public-brand{align-items:start;margin-bottom:28px}.public-brand .brand-subtitle{text-align:right;max-width:110px;font-size:10px}.setup-banner{padding:20px}.requirement-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.install-actions{display:block}.install-actions .actions{margin-top:20px}.install-actions .btn{flex:1}.auth-card{margin:24px auto}.calendar{display:block}.calendar-label{display:none}.day{border:0;border-bottom:1px solid #dce2eb;min-height:0}.day.outside,.day:has(.no-events){display:none}.columns{display:block}footer{padding:24px 16px}.actions>.btn{max-width:100%}.table-wrap{overscroll-behavior-inline:contain}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.planning-filters{display:block}.planning-filter-main{flex-wrap:wrap;align-items:end;gap:16px;display:flex}.planning-filter-main>label{flex:1;min-width:150px;margin:0}.planning-filter-main>label:first-child{flex:2}.planning-filter-main>label:has(input[type=month]){min-width:190px}.planning-filter-main .filter-actions{margin:0}.planning-more-filters{border-top:1px solid #e0e6ec;margin-top:16px;padding-top:12px}.planning-more-filters summary,.planning-secondary summary,.event-details summary{cursor:pointer;color:#33435a;align-items:center;gap:8px;min-height:44px;font-weight:600;display:flex}.planning-counts{color:#526176;flex-wrap:wrap;gap:24px;padding:0 4px 20px;font-size:13px;display:flex}.planning-counts>span{align-items:center;gap:8px;display:inline-flex}.planning-counts strong{color:#17243a}.schedule-heading{justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.schedule-heading h2{margin:0}.job-schedule .phase-field h3{align-items:center;gap:8px;display:flex}.job-schedule .phase-field strong{color:#17243a;font-size:14px}.calendar-publish-action{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;display:flex}.calendar-publish-action p{margin:0}.event-details{margin-bottom:20px}.calendar-management .planning-secondary{border-top:1px solid #e0e6ec;padding-top:12px}.planning-toolbar{flex-wrap:wrap;justify-content:space-between;gap:16px;margin-bottom:20px;display:flex}.planning-legend{flex-wrap:wrap;gap:8px;margin-bottom:20px;display:flex}.phase-label{border-radius:8px;align-items:center;gap:6px;padding:6px 10px;font-size:12px;font-weight:600;display:inline-flex}.planning-event{overflow-wrap:anywhere;border:1px solid;border-left-width:4px;border-radius:8px;flex-direction:column;gap:5px;margin-top:8px;padding:10px;line-height:1.4;text-decoration:none;display:flex}.planning-event strong{-webkit-line-clamp:2;overflow-wrap:normal;-webkit-box-orient:vertical;font-size:13px;display:-webkit-box;overflow:hidden}.planning-event span,.planning-event small{font-size:11px}.phase-assembly_date,.planning-calendar .phase-assembly_date{color:#784600;background:#fff7e7;border-color:#d49b29}.phase-event_date,.planning-calendar .phase-event_date{color:#145d45;background:#e5f5ee;border-color:#438d70}.phase-dismantle_date,.planning-calendar .phase-dismantle_date{color:#4d4086;background:#eef0ff;border-color:#8e7fb9}.phase-google,.planning-calendar .phase-google{color:#174b85;background:#e8f2ff;border-color:#6f98c9}.planning-calendar{grid-template-columns:repeat(7,minmax(0,1fr))}.planning-calendar .day{min-width:0;padding:10px}.planning-calendar .day>a{display:flex}.planning-calendar time{font-size:12px;font-weight:700}.planning-today{border-radius:8px;box-shadow:inset 0 0 0 2px #087568}.planning-agenda-day{border-bottom:1px solid #dce2eb;grid-template-columns:130px minmax(0,1fr);gap:20px;padding:18px 0;display:grid}.planning-agenda-day h3{margin:10px 0;font-size:14px}.planning-agenda-day>div{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;display:grid}.planning-agenda-day .planning-event{margin:0}.planning-google-note{overflow-wrap:anywhere}@media (max-width:767px){.planning-filter-main{display:block}.planning-filter-main>label{min-width:0;margin-bottom:16px}.filter-actions .btn{flex:1}.planning-counts{gap:12px 20px}.calendar-publish-action .btn{width:100%}.planning-toolbar .actions{flex:1}.planning-toolbar .btn{flex:1;padding:10px}.planning-calendar{display:block}.planning-calendar .day{padding:14px 0}.planning-agenda-day{grid-template-columns:1fr;gap:8px}.planning-agenda-day>div{grid-template-columns:1fr}.planning-calendar .planning-event strong{font-size:15px}.planning-event span,.planning-event small{font-size:12px}.planning-legend{gap:6px}}.calendar-management>summary{color:#33435a;align-items:center;gap:10px;min-height:44px;display:flex}.calendar-management:not([open]){padding:12px 20px}.calendar-management>div>.panel{box-shadow:none;border:0;padding:0}.calendar-management>div>.panel:last-child{margin-bottom:0}.form-section{border:0;border-bottom:1px solid #e0e6ec;min-width:0;margin:0 0 24px;padding:0 0 20px}.form-section legend{color:#17243a;align-items:center;gap:10px;width:100%;padding:0 0 20px;font-size:15px;font-weight:700;display:flex}.form-section legend .ui-icon{color:#087568;width:18px;height:18px}.form-section:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:0}.form-section .grid{align-items:start}form:has(>.form-section)>button.btn{min-width:160px;margin-left:auto;display:flex}.phase-fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.phase-field{background:#fff;border:1px solid #e0e6ec;border-top:3px solid;border-radius:10px;min-width:0;padding:16px}.phase-field h3{margin-bottom:16px}.phase-field label:last-child{margin-bottom:0}.phase-field input,.phase-field select{background:#fff}.phase-field label{font-size:13px}.job-client-picker .actions{gap:8px}.job-client-picker .check{min-height:44px;padding:8px 10px;font-size:13px}.job-client-picker .check .ui-icon{width:16px}.table-wrap td:first-child>a{font-weight:600}.page-head h1{margin-top:0}.panel-title .section-icon,.metric-card .icon-tile{border-color:#0000}.sidebar .nav-icon{color:#a8b5ca;background:0 0;border-color:#0000}.sidebar .active .nav-icon{background:var(--tone-bg);color:var(--tone)}@media (max-width:1099px){.phase-fields{grid-template-columns:1fr}.phase-field{padding:16px}.phase-field input,.phase-field select{max-width:100%}}@media (max-width:767px){form:has(>.form-section)>button.btn{width:100%}.form-section{margin-bottom:20px;padding-bottom:16px}.form-section legend{padding-bottom:16px}.phase-fields{gap:12px}.global-search .btn{padding:10px 12px}.page-head .actions .btn{flex:1}.sidebar>nav{flex:initial}.topbar-context{display:none}}.planning-event.phase-local-work{color:#24583f;background:#e8f5ef;border-color:#81ab98}.planning-event.phase-local-meeting{color:#244e82;background:#edf4ff;border-color:#8ba8cc}.planning-event.phase-local-visit{color:#775006;background:#fff6df;border-color:#bda269}.planning-event.phase-local-shooting{color:#514085;background:#f2edff;border-color:#a498c9}.planning-event.phase-local-holiday{color:#7a3457;background:#fff0f6;border-color:#c692aa}.planning-event.phase-local-other{color:#415569;background:#eff4f8;border-color:#92a6b8}.event-color-picker{width:280px;max-width:100%;margin:24px 0;position:relative}.event-color-picker label{margin:0;font-size:13px}.event-color-picker select{min-height:44px;padding-left:40px}.event-color-current{pointer-events:none;background:var(--event-preview-color,linear-gradient(135deg,#4f72ac 50%,#6ca18c 50%));border:1px solid #526176;border-radius:50%;width:16px;height:16px;position:absolute;bottom:14px;left:14px}.color-auto{background:linear-gradient(135deg,#4f72ac 50%,#6ca18c 50%)}.color-lavender{background:#a4bdfc}.color-sage{background:#7ae7bf}.color-purple{background:#dbadff}.color-pink{background:#ff887c}.color-yellow{background:#fbd75b}.color-orange{background:#ffb878}.color-cyan{background:#46d6db}.color-grey{background:#a5a5a5}.color-blue{background:#5484ed}.color-green{background:#51b749}.color-red{background:#dc2127}.planning-event.event-color-lavender{color:#3d4f83;background:#edf0ff;border-color:#8d9ed1}.planning-event.event-color-sage{color:#205c4c;background:#e6f8f1;border-color:#75ab95}.planning-event.event-color-purple{color:#654085;background:#f4edff;border-color:#a798c6}.planning-event.event-color-pink{color:#873e55;background:#fff0f4;border-color:#bd8c9a}.planning-event.event-color-yellow{color:#75570a;background:#fff8dd;border-color:#bda86e}.planning-event.event-color-orange{color:#884611;background:#fff1e5;border-color:#c59770}.planning-event.event-color-cyan{color:#19596a;background:#e7f8fa;border-color:#78abb5}.planning-event.event-color-grey{color:#49545e;background:#f0f3f5;border-color:#96a2ac}.planning-event.event-color-blue{color:#244e82;background:#edf4ff;border-color:#8ba8cc}.planning-event.event-color-green{color:#24583f;background:#e8f5ef;border-color:#81ab98}.planning-event.event-color-red{color:#8a2734;background:#ffedf0;border-color:#c48790}.login-shell .public-main{flex-direction:column;justify-content:center;max-width:1048px;min-height:100dvh;padding:48px 24px;display:flex}.login-shell .public-brand{display:none}.login-frame{background:#fff;border:1px solid #e0e6ec;border-radius:18px;grid-template-columns:42% 58%;min-height:620px;display:grid;overflow:hidden;box-shadow:0 20px 60px #17243a0d}.login-brand{isolation:isolate;color:#fff;background:#17243a;flex-direction:column;justify-content:space-between;padding:40px;display:flex;position:relative;overflow:hidden}.login-brand .logo{z-index:1;font-size:32px;position:relative}.login-brand .logo span{color:#62d4bd}.login-brand-content{z-index:1;max-width:310px;margin:48px 0;position:relative}.login-brand .login-eyebrow{color:#b9d2d5}.login-brand h2{letter-spacing:-.04em;margin:16px 0 32px;font-size:40px;font-weight:700;line-height:1.15}.login-areas{color:#c9d3e2;gap:16px;margin:0;padding:0;font-size:13px;list-style:none;display:grid}.login-areas li{align-items:center;gap:12px;display:flex}.login-areas .ui-icon{color:#62d4bd;width:18px;height:18px}.login-brand-footer{z-index:1;letter-spacing:.15em;color:#c9d3e2;margin:0;font-size:10px;position:relative}.login-degree{z-index:0;border:1px solid #ffffff20;border-radius:50%;width:220px;height:220px;position:absolute;bottom:-70px;right:-100px}.login-degree:after{content:"";background:#62d4bd;border-radius:50%;width:20px;height:20px;position:absolute;top:24px;left:24px}.login-form-panel{justify-content:center;align-items:center;min-width:0;padding:48px;display:flex}.login-form-content{width:100%;min-width:0;max-width:360px}.login-access-icon{color:#087568;background:#e8f5ef;border-radius:12px;justify-content:center;align-items:center;width:44px;height:44px;margin-bottom:24px;display:inline-flex}.login-access-icon .ui-icon{width:22px;height:22px}.login-eyebrow{color:#526176;letter-spacing:.12em;text-transform:uppercase;margin:0;font-size:11px;font-weight:600}.login-form-panel h1{letter-spacing:-.035em;margin:12px 0;font-size:30px;line-height:1.2}.login-intro{color:#526176;margin:0 0 32px;font-size:14px}.login-form label{gap:8px;margin-bottom:20px;font-size:13px}.login-form input{background:#fff;border-color:#7b8899;border-radius:8px;min-width:0;max-width:100%;height:50px;font-size:14px}.login-form input::placeholder{color:#657387}.login-email-control{display:block;position:relative}.login-email-control>.ui-icon{color:#526176;pointer-events:none;width:18px;height:18px;position:absolute;top:16px;left:14px}.login-email-control input{padding-left:42px}.login-form .password-control{gap:0;position:relative}.login-form .password-control input{width:100%;padding-right:86px}.login-form .password-toggle{color:#087568;background:0 0;border:0;min-width:72px;height:44px;padding:8px;font-size:12px;position:absolute;top:3px;right:4px}.login-form .password-toggle:hover{background:#e8f5ef}.login-form .login-submit{border-radius:8px;justify-content:space-between;width:100%;min-height:50px;margin-top:8px;padding:12px 18px}.login-submit .ui-icon{width:18px;height:18px}.login-help{color:#526176;border-top:1px solid #e0e6ec;margin:32px 0 0;padding-top:24px;font-size:12px;line-height:1.6}@media (min-width:768px) and (max-width:899px){.login-brand{padding:32px 24px}.login-brand h2{font-size:34px}.login-form-panel{padding:40px 32px}}@media (max-width:767px){.login-shell .public-main{justify-content:flex-start;padding:24px 16px}.login-frame{min-height:0;box-shadow:none;border-radius:14px;display:block}.login-brand{padding:28px 24px;display:block}.login-brand .logo{font-size:30px}.login-brand-content{max-width:none;margin:24px 0 0}.login-brand h2{max-width:270px;margin:8px 0 0;font-size:26px}.login-brand .login-eyebrow{font-size:10px}.login-areas,.login-brand-footer,.login-degree{display:none}.login-form-panel{padding:32px 24px;display:block}.login-form-content{max-width:440px;margin:auto}.login-access-icon{display:none}.login-form-panel h1{font-size:28px}.login-intro{margin-bottom:28px}.login-help{margin-top:28px;padding-top:20px}}.calendar-month-scroll{overscroll-behavior-x:contain;border:1px solid #b8c3d0;border-radius:10px;max-width:100%;overflow-x:auto}.planning-month{background:#fff;min-width:700px}.month-weekdays{background:#f4f7f9;border-bottom:1px solid #dce2eb;grid-template-columns:repeat(7,minmax(0,1fr));display:grid}.month-weekdays>div{text-align:center;color:#526176;padding:10px 8px;font-size:11px;font-weight:600}.month-week{border-bottom:1px solid #dce2eb;grid-template-columns:repeat(7,minmax(0,1fr));row-gap:4px;min-height:132px;padding-bottom:4px;display:grid;position:relative}.month-week:last-child{border-bottom:0}.month-day{pointer-events:none;text-align:right;border-right:1px solid #e0e6ec;min-width:0;padding:6px 8px}.month-day:last-of-type{border-right:0}.month-day.outside{background:#f4f7f9}.month-day time{color:#526176;justify-content:center;align-items:center;min-width:24px;height:24px;padding:0 5px;font-size:11px;font-weight:600;line-height:1;display:inline-flex;position:relative}.month-day time.month-today{color:#fff;background:#087568;border-radius:20px}.planning-event.calendar-bar{z-index:1;border-left-width:3px;border-radius:5px;min-width:0;height:26px;margin:0 3px;padding:3px 8px;line-height:18px;text-decoration:none;display:block;position:relative;overflow:hidden}.calendar-bar strong{white-space:nowrap;text-overflow:ellipsis;font-size:11px;line-height:18px;display:block;overflow:hidden}.calendar-bar>span,.calendar-bar>small{display:none}.calendar-bar:hover{filter:brightness(.96)}.calendar-bar:focus-visible{z-index:2}.calendar-bar.continues-before{border-top-left-radius:0;border-bottom-left-radius:0;padding-left:14px}.calendar-bar.continues-after{border-top-right-radius:0;border-bottom-right-radius:0;padding-right:14px}.calendar-bar.continues-before:before,.calendar-bar.continues-after:after{font-size:16px;font-weight:700;line-height:18px;position:absolute;top:3px}.calendar-bar.continues-before:before{content:"‹";left:3px}.calendar-bar.continues-after:after{content:"›";right:3px}.month-mobile-hint{margin:12px 0 0;font-size:12px;display:none}@media (max-width:1099px){.month-mobile-hint{display:block}.planning-month{min-width:700px}.planning-event.calendar-bar strong{font-size:11px}}.event-color-picker:has(option[value=lavender]:checked){--event-preview-color:#a4bdfc}.event-color-picker:has(option[value=sage]:checked){--event-preview-color:#7ae7bf}.event-color-picker:has(option[value=purple]:checked){--event-preview-color:#dbadff}.event-color-picker:has(option[value=pink]:checked){--event-preview-color:#ff887c}.event-color-picker:has(option[value=yellow]:checked){--event-preview-color:#fbd75b}.event-color-picker:has(option[value=orange]:checked){--event-preview-color:#ffb878}.event-color-picker:has(option[value=cyan]:checked){--event-preview-color:#46d6db}.event-color-picker:has(option[value=grey]:checked){--event-preview-color:#a5a5a5}.event-color-picker:has(option[value=blue]:checked){--event-preview-color:#5484ed}.event-color-picker:has(option[value=green]:checked){--event-preview-color:#51b749}.event-color-picker:has(option[value=red]:checked){--event-preview-color:#dc2127}.commercial-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.commercial-metrics .big{overflow-wrap:anywhere;font-size:clamp(18px,1.8vw,26px)}.commercial-metrics .metric-label{gap:6px}.commercial-metrics .panel{padding:16px}@media (min-width:1280px){.commercial-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}.digital-search-row{align-items:flex-end;gap:calc(var(--spacing) * 3);grid-template-columns:repeat(1,minmax(0,1fr));display:grid}@media (min-width:40rem){.digital-search-row{grid-template-columns:minmax(0,1fr) auto}}.digital-search-row .actions{margin-bottom:18px}.digital-filter-main{gap:calc(var(--spacing) * 4);grid-template-columns:repeat(1,minmax(0,1fr));display:grid}@media (min-width:48rem){.digital-filter-main{grid-template-columns:repeat(3,minmax(0,1fr))}}}@layer utilities{.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.fixed{position:fixed}.static{position:static}.mx-auto{margin-inline:auto}.my-4{margin-block:calc(var(--spacing) * 4)}.my-5{margin-block:calc(var(--spacing) * 5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.table{display:table}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.min-w-0{min-width:0}.flex-1{flex:1}.basis-72{flex-basis:calc(var(--spacing) * 72)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.list-decimal{list-style-type:decimal}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-slate-200{border-color:var(--color-slate-200)}.bg-slate-50{background-color:var(--color-slate-50)}.bg-teal-50{background-color:var(--color-teal-50)}.bg-transparent\!{background-color:#0000!important}.bg-violet-50{background-color:var(--color-violet-50)}.bg-white{background-color:var(--color-white)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.pl-5{padding-left:calc(var(--spacing) * 5)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl\!{font-size:var(--text-xl)!important;line-height:var(--tw-leading,var(--text-xl--line-height))!important}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-slate-500{color:var(--color-slate-500)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-slate-700\!{color:var(--color-slate-700)!important}.text-slate-800{color:var(--color-slate-800)}.text-slate-900{color:var(--color-slate-900)}.text-teal-700{color:var(--color-teal-700)}.text-teal-800{color:var(--color-teal-800)}.uppercase{text-transform:uppercase}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (min-width:40rem){.sm\:flex-row{flex-direction:row}}@media (min-width:64rem){.lg\:flex-row{flex-direction:row}.lg\:flex-wrap{flex-wrap:wrap}}}.staff-tabs{background:#fff;border:1px solid #dbe3ec;border-radius:14px;flex-wrap:wrap;gap:4px;margin:24px 0;padding:6px;display:flex}.staff-tab{color:#526176;border-radius:10px;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:10px 16px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.staff-tab:hover{color:#17243a;background:#f4f7f9}.staff-tab.active{color:#087568;background:#e4f3ef}.staff-tab:focus-visible{outline-offset:2px;outline:2px solid #087568}.staff-section-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin:24px 0 16px;display:flex}.staff-section-head h2{margin:0;font-size:22px}.staff-section-head p{margin:4px 0 0}.staff-month-filter{align-items:end}.staff-month-filter input[type=month]{min-width:190px}.payslip-list{gap:16px;display:grid}.payslip-card{align-items:center;gap:16px;margin:0;display:flex}.payslip-info{flex:1;min-width:0}.payslip-info h3{margin:0 0 6px;font-size:17px}.payslip-info p{overflow-wrap:anywhere;margin:4px 0}.payslip-card>.icon-tile{flex-shrink:0}.payslip-card .actions{flex-wrap:wrap}@media (max-width:767px){.staff-tabs{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.staff-tab{text-align:center;padding:10px 6px;font-size:13px}.staff-section-head .actions,.staff-section-head .actions .btn{width:100%}.payslip-card{flex-wrap:wrap;align-items:flex-start}.payslip-card>.actions{width:100%}.payslip-card .actions .btn{flex:1}.staff-month-filter label,.staff-month-filter>.btn{width:100%}}@media (min-width:768px){.staff-month-filter label{flex:190px;max-width:300px}.staff-month-filter label:has(select){flex:1;max-width:none}}@media (max-width:767px){.staff-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.staff-summary .panel{padding:12px 10px}.staff-summary .metric-label{flex-direction:column-reverse;align-items:flex-start;gap:8px}.staff-summary p{font-size:12px;line-height:1.4}.staff-summary .big{overflow-wrap:anywhere;font-size:20px}.staff-summary .icon-tile{width:30px;height:30px}}@media (max-width:1099px){.payslip-card{flex-wrap:wrap;align-items:flex-start}.payslip-info{flex-basis:calc(100% - 64px)}.payslip-card>.actions{width:100%}.staff-summary .big{font-size:24px}}@media (max-width:767px){.staff-summary .big{font-size:20px}}.staff-report-panel{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.staff-report-panel h2{align-items:center;gap:8px;margin:0;font-size:17px;display:flex}.staff-report-panel h2 .ui-icon{color:#087568}.staff-report-panel p{margin:6px 0}.staff-report-preview{white-space:pre-wrap;overflow-wrap:anywhere;background:#f4f7f9;border:1px solid #dbe3ec;border-radius:10px;padding:16px;font-family:inherit;font-size:14px;line-height:1.6}.staff-report-history li{overflow-wrap:anywhere;margin:12px 0}.annual-leave-panel .staff-section-head{margin:0 0 16px}.annual-leave-panel h2{align-items:center;gap:8px;display:flex}.annual-leave-panel h2 .ui-icon{color:#6d3cb0}.annual-leave-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;display:grid}.annual-leave-summary div{background:#f4f7f9;border-radius:10px;padding:16px}.annual-leave-summary dt{color:#526176;font-size:13px}.annual-leave-summary dd{color:#17243a;margin:8px 0 0;font-size:28px;font-weight:700}@media (max-width:767px){.staff-report-panel>.btn{width:100%}.annual-leave-summary{gap:8px}.annual-leave-summary div{padding:12px 8px}.annual-leave-summary dt{font-size:12px}.annual-leave-summary dd{font-size:24px}}.leave-view-switch{flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0;display:flex}.leave-year-nav{gap:8px;margin-left:auto;display:flex}.leave-year-legend{flex-wrap:wrap;align-items:center;gap:16px;margin:20px 0;font-size:13px;display:flex}.leave-key{align-items:center;gap:8px;font-weight:600;display:inline-flex}.leave-key:before{content:"";background:#64748b;border-radius:4px;flex-shrink:0;width:12px;height:12px}.leave-key.holiday:before{background:#db2777}.leave-key.dayoff:before{background:#64748b}.leave-year-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:24px;display:grid}.leave-mini-month{background:#fff;border:1px solid #dbe3ec;border-radius:16px;min-width:0;padding:18px}.leave-mini-month h3{margin:0 0 16px;font-size:15px}.leave-mini-month h3 a{color:#17243a;text-decoration:none}.leave-mini-month h3 a:hover{color:#087568;text-decoration:underline}.leave-mini-days{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;display:grid}.leave-weekday{text-align:center;color:#64748b;padding:4px 0;font-size:11px}.leave-mini-day{color:#334155;background:0 0;border:0;border-radius:8px;justify-content:center;align-items:center;min-width:0;height:32px;font-size:12px;display:flex}.leave-mini-day.holiday{color:#9d174d;background:#fce7f3;font-weight:700}.leave-mini-day.dayoff{color:#334155;background:#e2e8f0;font-weight:700}.leave-mini-day.mixed{color:#17243a;background:linear-gradient(135deg,#fce7f3 50%,#e2e8f0 50%);font-weight:700}button.leave-mini-day{cursor:pointer}button.leave-mini-day:hover{outline-offset:1px;outline:1px solid #526176}.leave-mini-day:focus-visible,.leave-mini-month a:focus-visible{outline-offset:2px;outline:2px solid #087568}.leave-day-record{background:#f4f7f9;border:1px solid #dbe3ec;border-radius:12px;margin:12px 0;padding:16px}.leave-day-record h3{margin:8px 0;font-size:16px}.leave-day-record p{margin:0}@media (min-width:1500px){.leave-year-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width:1099px){.leave-year-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:600px){.leave-year-grid{grid-template-columns:minmax(0,1fr)}.leave-mini-day{height:36px}.leave-year-nav{width:100%;margin-left:0}.leave-year-nav .btn{flex:1;font-size:12px}.leave-view-switch>.btn{flex:1}.leave-year-legend{gap:12px}.leave-year-legend>.muted{width:100%}}.staff-month-reminder{background:#fffbef;border-color:#f2d18b;align-items:center;gap:16px;margin-bottom:24px;display:flex}.staff-month-reminder>div{flex:1;min-width:0}.staff-month-reminder strong{font-size:15px}.staff-month-reminder p{margin:6px 0 0;font-size:13px}@media (max-width:767px){.staff-month-reminder{flex-wrap:wrap;gap:12px}.staff-month-reminder>.btn{width:100%}.staff-month-reminder>.icon-tile{width:32px;height:32px}}.material-picker-list{border:1px solid #dbe3ec;border-radius:12px;max-height:48vh;margin:16px 0;overflow-y:auto}.material-picker-row{border-bottom:1px solid #dbe3ec;grid-template-columns:minmax(0,1fr) 100px;align-items:center;gap:16px;padding:12px 16px;display:grid}.material-picker-row:last-child{border-bottom:0}.material-picker-row[hidden]{display:none}.material-picker-row.selected{background:#edf7f4}.material-picker-row .check{align-items:center;gap:12px;margin:0;display:flex}.material-picker-row .check>input{flex:none;width:18px;height:18px}.material-picker-row small{color:#526176;font-size:12px;display:block}.material-picker-quantity{margin:0;font-size:12px}.material-picker-quantity input{width:100%;margin-top:4px;padding:8px}@media (max-width:600px){.material-picker-row{grid-template-columns:minmax(0,1fr) 76px;gap:8px;padding:12px}}.job-material-panel .schedule-heading{flex-wrap:wrap;gap:12px}.job-material-panel td form{min-width:0;margin:0}.job-material-panel td .actions{gap:6px}.job-material-panel td{padding:12px}.job-material-panel td .btn{white-space:nowrap}.inventory-filter-main{grid-template-columns:minmax(180px,2fr) minmax(120px,1fr) minmax(120px,1fr) auto;align-items:end;gap:16px;display:grid}.inventory-filter-main label{margin:0}.inventory-filter-main>.btn{margin-bottom:0}.inventory-pagination{justify-content:flex-end;margin-top:20px}.equipment-details{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:24px 0 0;display:grid}.equipment-details dt{color:#526176;margin-bottom:4px;font-size:12px}.equipment-details dd{overflow-wrap:anywhere;margin:0;font-weight:600}.equipment-notes{white-space:normal;overflow-wrap:anywhere;border-top:1px solid #dbe3ec;margin-top:24px;padding-top:20px}@media (max-width:1100px){.inventory-filter-main,.equipment-details{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:600px){.inventory-filter-main,.equipment-details{grid-template-columns:minmax(0,1fr)}.inventory-pagination{justify-content:space-between}}.staff-personal-tax{gap:20px}.staff-personal-tax-heading{align-items:center;gap:12px;margin-bottom:18px;display:flex}.staff-personal-tax-heading h2{margin:0;font-size:17px}.staff-personal-tax-number{letter-spacing:.025em;font-size:24px;display:block}.staff-personal-tax>.panel{margin-bottom:16px}.staff-overview-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:24px;display:grid}.staff-overview-link{color:#17243a;background:#fff;border:1px solid #dbe3ec;border-radius:16px;align-items:center;gap:14px;padding:20px;text-decoration:none;transition:border-color .15s,box-shadow .15s;display:flex}.staff-overview-link:hover{border-color:#0d8173;box-shadow:0 4px 16px #17243a0a}.staff-overview-link:focus-visible{outline-offset:3px;outline:3px solid #0d8173}.staff-overview-link>span:nth-child(2){flex:1;min-width:0}.staff-overview-link strong{margin-bottom:5px;font-size:15px;display:block}.staff-overview-link small{color:#607087;font-size:13px;line-height:1.5;display:block}.staff-overview-arrow{color:#607087;font-size:20px}@media (max-width:767px){.staff-overview-links{grid-template-columns:1fr}.staff-overview-link{padding:16px}}.staff-personal-iban-number{letter-spacing:.02em;overflow-wrap:anywhere;margin-top:16px;font-size:18px;font-weight:700;line-height:1.6;display:block}@media (max-width:767px){.employee-metric{padding:14px}.employee-metric>strong{font-size:24px}.employee-metric .icon-tile{width:30px;height:30px}.employee-activity-list li{flex-wrap:wrap}.employee-activity-value{margin-left:48px}.employee-leave-list li{flex-wrap:wrap}.employee-overview-grid .panel{padding:18px}}.month-day{position:relative}.month-add-event{z-index:2;pointer-events:auto;color:#607087;cursor:pointer;background:0 0;border:0;border-radius:6px;place-items:center;width:24px;height:24px;display:grid;position:absolute;top:6px;left:6px}.month-add-event .ui-icon{width:16px;height:16px}.month-add-event:hover{color:#087568;background:#e0f2ef}.month-add-event:focus-visible{outline-offset:2px;outline:2px solid #087568}.nav-disclosure{margin-bottom:8px}.nav-disclosure>.nav-group-title{cursor:pointer;color:#a8b4c8;letter-spacing:.08em;justify-content:space-between;align-items:center;margin:0;padding:12px 10px;font-size:11px;list-style:none;display:flex}.nav-disclosure>.nav-group-title::-webkit-details-marker{display:none}.nav-disclosure>.nav-group-title:hover{color:#fff;background:#ffffff08;border-radius:8px}.nav-disclosure>.nav-group-title:focus-visible{outline-offset:2px;border-radius:8px;outline:2px solid #72cdbf}.nav-chevron{width:14px;height:14px;transition:transform .15s;transform:rotate(90deg)}.nav-disclosure[open] .nav-chevron{transform:rotate(-90deg)}.nav-chevron .ui-icon{width:14px;height:14px}.nav-group-links{padding-bottom:4px}.quick-create{flex:none;position:relative}.quick-create>summary{cursor:pointer;white-space:nowrap;margin:0;list-style:none}.quick-create>summary::-webkit-details-marker{display:none}.quick-create-menu{z-index:40;background:#fff;border:1px solid #dbe3ec;border-radius:14px;width:280px;max-height:70vh;padding:8px;position:absolute;top:calc(100% + 10px);right:0;overflow:auto;box-shadow:0 16px 48px #17243a24}.quick-create-menu>p{text-transform:uppercase;letter-spacing:.08em;color:#607087;margin:6px 10px 10px;font-size:11px;font-weight:700}.quick-create-menu>a{color:#17243a;border-radius:8px;align-items:center;gap:12px;padding:10px;font-size:13px;font-weight:600;display:flex}.quick-create-menu>a:hover{background:#f1f6f8;text-decoration:none}.quick-create-menu>a:focus-visible{outline-offset:-2px;outline:2px solid #087568}.quick-create-menu .section-icon{flex:none;width:30px;height:30px}.quick-create-menu .ui-icon{width:17px;height:17px}.topbar{gap:16px}.topbar .global-search{min-width:0;margin-left:auto}.topbar .global-search input{width:clamp(150px,24vw,360px);min-width:100px}.workspace-shortcuts{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:24px;display:grid}.workspace-shortcuts>a{color:#17243a;background:#fff;border:1px solid #e0e6ec;border-radius:12px;align-items:center;gap:10px;padding:14px;font-size:13px;display:flex}.workspace-shortcuts>a:hover{border-color:#087568;text-decoration:none}.workspace-shortcuts>a:focus-visible{outline-offset:2px;outline:2px solid #087568}.workspace-shortcuts>a>.ui-icon{color:#607087;width:16px;height:16px;margin-left:auto}.workspace-shortcuts .section-icon{flex:none;width:32px;height:32px}.mobile-menu .nav-group-title{color:#526176}.mobile-menu .nav-group-title:hover{color:#17243a;background:#edf2f6}@media (max-width:767px){.topbar{flex-wrap:wrap;gap:10px}.topbar-context{flex:1}.topbar .global-search{order:3;width:100%;margin-left:0}.topbar .global-search input{flex:1;width:100%}.quick-create-menu{width:min(280px,100vw - 32px)}.workspace-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-shortcuts>a{gap:8px;padding:12px}.workspace-shortcuts>a>.ui-icon{display:none}}.account-profile-link{color:inherit}.account-profile-link:focus-visible{outline-offset:3px;border-radius:3px;outline:2px solid #72cdbf}.payslip-batch-table td:first-child{min-width:210px}.payslip-batch-table td:nth-child(2){min-width:190px}@media (max-width:767px){.payslip-batch-table,.payslip-batch-table tbody{width:100%;min-width:0;display:block}.payslip-batch-table thead{display:none}.payslip-batch-table tbody tr{border-bottom:1px solid #dbe3ec;grid-template-columns:1fr;gap:14px;padding:16px;display:grid}.payslip-batch-table tbody td{border:0;width:100%;padding:0;display:block;min-width:0!important}.payslip-batch-table input,.payslip-batch-table select{width:100%}}.quote-line-photo{object-fit:contain;background:#f8fafc;border-radius:8px;width:120px;height:85px;margin-bottom:12px;display:block}.quote-photo-picker{border:1px dashed #cbd5e1;border-radius:14px;margin:16px 0;padding:16px}.quote-photo-picker label small{margin:4px 0 10px;font-weight:400;display:block}.quote-preview-panel{background:#eef2f6;border:1px solid #dce5ee;border-radius:18px;margin:24px 0;overflow:hidden}.quote-preview-panel>header{background:#fff;border-bottom:1px solid #dce5ee;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;display:flex}.quote-preview-panel>header strong{align-items:center;gap:8px;display:flex}.quote-preview-panel>header small{margin-top:4px;font-size:12px;display:block}.quote-preview-panel>header select{width:auto;max-width:190px;min-height:40px;margin:0;font-size:13px}.quote-preview-scroll{max-height:760px;padding:24px;overflow:auto}.quote-preview-paper{color:#183139;background:#fff;min-width:500px;max-width:800px;min-height:620px;margin:0 auto;padding:40px;font-size:12px;line-height:1.55;box-shadow:0 8px 32px #172b4d12}.quote-preview-brand{letter-spacing:-1.6px;color:#142438;border-bottom:2px solid #087f72;margin-bottom:28px;padding-bottom:16px;font-size:30px;font-weight:800}.quote-preview-paper h2{color:#087f72;letter-spacing:.04em;margin:0;font-size:22px}.quote-preview-code{color:#526176;margin-bottom:16px;font-size:12px}.quote-preview-paper h3{margin:12px 0 6px;font-size:17px}.quote-preview-dates{color:#526176;font-size:11px}.quote-preview-customer{border-top:1px solid #e2e8f0;margin:12px 0;padding:16px 0}.quote-preview-customer p{margin:3px 0}.quote-preview-paper table{table-layout:auto;border-collapse:collapse;width:100%;font-size:11px}.quote-preview-paper th{background:#edf5f4}.quote-preview-paper td,.quote-preview-paper th{vertical-align:top;border-bottom:1px solid #dde8e8;padding:10px 7px}.quote-preview-paper td:first-child{width:52%}.quote-preview-paper td:not(:first-child){white-space:nowrap}.quote-preview-paper td img{object-fit:contain;max-width:220px;max-height:150px;margin-top:12px;display:block}.quote-preview-description{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:8px}.quote-preview-totals{text-align:right;padding:20px 0}.quote-preview-totals strong{color:#087f72;font-size:19px;display:block}.quote-preview-paper h4{margin:20px 0 6px;font-size:12px}.quote-editor-dialog.app-dialog{width:min(1320px,100% - 32px)}.quote-editor-layout{grid-template-columns:minmax(300px,1fr) minmax(500px,1.35fr);align-items:start;gap:24px;display:grid}.quote-editor-layout .quote-preview-panel{margin:0}.quote-editor-layout .quote-preview-scroll{max-height:65vh;padding:16px}.quote-editor-layout .quote-preview-paper{min-width:470px;padding:28px}.quote-editor-layout .quote-preview-panel>header{padding:12px}.quote-editor-layout .quote-preview-panel>header strong{font-size:14px}.quote-editor-layout form>.grid{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width:1000px){.quote-editor-layout{grid-template-columns:1fr}.quote-editor-layout .quote-preview-scroll{max-height:480px}.quote-preview-scroll{padding:12px}.quote-preview-panel>header{flex-wrap:wrap;padding:12px}.quote-preview-paper{min-width:500px;padding:24px}.quote-editor-layout form>.grid{grid-template-columns:1fr}.quote-preview-panel>header select{max-width:100%;font-size:12px}}.quote-editor-layout>[data-quote-preview-slot]{position:sticky;top:0}@media (max-width:1000px){.quote-editor-layout>[data-quote-preview-slot]{position:static}}.quote-editor-layout>*{min-width:0}.quote-preview-panel,.quote-preview-scroll{min-width:0;max-width:100%}@media (max-width:1000px){.quote-editor-layout{grid-template-columns:minmax(0,1fr)}}.quote-preview-panel .sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.quote-editor-layout .quote-preview-paper table{font-size:10px}.quote-editor-layout .quote-preview-paper td,.quote-editor-layout .quote-preview-paper th{padding:8px 4px}.quote-editor-layout .quote-preview-paper td:first-child{width:auto}.quote-editor-layout .quote-preview-paper td img{width:160px;max-width:100%}.quote-editor-layout .quote-preview-paper td:nth-child(2){white-space:normal}.fleet-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;display:grid}.fleet-card{flex-direction:column;gap:8px;margin:0;display:flex}.fleet-card-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.fleet-plate{letter-spacing:.09em;color:#142438;margin:10px 0;font-size:22px;font-weight:800}.fleet-card h2{margin:0;font-size:18px}.fleet-card-details{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:12px 0 20px;display:grid}.fleet-card-details dt{color:#64748b;font-size:12px}.fleet-card-details dd{margin-top:4px;font-weight:600}.fleet-card>.btn{align-self:flex-start;margin-top:auto}.fleet-summary{grid-template-columns:220px 1fr;align-items:center;gap:24px;display:grid}.fleet-summary .fleet-card-details{grid-template-columns:repeat(4,minmax(0,1fr));margin:0}.fleet-summary>p{grid-column:1/-1}.fleet-form-section{border-top:1px solid #e2e8f0;margin:12px 0;padding:16px 0}.fleet-form-section h3{align-items:center;gap:8px;margin-bottom:14px;font-size:15px;display:flex}.fleet-filters{flex-wrap:wrap;align-items:flex-end;gap:16px;display:flex}.fleet-filters label{flex:1;min-width:170px;margin:0}.fleet-filters .btn{margin:0 0 2px}[data-fuel-vehicle][hidden]{display:none}@media (max-width:700px){.fleet-grid{grid-template-columns:minmax(0,1fr)}.fleet-summary{grid-template-columns:1fr;gap:16px}.fleet-summary .fleet-card-details{grid-template-columns:repeat(2,minmax(0,1fr))}.fleet-filters{align-items:stretch}.fleet-filters label{flex-basis:100%;min-width:0}.fleet-filters .btn{width:100%}}.rental-details{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.25rem 0;display:grid}.rental-details dt{color:#64748b;font-size:.8rem}.rental-details dd{overflow-wrap:anywhere;margin:.25rem 0 0;font-weight:600}.rental-notes{white-space:normal;overflow-wrap:anywhere;margin-top:1rem}@media (max-width:600px){.rental-details{grid-template-columns:1fr}}.zg-mobile{--m-surface:#f4f7fa;--m-white:#fff;--m-ink:#17263c;--m-muted:#526176;--m-accent:#087568;--m-border:#dce4ec;--m-focus:#087568;background:var(--m-surface);color:var(--m-ink);margin:0;font:16px/1.5 Inter,ui-sans-serif,system-ui,sans-serif}.zg-mobile *,.zg-mobile :before,.zg-mobile :after{box-sizing:border-box}.zg-mobile [hidden]{display:none!important}.zg-mobile .m-shell{max-width:640px;min-height:100dvh;padding-bottom:calc(90px + env(safe-area-inset-bottom));margin:auto}.zg-mobile .m-top{padding:20px 22px;padding-top:calc(20px + env(safe-area-inset-top));border-bottom:1px solid var(--m-border);background:var(--m-white);justify-content:space-between;align-items:center;display:flex}.zg-mobile .m-top .logo{font-size:26px}.zg-mobile .m-avatar{background:0 0;border:0;min-width:44px;min-height:44px;padding:0}.zg-mobile .m-avatar .user-avatar{width:44px;height:44px}.zg-mobile .m-main{padding:24px 20px}.zg-mobile .m-page-heading{margin:4px 0 24px}.zg-mobile h1{letter-spacing:-.035em;overflow-wrap:anywhere;margin:0 0 10px;font-size:28px;font-weight:750;line-height:1.18}.zg-mobile h2{margin:0 0 6px;font-size:17px;line-height:1.4}.zg-mobile .m-page-heading p{color:var(--m-muted);margin:0}.zg-mobile .m-eyebrow{letter-spacing:.13em;font-size:11px;font-weight:700;margin-bottom:12px!important}.zg-mobile .m-card{background:var(--m-white);border:1px solid var(--m-border);border-radius:18px;min-width:0;padding:20px}.zg-mobile .m-launchers,.zg-mobile .m-job-list,.zg-mobile .m-records{gap:12px;display:grid}.zg-mobile .m-launch{border:1px solid var(--m-border);background:var(--m-white);color:var(--m-ink);border-radius:18px;align-items:center;gap:16px;min-width:0;padding:22px 18px;text-decoration:none;display:flex}.zg-mobile .m-launch>span:nth-child(2){flex:1;min-width:0}.zg-mobile .m-launch strong,.zg-mobile .m-launch small{display:block}.zg-mobile .m-launch strong{overflow-wrap:anywhere;font-size:19px;line-height:1.3}.zg-mobile .m-launch small{color:var(--m-muted);overflow-wrap:anywhere;margin-top:5px;font-size:13px}.zg-mobile .m-launch>.ui-icon:last-child{width:20px;height:20px;color:var(--m-muted);flex:none}.zg-mobile .m-launch-icon{border-radius:15px;flex:none;place-items:center;width:50px;height:50px;display:grid}.zg-mobile .m-launch-icon .ui-icon{width:26px;height:26px}.zg-mobile .m-install-link{width:100%;color:var(--m-accent);background:0 0;border:0;justify-content:center;align-items:center;gap:8px;min-height:48px;margin-top:12px;padding:20px 8px;font-size:14px;font-weight:600;display:flex}.zg-mobile .m-nav{background:var(--m-white);border-top:1px solid var(--m-border);width:100%;max-width:640px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));z-index:15;justify-content:space-around;gap:6px;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.zg-mobile .m-nav a{color:var(--m-muted);border-radius:12px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;min-height:52px;padding:5px;font-size:12px;font-weight:600;text-decoration:none;display:flex}.zg-mobile .m-nav a[aria-current]{color:var(--m-accent);background:#e8f4f1}.zg-mobile .m-nav .ui-icon{width:22px;height:22px}.zg-mobile .m-network{color:#71490c;background:#fff2d9;margin:0;padding:14px 20px;font-size:14px}.zg-mobile .m-back{color:var(--m-accent);align-items:center;gap:7px;min-height:44px;margin-bottom:20px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.zg-mobile .m-back .ui-icon{width:18px;height:18px}.zg-mobile .m-month,.zg-mobile .m-search{align-items:end;gap:10px;margin-bottom:18px;display:flex}.zg-mobile .m-month label,.zg-mobile .m-search label{flex:1;min-width:0;margin:0}.zg-mobile input,.zg-mobile select,.zg-mobile textarea{border-radius:12px;width:100%;min-width:0;max-width:100%;min-height:48px;font-size:16px}.zg-mobile label{color:var(--m-ink);font-size:14px;font-weight:600}.zg-mobile .btn{border-radius:12px;justify-content:center;min-height:48px;font-size:14px}.zg-mobile .m-totals{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px;display:grid}.zg-mobile .m-totals .m-card{padding:16px}.zg-mobile .m-totals span{color:var(--m-muted);align-items:center;gap:6px;font-size:12px;font-weight:600;display:flex}.zg-mobile .m-totals .ui-icon{width:16px;height:16px}.zg-mobile .m-totals strong{letter-spacing:-.035em;overflow-wrap:anywhere;margin:10px 0 3px;font-size:25px;line-height:1.3;display:block}.zg-mobile .m-totals small{color:var(--m-muted);font-size:12px}.zg-mobile .m-actions{gap:10px;margin-bottom:24px;display:flex}.zg-mobile .m-actions .btn{flex:1;min-width:0}.zg-mobile .m-tabs{background:#e6edf2;border-radius:12px;gap:4px;margin-bottom:18px;padding:4px;display:flex}.zg-mobile .m-tabs a,.zg-mobile .m-tabs button{text-align:center;min-height:44px;color:var(--m-muted);white-space:normal;background:0 0;border:0;border-radius:9px;flex:1;place-items:center;padding:8px 4px;font-size:13px;font-weight:600;text-decoration:none;display:grid}.zg-mobile .m-tabs [aria-current],.zg-mobile .m-tabs [aria-pressed=true]{background:var(--m-white);color:var(--m-ink);box-shadow:0 1px 3px #17263c12}.zg-mobile .m-record-heading{color:var(--m-muted);justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;font-size:13px;display:flex}.zg-mobile .m-record-heading strong{color:var(--m-ink);overflow-wrap:anywhere;font-size:20px}.zg-mobile .m-record p{color:var(--m-muted);overflow-wrap:anywhere;margin:5px 0;font-size:13px}.zg-mobile .m-muted{opacity:.7}.zg-mobile .m-record-cancel{color:#b42335;background:0 0;border:0;min-height:44px;margin-top:4px;padding:8px 0;font-size:13px}.zg-mobile .m-document{color:var(--m-accent);overflow-wrap:anywhere;align-items:center;gap:7px;min-height:44px;padding:8px 0;font-size:13px;display:flex}.zg-mobile .m-empty{text-align:center;color:var(--m-muted);padding:30px 20px}.zg-mobile .m-empty>.ui-icon{width:30px;height:30px;margin:0 auto 14px}.zg-mobile .m-empty p{margin:6px 0;font-size:14px}.zg-mobile .m-form form>label{margin-bottom:18px}.zg-mobile .m-form form>.btn{width:100%;margin-top:22px}.zg-mobile .m-form-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.zg-mobile .m-form-pair label{min-width:0}.zg-mobile .m-form-details{border-top:1px solid var(--m-border);margin-top:18px;padding-top:16px}.zg-mobile .m-form-details summary{color:var(--m-muted);cursor:pointer;min-height:44px;font-size:14px;font-weight:600}.zg-mobile .m-form-details[open] summary{margin-bottom:12px}.zg-mobile .m-help{color:var(--m-muted);margin:12px 0;font-size:13px;line-height:1.5}.zg-mobile .m-upload{background:#f8fafc;border:1px dashed #7c8da0;border-radius:14px;padding:16px;display:block;margin:18px 0 8px!important}.zg-mobile .m-upload>.ui-icon{margin-right:8px}.zg-mobile .m-upload input{border:0;min-height:44px;margin-top:14px;padding:8px;font-size:12px}.zg-mobile .m-hours{border:0;margin:18px 0;padding:0}.zg-mobile .m-hours legend{margin-bottom:12px;font-size:14px;font-weight:600}.zg-mobile .m-hours>div{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;display:grid}.zg-mobile .m-hours label{margin:0;position:relative}.zg-mobile .m-hours input{opacity:0;width:1px;height:1px;min-height:0;position:absolute}.zg-mobile .m-hours span{background:var(--m-white);border:1px solid #8a99a8;border-radius:12px;place-items:center;min-height:52px;font-size:16px;font-weight:700;display:grid}.zg-mobile .m-hours input:checked+span{background:var(--m-accent);color:#fff;border-color:var(--m-accent)}.zg-mobile .m-hours input:focus-visible+span{outline:3px solid var(--m-focus);outline-offset:3px}.zg-mobile .m-hours p{color:var(--m-muted);margin:10px 0 0;font-size:13px}.zg-mobile .m-progress{margin-bottom:18px}.zg-mobile .m-progress>div{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.zg-mobile .m-progress span{color:var(--m-muted);font-size:13px}.zg-mobile progress{appearance:none;width:100%;height:9px;color:var(--m-accent);background:#e6edf2;border:0;border-radius:20px;overflow:hidden}.zg-mobile progress::-webkit-progress-bar{background:#e6edf2}.zg-mobile progress::-webkit-progress-value{background:var(--m-accent)}.zg-mobile progress::-moz-progress-bar{background:var(--m-accent)}.zg-mobile .m-check-list{gap:10px;display:grid}.zg-mobile .m-check-row{background:var(--m-white);border:1px solid var(--m-border);border-radius:15px;overflow:hidden}.zg-mobile .m-check-row form{margin:0}.zg-mobile .m-check-button{text-align:left;width:100%;color:var(--m-ink);cursor:pointer;background:0 0;border:0;align-items:center;gap:12px;min-height:80px;padding:18px 14px;display:flex}.zg-mobile .m-check-square{border:2px solid #7c8da0;border-radius:8px;flex:none;place-items:center;width:28px;height:28px;display:grid}.zg-mobile .m-check-square .ui-icon{width:23px;height:23px}.zg-mobile .m-check-text{flex:1;min-width:0}.zg-mobile .m-check-text strong{overflow-wrap:anywhere;font-size:15px;line-height:1.35;display:block}.zg-mobile .m-check-text small{color:var(--m-muted);overflow-wrap:anywhere;margin-top:5px;font-size:11px;display:block}.zg-mobile .m-quantity{text-align:right;flex:none;min-width:34px;font-size:24px;font-weight:750;line-height:1.15}.zg-mobile .m-quantity small{color:var(--m-muted);font-size:11px;font-weight:500;display:block}.zg-mobile .is-ready{background:#eaf6f2;border-color:#95c7ba}.zg-mobile .is-ready .m-check-square{color:#fff;background:var(--m-accent);border-color:var(--m-accent)}.zg-mobile .m-check-button[aria-disabled=true]{cursor:default}.zg-mobile .m-job small:first-child{margin:0 0 5px}.zg-mobile .m-job strong{font-size:16px}.zg-mobile .m-account-links{gap:10px;margin:20px 0;display:grid}.zg-mobile .app-dialog{width:calc(100% - 32px);max-width:520px}.zg-mobile :is(a,button,input,select,textarea):focus-visible{outline:3px solid var(--m-focus);outline-offset:3px}.zg-mobile .m-version{color:var(--m-muted);font-size:13px}@media (min-width:700px){.zg-mobile .m-shell{border-left:1px solid var(--m-border);border-right:1px solid var(--m-border)}.zg-mobile .m-main{padding:32px}.zg-mobile .m-top{padding-inline:32px}}@media (max-width:360px){.zg-mobile .m-main{padding-inline:16px}.zg-mobile .m-form{padding:16px}.zg-mobile .m-totals strong{font-size:22px}.zg-mobile .m-launch{gap:12px;padding:18px 14px}}@media (prefers-reduced-motion:reduce){.zg-mobile *{scroll-behavior:auto!important;transition:none!important}}.zg-mobile .m-avatar .avatar{width:44px;height:44px;font-size:16px}.zg-mobile .m-avatar .avatar img{object-fit:cover;width:100%;height:100%}.zg-mobile .m-avatar .avatar{color:#fff;background:#17263c;border-radius:14px}.zg-mobile .m-launch-icon.tone-teal{color:#087568;background:#e8f4f1}.zg-mobile .m-launch-icon.tone-blue{color:#245fb7;background:#eaf1ff}.logo .brand-logo-image{object-fit:contain;flex-shrink:0;width:112px;height:112px;display:block}.sidebar>.logo{justify-content:center;margin:0 auto 4px;display:flex}.sidebar>.logo .brand-logo-image{width:128px;height:128px}.sidebar>.brand-subtitle{text-align:center}.public-brand .brand-logo-image{width:96px;height:96px}.login-brand>.logo .brand-logo-image{width:168px;height:168px}.zg-mobile .m-top{min-height:88px}.zg-mobile .m-top .logo{align-items:center;line-height:1;display:flex}.zg-mobile .m-top .brand-logo-image{width:76px;height:76px}@media (max-width:700px){.login-brand>.logo .brand-logo-image{width:100px;height:100px}.public-brand .brand-logo-image{width:76px;height:76px}}.sidebar>.logo .brand-logo-image,.login-brand>.logo .brand-logo-image{border-radius:14px}@media (min-width:1100px){.nav-link.nav-device-only{display:none}}.zg-mobile .tone-purple{color:#7048a5;background:#f0eafb}.zg-mobile .m-section-title{margin:28px 0 14px;font-size:18px}.zg-mobile .revolut-card-grid{grid-template-columns:1fr;margin-top:18px}.zg-mobile .revolut-card{min-width:0}.fleet-document-list{gap:12px;display:grid}.fleet-document-row{border:1px solid #dce2eb;border-radius:14px;align-items:center;gap:14px;padding:16px;display:flex}.fleet-document-row>div:nth-child(2){overflow-wrap:anywhere;flex:1;min-width:0}.fleet-document-row small{color:#526176;margin-top:5px;display:block}@media (max-width:767px){.fleet-document-row{flex-wrap:wrap}.fleet-document-row>.actions{width:100%}}.accounting-toolbar{flex-wrap:wrap;justify-content:space-between;gap:12px;margin-bottom:20px;display:flex}.accounting-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px;display:grid}.accounting-stat{align-items:center;gap:14px;text-decoration:none;display:flex}.accounting-stat small{color:#63748b;margin-bottom:6px;display:block}.accounting-stat strong{color:#17263d;font-size:25px;line-height:1.2;display:block}.accounting-stat:hover{background:#f3faf7;border-color:#91cfc1}.accounting-filters{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:14px;display:grid}.accounting-filters .actions{grid-column:1/-1}.accounting-detail h3{margin:16px 0 8px}.accounting-amount{color:#087f72;margin:12px 0 20px;font-size:28px;display:block}.accounting-detail dl{grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px;display:grid}.accounting-detail dt{color:#65758b;margin-bottom:4px;font-size:12px}.accounting-detail dd{overflow-wrap:anywhere;margin:0;font-weight:600}@media (max-width:1100px){.accounting-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:640px){.accounting-filters{grid-template-columns:1fr}.accounting-stats{gap:10px}.accounting-stat{gap:8px;padding:14px}.accounting-stat strong{font-size:20px}.accounting-detail dl{grid-template-columns:1fr}.accounting-toolbar .actions{flex-wrap:wrap;width:100%}}.security-recovery{background:#fffbeb;border:1px solid #f2c46d;border-radius:1rem;margin:1rem 0;padding:1.2rem}.security-codes{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;display:grid}.security-codes code,.security-secret{color:#102033;overflow-wrap:anywhere;background:#fff;border-radius:.5rem;padding:.5rem;font-size:.9rem;display:inline-block}.security-secret{word-break:break-all}@media (max-width:500px){.security-codes{grid-template-columns:1fr}}.security-state{background:var(--tone-bg);color:var(--tone)}.security-back{margin-top:16px}.mfa-setup-grid{grid-template-columns:240px minmax(0,1fr);align-items:center;gap:24px;margin:20px 0 28px;display:grid}.mfa-qr{background:#fff;border:1px solid #dce2eb;border-radius:14px;place-items:center;width:240px;max-width:100%;min-height:220px;padding:8px;display:grid}.mfa-qr svg{shape-rendering:crispedges;width:100%;height:auto;display:block}.mfa-manual{margin-top:16px}.mfa-manual p{margin-top:12px}.mfa-setup-grid .muted{overflow-wrap:anywhere}@media (max-width:640px){.mfa-setup-grid{grid-template-columns:1fr;gap:16px}.mfa-qr{justify-self:center}}.form-field{gap:8px;margin-bottom:16px;position:relative}.form-field-label{color:#35465c;align-items:center;gap:8px;min-height:24px;font-size:12px;font-weight:650;line-height:1.4;display:flex}.form-field-icon{background:var(--tone-bg);width:25px;height:25px;color:var(--tone);border-radius:8px;flex:none;place-items:center;display:inline-grid}.form-field-icon .ui-icon{width:15px;height:15px}.form-required{color:#9e3039;font-size:13px}.form-field>input,.form-field>select,.form-field>textarea,.form-field .password-control input{background:#fcfdff;border-color:#8392a5;border-radius:11px;min-height:44px;padding:10px 12px;transition:border-color .15s,box-shadow .15s}.form-field>input:hover,.form-field>select:hover,.form-field>textarea:hover{border-color:#087568}.form-field>input:focus,.form-field>select:focus,.form-field>textarea:focus{outline-offset:2px;background:#fff;border-color:#087568;outline:2px solid #087568}.form-field>textarea{min-height:92px}.form-field input[type=file]{background:#f6fafb;border-style:dashed;padding:8px}.form-field input[type=file]::file-selector-button{color:#086a56;font:inherit;cursor:pointer;background:#e5f7f0;border:0;border-radius:7px;margin-right:10px;padding:7px 12px;font-weight:600}.check{border:1px solid #dce4ec;transition:border-color .15s,background .15s}.check:has(input:checked){background:#eff9f5;border-color:#81c7b1}.field-choice-shell{min-width:0;margin-bottom:16px}.field-choice-shell>.form-field{margin-bottom:0}.quick-options{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}.quick-choice{color:#41516a;cursor:pointer;background:#fff;border:1px solid #b6c2ce;border-radius:10px;min-height:42px;padding:9px 14px;font-size:13px;font-weight:600;line-height:1.35}.quick-choice:hover{background:var(--tone-bg);border-color:var(--tone-edge);color:var(--tone)}.quick-choice[aria-pressed=true]{background:var(--tone-bg);border-color:var(--tone);color:var(--tone);box-shadow:inset 0 0 0 1px var(--tone)}.quick-choice:disabled{cursor:not-allowed;opacity:.55}.quick-choice-native{clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;min-height:0!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}.choice-search{margin-bottom:8px}.choice-search-label{margin-bottom:4px}.choice-search input{background:#f5f8fb;border-color:#8392a5;border-radius:10px;min-height:40px;font-size:13px}.choice-feedback{color:#526176;font-size:11px;display:block}.choice-feedback:empty{display:none}.filters>.field-choice-shell{flex:1;min-width:160px;margin:0}.filters .field-choice-shell>.form-field{min-width:0}.field-choice-shell[hidden]{display:none!important}@media (max-width:640px){.quick-options{gap:6px}.quick-choice{flex:1 0 auto;padding:10px 12px}.form-field-label{font-size:12px}}.staff-detail-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:8px 0 24px;display:grid}.staff-detail-metrics>div{background:#f8fafc;border:1px solid #dce2eb;border-radius:12px;gap:6px;min-width:0;padding:14px;display:grid}.staff-detail-metrics strong{color:#17243a;font-size:22px}.staff-detail-metrics small{font-size:12px}.staff-detail-heading{align-items:center;gap:8px;margin:24px 0 12px;font-size:16px;display:flex}.staff-detail-record{background:#fff;border:1px solid #dce2eb;border-radius:12px;margin:10px 0;padding:14px}.staff-detail-record p{overflow-wrap:anywhere;white-space:pre-wrap;margin:7px 0;font-size:13px}.staff-detail-line{justify-content:space-between;align-items:start;gap:16px;display:flex}.staff-detail-documents{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.document-preview-link{color:#2454a6;background:#f4f7ff;max-width:100%}.document-preview-link span{overflow-wrap:anywhere;text-align:left}.document-preview-dialog{width:min(1120px,100% - 32px)}.document-preview{gap:14px;display:grid}.document-preview-viewer{background:#f4f6f9;border:1px solid #dce2eb;border-radius:10px;width:100%;display:block}iframe.document-preview-viewer{height:60vh;min-height:280px}img.document-preview-viewer{object-fit:contain;max-height:60vh;padding:10px}.document-preview .actions{margin:0}@media (max-width:640px){.staff-detail-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.staff-detail-line{flex-wrap:wrap;gap:6px}.staff-detail-documents .btn{width:100%}.document-preview .actions .btn{flex:1}.document-preview-dialog{width:calc(100% - 20px)}iframe.document-preview-viewer{height:52vh}}.pdf-preview-toolbar{justify-content:space-between;align-items:center;gap:10px;display:flex}.pdf-preview-toolbar span{text-align:center;color:#526176;font-size:13px}.pdf-preview-paper{background:#e8edf3;border:1px solid #dce2eb;border-radius:10px;max-height:60vh;padding:12px;overflow:auto}.pdf-preview-paper canvas{background:#fff;max-width:100%;margin:auto;display:block;box-shadow:0 2px 8px #17243a1f}.pdf-preview-paper canvas[width="0"]{display:none}.expense-category-field{grid-column:1/-1;min-width:0;margin-bottom:16px}.expense-category-field>.form-field{margin-bottom:8px}.expense-category-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.expense-category-choice{color:#33435a;cursor:pointer;text-align:left;background:#fff;border:1px solid #dce2eb;border-radius:12px;align-items:center;gap:9px;min-height:54px;padding:12px;font-size:13px;font-weight:600;display:flex}.expense-category-choice .form-field-icon{background:var(--tone-bg);color:var(--tone);width:28px;height:28px}.expense-category-choice:hover{border-color:var(--tone);background:var(--tone-bg)}.expense-category-choice[aria-pressed=true]{background:var(--tone-bg);color:var(--tone);border-color:var(--tone);box-shadow:inset 0 0 0 1px var(--tone)}.expense-category-choice:disabled{opacity:.55;cursor:not-allowed}.expense-upload{background:#f8fafc;border:1px dashed #9aafc8;border-radius:14px;margin:20px 0;padding:18px}.expense-upload-heading{align-items:center;gap:10px;margin-bottom:16px;display:flex}.expense-upload-heading h3{margin:0;font-size:15px}.expense-upload-heading p{margin:3px 0 0;font-size:12px}.expense-upload-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.expense-upload-choice{cursor:pointer;text-align:left;color:#17243a;background:#fff;border:1px solid #c4cedb;border-radius:12px;align-items:center;gap:12px;padding:16px;display:flex}.expense-upload-choice strong{font-size:13px;display:block}.expense-upload-choice small{color:#526176;margin-top:4px;font-size:11px;display:block}.expense-upload-choice:hover{background:var(--tone-bg);border-color:var(--tone)}.expense-upload-choice .section-icon{background:var(--tone-bg);color:var(--tone);border-color:var(--tone-edge);width:38px;height:38px}.expense-upload-ready .expense-upload-native{display:none}.expense-upload-list{gap:8px;margin-top:12px;display:grid}.expense-upload-list:empty{display:none}.expense-upload-item{background:#fff;border:1px solid #dce2eb;border-radius:10px;align-items:center;gap:12px;min-width:0;padding:10px;display:flex}.expense-upload-thumbnail{object-fit:cover;color:#2454a6;background:#eaf1ff;border-radius:8px;flex-shrink:0;place-items:center;width:56px;height:56px;font-size:12px;font-weight:700;display:grid}.expense-upload-item>div{flex:1;min-width:0}.expense-upload-item strong{overflow-wrap:anywhere;font-size:12px;display:block}.expense-upload-item small{color:#526176;margin-top:4px;font-size:11px;display:block}.expense-upload-remove{color:#a53049;border-color:#efc8d3;min-height:36px;padding:8px 10px;font-size:12px}.expense-upload-status{color:#526176;margin:10px 0 0;font-size:12px}.expense-upload-status:empty{display:none}.expense-upload-status.error{color:#a53049}.expense-upload-help{color:#526176;margin:12px 0 0;font-size:11px}.expense-category-options[hidden],.expense-upload-actions[hidden]{display:none!important}.staff-leave-dates{align-items:start}@media (max-width:640px){.expense-category-options{grid-template-columns:repeat(2,minmax(0,1fr))}.expense-category-choice{padding:10px;font-size:12px}.expense-upload{padding:14px}.expense-upload-actions{grid-template-columns:1fr}.expense-upload-choice{padding:13px}.expense-upload-remove{padding:8px;font-size:11px}.expense-upload-thumbnail{width:44px;height:44px}.expense-upload-item{gap:8px}}.expense-category-choice:focus-visible,.expense-upload-choice:focus-visible{outline-offset:2px;outline:3px solid #56bfb0}.zg-mobile .expense-category-options{grid-template-columns:repeat(2,minmax(0,1fr))}.zg-mobile .expense-upload-actions{grid-template-columns:1fr}.job-record{min-width:0}.job-record-nav{background:#fff;border:1px solid #dbe3ec;border-radius:14px;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:8px;display:flex}.job-record-nav a{color:#526176;border-radius:8px;align-items:center;gap:8px;padding:10px 12px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.job-record-nav a:hover{color:#087568;background:#e4f3ef}.job-record-nav a:focus-visible{outline-offset:2px;outline:2px solid #087568}.job-overview-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 24px;display:grid}.job-overview-metric{background:#fff;border:1px solid #dbe3ec;border-radius:14px;align-items:center;gap:12px;min-width:0;padding:16px;display:flex}.job-overview-metric small{color:#526176;margin-bottom:4px;font-size:12px;display:block}.job-overview-metric strong{color:#17243a;overflow-wrap:anywhere;font-size:18px;display:block}.job-summary-content{min-width:0}.job-summary-heading{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px;display:flex}.job-summary-heading h3{overflow-wrap:anywhere;margin:6px 0 0;font-size:22px;line-height:1.3}.job-summary-heading small{color:#526176}.job-summary-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 24px;display:grid}.job-summary-facts dt{color:#526176;margin-bottom:6px;font-size:12px}.job-summary-facts dd{color:#17243a;overflow-wrap:anywhere;margin:0;font-weight:600}.job-summary-content .phase-fields{margin-bottom:20px}.job-summary-content .phase-field{min-width:0}.job-summary-content .phase-field strong{overflow-wrap:anywhere;font-size:14px}.job-summary-content .job-overview-metric{background:#f4f7f9;padding:12px}.job-summary-notes,.job-summary-finance{border-top:1px solid #dbe3ec;margin-top:20px;padding-top:20px}.job-summary-content h4{align-items:center;gap:8px;margin:0 0 12px;font-size:15px;display:flex}.job-summary-notes p{overflow-wrap:anywhere;font-size:14px;line-height:1.6}.job-summary-finance .job-summary-facts{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:0}.job-summary-actions{border-top:1px solid #dbe3ec;margin-top:24px;padding-top:20px}.job-form-disclosure{border:1px solid #dbe3ec;border-radius:10px;margin:16px 0;padding:12px 16px}.job-form-disclosure summary{color:#087568;cursor:pointer;align-items:center;gap:8px;font-size:14px;font-weight:600;list-style:none;display:flex}.job-form-disclosure summary:after{content:"+";margin-left:auto;font-size:20px}.job-form-disclosure[open]>summary:after{content:"−"}.job-form-disclosure summary:focus-visible{outline-offset:4px;outline:2px solid #087568}.job-record .timeline{background:#f4f7f9;border-left:3px solid #dbe3ec;border-radius:0 10px 10px 0;margin-top:12px;padding:16px}.job-record .panel h2{align-items:center;gap:8px;display:flex}.job-record [id^=job-]{scroll-margin-top:24px}@media (max-width:767px){.job-overview-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.job-overview-metric{gap:8px;padding:12px}.job-overview-metric strong{font-size:16px}.job-overview-metric .section-icon{flex-shrink:0;width:30px;height:30px}.job-summary-facts{grid-template-columns:1fr;gap:12px}.job-summary-heading{flex-wrap:wrap}.job-summary-content .phase-fields{grid-template-columns:1fr;display:grid}.job-record-nav a{padding:8px;font-size:12px}.job-summary-actions .btn{justify-content:center;width:100%}.job-summary-finance .job-summary-facts{grid-template-columns:1fr}.job-form-disclosure,.job-summary-content .phase-field{padding:12px}}.job-summary-material{border:1px solid #dbe3ec;border-radius:10px;margin:16px 0;padding:12px}.job-summary-material summary{color:#087568;cursor:pointer;align-items:center;gap:8px;font-weight:600;display:flex}.job-summary-material .table-wrap{margin-top:12px}.zg-mobile .m-job-form .grid,.zg-mobile .m-job-form .phase-fields{grid-template-columns:minmax(0,1fr);gap:16px;display:grid}.zg-mobile .m-job-form .form-section{border:0;min-width:0;margin:0 0 24px;padding:0}.zg-mobile .m-job-form legend{align-items:center;gap:8px;margin-bottom:16px;font-size:16px;font-weight:700;display:flex}.zg-mobile .m-job-form .phase-field{min-width:0;padding:16px}.zg-mobile .m-job-form .job-client-picker,.zg-mobile .m-nav a{min-width:0}.zg-mobile .m-job-form .job-client-picker>.actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.zg-mobile .m-job-form .job-client-picker label.check{border:1px solid #8a99a8;border-radius:10px;align-items:center;gap:8px;min-width:0;margin:0;padding:12px 8px;font-size:12px;display:flex}.zg-mobile .m-job-form .job-client-picker input[type=radio]{accent-color:#087568;flex:0 0 18px;width:18px;height:18px;min-height:18px;margin:0;padding:0}.zg-mobile .m-job-form .job-client-picker label.check:has(input:checked){background:#e8f4f1;border-color:#087568}.equipment-create{max-width:960px}.equipment-form .equipment-name{grid-column:1/-1}.equipment-form .grid{gap:16px}.equipment-options{border-top:1px solid #8a99a8;padding:16px 0}.equipment-options:first-of-type{margin-top:24px}.equipment-options summary{cursor:pointer;color:#17243b;align-items:center;gap:10px;min-height:32px;font-weight:700;display:flex}.equipment-options summary>span{color:#475569;margin-left:auto;font-size:12px;font-weight:400}.equipment-options summary:before{content:"+";color:#087568;font-size:20px}.equipment-options[open] summary:before{content:"−"}.equipment-options summary .icon{color:#087568;width:20px;height:20px}.equipment-options[open]>.grid,.equipment-options[open]>.form-field{margin-top:16px}.equipment-form [hidden]{display:none!important}.equipment-form .grid>*{min-width:0}.equipment-form+button{margin-top:16px}@media (max-width:639px){.equipment-form .grid{grid-template-columns:minmax(0,1fr)}.equipment-options summary{flex-wrap:wrap}.equipment-options summary>span{font-size:11px}}.equipment-area{grid-column:1/-1}.equipment-area-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px;display:grid}.equipment-area-options .quick-choice{text-align:left;justify-content:flex-start;align-items:center;gap:10px;min-width:0;padding:12px;display:flex}.equipment-area-options .quick-choice .icon{flex-shrink:0;width:22px;height:22px}.equipment-area-options .quick-choice span{overflow-wrap:anywhere}.equipment-area-options[hidden]{display:none}@media (max-width:1000px){.equipment-area-options{grid-template-columns:repeat(2,minmax(0,1fr))}}a[href^="/equipamento/"],.equipment-form input[name=description],select[name=equipment_id] option,.choice-search select[name=equipment_id]{text-transform:uppercase}h1,h2,h3,h4,h5,h6,.topbar-context strong,.m-launch strong,.planning-event strong,.equipment-details-title,.record-title{text-transform:uppercase;overflow-wrap:anywhere}table tbody td:first-child:not(:has(button,input)):not(.actions),table tbody td:first-child>a:not(.btn),table tbody td:first-child>small,a[href^="/trabalho/"]:not(.btn),a[href^="/cliente/"]:not(.btn),a[href^="/cliente?"]:not(.btn),a[href^="/orcamento/"]:not(.btn),a[href^="/veiculo?"]:not(.btn),input[name=name],input[name=title],input[name=full_name],input[name=company_name],input[name=client_name],input[name=new_client_name],input[name=service_title],select[name=client_id],select[name=job_id],select[name=responsible_id],select[name=user_id],.job-summary-facts dd:first-of-type{text-transform:uppercase}.staff-period-nav{background:#e8f4f1;border:1px solid #087568;border-radius:12px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;margin:20px 0;padding:16px;display:grid}.staff-period-current{text-align:center;min-width:0}.staff-period-current>small{color:#475569;justify-content:center;align-items:center;gap:6px;font-size:12px;display:flex}.staff-period-current>small .icon{width:16px;height:16px}.staff-period-current>strong{color:#17243b;text-transform:uppercase;overflow-wrap:anywhere;margin:4px 0;font-size:24px;font-weight:700;line-height:1.3;display:block}.staff-period-today{color:#087568;font-size:13px;font-weight:600}.staff-period-nav a.staff-period-today{text-underline-offset:3px;text-decoration:underline}.staff-period-nav [aria-disabled=true]{opacity:.5}.staff-period-nav .btn{white-space:nowrap;margin:0}@media (max-width:639px){.staff-period-nav{grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;padding:12px}.staff-period-nav>.btn{justify-content:center;min-height:44px;padding:10px}.staff-period-nav>.btn>span{display:none}.staff-period-current>strong{font-size:20px}.staff-period-current>small{font-size:11px}}.zg-mobile .staff-period-nav{margin:16px 0}.theme-toggle{flex-shrink:0;width:44px;min-width:44px;height:44px;padding:10px}.theme-toggle span{justify-content:center;align-items:center;display:flex}.theme-toggle .icon{width:22px;height:22px}.theme-toggle .theme-sun,[data-theme=dark] .theme-toggle .theme-moon{display:none}[data-theme=dark] .theme-toggle .theme-sun{display:flex}.m-top-tools{align-items:center;gap:10px;display:flex}.m-top-tools .theme-toggle{border-radius:12px}.login-shell .public-brand:has(.theme-toggle){border:0;justify-content:flex-end;margin:0;padding:0;display:flex}.login-shell .public-brand:has(.theme-toggle)>.logo{display:none}@media screen{html[data-theme=dark]{color-scheme:dark;--zg-bg:#0b1220;--zg-surface:#152238;--zg-raised:#1d2e47;--zg-ink:#e6edf7;--zg-muted:#adbbcf;--zg-border:#6a7c96;--zg-accent:#6ee1cf;background:var(--zg-bg)}[data-theme=dark] body{background:var(--zg-bg);color:var(--zg-ink)}[data-theme=dark] :is(.panel,.topbar,.mobile-menu,.public-brand,.auth-card,.employee-metric,.staff-profile-summary,.m-shell,.m-top,.m-nav,.m-card,.m-launch,.login-form-panel,.app-dialog,.popup-panel,.form-section,.quote-preview-panel,.job-form-disclosure,.equipment-options,.photo-picker,.staff-report-preview){background-color:var(--zg-surface);color:var(--zg-ink);border-color:var(--zg-border)}[data-theme=dark] :is(.bg-white,.bg-slate-50){background-color:var(--zg-surface)!important}[data-theme=dark] :is(h1,h2,h3,h4,h5,h6,.form-label-text,.equipment-options summary,.topbar-context strong,.employee-useful-links>a,.job-summary-facts dd,.m-page-heading,.m-check-text strong){color:var(--zg-ink)}[data-theme=dark] :is(.muted,small,dt,.eyebrow,.m-help,.m-eyebrow,.employee-metric small,.employee-activity-list small,.employee-useful-links small,.job-summary-heading small,.m-launch small){color:var(--zg-muted)}[data-theme=dark] a{color:var(--zg-accent)}[data-theme=dark] :is(input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea){background:var(--zg-bg);color:var(--zg-ink);border-color:var(--zg-border)}[data-theme=dark] :is(input,textarea)::placeholder{color:var(--zg-muted)}[data-theme=dark] :is(.btn,.quick-choice,.password-toggle,.dialog-close){background:var(--zg-raised);color:var(--zg-ink);border-color:var(--zg-border)}[data-theme=dark] :is(.btn,.quick-choice):hover{background:#2a405e}[data-theme=dark] .btn.primary{color:#fff;background:#087568;border-color:#49c6b2}[data-theme=dark] .btn.danger{color:#ffb4be;background:#45242e;border-color:#dd8794}[data-theme=dark] :is(th,.dialog-actions,.empty,.phase-field,.annual-leave-summary>div,.job-overview-metric,.job-record .timeline,.m-month,.m-account-links,.quote-preview-scroll){background:var(--zg-raised);color:var(--zg-ink);border-color:var(--zg-border)}[data-theme=dark] :is(td,.dialog-header,.dialog-actions,.equipment-options,.employee-activity-list li,.employee-leave-list li,.job-summary-notes,.job-summary-finance,.job-summary-actions){border-color:#445771}[data-theme=dark] tbody tr:hover{background:#1d2e47}[data-theme=dark] :is(.staff-period-nav,.m-nav a[aria-current=page],.staff-tabs a[aria-current=page]){color:#a8f0df;background:#123d39;border-color:#6ee1cf}[data-theme=dark] .staff-period-current>strong{color:var(--zg-ink)}[data-theme=dark] :is(.staff-period-current>small,.equipment-options summary>span){color:var(--zg-muted)}[data-theme=dark] .staff-period-today{color:var(--zg-accent)}[data-theme=dark] :is(.alert,.alert.warning){color:#ffe1a1;background:#44351c;border-color:#d3a956}[data-theme=dark] :is(.alert.error,.alert.danger){color:#ffc3cc;background:#45242e;border-color:#dd8794}[data-theme=dark] .alert.success{color:#a8f0df;background:#143f36;border-color:#49c6b2}[data-theme=dark] .planning-event{color:#d8e7ff;background:#213a60}[data-theme=dark] .planning-event.phase-assembly{color:#ffe1a1;background:#44351c}[data-theme=dark] .planning-event.phase-event{color:#a8f0df;background:#143f36}[data-theme=dark] .planning-event.phase-dismantle{color:#dec9ff;background:#392c55}[data-theme=dark] :is(.planning-event small,.planning-event strong){color:inherit}[data-theme=dark] :is(.sidebar,.login-brand){background:#0d1729}[data-theme=dark] :is(.sidebar a,.sidebar small,.sidebar summary){color:#c4d1e4}[data-theme=dark] .quote-preview-paper{color:#183139;color-scheme:light;background:#fff}[data-theme=dark] .quote-preview-paper :is(h1,h2,h3,h4,h5,h6,p,strong,small,td,th){color:#183139;background-color:#0000}}@media print{.theme-toggle{display:none!important}}@media screen{[data-theme=dark] :is(.badge,.section-icon,.form-field-icon,.dialog-symbol,.quick-choice,.m-launch-icon).tone-blue{color:#b8d6ff;background:#213a60;border-color:#b8d6ff}[data-theme=dark] .quick-choice.tone-blue[aria-pressed=true]{color:#b8d6ff;background:#213a60;border-color:#b8d6ff;box-shadow:0 0 0 1px #b8d6ff}[data-theme=dark] :is(.badge,.section-icon,.form-field-icon,.dialog-symbol,.quick-choice,.m-launch-icon).tone-violet{color:#dec9ff;background:#392c55;border-color:#dec9ff}[data-theme=dark] .quick-choice.tone-violet[aria-pressed=true]{color:#dec9ff;background:#392c55;border-color:#dec9ff;box-shadow:0 0 0 1px #dec9ff}[data-theme=dark] :is(.badge,.section-icon,.form-field-icon,.dialog-symbol,.quick-choice,.m-launch-icon).tone-purple{color:#dec9ff;background:#392c55;border-color:#dec9ff}[data-theme=dark] .quick-choice.tone-purple[aria-pressed=true]{color:#dec9ff;background:#392c55;border-color:#dec9ff;box-shadow:0 0 0 1px #dec9ff}[data-theme=dark] :is(.badge,.section-icon,.form-field-icon,.dialog-symbol,.quick-choice,.m-launch-icon).tone-teal{color:#a8f0df;background:#143f36;border-color:#a8f0df}[data-theme=dark] .quick-choice.tone-teal[aria-pressed=true]{color:#a8f0df;background:#143f36;border-color:#a8f0df;box-shadow:0 0 0 1px #a8f0df}[data-theme=dark] :is(.badge,.section-icon,.form-field-icon,.dialog-symbol,.quick-choice,.m-launch-icon).tone-cyan{color:#a3e8f8;background:#163d4b;border-color:#a3e8f8}[data-theme=dark] .quick-choice.tone-cyan[aria-pressed=true]{color:#a3e8f8;background:#163d4b;border-color:#a3e8f8;box-shadow:0 0 0 1px #a3e8f8}[data-theme=dark] :is(.badge,.section-icon,.form-field-icon,.dialog-symbol,.quick-choice,.m-launch-icon).tone-amber{color:#ffe1a1;background:#44351c;border-color:#ffe1a1}[data-theme=dark] .quick-choice.tone-amber[aria-pressed=true]{color:#ffe1a1;background:#44351c;border-color:#ffe1a1;box-shadow:0 0 0 1px #ffe1a1}[data-theme=dark] :is(.badge,.section-icon,.form-field-icon,.dialog-symbol,.quick-choice,.m-launch-icon).tone-rose{color:#ffc3cc;background:#45242e;border-color:#ffc3cc}[data-theme=dark] .quick-choice.tone-rose[aria-pressed=true]{color:#ffc3cc;background:#45242e;border-color:#ffc3cc;box-shadow:0 0 0 1px #ffc3cc}[data-theme=dark] :is(.staff-tabs,.m-check-button,.m-check-row,.calendar-day,.calendar-week,.calendar-month,.planning-day,.planning-week,.planning-grid,.led-card){background-color:var(--zg-surface);color:var(--zg-ink);border-color:var(--zg-border)}[data-theme=dark] :is(dd,.big,.metric-label,.m-launch strong,.m-check-text,.annual-leave-summary dd,.job-overview-metric strong){color:var(--zg-ink)}[data-theme=dark] :is(footer,.login-intro,.login-help,.login-eyebrow,.m-page-heading>p,.m-record-heading,.m-install-link,.m-help,.annual-leave-summary dt){color:var(--zg-muted)}[data-theme=dark] :is(.staff-report-panel h2 .ui-icon,.annual-leave-panel h2 .ui-icon){color:var(--zg-accent)}[data-theme=dark] :is(.badge.job-planned,.badge.available,.badge.assigned){color:#b8d6ff;background:#213a60}[data-theme=dark] :is(.badge.job-active,.badge.completed){color:#a8f0df;background:#143f36}[data-theme=dark] .badge.maintenance{color:#ffe1a1;background:#44351c}[data-theme=dark] .planning-event.event-color-blue{color:#b8d6ff;background:#213a60;border-color:#b8d6ff}[data-theme=dark] .planning-event.event-color-green{color:#a8f0df;background:#143f36;border-color:#a8f0df}[data-theme=dark] .planning-event.event-color-purple{color:#dec9ff;background:#392c55;border-color:#dec9ff}[data-theme=dark] .planning-event.event-color-pink{color:#ffc5e8;background:#452b43;border-color:#ffc5e8}[data-theme=dark] .planning-event.event-color-red{color:#ffc3cc;background:#45242e;border-color:#ffc3cc}[data-theme=dark] .planning-event.event-color-orange{color:#ffcf9f;background:#4b301d;border-color:#ffcf9f}[data-theme=dark] .planning-event.event-color-yellow{color:#ffe1a1;background:#44351c;border-color:#ffe1a1}[data-theme=dark] .planning-event.event-color-grey{color:#c5d0df;background:#293345;border-color:#c5d0df}[data-theme=dark] .planning-event.event-color-teal{color:#a8f0df;background:#123d39;border-color:#a8f0df}[data-theme=dark] .m-nav a{color:var(--zg-muted)}[data-theme=dark] .m-nav a[aria-current=page]{color:#a8f0df}[data-theme=dark] .m-nav a .ui-icon{color:inherit}[data-theme=dark] .m-launch>.ui-icon{color:var(--zg-muted)}}.theme-toggle .ui-icon{width:22px;height:22px}.job-status-control{border:1px solid;border-radius:.65rem;align-items:center;gap:.4rem;width:max-content;max-width:100%;padding:.2rem .45rem;display:flex}.job-status-control>.ui-icon{flex:none;width:1rem;height:1rem}.job-status-control select{width:auto;min-width:8rem;color:inherit;background:0 0;border:0;min-height:36px;margin:0;padding:.2rem 1.4rem .2rem .25rem;font-size:.85rem;font-weight:600}.job-status-control select option{background:var(--surface,#fff);color:var(--ink,#17243a)}.job-status-control:focus-within{outline:2px solid var(--accent,#087568);outline-offset:3px}form[aria-busy=true] .job-status-control{opacity:.6;pointer-events:none}.job-status-control.job-planned{color:#285bb7;background:#eaf1ff}.job-status-control.job-active{color:#17644d;background:#e4f5ed}.job-status-control.job-completed{color:#43546d;background:#edf1f6}.job-status-control.job-cancelled{color:#ac303b;background:#fff0f1}@media screen{[data-theme=dark] .job-status-control.job-planned{color:#bcd3ff;background:#1d335b}[data-theme=dark] .job-status-control.job-active{color:#a8f0df;background:#143f36}[data-theme=dark] .job-status-control.job-completed{color:#d6e1f3;background:#253349}[data-theme=dark] .job-status-control.job-cancelled{color:#ffc7ce;background:#4d2732}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
/* Descrições dos serviços usam a capitalização original, sem herdar as maiúsculas dos títulos. */
.quote-service-description,.quote-preview-description{text-transform:none}

/* Folha timbrada A4 partilhada com o PDF, com margens de proteção por página. */
.quote-preview-paper{padding:0!important;width:794px;min-width:794px;max-width:none;min-height:0;background:transparent!important;box-shadow:none;color:#000}.quote-preview-sheet{box-sizing:border-box;width:794px;height:1123px;padding:178px 83px 102px;margin:0 auto 24px;background-color:#fff;background-position:0 0;background-size:100% 100%;background-repeat:no-repeat;box-shadow:0 4px 20px #172b4d12;color:#000}.quote-preview-sheet-content{height:100%;display:flow-root}.quote-preview-paper h2{font-size:30px;color:#000;text-transform:none;letter-spacing:0;line-height:1.2}.quote-preview-code{color:#000;margin:4px 0 20px}.quote-preview-code small,.quote-preview-code strong{display:block}.quote-preview-code strong{font-size:20px}.quote-preview-paper h3,.quote-preview-totals strong{color:#000}.quote-preview-paper th{background:transparent}.quote-preview-paper .quote-preview-description{color:#000}.quote-preview-paper td:first-child{width:auto}.quote-preview-sheet-content>table td:first-child{min-width:0}.quote-preview-paper .quote-preview-customer{border:0;padding:8px 0;margin:8px 0}.quote-preview-paper .quote-preview-totals{color:#000}[data-theme=dark] .quote-preview-sheet{color:#000;background-color:#fff}

.quote-status-sent{color:#245db0;background:#edf3ff}.quote-status-approved{color:#087568;background:#e7f6f0}.quote-status-rejected{color:#b33848;background:#fff0f2}.quote-status-draft{color:#526176;background:#f0f3f8}.job-status-control[class*="quote-status-"]{border-radius:10px;padding:4px 8px}.job-status-control[class*="quote-status-"] select{color:inherit;min-width:118px}

/* Zero Graus · Vireo adaptation. Tailwind v4 application components retained.
   Reference: supplied Vireo PHP/HTML theme, Aurora scale (24px cards/14px controls).
   This scoped layer bridges those visual roles to the existing Zero Graus views. */
.app-shell{--ui-bg:#f6f8fc;--ui-surface:#fff;--ui-raised:#f0f3f9;--ui-ink:#232b3a;--ui-muted:#535e74;--ui-line:#dde3ee;--ui-field:#7d899e;--ui-accent:#087568;--ui-soft:#e3f3ed;--ui-primary:#80cfbb;--ui-on-primary:#10352d;--ui-shadow:0 18px 44px -22px #10162822,0 2px 10px #10162808;--ui-nav-width:248px;background:var(--ui-bg);color:var(--ui-ink);font-size:14px;line-height:1.5;letter-spacing:-.006em;-webkit-font-smoothing:antialiased}
[data-theme=dark] .app-shell{--ui-bg:#0b0f17;--ui-surface:#161c28;--ui-raised:#202837;--ui-ink:#eef3fa;--ui-muted:#b3bfd2;--ui-line:#364154;--ui-field:#7f8ea5;--ui-accent:#8edac6;--ui-soft:#18392f;--ui-primary:#80cfbb;--ui-on-primary:#10352d;--ui-shadow:0 16px 44px -18px #0006}
body.app-shell{background:var(--ui-bg);color:var(--ui-ink)}
.app-shell .sidebar{inset:0 auto 0 0;width:var(--ui-nav-width);padding:18px 14px 14px;background:var(--ui-surface);border:0;border-right:1px solid var(--ui-line);border-radius:0;box-shadow:none}
.app-shell .sidebar>.logo{display:flex;justify-content:center;padding:0 0 10px}
.app-shell .sidebar>.logo .brand-logo-image{width:100px;height:100px;border-radius:18px}
.app-shell .sidebar>nav{margin-top:8px;scrollbar-width:thin}
.app-shell .sidebar .nav-group{margin:0 0 8px}
.app-shell .sidebar .nav-group-title{color:var(--ui-muted);font-size:10px;letter-spacing:.09em;padding:11px 10px}
.app-shell .sidebar .nav-group-title:hover{background:var(--ui-raised);color:var(--ui-ink);border-radius:10px}
.app-shell .sidebar .nav-link{min-height:42px;gap:10px;padding:9px 11px;font-size:13px;border-radius:0;color:var(--ui-muted)}
.app-shell .sidebar .nav-link:hover{background:var(--ui-raised);color:var(--ui-ink)}
.app-shell .sidebar .nav-link.active{background:var(--ui-soft);color:var(--ui-accent);box-shadow:inset 3px 0 var(--ui-accent)}
.app-shell .sidebar .nav-icon{background:transparent;color:inherit;border:0}
.app-shell .sidebar .account{border-color:var(--ui-line);color:var(--ui-ink);padding-top:14px}
.app-shell .sidebar .account :is(strong,.account-profile-link){color:var(--ui-ink)}
.app-shell .sidebar .account small{color:var(--ui-muted)}
.app-shell .sidebar .account .btn{background:var(--ui-raised);border-color:var(--ui-field);color:var(--ui-muted)}
.app-shell .sidebar .avatar{background:var(--ui-soft);color:var(--ui-accent);border-radius:12px}
.app-shell .workspace{margin-left:var(--ui-nav-width)}
.app-shell .topbar{min-height:64px;padding:12px 24px;gap:14px;margin:0;background:var(--ui-surface);border:0;border-bottom:1px solid var(--ui-line);border-radius:0}
.app-shell .topbar-context{min-width:0}
.app-shell .topbar-context strong{font-size:13px;color:var(--ui-ink)}
.app-shell .topbar-context .eyebrow{font-size:9px;color:var(--ui-muted)}
.app-shell .global-search{margin-left:auto;max-width:420px;min-width:0}
.app-shell .global-search input{border-radius:999px;background:var(--ui-raised);font-size:12px}
.app-shell .topbar .quick-create{margin:0;align-self:center}
.app-shell .sidebar-toggle,.app-shell .theme-toggle{width:40px;height:40px;min-width:40px;min-height:40px;padding:10px;border-radius:50%;background:var(--ui-raised);border-color:transparent;flex-shrink:0}
.app-shell .sidebar-toggle .ui-icon{width:18px;height:18px}
.app-shell main{padding:28px;max-width:1560px}
.app-shell .page-head{gap:16px;margin-bottom:24px}
.app-shell .page-head h1{font-size:clamp(25px,2.4vw,32px);line-height:1.2;letter-spacing:-.03em;margin:0 0 9px;color:var(--ui-ink)}
.app-shell .page-head p{font-size:13px;line-height:1.6;color:var(--ui-muted)}
.app-shell .panel{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:24px;padding:24px;margin-bottom:24px;box-shadow:var(--ui-shadow)}
.app-shell .panel-title{gap:10px;margin-bottom:20px}
.app-shell .panel-title h2,.app-shell .panel>h2{font-size:15px;line-height:1.4;color:var(--ui-ink)}
.app-shell .btn{min-height:42px;padding:10px 15px;border-radius:14px;background:var(--ui-surface);border-color:var(--ui-field);color:var(--ui-ink);font-size:13px;line-height:1.35;box-shadow:none}
.app-shell .btn:hover{background:var(--ui-raised);border-color:var(--ui-muted)}
.app-shell .btn.primary{background:var(--ui-primary);border-color:var(--ui-primary);color:var(--ui-on-primary);box-shadow:0 8px 18px -10px #08756855}
.app-shell .btn.primary:hover{background:#a2dfce;border-color:#a2dfce}
.app-shell .btn.primary .action-icon{color:var(--ui-on-primary)}
.app-shell .btn.danger{background:#fff2f4;border-color:#ba4b60;color:#a52b42}
[data-theme=dark] .app-shell .btn.danger{background:#3f202e;border-color:#d88899;color:#ffc3d1}
.app-shell .form-field{gap:8px;margin-bottom:18px}
.app-shell .form-field-label{font-size:13px;gap:8px;color:var(--ui-ink)}
.app-shell .form-field-icon{width:26px;height:26px;border-radius:8px}
.app-shell .form-field-icon .ui-icon{width:15px;height:15px}
.app-shell :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]){background-color:var(--ui-surface);color:var(--ui-ink);border-color:var(--ui-field);border-radius:14px;font-size:14px;min-height:44px;box-shadow:none}
.app-shell .global-search input{background:var(--ui-raised);border-radius:999px}
.app-shell input::placeholder,.app-shell textarea::placeholder{color:var(--ui-muted)}
.app-shell :is(input,select,textarea):focus{outline:3px solid #096cbd;outline-offset:2px}
[data-theme=dark] .app-shell :is(input,select,textarea):focus{outline-color:#80bfff}
.app-shell .form-section{border-color:var(--ui-line);margin-bottom:20px;padding-bottom:20px}
.app-shell .form-section legend{font-size:14px;color:var(--ui-ink);padding-bottom:16px}
.app-shell .stats{gap:16px;margin-bottom:24px}
.app-shell .stats .panel{padding:22px;margin:0}
.app-shell .metric-card .metric-label{display:flex;flex-direction:row;align-items:center;gap:12px}
.app-shell .metric-card .metric-label p{font-size:12px;line-height:1.4;font-weight:500;color:var(--ui-muted);max-width:20ch}
.app-shell .metric-card .icon-tile{width:36px;height:36px;border-radius:12px;flex-shrink:0}
.app-shell .metric-card .big{color:var(--ui-ink);font-size:30px;line-height:1.2;letter-spacing:-.03em;margin-top:16px;font-variant-numeric:tabular-nums}
.app-shell .stats .metric-card:first-child{background:var(--ui-primary);border-color:var(--ui-primary)}
.app-shell .stats .metric-card:first-child :is(.big,.metric-label p){color:var(--ui-on-primary)}
.app-shell .stats .metric-card:first-child .icon-tile{background:#ffffff40;color:var(--ui-on-primary)}
.app-shell .table-wrap{border-color:var(--ui-line);border-radius:18px;background:var(--ui-surface)}
.app-shell .table-wrap th{background:var(--ui-raised);color:var(--ui-muted);font-size:10px;font-weight:600;letter-spacing:.06em;padding:14px 16px;border-bottom:1px solid var(--ui-line)}
.app-shell .table-wrap td{padding:16px;font-size:13px;line-height:1.5;border-color:var(--ui-line);color:var(--ui-ink)}
.app-shell .table-wrap td small{font-size:11px;color:var(--ui-muted);margin-top:5px}
.app-shell .table-wrap tr:hover{background:var(--ui-raised)}
.app-shell .table-wrap table:has(th:nth-child(5)){min-width:640px}
.app-shell .table-wrap td .btn{min-height:38px;padding:8px 12px;font-size:12px}
.app-shell .table-wrap td form{min-width:0}
.app-shell .table-wrap .job-status-control{background:var(--ui-raised);color:var(--ui-ink)}
.app-shell .table-wrap .badge{border-radius:999px}
.app-shell .empty{background:var(--ui-raised);border:1px dashed var(--ui-field);border-radius:18px;padding:28px 20px;color:var(--ui-muted)}
.app-shell .workspace-shortcuts>a{background:var(--ui-surface);border-color:var(--ui-line);border-radius:18px;box-shadow:none}
.app-shell .workspace-shortcuts>a:hover{background:var(--ui-soft);border-color:var(--ui-accent)}
.app-shell .app-dialog{background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-line);border-radius:24px;box-shadow:0 28px 64px -20px #10162866}
.app-shell .app-dialog::backdrop{background:#080e197d}
.app-shell .dialog-header,.app-shell .dialog-actions{border-color:var(--ui-line)}
.app-shell .dialog-actions{background:var(--ui-raised)}
.app-shell .overview-grid{display:grid;gap:24px;align-items:start;min-width:0}
.app-shell .overview-grid>*{min-width:0}
.app-shell .overview-inventory .area-grid{display:grid;grid-template-columns:1fr;gap:10px}
.app-shell .overview-inventory .area-grid .btn{width:100%;justify-content:flex-start;background:var(--ui-raised);border-color:var(--ui-line)}
.app-shell .mobile-menu{background:var(--ui-surface);color:var(--ui-ink);border-color:var(--ui-line)}
.app-shell .mobile-menu>summary{color:var(--ui-ink);min-height:48px;padding:14px 16px;font-weight:600}
.app-shell .mobile-menu .nav-link{color:var(--ui-ink);border-color:var(--ui-field)}
.app-shell .mobile-menu .nav-link.active{background:var(--ui-soft);color:var(--ui-accent)}
.app-shell .mobile-menu :is(.nav-group-title,.mobile-account){color:var(--ui-muted)}
.app-shell .workspace>footer{color:var(--ui-muted);font-size:11px}
@media(min-width:1200px){.app-shell .overview-grid-split{grid-template-columns:minmax(0,1fr) 260px}}
@media(min-width:768px){.app-shell[data-sidebar-compact]{--ui-nav-width:80px}.app-shell[data-sidebar-compact] .sidebar{padding-inline:10px}.app-shell[data-sidebar-compact] .sidebar>.logo .brand-logo-image{width:52px;height:52px;border-radius:12px}.app-shell[data-sidebar-compact] .sidebar .nav-group-title{display:none}.app-shell[data-sidebar-compact] .sidebar .nav-link{justify-content:center;padding:10px;min-height:44px}.app-shell[data-sidebar-compact] .sidebar .nav-label{display:none}.app-shell[data-sidebar-compact] .sidebar .account{display:flex;justify-content:center}.app-shell[data-sidebar-compact] .sidebar .account>div,.app-shell[data-sidebar-compact] .sidebar .account>form{display:none}.app-shell[data-sidebar-compact] .sidebar-toggle .ui-icon{transform:rotate(180deg)}}
@media(min-width:768px) and (max-width:1099px){.app-shell{--ui-nav-width:210px}.app-shell .topbar{flex-wrap:wrap;padding:12px 20px}.app-shell .topbar-context{min-width:120px;flex:1}.app-shell .global-search{order:3;width:100%;max-width:none;flex-basis:100%}.app-shell .metric-card .big{font-size:22px}.app-shell .metric-card .icon-tile{width:30px;height:30px}}
@media(max-width:767px){.app-shell .sidebar{display:none}.app-shell .workspace{margin-left:0}.app-shell .sidebar-toggle{display:none}.app-shell main{padding:20px 16px}.app-shell .topbar{padding:12px 16px;gap:8px;flex-direction:row;flex-wrap:wrap}.app-shell .topbar-context{display:grid;flex:1;order:0}.app-shell .topbar .theme-toggle{order:1}.app-shell .topbar .quick-create{order:2}.app-shell .global-search{order:3;flex-basis:100%;width:100%;max-width:none}.app-shell .global-search input{min-width:0}.app-shell .page-head{display:block;margin-bottom:20px}.app-shell .page-head h1{font-size:25px}.app-shell .page-head .actions{width:100%}.app-shell .page-head .actions .btn{flex:1}.app-shell .panel{padding:18px 16px;border-radius:20px;box-shadow:none;margin-bottom:16px}.app-shell .stats{gap:10px}.app-shell .stats .panel{padding:16px}.app-shell .metric-card .metric-label{flex-direction:column-reverse;align-items:start}.app-shell .metric-card .big{font-size:20px;margin-top:12px}.app-shell .table-wrap td,.app-shell .table-wrap th{padding:12px}.app-shell .app-dialog{border-radius:20px}.app-shell .overview-inventory .area-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* BEGIN ORIGINAL VIREO COMPONENTS · see public/assets/vireo/PROVENANCE.json */
/*
 * Vireo — Aurora token model · LAYER 1 PRIMITIVES
 * Source of truth: brief 01-tokens.md §1 (scales) + §2 (neutral ramps).
 * Mode-agnostic literals (one :root definition) EXCEPT shadows + semantic
 * ramps, which carry a [data-ax-theme="dark"] override. Verbatim values.
 * Token NAMES are spec; values are Aurora. Components consume Layer 2/3 only.
 */

/* ═══════════════════════════════════════════════════════════════════════
   §1 — PRIMITIVE SCALES
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* ─────────────────────────────────────────────────────────
     SPACING — 4px base (spec 01 §6.1, unchanged)
     ───────────────────────────────────────────────────────── */
  --ax-space-0: 0;
  --ax-space-1: 4px;
  --ax-space-2: 8px;
  --ax-space-3: 12px;
  --ax-space-4: 16px;
  --ax-space-5: 20px;
  --ax-space-6: 24px;   /* default card padding */
  --ax-space-7: 28px;
  --ax-space-8: 32px;
  --ax-space-9: 36px;
  --ax-space-10: 40px;
  --ax-space-12: 48px;  /* = --ax-footer-h */
  --ax-space-16: 64px;
  --ax-space-20: 80px;

  /* ─────────────────────────────────────────────────────────
     RADIUS — Aurora HIGH-radius. Spec NAMES kept; values raised
     to match preview (--r-xl:24 --r-lg:18 --r-md:13 --r-sm:9).
     Mapping: cards=xl(24), large media=lg(18), buttons/inputs/
     popover-items=md(14), small controls/chips=sm(12), tags/
     badges/checkboxes=xs(8), pills=full.
     ───────────────────────────────────────────────────────── */
  --ax-radius-none: 0;
  --ax-radius-xs: 8px;     /* badges, tags, chips, checkboxes, legend swatches→ use 4-6px via xs scope if needed */
  --ax-radius-sm: 12px;    /* small controls, segmented-control pills(inner), donut legend dots use raw */
  --ax-radius-md: 14px;    /* buttons, inputs, dropdown items, popovers, modals (default surface radius for non-card) */
  --ax-radius-lg: 18px;    /* large cards, media tiles, image frames, promo card, gradient plate */
  --ax-radius-xl: 24px;    /* CARDS (default surface radius), customizer panel */
  --ax-radius-pill: 999px; /* toggles, avatars, status dots, true pills, search bar, chip-range, primary btn */

  /* ─────────────────────────────────────────────────────────
     TYPE SIZES + LEADING (spec 01 §4.2 NAMES kept; px values
     unchanged from spec EXCEPT base UI font-size = 14px to match
     Aurora preview body, see §7. Tracking kept from spec.)
     Each --ax-text-* is the FONT-SIZE; paired leading + weight +
     tracking listed in comment, applied via utility classes.
     ───────────────────────────────────────────────────────── */
  --ax-text-2xs: 11px;   /* lh 16  w500  +0.02em  micro-labels, super-headers, badges */
  --ax-text-xs:  12px;   /* lh 18  w500  +0.01em  captions, helper, timestamps, eyebrow */
  --ax-text-sm:  13px;   /* lh 20  w450  0        secondary body, dense table cells */
  --ax-text-base:15px;   /* lh 24  w450  0        default body (NOTE: chrome/dense UI may use 13-14, see §7) */
  --ax-text-md:  17px;   /* lh 26  w500  -0.005em lead text, card subtitles */
  --ax-text-lg:  20px;   /* lh 28  w560  -0.01em  card titles (H4) */
  --ax-text-xl:  24px;   /* lh 32  w600  -0.012em section titles (H3) */
  --ax-text-2xl: 30px;   /* lh 38  w600  -0.015em page titles (H2) */
  --ax-text-3xl: 38px;   /* lh 46  w640  -0.018em hero/greeting (H1) — Space Grotesk */
  --ax-text-4xl: 48px;   /* lh 54  w680  -0.02em  landing display — Space Grotesk */
  --ax-num-kpi:  32px;   /* lh 36  w600  -0.01em  KPI stat figures — Space Grotesk (display), tabular */

  /* line-height tokens (so utilities/components don't hard-code) */
  --ax-leading-2xs: 16px; --ax-leading-xs: 18px; --ax-leading-sm: 20px;
  --ax-leading-base: 24px; --ax-leading-md: 26px; --ax-leading-lg: 28px;
  --ax-leading-xl: 32px; --ax-leading-2xl: 38px; --ax-leading-3xl: 46px;
  --ax-leading-4xl: 54px; --ax-leading-kpi: 36px;

  /* font WEIGHTS (Inter/Space Grotesk supply 400/500/600/700;
     spec's 450/560/640/680 optical weights map to nearest loaded:
     450→400, 500→500, 560→600, 600→600, 640→700, 680→700) */
  --ax-weight-regular: 400;
  --ax-weight-text: 400;     /* spec 450 → 400 (Inter has no 450) */
  --ax-weight-medium: 500;
  --ax-weight-semibold: 600; /* spec 560 & 600 → 600 */
  --ax-weight-bold: 700;     /* spec 640 & 680 → 700 */

  /* ─────────────────────────────────────────────────────────
     ICON SIZES (spec 01 §9, unchanged)
     Tabler outline, 24x24 viewBox, currentColor, 1.75px stroke
     at 24px nominal (preview uses stroke-width="2" on its 24-grid;
     standardize to 1.75 for the build, 2.4 for delta arrows/sparks).
     ───────────────────────────────────────────────────────── */
  --ax-icon-xs: 14px;
  --ax-icon-sm: 16px;   /* default: inputs, buttons, menu items */
  --ax-icon-md: 20px;
  --ax-icon-lg: 24px;
  --ax-icon-xl: 32px;
  --ax-icon-stroke: 1.75;          /* default Tabler stroke */
  --ax-icon-stroke-bold: 2.4;      /* delta arrows, sparklines */

  /* ─────────────────────────────────────────────────────────
     Z-INDEX (spec 01 §15.3, unchanged)
     ───────────────────────────────────────────────────────── */
  --ax-z-base: 0;
  --ax-z-sticky: 100;
  --ax-z-header: 200;
  --ax-z-sidebar: 300;
  --ax-z-overlay-backdrop: 900;
  --ax-z-dropdown: 1000;
  --ax-z-drawer: 1100;
  --ax-z-modal: 1200;
  --ax-z-toast: 1300;
  --ax-z-command: 1400;
  --ax-z-customizer: 1500;

  /* ─────────────────────────────────────────────────────────
     MOTION durations + easings (spec 01 §12.1, unchanged)
     ───────────────────────────────────────────────────────── */
  --ax-motion-instant: 80ms;
  --ax-motion-fast: 140ms;
  --ax-motion-base: 200ms;
  --ax-motion-slow: 280ms;
  --ax-motion-deliberate: 380ms;
  --ax-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ax-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ax-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ax-ease-linear: linear;

  /* ─────────────────────────────────────────────────────────
     BREAKPOINTS (spec 01 §6.3, unchanged) — also bridged to
     Tailwind v4 --breakpoint-* in @theme (see app.css §8).
     ───────────────────────────────────────────────────────── */
  --ax-bp-xs: 0px;
  --ax-bp-sm: 576px;
  --ax-bp-md: 768px;   /* sidebar → overlay below this */
  --ax-bp-lg: 992px;
  --ax-bp-xl: 1200px;
  --ax-bp-2xl: 1400px; /* Boxed max applies */

  /* ─────────────────────────────────────────────────────────
     SHELL DIMENSION tokens (spec 01 §6.2, unchanged NAMES.
     Sidebar width nudged to Aurora preview 248px; spec says 264.
     USE 264px to honor spec contract; preview 248 is acceptable.
     Build agents: use 264px expanded / 76px compact per spec.)
     ───────────────────────────────────────────────────────── */
  --ax-sidebar-w: 264px;
  --ax-sidebar-w-compact: 76px;
  --ax-header-h: 60px;
  --ax-footer-h: 48px;
  --ax-container-boxed: 1320px;

  /* control heights (spec 01 §6.1) */
  --ax-control-h: 38px;          /* default */
  --ax-control-h-compact: 32px;
  --ax-control-h-lg: 44px;

  /* ─────────────────────────────────────────────────────────
     SHADOWS — Aurora GLOW shadows (spec NAMES kept).
     LIGHT mode = soft, low-opacity, neutral-dark glow.
     DARK mode override block below.
     none = resting cards still get the glass recipe's drop+inset,
     so --ax-shadow-none is literal `none` (recipe applies its own).
     ───────────────────────────────────────────────────────── */
  --ax-shadow-none: none;
  --ax-shadow-sm: 0 6px 18px -8px rgba(16,22,40,0.18), 0 2px 6px -2px rgba(16,22,40,0.10);
  --ax-shadow-md: 0 14px 36px -14px rgba(16,22,40,0.22), 0 4px 12px -6px rgba(16,22,40,0.12);
  --ax-shadow-lg: 0 28px 64px -20px rgba(16,22,40,0.28), 0 8px 20px -8px rgba(16,22,40,0.16);
  /* Aurora glass card resting shadow (light) — used by .ax-card recipe */
  --ax-shadow-card: 0 18px 44px -22px rgba(16,22,40,0.20), 0 2px 10px rgba(16,22,40,0.06);
  /* accent glow (re-derives from --ax-accent-rgb, see recipes §6) */
  --ax-glow-accent: 0 12px 26px -10px rgba(var(--ax-accent-rgb), 0.45);
}

/* DARK shadow override (verbatim Aurora preview --sh / --sh-sm + scaled) */
[data-ax-theme="dark"] {
  --ax-shadow-none: none;
  --ax-shadow-sm: 0 6px 18px -8px rgba(0,0,0,0.50);
  --ax-shadow-md: 0 8px 24px -6px rgba(0,0,0,0.55);
  --ax-shadow-lg: 0 18px 48px -10px rgba(0,0,0,0.65);
  --ax-shadow-card: 0 16px 44px -18px rgba(0,0,0,0.65), 0 2px 10px rgba(0,0,0,0.35);
  --ax-glow-accent: 0 12px 26px -10px rgba(var(--ax-accent-rgb), 0.75);
}

/* ═══════════════════════════════════════════════════════════════════════
   §2 — NEUTRAL RAMPS + GLASS/STROKE ALPHA PRIMITIVES + SEMANTIC RAMPS
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── LIGHT Aurora neutral ramp — cool slate near-white ──────
     Canvas is a bright glassy near-white (#F6F8FC); text greys
     mirror the dark mode's cool blue-grey family inverted.
     ──────────────────────────────────────────────────────── */
  --ax-neutral-0:    #FFFFFF;  /* glass-tinted surfaces, inputs (used with alpha in recipe) */
  --ax-neutral-25:   #F6F8FC;  /* app canvas (cool near-white) */
  --ax-neutral-50:   #F0F3F9;  /* subtle/secondary surface, table stripe */
  --ax-neutral-100:  #E7ECF4;  /* hover fill, muted panel */
  --ax-neutral-150:  #DDE3EE;  /* hairline border (default) */
  --ax-neutral-200:  #CFD7E6;  /* strong border, divider */
  --ax-neutral-300:  #B7C1D5;  /* disabled border, track */
  --ax-neutral-400:  #94A0B8;  /* placeholder, disabled text */
  --ax-neutral-500:  #6E7A92;  /* muted/tertiary text, idle icons */
  --ax-neutral-600:  #535E74;  /* secondary text */
  --ax-neutral-700:  #3A4456;  /* body text */
  --ax-neutral-800:  #232B3A;  /* strong text / headings */
  --ax-neutral-900:  #151B27;  /* highest-contrast text */
  --ax-neutral-1000: #0A0E16;  /* reserved (max), matches dark canvas family */

  /* ── DARK Aurora neutral ramp — verbatim from preview ───────
     canvas #0A0C11, glass panels, strokes, cool text greys.
     Mapped onto spec's --ax-dark-50..1000 NAMES (50=lightest text).
     ──────────────────────────────────────────────────────── */
  --ax-dark-1000: #06080C;  /* deepest base (boxed gutter, below canvas) */
  --ax-dark-950:  #0A0C11;  /* APP CANVAS (preview --bg) */
  --ax-dark-900:  #0F121A;  /* base surface fallback (solid behind glass) */
  --ax-dark-850:  #161A23;  /* raised/solid panel (preview --panel-solid) header/sidebar */
  --ax-dark-800:  #1C212C;  /* hover fill / inputs (preview --panel-2 solid form) */
  --ax-dark-750:  #232A38;  /* popover / floating surface */
  --ax-dark-700:  #2D3543;  /* hairline border baseline (see stroke roles) */
  --ax-dark-600:  #3A4351;  /* strong border */
  --ax-dark-500:  #646E80;  /* disabled text / track (preview --tx-sub) */
  --ax-dark-400:  #7E889A;  /* tertiary text */
  --ax-dark-300:  #98A2B3;  /* muted text / idle icons (preview --tx-mut) */
  --ax-dark-200:  #B8C0CE;  /* secondary text */
  --ax-dark-100:  #D4DAE4;  /* body text */
  --ax-dark-50:   #EAEDF3;  /* strong text / headings (preview --tx) */

  /* ── DARK glass/stroke alpha primitives (preview verbatim) ──
     These are alpha-on-anything values; roles below reference them.
     ──────────────────────────────────────────────────────── */
  --ax-dark-panel:      rgba(22, 26, 35, 0.72);   /* preview --panel (glass card) */
  --ax-dark-panel-2:    rgba(28, 33, 44, 0.80);   /* preview --panel-2 */
  --ax-dark-glass-hi:   rgba(255, 255, 255, 0.06);/* preview --glass-hi (inset top highlight) */
  --ax-dark-stroke:     rgba(255, 255, 255, 0.07);/* preview --stroke */
  --ax-dark-stroke-2:   rgba(255, 255, 255, 0.12);/* preview --stroke-2 */
  --ax-dark-fill-1:     rgba(255, 255, 255, 0.04);/* hover bg, control bg */
  --ax-dark-fill-2:     rgba(255, 255, 255, 0.09);/* active/pressed bg, seg-on */

  /* ── LIGHT glass/stroke alpha primitives (designed) ─────────
     Light Aurora: white-tinted glass on a cool canvas; strokes
     are dark-on-light at low alpha so hairlines read on glass.
     ──────────────────────────────────────────────────────── */
  --ax-light-panel:     rgba(255, 255, 255, 0.72);  /* light glass card */
  --ax-light-panel-2:   rgba(255, 255, 255, 0.85);
  --ax-light-glass-hi:  rgba(255, 255, 255, 0.90);  /* inset top highlight (brighter rim) */
  --ax-light-stroke:    rgba(16, 22, 40, 0.08);     /* hairline on light glass */
  --ax-light-stroke-2:  rgba(16, 22, 40, 0.14);
  --ax-light-fill-1:    rgba(16, 22, 40, 0.04);     /* hover bg */
  --ax-light-fill-2:    rgba(16, 22, 40, 0.08);     /* active/pressed bg */

  /* ── SEMANTIC ramps (spec 01 §3.3) — kept as-is, they coexist
     with Aurora. Light literals; dark remap in block below. ── */
  --ax-success-50: #E7F4EC; --ax-success-200: #A8D8BC; --ax-success-500: #2E9E5B;
  --ax-warning-50: #FBF1DE; --ax-warning-200: #EBCF93; --ax-warning-500: #C8870F;
  --ax-danger-50:  #FBE9E6; --ax-danger-200:  #EFB3AA; --ax-danger-500:  #D24535;
  --ax-info-50:    #E6EFFA; --ax-info-200:    #A9C8EC; --ax-info-500:    #2D74C4;
}

[data-ax-theme="dark"] {
  /* dark semantic remaps (spec 01 §3.3 dark table) */
  --ax-success-50: #16271C; --ax-success-200: #2C5C3D; --ax-success-500: #46B36F;
  --ax-warning-50: #2A1F0A; --ax-warning-200: #5C4517; --ax-warning-500: #E0A53A;
  --ax-danger-50:  #2A1512; --ax-danger-200:  #5C2C26; --ax-danger-500:  #E26A5B;
  --ax-info-50:    #101F30; --ax-info-200:    #274A6E; --ax-info-500:    #5A95DA;
}

/*
 * Vireo — Aurora token model · LAYER 2 ROLE TOKENS
 * Source of truth: brief 01-tokens.md §3.
 * Aliases components consume. Light values on :root; dark under
 * [data-ax-theme="dark"]. Spec 01 §3.4 NAMES, Aurora values.
 * Includes ambient glow blob colors --ax-glow-1/2/3 (both modes),
 * --ax-accent-rgb, and the Verdigris default accent (no attribute).
 */

:root {
  /* Sync the UA scheme to the active theme so native chrome (scrollbars, form
     controls, caret) matches — without this the root scrollbar repaints in the
     wrong scheme on theme toggle and visibly blinks. */
  color-scheme: light;

  /* ── scrollbars ──
     THEME-STABLE on purpose: a single translucent neutral that reads on both
     the light (#F6F8FC) and dark (#0A0C11) canvas. Driving the thumb off a
     theme-varying token (e.g. --ax-border-strong) made the rail snap colour
     instantly on theme toggle while the page faded smoothly → the visible
     "blink". Keep these OUT of the dark block so the rail never switches. */
  --ax-scrollbar-thumb:       rgba(128, 138, 158, 0.45);
  --ax-scrollbar-thumb-hover: rgba(128, 138, 158, 0.70);

  /* ── surfaces ── */
  --ax-canvas:          var(--ax-neutral-25);     /* #F6F8FC bright glassy near-white */
  --ax-surface:         var(--ax-light-panel);    /* glass card rgba(255,255,255,.72) */
  --ax-surface-solid:   #FFFFFF;                  /* opaque fallback for non-glass contexts */
  --ax-surface-subtle:  var(--ax-neutral-50);     /* #F0F3F9 secondary surface, table header */
  --ax-surface-raised:  rgba(255,255,255,0.80);   /* header/sidebar default (glass) */
  --ax-surface-overlay: rgba(255,255,255,0.92);   /* popover/dropdown/modal (denser glass) */
  --ax-fill-hover:      var(--ax-light-fill-1);   /* hover bg */
  --ax-fill-active:     var(--ax-light-fill-2);   /* pressed/selected bg */

  /* ── borders ── */
  --ax-border:          var(--ax-light-stroke);   /* 1px hairline on glass */
  --ax-border-strong:   var(--ax-light-stroke-2);

  /* ── text ── */
  --ax-text-strong:     var(--ax-neutral-900);    /* #151B27 headings, key numbers */
  --ax-text:            var(--ax-neutral-700);     /* #3A4456 body */
  --ax-text-muted:      var(--ax-neutral-600);     /* #535E74 secondary */
  --ax-text-subtle:     var(--ax-neutral-500);     /* #6E7A92 tertiary, captions, idle icons */
  --ax-text-disabled:   var(--ax-neutral-400);     /* #94A0B8 */

  /* ── accent (Verdigris default — LIGHT base) ── */
  --ax-accent:          var(--ax-accent-500);     /* #1E856C */
  --ax-accent-hover:    var(--ax-accent-600);     /* #197059 */
  --ax-accent-wash:     var(--ax-accent-50);      /* #E8F4F0 selected-row tint */
  --ax-on-accent:       #FFFFFF;
  --ax-accent-rgb:      30, 133, 108;             /* #1E856C → for glow shadows/alpha fills */
  --ax-link:            var(--ax-accent-700);     /* #155C49 */
  --ax-focus-ring:      var(--ax-accent-500);     /* #1E856C */
  /* soft translucent focus halo — blends over any surface (card/canvas/glass),
     replaces the old hard canvas-gap double-ring. Per-accent via --ax-accent-rgb. */
  --ax-focus-shadow:    0 0 0 3px rgba(var(--ax-accent-rgb), 0.18);

  /* Verdigris default ramp (so :root w/o [data-ax-accent] resolves
     the --ax-accent-* stops the role aliases above reference) */
  --ax-accent-50:#E8F4F0; --ax-accent-100:#C9E6DD; --ax-accent-200:#9AD2C3;
  --ax-accent-300:#63B8A3; --ax-accent-400:#39A185; --ax-accent-500:#1E856C;
  --ax-accent-600:#197059; --ax-accent-700:#155C49; --ax-accent-800:#10463A; --ax-accent-900:#0B3029;

  /* ── ambient glow blob colors (light = pale/soft, see recipes §6) ── */
  --ax-glow-1: rgba(255, 176, 120, 0.16);   /* warm-amber, paler than dark */
  --ax-glow-2: rgba(120, 130, 246, 0.16);   /* indigo */
  --ax-glow-3: rgba(var(--ax-accent-rgb), 0.10); /* accent-tinted */

  /* glass inset top highlight (resolved per mode; consumed by .ax-card) */
  --ax-glass-hi: var(--ax-light-glass-hi);
}

[data-ax-theme="dark"] {
  color-scheme: dark;

  /* surfaces — Aurora preview verbatim */
  --ax-canvas:          var(--ax-dark-950);        /* #0A0C11 */
  --ax-surface:         var(--ax-dark-panel);      /* rgba(22,26,35,.72) glass card */
  --ax-surface-solid:   var(--ax-dark-850);        /* #161A23 */
  --ax-surface-subtle:  var(--ax-dark-panel-2);    /* rgba(28,33,44,.80) */
  --ax-surface-raised:  rgba(16,19,28,0.72);       /* header/sidebar glass */
  --ax-surface-overlay: rgba(20,24,33,0.92);       /* popover/dropdown/modal */
  --ax-fill-hover:      var(--ax-dark-fill-1);     /* rgba(255,255,255,.04) */
  --ax-fill-active:     var(--ax-dark-fill-2);     /* rgba(255,255,255,.09) */

  /* borders — alpha strokes */
  --ax-border:          var(--ax-dark-stroke);     /* rgba(255,255,255,.07) */
  --ax-border-strong:   var(--ax-dark-stroke-2);   /* rgba(255,255,255,.12) */

  /* text — preview verbatim */
  --ax-text-strong:     var(--ax-dark-50);         /* #EAEDF3 */
  --ax-text:            var(--ax-dark-100);         /* #D4DAE4 (body slightly below strong) */
  --ax-text-muted:      var(--ax-dark-300);         /* #98A2B3 */
  --ax-text-subtle:     var(--ax-dark-500);         /* #646E80 */
  --ax-text-disabled:   var(--ax-dark-600);         /* #3A4351 */

  /* accent — Verdigris DARK lightened base (spec §3.5.1 / preview) */
  --ax-accent:          #39A185;
  --ax-accent-hover:    #63B8A3;
  --ax-accent-wash:     #16302A;       /* ~16% L tint, dark selected-row */
  --ax-on-accent:       #0B1F1A;       /* warm dark ink on lightened accent */
  --ax-accent-rgb:      57, 161, 133;  /* #39A185 */
  --ax-link:            #63B8A3;
  --ax-focus-ring:      #63B8A3;
  --ax-focus-shadow:    0 0 0 3px rgba(var(--ax-accent-rgb), 0.30);

  /* ambient glow blobs — Aurora preview verbatim opacities */
  --ax-glow-1: rgba(255, 138, 76, 0.18);    /* warm-amber top-left */
  --ax-glow-2: rgba(99, 102, 241, 0.20);    /* indigo bottom-right */
  --ax-glow-3: rgba(var(--ax-accent-rgb), 0.12); /* accent-tinted mid-right */

  /* glass inset top highlight (dark) */
  --ax-glass-hi: var(--ax-dark-glass-hi);
}

/*
 * Vireo — Aurora token model · RECIPES (Aurora identity)
 * Source of truth: brief 01-tokens.md §6 (recipes) + §7 (font var defs).
 * These ARE the Aurora identity: ambient glow backdrop, glassy card
 * primitive, accent + plate gradients, primary-button reference pill,
 * nav active glow, :focus-visible, prefers-reduced-motion. Both modes;
 * light values designed, dark verbatim from preview.
 *
 * FONT NOTE: this file defines the --ax-font-* CSS variables only
 * (§7). The body/typography BASE rules (body font-family/size 14px/
 * feature-settings, .ax-num tabular-nums, display headings, mono)
 * belong in base.css — they are page-level base rules, not token defs.
 *
 * These are token/recipe primitives, NOT component classes. The only
 * selectors here are the shared Aurora primitives (.ax-ambient, .ax-card and
 * its four material modifiers, .ax-btn-primary, .ax-nav__item.is-active)
 * referenced verbatim by the shell + components briefs. The materials are
 * here rather than in components.css because they restate .ax-card's own
 * surface — see the note above them.
 */

/* ════════════════ FONT FAMILIES (§7 var defs) ════════════════
   Spec NAMES kept; Aurora families (preview --f-sans/--f-disp/--f-mono).
   body/heading/mono BASE rules live in base.css per task split.
*/
:root {
  --ax-font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ax-font-display: "Space Grotesk", var(--ax-font-sans);
  --ax-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ════════════════ CUSTOMIZER FONT OVERRIDE ════════════════
   The customizer can set the UI face to ANY Google family, so there is
   deliberately no per-family rule here: ~1,800 families cannot be enumerated as
   static CSS. Instead the picked family is written as an INLINE --ax-font-sans
   on <html> (js/core/fonts.js → applyFont, and the blocking script in
   partials/head.html for the pre-paint pass) — the same mechanism the custom
   accent colour uses. Inline outranks the :root block above, which is why
   returning to the default has to clear it rather than restate it.

   `data-ax-font="custom"` is written alongside it, purely so the rule below can
   match. The shipped default, Inter, removes the attribute AND the inline
   property, so the designed pairing above wins untouched.

   Picking a family retires the Space Grotesk display face on purpose: a buyer
   choosing "Poppins" wants Poppins headings too, not a pairing they did not
   ask for. Code keeps --ax-font-mono either way.

   The webfont itself is fetched on demand — see js/core/fonts.js. Nothing here
   downloads anything, so an untouched customizer costs zero bytes. */
[data-ax-font] {
  --ax-font-display: var(--ax-font-sans);
}

/* ════════════════ AMBIENT GLOW BACKDROP ════════════════
   Markup: a fixed full-bleed layer behind the app shell.
   <div class="ax-ambient" aria-hidden="true"><i></i></div>
   Three radial blobs: ::before warm-amber TL, ::after indigo BR,
   <i> accent-tinted mid-right. Colors from role tokens --ax-glow-1/2/3
   (light = paler, dark = preview opacities). z-index 0; app shell z 1.
*/
.ax-ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.ax-ambient::before, .ax-ambient::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px);
}
.ax-ambient::before {
  width: 620px; height: 620px; left: -180px; top: -220px;
  background: radial-gradient(circle at 50% 50%, var(--ax-glow-1), transparent 62%);
}
.ax-ambient::after {
  width: 760px; height: 760px; right: -240px; bottom: -300px;
  background: radial-gradient(circle at 50% 50%, var(--ax-glow-2), transparent 62%);
}
.ax-ambient i {
  position: absolute; width: 540px; height: 540px; right: 18%; top: 30%;
  border-radius: 50%; filter: blur(70px);
  background: radial-gradient(circle at 50% 50%, var(--ax-glow-3), transparent 60%);
}
/* Light Aurora: glow is softer — reduce overall intensity */
:root .ax-ambient { opacity: 0.85; }
[data-ax-theme="dark"] .ax-ambient { opacity: 1; }

/* ════════════════ GLASSY CARD PRIMITIVE ════════════════
   .ax-card = the Aurora glass surface. Resting cards use THIS,
   not --ax-shadow-none-as-flat. Spec's "hairline" name is honored
   by the 1px --ax-border stroke; Aurora adds blur + glow + inset.
   Radius = --ax-radius-xl (24px). Nested controls step down to md/sm.
*/
.ax-card {
  position: relative; overflow: hidden;
  background: var(--ax-surface);                 /* glass rgba */
  border: 1px solid var(--ax-border);            /* hairline */
  border-radius: var(--ax-radius-xl);            /* 24px */
  box-shadow: var(--ax-shadow-card);             /* soft glow drop */
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
}
/* When a combobox inside a card is open, let its absolutely-positioned panel
   escape the card's overflow:hidden, and lift the card above its siblings so the
   panel isn't painted behind the next card. Lives here (unlayered) so it beats
   the .ax-card recipe above — an @layer rule would lose to this unlayered one. */
.ax-card:has(.ax-combobox__trigger[aria-expanded="true"]) {
  overflow: visible;
  z-index: var(--ax-z-sticky);
}
/* inset top highlight rim (preview .card::after) */
.ax-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 var(--ax-glass-hi);
}

/* Glass performance fallback: if backdrop-filter is unsupported,
   .ax-card falls back to --ax-surface-solid (opaque). */
@supports not (backdrop-filter: blur(1px)) {
  .ax-card { background: var(--ax-surface-solid); }
}

/* ════════════════ CARD MATERIALS ════════════════
   A dashboard built from one surface repeated reads as a single grey slab,
   however good the individual card is. These change the *material* of a card
   without touching its anatomy — header/body/footer keep working, so any
   existing card opts in by adding one class. Use one or two per page: the
   point is contrast against the default glass, which disappears the moment
   everything is tinted. Each is accent-derived, so all 12 presets and both
   themes inherit free.

   These live HERE, unlayered, and not in components.css: .ax-card above is
   unlayered too, and an unlayered rule outranks anything in @layer components
   regardless of specificity. A material declared in that layer keeps its ink
   but loses its background — white text on untouched glass.
*/

/* Quiet accent tint — lifts one card out of a row without shouting. */
.ax-card--filled {
  background: var(--ax-accent-wash);
  border-color: rgba(var(--ax-accent-rgb), 0.28);
}

/* Full accent gradient with inverted ink, for the one card that should be
   read first. Built from --ax-accent, never a fixed hue. */
.ax-card--gradient {
  color: var(--ax-on-accent);
  background: var(--ax-gradient-accent);
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.ax-card--gradient .ax-card__title,
.ax-card--gradient .ax-card__eyebrow,
.ax-card--gradient .ax-card__subtitle,
.ax-card--gradient .ax-num {
  color: inherit;
}
.ax-card--gradient .ax-card__eyebrow,
.ax-card--gradient .ax-card__subtitle {
  opacity: 0.82;
}
.ax-card--gradient .ax-card__footer {
  border-top-color: rgba(255, 255, 255, 0.22);
}

/* Chart flush to the card edge. The body drops its padding so a full-bleed
   area/column chart meets the card boundary instead of floating in a well;
   text inside a bleed body needs its own padded wrapper. */
.ax-card--bleed > .ax-card__body {
  padding: 0;
}

/* Recessed and matte — supporting cards that should not compete with the
   glass ones beside them. */
.ax-card--flat {
  background: var(--ax-surface-subtle);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.ax-card--flat::after {
  box-shadow: none;
}

/* ════════════════ ACCENT GRADIENT (primary actions, brand mark) ════════════════
   Re-derives from accent tokens automatically (preview --g-accent).
   135deg from accent → accent-2 (hover/lighter step).
*/
:root {
  --ax-gradient-accent: linear-gradient(135deg, var(--ax-accent) 0%, var(--ax-accent-hover) 100%);
  /* fixed multicolour "card plate" gradient (preview --g-card) for the
     My Card / balance plate — CONSTANT, does not follow accent */
  --ax-gradient-plate: linear-gradient(135deg, #4F7CF7 0%, #8B5CF6 48%, #EC4899 100%);
}

/* ════════════════ PRIMARY BUTTON (Aurora pill) ════════════════
   Reference recipe so components don't re-invent.
*/
.ax-btn-primary {
  display: inline-flex; align-items: center; gap: var(--ax-space-2);
  font-weight: var(--ax-weight-semibold); font-size: var(--ax-text-sm);
  color: var(--ax-on-accent); border: 0; cursor: pointer;
  padding: 11px 17px; border-radius: var(--ax-radius-pill);
  background: var(--ax-gradient-accent);
  box-shadow: var(--ax-glow-accent);
  transition: filter var(--ax-motion-instant) var(--ax-ease-standard);
}
.ax-btn-primary:hover { filter: brightness(1.06); }
.ax-btn-primary:active { filter: brightness(0.97); }

/* ════════════════ NAV ACTIVE STATE (Aurora glow bar) ════════════════
   Active nav item: accent-wash gradient fill + inset ring + leading
   glow bar (preview .nav a.on). Selected per spec 01 §13.
*/
.ax-nav__item.is-active {
  color: var(--ax-text-strong);
  background: linear-gradient(90deg, rgba(var(--ax-accent-rgb),0.16), rgba(var(--ax-accent-rgb),0.04));
  box-shadow: inset 0 0 0 1px rgba(var(--ax-accent-rgb),0.18);
}
.ax-nav__item.is-active::before {
  content: ""; position: absolute; inset-inline-start: -14px; top: 50%;
  transform: translateY(-50%); width: 3px; height: 20px;
  border-radius: 0 3px 3px 0; background: var(--ax-accent);
  box-shadow: 0 0 12px var(--ax-accent);
}
.ax-nav__item.is-active svg { color: var(--ax-accent); opacity: 1; }

/* ════════════════ FOCUS RING (spec 01 §8.4 / §13) ════════════════ */
/* Generic offset outline for tabbables WITHOUT a bespoke focus style.
   Form fields (input/select/textarea + checkbox/radio/switch) are excluded —
   they own a richer accent-border + soft halo in components.css. Listing them
   here would double-ring them: this rule is unlayered, so it outranks the
   layered .ax-input:focus { outline:none } (unlayered > @layer components). */
:where(a, button, [tabindex], [role="button"]):focus-visible {
  outline: 2px solid var(--ax-focus-ring); outline-offset: 2px;
  border-radius: inherit;
}

/* ════════════════ REDUCED MOTION (spec 01 §12.4, mandatory) ════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  /* count-ups, shimmer, marquee disabled by component JS reading the query */
}

/*
 * Vireo — HTML reference edition · COMPONENT LIBRARY (Aurora)
 * ----------------------------------------------------------------------------
 * One block per component, per BUILD BRIEF 04 (the contract). Everything lives
 * in @layer components so Tailwind utilities and page-level overrides win.
 *
 * RULES (locked):
 *  - Token law: consume Layer-2 role tokens (--ax-surface/--ax-text/--ax-accent/
 *    --ax-border …) or Layer-3 component vars ONLY. Never a raw --ax-neutral
 *    stop, never a raw --ax-accent-500 stop, never a literal theme hex. (The handful of
 *    rgba(0,0,0,…) scrim/backdrop values and rgba(255,255,255,…) striping are
 *    deliberate semi-transparent overlays, not theme colors, and are the only
 *    literals permitted. #fff appears solely as on-semantic ink for solid
 *    success/warning/danger fills where no on-color token exists.)
 *  - Naming: BEM-ish .ax-block__element--modifier.ax-block__element--modifier.ax-block__element--modifier. State classes is-*. Behaviour
 *    hooks data-ax-*.
 *  - Aurora look: glass surfaces (.ax-card.ax-card.ax-card / .ax-glass.ax-glass.ax-glass recipe), high radius,
 *    ambient glow, gradient-accent primary pills with glow, accent-wash selection.
 *  - Both [data-ax-theme] modes + 12 [data-ax-accent] presets inherit for free,
 *    because we never bind a stop/hex — only role tokens that the theme re-values.
 *  - Focus is ALWAYS :focus-visible (the global ring lives in _recipes.css;
 *    components only refine where outline clips a glass corner — there we use the
 *    canvas-gap + accent-ring box-shadow recipe).
 *  - prefers-reduced-motion honored per block (and globally in _recipes.css).
 *
 * "Alpine:" comments mark which blocks are driven by an Alpine component
 * (src/js/alpine/*). CSS here only paints; behaviour is wired in JS.
 * ----------------------------------------------------------------------------
 */


  /* ========================================================================
     0 · SHARED PRIMITIVES (mixins / helpers used across many components)
     ======================================================================== */

  /* Aurora glass surface — compose into menu / modal / popover / toast.
     Cards use the dedicated .ax-card.ax-card.ax-card below; this is the generic floating glass. */
  .ax-glass.ax-glass.ax-glass {
    position: relative;
    background: var(--ax-surface);
    border: 1px solid var(--ax-border);
    box-shadow: var(--ax-shadow-md);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    backdrop-filter: blur(18px) saturate(1.1);
  }
  .ax-glass.ax-glass.ax-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 var(--ax-glass-hi);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ax-glass.ax-glass.ax-glass {
      background: var(--ax-surface-solid);
    }
  }

  /* visually-hidden (a11y) — avatars/spinners/ratings/icon-only labels */
  .ax-visually-hidden.ax-visually-hidden.ax-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* tabular numerics helper (also in primitives; safe to repeat) */
  .ax-num.ax-num.ax-num {
    font-variant-numeric: tabular-nums;
  }

  /* shared keyframes */
  @keyframes ax-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* ========================================================================
     1 · BUTTONS — .ax-btn.ax-btn.ax-btn
     Style variants: --primary(gradient pill glow), --solid(flat accent),
       --secondary/--outline, --tertiary/--tonal, --ghost, --link,
       --soft-{success|warning|info|danger}.
     Tones: --accent(default), --neutral, --success, --warning, --danger, --info.
     Sizes: --sm/--compact(32), default(38), --lg(44). Plus --icon, --block, --pill.
     States: hover / :focus-visible / active / disabled / is-loading.
     Alpine: none for base (toggles add aria-pressed; openers aria-expanded).
     ======================================================================== */
  .ax-btn.ax-btn.ax-btn {
    --_btn-h: var(--ax-control-h); /* 38 */
    --_btn-px: var(--ax-space-4);
    --_btn-fz: var(--ax-text-sm);
    --_btn-icon: var(--ax-icon-sm);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ax-space-2);
    min-height: var(--_btn-h);
    padding-block: 0;
    padding-inline: var(--_btn-px);
    font-family: var(--ax-font-sans);
    font-size: var(--_btn-fz);
    font-weight: var(--ax-weight-semibold);
    line-height: 1;
    color: var(--ax-text);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ax-radius-sm);
    transition: background var(--ax-motion-instant) var(--ax-ease-standard),
      border-color var(--ax-motion-instant) var(--ax-ease-standard),
      color var(--ax-motion-instant) var(--ax-ease-standard),
      box-shadow var(--ax-motion-fast) var(--ax-ease-standard),
      filter var(--ax-motion-instant) var(--ax-ease-standard);
  }
  .ax-btn__icon.ax-btn__icon.ax-btn__icon {
    flex: 0 0 auto;
    width: var(--_btn-icon);
    height: var(--_btn-icon);
    color: currentColor;
  }
  .ax-btn__label.ax-btn__label.ax-btn__label {
    overflow: hidden;
    text-overflow: ellipsis;
    /* .ax-btn.ax-btn.ax-btn sets line-height:1 (for icon centring), but that makes the label's
       line box = em-size, so overflow:hidden clips glyph descenders (g/j/p/q/y).
       Restore enough leading to contain them; flex align-items:center keeps it
       vertically centred regardless. */
    line-height: 1.25;
    padding-block: 0.05em;
  }
  .ax-btn__spinner.ax-btn__spinner.ax-btn__spinner {
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    width: var(--_btn-icon);
    height: var(--_btn-icon);
    /* Centre via translate, not negative margins: the unlayered `* { margin:0 }`
       reset in base.css beats this layered rule (unlayered > layered), so margins
       compute to 0. `translate` is independent of the rotate animation's
       `transform`, so both apply. */
    translate: -50% -50%;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    opacity: 0;
    animation: ax-spin 0.7s var(--ax-ease-linear) infinite;
  }

  /* — sizes — */
  .ax-btn--sm.ax-btn--sm.ax-btn--sm,
  .ax-btn--compact.ax-btn--compact.ax-btn--compact {
    --_btn-h: var(--ax-control-h-compact);
    --_btn-px: var(--ax-space-3);
    --_btn-fz: var(--ax-text-xs);
  }
  .ax-btn--lg.ax-btn--lg.ax-btn--lg {
    --_btn-h: var(--ax-control-h-lg);
    --_btn-px: var(--ax-space-5);
    --_btn-fz: var(--ax-text-base);
    --_btn-icon: var(--ax-icon-md);
  }

  /* — icon-only — square; label hidden; REQUIRES aria-label — */
  .ax-btn--icon.ax-btn--icon.ax-btn--icon {
    padding-inline: 0;
    width: var(--_btn-h);
    aspect-ratio: 1;
  }
  .ax-btn--block.ax-btn--block.ax-btn--block {
    display: flex;
    width: 100%;
  }
  .ax-btn--pill.ax-btn--pill.ax-btn--pill {
    border-radius: var(--ax-radius-pill);
  }

  /* — PRIMARY: Aurora gradient + accent glow (signature) — */
  .ax-btn--primary.ax-btn--primary.ax-btn--primary {
    color: var(--ax-on-accent);
    background: var(--ax-gradient-accent);
    border-color: transparent;
    box-shadow: var(--ax-glow-accent);
  }
  .ax-btn--primary.ax-btn--primary.ax-btn--primary:hover {
    filter: brightness(1.06);
    box-shadow: var(--ax-glow-accent), var(--ax-shadow-sm);
  }
  .ax-btn--primary.ax-btn--primary.ax-btn--primary:active {
    filter: brightness(0.97);
  }

  /* — SOLID: flat accent fill — */
  .ax-btn--solid.ax-btn--solid.ax-btn--solid {
    color: var(--ax-on-accent);
    background: var(--ax-accent);
    border-color: transparent;
  }
  .ax-btn--solid.ax-btn--solid.ax-btn--solid:hover {
    background: var(--ax-accent-hover);
  }
  .ax-btn--solid.ax-btn--solid.ax-btn--solid:active {
    filter: brightness(0.97);
  }

  /* — SECONDARY / OUTLINE — */
  .ax-btn--secondary.ax-btn--secondary.ax-btn--secondary,
  .ax-btn--outline.ax-btn--outline.ax-btn--outline {
    color: var(--ax-text);
    background: transparent;
    border-color: var(--ax-border-strong);
  }
  .ax-btn--secondary.ax-btn--secondary.ax-btn--secondary:hover,
  .ax-btn--outline.ax-btn--outline.ax-btn--outline:hover {
    background: var(--ax-fill-hover);
    color: var(--ax-text-strong);
  }
  .ax-btn--secondary.ax-btn--secondary.ax-btn--secondary:active,
  .ax-btn--outline.ax-btn--outline.ax-btn--outline:active {
    background: var(--ax-fill-active);
  }

  /* — TERTIARY / TONAL — */
  .ax-btn--tertiary.ax-btn--tertiary.ax-btn--tertiary,
  .ax-btn--tonal.ax-btn--tonal.ax-btn--tonal {
    color: var(--ax-text-strong);
    background: var(--ax-fill-hover);
    border-color: transparent;
  }
  .ax-btn--tertiary.ax-btn--tertiary.ax-btn--tertiary:hover,
  .ax-btn--tonal.ax-btn--tonal.ax-btn--tonal:hover {
    background: var(--ax-fill-active);
  }

  /* — GHOST — */
  .ax-btn--ghost.ax-btn--ghost.ax-btn--ghost {
    color: var(--ax-text);
    background: transparent;
    border-color: transparent;
  }
  .ax-btn--ghost.ax-btn--ghost.ax-btn--ghost:hover {
    background: var(--ax-fill-hover);
    color: var(--ax-text-strong);
  }
  .ax-btn--ghost.ax-btn--ghost.ax-btn--ghost:active {
    background: var(--ax-fill-active);
  }

  /* — LINK — */
  .ax-btn--link.ax-btn--link.ax-btn--link {
    min-height: 0;
    padding: 0;
    color: var(--ax-link);
    background: transparent;
    border: 0;
    border-radius: var(--ax-radius-xs);
  }
  .ax-btn--link.ax-btn--link.ax-btn--link:hover {
    color: var(--ax-accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* — TONE modifiers: locally remap the accent role to a semantic so
       --primary/--solid/--ghost pick it up automatically — */
  .ax-btn--success.ax-btn--success.ax-btn--success {
    --ax-accent: var(--ax-success-500);
    --ax-accent-hover: var(--ax-success-500);
    --ax-on-accent: #fff;
    --ax-link: var(--ax-success-500);
    --ax-focus-ring: var(--ax-success-500);
  }
  .ax-btn--warning.ax-btn--warning.ax-btn--warning {
    --ax-accent: var(--ax-warning-500);
    --ax-accent-hover: var(--ax-warning-500);
    --ax-on-accent: #fff;
    --ax-link: var(--ax-warning-500);
    --ax-focus-ring: var(--ax-warning-500);
  }
  .ax-btn--danger.ax-btn--danger.ax-btn--danger {
    --ax-accent: var(--ax-danger-500);
    --ax-accent-hover: var(--ax-danger-500);
    --ax-on-accent: #fff;
    --ax-link: var(--ax-danger-500);
    --ax-focus-ring: var(--ax-danger-500);
  }
  .ax-btn--info.ax-btn--info.ax-btn--info {
    --ax-accent: var(--ax-info-500);
    --ax-accent-hover: var(--ax-info-500);
    --ax-on-accent: #fff;
    --ax-link: var(--ax-info-500);
    --ax-focus-ring: var(--ax-info-500);
  }
  .ax-btn--neutral.ax-btn--neutral.ax-btn--neutral {
    --ax-accent: var(--ax-text-strong);
    --ax-accent-hover: var(--ax-text);
    --ax-on-accent: var(--ax-canvas);
    --ax-link: var(--ax-text);
    --ax-focus-ring: var(--ax-text-strong);
  }
  /* semantic tones lack an --ax-accent-rgb glow pair → flatten primary fill */
  .ax-btn--success.ax-btn--success.ax-btn--success.ax-btn--primary,
  .ax-btn--warning.ax-btn--warning.ax-btn--warning.ax-btn--primary,
  .ax-btn--danger.ax-btn--danger.ax-btn--danger.ax-btn--primary,
  .ax-btn--info.ax-btn--info.ax-btn--info.ax-btn--primary,
  .ax-btn--neutral.ax-btn--neutral.ax-btn--neutral.ax-btn--primary {
    background: var(--ax-accent);
    box-shadow: var(--ax-shadow-sm);
  }

  /* — SOFT semantic buttons — */
  .ax-btn--soft-success.ax-btn--soft-success.ax-btn--soft-success {
    color: var(--ax-success-500);
    background: var(--ax-success-50);
  }
  .ax-btn--soft-warning.ax-btn--soft-warning.ax-btn--soft-warning {
    color: var(--ax-warning-500);
    background: var(--ax-warning-50);
  }
  .ax-btn--soft-danger.ax-btn--soft-danger.ax-btn--soft-danger {
    color: var(--ax-danger-500);
    background: var(--ax-danger-50);
  }
  .ax-btn--soft-info.ax-btn--soft-info.ax-btn--soft-info {
    color: var(--ax-info-500);
    background: var(--ax-info-50);
  }
  .ax-btn--soft-success.ax-btn--soft-success.ax-btn--soft-success:hover,
  .ax-btn--soft-warning.ax-btn--soft-warning.ax-btn--soft-warning:hover,
  .ax-btn--soft-danger.ax-btn--soft-danger.ax-btn--soft-danger:hover,
  .ax-btn--soft-info.ax-btn--soft-info.ax-btn--soft-info:hover {
    filter: brightness(0.97);
  }

  /* — disabled — */
  .ax-btn.ax-btn.ax-btn:disabled,
  .ax-btn.ax-btn.ax-btn[aria-disabled="true"],
  .ax-btn.ax-btn.ax-btn.is-disabled {
    color: var(--ax-text-disabled);
    background: var(--ax-fill-hover);
    border-color: transparent;
    box-shadow: none;
    filter: none;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* — loading: reveal spinner, dim label, preserve width, block clicks — */
  .ax-btn.ax-btn.ax-btn.is-loading {
    pointer-events: none;
  }
  .ax-btn.ax-btn.ax-btn.is-loading .ax-btn__label.ax-btn__label.ax-btn__label {
    opacity: 0;
  }
  .ax-btn.ax-btn.ax-btn.is-loading .ax-btn__icon.ax-btn__icon.ax-btn__icon {
    opacity: 0;
  }
  .ax-btn.ax-btn.ax-btn.is-loading .ax-btn__spinner.ax-btn__spinner.ax-btn__spinner {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-btn__spinner.ax-btn__spinner.ax-btn__spinner {
      animation-duration: 1.2s;
    }
  }

  /* ========================================================================
     2 · BUTTON GROUP / SEGMENTED — .ax-btn-group.ax-btn-group.ax-btn-group
     Variants: --action, --segmented(radio), --multi, --split, --vertical.
     Members share one hairline seam; only outer corners rounded.
     Selected (segmented) = accent-wash + accent text (NOT hover).
     Alpine: axTabs-style roving tabindex; split caret uses axDropdown.
     ======================================================================== */
  .ax-btn-group.ax-btn-group.ax-btn-group {
    display: inline-flex;
    align-items: stretch;
  }
  .ax-btn-group.ax-btn-group.ax-btn-group > .ax-btn.ax-btn.ax-btn {
    border-radius: 0;
  }
  .ax-btn-group.ax-btn-group.ax-btn-group > .ax-btn.ax-btn.ax-btn:not(:first-child) {
    margin-inline-start: -1px;
  }
  .ax-btn-group.ax-btn-group.ax-btn-group > .ax-btn.ax-btn.ax-btn:first-child {
    border-start-start-radius: var(--ax-radius-sm);
    border-end-start-radius: var(--ax-radius-sm);
  }
  .ax-btn-group.ax-btn-group.ax-btn-group > .ax-btn.ax-btn.ax-btn:last-child {
    border-start-end-radius: var(--ax-radius-sm);
    border-end-end-radius: var(--ax-radius-sm);
  }
  .ax-btn-group.ax-btn-group.ax-btn-group > .ax-btn.ax-btn.ax-btn:hover,
  .ax-btn-group.ax-btn-group.ax-btn-group > .ax-btn.ax-btn.ax-btn:focus-visible {
    z-index: 1;
  }

  .ax-btn-group--vertical.ax-btn-group--vertical.ax-btn-group--vertical {
    flex-direction: column;
  }
  .ax-btn-group--vertical.ax-btn-group--vertical.ax-btn-group--vertical > .ax-btn.ax-btn.ax-btn:not(:first-child) {
    margin-inline-start: 0;
    margin-top: -1px;
  }
  .ax-btn-group--vertical.ax-btn-group--vertical.ax-btn-group--vertical > .ax-btn.ax-btn.ax-btn:first-child {
    border-radius: var(--ax-radius-sm) var(--ax-radius-sm) 0 0;
  }
  .ax-btn-group--vertical.ax-btn-group--vertical.ax-btn-group--vertical > .ax-btn.ax-btn.ax-btn:last-child {
    border-radius: 0 0 var(--ax-radius-sm) var(--ax-radius-sm);
  }

  /* segmented: boxed track + accent-wash selection */
  .ax-btn-group--segmented.ax-btn-group--segmented.ax-btn-group--segmented {
    padding: var(--ax-space-1);
    gap: var(--ax-space-1);
    background: var(--ax-fill-hover);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-md);
  }
  .ax-btn-group--segmented.ax-btn-group--segmented.ax-btn-group--segmented > .ax-btn.ax-btn.ax-btn {
    border: 0;
    margin-inline-start: 0;
    border-radius: var(--ax-radius-sm) !important;
    color: var(--ax-text-muted);
    background: transparent;
  }
  .ax-btn-group--segmented.ax-btn-group--segmented.ax-btn-group--segmented > .ax-btn.ax-btn.ax-btn:hover {
    color: var(--ax-text-strong);
    background: var(--ax-fill-hover);
  }
  .ax-btn-group--segmented.ax-btn-group--segmented.ax-btn-group--segmented > .ax-btn.ax-btn.ax-btn[aria-checked="true"],
  .ax-btn-group--segmented.ax-btn-group--segmented.ax-btn-group--segmented > .ax-btn.ax-btn.ax-btn.is-selected,
  .ax-btn-group--segmented.ax-btn-group--segmented.ax-btn-group--segmented > .ax-btn.ax-btn.ax-btn[aria-pressed="true"] {
    color: var(--ax-accent);
    background: var(--ax-accent-wash);
    box-shadow: var(--ax-shadow-sm);
  }

  .ax-btn-group--split.ax-btn-group--split.ax-btn-group--split > .ax-btn-group__caret.ax-btn-group__caret.ax-btn-group__caret {
    padding-inline: var(--ax-space-2);
  }

  /* ========================================================================
     3 · CARDS — .ax-card.ax-card.ax-card  (THE glass recipe surface)
     Sub: __header/__titles/__eyebrow/__title/__subtitle/__actions/__media/
          __body/__footer/__handle.
     Variants: --stat/--chart/--media/--collapsible/--accent-edge/--interactive/
               --compact/--selected. States: hover/selected/loading/dragging.
     Alpine: --collapsible→axCollapse; --draggable→axSortable.
     ======================================================================== */
  .ax-card.ax-card.ax-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--ax-text);
    background: var(--ax-surface);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-xl);
    box-shadow: var(--ax-shadow-card);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    backdrop-filter: blur(18px) saturate(1.1);
    transition: box-shadow var(--ax-motion-base) var(--ax-ease-standard),
      border-color var(--ax-motion-base) var(--ax-ease-standard),
      transform var(--ax-motion-base) var(--ax-ease-standard);
  }
  .ax-card.ax-card.ax-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 var(--ax-glass-hi);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ax-card.ax-card.ax-card {
      background: var(--ax-surface-solid);
    }
  }
  .ax-card__header.ax-card__header.ax-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ax-space-3);
    padding: var(--ax-space-5) var(--ax-space-6);
  }
  .ax-card__header.ax-card__header.ax-card__header + .ax-card__body.ax-card__body.ax-card__body {
    padding-top: 0;
  }
  .ax-card__titles.ax-card__titles.ax-card__titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .ax-card__eyebrow.ax-card__eyebrow.ax-card__eyebrow {
    font-size: var(--ax-text-2xs);
    font-weight: var(--ax-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ax-text-subtle);
  }
  .ax-card__title.ax-card__title.ax-card__title {
    margin: 0;
    font-family: var(--ax-font-display);
    font-size: var(--ax-text-lg);
    font-weight: var(--ax-weight-semibold);
    line-height: var(--ax-leading-lg);
    color: var(--ax-text-strong);
  }
  .ax-card__subtitle.ax-card__subtitle.ax-card__subtitle {
    margin: 0;
    font-size: var(--ax-text-sm);
    color: var(--ax-text-muted);
  }
  .ax-card__actions.ax-card__actions.ax-card__actions {
    display: flex;
    align-items: center;
    gap: var(--ax-space-2);
    flex: 0 0 auto;
  }
  .ax-card__media.ax-card__media.ax-card__media {
    position: relative;
    overflow: hidden;
  }
  .ax-card__body.ax-card__body.ax-card__body {
    padding: var(--ax-space-6);
    flex: 1 1 auto;
  }
  .ax-card__footer.ax-card__footer.ax-card__footer {
    display: flex;
    align-items: center;
    gap: var(--ax-space-3);
    padding: var(--ax-space-4) var(--ax-space-6);
    border-top: 1px solid var(--ax-border);
  }
  .ax-card__handle.ax-card__handle.ax-card__handle {
    display: inline-flex;
    color: var(--ax-text-subtle);
    background: none;
    border: 0;
    cursor: grab;
  }
  .ax-card__handle.ax-card__handle.ax-card__handle:active {
    cursor: grabbing;
  }

  .ax-card--compact.ax-card--compact.ax-card--compact .ax-card__header.ax-card__header.ax-card__header {
    padding: var(--ax-space-4) var(--ax-space-5);
  }
  .ax-card--compact.ax-card--compact.ax-card--compact .ax-card__body.ax-card__body.ax-card__body {
    padding: var(--ax-space-5);
  }

  /* Balance plate: stack the header so the currency switcher drops to its own
     line instead of squeezing the title in the narrow (col--4) header. */
  .ax-card--balance.ax-card--balance.ax-card--balance .ax-card__header.ax-card__header.ax-card__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .ax-card--accent-edge.ax-card--accent-edge.ax-card--accent-edge::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--ax-accent);
    z-index: 1;
  }

  .ax-card--interactive.ax-card--interactive.ax-card--interactive {
    cursor: pointer;
  }
  .ax-card--interactive.ax-card--interactive.ax-card--interactive:hover {
    box-shadow: var(--ax-shadow-lg);
    border-color: var(--ax-border-strong);
  }
  .ax-card--interactive.ax-card--interactive.ax-card--interactive:focus-visible {
    outline: 2px solid var(--ax-focus-ring);
    outline-offset: 2px;
  }

  .ax-card.ax-card.ax-card.is-selected,
  .ax-card--selected.ax-card--selected.ax-card--selected {
    border-color: var(--ax-accent);
  }
  .ax-card.ax-card.ax-card.is-selected .ax-card__header.ax-card__header.ax-card__header,
  .ax-card--selected.ax-card--selected.ax-card--selected .ax-card__header.ax-card__header.ax-card__header {
    background: var(--ax-accent-wash);
  }

  .ax-card.ax-card.ax-card.is-loading {
    pointer-events: none;
  }
  .ax-card.ax-card.ax-card.is-dragging {
    opacity: 0.6;
    box-shadow: var(--ax-shadow-lg);
  }
  .ax-card--media.ax-card--media.ax-card--media .ax-card__media.ax-card__media.ax-card__media {
    border-radius: var(--ax-radius-xl) var(--ax-radius-xl) 0 0;
  }

  /* ── CARD MATERIALS ─────────────────────────────────────────────────────
     --filled / --gradient / --bleed / --flat live UNLAYERED in
     tokens/_recipes.css, directly under the .ax-card.ax-card.ax-card primitive they override.
     They cannot live here: .ax-card.ax-card.ax-card is itself unlayered, and an unlayered
     rule beats every rule in @layer components no matter how specific — so a
     material declared here would lose its background and paint white ink on
     the untouched glass surface. Keep them next to the primitive. */

  /* ========================================================================
     4 · KPI WIDGET — .ax-kpi.ax-kpi.ax-kpi (standalone) + .ax-card--stat.ax-card--stat.ax-card--stat (card flavour)
     __icon tile (c1..c4 = accent/cyan/violet/amber), __value (display, tabular),
     __delta up/down chip, __label, optional __spark.
     Alpine: none (count-up via page JS; disabled under reduced-motion).
     ======================================================================== */
  .ax-kpi.ax-kpi.ax-kpi {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-3);
  }
  .ax-kpi__top.ax-kpi__top.ax-kpi__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ax-space-3);
  }
  .ax-kpi__icon.ax-kpi__icon.ax-kpi__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--ax-radius-md);
    color: var(--ax-accent);
    background: rgba(var(--ax-accent-rgb), 0.14);
  }
  .ax-kpi__icon.ax-kpi__icon.ax-kpi__icon svg {
    width: var(--ax-icon-md);
    height: var(--ax-icon-md);
  }
  .ax-kpi__icon--c1.ax-kpi__icon--c1.ax-kpi__icon--c1 {
    color: var(--ax-accent);
    background: rgba(var(--ax-accent-rgb), 0.14);
  }
  .ax-kpi__icon--c2.ax-kpi__icon--c2.ax-kpi__icon--c2 {
    color: var(--ax-viz-cyan);
    background: color-mix(in oklab, var(--ax-viz-cyan) 14%, transparent);
  }
  .ax-kpi__icon--c3.ax-kpi__icon--c3.ax-kpi__icon--c3 {
    color: var(--ax-viz-violet);
    background: color-mix(in oklab, var(--ax-viz-violet) 14%, transparent);
  }
  .ax-kpi__icon--c4.ax-kpi__icon--c4.ax-kpi__icon--c4 {
    color: var(--ax-viz-amber);
    background: color-mix(in oklab, var(--ax-viz-amber) 14%, transparent);
  }
  .ax-kpi__label.ax-kpi__label.ax-kpi__label {
    font-size: var(--ax-text-sm);
    color: var(--ax-text-muted);
  }
  .ax-kpi__value.ax-kpi__value.ax-kpi__value {
    font-family: var(--ax-font-display);
    font-size: var(--ax-num-kpi);
    line-height: var(--ax-leading-kpi);
    font-weight: var(--ax-weight-semibold);
    color: var(--ax-text-strong);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
  .ax-kpi__meta.ax-kpi__meta.ax-kpi__meta {
    display: flex;
    align-items: center;
    gap: var(--ax-space-2);
    flex-wrap: wrap;
  }
  .ax-kpi__delta.ax-kpi__delta.ax-kpi__delta,
  .ax-card__delta.ax-card__delta.ax-card__delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px var(--ax-space-2);
    font-size: var(--ax-text-xs);
    font-weight: var(--ax-weight-semibold);
    font-variant-numeric: tabular-nums;
    border-radius: var(--ax-radius-pill);
  }
  .ax-kpi__delta.ax-kpi__delta.ax-kpi__delta svg,
  .ax-card__delta.ax-card__delta.ax-card__delta svg {
    width: var(--ax-icon-xs);
    height: var(--ax-icon-xs);
    stroke-width: var(--ax-icon-stroke-bold);
  }
  .ax-kpi__delta--up.ax-kpi__delta--up.ax-kpi__delta--up,
  .ax-card__delta--up.ax-card__delta--up.ax-card__delta--up {
    color: var(--ax-delta-up);
    background: color-mix(in oklab, var(--ax-delta-up) 14%, transparent);
  }
  .ax-kpi__delta--down.ax-kpi__delta--down.ax-kpi__delta--down,
  .ax-card__delta--down.ax-card__delta--down.ax-card__delta--down {
    color: var(--ax-delta-down);
    background: color-mix(in oklab, var(--ax-delta-down) 14%, transparent);
  }
  .ax-kpi__caption.ax-kpi__caption.ax-kpi__caption {
    font-size: var(--ax-text-xs);
    color: var(--ax-text-subtle);
  }
  .ax-kpi__spark.ax-kpi__spark.ax-kpi__spark {
    margin-top: var(--ax-space-2);
  }

  /* ── KPI layout: icon top-left · title + delta stacked top-right ·
     value and spark each on their own row. The grid container is whatever
     directly holds .ax-kpi__top.ax-kpi__top.ax-kpi__top — the card body, or the bare wrapper used in
     the skeletons "loaded" preview — so every KPI card is patched uniformly
     with no markup change. :has + display:contents sit inside the Tailwind v4
     browser baseline this stack already targets. */
  :has(> .ax-kpi__top.ax-kpi__top.ax-kpi__top) {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--ax-space-3);
    row-gap: var(--ax-space-2);
    align-items: center;
  }
  /* dissolve the icon/delta and value/spark wrappers so all five pieces
     become direct grid items of the container above */
  :has(> .ax-kpi__top.ax-kpi__top.ax-kpi__top) > .ax-kpi__top.ax-kpi__top.ax-kpi__top,
  :has(> .ax-kpi__meta.ax-kpi__meta.ax-kpi__meta) > .ax-kpi__meta.ax-kpi__meta.ax-kpi__meta {
    display: contents;
  }
  :has(> .ax-kpi__top.ax-kpi__top.ax-kpi__top) > .ax-kpi__top.ax-kpi__top.ax-kpi__top > .ax-kpi__icon.ax-kpi__icon.ax-kpi__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
  }
  :has(> .ax-kpi__top.ax-kpi__top.ax-kpi__top) > .ax-kpi__label.ax-kpi__label.ax-kpi__label {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    text-align: end;
  }
  :has(> .ax-kpi__top.ax-kpi__top.ax-kpi__top) > .ax-kpi__top.ax-kpi__top.ax-kpi__top > .ax-kpi__delta.ax-kpi__delta.ax-kpi__delta {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
  :has(> .ax-kpi__top.ax-kpi__top.ax-kpi__top) > .ax-kpi__value.ax-kpi__value.ax-kpi__value,
  :has(> .ax-kpi__meta.ax-kpi__meta.ax-kpi__meta) > .ax-kpi__meta.ax-kpi__meta.ax-kpi__meta > .ax-kpi__value.ax-kpi__value.ax-kpi__value {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0;
  }
  :has(> .ax-kpi__meta.ax-kpi__meta.ax-kpi__meta) > .ax-kpi__meta.ax-kpi__meta.ax-kpi__meta > .ax-kpi__spark.ax-kpi__spark.ax-kpi__spark {
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
    margin: 0;
  }

  /* card-stat flavour reuses kpi internals */
  .ax-card--stat.ax-card--stat.ax-card--stat .ax-card__body.ax-card__body.ax-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-3);
  }
  .ax-card__kpi-val.ax-card__kpi-val.ax-card__kpi-val {
    font-family: var(--ax-font-display);
    font-size: var(--ax-num-kpi);
    line-height: var(--ax-leading-kpi);
    font-weight: var(--ax-weight-semibold);
    color: var(--ax-text-strong);
    font-variant-numeric: tabular-nums;
  }
  .ax-card__kpi-icon.ax-card__kpi-icon.ax-card__kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--ax-radius-md);
    color: var(--ax-accent);
    background: rgba(var(--ax-accent-rgb), 0.14);
  }
  .ax-card__kpi-icon--c1.ax-card__kpi-icon--c1.ax-card__kpi-icon--c1 {
    color: var(--ax-accent);
    background: rgba(var(--ax-accent-rgb), 0.14);
  }
  .ax-card__kpi-icon--c2.ax-card__kpi-icon--c2.ax-card__kpi-icon--c2 {
    color: var(--ax-viz-cyan);
    background: color-mix(in oklab, var(--ax-viz-cyan) 14%, transparent);
  }
  .ax-card__kpi-icon--c3.ax-card__kpi-icon--c3.ax-card__kpi-icon--c3 {
    color: var(--ax-viz-violet);
    background: color-mix(in oklab, var(--ax-viz-violet) 14%, transparent);
  }
  .ax-card__kpi-icon--c4.ax-card__kpi-icon--c4.ax-card__kpi-icon--c4 {
    color: var(--ax-viz-amber);
    background: color-mix(in oklab, var(--ax-viz-amber) 14%, transparent);
  }

  /* ========================================================================
     4b · DASHBOARD COMPOSITION BLOCKS
     Six openers and summarisers that give a dashboard a silhouette of its
     own. Without them every page can only be built as "four KPI tiles, then
     an 8+4 chart row", which is exactly how 17 dashboards end up looking
     like one dashboard. Each is a plain block usable inside any .ax-card.ax-card.ax-card.
       .ax-welcome.ax-welcome.ax-welcome    greeting band — the page's own voice, replaces a KPI row
       .ax-statgroup.ax-statgroup.ax-statgroup  4–6 metrics inside ONE card, not four cards
       .ax-quicktiles.ax-quicktiles.ax-quicktiles action tile grid
       .ax-gauge.ax-gauge.ax-gauge      radial figure + supporting rows
       .ax-ranklist.ax-ranklist.ax-ranklist   ranked rows with an inline proportion bar
       .ax-spotlight.ax-spotlight.ax-spotlight  one figure, oversized, for a --gradient/--filled card
     ======================================================================== */

  /* ── Welcome band. Sits at col--12 or col--8; the stat rail wraps under the
     copy on narrow columns. The glow is decorative and accent-derived. */
  .ax-welcome.ax-welcome.ax-welcome {
    position: relative;
    overflow: hidden;
  }
  .ax-welcome.ax-welcome.ax-welcome::before {
    content: "";
    position: absolute;
    inset-block-start: -60%;
    inset-inline-end: -10%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(var(--ax-accent-rgb), 0.18) 0%,
      transparent 70%
    );
    pointer-events: none;
  }
  .ax-welcome__body.ax-welcome__body.ax-welcome__body {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ax-space-6);
    padding: var(--ax-space-6);
  }
  /* Spaced with flex GAP, not child margins. base.css's reset is unlayered, and
     its `* { margin: 0 }` beats anything declared here in @layer components no
     matter how specific — so the eyebrow's margin-bottom, the lede's margin-top
     and the action row's margin-top all computed to 0 and the four rows sat
     flush against each other, separated only by their line-box leading. gap is
     set by the container, so the reset can't reach it. */
  .ax-welcome__text.ax-welcome__text.ax-welcome__text {
    min-width: 0;
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-2);
  }
  .ax-welcome__eyebrow.ax-welcome__eyebrow.ax-welcome__eyebrow {
    font-size: var(--ax-text-2xs);
    font-weight: var(--ax-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ax-text-subtle);
  }
  .ax-welcome__title.ax-welcome__title.ax-welcome__title {
    font-family: var(--ax-font-display);
    font-size: var(--ax-text-2xl);
    font-weight: var(--ax-weight-semibold);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ax-text-strong);
  }
  .ax-welcome__lede.ax-welcome__lede.ax-welcome__lede {
    max-width: 52ch;
    font-size: var(--ax-text-sm);
    color: var(--ax-text-muted);
  }
  /* The action row is a step down in the hierarchy, not another paragraph: it
     needs the same air the card gives its own edges, otherwise the buttons read
     as attached to the last line of the lede. Padding rather than margin, for
     the reason above — it stacks on the column's 8px gap to make 24. */
  .ax-welcome__actions.ax-welcome__actions.ax-welcome__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ax-space-2);
    padding-block-start: var(--ax-space-4);
  }
  .ax-welcome__stats.ax-welcome__stats.ax-welcome__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ax-space-6);
    margin: 0;
    flex: 0 1 auto;
  }
  .ax-welcome__stat.ax-welcome__stat.ax-welcome__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 92px;
  }
  .ax-welcome__stat.ax-welcome__stat.ax-welcome__stat dt {
    font-size: var(--ax-text-xs);
    color: var(--ax-text-subtle);
  }
  .ax-welcome__stat.ax-welcome__stat.ax-welcome__stat dd {
    margin: 0;
    font-family: var(--ax-font-display);
    font-size: var(--ax-text-xl);
    font-weight: var(--ax-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--ax-text-strong);
  }
  /* On a gradient card the band inherits inverted ink. */
  .ax-card--gradient.ax-card--gradient.ax-card--gradient .ax-welcome__title.ax-welcome__title.ax-welcome__title,
  .ax-card--gradient.ax-card--gradient.ax-card--gradient .ax-welcome__stat.ax-welcome__stat.ax-welcome__stat dd {
    color: inherit;
  }
  .ax-card--gradient.ax-card--gradient.ax-card--gradient .ax-welcome__eyebrow.ax-welcome__eyebrow.ax-welcome__eyebrow,
  .ax-card--gradient.ax-card--gradient.ax-card--gradient .ax-welcome__lede.ax-welcome__lede.ax-welcome__lede,
  .ax-card--gradient.ax-card--gradient.ax-card--gradient .ax-welcome__stat.ax-welcome__stat.ax-welcome__stat dt {
    color: inherit;
    opacity: 0.82;
  }
  .ax-card--gradient.ax-card--gradient.ax-card--gradient .ax-welcome.ax-welcome.ax-welcome::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
  }

  /* ── Stat group: the anti-KPI-row. Cells share one card, divided by
     hairlines each cell draws on its own leading and trailing edge. The
     dividers are box-shadows rather than a painted grid background: a group
     whose count does not divide by the column count leaves empty tracks in
     the last row, and a painted background turns those into a grey slab. A
     shadow is drawn by the cell, so an absent cell draws nothing and the card
     material shows through instead. overflow:hidden clips the outermost rules,
     so no edge of the block carries a dangling hairline.
     Cells stay transparent for the same reason — an opaque cell would paint
     over the accent wash of a --filled card or the matte of a --flat one. */
  .ax-statgroup.ax-statgroup.ax-statgroup {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    border-radius: var(--ax-radius-md);
    overflow: hidden;
  }
  /* Stacked: a vertical KPI rail for the 4-column slot beside a hero chart,
     which is the whole point of leading a page with the chart instead of a
     row of tiles. */
  .ax-statgroup--stack.ax-statgroup--stack.ax-statgroup--stack {
    grid-template-columns: 1fr;
  }
  /* Six is the one count that reliably orphans: five 210px tracks fit across a
     12-column card before six do, so a six-cell group runs 5 + 1 with a lone
     cell stranded on its own row. Capping the track at a third of the block
     makes it wrap as two full rows of three, and the 210px floor still takes
     over on narrow screens (2 + 2 + 2, then stacked). */
  .ax-statgroup.ax-statgroup.ax-statgroup:not(.ax-statgroup--stack.ax-statgroup--stack.ax-statgroup--stack):has(> .ax-statgroup__cell.ax-statgroup__cell.ax-statgroup__cell:nth-child(6)):not(
      :has(> .ax-statgroup__cell.ax-statgroup__cell.ax-statgroup__cell:nth-child(7))
    ) {
    grid-template-columns: repeat(auto-fit, minmax(max(210px, 33.333%), 1fr));
  }
  .ax-statgroup__cell.ax-statgroup__cell.ax-statgroup__cell {
    display: flex;
    align-items: center;
    gap: var(--ax-space-3);
    padding: var(--ax-space-4);
    /* leading rule + rule underneath; both fall outside the block on the
       first column and the last row, where overflow:hidden removes them. */
    box-shadow: -1px 0 0 var(--ax-border), 0 1px 0 var(--ax-border);
  }
  [dir="rtl"] .ax-statgroup__cell.ax-statgroup__cell.ax-statgroup__cell {
    box-shadow: 1px 0 0 var(--ax-border), 0 1px 0 var(--ax-border);
  }
  .ax-statgroup__icon.ax-statgroup__icon.ax-statgroup__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ax-radius-sm);
    color: var(--ax-accent);
    background: rgba(var(--ax-accent-rgb), 0.14);
  }
  .ax-statgroup__icon.ax-statgroup__icon.ax-statgroup__icon svg {
    width: var(--ax-icon-sm);
    height: var(--ax-icon-sm);
  }
  .ax-statgroup__icon--c2.ax-statgroup__icon--c2.ax-statgroup__icon--c2 {
    color: var(--ax-viz-cyan);
    background: color-mix(in oklab, var(--ax-viz-cyan) 14%, transparent);
  }
  .ax-statgroup__icon--c3.ax-statgroup__icon--c3.ax-statgroup__icon--c3 {
    color: var(--ax-viz-violet);
    background: color-mix(in oklab, var(--ax-viz-violet) 14%, transparent);
  }
  .ax-statgroup__icon--c4.ax-statgroup__icon--c4.ax-statgroup__icon--c4 {
    color: var(--ax-viz-amber);
    background: color-mix(in oklab, var(--ax-viz-amber) 14%, transparent);
  }
  .ax-statgroup__icon--c5.ax-statgroup__icon--c5.ax-statgroup__icon--c5 {
    color: var(--ax-viz-emerald);
    background: color-mix(in oklab, var(--ax-viz-emerald) 14%, transparent);
  }
  .ax-statgroup__icon--c6.ax-statgroup__icon--c6.ax-statgroup__icon--c6 {
    color: var(--ax-viz-pink);
    background: color-mix(in oklab, var(--ax-viz-pink) 14%, transparent);
  }
  .ax-statgroup__text.ax-statgroup__text.ax-statgroup__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  /* Labels wrap rather than ellipsize: a two-word metric name clipped to
     "Cus…" tells the reader nothing, and the row simply grows to fit. */
  .ax-statgroup__label.ax-statgroup__label.ax-statgroup__label {
    font-size: var(--ax-text-xs);
    line-height: 1.35;
    color: var(--ax-text-muted);
  }
  /* The figure is the one thing that must not wrap, so it is also the one
     thing that can outgrow a squeezed cell — clip it rather than let it run
     under the delta. */
  .ax-statgroup__value.ax-statgroup__value.ax-statgroup__value {
    font-family: var(--ax-font-display);
    font-size: var(--ax-text-lg);
    font-weight: var(--ax-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--ax-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ax-statgroup__delta.ax-statgroup__delta.ax-statgroup__delta {
    flex: 0 0 auto;
    margin-inline-start: auto;
    font-size: var(--ax-text-xs);
    font-weight: var(--ax-weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .ax-statgroup__delta--up.ax-statgroup__delta--up.ax-statgroup__delta--up {
    color: var(--ax-delta-up);
  }
  .ax-statgroup__delta--down.ax-statgroup__delta--down.ax-statgroup__delta--down {
    color: var(--ax-delta-down);
  }

  /* ── Quick-action tiles. */
  .ax-quicktiles.ax-quicktiles.ax-quicktiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: var(--ax-space-3);
  }
  .ax-quicktiles__tile.ax-quicktiles__tile.ax-quicktiles__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ax-space-2);
    padding: var(--ax-space-4) var(--ax-space-2);
    text-align: center;
    color: var(--ax-text-muted);
    background: var(--ax-surface-subtle);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-md);
    cursor: pointer;
    transition: color var(--ax-motion-base) var(--ax-ease-standard),
      border-color var(--ax-motion-base) var(--ax-ease-standard),
      background var(--ax-motion-base) var(--ax-ease-standard);
  }
  .ax-quicktiles__tile.ax-quicktiles__tile.ax-quicktiles__tile:hover {
    color: var(--ax-accent);
    background: var(--ax-accent-wash);
    border-color: rgba(var(--ax-accent-rgb), 0.35);
  }
  .ax-quicktiles__tile.ax-quicktiles__tile.ax-quicktiles__tile:focus-visible {
    outline: 2px solid var(--ax-focus-ring);
    outline-offset: 2px;
  }
  .ax-quicktiles__icon.ax-quicktiles__icon.ax-quicktiles__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--ax-radius-md);
    color: var(--ax-accent);
    background: rgba(var(--ax-accent-rgb), 0.12);
  }
  .ax-quicktiles__icon.ax-quicktiles__icon.ax-quicktiles__icon svg {
    width: var(--ax-icon-md);
    height: var(--ax-icon-md);
  }
  .ax-quicktiles__label.ax-quicktiles__label.ax-quicktiles__label {
    font-size: var(--ax-text-xs);
    font-weight: var(--ax-weight-medium);
    line-height: 1.25;
  }

  /* ── Gauge card: one radial figure with supporting rows beneath. */
  .ax-gauge.ax-gauge.ax-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ax-space-3);
  }
  .ax-gauge__chart.ax-gauge__chart.ax-gauge__chart {
    width: 100%;
    min-height: 0;
  }
  .ax-gauge__caption.ax-gauge__caption.ax-gauge__caption {
    font-size: var(--ax-text-sm);
    text-align: center;
    color: var(--ax-text-muted);
  }
  .ax-gauge__rows.ax-gauge__rows.ax-gauge__rows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: var(--ax-space-3);
    width: 100%;
    padding-top: var(--ax-space-3);
    border-top: 1px solid var(--ax-border);
  }
  .ax-gauge__row.ax-gauge__row.ax-gauge__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
  }
  .ax-gauge__row-label.ax-gauge__row-label.ax-gauge__row-label {
    font-size: var(--ax-text-xs);
    color: var(--ax-text-subtle);
  }
  .ax-gauge__row-value.ax-gauge__row-value.ax-gauge__row-value {
    font-family: var(--ax-font-display);
    font-size: var(--ax-text-md);
    font-weight: var(--ax-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--ax-text-strong);
  }

  /* ── Rank list: ranked rows carrying their own proportion bar, so a
     leaderboard reads as a chart without costing a chart mount. */
  .ax-ranklist.ax-ranklist.ax-ranklist {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ax-ranklist__item.ax-ranklist__item.ax-ranklist__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: var(--ax-space-3);
    row-gap: var(--ax-space-2);
  }
  .ax-ranklist__rank.ax-ranklist__rank.ax-ranklist__rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: var(--ax-text-xs);
    font-weight: var(--ax-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--ax-text-muted);
    background: var(--ax-surface-subtle);
    border-radius: var(--ax-radius-sm);
  }
  .ax-ranklist__item.ax-ranklist__item.ax-ranklist__item:first-child .ax-ranklist__rank.ax-ranklist__rank.ax-ranklist__rank {
    color: var(--ax-accent);
    background: rgba(var(--ax-accent-rgb), 0.14);
  }
  .ax-ranklist__label.ax-ranklist__label.ax-ranklist__label {
    min-width: 0;
    font-size: var(--ax-text-sm);
    font-weight: var(--ax-weight-medium);
    color: var(--ax-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ax-ranklist__meta.ax-ranklist__meta.ax-ranklist__meta {
    display: block;
    font-size: var(--ax-text-xs);
    font-weight: var(--ax-weight-regular);
    color: var(--ax-text-subtle);
  }
  .ax-ranklist__value.ax-ranklist__value.ax-ranklist__value {
    font-family: var(--ax-font-mono);
    font-size: var(--ax-text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--ax-text-strong);
  }
  .ax-ranklist__bar.ax-ranklist__bar.ax-ranklist__bar {
    grid-column: 2 / -1;
    height: 4px;
    background: var(--ax-fill-hover);
    border-radius: var(--ax-radius-pill);
    overflow: hidden;
  }
  .ax-ranklist__bar.ax-ranklist__bar.ax-ranklist__bar > i {
    display: block;
    height: 100%;
    background: var(--ax-accent);
    border-radius: inherit;
  }

  /* ── Spotlight: one oversized figure. Designed for a --gradient or
     --filled card, where it inherits the inverted ink. */
  .ax-spotlight.ax-spotlight.ax-spotlight {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-2);
  }
  .ax-spotlight__label.ax-spotlight__label.ax-spotlight__label {
    font-size: var(--ax-text-xs);
    font-weight: var(--ax-weight-medium);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.82;
  }
  .ax-spotlight__value.ax-spotlight__value.ax-spotlight__value {
    font-family: var(--ax-font-display);
    font-size: var(--ax-text-3xl);
    font-weight: var(--ax-weight-bold);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .ax-spotlight__foot.ax-spotlight__foot.ax-spotlight__foot {
    display: flex;
    align-items: center;
    gap: var(--ax-space-2);
    font-size: var(--ax-text-sm);
    opacity: 0.9;
  }
  .ax-spotlight__chip.ax-spotlight__chip.ax-spotlight__chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px var(--ax-space-2);
    font-size: var(--ax-text-xs);
    font-weight: var(--ax-weight-semibold);
    font-variant-numeric: tabular-nums;
    border-radius: var(--ax-radius-pill);
    background: rgba(255, 255, 255, 0.22);
  }
  .ax-spotlight__chip.ax-spotlight__chip.ax-spotlight__chip svg {
    width: var(--ax-icon-xs);
    height: var(--ax-icon-xs);
    stroke-width: var(--ax-icon-stroke-bold);
  }
  /* Outside a gradient card the chip needs a real tone, not white-on-white. */
  .ax-card.ax-card.ax-card:not(.ax-card--gradient.ax-card--gradient.ax-card--gradient) .ax-spotlight__label.ax-spotlight__label.ax-spotlight__label,
  .ax-card.ax-card.ax-card:not(.ax-card--gradient.ax-card--gradient.ax-card--gradient) .ax-spotlight__foot.ax-spotlight__foot.ax-spotlight__foot {
    color: var(--ax-text-muted);
    opacity: 1;
  }
  .ax-card.ax-card.ax-card:not(.ax-card--gradient.ax-card--gradient.ax-card--gradient) .ax-spotlight__value.ax-spotlight__value.ax-spotlight__value {
    color: var(--ax-text-strong);
  }
  .ax-card.ax-card.ax-card:not(.ax-card--gradient.ax-card--gradient.ax-card--gradient) .ax-spotlight__chip.ax-spotlight__chip.ax-spotlight__chip {
    color: var(--ax-delta-up);
    background: color-mix(in oklab, var(--ax-delta-up) 14%, transparent);
  }

  /* ========================================================================
     5 · BADGES — .ax-badge.ax-badge.ax-badge
     Variants: --soft(default)/--solid/--outline/--dot/--count/--pill/--chip/--filter.
     Tones: --success/--warning/--danger/--info/--neutral/--accent.
     Sizes: --sm/default. Alpine: --chip remove / --filter toggles aria-pressed.
     ======================================================================== */
  .ax-badge.ax-badge.ax-badge {
    --_badge-50: var(--ax-fill-hover);
    --_badge-500: var(--ax-text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--ax-space-1);
    height: 20px;
    padding-inline: var(--ax-space-2);
    font-size: var(--ax-text-xs);
    font-weight: var(--ax-weight-semibold);
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--ax-radius-xs);
    color: var(--_badge-500);
    background: var(--_badge-50);
  }
  .ax-badge__dot.ax-badge__dot.ax-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }
  .ax-badge__icon.ax-badge__icon.ax-badge__icon {
    width: var(--ax-icon-xs);
    height: var(--ax-icon-xs);
  }
  .ax-badge__remove.ax-badge__remove.ax-badge__remove {
    display: inline-flex;
    margin-inline-start: 2px;
    color: currentColor;
    background: none;
    border: 0;
    cursor: pointer;
    opacity: 0.7;
  }
  .ax-badge__remove.ax-badge__remove.ax-badge__remove svg {
    width: var(--ax-icon-xs);
    height: var(--ax-icon-xs);
  }
  .ax-badge__remove.ax-badge__remove.ax-badge__remove:hover {
    color: var(--ax-danger-500);
    opacity: 1;
  }

  /* tones */
  .ax-badge--success.ax-badge--success.ax-badge--success {
    --_badge-50: var(--ax-success-50);
    --_badge-500: var(--ax-success-500);
  }
  .ax-badge--warning.ax-badge--warning.ax-badge--warning {
    --_badge-50: var(--ax-warning-50);
    --_badge-500: var(--ax-warning-500);
  }
  .ax-badge--danger.ax-badge--danger.ax-badge--danger {
    --_badge-50: var(--ax-danger-50);
    --_badge-500: var(--ax-danger-500);
  }
  .ax-badge--info.ax-badge--info.ax-badge--info {
    --_badge-50: var(--ax-info-50);
    --_badge-500: var(--ax-info-500);
  }
  .ax-badge--accent.ax-badge--accent.ax-badge--accent {
    --_badge-50: var(--ax-accent-wash);
    --_badge-500: var(--ax-accent);
  }
  .ax-badge--neutral.ax-badge--neutral.ax-badge--neutral {
    --_badge-50: var(--ax-fill-hover);
    --_badge-500: var(--ax-text-muted);
  }

  /* styles */
  .ax-badge--soft.ax-badge--soft.ax-badge--soft {
    color: var(--_badge-500);
    background: var(--_badge-50);
  }
  .ax-badge--solid.ax-badge--solid.ax-badge--solid {
    color: #fff;
    background: var(--_badge-500);
  }
  .ax-badge--solid.ax-badge--solid.ax-badge--solid.ax-badge--accent {
    color: var(--ax-on-accent);
    background: var(--ax-accent);
  }
  .ax-badge--outline.ax-badge--outline.ax-badge--outline {
    color: var(--_badge-500);
    background: transparent;
    border-color: var(--_badge-500);
  }
  .ax-badge--pill.ax-badge--pill.ax-badge--pill,
  .ax-badge--chip.ax-badge--chip.ax-badge--chip,
  .ax-badge--count.ax-badge--count.ax-badge--count {
    border-radius: var(--ax-radius-pill);
  }
  .ax-badge--count.ax-badge--count.ax-badge--count {
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    justify-content: center;
    font-family: var(--ax-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ax-on-accent);
    background: var(--ax-accent);
  }
  .ax-badge--count.ax-badge--count.ax-badge--count.ax-badge--danger {
    color: #fff;
    background: var(--ax-danger-500);
  }

  /* sizes */
  .ax-badge--sm.ax-badge--sm.ax-badge--sm {
    height: 16px;
    padding-inline: var(--ax-space-1);
    font-size: var(--ax-text-2xs);
  }

  /* interactive */
  .ax-badge--chip.ax-badge--chip.ax-badge--chip,
  .ax-badge--filter.ax-badge--filter.ax-badge--filter {
    cursor: pointer;
  }
  .ax-badge--filter.ax-badge--filter.ax-badge--filter:hover {
    background: var(--ax-fill-active);
  }
  .ax-badge--filter.ax-badge--filter.ax-badge--filter[aria-pressed="true"],
  .ax-badge--filter.ax-badge--filter.ax-badge--filter.is-selected {
    color: var(--ax-accent);
    background: var(--ax-accent-wash);
    border-color: transparent;
  }

  /* ========================================================================
     6 · AVATARS — .ax-avatar.ax-avatar.ax-avatar
     image / __initials / __icon fallback. Shapes --circle(default)/--squircle.
     Sizes --xs/--sm/--md(default)/--lg/--xl/--2xl. Status dot. Group + overflow.
     Alpine: __overflow → axPopover list.
     ======================================================================== */
  .ax-avatar.ax-avatar.ax-avatar {
    --_av-size: 36px;
    --_av-status: 8px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--_av-size);
    height: var(--_av-size);
    flex: 0 0 auto;
    overflow: hidden;
    font-size: calc(var(--_av-size) * 0.38);
    font-weight: var(--ax-weight-semibold);
    color: var(--ax-text-muted);
    background: var(--ax-fill-active);
    border-radius: var(--ax-radius-pill);
    user-select: none;
  }
  .ax-avatar__img.ax-avatar__img.ax-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
  }
  /* `.ax-avatar.ax-avatar.ax-avatar` is normally the CONTAINER and `.ax-avatar__img.ax-avatar__img.ax-avatar__img` the portrait
     inside it, but the shell partials collapse both roles onto one <img> (header
     trigger, profile card, notification chips, sidebar user). That element gets
     the box without the portrait rule, so the first non-square photo a buyer
     drops in is stretched to fit by the initial `object-fit: fill`. */
  img.ax-avatar {
    object-fit: cover;
  }
  .ax-avatar__initials.ax-avatar__initials.ax-avatar__initials {
    line-height: 1;
  }
  .ax-avatar__icon.ax-avatar__icon.ax-avatar__icon {
    width: 60%;
    height: 60%;
    color: var(--ax-text-subtle);
  }
  .ax-avatar--squircle.ax-avatar--squircle.ax-avatar--squircle {
    border-radius: var(--ax-radius-sm);
  }
  .ax-avatar--xs.ax-avatar--xs.ax-avatar--xs {
    --_av-size: 20px;
    --_av-status: 6px;
  }
  .ax-avatar--sm.ax-avatar--sm.ax-avatar--sm {
    --_av-size: 28px;
    --_av-status: 8px;
  }
  .ax-avatar--md.ax-avatar--md.ax-avatar--md {
    --_av-size: 36px;
  }
  .ax-avatar--lg.ax-avatar--lg.ax-avatar--lg {
    --_av-size: 48px;
    --_av-status: 10px;
  }
  .ax-avatar--xl.ax-avatar--xl.ax-avatar--xl {
    --_av-size: 64px;
    --_av-status: 12px;
  }
  .ax-avatar--2xl.ax-avatar--2xl.ax-avatar--2xl {
    --_av-size: 96px;
    --_av-status: 14px;
  }
  .ax-avatar--ringed.ax-avatar--ringed.ax-avatar--ringed {
    box-shadow: 0 0 0 2px var(--ax-surface-solid), 0 0 0 3px var(--ax-border-strong);
  }
  .ax-avatar.ax-avatar.ax-avatar.is-current,
  .ax-avatar--selected.ax-avatar--selected.ax-avatar--selected {
    box-shadow: 0 0 0 2px var(--ax-surface-solid), 0 0 0 4px var(--ax-accent);
  }
  .ax-avatar__status.ax-avatar__status.ax-avatar__status {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    width: var(--_av-status);
    height: var(--_av-status);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--ax-surface-solid);
    background: var(--ax-text-subtle);
  }
  .ax-avatar__status--online.ax-avatar__status--online.ax-avatar__status--online {
    background: var(--ax-viz-emerald);
  }
  .ax-avatar__status--away.ax-avatar__status--away.ax-avatar__status--away {
    background: var(--ax-viz-amber);
  }
  .ax-avatar__status--busy.ax-avatar__status--busy.ax-avatar__status--busy {
    background: var(--ax-viz-red);
  }
  .ax-avatar__status--offline.ax-avatar__status--offline.ax-avatar__status--offline {
    background: var(--ax-text-subtle);
  }

  .ax-avatar-group.ax-avatar-group.ax-avatar-group {
    display: inline-flex;
    align-items: center;
  }
  .ax-avatar-group.ax-avatar-group.ax-avatar-group > .ax-avatar.ax-avatar.ax-avatar:not(:first-child) {
    margin-inline-start: -10px;
  }
  .ax-avatar-group.ax-avatar-group.ax-avatar-group > .ax-avatar.ax-avatar.ax-avatar {
    box-shadow: 0 0 0 2px var(--ax-surface-solid);
  }
  .ax-avatar__overflow.ax-avatar__overflow.ax-avatar__overflow {
    font-size: var(--ax-text-xs);
    color: var(--ax-text-muted);
    background: var(--ax-fill-active);
    border: 0;
    cursor: pointer;
  }

  /* ========================================================================
     7 · ALERTS — .ax-alert.ax-alert.ax-alert
     Tones + --solid/--inline/--dismissible/--with-actions/--accent-edge.
     Alpine: dismiss removes node + returns focus.
     ======================================================================== */
  .ax-alert.ax-alert.ax-alert {
    --_a-50: var(--ax-fill-hover);
    --_a-500: var(--ax-text-muted);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--ax-space-3);
    padding: var(--ax-space-4) var(--ax-space-5);
    color: var(--ax-text);
    background: var(--_a-50);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-md);
  }
  .ax-alert__icon.ax-alert__icon.ax-alert__icon {
    flex: 0 0 auto;
    width: var(--ax-icon-md);
    height: var(--ax-icon-md);
    color: var(--_a-500);
  }
  .ax-alert__content.ax-alert__content.ax-alert__content {
    flex: 1 1 auto;
    min-width: 0;
  }
  .ax-alert__title.ax-alert__title.ax-alert__title {
    margin: 0;
    font-weight: var(--ax-weight-semibold);
    color: var(--ax-text-strong);
  }
  .ax-alert__message.ax-alert__message.ax-alert__message {
    margin: 2px 0 0;
    font-size: var(--ax-text-sm);
    color: var(--ax-text-muted);
  }
  .ax-alert__actions.ax-alert__actions.ax-alert__actions {
    display: flex;
    gap: var(--ax-space-2);
    margin-top: var(--ax-space-2);
  }
  .ax-alert__dismiss.ax-alert__dismiss.ax-alert__dismiss {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--ax-text-subtle);
    background: none;
    border: 0;
    cursor: pointer;
  }
  .ax-alert__dismiss.ax-alert__dismiss.ax-alert__dismiss svg {
    width: var(--ax-icon-sm);
    height: var(--ax-icon-sm);
  }
  .ax-alert__dismiss.ax-alert__dismiss.ax-alert__dismiss:hover {
    color: var(--ax-text-strong);
  }
  .ax-alert--info.ax-alert--info.ax-alert--info {
    --_a-50: var(--ax-info-50);
    --_a-500: var(--ax-info-500);
  }
  .ax-alert--success.ax-alert--success.ax-alert--success {
    --_a-50: var(--ax-success-50);
    --_a-500: var(--ax-success-500);
  }
  .ax-alert--warning.ax-alert--warning.ax-alert--warning {
    --_a-50: var(--ax-warning-50);
    --_a-500: var(--ax-warning-500);
  }
  .ax-alert--danger.ax-alert--danger.ax-alert--danger {
    --_a-50: var(--ax-danger-50);
    --_a-500: var(--ax-danger-500);
  }
  .ax-alert--accent.ax-alert--accent.ax-alert--accent {
    --_a-50: var(--ax-accent-wash);
    --_a-500: var(--ax-accent);
  }
  .ax-alert--neutral.ax-alert--neutral.ax-alert--neutral {
    --_a-50: var(--ax-fill-hover);
    --_a-500: var(--ax-text-muted);
  }
  .ax-alert--accent-edge.ax-alert--accent-edge.ax-alert--accent-edge {
    border-inline-start: 3px solid var(--_a-500);
  }
  .ax-alert--solid.ax-alert--solid.ax-alert--solid {
    color: #fff;
    background: var(--_a-500);
    border-color: transparent;
  }
  .ax-alert--solid.ax-alert--solid.ax-alert--solid .ax-alert__icon.ax-alert__icon.ax-alert__icon,
  .ax-alert--solid.ax-alert--solid.ax-alert--solid .ax-alert__title.ax-alert__title.ax-alert__title,
  .ax-alert--solid.ax-alert--solid.ax-alert--solid .ax-alert__message.ax-alert__message.ax-alert__message,
  .ax-alert--solid.ax-alert--solid.ax-alert--solid .ax-alert__dismiss.ax-alert__dismiss.ax-alert__dismiss {
    color: inherit;
  }
  .ax-alert--inline.ax-alert--inline.ax-alert--inline {
    align-items: center;
    padding: var(--ax-space-2) var(--ax-space-4);
    font-size: var(--ax-text-sm);
  }
  .ax-alert.ax-alert.ax-alert.is-dismissing {
    opacity: 0;
    transition: opacity var(--ax-motion-base) var(--ax-ease-exit);
  }

  /* ========================================================================
     8 · TOASTS — .ax-toast.ax-toast.ax-toast (region .ax-toast-region.ax-toast-region.ax-toast-region)
     positions: top/bottom × start/center/end. Stack gap. Timer line.
     Alpine: axToast global store (queue/timers/promise/politeness).
     ======================================================================== */
  .ax-toast-region.ax-toast-region.ax-toast-region {
    position: fixed;
    z-index: var(--ax-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-2);
    width: min(380px, calc(100vw - var(--ax-space-8)));
    padding: var(--ax-space-4);
    pointer-events: none;
  }
  .ax-toast-region--bottom-end.ax-toast-region--bottom-end.ax-toast-region--bottom-end {
    inset-block-end: 0;
    inset-inline-end: 0;
  }
  .ax-toast-region--bottom-start.ax-toast-region--bottom-start.ax-toast-region--bottom-start {
    inset-block-end: 0;
    inset-inline-start: 0;
  }
  .ax-toast-region--bottom-center.ax-toast-region--bottom-center.ax-toast-region--bottom-center {
    inset-block-end: 0;
    inset-inline: 0;
    margin-inline: auto;
  }
  .ax-toast-region--top-end.ax-toast-region--top-end.ax-toast-region--top-end {
    inset-block-start: 0;
    inset-inline-end: 0;
  }
  .ax-toast-region--top-start.ax-toast-region--top-start.ax-toast-region--top-start {
    inset-block-start: 0;
    inset-inline-start: 0;
  }
  .ax-toast-region--top-center.ax-toast-region--top-center.ax-toast-region--top-center {
    inset-block-start: 0;
    inset-inline: 0;
    margin-inline: auto;
  }
  .ax-toast.ax-toast.ax-toast {
    --_t-500: var(--ax-text-muted);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--ax-space-3);
    overflow: hidden;
    padding: var(--ax-space-4);
    pointer-events: auto;
    color: var(--ax-text);
    background: var(--ax-surface-overlay);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-lg);
    box-shadow: var(--ax-shadow-lg);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    backdrop-filter: blur(18px) saturate(1.1);
    transition: opacity var(--ax-motion-base) var(--ax-ease-standard),
      transform var(--ax-motion-base) var(--ax-ease-standard);
  }
  .ax-toast__icon.ax-toast__icon.ax-toast__icon {
    flex: 0 0 auto;
    width: var(--ax-icon-md);
    height: var(--ax-icon-md);
    color: var(--_t-500);
  }
  .ax-toast__content.ax-toast__content.ax-toast__content {
    flex: 1 1 auto;
    min-width: 0;
  }
  .ax-toast__title.ax-toast__title.ax-toast__title {
    margin: 0;
    font-weight: var(--ax-weight-semibold);
    color: var(--ax-text-strong);
  }
  .ax-toast__message.ax-toast__message.ax-toast__message {
    margin: 2px 0 0;
    font-size: var(--ax-text-sm);
    color: var(--ax-text-muted);
  }
  .ax-toast__action.ax-toast__action.ax-toast__action {
    flex: 0 0 auto;
    align-self: center;
    font-size: var(--ax-text-sm);
    font-weight: var(--ax-weight-semibold);
    color: var(--ax-link);
    background: none;
    border: 0;
    cursor: pointer;
  }
  .ax-toast__dismiss.ax-toast__dismiss.ax-toast__dismiss {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--ax-text-subtle);
    background: none;
    border: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--ax-motion-fast) var(--ax-ease-standard);
  }
  .ax-toast__dismiss.ax-toast__dismiss.ax-toast__dismiss svg {
    width: var(--ax-icon-sm);
    height: var(--ax-icon-sm);
  }
  .ax-toast.ax-toast.ax-toast:hover .ax-toast__dismiss.ax-toast__dismiss.ax-toast__dismiss,
  .ax-toast.ax-toast.ax-toast:focus-within .ax-toast__dismiss.ax-toast__dismiss.ax-toast__dismiss {
    opacity: 1;
  }
  .ax-toast__timer.ax-toast__timer.ax-toast__timer {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    height: 2px;
    width: 100%;
    transform-origin: left center;
    background: var(--ax-accent);
  }
  .ax-toast--info.ax-toast--info.ax-toast--info {
    --_t-500: var(--ax-info-500);
  }
  .ax-toast--success.ax-toast--success.ax-toast--success {
    --_t-500: var(--ax-success-500);
  }
  .ax-toast--warning.ax-toast--warning.ax-toast--warning {
    --_t-500: var(--ax-warning-500);
  }
  .ax-toast--danger.ax-toast--danger.ax-toast--danger {
    --_t-500: var(--ax-danger-500);
  }
  .ax-toast--accent.ax-toast--accent.ax-toast--accent {
    --_t-500: var(--ax-accent);
  }
  .ax-toast.ax-toast.ax-toast.is-entering {
    opacity: 0;
    transform: translateY(8px);
  }
  .ax-toast.ax-toast.ax-toast.is-leaving {
    opacity: 0;
    transform: translateY(4px);
    transition-timing-function: var(--ax-ease-exit);
  }
  @media (prefers-reduced-motion: reduce) {
    .ax-toast.ax-toast.ax-toast.is-entering,
    .ax-toast.ax-toast.ax-toast.is-leaving {
      transform: none;
    }
  }

  /* ========================================================================
     9 · DROPDOWN / MENU — .ax-dropdown.ax-dropdown.ax-dropdown / .ax-menu.ax-menu.ax-menu (glass overlay)
     __item/__icon/__shortcut/__divider/__section-label/__check, --item--danger.
     Alpine: axDropdown.
     ======================================================================== */
  .ax-dropdown.ax-dropdown.ax-dropdown {
    position: relative;
    display: inline-flex;
  }
  .ax-menu.ax-menu.ax-menu {
    position: absolute;
    z-index: var(--ax-z-dropdown);
    min-width: 200px;
    max-height: min(70vh, 420px);
    overflow-y: auto;
    padding: var(--ax-space-2);
    color: var(--ax-text);
    /* Opaque, no backdrop-filter — dropdown menus read cleaner solid, and when
       nested in a glass card the blur can't reach the page anyway. */
    background: var(--ax-surface-solid);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-lg);
    box-shadow: var(--ax-shadow-lg);
  }
  .ax-menu__section-label.ax-menu__section-label.ax-menu__section-label {
    padding: var(--ax-space-2) var(--ax-space-3) var(--ax-space-1);
    font-size: var(--ax-text-2xs);
    font-weight: var(--ax-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ax-text-subtle);
  }
  .ax-menu__item.ax-menu__item.ax-menu__item {
    display: flex;
    align-items: center;
    gap: var(--ax-space-3);
    width: 100%;
    padding: var(--ax-space-2) var(--ax-space-3);
    font-size: var(--ax-text-sm);
    color: var(--ax-text);
    text-align: start;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: var(--ax-radius-md);
    cursor: pointer;
    transition: background var(--ax-motion-instant) var(--ax-ease-standard);
  }
  .ax-menu__item.ax-menu__item.ax-menu__item:hover,
  .ax-menu__item.ax-menu__item.ax-menu__item.is-active,
  .ax-menu__item.ax-menu__item.ax-menu__item:focus-visible {
    background: var(--ax-fill-hover);
    color: var(--ax-text-strong);
    outline: none;
  }
  .ax-menu__icon.ax-menu__icon.ax-menu__icon {
    flex: 0 0 auto;
    width: var(--ax-icon-sm);
    height: var(--ax-icon-sm);
    color: var(--ax-text-subtle);
  }
  .ax-menu__shortcut.ax-menu__shortcut.ax-menu__shortcut {
    margin-inline-start: auto;
    font-family: var(--ax-font-mono);
    font-size: var(--ax-text-2xs);
    color: var(--ax-text-subtle);
  }
  .ax-menu__check.ax-menu__check.ax-menu__check {
    margin-inline-start: auto;
    width: var(--ax-icon-sm);
    height: var(--ax-icon-sm);
    color: var(--ax-accent);
    opacity: 0;
  }
  .ax-menu__item.ax-menu__item.ax-menu__item[aria-checked="true"] .ax-menu__check.ax-menu__check.ax-menu__check,
  .ax-menu__item.ax-menu__item.ax-menu__item.is-selected .ax-menu__check.ax-menu__check.ax-menu__check {
    opacity: 1;
  }
  .ax-menu__item.ax-menu__item.ax-menu__item[aria-checked="true"],
  .ax-menu__item.ax-menu__item.ax-menu__item.is-selected {
    color: var(--ax-accent);
  }
  .ax-menu__item--danger.ax-menu__item--danger.ax-menu__item--danger {
    color: var(--ax-danger-500);
  }
  .ax-menu__item--danger.ax-menu__item--danger.ax-menu__item--danger .ax-menu__icon.ax-menu__icon.ax-menu__icon {
    color: var(--ax-danger-500);
  }
  .ax-menu__item.ax-menu__item.ax-menu__item:disabled,
  .ax-menu__item.ax-menu__item.ax-menu__item[aria-disabled="true"] {
    color: var(--ax-text-disabled);
    pointer-events: none;
  }
  .ax-menu__divider.ax-menu__divider.ax-menu__divider {
    height: 1px;
    margin: var(--ax-space-1) 0;
    border: 0;
    background: var(--ax-border);
  }

  /* ========================================================================
     10 · MODALS — .ax-modal.ax-modal.ax-modal
     __backdrop/__dialog/__header/__title/__close/__body/__footer/__status/__counter.
     Sizes --sm/default/--lg/--xl/--fullscreen. --scrollable / --centered.
     Alpine: axModal.
     ======================================================================== */
  .ax-modal.ax-modal.ax-modal {
    position: fixed;
    inset: 0;
    z-index: var(--ax-z-modal);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--ax-space-8) var(--ax-space-4);
    overflow-y: auto;
  }
  .ax-modal--centered.ax-modal--centered.ax-modal--centered {
    align-items: center;
  }
  .ax-modal__backdrop.ax-modal__backdrop.ax-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 10, 16, 0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .ax-modal__dialog.ax-modal__dialog.ax-modal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - var(--ax-space-16));
    margin: auto;
    color: var(--ax-text);
    background: var(--ax-surface-overlay);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-lg);
    box-shadow: var(--ax-shadow-lg);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    backdrop-filter: blur(18px) saturate(1.1);
  }
  .ax-modal__dialog--sm.ax-modal__dialog--sm.ax-modal__dialog--sm {
    max-width: 420px;
  }
  .ax-modal__dialog--lg.ax-modal__dialog--lg.ax-modal__dialog--lg {
    max-width: 760px;
  }
  .ax-modal__dialog--xl.ax-modal__dialog--xl.ax-modal__dialog--xl {
    max-width: 960px;
  }
  .ax-modal__dialog--fullscreen.ax-modal__dialog--fullscreen.ax-modal__dialog--fullscreen {
    max-width: none;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .ax-modal__header.ax-modal__header.ax-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ax-space-3);
    padding: var(--ax-space-5) var(--ax-space-6);
    border-bottom: 1px solid var(--ax-border);
  }
  .ax-modal__title.ax-modal__title.ax-modal__title {
    margin: 0;
    font-family: var(--ax-font-display);
    font-size: var(--ax-text-lg);
    font-weight: var(--ax-weight-semibold);
    color: var(--ax-text-strong);
  }
  .ax-modal__close.ax-modal__close.ax-modal__close {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--ax-text-subtle);
    background: none;
    border: 0;
    cursor: pointer;
  }
  .ax-modal__close.ax-modal__close.ax-modal__close svg {
    width: var(--ax-icon-md);
    height: var(--ax-icon-md);
  }
  .ax-modal__close.ax-modal__close.ax-modal__close:hover {
    color: var(--ax-text-strong);
  }
  .ax-modal__body.ax-modal__body.ax-modal__body {
    padding: var(--ax-space-6);
    overflow-y: auto;
  }
  .ax-modal__footer.ax-modal__footer.ax-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ax-space-3);
    padding: var(--ax-space-4) var(--ax-space-6);
    border-top: 1px solid var(--ax-border);
  }
  .ax-modal__dialog--scrollable.ax-modal__dialog--scrollable.ax-modal__dialog--scrollable .ax-modal__header.ax-modal__header.ax-modal__header,
  .ax-modal__dialog--scrollable.ax-modal__dialog--scrollable.ax-modal__dialog--scrollable .ax-modal__footer.ax-modal__footer.ax-modal__footer {
    flex: 0 0 auto;
  }
  .ax-modal__dialog--scrollable.ax-modal__dialog--scrollable.ax-modal__dialog--scrollable .ax-modal__body.ax-modal__body.ax-modal__body {
    flex: 1 1 auto;
  }
  .ax-modal__status.ax-modal__status.ax-modal__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--ax-radius-pill);
    color: var(--ax-accent);
    background: var(--ax-accent-wash);
  }
  .ax-modal__status--success.ax-modal__status--success.ax-modal__status--success {
    color: var(--ax-success-500);
    background: var(--ax-success-50);
  }
  .ax-modal__status--warning.ax-modal__status--warning.ax-modal__status--warning {
    color: var(--ax-warning-500);
    background: var(--ax-warning-50);
  }
  .ax-modal__status--danger.ax-modal__status--danger.ax-modal__status--danger {
    color: var(--ax-danger-500);
    background: var(--ax-danger-50);
  }
  .ax-modal__status--info.ax-modal__status--info.ax-modal__status--info {
    color: var(--ax-info-500);
    background: var(--ax-info-50);
  }
  .ax-modal__counter.ax-modal__counter.ax-modal__counter {
    font-family: var(--ax-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ax-text-muted);
  }

  /* ========================================================================
     11 · OFFCANVAS (drawer) — .ax-offcanvas.ax-offcanvas.ax-offcanvas (4 edges)
     __backdrop/__panel/__header/__body/__footer. --start/--end/--top/--bottom.
     Alpine: axOffcanvas.
     ======================================================================== */
  .ax-offcanvas.ax-offcanvas.ax-offcanvas {
    position: fixed;
    inset: 0;
    z-index: var(--ax-z-drawer);
  }
  .ax-offcanvas__backdrop.ax-offcanvas__backdrop.ax-offcanvas__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 10, 16, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .ax-offcanvas__panel.ax-offcanvas__panel.ax-offcanvas__panel {
    position: fixed;
    display: flex;
    flex-direction: column;
    color: var(--ax-text);
    background: var(--ax-surface-overlay);
    border: 1px solid var(--ax-border);
    box-shadow: var(--ax-shadow-lg);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    backdrop-filter: blur(18px) saturate(1.1);
  }
  .ax-offcanvas__panel--end.ax-offcanvas__panel--end.ax-offcanvas__panel--end,
  .ax-offcanvas__panel--start.ax-offcanvas__panel--start.ax-offcanvas__panel--start {
    inset-block: 0;
    width: min(420px, 92vw);
  }
  .ax-offcanvas__panel--end.ax-offcanvas__panel--end.ax-offcanvas__panel--end {
    inset-inline-end: 0;
    border-start-start-radius: var(--ax-radius-lg);
    border-end-start-radius: var(--ax-radius-lg);
  }
  .ax-offcanvas__panel--start.ax-offcanvas__panel--start.ax-offcanvas__panel--start {
    inset-inline-start: 0;
    border-start-end-radius: var(--ax-radius-lg);
    border-end-end-radius: var(--ax-radius-lg);
  }
  .ax-offcanvas__panel--top.ax-offcanvas__panel--top.ax-offcanvas__panel--top,
  .ax-offcanvas__panel--bottom.ax-offcanvas__panel--bottom.ax-offcanvas__panel--bottom {
    inset-inline: 0;
    height: min(420px, 80vh);
  }
  .ax-offcanvas__panel--top.ax-offcanvas__panel--top.ax-offcanvas__panel--top {
    inset-block-start: 0;
    border-end-start-radius: var(--ax-radius-lg);
    border-end-end-radius: var(--ax-radius-lg);
  }
  .ax-offcanvas__panel--bottom.ax-offcanvas__panel--bottom.ax-offcanvas__panel--bottom {
    inset-block-end: 0;
    border-start-start-radius: var(--ax-radius-lg);
    border-start-end-radius: var(--ax-radius-lg);
  }
  .ax-offcanvas__panel--sm.ax-offcanvas__panel--sm.ax-offcanvas__panel--sm.ax-offcanvas__panel--end,
  .ax-offcanvas__panel--sm.ax-offcanvas__panel--sm.ax-offcanvas__panel--sm.ax-offcanvas__panel--start {
    width: min(320px, 92vw);
  }
  .ax-offcanvas__panel--lg.ax-offcanvas__panel--lg.ax-offcanvas__panel--lg.ax-offcanvas__panel--end,
  .ax-offcanvas__panel--lg.ax-offcanvas__panel--lg.ax-offcanvas__panel--lg.ax-offcanvas__panel--start {
    width: min(540px, 96vw);
  }
  .ax-offcanvas__panel--full.ax-offcanvas__panel--full.ax-offcanvas__panel--full.ax-offcanvas__panel--end,
  .ax-offcanvas__panel--full.ax-offcanvas__panel--full.ax-offcanvas__panel--full.ax-offcanvas__panel--start {
    width: 100vw;
    border-radius: 0;
  }
  .ax-offcanvas__header.ax-offcanvas__header.ax-offcanvas__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ax-space-3);
    padding: var(--ax-space-5) var(--ax-space-6);
    border-bottom: 1px solid var(--ax-border);
  }
  .ax-offcanvas__header.ax-offcanvas__header.ax-offcanvas__header h2,
  .ax-offcanvas__title.ax-offcanvas__title.ax-offcanvas__title {
    margin: 0;
    font-family: var(--ax-font-display);
    font-size: var(--ax-text-lg);
    font-weight: var(--ax-weight-semibold);
    color: var(--ax-text-strong);
  }
  .ax-offcanvas__close.ax-offcanvas__close.ax-offcanvas__close {
    display: inline-flex;
    color: var(--ax-text-subtle);
    background: none;
    border: 0;
    cursor: pointer;
  }
  .ax-offcanvas__close.ax-offcanvas__close.ax-offcanvas__close svg {
    width: var(--ax-icon-md);
    height: var(--ax-icon-md);
  }
  .ax-offcanvas__close.ax-offcanvas__close.ax-offcanvas__close:hover {
    color: var(--ax-text-strong);
  }
  .ax-offcanvas__body.ax-offcanvas__body.ax-offcanvas__body {
    flex: 1 1 auto;
    padding: var(--ax-space-6);
    overflow-y: auto;
  }
  .ax-offcanvas__footer.ax-offcanvas__footer.ax-offcanvas__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ax-space-3);
    padding: var(--ax-space-4) var(--ax-space-6);
    border-top: 1px solid var(--ax-border);
  }

  /* ========================================================================
     12 · TABS / NAVS / PILLS — .ax-tabs.ax-tabs.ax-tabs
     --line(default)/--pill/--segmented/--vertical/--scrollable.
     __list/__tab/__icon/__badge/__indicator/__panel. Alpine: axTabs.
     ======================================================================== */
  .ax-tabs.ax-tabs.ax-tabs {
    display: flex;
    flex-direction: column;
  }
  .ax-tabs__list.ax-tabs__list.ax-tabs__list {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ax-space-1);
    border-bottom: 1px solid var(--ax-border);
  }
  .ax-tabs__tab.ax-tabs__tab.ax-tabs__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--ax-space-2);
    min-height: 40px;
    padding: var(--ax-space-2) var(--ax-space-3);
    font-size: var(--ax-text-sm);
    font-weight: var(--ax-weight-medium);
    color: var(--ax-text-muted);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color var(--ax-motion-fast) var(--ax-ease-standard);
  }
  .ax-tabs__icon.ax-tabs__icon.ax-tabs__icon {
    width: var(--ax-icon-sm);
    height: var(--ax-icon-sm);
  }
  .ax-tabs__badge.ax-tabs__badge.ax-tabs__badge {
    margin-inline-start: var(--ax-space-1);
  }
  .ax-tabs__tab.ax-tabs__tab.ax-tabs__tab:hover {
    color: var(--ax-text);
  }
  .ax-tabs__tab.ax-tabs__tab.ax-tabs__tab[aria-selected="true"],
  .ax-tabs__tab.ax-tabs__tab.ax-tabs__tab.is-active {
    color: var(--ax-text-strong);
  }
  .ax-tabs__tab.ax-tabs__tab.ax-tabs__tab:disabled,
  .ax-tabs__tab.ax-tabs__tab.ax-tabs__tab[aria-disabled="true"] {
    color: var(--ax-text-disabled);
    pointer-events: none;
  }
  .ax-tabs__indicator.ax-tabs__indicator.ax-tabs__indicator {
    position: absolute;
    inset-block-end: -1px;
    inset-inline-start: 0;
    height: 2px;
    width: var(--ax-tabs-ind-w, 0);
    transform: translateX(var(--ax-tabs-ind-x, 0));
    background: var(--ax-accent);
    border-radius: 2px;
    transition: transform var(--ax-motion-base) var(--ax-ease-standard),
      width var(--ax-motion-base) var(--ax-ease-standard);
  }
  .ax-tabs__panel.ax-tabs__panel.ax-tabs__panel {
    padding-top: var(--ax-space-5);
  }
  .ax-tabs__panel.ax-tabs__panel.ax-tabs__panel[hidden] {
    display: none;
  }
  .ax-tabs--pill.ax-tabs--pill.ax-tabs--pill .ax-tabs__list.ax-tabs__list.ax-tabs__list {
    border-bottom: 0;
    gap: var(--ax-space-2);
  }
  .ax-tabs--pill.ax-tabs--pill.ax-tabs--pill .ax-tabs__tab.ax-tabs__tab.ax-tabs__tab {
    border-radius: var(--ax-radius-pill);
    padding-inline: var(--ax-space-4);
  }
  .ax-tabs--pill.ax-tabs--pill.ax-tabs--pill .ax-tabs__tab.ax-tabs__tab.ax-tabs__tab[aria-selected="true"],
  .ax-tabs--pill.ax-tabs--pill.ax-tabs--pill .ax-tabs__tab.ax-tabs__tab.ax-tabs__tab.is-active {
    color: var(--ax-accent);
    background: var(--ax-accent-wash);
  }
  .ax-tabs--pill.ax-tabs--pill.ax-tabs--pill .ax-tabs__indicator.ax-tabs__indicator.ax-tabs__indicator {
    display: none;
  }
  .ax-tabs--segmented.ax-tabs--segmented.ax-tabs--segmented .ax-tabs__list.ax-tabs__list.ax-tabs__list {
    gap: var(--ax-space-1);
    padding: var(--ax-space-1);
    background: var(--ax-fill-hover);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-md);
  }
  .ax-tabs--segmented.ax-tabs--segmented.ax-tabs--segmented .ax-tabs__tab.ax-tabs__tab.ax-tabs__tab {
    border-radius: var(--ax-radius-sm);
  }
  .ax-tabs--segmented.ax-tabs--segmented.ax-tabs--segmented .ax-tabs__tab.ax-tabs__tab.ax-tabs__tab[aria-selected="true"],
  .ax-tabs--segmented.ax-tabs--segmented.ax-tabs--segmented .ax-tabs__tab.ax-tabs__tab.ax-tabs__tab.is-active {
    color: var(--ax-accent);
    background: var(--ax-accent-wash);
    box-shadow: var(--ax-shadow-sm);
  }
  .ax-tabs--segmented.ax-tabs--segmented.ax-tabs--segmented .ax-tabs__indicator.ax-tabs__indicator.ax-tabs__indicator {
    display: none;
  }
  .ax-tabs--vertical.ax-tabs--vertical.ax-tabs--vertical {
    flex-direction: row;
    gap: var(--ax-space-5);
  }
  .ax-tabs--vertical.ax-tabs--vertical.ax-tabs--vertical .ax-tabs__list.ax-tabs__list.ax-tabs__list {
    flex-direction: column;
    align-items: stretch;
    border-bottom: 0;
    border-inline-start: 1px solid var(--ax-border);
  }
  .ax-tabs--vertical.ax-tabs--vertical.ax-tabs--vertical .ax-tabs__tab.ax-tabs__tab.ax-tabs__tab {
    justify-content: flex-start;
  }
  .ax-tabs--vertical.ax-tabs--vertical.ax-tabs--vertical .ax-tabs__indicator.ax-tabs__indicator.ax-tabs__indicator {
    inset-block-start: 0;
    inset-inline-start: -1px;
    width: 2px;
    height: var(--ax-tabs-ind-h, 0);
    transform: translateY(var(--ax-tabs-ind-y, 0));
    transition: transform var(--ax-motion-base) var(--ax-ease-standard),
      height var(--ax-motion-base) var(--ax-ease-standard);
  }
  .ax-tabs--vertical.ax-tabs--vertical.ax-tabs--vertical .ax-tabs__panel.ax-tabs__panel.ax-tabs__panel {
    flex: 1 1 auto;
    padding-top: 0;
  }
  .ax-tabs--scrollable.ax-tabs--scrollable.ax-tabs--scrollable .ax-tabs__list.ax-tabs__list.ax-tabs__list {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  /* Without these the tabs just SHRINK to fit — flex items default to
     flex-shrink:1, so the row never overflows and never scrolls; labels wrap
     to two lines instead. Opting out of shrink is what makes it scrollable. */
  .ax-tabs--scrollable.ax-tabs--scrollable.ax-tabs--scrollable .ax-tabs__tab.ax-tabs__tab.ax-tabs__tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  /* The bar itself is hidden in base.css §3 — the global `*` scrollbar rule is
     unlayered and would beat anything declared here inside @layer components. */

  /* ========================================================================
     13 · BREADCRUMB — .ax-breadcrumb.ax-breadcrumb.ax-breadcrumb (chevron separators)
     Alpine: collapsed overflow → axDropdown.
     ======================================================================== */
  .ax-breadcrumb__list.ax-breadcrumb__list.ax-breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ax-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--ax-text-sm);
  }
  .ax-breadcrumb__item.ax-breadcrumb__item.ax-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }
  .ax-breadcrumb__item.ax-breadcrumb__item.ax-breadcrumb__item a {
    display: inline-flex;
    align-items: center;
    gap: var(--ax-space-1);
    color: var(--ax-text-muted);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ax-breadcrumb__item.ax-breadcrumb__item.ax-breadcrumb__item a:hover {
    color: var(--ax-text);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .ax-breadcrumb__item.ax-breadcrumb__item.ax-breadcrumb__item [aria-current="page"] {
    color: var(--ax-text-strong);
    font-weight: var(--ax-weight-medium);
  }
  .ax-breadcrumb__home.ax-breadcrumb__home.ax-breadcrumb__home {
    width: var(--ax-icon-sm);
    height: var(--ax-icon-sm);
  }
  .ax-breadcrumb__sep.ax-breadcrumb__sep.ax-breadcrumb__sep {
    display: inline-flex;
    color: var(--ax-text-subtle);
  }
  .ax-breadcrumb__sep.ax-breadcrumb__sep.ax-breadcrumb__sep svg {
    width: var(--ax-icon-xs);
    height: var(--ax-icon-xs);
  }
  [dir="rtl"] .ax-breadcrumb__sep.ax-breadcrumb__sep.ax-breadcrumb__sep svg {
    transform: scaleX(-1);
  }

  /* ========================================================================
     14 · PAGINATION — .ax-pagination.ax-pagination.ax-pagination
     __prev/__next/__pages/__page/__ellipsis/__summary. current = accent-wash.
     Alpine: none (anchors/buttons).
     ======================================================================== */
  .ax-pagination.ax-pagination.ax-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ax-space-3);
  }
  .ax-pagination__pages.ax-pagination__pages.ax-pagination__pages {
    display: flex;
    align-items: center;
    gap: var(--ax-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ax-pagination__page.ax-pagination__page.ax-pagination__page,
  .ax-pagination__prev.ax-pagination__prev.ax-pagination__prev,
  .ax-pagination__next.ax-pagination__next.ax-pagination__next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding-inline: var(--ax-space-2);
    font-size: var(--ax-text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--ax-text);
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: var(--ax-radius-sm);
    cursor: pointer;
    transition: background var(--ax-motion-instant) var(--ax-ease-standard);
  }
  .ax-pagination__page.ax-pagination__page.ax-pagination__page:hover,
  .ax-pagination__prev.ax-pagination__prev.ax-pagination__prev:hover,
  .ax-pagination__next.ax-pagination__next.ax-pagination__next:hover {
    background: var(--ax-fill-hover);
  }
  .ax-pagination__page.ax-pagination__page.ax-pagination__page[aria-current="page"],
  .ax-pagination__page.ax-pagination__page.ax-pagination__page.is-active {
    color: var(--ax-accent);
    background: var(--ax-accent-wash);
    font-weight: var(--ax-weight-semibold);
  }
  .ax-pagination__prev.ax-pagination__prev.ax-pagination__prev svg,
  .ax-pagination__next.ax-pagination__next.ax-pagination__next svg {
    width: var(--ax-icon-sm);
    height: var(--ax-icon-sm);
  }
  [dir="rtl"] .ax-pagination__prev.ax-pagination__prev.ax-pagination__prev svg,
  [dir="rtl"] .ax-pagination__next.ax-pagination__next.ax-pagination__next svg {
    transform: scaleX(-1);
  }
  .ax-pagination__prev.ax-pagination__prev.ax-pagination__prev:disabled,
  .ax-pagination__next.ax-pagination__next.ax-pagination__next:disabled,
  .ax-pagination__prev.ax-pagination__prev.ax-pagination__prev[aria-disabled="true"],
  .ax-pagination__next.ax-pagination__next.ax-pagination__next[aria-disabled="true"] {
    color: var(--ax-text-disabled);
    pointer-events: none;
  }
  .ax-pagination__ellipsis.ax-pagination__ellipsis.ax-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    color: var(--ax-text-subtle);
  }
  .ax-pagination__summary.ax-pagination__summary.ax-pagination__summary {
    color: var(--ax-text-muted);
    font-size: var(--ax-text-sm);
  }

  /* ========================================================================
     15 · PROGRESS — .ax-progress.ax-progress.ax-progress (linear + striped + circle + segmented)
     __track/__fill/__value/__center/__ring-track/__ring-fill.
     Alpine: none (style/aria driven).
     ======================================================================== */
  .ax-progress.ax-progress.ax-progress {
    --_p-h: 6px;
    display: flex;
    align-items: center;
    gap: var(--ax-space-3);
  }
  .ax-progress__track.ax-progress__track.ax-progress__track {
    position: relative;
    flex: 1 1 auto;
    height: var(--_p-h);
    overflow: hidden;
    background: var(--ax-fill-hover);
    border-radius: var(--ax-radius-pill);
  }
  .ax-progress__fill.ax-progress__fill.ax-progress__fill {
    height: 100%;
    width: 0;
    background: var(--ax-gradient-accent);
    border-radius: inherit;
    transition: width var(--ax-motion-base) var(--ax-ease-standard);
  }
  .ax-progress__value.ax-progress__value.ax-progress__value {
    flex: 0 0 auto;
    min-width: 3ch;
    text-align: end;
    font-size: var(--ax-text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--ax-text-muted);
  }
  .ax-progress--xs.ax-progress--xs.ax-progress--xs {
    --_p-h: 4px;
  }
  .ax-progress--sm.ax-progress--sm.ax-progress--sm {
    --_p-h: 6px;
  }
  .ax-progress--md.ax-progress--md.ax-progress--md {
    --_p-h: 8px;
  }
  .ax-progress--lg.ax-progress--lg.ax-progress--lg {
    --_p-h: 12px;
  }
  .ax-progress--success.ax-progress--success.ax-progress--success .ax-progress__fill.ax-progress__fill.ax-progress__fill {
    background: var(--ax-success-500);
  }
  .ax-progress--warning.ax-progress--warning.ax-progress--warning .ax-progress__fill.ax-progress__fill.ax-progress__fill {
    background: var(--ax-warning-500);
  }
  .ax-progress--danger.ax-progress--danger.ax-progress--danger .ax-progress__fill.ax-progress__fill.ax-progress__fill {
    background: var(--ax-danger-500);
  }
  .ax-progress--striped.ax-progress--striped.ax-progress--striped .ax-progress__fill.ax-progress__fill.ax-progress__fill {
    background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%
    );
    background-size: 16px 16px;
    background-color: var(--ax-accent);
  }
  .ax-progress--animated.ax-progress--animated.ax-progress--animated .ax-progress__fill.ax-progress__fill.ax-progress__fill {
    animation: ax-progress-stripe 1s var(--ax-ease-linear) infinite;
  }
  .ax-progress--indeterminate.ax-progress--indeterminate.ax-progress--indeterminate .ax-progress__fill.ax-progress__fill.ax-progress__fill {
    width: 35%;
    background: var(--ax-accent);
    animation: ax-progress-indeterminate 1.4s var(--ax-ease-standard) infinite;
  }
  .ax-progress--stacked.ax-progress--stacked.ax-progress--stacked .ax-progress__track.ax-progress__track.ax-progress__track,
  .ax-progress--segmented.ax-progress--segmented.ax-progress--segmented .ax-progress__track.ax-progress__track.ax-progress__track {
    display: flex;
    gap: 2px;
  }
  .ax-progress--circle.ax-progress--circle.ax-progress--circle {
    display: inline-flex;
    position: relative;
  }
  .ax-progress--circle.ax-progress--circle.ax-progress--circle .ax-progress__ring-track.ax-progress__ring-track.ax-progress__ring-track {
    stroke: var(--ax-fill-hover);
    fill: none;
  }
  .ax-progress--circle.ax-progress--circle.ax-progress--circle .ax-progress__ring-fill.ax-progress__ring-fill.ax-progress__ring-fill {
    stroke: var(--ax-accent);
    fill: none;
    stroke-linecap: round;
    transition: stroke-dashoffset var(--ax-motion-base) var(--ax-ease-standard);
  }
  .ax-progress__center.ax-progress__center.ax-progress__center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ax-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ax-text-strong);
  }
  @keyframes ax-progress-stripe {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 16px 0;
    }
  }
  @keyframes ax-progress-indeterminate {
    0% {
      margin-inline-start: -35%;
    }
    100% {
      margin-inline-start: 100%;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ax-progress--animated.ax-progress--animated.ax-progress--animated .ax-progress__fill.ax-progress__fill.ax-progress__fill,
    .ax-progress--indeterminate.ax-progress--indeterminate.ax-progress--indeterminate .ax-progress__fill.ax-progress__fill.ax-progress__fill {
      animation: none;
    }
    .ax-progress--indeterminate.ax-progress--indeterminate.ax-progress--indeterminate .ax-progress__fill.ax-progress__fill.ax-progress__fill {
      width: 100%;
    }
  }

  /* ========================================================================
     16 · SPINNERS & LOADERS — .ax-spinner.ax-spinner.ax-spinner / .ax-page-loader.ax-page-loader.ax-page-loader
     Alpine: none. data-ax-loader="off" hides page loader.
     ======================================================================== */
  .ax-spinner.ax-spinner.ax-spinner {
    --_s-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--_s-size);
    height: var(--_s-size);
    color: var(--ax-accent);
  }
  .ax-spinner__glyph.ax-spinner__glyph.ax-spinner__glyph {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    animation: ax-spin 0.7s var(--ax-ease-linear) infinite;
  }
  .ax-spinner--xs.ax-spinner--xs.ax-spinner--xs {
    --_s-size: 12px;
  }
  .ax-spinner--sm.ax-spinner--sm.ax-spinner--sm {
    --_s-size: 16px;
  }
  .ax-spinner--md.ax-spinner--md.ax-spinner--md {
    --_s-size: 24px;
  }
  .ax-spinner--lg.ax-spinner--lg.ax-spinner--lg {
    --_s-size: 40px;
  }
  .ax-spinner--lg.ax-spinner--lg.ax-spinner--lg .ax-spinner__glyph.ax-spinner__glyph.ax-spinner__glyph {
    border-width: 3px;
  }
  .ax-spinner--inline.ax-spinner--inline.ax-spinner--inline {
    vertical-align: text-bottom;
  }
  .ax-page-loader.ax-page-loader.ax-page-loader {
    position: fixed;
    inset: 0;
    z-index: var(--ax-z-command);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ax-space-5);
    background: var(--ax-canvas);
  }
  .ax-page-loader__mark.ax-page-loader__mark.ax-page-loader__mark {
    color: var(--ax-text-strong);
  }
  [data-ax-loader="off"] .ax-page-loader.ax-page-loader.ax-page-loader {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .ax-spinner__glyph.ax-spinner__glyph.ax-spinner__glyph {
      animation-duration: 1.4s;
    }
  }

  /* ========================================================================
     17 · SKELETONS — .ax-skeleton.ax-skeleton.ax-skeleton (+ composites)
     --line/--circle/--rect, --shimmer(default)/--pulse/--static.
     Alpine: none (CSS); container toggles aria-busy.
     ======================================================================== */
  .ax-skeleton.ax-skeleton.ax-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--ax-fill-hover);
    border-radius: var(--ax-radius-md);
  }
  .ax-skeleton--line.ax-skeleton--line.ax-skeleton--line {
    height: 0.75em;
    width: 100%;
    border-radius: var(--ax-radius-xs);
  }
  .ax-skeleton--circle.ax-skeleton--circle.ax-skeleton--circle {
    border-radius: var(--ax-radius-pill);
    aspect-ratio: 1;
  }
  .ax-skeleton--rect.ax-skeleton--rect.ax-skeleton--rect {
    border-radius: var(--ax-radius-md);
  }
  .ax-skeleton.ax-skeleton.ax-skeleton::after,
  .ax-skeleton--shimmer.ax-skeleton--shimmer.ax-skeleton--shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
      90deg,
      transparent,
      var(--ax-fill-active),
      transparent
    );
    animation: ax-shimmer 1.4s var(--ax-ease-standard) infinite;
  }
  .ax-skeleton--pulse.ax-skeleton--pulse.ax-skeleton--pulse::after {
    animation: none;
  }
  .ax-skeleton--pulse.ax-skeleton--pulse.ax-skeleton--pulse {
    animation: ax-pulse 1.4s var(--ax-ease-standard) infinite;
  }
  .ax-skeleton--static.ax-skeleton--static.ax-skeleton--static::after {
    display: none;
  }
  .ax-skeleton-card.ax-skeleton-card.ax-skeleton-card,
  .ax-skeleton-stat.ax-skeleton-stat.ax-skeleton-stat {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-3);
  }
  .ax-skeleton-row.ax-skeleton-row.ax-skeleton-row {
    display: flex;
    align-items: center;
    gap: var(--ax-space-3);
  }
  @keyframes ax-shimmer {
    to {
      transform: translateX(100%);
    }
  }
  @keyframes ax-pulse {
    50% {
      opacity: 0.5;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ax-skeleton.ax-skeleton.ax-skeleton::after,
    .ax-skeleton--shimmer.ax-skeleton--shimmer.ax-skeleton--shimmer::after {
      animation: none;
    }
    .ax-skeleton--pulse.ax-skeleton--pulse.ax-skeleton--pulse {
      animation: none;
    }
  }

  /* ========================================================================
     18 · LIST GROUPS — .ax-list.ax-list.ax-list
     __row/__leading/__content/__title/__meta/__trailing/__group-label.
     --flush/--inset/--linked/--selectable/--actionable/--grouped + densities.
     Alpine: --selectable roving; --sortable → axSortable.
     ======================================================================== */
  .ax-list.ax-list.ax-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
  }
  .ax-list__row.ax-list__row.ax-list__row {
    display: flex;
    align-items: center;
    gap: var(--ax-space-3);
    min-height: 44px;
    padding: var(--ax-space-3) var(--ax-space-4);
    color: var(--ax-text);
    text-decoration: none;
    border-bottom: 1px solid var(--ax-border);
    transition: background var(--ax-motion-instant) var(--ax-ease-standard);
  }
  .ax-list__row.ax-list__row.ax-list__row:last-child {
    border-bottom: 0;
  }
  .ax-list__leading.ax-list__leading.ax-list__leading {
    flex: 0 0 auto;
    display: inline-flex;
  }
  .ax-list__content.ax-list__content.ax-list__content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .ax-list__title.ax-list__title.ax-list__title {
    font-weight: var(--ax-weight-medium);
    color: var(--ax-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ax-list__meta.ax-list__meta.ax-list__meta {
    font-size: var(--ax-text-sm);
    color: var(--ax-text-muted);
  }
  .ax-list__trailing.ax-list__trailing.ax-list__trailing {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--ax-space-2);
    color: var(--ax-text-subtle);
  }
  .ax-list--compact.ax-list--compact.ax-list--compact .ax-list__row.ax-list__row.ax-list__row {
    min-height: 36px;
  }
  .ax-list--comfortable.ax-list--comfortable.ax-list--comfortable .ax-list__row.ax-list__row.ax-list__row {
    min-height: 56px;
  }
  a.ax-list__row,
  .ax-list--linked.ax-list--linked.ax-list--linked .ax-list__row.ax-list__row.ax-list__row,
  .ax-list--selectable.ax-list--selectable.ax-list--selectable .ax-list__row.ax-list__row.ax-list__row,
  .ax-list--actionable.ax-list--actionable.ax-list--actionable .ax-list__row.ax-list__row.ax-list__row {
    cursor: pointer;
  }
  a.ax-list__row:hover,
  .ax-list--linked.ax-list--linked.ax-list--linked .ax-list__row.ax-list__row.ax-list__row:hover,
  .ax-list--selectable.ax-list--selectable.ax-list--selectable .ax-list__row.ax-list__row.ax-list__row:hover {
    background: var(--ax-fill-hover);
  }
  .ax-list__row.ax-list__row.ax-list__row.is-active {
    background: var(--ax-fill-active);
  }
  .ax-list__row.ax-list__row.ax-list__row.is-selected,
  .ax-list__row.ax-list__row.ax-list__row[aria-selected="true"] {
    background: var(--ax-accent-wash);
  }
  .ax-list__row.ax-list__row.ax-list__row.is-selected .ax-list__title.ax-list__title.ax-list__title,
  .ax-list__row.ax-list__row.ax-list__row[aria-selected="true"] .ax-list__title.ax-list__title.ax-list__title {
    color: var(--ax-accent);
  }
  .ax-list__row.ax-list__row.ax-list__row[aria-disabled="true"] {
    color: var(--ax-text-disabled);
    pointer-events: none;
  }
  .ax-list__group-label.ax-list__group-label.ax-list__group-label {
    padding: var(--ax-space-2) var(--ax-space-4);
    font-size: var(--ax-text-2xs);
    font-weight: var(--ax-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ax-text-subtle);
  }

  /* ========================================================================
     19 · TIMELINE — .ax-timeline.ax-timeline.ax-timeline
     __item/__marker/__content/__time/__title/__body. Hairline rail.
     Alpine: none (expandable items use axCollapse).
     ======================================================================== */
  .ax-timeline.ax-timeline.ax-timeline {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ax-timeline__item.ax-timeline__item.ax-timeline__item {
    position: relative;
    display: flex;
    gap: var(--ax-space-4);
    padding-bottom: var(--ax-space-5);
  }
  .ax-timeline__item.ax-timeline__item.ax-timeline__item:last-child {
    padding-bottom: 0;
  }
  .ax-timeline__marker.ax-timeline__marker.ax-timeline__marker {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ax-radius-pill);
    color: var(--ax-text-muted);
    background: var(--ax-surface-subtle);
    border: 1px solid var(--ax-border);
  }
  .ax-timeline__marker.ax-timeline__marker.ax-timeline__marker svg {
    width: var(--ax-icon-sm);
    height: var(--ax-icon-sm);
  }
  .ax-timeline__item.ax-timeline__item.ax-timeline__item:not(:last-child) .ax-timeline__marker.ax-timeline__marker.ax-timeline__marker::before {
    content: "";
    position: absolute;
    top: 100%;
    inset-inline-start: 50%;
    width: 1px;
    height: calc(var(--ax-space-5) + var(--ax-space-2));
    transform: translateX(-50%);
    background: var(--ax-border);
  }
  [dir="rtl"] .ax-timeline__item.ax-timeline__item.ax-timeline__item:not(:last-child) .ax-timeline__marker.ax-timeline__marker.ax-timeline__marker::before {
    transform: translateX(50%);
  }
  .ax-timeline__content.ax-timeline__content.ax-timeline__content {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
  }
  .ax-timeline__time.ax-timeline__time.ax-timeline__time {
    font-family: var(--ax-font-mono);
    font-size: var(--ax-text-xs);
    color: var(--ax-text-subtle);
  }
  .ax-timeline__title.ax-timeline__title.ax-timeline__title {
    margin: 2px 0 0;
    font-weight: var(--ax-weight-medium);
    color: var(--ax-text-strong);
  }
  .ax-timeline__body.ax-timeline__body.ax-timeline__body {
    margin-top: var(--ax-space-1);
    font-size: var(--ax-text-sm);
    color: var(--ax-text-muted);
  }
  .ax-timeline__item.ax-timeline__item.ax-timeline__item.is-current .ax-timeline__marker.ax-timeline__marker.ax-timeline__marker {
    color: var(--ax-on-accent);
    background: var(--ax-accent);
    border-color: transparent;
  }
  .ax-timeline__item--success.ax-timeline__item--success.ax-timeline__item--success .ax-timeline__marker.ax-timeline__marker.ax-timeline__marker {
    color: #fff;
    background: var(--ax-success-500);
    border-color: transparent;
  }
  .ax-timeline__item--danger.ax-timeline__item--danger.ax-timeline__item--danger .ax-timeline__marker.ax-timeline__marker.ax-timeline__marker {
    color: #fff;
    background: var(--ax-danger-500);
    border-color: transparent;
  }
  .ax-timeline__item--pending.ax-timeline__item--pending.ax-timeline__item--pending .ax-timeline__marker.ax-timeline__marker.ax-timeline__marker {
    color: var(--ax-text-subtle);
  }
  .ax-timeline__item--pending.ax-timeline__item--pending.ax-timeline__item--pending:not(:last-child) .ax-timeline__marker.ax-timeline__marker.ax-timeline__marker::before {
    background: repeating-linear-gradient(
      var(--ax-border) 0 4px,
      transparent 4px 8px
    );
  }

  /* ========================================================================
     20 · RIBBONS — .ax-ribbon.ax-ribbon.ax-ribbon (host must be position:relative; overflow:hidden)
     --corner(--top-start/--top-end), --edge/--flag, --pill, semantic tones.
     Alpine: none.
     ======================================================================== */
  .ax-ribbon.ax-ribbon.ax-ribbon {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ax-text-2xs);
    font-weight: var(--ax-weight-semibold);
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--ax-on-accent);
    background: var(--ax-accent);
    pointer-events: none;
  }
  .ax-ribbon--corner.ax-ribbon--corner.ax-ribbon--corner {
    inset-block-start: 14px;
    width: 150px;
    height: 22px;
    transform: rotate(45deg);
    box-shadow: var(--ax-shadow-sm);
  }
  .ax-ribbon--corner.ax-ribbon--corner.ax-ribbon--corner.ax-ribbon--top-end {
    inset-inline-end: -40px;
  }
  .ax-ribbon--corner.ax-ribbon--corner.ax-ribbon--corner.ax-ribbon--top-start {
    inset-inline-start: -40px;
    transform: rotate(-45deg);
  }
  [dir="rtl"] .ax-ribbon--corner.ax-ribbon--corner.ax-ribbon--corner.ax-ribbon--top-end {
    inset-inline-end: auto;
    inset-inline-start: -40px;
    transform: rotate(-45deg);
  }
  .ax-ribbon--edge.ax-ribbon--edge.ax-ribbon--edge,
  .ax-ribbon--flag.ax-ribbon--flag.ax-ribbon--flag {
    inset-block-start: var(--ax-space-3);
    inset-inline-start: 0;
    height: 22px;
    padding-inline: var(--ax-space-3);
    border-start-end-radius: var(--ax-radius-xs);
    border-end-end-radius: var(--ax-radius-xs);
  }
  .ax-ribbon--pill.ax-ribbon--pill.ax-ribbon--pill {
    inset-block-start: var(--ax-space-3);
    inset-inline-end: var(--ax-space-3);
    height: 20px;
    padding-inline: var(--ax-space-2);
    border-radius: var(--ax-radius-pill);
  }
  .ax-ribbon--success.ax-ribbon--success.ax-ribbon--success {
    color: #fff;
    background: var(--ax-success-500);
  }
  .ax-ribbon--warning.ax-ribbon--warning.ax-ribbon--warning {
    color: #fff;
    background: var(--ax-warning-500);
  }
  .ax-ribbon--danger.ax-ribbon--danger.ax-ribbon--danger {
    color: #fff;
    background: var(--ax-danger-500);
  }

  /* ========================================================================
     21 · RATINGS — .ax-rating.ax-rating.ax-rating
     __star(--full/--half/--empty), __value. Amber fill (documented exception).
     Alpine: axRating (input).
     ======================================================================== */
  .ax-rating.ax-rating.ax-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--ax-space-1);
  }
  .ax-rating__star.ax-rating__star.ax-rating__star {
    --_r-size: 18px;
    width: var(--_r-size);
    height: var(--_r-size);
    color: var(--ax-text-subtle);
  }
  .ax-rating--sm.ax-rating--sm.ax-rating--sm .ax-rating__star.ax-rating__star.ax-rating__star {
    --_r-size: 14px;
  }
  .ax-rating--lg.ax-rating--lg.ax-rating--lg .ax-rating__star.ax-rating__star.ax-rating__star {
    --_r-size: 24px;
  }
  .ax-rating__star--full.ax-rating__star--full.ax-rating__star--full {
    color: var(--ax-warning-500);
    fill: currentColor;
  }
  .ax-rating__star--half.ax-rating__star--half.ax-rating__star--half {
    color: var(--ax-warning-500);
  }
  .ax-rating__value.ax-rating__value.ax-rating__value {
    margin-inline-start: var(--ax-space-2);
    font-variant-numeric: tabular-nums;
    font-size: var(--ax-text-sm);
    color: var(--ax-text-muted);
  }
  .ax-rating--input.ax-rating--input.ax-rating--input .ax-rating__star.ax-rating__star.ax-rating__star {
    cursor: pointer;
    transition: color var(--ax-motion-instant) var(--ax-ease-standard);
  }
  .ax-rating--input.ax-rating--input.ax-rating--input .ax-rating__star.ax-rating__star.ax-rating__star.is-preview,
  .ax-rating--input.ax-rating--input.ax-rating--input .ax-rating__star.ax-rating__star.ax-rating__star.is-selected {
    color: var(--ax-warning-500);
    fill: currentColor;
  }

  /* ========================================================================
     22 · ACCORDION / COLLAPSE — .ax-accordion.ax-accordion.ax-accordion / .ax-collapse.ax-collapse.ax-collapse
     __item/__header/__title/__chevron/__panel. --bordered/--flush.
     Alpine: axCollapse / axAccordion.
     ======================================================================== */
  .ax-accordion.ax-accordion.ax-accordion {
    display: flex;
    flex-direction: column;
  }
  .ax-accordion__item.ax-accordion__item.ax-accordion__item {
    border-bottom: 1px solid var(--ax-border);
  }
  .ax-accordion__item.ax-accordion__item.ax-accordion__item:last-child {
    border-bottom: 0;
  }
  .ax-accordion__header.ax-accordion__header.ax-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ax-space-3);
    width: 100%;
    min-height: 48px;
    padding: var(--ax-space-3) var(--ax-space-4);
    font-weight: var(--ax-weight-medium);
    color: var(--ax-text-strong);
    text-align: start;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background var(--ax-motion-instant) var(--ax-ease-standard);
  }
  .ax-accordion__header.ax-accordion__header.ax-accordion__header:hover {
    background: var(--ax-fill-hover);
  }
  .ax-accordion__title.ax-accordion__title.ax-accordion__title {
    flex: 1 1 auto;
    min-width: 0;
  }
  .ax-accordion__chevron.ax-accordion__chevron.ax-accordion__chevron {
    flex: 0 0 auto;
    width: var(--ax-icon-sm);
    height: var(--ax-icon-sm);
    color: var(--ax-text-subtle);
    transition: transform var(--ax-motion-base) var(--ax-ease-standard);
  }
  .ax-accordion__header.ax-accordion__header.ax-accordion__header[aria-expanded="true"] {
    background: var(--ax-fill-hover);
  }
  .ax-accordion__header.ax-accordion__header.ax-accordion__header[aria-expanded="true"] .ax-accordion__chevron.ax-accordion__chevron.ax-accordion__chevron {
    transform: rotate(180deg);
  }
  .ax-accordion__panel.ax-accordion__panel.ax-accordion__panel {
    padding: 0 var(--ax-space-4) var(--ax-space-5);
    color: var(--ax-text-muted);
    font-size: var(--ax-text-sm);
  }
  .ax-accordion__panel.ax-accordion__panel.ax-accordion__panel[hidden] {
    display: none;
  }
  .ax-accordion--bordered.ax-accordion--bordered.ax-accordion--bordered {
    gap: var(--ax-space-3);
  }
  .ax-accordion--bordered.ax-accordion--bordered.ax-accordion--bordered .ax-accordion__item.ax-accordion__item.ax-accordion__item {
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-md);
    overflow: hidden;
    background: var(--ax-surface);
  }
  .ax-collapse.ax-collapse.ax-collapse[hidden] {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .ax-accordion__chevron.ax-accordion__chevron.ax-accordion__chevron {
      transition: none;
    }
  }

  /* ========================================================================
     23 · TOOLTIP — .ax-tooltip.ax-tooltip.ax-tooltip (inverse dark bubble default)
     __text/__arrow/__key. placements --top/--bottom/--start/--end.
     Alpine: axTooltip.
     ======================================================================== */
  .ax-tooltip.ax-tooltip.ax-tooltip {
    position: absolute;
    z-index: var(--ax-z-dropdown);
    max-width: 240px;
    padding: var(--ax-space-2) var(--ax-space-3);
    font-size: var(--ax-text-xs);
    line-height: var(--ax-leading-xs);
    color: var(--ax-text-strong);
    background: var(--ax-surface-overlay);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-sm);
    box-shadow: var(--ax-shadow-md);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    pointer-events: none;
  }
  .ax-tooltip--inverse.ax-tooltip--inverse.ax-tooltip--inverse {
    color: var(--ax-canvas);
    background: var(--ax-text-strong);
    border-color: transparent;
  }
  [data-ax-theme="dark"] .ax-tooltip--inverse.ax-tooltip--inverse.ax-tooltip--inverse {
    color: var(--ax-text-strong);
    background: var(--ax-surface-overlay);
    border-color: var(--ax-border);
  }
  .ax-tooltip__arrow.ax-tooltip__arrow.ax-tooltip__arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
    border: inherit;
    transform: rotate(45deg);
  }
  .ax-tooltip__key.ax-tooltip__key.ax-tooltip__key {
    margin-inline-start: var(--ax-space-2);
    padding: 1px 5px;
    font-family: var(--ax-font-mono);
    font-size: var(--ax-text-2xs);
    border: 1px solid var(--ax-border-strong);
    border-radius: var(--ax-radius-xs);
  }

  /* ========================================================================
     24 · POPOVER — .ax-popover.ax-popover.ax-popover (mini glass card)
     __panel/__header/__body/__footer/__arrow. Alpine: axPopover.
     ======================================================================== */
  .ax-popover.ax-popover.ax-popover {
    position: relative;
    display: inline-flex;
  }
  .ax-popover__panel.ax-popover__panel.ax-popover__panel {
    position: absolute;
    z-index: var(--ax-z-dropdown);
    min-width: 200px;
    max-width: 360px;
    color: var(--ax-text);
    /* Opaque, no backdrop-filter (see .ax-menu.ax-menu.ax-menu / .ax-combobox__panel.ax-combobox__panel.ax-combobox__panel). */
    background: var(--ax-surface-solid);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-lg);
    box-shadow: var(--ax-shadow-md);
  }
  .ax-popover__header.ax-popover__header.ax-popover__header {
    padding: var(--ax-space-3) var(--ax-space-4);
    font-weight: var(--ax-weight-semibold);
    color: var(--ax-text-strong);
    border-bottom: 1px solid var(--ax-border);
  }
  .ax-popover__body.ax-popover__body.ax-popover__body {
    padding: var(--ax-space-4);
    font-size: var(--ax-text-sm);
  }
  .ax-popover__footer.ax-popover__footer.ax-popover__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--ax-space-2);
    padding: var(--ax-space-3) var(--ax-space-4);
    border-top: 1px solid var(--ax-border);
  }
  .ax-popover__arrow.ax-popover__arrow.ax-popover__arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--ax-surface-overlay);
    border: 1px solid var(--ax-border);
    transform: rotate(45deg);
  }

  /* ========================================================================
     25 · TABLES — .ax-table.ax-table.ax-table (wrap + base/striped/bordered/hover/compact)
     sticky header, selected row = accent-wash + accent marker, status pills.
     Alpine: axTableSelect, sticky shadow toggle, column-vis via axDropdown.
     ======================================================================== */
  .ax-table-wrap.ax-table-wrap.ax-table-wrap {
    position: relative;
    width: 100%;
    overflow-x: auto;
  }
  .ax-table.ax-table.ax-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ax-text-sm);
    color: var(--ax-text);
  }
  .ax-table__head.ax-table__head.ax-table__head {
    background: var(--ax-surface-subtle);
  }
  .ax-table__th.ax-table__th.ax-table__th {
    padding: var(--ax-space-3) var(--ax-space-4);
    text-align: start;
    font-size: var(--ax-text-2xs);
    font-weight: var(--ax-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ax-text-muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--ax-border-strong);
  }
  .ax-table__td.ax-table__td.ax-table__td {
    padding: var(--ax-space-3) var(--ax-space-4);
    border-bottom: 1px solid var(--ax-border);
    vertical-align: middle;
  }
  .ax-table__td--num.ax-table__td--num.ax-table__td--num,
  .ax-table__th--num.ax-table__th--num.ax-table__th--num {
    text-align: end;
    font-family: var(--ax-font-mono);
    font-variant-numeric: tabular-nums;
  }
  .ax-table__foot.ax-table__foot.ax-table__foot {
    background: var(--ax-surface-subtle);
  }
  .ax-table__foot.ax-table__foot.ax-table__foot td {
    padding: var(--ax-space-3) var(--ax-space-4);
    border-top: 1px solid var(--ax-border-strong);
    font-weight: var(--ax-weight-semibold);
  }
  .ax-table--striped.ax-table--striped.ax-table--striped tbody tr:nth-child(even) {
    background: var(--ax-surface-subtle);
  }
  .ax-table--bordered.ax-table--bordered.ax-table--bordered .ax-table__th.ax-table__th.ax-table__th,
  .ax-table--bordered.ax-table--bordered.ax-table--bordered .ax-table__td.ax-table__td.ax-table__td {
    border: 1px solid var(--ax-border);
  }
  .ax-table--hover.ax-table--hover.ax-table--hover tbody tr:hover,
  .ax-table__row.ax-table__row.ax-table__row:hover {
    background: var(--ax-fill-hover);
  }
  .ax-table--compact.ax-table--compact.ax-table--compact .ax-table__th.ax-table__th.ax-table__th,
  .ax-table--compact.ax-table--compact.ax-table--compact .ax-table__td.ax-table__td.ax-table__td {
    padding: var(--ax-space-2) var(--ax-space-3);
  }
  .ax-table--sticky.ax-table--sticky.ax-table--sticky .ax-table__head.ax-table__head.ax-table__head {
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .ax-table--sticky.ax-table--sticky.ax-table--sticky.is-stuck .ax-table__head.ax-table__head.ax-table__head {
    box-shadow: var(--ax-shadow-sm);
  }
  .ax-table__row.ax-table__row.ax-table__row.is-selected,
  .ax-table__row.ax-table__row.ax-table__row[aria-selected="true"] {
    background: var(--ax-accent-wash);
  }
  .ax-table__row.ax-table__row.ax-table__row.is-selected .ax-table__td.ax-table__td.ax-table__td:first-child,
  .ax-table__row.ax-table__row.ax-table__row[aria-selected="true"] .ax-table__td.ax-table__td.ax-table__td:first-child {
    box-shadow: inset 2px 0 0 var(--ax-accent);
  }
  .ax-table__row.ax-table__row.ax-table__row:focus-visible {
    outline: 2px solid var(--ax-focus-ring);
    outline-offset: -2px;
  }
  .ax-table__row--success.ax-table__row--success.ax-table__row--success {
    background: var(--ax-success-50);
  }
  .ax-table__row--warning.ax-table__row--warning.ax-table__row--warning {
    background: var(--ax-warning-50);
  }
  .ax-table__row--danger.ax-table__row--danger.ax-table__row--danger {
    background: var(--ax-danger-50);
  }
  .ax-table__th--sortable.ax-table__th--sortable.ax-table__th--sortable {
    cursor: pointer;
    user-select: none;
  }
  .ax-table__th--sortable.ax-table__th--sortable.ax-table__th--sortable:hover {
    color: var(--ax-text-strong);
  }
  .ax-table__sort.ax-table__sort.ax-table__sort {
    margin-inline-start: var(--ax-space-1);
    width: var(--ax-icon-xs);
    height: var(--ax-icon-xs);
    opacity: 0.5;
    vertical-align: middle;
  }
  .ax-table__th.ax-table__th.ax-table__th[aria-sort] .ax-table__sort.ax-table__sort.ax-table__sort {
    opacity: 1;
    color: var(--ax-accent);
  }
  .ax-table__status.ax-table__status.ax-table__status {
    display: inline-flex;
    align-items: center;
    gap: var(--ax-space-1);
    padding: 2px var(--ax-space-2);
    font-size: var(--ax-text-2xs);
    font-weight: var(--ax-weight-semibold);
    border-radius: var(--ax-radius-pill);
  }

  /* ========================================================================
     26 · FORMS — fields, inputs, selects, textarea, checks/radios/switch,
     input-group, range, file/dropzone, combobox, labels/help/error, validation.
     Alpine: axCombobox, axRange, axFileDrop (where noted).
     ======================================================================== */

  /* — field wrapper — */
  .ax-field.ax-field.ax-field {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-2);
  }
  .ax-field__label.ax-field__label.ax-field__label,
  .ax-label.ax-label.ax-label {
    font-size: var(--ax-text-sm);
    font-weight: var(--ax-weight-medium);
    color: var(--ax-text-strong);
  }
  .ax-field__required.ax-field__required.ax-field__required {
    color: var(--ax-danger-500);
  }
  .ax-field__hint.ax-field__hint.ax-field__hint,
  .ax-help.ax-help.ax-help {
    font-size: var(--ax-text-xs);
    color: var(--ax-text-subtle);
  }
  .ax-field__message.ax-field__message.ax-field__message {
    min-height: var(--ax-leading-xs);
    font-size: var(--ax-text-xs);
  }
  .ax-error.ax-error.ax-error,
  .ax-field__message--error.ax-field__message--error.ax-field__message--error {
    color: var(--ax-danger-500);
  }
  .ax-field__message--success.ax-field__message--success.ax-field__message--success {
    color: var(--ax-success-500);
  }

  /* — glass field recipe (input / textarea / select) — */
  .ax-input.ax-input.ax-input,
  .ax-textarea.ax-textarea.ax-textarea,
  .ax-select.ax-select.ax-select {
    --_f-h: var(--ax-control-h);
    width: 100%;
    min-height: var(--_f-h);
    padding: 0 var(--ax-space-3);
    font-family: var(--ax-font-sans);
    font-size: var(--ax-text-sm);
    color: var(--ax-text);
    background: var(--ax-surface);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-sm);
    transition: border-color var(--ax-motion-instant) var(--ax-ease-standard),
      box-shadow var(--ax-motion-fast) var(--ax-ease-standard),
      background var(--ax-motion-instant) var(--ax-ease-standard);
  }
  .ax-textarea.ax-textarea.ax-textarea {
    padding: var(--ax-space-3);
    min-height: calc(var(--ax-space-10) + var(--ax-space-6));
    line-height: 1.5;
    resize: vertical;
  }
  .ax-input.ax-input.ax-input::placeholder,
  .ax-textarea.ax-textarea.ax-textarea::placeholder {
    color: var(--ax-text-disabled);
  }
  .ax-input.ax-input.ax-input:hover,
  .ax-textarea.ax-textarea.ax-textarea:hover,
  .ax-select.ax-select.ax-select:hover {
    border-color: var(--ax-border-strong);
  }
  .ax-input.ax-input.ax-input:focus-visible,
  .ax-textarea.ax-textarea.ax-textarea:focus-visible,
  .ax-select.ax-select.ax-select:focus-visible,
  .ax-input.ax-input.ax-input:focus,
  .ax-textarea.ax-textarea.ax-textarea:focus,
  .ax-select.ax-select.ax-select:focus {
    outline: none;
    border-color: var(--ax-accent);
    box-shadow: var(--ax-focus-shadow);
  }
  .ax-input.ax-input.ax-input:disabled,
  .ax-textarea.ax-textarea.ax-textarea:disabled,
  .ax-select.ax-select.ax-select:disabled {
    color: var(--ax-text-disabled);
    background: var(--ax-fill-hover);
    cursor: not-allowed;
  }
  .ax-input.ax-input.ax-input[readonly],
  .ax-textarea.ax-textarea.ax-textarea[readonly] {
    background: var(--ax-surface-subtle);
  }
  .ax-input--sm.ax-input--sm.ax-input--sm,
  .ax-select--sm.ax-select--sm.ax-select--sm {
    --_f-h: var(--ax-control-h-compact);
  }
  .ax-input--lg.ax-input--lg.ax-input--lg,
  .ax-select--lg.ax-select--lg.ax-select--lg {
    --_f-h: var(--ax-control-h-lg);
  }
  .ax-select.ax-select.ax-select {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: var(--ax-space-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A93A4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--ax-space-3) center;
  }
  [dir="rtl"] .ax-select.ax-select.ax-select {
    background-position: left var(--ax-space-3) center;
  }
  .ax-input.ax-input.ax-input.is-invalid,
  .ax-textarea.ax-textarea.ax-textarea.is-invalid,
  .ax-select.ax-select.ax-select.is-invalid,
  .ax-input.ax-input.ax-input[aria-invalid="true"],
  .ax-textarea.ax-textarea.ax-textarea[aria-invalid="true"] {
    border-color: var(--ax-danger-500);
  }
  .ax-input.ax-input.ax-input.is-invalid:focus-visible,
  .ax-textarea.ax-textarea.ax-textarea.is-invalid:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ax-danger-500) 26%, transparent);
  }
  .ax-input.ax-input.ax-input.is-valid,
  .ax-textarea.ax-textarea.ax-textarea.is-valid,
  .ax-select.ax-select.ax-select.is-valid {
    border-color: var(--ax-success-500);
  }

  /* — affixes (leading/trailing icon or button) — */
  .ax-field__control.ax-field__control.ax-field__control {
    position: relative;
    display: flex;
    align-items: center;
  }
  .ax-field__control.ax-field__control.ax-field__control .ax-input.ax-input.ax-input {
    flex: 1 1 auto;
  }
  .ax-input--with-leading-icon.ax-input--with-leading-icon.ax-input--with-leading-icon {
    padding-inline-start: var(--ax-space-8);
  }
  .ax-input--with-trailing.ax-input--with-trailing.ax-input--with-trailing {
    padding-inline-end: var(--ax-space-8);
  }
  .ax-field__affix.ax-field__affix.ax-field__affix {
    position: absolute;
    display: inline-flex;
    align-items: center;
    color: var(--ax-text-subtle);
    pointer-events: none;
  }
  .ax-field__affix--leading.ax-field__affix--leading.ax-field__affix--leading {
    inset-inline-start: var(--ax-space-3);
  }
  .ax-field__affix--trailing.ax-field__affix--trailing.ax-field__affix--trailing {
    inset-inline-end: var(--ax-space-3);
  }
  .ax-field__affix.ax-field__affix.ax-field__affix svg {
    width: var(--ax-icon-sm);
    height: var(--ax-icon-sm);
  }
  .ax-field__affix--button.ax-field__affix--button.ax-field__affix--button {
    pointer-events: auto;
    cursor: pointer;
    background: none;
    border: 0;
  }

  /* — floating label — */
  .ax-input--floating.ax-input--floating.ax-input--floating {
    position: relative;
  }

  /* — checkbox — */
  .ax-check.ax-check.ax-check {
    display: inline-flex;
    align-items: center;
    gap: var(--ax-space-2);
    cursor: pointer;
    min-height: var(--ax-control-h);
  }
  .ax-checkbox.ax-checkbox.ax-checkbox {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--ax-surface);
    border: 1px solid var(--ax-border-strong);
    border-radius: var(--ax-radius-xs);
    cursor: pointer;
    transition: background var(--ax-motion-instant) var(--ax-ease-standard),
      border-color var(--ax-motion-instant) var(--ax-ease-standard);
  }
  .ax-checkbox.ax-checkbox.ax-checkbox:hover {
    border-color: var(--ax-accent);
  }
  .ax-checkbox.ax-checkbox.ax-checkbox:checked,
  .ax-checkbox.ax-checkbox.ax-checkbox:indeterminate {
    background: var(--ax-accent);
    border-color: var(--ax-accent);
  }
  .ax-checkbox.ax-checkbox.ax-checkbox:checked::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }
  .ax-checkbox.ax-checkbox.ax-checkbox:indeterminate::after {
    content: "";
    position: absolute;
    inset-inline: 3px;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: #fff;
    border-radius: 1px;
  }
  .ax-checkbox.ax-checkbox.ax-checkbox:focus-visible {
    outline: none;
    box-shadow: var(--ax-focus-shadow);
  }
  .ax-checkbox.ax-checkbox.ax-checkbox:disabled {
    background: var(--ax-fill-hover);
    border-color: var(--ax-border);
    cursor: not-allowed;
  }
  .ax-checkbox.ax-checkbox.ax-checkbox.is-invalid {
    border-color: var(--ax-danger-500);
  }

  /* — radio — */
  .ax-radio.ax-radio.ax-radio {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--ax-surface);
    border: 1px solid var(--ax-border-strong);
    border-radius: var(--ax-radius-pill);
    cursor: pointer;
    transition: border-color var(--ax-motion-instant) var(--ax-ease-standard);
  }
  .ax-radio.ax-radio.ax-radio:hover {
    border-color: var(--ax-accent);
  }
  .ax-radio.ax-radio.ax-radio:checked {
    border-color: var(--ax-accent);
  }
  .ax-radio.ax-radio.ax-radio:checked::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--ax-accent);
  }
  .ax-radio.ax-radio.ax-radio:focus-visible {
    outline: none;
    box-shadow: var(--ax-focus-shadow);
  }
  .ax-radio.ax-radio.ax-radio:disabled {
    background: var(--ax-fill-hover);
    cursor: not-allowed;
  }

  /* — switch (track → accent when on) — */
  .ax-switch.ax-switch.ax-switch {
    position: relative;
    flex: 0 0 auto;
    width: 36px;
    height: 20px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--ax-border-strong);
    border-radius: var(--ax-radius-pill);
    cursor: pointer;
    transition: background var(--ax-motion-fast) var(--ax-ease-standard);
  }
  .ax-switch.ax-switch.ax-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ax-surface-solid);
    box-shadow: var(--ax-shadow-sm);
    transition: transform var(--ax-motion-fast) var(--ax-ease-standard);
  }
  .ax-switch.ax-switch.ax-switch:checked {
    background: var(--ax-accent);
  }
  .ax-switch.ax-switch.ax-switch:checked::after {
    transform: translateX(16px);
  }
  [dir="rtl"] .ax-switch.ax-switch.ax-switch:checked::after {
    transform: translateX(-16px);
  }
  .ax-switch.ax-switch.ax-switch:focus-visible {
    outline: none;
    box-shadow: var(--ax-focus-shadow);
  }
  .ax-switch.ax-switch.ax-switch:disabled {
    background: var(--ax-fill-hover);
    cursor: not-allowed;
  }
  .ax-switch--sm.ax-switch--sm.ax-switch--sm {
    width: 30px;
    height: 16px;
  }
  .ax-switch--sm.ax-switch--sm.ax-switch--sm::after {
    width: 12px;
    height: 12px;
  }
  .ax-switch--sm.ax-switch--sm.ax-switch--sm:checked::after {
    transform: translateX(14px);
  }
  .ax-switch--lg.ax-switch--lg.ax-switch--lg {
    width: 44px;
    height: 24px;
  }
  .ax-switch--lg.ax-switch--lg.ax-switch--lg::after {
    width: 20px;
    height: 20px;
  }
  .ax-switch--lg.ax-switch--lg.ax-switch--lg:checked::after {
    transform: translateX(20px);
  }
  @media (prefers-reduced-motion: reduce) {
    .ax-switch.ax-switch.ax-switch,
    .ax-switch.ax-switch.ax-switch::after {
      transition: none;
    }
  }

  /* — input group — */
  .ax-input-group.ax-input-group.ax-input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-sm);
    overflow: hidden;
    background: var(--ax-surface);
  }
  .ax-input-group.ax-input-group.ax-input-group:hover {
    border-color: var(--ax-border-strong);
  }
  .ax-input-group.ax-input-group.ax-input-group:focus-within {
    border-color: var(--ax-accent);
    box-shadow: var(--ax-focus-shadow);
  }
  .ax-input-group.ax-input-group.ax-input-group .ax-input.ax-input.ax-input,
  .ax-input-group.ax-input-group.ax-input-group .ax-select.ax-select.ax-select {
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .ax-input-group.ax-input-group.ax-input-group .ax-input.ax-input.ax-input:focus-visible,
  .ax-input-group.ax-input-group.ax-input-group .ax-select.ax-select.ax-select:focus-visible {
    box-shadow: none;
  }
  .ax-input-group__addon.ax-input-group__addon.ax-input-group__addon {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--ax-space-3);
    font-size: var(--ax-text-sm);
    color: var(--ax-text-subtle);
    background: var(--ax-surface-subtle);
    white-space: nowrap;
  }
  .ax-input-group__addon.ax-input-group__addon.ax-input-group__addon:not(:last-child) {
    border-inline-end: 1px solid var(--ax-border);
  }
  .ax-input-group__addon.ax-input-group__addon.ax-input-group__addon:not(:first-child) {
    border-inline-start: 1px solid var(--ax-border);
  }
  .ax-input-group.ax-input-group.ax-input-group.is-invalid {
    border-color: var(--ax-danger-500);
  }

  /* — range slider — Alpine: axRange — */
  .ax-range.ax-range.ax-range {
    display: flex;
    align-items: center;
    gap: var(--ax-space-3);
    width: 100%;
  }
  .ax-range__track.ax-range__track.ax-range__track {
    position: relative;
    flex: 1 1 auto;
    height: 4px;
    background: var(--ax-fill-hover);
    border-radius: var(--ax-radius-pill);
  }
  .ax-range__fill.ax-range__fill.ax-range__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    background: var(--ax-accent);
    border-radius: inherit;
  }
  .ax-range__handle.ax-range__handle.ax-range__handle {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    background: var(--ax-surface-solid);
    border: 2px solid var(--ax-accent);
    border-radius: 50%;
    box-shadow: var(--ax-shadow-sm);
    cursor: grab;
    transition: width var(--ax-motion-instant) var(--ax-ease-standard),
      height var(--ax-motion-instant) var(--ax-ease-standard);
  }
  .ax-range__handle.ax-range__handle.ax-range__handle:hover,
  .ax-range__handle.ax-range__handle.ax-range__handle:active {
    width: 18px;
    height: 18px;
  }
  .ax-range__handle.ax-range__handle.ax-range__handle:focus-visible {
    outline: none;
    box-shadow: var(--ax-focus-shadow);
  }
  .ax-range__bubble.ax-range__bubble.ax-range__bubble {
    flex: 0 0 auto;
    min-width: 4ch;
    padding: 2px var(--ax-space-2);
    font-size: var(--ax-text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--ax-text-strong);
    background: var(--ax-surface-overlay);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-sm);
    box-shadow: var(--ax-shadow-md);
  }
  .ax-range--native.ax-range--native.ax-range--native {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--ax-fill-hover);
    border-radius: var(--ax-radius-pill);
  }
  .ax-range--native.ax-range--native.ax-range--native::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--ax-surface-solid);
    border: 2px solid var(--ax-accent);
    border-radius: 50%;
  }
  .ax-range--native.ax-range--native.ax-range--native::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--ax-surface-solid);
    border: 2px solid var(--ax-accent);
    border-radius: 50%;
  }

  /* — file upload / dropzone — Alpine: axFileDrop — */
  .ax-file.ax-file.ax-file {
    display: inline-flex;
  }
  .ax-dropzone.ax-dropzone.ax-dropzone {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-3);
  }
  .ax-dropzone__area.ax-dropzone__area.ax-dropzone__area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ax-space-2);
    padding: var(--ax-space-8);
    text-align: center;
    color: var(--ax-text-muted);
    background: var(--ax-surface);
    border: 1.5px dashed var(--ax-border-strong);
    border-radius: var(--ax-radius-md);
    cursor: pointer;
    transition: border-color var(--ax-motion-fast) var(--ax-ease-standard),
      background var(--ax-motion-fast) var(--ax-ease-standard);
  }
  .ax-dropzone__area.ax-dropzone__area.ax-dropzone__area svg {
    width: var(--ax-icon-lg);
    height: var(--ax-icon-lg);
    color: var(--ax-text-subtle);
  }
  .ax-dropzone.ax-dropzone.ax-dropzone.is-dragover .ax-dropzone__area.ax-dropzone__area.ax-dropzone__area {
    border-color: var(--ax-accent);
    background: var(--ax-accent-wash);
  }
  .ax-dropzone__list.ax-dropzone__list.ax-dropzone__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-2);
  }
  .ax-dropzone__file.ax-dropzone__file.ax-dropzone__file {
    display: flex;
    align-items: center;
    gap: var(--ax-space-3);
    padding: var(--ax-space-2) var(--ax-space-3);
    background: var(--ax-surface-subtle);
    border-radius: var(--ax-radius-sm);
  }
  .ax-dropzone__name.ax-dropzone__name.ax-dropzone__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--ax-text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ax-dropzone__remove.ax-dropzone__remove.ax-dropzone__remove {
    flex: 0 0 auto;
    color: var(--ax-text-subtle);
    background: none;
    border: 0;
    cursor: pointer;
  }
  .ax-dropzone__remove.ax-dropzone__remove.ax-dropzone__remove:hover {
    color: var(--ax-danger-500);
  }

  /* — combobox / enhanced select — Alpine: axCombobox — */
  .ax-combobox.ax-combobox.ax-combobox {
    position: relative;
    width: 100%;
  }
  .ax-combobox__trigger.ax-combobox__trigger.ax-combobox__trigger {
    display: flex;
    align-items: center;
    gap: var(--ax-space-2);
    width: 100%;
    min-height: var(--ax-control-h);
    padding: 0 var(--ax-space-3);
    font-size: var(--ax-text-sm);
    color: var(--ax-text);
    text-align: start;
    background: var(--ax-surface);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-sm);
    cursor: pointer;
  }
  .ax-combobox__trigger.ax-combobox__trigger.ax-combobox__trigger:hover {
    border-color: var(--ax-border-strong);
  }
  .ax-combobox__trigger.ax-combobox__trigger.ax-combobox__trigger[aria-expanded="true"] {
    border-color: var(--ax-accent);
    box-shadow: var(--ax-focus-shadow);
  }
  .ax-combobox__value.ax-combobox__value.ax-combobox__value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ax-combobox__caret.ax-combobox__caret.ax-combobox__caret {
    flex: 0 0 auto;
    width: var(--ax-icon-sm);
    height: var(--ax-icon-sm);
    color: var(--ax-text-subtle);
  }
  .ax-combobox__clear.ax-combobox__clear.ax-combobox__clear {
    color: var(--ax-text-subtle);
    background: none;
    border: 0;
    cursor: pointer;
  }
  .ax-combobox__panel.ax-combobox__panel.ax-combobox__panel {
    position: absolute;
    z-index: var(--ax-z-dropdown);
    inset-inline: 0;
    margin-top: var(--ax-space-1);
    max-height: 320px;
    overflow-y: auto;
    padding: var(--ax-space-2);
    /* Opaque surface, no backdrop-filter: the panel lives inside a glass card
       (a backdrop root), so its own backdrop-filter could only blur the card's
       flat surface, never the page — solid reads cleaner for option lists. */
    background: var(--ax-surface-solid);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-lg);
    box-shadow: var(--ax-shadow-md);
  }
  .ax-combobox__search.ax-combobox__search.ax-combobox__search {
    width: 100%;
    margin-bottom: var(--ax-space-2);
    padding: var(--ax-space-2) var(--ax-space-3);
    font-size: var(--ax-text-sm);
    color: var(--ax-text);
    background: var(--ax-surface);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-sm);
  }
  .ax-combobox__group-label.ax-combobox__group-label.ax-combobox__group-label {
    padding: var(--ax-space-2) var(--ax-space-3) var(--ax-space-1);
    font-size: var(--ax-text-2xs);
    font-weight: var(--ax-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ax-text-subtle);
  }
  .ax-combobox__option.ax-combobox__option.ax-combobox__option {
    display: flex;
    align-items: center;
    gap: var(--ax-space-2);
    padding: var(--ax-space-2) var(--ax-space-3);
    font-size: var(--ax-text-sm);
    color: var(--ax-text);
    border-radius: var(--ax-radius-md);
    cursor: pointer;
  }
  .ax-combobox__option.ax-combobox__option.ax-combobox__option:hover,
  .ax-combobox__option.ax-combobox__option.ax-combobox__option.is-active {
    background: var(--ax-fill-hover);
  }
  .ax-combobox__option.ax-combobox__option.ax-combobox__option.is-highlighted {
    position: relative;
    background: var(--ax-accent-wash);
  }
  .ax-combobox__option.ax-combobox__option.ax-combobox__option.is-highlighted::before {
    content: "";
    position: absolute;
    inset-block: 4px;
    inset-inline-start: 0;
    width: 2px;
    border-radius: 0 2px 2px 0;
    background: var(--ax-accent);
  }
  .ax-combobox__option.ax-combobox__option.ax-combobox__option[aria-selected="true"] {
    color: var(--ax-accent);
    font-weight: var(--ax-weight-medium);
  }
  .ax-combobox__empty.ax-combobox__empty.ax-combobox__empty {
    padding: var(--ax-space-3);
    font-size: var(--ax-text-sm);
    color: var(--ax-text-muted);
    text-align: center;
  }
  .ax-combobox__chips.ax-combobox__chips.ax-combobox__chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--ax-space-1);
  }

  /* — tags input — */
  .ax-tags.ax-tags.ax-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ax-space-1);
    min-height: var(--ax-control-h);
    padding: var(--ax-space-1) var(--ax-space-2);
    background: var(--ax-surface);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-sm);
  }
  .ax-tags.ax-tags.ax-tags:focus-within {
    border-color: var(--ax-accent);
    box-shadow: var(--ax-focus-shadow);
  }
  .ax-tags__input.ax-tags__input.ax-tags__input {
    flex: 1 1 80px;
    min-width: 80px;
    border: 0;
    background: transparent;
    color: var(--ax-text);
    font-size: var(--ax-text-sm);
    outline: none;
  }

  /* — password strength meter — */
  .ax-strength.ax-strength.ax-strength {
    display: flex;
    flex-direction: column;
    gap: var(--ax-space-1);
  }
  .ax-strength__bars.ax-strength__bars.ax-strength__bars {
    display: flex;
    gap: 4px;
  }
  .ax-strength__bar.ax-strength__bar.ax-strength__bar {
    flex: 1 1 0;
    height: 4px;
    background: var(--ax-fill-hover);
    border-radius: var(--ax-radius-pill);
  }
  .ax-strength__bar.ax-strength__bar.ax-strength__bar.is-weak {
    background: var(--ax-danger-500);
  }
  .ax-strength__bar.ax-strength__bar.ax-strength__bar.is-medium {
    background: var(--ax-warning-500);
  }
  .ax-strength__bar.ax-strength__bar.ax-strength__bar.is-strong {
    background: var(--ax-success-500);
  }
  .ax-strength__label.ax-strength__label.ax-strength__label {
    font-size: var(--ax-text-2xs);
    color: var(--ax-text-subtle);
  }

  /* — OTP — */
  .ax-otp.ax-otp.ax-otp {
    display: inline-flex;
    gap: var(--ax-space-2);
    max-inline-size: 100%;
  }
  .ax-otp__cell.ax-otp__cell.ax-otp__cell {
    width: 44px;
    /* 44px is the ideal, not a floor: six fixed cells plus five gaps need 304px,
       more than a 360px phone leaves inside a card, and the last cell was
       clipped. flex-shrink lets the row give way instead. */
    flex: 0 1 44px;
    min-inline-size: 0;
    height: 48px;
    text-align: center;
    font-family: var(--ax-font-mono);
    font-size: var(--ax-text-lg);
    color: var(--ax-text-strong);
    background: var(--ax-surface);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-sm);
  }
  .ax-otp__cell.ax-otp__cell.ax-otp__cell:focus-visible {
    outline: none;
    border-color: var(--ax-accent);
    box-shadow: var(--ax-focus-shadow);
  }

  /* ========================================================================
     27 · SEGMENT — .ax-segment.ax-segment.ax-segment (theme/dir/density segmented toggles)
     Used by customizer + header. Active = accent-wash + accent text.
     Alpine: none (buttons set data-ax-* / aria-pressed).
     ======================================================================== */
  .ax-segment.ax-segment.ax-segment {
    display: inline-flex;
    align-items: center;
    gap: var(--ax-space-1);
    padding: var(--ax-space-1);
    background: var(--ax-fill-hover);
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-md);
  }
  .ax-segment__option.ax-segment__option.ax-segment__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ax-space-1);
    min-height: 30px;
    padding: 0 var(--ax-space-3);
    font-size: var(--ax-text-xs);
    font-weight: var(--ax-weight-medium);
    color: var(--ax-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--ax-radius-sm);
    cursor: pointer;
    transition: background var(--ax-motion-instant) var(--ax-ease-standard),
      color var(--ax-motion-instant) var(--ax-ease-standard);
  }
  .ax-segment__option.ax-segment__option.ax-segment__option svg {
    width: var(--ax-icon-sm);
    height: var(--ax-icon-sm);
  }
  .ax-segment__option.ax-segment__option.ax-segment__option:hover {
    color: var(--ax-text-strong);
  }
  .ax-segment__option.ax-segment__option.ax-segment__option[aria-pressed="true"],
  .ax-segment__option.ax-segment__option.ax-segment__option.is-active,
  .ax-segment__option.ax-segment__option.ax-segment__option[aria-checked="true"] {
    color: var(--ax-accent);
    background: var(--ax-accent-wash);
    box-shadow: var(--ax-shadow-sm);
  }

  /* ========================================================================
     28 · CHART WRAPPER — .ax-chart.ax-chart.ax-chart (JS-mounted box: ApexCharts/Chart.js/ECharts)
     Sized container + legend + a11y data-mirror table styling.
     Alpine: none (charts init by src/js/charts/* via data-ax-chart-*).
     ======================================================================== */
  .ax-chart.ax-chart.ax-chart {
    position: relative;
    width: 100%;
    min-height: 120px;
  }
  .ax-chart__legend.ax-chart__legend.ax-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ax-space-3);
    margin-top: var(--ax-space-3);
    font-size: var(--ax-text-xs);
    color: var(--ax-text-muted);
  }
  .ax-chart__legend-item.ax-chart__legend-item.ax-chart__legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--ax-space-1);
  }
  .ax-chart__swatch.ax-chart__swatch.ax-chart__swatch {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex: 0 0 auto;
  }
  .ax-chart__table.ax-chart__table.ax-chart__table[hidden] {
    display: none;
  }
  .ax-chart--sparkline.ax-chart--sparkline.ax-chart--sparkline {
    min-height: 40px;
  }

  /* ========================================================================
     29 · INLINE TYPOGRAPHY HELPERS — link/code/kbd/mark/eyebrow/truncate
     (consume role tokens; pages use these inline)
     ======================================================================== */
  .ax-link.ax-link.ax-link {
    color: var(--ax-link);
    text-decoration: none;
  }
  .ax-link.ax-link.ax-link:hover {
    color: var(--ax-accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .ax-code.ax-code.ax-code {
    font-family: var(--ax-font-mono);
    font-size: 0.9em;
    padding: 1px 5px;
    color: var(--ax-text-strong);
    background: var(--ax-fill-hover);
    border-radius: var(--ax-radius-xs);
  }
  .ax-kbd.ax-kbd.ax-kbd {
    font-family: var(--ax-font-mono);
    font-size: var(--ax-text-2xs);
    padding: 2px 6px;
    color: var(--ax-text);
    background: var(--ax-surface-subtle);
    border: 1px solid var(--ax-border-strong);
    border-radius: var(--ax-radius-xs);
    box-shadow: 0 1px 0 var(--ax-border-strong);
  }
  .ax-mark.ax-mark.ax-mark {
    background: var(--ax-accent-wash);
    color: var(--ax-text-strong);
    border-radius: 2px;
    padding: 0 2px;
  }
  .ax-eyebrow.ax-eyebrow.ax-eyebrow {
    font-size: var(--ax-text-2xs);
    font-weight: var(--ax-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ax-text-subtle);
  }
  .ax-text-truncate.ax-text-truncate.ax-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

/* END ORIGINAL VIREO COMPONENTS */
/* Zero Graus compatibility: original Vireo components, existing JS/access hooks.
   Native dialogs keep browser focus management and existing CSRF confirmations. */
.ax-card.panel{display:block;overflow:visible}
.ax-card.panel .ax-card__title{display:flex;align-items:center;gap:10px}
.ax-modal__dialog.app-dialog:not([open]){display:none!important}
.ax-modal__dialog.app-dialog[open]{display:flex;position:fixed;inset:0;margin:auto;width:min(1040px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px)}
.ax-modal__dialog.app-dialog .dialog-content{overflow-y:auto;min-height:0}
.ax-modal__dialog.app-dialog .dialog-header{align-items:center}
.ax-modal__dialog.app-dialog .dialog-actions{flex-shrink:0}
.ax-modal__dialog.app-dialog .dialog-close{flex-shrink:0}
.ax-field__label.form-field-label{display:flex;align-items:center;gap:8px}
.ax-alert.alert{display:block}
.ax-btn.btn{white-space:normal;min-height:42px;line-height:1.35;padding-block:10px}
.ax-btn.theme-toggle,.ax-btn.sidebar-toggle{min-height:40px;padding:10px;min-width:40px}
.ax-input[type=file]{padding:10px;line-height:1.5}
.ax-table-wrap.table-wrap{overflow-x:auto}
.ax-table.ax-table.ax-table .ax-table__td{vertical-align:top}
.ax-table__td small{display:block;margin-top:4px}
.ax-card__title.panel-title{font-size:15px;margin-bottom:20px}
[data-theme=dark] .ax-input,[data-theme=dark] .ax-select,[data-theme=dark] .ax-textarea{color-scheme:dark}
@media(max-width:767px){.ax-btn.btn{min-height:44px}.ax-input.ax-input,.ax-select.ax-select,.ax-textarea.ax-textarea{min-height:44px}.ax-modal__dialog.app-dialog[open]{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}.ax-modal__header{padding:16px}.ax-modal__body{padding:16px}.ax-modal__footer{padding:16px}}

.app-shell .ax-breadcrumb{margin-bottom:16px}.app-shell .ax-breadcrumb__list{display:flex;align-items:center;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}.app-shell .ax-breadcrumb__sep .ui-icon{width:12px;height:12px}.sidebar-filter{margin:8px 0 10px}.sidebar-filter-status{font-size:11px;margin:4px 10px}.sidebar [hidden]{display:none!important}.app-shell[data-sidebar-compact] .sidebar-filter,.app-shell[data-sidebar-compact] .sidebar-filter-status{display:none}.ax-tabs__list.staff-tabs{flex-wrap:wrap}.ax-tabs__tab[aria-current=page]{color:var(--ax-accent);background:var(--ax-accent-wash)}

.accounting-extra-filters{grid-column:1/-1;margin:0;border:1px solid var(--ax-border);border-radius:14px;padding:0}.accounting-extra-filters>summary{min-height:44px;padding:12px 16px;cursor:pointer}.accounting-extra-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0 16px 16px}.accounting-extra-grid label{margin:0}@media(max-width:767px){.accounting-extra-grid{grid-template-columns:1fr}}

/* Preserve existing layout contracts while Vireo supplies the surfaces. */
.ax-card.ax-card.panel{display:block;overflow:visible}
.ax-card.ax-card.panel.accounting-filters{display:grid}
.ax-card.ax-card.panel.accounting-stat{display:flex}
.ax-card.ax-card.panel.filters{display:flex}
.ax-btn.ax-btn.btn{white-space:normal;min-height:42px;line-height:1.35;padding-block:10px}
@media(max-width:767px){.ax-btn.ax-btn.btn{min-height:44px}.ax-input.ax-input.ax-input.ax-input,.ax-select.ax-select.ax-select.ax-select,.ax-textarea.ax-textarea.ax-textarea.ax-textarea{min-height:44px}}

.ax-tabs__tab.ax-tabs__tab[aria-current=page]{background:var(--ax-accent-wash);color:var(--ax-accent);font-weight:600}.ax-card.ax-card.panel.accounting-stat{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px}.ax-alert.ax-alert.staff-month-reminder{align-items:center;flex-wrap:wrap}.ax-alert.ax-alert.staff-month-reminder>div{flex:1;min-width:180px}@media(max-width:767px){.ax-alert.ax-alert.staff-month-reminder>.btn{width:100%}}

.ax-btn.btn.primary{color:var(--ax-on-accent);background:var(--ax-gradient-accent);border-color:transparent}.ax-btn.btn.danger{color:var(--ax-danger-600);background:var(--ax-danger-50);border-color:var(--ax-danger-300)}[data-theme=dark] .ax-btn.btn.danger{color:var(--ax-danger-300);background:var(--ax-danger-50)}

.ax-card.accounting-stat strong{color:var(--ax-text-strong)}.ax-card.accounting-stat small{color:var(--ax-text-muted)}@media(max-width:767px){.app-shell .ax-btn.sidebar-toggle{display:none!important}}
.zg-dropdown{position:relative;margin:0;flex:none}.zg-dropdown>summary{list-style:none;cursor:pointer;gap:8px}.zg-dropdown>summary::-webkit-details-marker{display:none}.zg-dropdown>summary>.ui-icon:last-child{width:13px;height:13px;transform:rotate(90deg)}.zg-dropdown-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;z-index:45}.zg-dropdown:not([open])>.zg-dropdown-menu{display:none!important}.zg-dropdown .ax-menu__item{display:flex;align-items:center;gap:10px;text-decoration:none}.zg-dropdown .ax-menu__item .ui-icon{width:17px;height:17px;flex-shrink:0}
.zg-toast-region{position:fixed;right:24px;top:84px;width:min(420px,calc(100vw - 32px));z-index:100;pointer-events:none}.zg-toast-region .ax-toast{pointer-events:auto}.zg-toast-region .ax-toast__icon .ui-icon{width:20px;height:20px}.zg-toast-region .ax-toast__dismiss .ui-icon{width:16px;height:16px;transform:rotate(45deg)}
.zg-pagination{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:20px;flex-wrap:wrap}.zg-pagination .ax-pagination__summary{margin-right:auto}.zg-pagination [aria-disabled=true]{opacity:.5;cursor:default}.zg-pagination .ax-pagination__page[aria-current=page]{background:var(--ax-accent-wash);color:var(--ax-accent);font-weight:700}
#zg-dialog.zg-confirm[open]{width:min(520px,calc(100% - 32px))}
.account-settings-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start}.account-settings-layout>*{min-width:0}.account-settings-aside .grid{grid-template-columns:1fr;gap:16px}.account-settings-aside strong{overflow-wrap:anywhere}
.job-detail-layout{display:grid;gap:24px;align-items:start}.job-detail-layout>*{min-width:0}.job-detail-aside .phase-fields{grid-template-columns:1fr}.job-detail-aside .phase-field{padding:14px}.job-detail-aside .phase-field h3{font-size:12px;margin-bottom:10px}.job-detail-aside .phase-field strong{font-size:13px}
@media(min-width:1200px){.job-detail-layout{grid-template-columns:minmax(0,1fr) 260px}.job-detail-main{grid-column:1;grid-row:1}.job-detail-aside{grid-column:2;grid-row:1}}
@media(max-width:900px){.account-settings-layout{grid-template-columns:1fr}.account-settings-aside .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.job-detail-aside .phase-fields{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){.zg-toast-region{right:16px;top:16px}.zg-pagination{gap:5px;justify-content:center}.zg-pagination .ax-pagination__summary{width:100%;text-align:center}.zg-pagination .ax-pagination__page{min-width:36px}.account-settings-aside .grid,.job-detail-aside .phase-fields{grid-template-columns:1fr}.zg-dropdown-menu{max-width:calc(100vw - 32px)}}

.ax-tabs__tab.ax-tabs__tab[aria-current=location]{background:var(--ax-accent-wash);color:var(--ax-accent);font-weight:600}.job-record-nav{flex-wrap:wrap}.job-record-nav .ax-tabs__tab{padding:10px 12px}

.job-detail-aside .schedule-heading{flex-wrap:wrap;gap:8px}.job-detail-aside .schedule-heading h2{font-size:13px;white-space:nowrap;overflow-wrap:normal;margin:0}

.job-list-identity{display:flex;gap:10px;align-items:flex-start;min-width:180px}.job-list-icon{width:32px;height:32px;min-width:32px;border-radius:10px;background:var(--ax-accent-wash);color:var(--ax-accent)}.job-list-icon .ui-icon{width:17px;height:17px}.job-list-identity>div{min-width:0}

.zg-toast-region .ax-toast .ax-toast__dismiss{opacity:1;min-width:32px;min-height:32px;align-items:center;justify-content:center;border-radius:8px}.zg-toast-region .ax-toast .ax-toast__dismiss:hover{background:var(--ax-fill-hover)}@media(max-width:767px){.zg-toast-region .ax-toast .ax-toast__dismiss{min-width:44px;min-height:44px}}

/* Vireo native form adapters: readable labels and local file selection. */
input.zg-file-control.zg-file-control[type=file]{width:100%;max-width:100%;min-width:0;padding:12px;border:1px dashed var(--ax-border-strong);border-radius:var(--ax-radius-md);background:var(--ax-surface);color:var(--ax-text-muted);font-size:13px;line-height:1.5}
input.zg-file-control[type=file]::file-selector-button{font:inherit;font-weight:600;border:1px solid var(--ax-border);border-radius:var(--ax-radius-md);padding:8px 12px;margin-right:12px;background:var(--ax-surface-raised);color:var(--ax-text-strong);cursor:pointer;min-height:40px}
.zg-file-list:empty{display:none}.zg-file-list.zg-file-list{margin:8px 0 0;padding:0;list-style:none;width:100%;min-width:0}
.zg-file-list .ax-dropzone__file.ax-dropzone__file{display:flex;gap:12px;align-items:center;min-width:0;max-width:100%}
.zg-file-list .ax-dropzone__name.ax-dropzone__name{min-width:0;white-space:normal;overflow-wrap:anywhere;flex:1}.zg-file-list small{flex-shrink:0;color:var(--ax-text-muted)}
.ax-field.form-field .ax-field__message:empty{display:none}.ax-field.form-field .ax-field__message{margin-top:4px;font-size:12px;line-height:1.5}
.choice-search input[data-choice-search]{min-height:42px;border-radius:var(--ax-radius-md)}
@media(max-width:480px){input.zg-file-control[type=file]::file-selector-button{min-height:44px}.zg-file-list .ax-dropzone__file.ax-dropzone__file{flex-wrap:wrap}}

/* Rectangular navigation selection on desktop and mobile. */
.app-shell .mobile-menu .nav-link{border-radius:0}

/* Inline status: one subtle frame and one accessible focus indicator. */
.app-shell .job-status-control.job-status-control{border:1px solid var(--ui-line);border-radius:6px;background:var(--ui-surface);padding:2px 8px;box-shadow:none}
.app-shell .job-status-control.job-status-control>select{border:0;border-radius:0;background:transparent;color:inherit;box-shadow:none;min-height:36px;font-size:13px}
.app-shell .job-status-control.job-status-control:focus-within{outline:2px solid var(--ui-accent);outline-offset:2px}
.app-shell .job-status-control.job-status-control>select:focus{outline:none;box-shadow:none}

/* Application layout adapters outrank the original card defaults. */
.app-shell .ax-card.panel.filters{display:flex;flex-direction:row;align-items:flex-end;justify-content:flex-start;flex-wrap:wrap;gap:16px}
.app-shell .ax-card.panel.filters>label,.app-shell .ax-card.panel.filters>.field-choice-shell{flex:1 1 240px;min-width:0;margin-bottom:0}
.app-shell .ax-card.panel.filters>.btn{flex:0 0 auto;align-self:flex-end;margin:0}
.app-shell .ax-card.panel.filters .field-choice-shell>label{margin-bottom:0}
.app-shell .ax-card__title.panel-title{margin:0 0 20px;line-height:1.5}
.app-shell .ax-btn.ax-btn--primary.btn.primary{background:#087568;color:#fff;border-color:#087568;box-shadow:none}
.app-shell .ax-btn.ax-btn--primary.btn.primary:hover{background:#065f55;border-color:#065f55;color:#fff}
.app-shell .ax-btn.ax-btn--primary.btn.primary:disabled{background:var(--ui-line);border-color:var(--ui-line);color:var(--ui-muted);opacity:1}
@media(max-width:767px){.app-shell .ax-card.panel.filters{flex-direction:column;align-items:stretch}.app-shell .ax-card.panel.filters>label,.app-shell .ax-card.panel.filters>.field-choice-shell{flex:auto;width:100%}.app-shell .ax-card.panel.filters>.btn{align-self:stretch;width:100%}}

.quote-event-dates{display:grid;gap:12px;grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}.quote-event-dates>*{min-width:0}.quote-event-dates [hidden]{display:none!important}@media(max-width:767px){.quote-event-dates{grid-template-columns:1fr}}

/* Quote gallery: bounded cards keep each image and its controls together. */
.quote-gallery-section .quote-gallery-heading .panel-title{display:flex;align-items:center;gap:8px;margin-bottom:8px}.quote-gallery-heading{margin-bottom:24px}.quote-gallery-heading p{margin:0}
.quote-gallery-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:16px;margin-bottom:24px}.quote-gallery-card{min-width:0;border:1px solid var(--ax-border);border-radius:12px;overflow:hidden;background:var(--ax-surface)}
.quote-gallery-thumbnail{height:180px;padding:16px;display:flex;align-items:center;justify-content:center;background:var(--ax-surface-raised);border-bottom:1px solid var(--ax-border)}.quote-gallery-thumbnail img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.quote-gallery-controls{padding:16px}.quote-gallery-controls h3{font-size:13px;margin:0 0 16px}.quote-gallery-controls form{margin:0}.quote-gallery-controls .form-field{margin-bottom:12px}.quote-gallery-controls form>.btn{width:100%;margin:0}.quote-gallery-remove{border-top:1px solid var(--ax-border);margin-top:14px;padding-top:12px}.quote-gallery-remove>.btn{width:100%}
.quote-gallery-upload{border-top:1px solid var(--ax-border);padding-top:20px}.quote-gallery-upload h3{display:flex;align-items:center;gap:8px;font-size:14px;margin:0 0 12px}.quote-gallery-file{display:block;margin:0}.quote-gallery-upload-footer p{margin:12px 0;font-size:12px}.quote-gallery-upload form>.btn{margin:0}.quote-gallery-empty{padding:16px 0}
@media(min-width:1200px){.quote-gallery-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:480px){.quote-gallery-cards{grid-template-columns:1fr}.quote-gallery-upload form>.btn{width:100%}}

.quote-gallery-thumbnail.quote-image-stage{height:210px;align-items:center;overflow:visible;padding:20px 16px}.quote-image-frame{position:relative;min-width:0;display:flex;align-items:center;justify-content:center;outline:1px dashed var(--ax-border-strong);outline-offset:4px}.quote-image-frame img{width:100%;height:auto;max-height:166px;object-fit:contain}.quote-image-handle{position:absolute;right:-13px;bottom:-13px;width:28px;height:28px;min-height:28px;padding:0;border:2px solid white;border-radius:5px;background:#087568;color:white;cursor:ew-resize;touch-action:none;line-height:24px;font-size:18px}.quote-image-handle[hidden],.quote-image-range[hidden]{display:none!important}.quote-image-handle:focus-visible{outline:3px solid var(--ui-accent);outline-offset:3px}.quote-image-range{display:block;margin:0 0 12px}.app-shell .quote-image-range input[type=range]{width:100%;min-height:36px;padding:0;border:0;accent-color:#087568;box-shadow:none;background:transparent}.quote-image-size-help{font-size:12px;line-height:1.5;min-height:36px;margin:0 0 12px}@media(pointer:coarse){.quote-image-handle{width:44px;height:44px;line-height:40px;right:-18px;bottom:-18px}}

/* Allow real upscaling: intrinsic pixels and thumbnail height never cap the image. */
.quote-gallery-thumbnail.quote-image-stage{height:auto;min-height:210px;padding:24px 20px}
.quote-image-stage .quote-image-frame{flex:0 0 auto}
.quote-image-stage .quote-image-frame img{display:block;width:100%;height:auto;max-width:none;max-height:none;flex:none}

/* Printed proposal: compact hierarchy and restrained colour. */
.quote-preview-paper .quote-preview-sheet-content>h2{font-size:18px;font-weight:400;color:#53616b;letter-spacing:1.3px;margin:0 0 6px;line-height:1.3}
.quote-preview-paper .quote-preview-code{margin:0 0 8px;color:#17262d}.quote-preview-paper .quote-preview-code small{font-size:9px;color:#64717b;font-weight:400}.quote-preview-paper .quote-preview-code strong{font-size:18px;line-height:1.4;font-weight:700}
.quote-preview-paper .quote-preview-dates{font-size:10px;color:#64717b;margin:0 0 20px;line-height:1.5}
.quote-preview-paper .quote-preview-sheet-content>h3{font-size:18px;line-height:1.3;color:#17262d;margin:0 0 7px;font-weight:700;letter-spacing:0}
.quote-preview-paper .quote-preview-sheet-content>h3+.quote-preview-dates{font-size:11px;margin:0 0 16px;color:#53616b}
.quote-preview-paper .quote-preview-customer{border-left:3px solid #087568;padding:10px 14px;background:#f4f8f7;margin:16px 0 22px;color:#17262d;font-size:11px;line-height:1.5}.quote-preview-customer>small{display:block;font-size:8px;letter-spacing:1px;color:#64717b;margin-bottom:4px}.quote-preview-customer>strong{display:block;font-size:13px}.quote-preview-customer p{font-size:10px;color:#53616b;margin:2px 0}
.quote-preview-paper table th{background:#f4f8f7;color:#53616b;font-size:9px;letter-spacing:.7px;padding:10px 8px;border-bottom:1px solid #bdcfca}.quote-preview-paper table td{padding:10px 8px;border-color:#e2e8e6;font-size:11px;line-height:1.5}.quote-preview-paper table td strong{font-size:12px;color:#17262d}.quote-preview-paper .quote-preview-description{font-size:11px;line-height:1.5;color:#36464d;margin-top:5px}
.quote-preview-paper .quote-preview-totals{border-top:2px solid #087568;background:#f4f8f7;padding:14px 16px;margin:20px 0;color:#17262d}.quote-preview-paper .quote-preview-totals strong{font-size:20px}.quote-preview-paper .quote-preview-totals p{font-size:10px;margin:5px 0 0;color:#53616b}

/* First-page document details align beside the logo already on the letterhead. */
.quote-preview-sheet{position:relative}.quote-preview-sheet-content>.quote-document-header{position:absolute;top:68px;right:83px;width:336px;text-align:right}
.quote-preview-paper .quote-document-header h2{font-size:18px;font-weight:400;letter-spacing:1.3px;color:#53616b;margin:0 0 6px;line-height:1.3}.quote-preview-paper .quote-document-header .quote-preview-code{margin:0 0 8px}.quote-preview-paper .quote-document-header .quote-preview-dates{margin:0;font-size:10px;line-height:1.5}

[data-quote-billing] [hidden],[data-quote-pricing] [hidden]{display:none!important}.quote-preview-totals>strong{display:block;margin-top:8px}[data-quote-billing]{grid-column:1/-1;border:1px solid var(--ax-border);border-radius:10px;padding:16px;margin-bottom:12px}

/* Service descriptions use the full table width under the title and amounts. */
.quote-preview-paper .quote-service-description-row td[colspan],.table-wrap .quote-service-description-row td[colspan]{width:auto;max-width:none;white-space:normal;padding-top:2px;padding-bottom:12px}
.quote-preview-paper .quote-service-description-row .quote-preview-description,.table-wrap .quote-service-description-row .quote-service-description{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}

/* Keep all paragraphs of a service visually connected. */
.quote-preview-paper table .quote-service-heading-row td,.quote-preview-paper table .quote-service-description-row td{border-bottom:0}
.quote-preview-paper table .quote-service-description-row td{padding-top:0;padding-bottom:0}
.quote-preview-paper table .quote-service-description-last td{border-bottom:1px solid #e2e8e6;padding-bottom:14px}