
/* Professional UX & Visual QA layer */
:root{--ux-accent:#4f46e5;--ux-accent-soft:rgba(79,70,229,.10);--ux-info:#2563eb;--ux-success:#15803d;--ux-warning:#b45309;--ux-danger:#b42318;--ux-focus:0 0 0 3px rgba(79,70,229,.28)}
.pro-ready{font-feature-settings:"kern" 1,"liga" 1;text-rendering:optimizeLegibility}
.pro-content main{content-visibility:auto;contain-intrinsic-size:900px}
.pro-nav-icon svg,.ux-icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pro-brand-mark{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 6px 16px rgba(79,70,229,.24)}
.pro-nav-link{position:relative}.pro-nav-link.active:before{content:"";position:absolute;left:-8px;top:9px;bottom:9px;width:3px;border-radius:8px;background:var(--pro-primary)}
.pro-nav-link:hover{transform:translateX(1px)}
.pro-page-header{border-bottom:1px solid var(--pro-border);padding-bottom:20px;margin-bottom:20px}
.pro-page-header>div:first-child{max-width:840px}.pro-page-header p{max-width:76ch}
.pro-content main>h1,.pro-content main>.eyebrow+.lead,.pro-content main>.eyebrow+h1,.pro-content main>.hero{display:none!important}
.pro-content .graph-grid,.pro-content .impact-layout,.pro-content .twin-layout{grid-template-columns:minmax(0,1.65fr) minmax(260px,.75fr)!important}
body[data-workspace="graph"] .pro-content main,body[data-workspace="impact"] .pro-content main{max-width:none}
body[data-workspace="academy"] .pro-page-kicker:after{content:" · Lernmodus";color:var(--pro-primary)}
body[data-workspace="governance"] .pro-page-kicker:after{content:" · Governance";color:var(--pro-success)}
body[data-workspace="engineering"] .pro-page-kicker:after{content:" · Engineering";color:var(--pro-info)}
body[data-workspace="operations"] .pro-page-kicker:after{content:" · Operations";color:var(--pro-warning)}
.ux-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--pro-border);border-bottom:0;border-radius:10px 10px 0 0;background:var(--pro-panel-2)}
.ux-toolbar-label{font-size:.69rem;font-weight:700;color:var(--pro-muted);text-transform:uppercase;letter-spacing:.05em;margin-right:auto}
.ux-table-search{height:32px!important;min-height:32px!important;width:min(240px,45vw);font-size:.74rem!important;background:var(--pro-panel)!important}
.ux-table-shell{overflow:auto;max-width:100%;border-radius:0 0 10px 10px;outline:none;scrollbar-gutter:stable}
.ux-table-shell:focus-visible{box-shadow:var(--ux-focus)}
.ux-table-shell table{min-width:640px}.ux-sort{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;color:inherit}.ux-sort:focus-visible{outline:2px solid var(--pro-primary);outline-offset:3px;border-radius:3px}.ux-sort:after{content:"↕";opacity:.45;font-size:.7rem}.ux-sort[data-dir="asc"]:after{content:"↑";opacity:1}.ux-sort[data-dir="desc"]:after{content:"↓";opacity:1}
.ux-empty{display:none;padding:30px 16px;text-align:center;border:1px solid var(--pro-border);border-top:0;background:var(--pro-panel);color:var(--pro-muted)}.ux-empty.visible{display:block}.ux-empty svg{width:32px;height:32px;margin-bottom:8px;color:var(--pro-subtle)}
.ux-state{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--pro-border);border-radius:10px;background:var(--pro-panel);margin:12px 0}.ux-state-icon{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:var(--ux-accent-soft);color:var(--ux-accent)}.ux-state strong{display:block;font-size:.78rem}.ux-state p{margin:2px 0 0!important;font-size:.7rem!important}.ux-state[data-kind="error"] .ux-state-icon{background:rgba(180,35,24,.1);color:var(--ux-danger)}.ux-state[data-kind="success"] .ux-state-icon{background:rgba(21,128,61,.1);color:var(--ux-success)}
.ux-toast-region{position:fixed;z-index:500;right:18px;bottom:18px;display:grid;gap:8px;width:min(380px,calc(100vw - 36px));pointer-events:none}.ux-toast{pointer-events:auto;display:grid;grid-template-columns:28px 1fr auto;gap:9px;align-items:start;padding:12px;border:1px solid var(--pro-border);background:var(--pro-panel);color:var(--pro-text);border-radius:10px;box-shadow:0 16px 36px rgba(16,24,40,.18);animation:ux-in .18s ease-out}.ux-toast strong{font-size:.76rem}.ux-toast p{font-size:.68rem;margin:2px 0 0;color:var(--pro-muted)}.ux-toast button{all:unset;cursor:pointer;color:var(--pro-muted);font-size:1rem}.ux-toast[data-kind="error"]{border-left:3px solid var(--ux-danger)}.ux-toast[data-kind="success"]{border-left:3px solid var(--ux-success)}
.ux-dialog{border:0;padding:0;background:transparent;max-width:min(480px,calc(100vw - 28px));width:100%}.ux-dialog::backdrop{background:rgba(15,23,42,.58);backdrop-filter:blur(3px)}.ux-dialog-card{background:var(--pro-panel);border:1px solid var(--pro-border);border-radius:14px;box-shadow:0 30px 70px rgba(15,23,42,.3);overflow:hidden}.ux-dialog-head,.ux-dialog-actions{padding:16px 18px;display:flex;align-items:center;gap:12px}.ux-dialog-head{border-bottom:1px solid var(--pro-border)}.ux-dialog-head h2{font-size:1rem!important;margin:0!important}.ux-dialog-body{padding:18px;color:var(--pro-muted);font-size:.82rem;line-height:1.6}.ux-dialog-actions{justify-content:flex-end;border-top:1px solid var(--pro-border);background:var(--pro-panel-2)}
.ux-icon-button{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid var(--pro-border);border-radius:8px;background:var(--pro-panel);color:var(--pro-muted);cursor:pointer}.ux-icon-button:hover{color:var(--pro-primary);background:var(--pro-primary-soft)}
.ux-skeleton{position:relative;overflow:hidden;background:var(--pro-panel-2);border-radius:7px;color:transparent!important}.ux-skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:ux-shimmer 1.5s infinite}
.pro-content .graph-card,.pro-content .impact-card{min-height:140px}.pro-content .graph-card:first-child{min-height:360px}
.pro-content .studio-panel,.pro-content .twin-card,.pro-content .acceptance-card{transition:border-color .16s,transform .16s,box-shadow .16s}.pro-content .studio-panel:hover,.pro-content .twin-card:hover,.pro-content .acceptance-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pro-primary) 35%,var(--pro-border))!important;box-shadow:0 10px 24px rgba(16,24,40,.08)!important}
.pro-content .studio-panel:focus-visible,.pro-content .twin-card:focus-visible,.pro-content .acceptance-card:focus-visible{outline:none;box-shadow:var(--ux-focus)!important}
.pro-content details[open]{border-color:color-mix(in srgb,var(--pro-primary) 24%,var(--pro-border))!important}.pro-content details summary{display:flex;align-items:center;gap:8px}.pro-content details summary::-webkit-details-marker{display:none}.pro-content details summary:before{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}.pro-content details[open] summary:before{transform:rotate(45deg)}
.pro-content pre,.pro-content code{tab-size:4}.pro-content a:not(.btn):not(.pro-nav-link):focus-visible,.pro-content button:focus-visible,.pro-content input:focus-visible,.pro-content select:focus-visible,.pro-content textarea:focus-visible{outline:none!important;box-shadow:var(--ux-focus)!important}
.ux-skip{position:fixed;z-index:999;left:16px;top:12px;transform:translateY(-180%);padding:9px 13px;border-radius:8px;background:var(--pro-primary);color:#fff!important;font-weight:700}.ux-skip:focus{transform:none}
@keyframes ux-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes ux-shimmer{100%{transform:translateX(100%)}}
@media(max-width:760px){.ux-toolbar{align-items:stretch}.ux-toolbar-label{width:100%}.ux-table-search{width:100%}.pro-content .graph-grid,.pro-content .impact-layout,.pro-content .twin-layout{grid-template-columns:1fr!important}.ux-state{grid-template-columns:36px 1fr}.ux-state>:last-child{grid-column:2}.pro-content table[data-mobile-cards] thead{display:none}.pro-content table[data-mobile-cards],.pro-content table[data-mobile-cards] tbody,.pro-content table[data-mobile-cards] tr,.pro-content table[data-mobile-cards] td{display:block;min-width:0;width:100%}.pro-content table[data-mobile-cards] tr{padding:10px;border-bottom:1px solid var(--pro-border)}.pro-content table[data-mobile-cards] td{display:grid;grid-template-columns:minmax(100px,40%) 1fr;gap:8px;border:0!important;padding:6px!important}.pro-content table[data-mobile-cards] td:before{content:attr(data-label);font-size:.65rem;text-transform:uppercase;letter-spacing:.04em;color:var(--pro-muted);font-weight:700}}
@media(prefers-reduced-motion:reduce){.ux-toast,.ux-skeleton:after{animation:none!important}.pro-content .studio-panel:hover,.pro-content .twin-card:hover,.pro-content .acceptance-card:hover{transform:none}}
