@blukavantui/community 0.0.0-stage → 1.0.1

package/dist/data.css

@@ -0,0 +1,813 @@
+/* BluUI_Core → TreeView — Style Sheet.
+Canonical Block CSS. Paste the whole file into this Block only.
+Theme variables remain inherited; selectors keep the existing widget classes. */
+
+.blu-tree {
+  box-sizing: border-box;
+  min-width: 0;
+  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif);
+}
+
+/* TreeView — styles for markup created inside the empty TreeHost.
+BluUIRuntime owns roles, expanded/selected state, and keyboard navigation. */
+.blu-tree {
+  width: 100%;
+  color: var(--bluui-text, #182230);
+}
+
+.blu-tree :is(.blu-tree__list, .blu-tree__group) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Indent each child group logically so the hierarchy also follows RTL direction. */
+.blu-tree .blu-tree__group {
+  padding-inline-start: 22px;
+}
+
+/* Keep collapsed groups hidden even when a surrounding theme styles list display. */
+.blu-tree .blu-tree__group[hidden] {
+  display: none;
+}
+
+/* Focus is painted on the row below, instead of outlining its entire subtree. */
+.blu-tree .blu-tree__item {
+  margin: 0;
+  padding: 0;
+  outline: none;
+}
+
+.blu-tree .blu-tree__row {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  min-height: 38px;
+  padding: 6px 8px;
+  border-radius: 7px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.blu-tree .blu-tree__toggle {
+  flex: 0 0 24px;
+  text-align: center;
+}
+
+.blu-tree .blu-tree__label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: 14px;
+}
+
+/* Apply state styles only to this item's direct row; descendants have their own
+selection, focus, and disabled state. Focus does not imply selection. */
+.blu-tree .blu-tree__item[aria-selected="true"] > .blu-tree__row {
+  background: var(--bluui-primary-soft, #eef2ff);
+  color: var(--bluui-primary-text, #3730a3);
+  font-weight: 600;
+}
+
+.blu-tree .blu-tree__item:focus-visible > .blu-tree__row {
+  outline: 2px solid var(--bluui-primary, #4f46e5);
+  outline-offset: -2px;
+}
+
+.blu-tree .blu-tree__item[aria-disabled="true"] > .blu-tree__row {
+  opacity: .5;
+  cursor: default;
+}
+
+.blu-tree .blu-tree__item[aria-disabled="false"] > .blu-tree__row:hover {
+  background: var(--bluui-hover, #f1f5f9);
+}
+
+/* Shared empty-state text for TreeView and the two TransferList panels. */
+.blu-tree__empty {
+  padding: 12px;
+  color: var(--bluui-text-muted, #64748b);
+  font-size: 13px;
+}
+
+/* Shared error message — the native Expression receives role=alert in the guide. */
+.blu-tree .blu-component-error {
+  display: block;
+  margin-top: 8px;
+  color: var(--bluui-danger-text, #b42318);
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+/* Service Studio canvas previews
+Ordinary browsers hide these static stand-ins. The -servicestudio-*
+declarations expose them only in the design canvas. Put preview Containers
+beside the live host/List, never inside a JavaScript-owned host. */
+.blu-tree .blu-component-preview {
+  display: none;
+  -servicestudio-display: block;
+  -servicestudio-padding: 12px;
+  -servicestudio-border: 1px dashed var(--bluui-control-border, #cbd5e1);
+  -servicestudio-border-radius: 8px;
+}
+
+.blu-tree .blu-component-preview-line {
+  display: block;
+  padding: 5px;
+  color: var(--bluui-text-muted, #64748b);
+  font-size: 13px;
+}
+
+/* Shared controls used by this Block. Colors resolve through BluUITheme. */
+.blu-common-button{
+  appearance:none;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:8px;
+  min-height:36px;
+  padding:7px 13px;
+  border:1px solid var(--bluui-border,#dce3ed);
+  border-radius:8px;
+  background:var(--bluui-surface,#fff);
+  color:var(--bluui-text,#182333);
+  font:inherit;
+  font-size:13px;
+  font-weight:600;
+  line-height:1.4;
+  white-space:nowrap;
+  cursor:pointer;
+  text-decoration:none;
+  box-shadow:none
+}
+.blu-common-button:hover:not(:disabled){
+  background:var(--bluui-surface-muted,#f4f6fa);
+  border-color:var(--bluui-primary,#5144ed)
+}
+.blu-common-button--primary{
+  background:var(--bluui-color-primary-solid,#5144ed);
+  color:var(--bluui-color-primary-contrast,#fff);
+  border-color:transparent
+}
+.blu-common-button--primary:hover:not(:disabled){
+  background:var(--bluui-color-primary-solid,#5144ed);
+  filter:brightness(.93)
+}
+.blu-common-button:disabled{
+  opacity:.45;
+  cursor:not-allowed
+}
+.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
+  outline:3px solid var(--bluui-primary,#5144ed);
+  outline-offset:2px
+}
+.blu-common-muted{
+  color:var(--bluui-text-muted,#68758b);
+  font-size:14px
+}
+.blu-common-error{
+  color:var(--bluui-color-error-text,#b42318);
+  font-size:13px;
+  margin:8px 0
+}
+.blu-common-error[hidden]{
+  display:none!important
+}
+
+/* Activity rail. The connector is decorative; the ordered DOM conveys sequence. */
+.blu-timeline{
+  width:100%;
+  color:var(--bluui-text);
+  padding:4px 0
+}
+.blu-timeline__item{
+  display:grid;
+  grid-template-columns:28px minmax(0,1fr);
+  gap:16px;
+  position:relative;
+  padding-bottom:30px
+}
+.blu-timeline__item:not(:last-child):before{
+  content:"";
+  position:absolute;
+  left:13px;
+  top:29px;
+  bottom:2px;
+  width:2px;
+  background:var(--bluui-border)
+}
+.blu-timeline__marker{
+  z-index:1;
+  display:grid;
+  place-items:center;
+  width:28px;
+  height:28px;
+  border-radius:50%;
+  background:var(--blu-common-soft);
+  color:var(--blu-common-color);
+  border:2px solid var(--blu-common-color);
+  font-size:13px;
+  font-weight:700
+}
+.blu-timeline__marker:empty:after{
+  content:"";
+  width:6px;
+  height:6px;
+  background:currentColor;
+  border-radius:50%
+}
+.blu-timeline__copy h3{
+  margin:1px 0 6px;
+  font-size:15px;
+  line-height:1.5
+}
+.blu-timeline__copy p{
+  margin:0 0 10px;
+  color:var(--bluui-text-muted);
+  font-size:14px;
+  white-space:pre-wrap
+}
+.blu-timeline__time{
+  display:block;
+  font-size:12px;
+  color:var(--bluui-text-muted);
+  margin-bottom:4px
+}
+.blu-timeline--compact .blu-timeline__item{
+  padding-bottom:18px
+}
+.blu-timeline__item:last-child{
+  padding-bottom:0
+}
+
+/* Hide the canvas-only caption once this instance has initialized. */
+.blu-timeline-block:has([data-blu-ready]) > .blu-component-preview {
+  display: none;
+}
+
+/* Shared controls used by this Block. Colors resolve through BluUITheme. */
+.blu-common-button{
+  appearance:none;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:8px;
+  min-height:36px;
+  padding:7px 13px;
+  border:1px solid var(--bluui-border,#dce3ed);
+  border-radius:8px;
+  background:var(--bluui-surface,#fff);
+  color:var(--bluui-text,#182333);
+  font:inherit;
+  font-size:13px;
+  font-weight:600;
+  line-height:1.4;
+  white-space:nowrap;
+  cursor:pointer;
+  text-decoration:none;
+  box-shadow:none
+}
+.blu-common-button:hover:not(:disabled){
+  background:var(--bluui-surface-muted,#f4f6fa);
+  border-color:var(--bluui-primary,#5144ed)
+}
+.blu-common-button--primary{
+  background:var(--bluui-color-primary-solid,#5144ed);
+  color:var(--bluui-color-primary-contrast,#fff);
+  border-color:transparent
+}
+.blu-common-button--primary:hover:not(:disabled){
+  background:var(--bluui-color-primary-solid,#5144ed);
+  filter:brightness(.93)
+}
+.blu-common-button:disabled{
+  opacity:.45;
+  cursor:not-allowed
+}
+.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
+  outline:3px solid var(--bluui-primary,#5144ed);
+  outline-offset:2px
+}
+.blu-common-muted{
+  color:var(--bluui-text-muted,#68758b);
+  font-size:14px
+}
+.blu-common-error{
+  color:var(--bluui-color-error-text,#b42318);
+  font-size:13px;
+  margin:8px 0
+}
+.blu-common-error[hidden]{
+  display:none!important
+}
+
+/* Pagination wraps without squeezing the controls on narrow screens. */
+.blu-pagination{
+  display:flex;
+  align-items:center;
+  flex-wrap:wrap;
+  gap:16px;
+  width:100%;
+  color:var(--bluui-text);
+  font-size:13px;
+  font-variant-numeric:tabular-nums;
+  padding:12px 0
+}
+.blu-pagination__range{
+  color:var(--bluui-text-muted);
+  margin-right:auto
+}
+.blu-pagination__pages{
+  display:flex;
+  flex-wrap:wrap;
+  align-items:center;
+  gap:5px
+}
+.blu-pagination__pages .blu-common-button{
+  min-width:36px;
+  padding:7px 9px
+}
+.blu-pagination [aria-current=page]{
+  color:var(--bluui-color-primary-text);
+  background:var(--bluui-color-primary-soft);
+  border-color:var(--bluui-color-primary-border)
+}
+.blu-pagination__size{
+  display:flex;
+  align-items:center;
+  gap:8px
+}
+.blu-pagination select,.blu-pagination input{
+  font:inherit;
+  color:var(--bluui-text);
+  background:var(--bluui-surface);
+  border:1px solid var(--bluui-control-border);
+  border-radius:8px;
+  height:36px;
+  padding:4px 8px;
+  width:auto
+}
+.blu-pagination__jump{
+  display:flex;
+  gap:6px;
+  margin:0
+}
+.blu-pagination__jump input{
+  width:68px
+}
+.blu-pagination__current{
+  padding:0 8px
+}
+@media(max-width:600px){.blu-pagination__range{
+  width:100%
+}
+.blu-pagination{
+  gap:10px
+}
+.blu-pagination__pages{
+  gap:3px
+}}
+
+/* Hide the canvas-only caption once this instance has initialized. */
+.blu-pagination-block:has([data-blu-ready]) > .blu-component-preview {
+  display: none;
+}
+
+/* Shared controls used by this Block. Colors resolve through BluUITheme. */
+.blu-common-button{
+  appearance:none;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:8px;
+  min-height:36px;
+  padding:7px 13px;
+  border:1px solid var(--bluui-border,#dce3ed);
+  border-radius:8px;
+  background:var(--bluui-surface,#fff);
+  color:var(--bluui-text,#182333);
+  font:inherit;
+  font-size:13px;
+  font-weight:600;
+  line-height:1.4;
+  white-space:nowrap;
+  cursor:pointer;
+  text-decoration:none;
+  box-shadow:none
+}
+.blu-common-button:hover:not(:disabled){
+  background:var(--bluui-surface-muted,#f4f6fa);
+  border-color:var(--bluui-primary,#5144ed)
+}
+.blu-common-button--primary{
+  background:var(--bluui-color-primary-solid,#5144ed);
+  color:var(--bluui-color-primary-contrast,#fff);
+  border-color:transparent
+}
+.blu-common-button--primary:hover:not(:disabled){
+  background:var(--bluui-color-primary-solid,#5144ed);
+  filter:brightness(.93)
+}
+.blu-common-button:disabled{
+  opacity:.45;
+  cursor:not-allowed
+}
+.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
+  outline:3px solid var(--bluui-primary,#5144ed);
+  outline-offset:2px
+}
+.blu-common-muted{
+  color:var(--bluui-text-muted,#68758b);
+  font-size:14px
+}
+.blu-common-error{
+  color:var(--bluui-color-error-text,#b42318);
+  font-size:13px;
+  margin:8px 0
+}
+.blu-common-error[hidden]{
+  display:none!important
+}
+
+/* Metrics inherit surface from their containing Card. */
+.blu-statistic{
+  color:var(--bluui-text);
+  padding:8px 0;
+  min-width:0
+}
+.blu-statistic__label{
+  font-size:13px;
+  font-weight:500;
+  color:var(--bluui-text-muted);
+  margin-bottom:10px
+}
+.blu-statistic__value{
+  display:flex;
+  align-items:baseline;
+  gap:5px;
+  line-height:1.25;
+  color:var(--blu-common-color);
+  font-variant-numeric:tabular-nums;
+  flex-wrap:wrap
+}
+.blu-statistic__value strong{
+  font-size:36px;
+  letter-spacing:-.04em;
+  font-weight:650
+}
+.blu-statistic__affix{
+  font-size:20px;
+  font-weight:500
+}
+.blu-statistic__trend{
+  font-size:13px;
+  color:var(--bluui-text-muted);
+  margin:10px 0 0
+}
+.blu-statistic__trend span{
+  color:var(--blu-common-color);
+  font-weight:700
+}
+.blu-statistic__loading{
+  height:44px;
+  width:160px;
+  max-width:100%;
+  border-radius:8px;
+  background:var(--bluui-surface-muted)
+}
+
+/* Hide the canvas-only caption once this instance has initialized. */
+.blu-statistic-block:has([data-blu-ready]) > .blu-component-preview {
+  display: none;
+}
+
+/* Shared controls used by this Block. Colors resolve through BluUITheme. */
+.blu-common-button{
+  appearance:none;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:8px;
+  min-height:36px;
+  padding:7px 13px;
+  border:1px solid var(--bluui-border,#dce3ed);
+  border-radius:8px;
+  background:var(--bluui-surface,#fff);
+  color:var(--bluui-text,#182333);
+  font:inherit;
+  font-size:13px;
+  font-weight:600;
+  line-height:1.4;
+  white-space:nowrap;
+  cursor:pointer;
+  text-decoration:none;
+  box-shadow:none
+}
+.blu-common-button:hover:not(:disabled){
+  background:var(--bluui-surface-muted,#f4f6fa);
+  border-color:var(--bluui-primary,#5144ed)
+}
+.blu-common-button--primary{
+  background:var(--bluui-color-primary-solid,#5144ed);
+  color:var(--bluui-color-primary-contrast,#fff);
+  border-color:transparent
+}
+.blu-common-button--primary:hover:not(:disabled){
+  background:var(--bluui-color-primary-solid,#5144ed);
+  filter:brightness(.93)
+}
+.blu-common-button:disabled{
+  opacity:.45;
+  cursor:not-allowed
+}
+.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
+  outline:3px solid var(--bluui-primary,#5144ed);
+  outline-offset:2px
+}
+.blu-common-muted{
+  color:var(--bluui-text-muted,#68758b);
+  font-size:14px
+}
+.blu-common-error{
+  color:var(--bluui-color-error-text,#b42318);
+  font-size:13px;
+  margin:8px 0
+}
+.blu-common-error[hidden]{
+  display:none!important
+}
+
+/* Preserve scan contrast: QR modules always use black on white. */
+.blu-qr-code{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  gap:16px;
+  color:var(--bluui-text)
+}
+.blu-qr-code__frame{
+  position:relative;
+  border:1px solid var(--bluui-border);
+  border-radius:14px;
+  padding:12px;
+  background:#fff;
+  line-height:0
+}
+.blu-qr-code__frame svg{
+  max-width:100%;
+  height:auto;
+  display:block
+}
+.blu-qr-code__actions{
+  display:flex;
+  gap:8px;
+  flex-wrap:wrap;
+  justify-content:center
+}
+.blu-qr-code__expired{
+  position:absolute;
+  inset:0;
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+  align-items:center;
+  gap:14px;
+  line-height:1.4;
+  background:rgba(255,255,255,.9);
+  color:#182333;
+  border-radius:14px
+}
+.blu-qr-code--expired svg{
+  filter:blur(4px)
+}
+.blu-qr-code__loading{
+  display:grid;
+  place-items:center;
+  width:192px;
+  height:192px;
+  background:var(--bluui-surface-muted);
+  border-radius:14px;
+  color:var(--bluui-text-muted);
+  font-size:13px
+}
+
+/* Hide the canvas-only caption once this instance has initialized. */
+.blu-qr-code-block:has([data-blu-ready]) > .blu-component-preview {
+  display: none;
+}
+
+/* Expose the encoded text to people who cannot scan the image. */
+.blu-qr-code__value {
+  margin: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  font-size: 14px;
+  line-height: 1.5;
+  text-align: center;
+}
+
+/* Shared controls used by this Block. Colors resolve through BluUITheme. */
+.blu-common-button{
+  appearance:none;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:8px;
+  min-height:36px;
+  padding:7px 13px;
+  border:1px solid var(--bluui-border,#dce3ed);
+  border-radius:8px;
+  background:var(--bluui-surface,#fff);
+  color:var(--bluui-text,#182333);
+  font:inherit;
+  font-size:13px;
+  font-weight:600;
+  line-height:1.4;
+  white-space:nowrap;
+  cursor:pointer;
+  text-decoration:none;
+  box-shadow:none
+}
+.blu-common-button:hover:not(:disabled){
+  background:var(--bluui-surface-muted,#f4f6fa);
+  border-color:var(--bluui-primary,#5144ed)
+}
+.blu-common-button--primary{
+  background:var(--bluui-color-primary-solid,#5144ed);
+  color:var(--bluui-color-primary-contrast,#fff);
+  border-color:transparent
+}
+.blu-common-button--primary:hover:not(:disabled){
+  background:var(--bluui-color-primary-solid,#5144ed);
+  filter:brightness(.93)
+}
+.blu-common-button:disabled{
+  opacity:.45;
+  cursor:not-allowed
+}
+.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
+  outline:3px solid var(--bluui-primary,#5144ed);
+  outline-offset:2px
+}
+.blu-common-muted{
+  color:var(--bluui-text-muted,#68758b);
+  font-size:14px
+}
+.blu-common-error{
+  color:var(--bluui-color-error-text,#b42318);
+  font-size:13px;
+  margin:8px 0
+}
+.blu-common-error[hidden]{
+  display:none!important
+}
+
+/* Real definition-list semantics, responsive columns and optional full-width values. */
+.blu-descriptions{
+  width:100%;
+  color:var(--bluui-text)
+}
+.blu-descriptions>h3{
+  font-size:17px;
+  margin:0 0 16px
+}
+.blu-descriptions__grid{
+  display:grid;
+  grid-template-columns:repeat(var(--blu-description-columns,2),minmax(0,1fr));
+  margin:0;
+  gap:0
+}
+.blu-descriptions__item{
+  grid-column:span var(--blu-description-span,1);
+  padding:16px;
+  min-width:0
+}
+.blu-descriptions__item dt{
+  font-size:12px;
+  font-weight:600;
+  color:var(--bluui-text-muted);
+  margin-bottom:7px
+}
+.blu-descriptions__item dd{
+  margin:0;
+  font-size:14px;
+  line-height:1.6;
+  white-space:pre-wrap;
+  overflow-wrap:anywhere;
+  color:var(--blu-common-color)
+}
+.blu-descriptions__item dd button{
+  margin-left:12px
+}
+.blu-descriptions--bordered{
+  border:1px solid var(--bluui-border);
+  border-radius:12px;
+  overflow:hidden
+}
+.blu-descriptions--bordered .blu-descriptions__item{
+  border-bottom:1px solid var(--bluui-border);
+  background:var(--bluui-surface-muted)
+}
+@media(max-width:640px){.blu-descriptions__grid{
+  grid-template-columns:minmax(0,1fr)
+}
+.blu-descriptions__item{
+  grid-column:span 1
+}}
+
+/* Hide the canvas-only caption once this instance has initialized. */
+.blu-descriptions-block:has([data-blu-ready]) > .blu-component-preview {
+  display: none;
+}
+
+/* BluUI_Core / Sparkline. SVG scales with the container; colors inherit the
+   shared palette. Values are always exposed through an accessible summary. */
+.blu-sparkline { min-width: 0; width: 100%; color: var(--bluui-text); }
+.blu-sparkline svg { display: block; width: 100%; height: var(--blu-sparkline-height, 64px); overflow: visible; }
+.blu-sparkline__line { fill: none; stroke: var(--blu-sparkline-color); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+.blu-sparkline__area { fill: var(--blu-sparkline-color); opacity: .09; }
+.blu-sparkline__point { fill: var(--blu-sparkline-color); }
+.blu-sparkline__empty { margin: 0; min-height: var(--blu-sparkline-height, 64px); display: flex; align-items: center; color: var(--bluui-text-muted); }
+.blu-sparkline__data { margin-top: 8px; font-size: 13px; }
+.blu-sparkline__data summary { width: fit-content; padding: 6px 0; cursor: pointer; color: var(--bluui-color-primary-text); }
+.blu-sparkline__data table { border-collapse: collapse; width: 100%; margin-top: 8px; }
+.blu-sparkline__data :is(th,td) { padding: 6px 12px; border-bottom: 1px solid var(--bluui-border); text-align: start; }
+.blu-sparkline__data summary:focus-visible { outline: 2px solid var(--bluui-primary); outline-offset: 3px; }
+
+/* Keep the native design preview in Service Studio only after initialization. */
+.blu-sparkline-block:has([data-blu-ready]) > .blu-component-preview { display: none; }
+
+/* Optional five-second glow. Only a decorative copy changes opacity; the
+   underlying line stays sharp and readable in every theme. No permanent loop. */
+.blu-sparkline__glow {
+  fill: none;
+  stroke: var(--blu-sparkline-color);
+  stroke-width: 5;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  filter: blur(3px);
+  opacity: 0;
+  pointer-events: none;
+  animation: blu-sparkline-glow 5s ease-in-out 1 both;
+}
+@keyframes blu-sparkline-glow {
+  0%, 100% { opacity: 0; }
+  50% { opacity: .65; }
+}
+/* Respect the device preference and high-contrast rendering. */
+@media (prefers-reduced-motion: reduce), (forced-colors: active) {
+  .blu-sparkline__glow { display: none; animation: none; }
+}
+
+/* Shared control rules are scoped into each owning Block at build time.
+   Colors inherit BluUITheme; no screen or theme stylesheet additions are needed. */
+.blu-dashboard-canvas { box-sizing:border-box; width:100%; min-width:0; color:var(--bluui-text,#182230); font:14px/1.5 var(--blu-font-family,sans-serif); }
+.blu-dashboard-canvas *, .blu-dashboard-canvas *::before, .blu-dashboard-canvas *::after { box-sizing:border-box; }
+.blu-dashboard-canvas [hidden] { display:none !important; }
+.blu-dashboard-canvas .blu-platform__body { min-width:0; }
+.blu-dashboard-canvas .blu-platform__heading { margin:0 0 12px; font-size:18px; font-weight:650; line-height:1.4; }
+.blu-dashboard-canvas .blu-platform__toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 16px; }
+.blu-dashboard-canvas .blu-platform__toolbar > .blu-platform__heading { flex:1; margin:0; }
+.blu-dashboard-canvas .blu-platform__button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:7px 12px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:8px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); font:600 13px/1.4 var(--blu-font-family,sans-serif); cursor:pointer; text-decoration:none; }
+.blu-dashboard-canvas .blu-platform__button:hover:not(:disabled) { background:var(--bluui-hover,#f0f2f7); }
+.blu-dashboard-canvas .blu-platform__button[aria-pressed="true"] { color:var(--bluui-color-primary-text,#4338ca); border-color:var(--bluui-primary,#4f46e5); background:var(--bluui-color-primary-soft,#eef2ff); box-shadow:inset 0 0 0 1px var(--bluui-primary,#4f46e5); }
+.blu-dashboard-canvas .blu-platform__button--primary { background:var(--bluui-color-primary-solid,#4f46e5); border-color:var(--bluui-color-primary-solid,#4f46e5); color:var(--bluui-color-primary-contrast,#fff); }
+.blu-dashboard-canvas .blu-platform__button--primary:hover:not(:disabled) { background:var(--bluui-primary-hover,#4338ca); }
+.blu-dashboard-canvas .blu-platform__button:disabled, .blu-dashboard-canvas .blu-platform__input:disabled { cursor:default; background:var(--bluui-surface-muted,#f7f8fb); color:var(--bluui-text-muted,#5c6b80); border-color:var(--bluui-border,#e2e8f0); }
+.blu-dashboard-canvas :is(button,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid var(--bluui-primary,#4f46e5); outline-offset:3px; }
+.blu-dashboard-canvas .blu-platform__input { display:block; width:100%; min-width:0; min-height:38px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:7px; padding:8px 10px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); font:inherit; }
+.blu-dashboard-canvas .blu-platform__input[aria-invalid="true"] { border-color:var(--bluui-color-error-text,#a33133); }
+.blu-dashboard-canvas .blu-platform__field { display:flex; flex-direction:column; gap:6px; margin:0; min-width:0; }
+.blu-dashboard-canvas .blu-platform__label { font-size:12px; font-weight:600; }
+.blu-dashboard-canvas .blu-platform__muted { color:var(--bluui-text-muted,#5c6b80); font-size:12px; }
+.blu-dashboard-canvas .blu-platform__error { display:block; color:var(--bluui-color-error-text,#a33133); font-size:13px; overflow-wrap:anywhere; }
+.blu-dashboard-canvas .blu-platform__success { color:var(--bluui-color-success-text,#2d6c0e); }
+.blu-dashboard-canvas .blu-platform__status { color:var(--bluui-text-muted,#5c6b80); margin:10px 0 0; font-size:13px; }
+.blu-dashboard-canvas .blu-platform__status:empty { margin:0; }
+.blu-dashboard-canvas .blu-platform__empty { border:1px dashed var(--bluui-border-strong,#b8c4d4); border-radius:10px; padding:28px 20px; text-align:center; margin:12px 0; }
+.blu-dashboard-canvas .blu-platform__empty p { color:var(--bluui-text-muted,#5c6b80); margin:6px 0 0; }
+.blu-dashboard-canvas .blu-platform__savebar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; margin:0 0 16px; border:1px solid var(--bluui-color-primary-border,#c7d2fe); border-radius:10px; background:var(--bluui-color-primary-soft,#eef2ff); }
+.blu-dashboard-canvas .blu-platform__savebar > span { flex:1; min-width:100px; color:var(--bluui-color-primary-text,#4338ca); font-weight:600; }
+.blu-dashboard-canvas .blu-platform__count { border-radius:20px; padding:3px 8px; background:var(--bluui-color-primary-soft,#eef2ff); color:var(--bluui-color-primary-text,#4338ca); font-size:12px; }
+.blu-dashboard-canvas .blu-platform__sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
+@media (forced-colors:active) { .blu-dashboard-canvas .blu-platform__button[aria-pressed="true"] { outline:2px solid Highlight; } }
+
+/* Panels retain native content while order, spans and visibility change. */
+.blu-dashboard-canvas__grid { display:grid; grid-template-columns:repeat(var(--blu-dashboard-columns,12),minmax(0,1fr)); grid-auto-rows:var(--blu-dashboard-row,100px); grid-auto-flow:row; gap:16px; }
+.blu-dashboard-canvas__bridge { display:contents; }
+.blu-dashboard-canvas__panel { display:flex; flex-direction:column; grid-column:span var(--blu-dashboard-span,6); grid-row:span var(--blu-dashboard-rows,2); min-width:0; min-height:0; border:1px solid var(--bluui-border,#e2e8f0); border-radius:12px; background:var(--bluui-surface,#fff); box-shadow:0 2px 8px var(--bluui-shadow-color); }
+.blu-dashboard-canvas__panel-header { display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid var(--bluui-border,#e2e8f0); position:relative; }
+.blu-dashboard-canvas__panel-title { flex:1; font:600 14px/1.5 var(--blu-font-family,sans-serif); margin:0; }
+.blu-dashboard-panel__content { flex:1; min-height:0; min-width:0; overflow:auto; padding:16px; }
+.blu-dashboard-canvas__drag { touch-action:none; cursor:grab; font-size:21px; padding:4px 8px; }
+.blu-dashboard-canvas__settings > summary { cursor:pointer; font-size:12px; min-height:28px; display:flex; align-items:center; }
+.blu-dashboard-canvas__settings-body { position:absolute; z-index:30; top:calc(100% - 4px); right:8px; display:grid; grid-template-columns:1fr 1fr; gap:10px; width:260px; max-width:calc(100vw - 40px); border:1px solid var(--bluui-border-strong,#b8c4d4); border-radius:10px; padding:14px; background:var(--bluui-surface-raised,#fff); box-shadow:var(--bluui-menu-shadow); }
+.blu-dashboard-canvas__drop { outline:3px solid var(--bluui-primary,#4f46e5); outline-offset:3px; }
+.blu-dashboard-canvas__ghost { position:fixed; z-index:10000; max-height:240px; overflow:hidden; pointer-events:none; padding:16px; border:2px solid var(--bluui-primary,#4f46e5); border-radius:12px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); box-shadow:var(--bluui-menu-shadow); }
+@media(max-width:700px) { .blu-dashboard-canvas__grid { grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; } .blu-dashboard-canvas__panel { grid-column:1; grid-row:auto; min-height:180px; } .blu-dashboard-panel__content { max-height:400px; } }
+
+/* A visible design-time caption is hidden after the runtime mounts. */
+.blu-dashboard-canvas-block > .blu-component-preview { padding:20px; border:1px dashed var(--bluui-border-strong); color:var(--bluui-text-muted); border-radius:10px; }
+
+/* Native content wrapper; DashboardCanvas owns layout and panel chrome. */
+.blu-dashboard-panel__content { min-width:0; min-height:0; }