/* HOFMANN HUB · Interface 1.0.2. No filter/inversion on brand, products or documents. */
:root{--ui-bg:#f5f6f8;--ui-surface:#fff;--ui-raised:#fafbfc;--ui-hover:#f0f2f5;--ui-border:#e2e5ea;--ui-text:#1d232d;--ui-muted:#656e7d;--ui-red:#c90012;--ui-red-bg:#fff0f2;--ui-focus:#dc1526;--ui-green:#22694f;--ui-green-bg:#eaf5ef;--ui-amber:#805913;--ui-amber-bg:#fff6df;--ui-shadow:0 6px 22px #1c25300a;color-scheme:light}
html[data-theme=dark]{color-scheme:dark;--ui-bg:#101318;--ui-surface:#191e26;--ui-raised:#202630;--ui-hover:#282f3a;--ui-border:#343d4b;--ui-text:#e9edf4;--ui-muted:#a8b1c0;--ui-red:#ff7a86;--ui-red-bg:#382027;--ui-focus:#ff8891;--ui-green:#85d7ad;--ui-green-bg:#173c30;--ui-amber:#eed08c;--ui-amber-bg:#3b301e;--ui-shadow:0 8px 25px #0002;--ink:#e9edf4;--muted:#a8b1c0;--paper:#101318;--line:#343d4b;--white:#191e26;--soft:#173c30;--green:#85d7ad;--red:#ff7a86}
.hub-ui{background:var(--ui-bg);color:var(--ui-text)}.hub-ui [hidden]{display:none!important}.hub-ui .shell{grid-template-columns:266px minmax(0,1fr);align-items:start}.hub-ui .sidebar{height:100vh;height:100dvh;position:sticky;top:0;padding:25px 16px 0;background:var(--ui-surface);border-color:var(--ui-border);color:var(--ui-text);overflow:hidden;min-width:0}.ui-brand-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.hub-ui .brand{gap:10px;padding:11px 10px;background:#fff;border-radius:8px;max-width:100%;color:#202124}.hub-ui .brand img{width:158px;max-width:78%;height:auto}.hub-ui .brand span{color:#e30613;font-size:13px}.hub-ui .brand-sub{font-size:9px;letter-spacing:1.7px;margin:12px 10px 20px;color:var(--ui-muted)}.ui-sidebar-body{display:flex;flex-direction:column;flex:1;min-height:0}.ui-sidebar-scroll{flex:1;overflow-y:auto;min-height:0;padding:0 1px 18px;scrollbar-width:thin}.hub-ui .nav-label{font-size:9px;letter-spacing:1.5px;margin:12px 11px 13px;color:var(--ui-muted)}.hub-ui .nav.ui-nav{display:block;margin:0;overflow:visible}.hub-ui .ui-overview-link{font-size:13px;gap:10px;padding:12px 11px;margin:0 0 8px;border-radius:8px;color:var(--ui-muted)}.hub-ui .ui-overview-link.active{background:#d6081a;color:#fff}.hub-ui .ui-overview-link:hover:not(.active){background:var(--ui-hover);color:var(--ui-text)}.hub-ui .ui-nav-group{margin:3px 0;border:0;min-width:0}.hub-ui .ui-nav-group>summary{list-style:none;display:flex;align-items:center;gap:10px;margin:0;min-height:44px;padding:11px 10px;border-radius:8px;font-size:12.5px;line-height:1.4;font-weight:600;cursor:pointer;color:var(--ui-text)}.ui-nav-group>summary::-webkit-details-marker{display:none}.hub-ui .ui-nav-group>summary:hover{background:var(--ui-hover)}.ui-chevron{margin-left:auto;transition:transform .15s;color:var(--ui-muted);font-size:17px}.ui-nav-group[open]>.ui-chevron,.ui-nav-group[open]>summary>.ui-chevron{transform:rotate(180deg)}.hub-ui .nav-icon{display:inline-block!important;width:17px;text-align:center;flex-shrink:0;font-size:16px;color:inherit}.ui-nav-children{margin:2px 0 12px 20px;border-left:1px solid var(--ui-border);padding-left:10px}.hub-ui .ui-nav-children a{display:flex;gap:5px;align-items:center;white-space:normal;margin:2px 0;padding:9px 10px;min-height:36px;font-size:11.5px;line-height:1.5;color:var(--ui-muted);border-radius:6px}.hub-ui .ui-nav-children a:hover{background:var(--ui-hover);color:var(--ui-text)}.hub-ui .ui-nav-children a.active{background:var(--ui-red-bg);color:var(--ui-red);font-weight:650;box-shadow:inset 2px 0 var(--ui-red)}.hub-ui .sidebar-footer{flex-shrink:0;border-top:1px solid var(--ui-border);padding:15px 4px 10px;margin-top:0;background:var(--ui-surface)}.hub-ui .side-account{display:flex;align-items:center;padding:8px 6px;border-radius:8px;gap:8px;color:var(--ui-text);min-width:0}.hub-ui .side-account>span:nth-child(2){min-width:0;overflow-wrap:anywhere}.hub-ui .side-account small{color:var(--ui-muted);font-size:10px;line-height:1.5}.hub-ui .side-account .avatar{margin:0;background:var(--ui-hover);color:var(--ui-text);width:34px;flex-shrink:0}.ui-profile-gear{margin-left:auto;color:var(--ui-muted);font-size:16px}.hub-ui .side-account:hover,.hub-ui .side-account.active{background:var(--ui-hover)}.ui-structure-link{display:flex;gap:10px;align-items:center;margin:8px 6px 1px;padding:11px 10px;font-size:12px;border:1px solid var(--ui-border);border-radius:8px;color:var(--ui-muted)}.ui-structure-link span:last-child{margin-left:auto}.ui-structure-link:hover,.ui-structure-link.active{color:var(--ui-red);background:var(--ui-red-bg);border-color:var(--ui-red)}.hub-ui .logout{padding:10px 12px;font-size:11px;color:var(--ui-muted)}.hub-ui .workspace{padding:0 32px 36px;max-width:1680px;min-width:0}.hub-ui .topbar{height:auto;min-height:77px;border-color:var(--ui-border);gap:12px;margin-bottom:28px}.ui-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:11px;line-height:1.5}.ui-crumb a:hover{text-decoration:underline}.ui-mobile-toggle{display:none}.ui-skip{position:fixed;top:8px;left:280px;z-index:1000;background:var(--ui-surface);padding:12px;border:2px solid var(--ui-focus);transform:translateY(-200%)}.ui-skip:focus{transform:translateY(0)}.hub-ui a:focus-visible,.hub-ui button:focus-visible,.hub-ui summary:focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px}.hub-ui .page-heading h1{font-size:31px}.hub-ui .sub{color:var(--ui-muted);line-height:1.7}.hub-ui .ui-stat-link{display:block;color:var(--ui-text);text-decoration:none;box-shadow:var(--ui-shadow);transition:transform .15s,border-color .15s}.ui-stat-link:hover{transform:translateY(-2px);border-color:var(--ui-red)}.ui-stat-disabled{opacity:.7}.hub-ui .stat{min-width:0;padding:20px}.hub-ui .stat-label{padding-right:15px;line-height:1.5}.hub-ui .stat-number{font-size:36px;margin:13px 0}.hub-ui .stat-foot{line-height:1.5;font-size:10px}.ui-folder-tabs{display:flex;align-items:stretch;gap:5px;overflow-x:auto;overscroll-behavior-x:contain;max-width:100%;scrollbar-width:thin;padding:5px 3px 0;margin:0 -3px;border-bottom:1px solid var(--ui-border)}.ui-folder-tab{white-space:nowrap;display:flex;align-items:center;justify-content:center;padding:14px 17px;border:1px solid var(--ui-border);border-bottom:0;border-radius:11px 11px 0 0;background:var(--ui-hover);color:var(--ui-muted);font-size:12px;font-weight:550;min-height:50px;position:relative}.ui-folder-tab:hover{color:var(--ui-text);background:var(--ui-raised)}.ui-folder-tab.active{background:var(--ui-surface);color:var(--ui-red);box-shadow:inset 0 3px var(--ui-red);font-weight:650}.ui-folder-panel{padding:26px;background:var(--ui-surface);border:1px solid var(--ui-border);border-top:0;border-radius:0 0 14px 14px;min-height:305px;box-shadow:var(--ui-shadow);scroll-margin-top:15px;outline-offset:4px}.ui-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:23px}.ui-section-heading h2{font-size:20px;line-height:1.4}.ui-section-heading .sub{margin-top:8px;margin-bottom:0;max-width:720px;font-size:12px}.ui-counter{flex-shrink:0;color:var(--ui-muted);font-size:11px;border:1px solid var(--ui-border);border-radius:6px;padding:7px 10px}.ui-tile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.ui-tile{padding:21px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-raised);min-width:0;display:flex;flex-direction:column;transition:transform .15s,border-color .15s}.ui-tile:hover{border-color:var(--ui-red);transform:translateY(-2px)}.ui-tile h3{color:var(--ui-text);font-size:15px;line-height:1.4;overflow-wrap:anywhere;margin:16px 0 9px}.ui-tile p{font-size:12px;line-height:1.7;color:var(--ui-muted);margin:0}.ui-tile-top{display:flex;align-items:center;gap:9px;min-height:35px}.ui-tile-icon{display:grid;place-items:center;background:var(--ui-red-bg);color:var(--ui-red);width:35px;height:35px;border-radius:9px;font-size:19px;flex-shrink:0}.ui-tile-arrow{margin-left:auto;font-size:20px;color:var(--ui-muted)}.ui-catalogue{margin-top:30px;padding-top:25px;border-top:1px solid var(--ui-border);scroll-margin-top:20px}.ui-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ui-category-card{display:flex;flex-direction:column;gap:8px;border:1px solid var(--ui-border);border-radius:9px;padding:15px;background:var(--ui-raised);min-width:0;font-size:13px;line-height:1.5}.ui-category-card:hover{border-color:var(--ui-red)}.ui-category-card.child{margin-left:18px;border-left:3px solid var(--ui-border)}.ui-category-title{font-weight:550}.ui-category-meta{font-size:11px;color:var(--ui-muted)}.ui-navigation-note{margin-top:18px}.ui-theme-options{border:0;padding:0;margin:0 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:16px}.ui-theme-options legend{font-size:12px;margin:0 0 15px;color:var(--ui-muted)}.ui-theme-option{display:grid;grid-template-columns:18px 1fr;align-items:start;gap:12px;border:1px solid var(--ui-border);padding:17px;border-radius:10px;cursor:pointer;background:var(--ui-raised)}.ui-theme-option:has(input:checked){border-color:var(--ui-red);box-shadow:0 0 0 1px var(--ui-red)}.ui-theme-option input{width:16px;height:16px;margin:3px 0;accent-color:#e30613}.ui-theme-option>span:last-child{grid-column:2}.ui-theme-option strong{font-size:13px}.ui-theme-option small{display:block;font-size:11px;line-height:1.5;color:var(--ui-muted);margin-top:5px}.ui-theme-sample{height:80px;position:relative;border-radius:6px;overflow:hidden;border:1px solid #b6beca;display:block;background:#f5f6f8}.ui-theme-sample i{position:absolute;left:0;top:0;bottom:0;width:24%;background:white;border-right:1px solid #cdd1d7}.ui-theme-sample b{position:absolute;left:33%;top:17%;width:56%;height:17%;background:#e30613;border-radius:2px}.ui-theme-sample em{position:absolute;left:33%;top:48%;width:56%;height:33%;border-radius:3px;background:#fff;border:1px solid #d1d5db}.ui-theme-sample.sample-dark{background:#101318;border-color:#566071}.sample-dark i{background:#191e26;border-color:#343d4b}.sample-dark em{background:#222a35;border-color:#343d4b}.ui-course-row{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--ui-border);margin-bottom:15px}.ui-course-row>div{flex:1}.ui-theme-unsaved{color:var(--ui-amber)}
/* Full dark palette for existing modules; white original documents/media remain original. */
html[data-theme=dark] .panel,html[data-theme=dark] .stat,html[data-theme=dark] .login-card{background:var(--ui-surface);border-color:var(--ui-border)}
html[data-theme=dark] .panel-head,html[data-theme=dark] .panel-foot,html[data-theme=dark] .toolbar,html[data-theme=dark] td,html[data-theme=dark] .module{border-color:var(--ui-border)}
html[data-theme=dark] th{background:var(--ui-raised);color:var(--ui-muted)}html[data-theme=dark] tr:hover td{background:var(--ui-hover)}
html[data-theme=dark] input,html[data-theme=dark] select,html[data-theme=dark] textarea{background:var(--ui-bg);border-color:var(--ui-border);color:var(--ui-text)}html[data-theme=dark] input::placeholder,html[data-theme=dark] textarea::placeholder{color:#8d98aa;opacity:1}
html[data-theme=dark] .btn{background:#e9edf4;color:#18212b;border-color:#e9edf4}html[data-theme=dark] .btn.primary{background:#d6081a;color:#fff;border-color:#ed2638}html[data-theme=dark] .btn.secondary{background:var(--ui-raised);color:var(--ui-text);border-color:var(--ui-border)}html[data-theme=dark] .btn.danger{background:#40232b;color:#ff9ba5;border-color:#8f3f4b}
html[data-theme=dark] .link,html[data-theme=dark] .eyebrow,html[data-theme=dark] .mini-label{color:var(--ui-red)}html[data-theme=dark] .muted,html[data-theme=dark] .hint,html[data-theme=dark] .tiny.muted,html[data-theme=dark] .stat-foot,html[data-theme=dark] .stat-label,html[data-theme=dark] .topbar,html[data-theme=dark] .empty,html[data-theme=dark] .panel-foot,html[data-theme=dark] label.field,html[data-theme=dark] .data-list dt{color:var(--ui-muted)}
html[data-theme=dark] .badge,html[data-theme=dark] .tag,html[data-theme=dark] .member-pill{background:var(--ui-hover);color:#c5cedc;border-color:var(--ui-border)}
html[data-theme=dark] .badge.active,html[data-theme=dark] .badge.sent,html[data-theme=dark] .badge.closed,html[data-theme=dark] .notice{background:var(--ui-green-bg);color:var(--ui-green);border-color:#315647}
html[data-theme=dark] .warning,html[data-theme=dark] .declared,html[data-theme=dark] .badge.pending,html[data-theme=dark] .badge.queued,html[data-theme=dark] .badge.needs_review{background:var(--ui-amber-bg);color:var(--ui-amber);border-color:#625137}
html[data-theme=dark] .error,html[data-theme=dark] .badge.blocked,html[data-theme=dark] .badge.failed,html[data-theme=dark] .badge.rejected{background:#40232b;color:#ff9ba5;border-color:#7e3a48}
html[data-theme=dark] .stat.highlight{background:var(--ui-red-bg)}html[data-theme=dark] .stat-glyph{color:var(--ui-red)}html[data-theme=dark] .status-card,html[data-theme=dark] .module-symbol,html[data-theme=dark] .academy-category{background:var(--ui-raised);color:var(--ui-text);border-color:var(--ui-border)}
html[data-theme=dark] .tabs a,html[data-theme=dark] .co-tabs a,html[data-theme=dark] .ticket-tab-bar{background:var(--ui-surface);color:var(--ui-muted);border-color:var(--ui-border)}html[data-theme=dark] .tabs a.active,html[data-theme=dark] .co-tabs a.active,html[data-theme=dark] .ticket-tab.active{background:var(--ui-red-bg);color:var(--ui-red);border-color:var(--ui-red)}
html[data-theme=dark] .ticket-tab{color:var(--ui-muted)}html[data-theme=dark] .ticket-tab:hover{background:var(--ui-hover);color:var(--ui-text)}html[data-theme=dark] .tab-count,html[data-theme=dark] .ticket-tab.active .tab-count{background:var(--ui-hover);color:var(--ui-text)}
html[data-theme=dark] .ticket-page details summary,html[data-theme=dark] .ticket-tab-description,html[data-theme=dark] .ticket-page .route-help p,html[data-theme=dark] .ticket-page .assignment-line time,html[data-theme=dark] .ticket-page .report-panel>summary small{color:var(--ui-muted)}
html[data-theme=dark] .ticket-page .report-panel>summary{background:var(--ui-raised);border-color:var(--ui-border);color:var(--ui-text)}html[data-theme=dark] .ticket-page .notification-action{background:var(--ui-amber-bg);border-color:#625137}html[data-theme=dark] .technical-details,html[data-theme=dark] .assignment-line{border-color:var(--ui-border)}
html[data-theme=dark] .co-product{background:var(--ui-raised);border-color:var(--ui-border)}html[data-theme=dark] .co-banner{background:var(--ui-red-bg);color:#ffc0c7;border-color:#74404a}html[data-theme=dark] .co-benefit{background:var(--ui-green-bg);color:var(--ui-green)}html[data-theme=dark] .co-grand{color:var(--ui-red)}
html[data-theme=dark] .co-small,html[data-theme=dark] .co-source span,html[data-theme=dark] .co-result small,html[data-theme=dark] .co-discount small,html[data-theme=dark] .co-event small,html[data-theme=dark] .co-event p,html[data-theme=dark] .co-facts dt{color:var(--ui-muted)}html[data-theme=dark] .co-warnings{color:var(--ui-amber)}
html[data-theme=dark] .co-source,html[data-theme=dark] .co-result,html[data-theme=dark] .co-discount,html[data-theme=dark] .co-event,html[data-theme=dark] .point-row{border-color:var(--ui-border)}
html[data-theme=dark] .academy-text,html[data-theme=dark] .login-card h1{color:var(--ui-text)}html[data-theme=dark] .login-wrap{background:var(--ui-bg)}html[data-theme=dark] .login-brand{padding:14px;background:#fff;border-radius:9px}html[data-theme=dark] .course-figure,html[data-theme=dark] .academy-figure{background:#fff}
html[data-theme=dark] .menu-links>a:hover{background:var(--ui-hover);color:var(--ui-red)}html[data-theme=dark] .help-list,html[data-theme=dark] .footer-note{color:var(--ui-muted)}
/* Interface 1.0.2: purchase module uses its own stylesheet, loaded after this one.
   Scope overrides to the HUB dark theme. Higher specificity is intentional.
   Light theme, product media, logo and document previews remain unchanged. */
html[data-theme=dark] .hub-ui .po-entity {
  background: var(--ui-raised);
  border-color: var(--ui-border);
  color: var(--ui-text);
}
html[data-theme=dark] .hub-ui .po-entity h3,
html[data-theme=dark] .hub-ui .po-entity p {
  color: var(--ui-text);
}
html[data-theme=dark] .hub-ui .po-entity .hint,
html[data-theme=dark] .hub-ui .po-details dt {
  color: var(--ui-muted);
}
html[data-theme=dark] .hub-ui .po-rule,
html[data-theme=dark] .hub-ui .po-event,
html[data-theme=dark] .hub-ui .po-totals .po-total {
  border-color: var(--ui-border);
}
html[data-theme=dark] .hub-ui .po-totals .po-total {
  color: var(--ui-red);
}

@media(min-width:1600px){.hub-ui .workspace{padding-left:45px;padding-right:45px}}
@media(max-width:1250px){.hub-ui .shell{grid-template-columns:244px minmax(0,1fr)}.hub-ui .workspace{padding:0 24px 30px}.ui-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-ui .stats{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-ui .brand img{width:142px}.ui-folder-panel{padding:22px}}
@media(max-width:850px){.hub-ui .shell{display:block}.hub-ui .sidebar{height:auto;position:static;padding:16px 18px;border-right:0;border-bottom:1px solid var(--ui-border);overflow:visible}.hub-ui .brand-sub{display:none}.ui-mobile-toggle{display:block;background:var(--ui-raised);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:8px;padding:9px 12px;font-size:12px;white-space:nowrap}.ui-sidebar-body{margin-top:14px}.ui-ready .ui-sidebar-body:not(.is-open){display:none}.ui-sidebar-scroll{max-height:55vh;overflow:auto}.hub-ui .sidebar-footer{display:block;padding-top:12px}.hub-ui .side-account{max-width:100%}.hub-ui .ui-structure-link{max-width:100%;margin-top:6px}.hub-ui .nav-label{display:block}.hub-ui .topbar{min-height:60px;margin-bottom:24px}.hub-ui .topbar-right>span:first-child{display:none}.hub-ui .brand img{width:145px}.ui-skip{left:12px}.hub-ui .workspace{padding:0 18px 28px}.ui-folder-panel{padding:19px}.ui-section-heading{flex-wrap:wrap;gap:10px}.ui-category-grid{grid-template-columns:1fr}.ui-theme-options{grid-template-columns:1fr 1fr}.hub-ui .page-heading{display:flex;flex-wrap:wrap}.hub-ui .page-heading h1{font-size:27px}}
@media(max-width:520px){.ui-tile-grid{grid-template-columns:1fr}.ui-tile{padding:18px}.ui-folder-tab{font-size:12px;min-height:47px;padding:12px 14px}.ui-folder-panel{padding:17px 13px}.ui-counter{display:none}.ui-theme-options{grid-template-columns:1fr}.ui-section-heading h2{font-size:18px}.hub-ui .stat{padding:17px 14px}.hub-ui .stat-number{font-size:31px}.hub-ui .stat-label{font-size:11px}.ui-course-row{flex-wrap:wrap}.ui-course-row>div{flex-basis:100%}.hub-ui .topbar-right .tag{font-size:8px;padding:5px 6px}.ui-crumb{font-size:10px}.hub-ui .brand{padding:8px;gap:7px}.hub-ui .brand img{width:132px}.hub-ui .brand span{font-size:12px}}
@media(prefers-reduced-motion:reduce){.ui-tile,.ui-stat-link,.ui-chevron{transition:none}}
@media print{html[data-theme=dark]{color-scheme:light;--ui-bg:white;--ui-surface:white;--ui-raised:white;--ui-text:#111;--ui-muted:#555;--ui-border:#bbb;--ui-red:#a00;--ink:#111;--paper:white;--white:white}.hub-ui .sidebar,.hub-ui .topbar,.ui-folder-tabs{display:none!important}.hub-ui .shell{display:block}.hub-ui .workspace{max-width:none;padding:0}}


/* 1.0.2: controls of the price editor follow the theme, never the printable artwork.
   Higher specificity than prices.css, which is intentionally loaded in page content. */
@media screen {
  html[data-theme=dark] .hub-ui .price-catalog,
  html[data-theme=dark] .hub-ui .price-template {
    background: var(--ui-raised);
    color: var(--ui-text);
    border-color: var(--ui-border);
  }
  html[data-theme=dark] .hub-ui .price-catalog strong,
  html[data-theme=dark] .hub-ui .price-template h3,
  html[data-theme=dark] .hub-ui .price-template p { color: var(--ui-text); }
  html[data-theme=dark] .hub-ui .price-catalog span,
  html[data-theme=dark] .hub-ui .price-catalog small,
  html[data-theme=dark] .hub-ui .price-template small { color: var(--ui-muted); }
  html[data-theme=dark] .hub-ui .price-catalog.selected {
    background: var(--ui-red-bg);
    border-color: var(--ui-red);
    box-shadow: inset 0 3px 0 var(--ui-red);
  }
  html[data-theme=dark] .hub-ui .price-catalog.selected strong,
  html[data-theme=dark] .hub-ui .price-template > span:last-child { color: var(--ui-red); }
  html[data-theme=dark] .hub-ui .price-catalog:hover,
  html[data-theme=dark] .hub-ui .price-template:hover { border-color: var(--ui-red); }
  html[data-theme=dark] .hub-ui .price-catalog:focus-visible {
    outline-color: var(--ui-focus);
  }
  html[data-theme=dark] .hub-ui .preview-state {
    background: var(--ui-raised); color: var(--ui-text); border-color: var(--ui-border);
  }
  html[data-theme=dark] .hub-ui .preview-state[data-state=error] {
    background: var(--ui-red-bg); color: var(--ui-red); border-color: var(--ui-red);
  }
  html[data-theme=dark] .hub-ui .preview-state[data-state=ok] {
    background: var(--ui-green-bg); color: var(--ui-green); border-color: var(--ui-green);
  }
  html[data-theme=dark] .hub-ui .trial-block {
    background: var(--ui-red-bg); color: var(--ui-text); border-color: var(--ui-red);
  }
  html[data-theme=dark] .hub-ui #layout-canvas {
    background: var(--ui-raised); border-color: var(--ui-border);
  }
}