:root { --ux-focus: #145c9e; }
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
body { overflow-x: clip; }
.app-shell, .main, .panel, .detail-panel, .two-column > *, .form-grid > * { min-width: 0; }
.sidebar { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; gap: 16px; }
.sidebar nav { gap: 3px; }
.sidebar nav a { padding: 9px 12px; }
.ux-nav-group { color: #a8c9bf; text-transform: uppercase; font-size: 10px; letter-spacing: .08em; margin: 14px 10px 4px; }
.ux-scope { color: var(--muted); font-size: 13px; margin: 7px 0 0; }
.ux-scope strong { color: var(--brand); }
.ux-skip { position: fixed; top: -100px; left: 16px; z-index: 100; background: #fff; color: #123; padding: 12px; }
.ux-skip:focus { top: 8px; }
:is(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid var(--ux-focus); outline-offset: 3px; }
button[disabled] { opacity: .6; cursor: not-allowed; }
.ux-workspaces, .ux-sections { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ux-workspaces { position: sticky; top: 0; background: var(--surface); z-index: 20; }
.ux-workspaces a, .ux-sections a, .ux-tabs a { padding: 9px 12px; border-radius: 7px; background: #edf4f1; font-weight: 700; font-size: 13px; }
:is(.ux-workspaces,.ux-sections,.ux-tabs) a[aria-current] { background: var(--brand); color: #fff; }
.ux-sections { margin-bottom: 18px; }
.client-cockpit-data { display: none; }
[data-ux-workspace] .client-cockpit { padding-bottom: 6px; }
[data-ux-workspace]:not([data-ux-workspace="summary"]) .client-cockpit-status { display: none; }
[data-ux-workspace] .client-cockpit-main > .button-row { margin-bottom: 5px; }
[data-ux-workspace] .client-cockpit-main > .button-row { display: none; }
[data-ux-workspace]:not([data-ux-workspace="summary"]) .client-cockpit-alert { display:none; }
[data-ux-workspace] .prompt-panel { margin-top: 12px; border-top: 0; padding-top: 0; }
[data-ux-workspace] .client-cockpit-main > h2 { font-size: 17px; }
.ux-requirement { padding: 10px 12px; border-left: 3px solid #a56c0c; background: #fff7e5; color: #62420e; font-size: 13px; font-weight: 600; }
.ux-requirement a, .ux-help a { text-decoration: underline; font-weight: 800; }
.ux-menu-toggle { display: none; }
.ux-table-toolbar, .ux-table-footer { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 14px 0 8px; font-size: 12px; }
.ux-table-toolbar label { flex: 1 1 160px; min-width: 120px; }
.ux-table-toolbar input, .ux-table-toolbar select { min-height: 36px; }
.ux-table-toolbar .ux-sort { flex: 0 1 190px; }
.ux-table-footer { justify-content: space-between; margin: 8px 0 18px; }
.ux-table-footer > div { display: flex; align-items: center; gap: 8px; }
.ux-table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; }
.ux-table-scroll th { position: sticky; top: 0; }
.ux-empty { border: 1px dashed var(--line); padding: 18px; border-radius: 8px; color: var(--muted); }
.ux-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ux-help { padding: 12px 14px; background: #edf4f8; border-left: 3px solid #1f7a9b; margin: 12px 0; font-size: 13px; line-height: 1.55; }
.ux-error { color: #8c2525; margin: 6px 0; font-size: 13px; }
.ux-live { min-height: 20px; font-size: 13px; color: var(--brand); }
.ux-draft-restored { background: #fff4d7; border-left: 3px solid #b67610; padding: 10px; }
.ux-create { padding: 10px 0; }
.ux-create > summary { cursor: pointer; color: var(--brand); font-weight: 800; padding: 8px 0; }
.filter-bar { grid-template-columns: repeat(auto-fit,minmax(min(100%,150px),1fr)); }
.filter-bar > * { min-width: 0; width: 100%; }
.inline-generate { min-width: 0; grid-template-columns: repeat(2,minmax(100px,1fr)); }
.two-column.wide-left:has(.record-list) { grid-template-columns: minmax(300px,.9fr) minmax(0,1.4fr); }
.compact-form { align-items: end; }
.compact-form > label { flex: 1 1 160px; min-width: 0; }
.compact-form label input, .compact-form label select { max-width: none; }
.ux-advanced { margin: 10px 0; font-size: 13px; }
.ux-advanced summary { cursor: pointer; color: var(--muted); }
.ux-table-cards { display: block; border-collapse: separate; }
.ux-table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ux-table-cards tbody { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 12px; }
.ux-table-cards tr { display: block; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: #fff; }
.ux-table-cards td { display: block; border: 0; padding: 7px 0; overflow-wrap: anywhere; }
.ux-table-cards td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 11px; font-weight: 800; margin-bottom: 5px; }
.ux-tree { padding-left: 20px; border-left: 1px solid var(--line); }
.ux-tree li { padding: 7px 0; list-style: none; }
.ux-tree a { text-decoration: underline; }
.ux-job { border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin: 12px 0; }
.ux-job header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.ux-job time { color: var(--muted); font-size: 12px; }
.ux-job .ux-job-results { margin-top: 12px; line-height: 1.6; }
.ux-job-results article { border-top: 1px solid var(--line); padding: 10px 0; }
.ux-job-results a { color: var(--brand); text-decoration: underline; }
.ux-content-preview { line-height: 1.7; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.ux-preview-meta { padding: 10px; background: #f6f9fc; margin: 6px 0; border-radius: 6px; }
.ux-preview-meta strong { color: #174d96; }
.ux-extension-status { padding: 12px; border: 1px solid var(--line); background: #f5f9f7; border-radius: 8px; }
.ux-stale { color: #80520b; font-weight: 700; }
.login-card .brand small { color: #50675e; }
.login-card input[type="password"], .login-card input[type="text"] { max-width: 100%; }
@media(max-width:1080px) {
 .two-column.wide-left:has(.record-list) { grid-template-columns: minmax(0,1fr); }
 .sidebar { position: static; height: auto; max-height: none; }
}
@media(max-width:700px) {
 .ux-menu-toggle { display: inline-flex; width: fit-content; align-items: center; gap: 8px; margin-bottom: 10px; }
 body.ux-ready .sidebar { display: none; }
 body.ux-ready.ux-menu-open .sidebar { display:flex; position:fixed; inset:0 auto 0 0; width:min(340px,calc(100vw - 25px)); height:100dvh; max-height:100dvh; z-index:1000; padding-top:65px; overflow-y:auto; box-shadow:0 0 0 100vmax #172e3155; }
 body.ux-menu-open .ux-menu-toggle { position:fixed; z-index:1001; top:12px; left:14px; background:white; color:#153e39; }
 .sidebar nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .ux-nav-group { grid-column: 1/-1; }
 .main { padding: 14px; }
 .ux-workspaces { position: static; }
 .ux-workspaces a,.ux-sections a { flex: 1 1 40%; padding: 10px; }
 .client-cockpit-status { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .ux-table-scroll { overflow-x: auto; }
 .ux-table-scroll table { display: table; }
 .ux-table-toolbar label { flex-basis: 100%; }
 .ux-table-footer { align-items: stretch; flex-direction: column; }
 .topbar .userbar { flex-wrap: wrap; }
 .inline-generate { grid-template-columns: 1fr; }
 .ux-table-cards tbody { grid-template-columns: 1fr; }
}
@media print {
 .ux-workspaces,.ux-sections,.ux-table-toolbar,.ux-table-footer,.ux-menu-toggle,.ux-tabs,.ux-help { display:none!important; }
 .ux-table-scroll { overflow: visible; border:0; }
 .ux-table-scroll table { display: table; }
 tr { break-inside:avoid; }
 .ux-table-scroll tr[hidden] { display:table-row!important; }
}