/* ERZEUGT von tools/build_bootcss.py aus dashy/theme.css — nicht von Hand aendern.
   Vollstaendiges Theme fuer das erste Bild, bevor Dashy theme.css nachlaedt.
   Selektoren auf html:root gezogen; theme.css gewinnt spaeter ueber die
   Dokumentreihenfolge. Der Dienst dashy-boot haengt beim Containerstart die
   Laderegeln des laufenden Images an und schreibt loading-screen.css.
   Begruendung im Kopf des Erzeugers. */


@font-face {
  font-family: 'Bricolage';
  src: url('/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'PublicSans';
  src: url('/fonts/public-sans.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
html:root {          
  
  --sd-font-display: 'Bricolage', ui-sans-serif, system-ui, sans-serif;
  --sd-font-body:    'PublicSans', ui-sans-serif, system-ui, sans-serif;
  --sd-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  
  --sd-scale: 1;
  --sd-size:  1;

  
  --sd-r-lg: 20px;
  --sd-r-md: 14px;
  --sd-r-sm: 10px;
  --sd-gap:  6px;
}
html:root,
html:root .there-are-items {
  --sd-f: calc(var(--sd-scale) * var(--sd-size));
  --sd-icon:     clamp(calc(58px   * var(--sd-f)), calc(4.0vw  * var(--sd-f)), calc(84px  * var(--sd-f)));
  --sd-cell:     clamp(calc(146px  * var(--sd-f)), calc(10.2vw * var(--sd-f)), calc(192px * var(--sd-f)));
  
  --sd-fl: calc(1 + (var(--sd-f) - 1) * .55);
  --sd-label:    clamp(calc(13.5px * var(--sd-fl)), calc(0.92vw * var(--sd-fl)), calc(16px  * var(--sd-fl)));
  --sd-tile-pad: clamp(calc(16px   * var(--sd-f)), calc(1.1vw  * var(--sd-f)), calc(22px  * var(--sd-f)));
}
html:root .there-are-items.inner-size-small { --sd-size: .78; }
html:root .there-are-items.inner-size-medium { --sd-size: 1; }
html:root .there-are-items.inner-size-large { --sd-size: 1.28; }
html:root {
  --sd-ground:      #0b1116;
  --sd-ground-2:    #101d24;
  --sd-panel:       #141c23;   
  --sd-field:       #0a1014;

  --sd-surface-1:   rgba(255, 255, 255, .045);
  --sd-surface-2:   rgba(255, 255, 255, .085);
  --sd-surface-3:   rgba(255, 255, 255, .13);

  --sd-edge:        rgba(255, 255, 255, .085);
  --sd-edge-strong: rgba(255, 255, 255, .17);

  --sd-ink-1:       #e9eff2;
  --sd-ink-2:       #97a7b1;
  --sd-ink-3:       #6d7d87;

  --sd-accent:      #e09a5a;
  --sd-accent-ink:  #16222b;

  --sd-shadow:      0 14px 40px rgba(0, 0, 0, .45);
  --sd-shadow-sm:   0 6px 18px rgba(0, 0, 0, .32);
  --sd-icon-shadow: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));

  
  --sd-ok:    #5fc98a;
  --sd-warn:  #d9b45a;
  --sd-err:   #f07a6e;
  --sd-info:  #7fb6cf;

  --sd-mesh-warm:   rgba(224, 154, 90, .20);
  --sd-mesh-sea:    rgba(40, 100, 128, .30);
  --sd-mesh-deep:   rgba(18, 44, 60, .34);
}
html:root {
  
  --primary:            var(--sd-ink-1);
  --background:         var(--sd-ground);
  --background-darker:  var(--sd-panel);
  --curve-factor:       var(--sd-r-md);
  --dimming-factor:     .72;

  
  --foreground:         var(--sd-ink-1);
  --curve-factor-navbar: var(--sd-r-lg);
  --curve-factor-small:  var(--sd-r-sm);
  --outline-color:       transparent;
  --medium-grey:         var(--sd-ink-3);

  
  --font-body:      var(--sd-font-body);
  --font-headings:  var(--sd-font-display);
  --font-monospace: var(--sd-font-mono);

  
  --item-background:        transparent;
  --item-background-hover:  var(--sd-surface-2);
  --item-text-color:        var(--sd-ink-2);
  --item-text-color-hover:  var(--sd-ink-1);
  --item-shadow:            none;
  --item-hover-shadow:      none;
  --item-icon-transform:       var(--sd-icon-shadow);
  --item-icon-transform-hover: var(--sd-icon-shadow);

  
  --item-group-background:        var(--sd-surface-1);
  --item-group-outer-background:  transparent;
  --item-group-heading-text-color: var(--sd-ink-1);
  --item-group-padding:           0;
  --item-group-shadow:            none;

  
  --widget-text-color:       var(--sd-ink-1);
  --widget-background-color: var(--sd-surface-1);
  --widget-accent-color:     transparent;
  --widget-base-background:  transparent;

  
  --search-container-background: transparent;
  --search-field-background:     var(--sd-surface-1);
  --search-label-color:          var(--sd-ink-3);

  
  --heading-text-color:              var(--sd-ink-1);
  --nav-link-text-color:             var(--sd-ink-2);
  --nav-link-background-color:       var(--sd-surface-1);
  --nav-link-border-color:           var(--sd-edge);
  --nav-link-shadow:                 none;
  --nav-link-text-color-hover:       var(--sd-ink-1);
  --nav-link-background-color-hover: var(--sd-surface-2);
  --nav-link-border-color-hover:     var(--sd-edge-strong);
  --nav-link-shadow-hover:           none;

  
  --footer-background:     transparent;
  --footer-text-color-link: var(--sd-accent);

  
  --settings-text-color:        var(--sd-ink-2);
  --settings-background:        var(--sd-panel);
  --settings-container-shadow:  none;

  --config-settings-color:      var(--sd-ink-1);
  --config-settings-background: var(--sd-panel);
  --config-code-color:          var(--sd-ink-1);
  --config-code-background:     var(--sd-field);
  --code-editor-color:          var(--sd-ink-1);
  --code-editor-background:     var(--sd-field);

  --interactive-editor-color:             var(--sd-ink-1);
  --interactive-editor-background:        var(--sd-field);
  --interactive-editor-background-darker: var(--sd-panel);

  --cloud-backup-color:      var(--sd-ink-1);
  --cloud-backup-background: var(--sd-panel);

  
  --context-menu-background:       var(--sd-panel);
  --context-menu-color:            var(--sd-ink-2);
  --context-menu-secondary-color:  var(--sd-surface-2);
  --context-menu-shadow:           var(--sd-shadow);

  
  --welcome-popup-background:        var(--sd-panel);
  --welcome-popup-text-color:        var(--sd-ink-1);
  --status-check-tooltip-background: var(--sd-panel);
  --status-check-tooltip-color:      var(--sd-ink-1);
  --loading-screen-background:       var(--sd-ground);
  --loading-screen-color:            var(--sd-ink-2);

  
  --highlight-background: var(--sd-accent);
  --highlight-color:      var(--sd-accent-ink);

  
  --scroll-bar-color:      var(--sd-surface-3);
  --scroll-bar-background: transparent;
  --scroll-bar-width:      10px;

  
  --side-bar-background:         var(--sd-panel);
  --side-bar-background-lighter: var(--sd-surface-1);
  --side-bar-color:              var(--sd-ink-2);
  --side-bar-item-background:    transparent;
  --side-bar-item-color:         var(--sd-ink-2);
  --workspace-web-content-background: var(--sd-ground);

  
  --minimal-view-background-color:         var(--sd-ground);
  --minimal-view-title-color:              var(--sd-ink-1);
  --minimal-view-settings-color:           var(--sd-ink-2);
  --minimal-view-section-heading-color:    var(--sd-ink-2);
  --minimal-view-section-heading-background: var(--sd-surface-1);
  --minimal-view-search-background:        var(--sd-surface-1);
  --minimal-view-search-color:             var(--sd-ink-1);
  --minimal-view-group-color:              var(--sd-ink-1);
  --minimal-view-group-background:         var(--sd-surface-1);

  
  --login-form-color:      var(--sd-ink-1);
  --login-form-background: var(--sd-panel);
}
html:root .base-theme-wrapper,
html:root {
  --success: var(--sd-ok);
  --warning: var(--sd-warn);
  --danger:  var(--sd-err);
  --info:    var(--sd-info);
  --neutral: var(--sd-surface-2);
}
html:root body {
  background:
    radial-gradient(62% 55% at 12% 6%,   var(--sd-mesh-warm), transparent 62%),
    radial-gradient(58% 52% at 88% 12%,  var(--sd-mesh-sea),  transparent 60%),
    radial-gradient(72% 60% at 50% 104%, var(--sd-mesh-deep), transparent 64%),
    linear-gradient(180deg, var(--sd-ground), var(--sd-ground-2));
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.006em;
}
html:root .home,
html:root .minimal-home { background: transparent; }
html:root .dashy-toast {
  background: var(--sd-panel) !important;
  color: var(--sd-ink-1) !important;
  border: 1px solid var(--sd-edge) !important;
  border-radius: var(--sd-r-md) !important;
  box-shadow: var(--sd-shadow) !important;
  font-family: var(--sd-font-body) !important;
}
html:root .dashy-toast__close { color: var(--sd-ink-3) !important; }
html:root .dashy-toast--success { border-left: 3px solid var(--success) !important; }
html:root .dashy-toast--error { border-left: 3px solid var(--danger) !important; }
html:root .tooltip-inner {
  background: var(--sd-panel);
  color: var(--sd-ink-1);
  border: 1px solid var(--sd-edge);
  border-radius: var(--sd-r-sm);
  box-shadow: var(--sd-shadow-sm);
  font-family: var(--sd-font-body);
  font-size: 12px;
  padding: 7px 10px;
}
html:root .tooltip-arrow { border-color: var(--sd-panel); }
html:root footer {
  color: var(--sd-ink-3);
  font-family: var(--sd-font-body);
  font-size: 12px;
}
html:root .about-modal {
  background: var(--sd-panel);
  color: var(--sd-ink-1);
  font-family: var(--sd-font-body);
}
html:root .about-modal a { color: var(--sd-accent); }
html:root .cm-editor {
  background: var(--sd-field);
  color: var(--sd-ink-1);
  font-family: var(--sd-font-mono);
  border-radius: var(--sd-r-sm);
}
html:root .cm-gutters {
  background: var(--sd-panel);
  color: var(--sd-ink-3);
  border-right: 1px solid var(--sd-edge);
}
html:root .cm-activeLine { background: var(--sd-surface-1); }
html:root .cm-activeLineGutter { background: var(--sd-surface-1); color: var(--sd-ink-2); }
html:root .cm-cursor { border-left-color: var(--sd-accent); }
html:root .cm-selectionBackground { background: var(--sd-surface-3) !important; }
html:root .cm-panels { background: var(--sd-panel); color: var(--sd-ink-2); }
html:root .cm-tooltip {
  background: var(--sd-panel); color: var(--sd-ink-1);
  border: 1px solid var(--sd-edge); border-radius: var(--sd-r-sm);
}
html:root .options-panel {
  background: var(--sd-panel);
  border: 1px solid var(--sd-edge);
  border-radius: var(--sd-r-lg);
  box-shadow: var(--sd-shadow);
  padding: 6px;
}
html:root .panel-header h3 {
  font-family: var(--sd-font-display);
  font-size: 15px; font-weight: 600; color: var(--sd-ink-1);
}
html:root .edit-mode-bottom-banner .edit-banner-section button,
html:root .edit-mode-bottom-banner .edit-config-file-btn,
html:root .edit-mode-bottom-banner .save-app-config-btn,
html:root .main-tab .config-button,
html:root .yaml-button,
html:root .icon-btn,
html:root .auth-btn,
html:root .save-button,
html:root .confirm-dialog .actions button,
html:root .save-cancel-btn-container button {
  background: var(--sd-surface-2);
  border: 1px solid var(--sd-edge);
  border-radius: var(--sd-r-sm);
  color: var(--sd-ink-2);
  font-family: var(--sd-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.008em;
  padding: 9px 14px;
  box-shadow: none;
  text-shadow: none;
  transition: background .13s ease, color .13s ease, border-color .13s ease;
}
html:root .edit-mode-bottom-banner .edit-banner-section button:hover,
html:root .main-tab .config-button:hover,
html:root .edit-mode-bottom-banner .save-app-config-btn:hover,
html:root .confirm-dialog .actions button:hover {
  background: var(--sd-surface-3);
  color: var(--sd-ink-1);
  border-color: var(--sd-edge-strong);
}
html:root .save-cancel-btn-container button:first-child,
html:root .confirm-dialog .actions .confirm,
html:root .primary-action {
  background: var(--sd-accent) !important;
  color: var(--sd-accent-ink) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}
html:root .edit-mode-top-banner {
  background: var(--sd-accent);
  color: var(--sd-accent-ink);
  font-family: var(--sd-font-body);
  font-size: 12px;
  font-weight: 600;
  border: none;
}
html:root .edit-mode-bottom-banner {
  background: var(--sd-panel);
  border: 1px solid var(--sd-edge);
  border-bottom: none;
  border-radius: var(--sd-r-lg) var(--sd-r-lg) 0 0;
  box-shadow: var(--sd-shadow);
  padding: 16px 20px;
  font-family: var(--sd-font-body);
}
html:root .edit-mode-intro {
  font-family: var(--sd-font-body);
  color: var(--sd-ink-2);
  font-size: 12px;
}
html:root .edit-mode-intro.l-1 {
  font-family: var(--sd-font-display);
  font-size: 14px; font-weight: 600; color: var(--sd-ink-1);
}
html:root .section-sub-title {
  font-family: var(--sd-font-body);
  font-size: 11px; font-weight: 600; color: var(--sd-ink-3);
  text-transform: none; letter-spacing: .02em;
}
html:root .modal-overlay { background: rgba(4, 8, 11, .72); }
html:root dialog.dashy-modal,
html:root dialog.confirm-dialog {
  background: var(--sd-panel);
  border: 1px solid var(--sd-edge);
  border-radius: var(--sd-r-lg);
  box-shadow: var(--sd-shadow);
  color: var(--sd-ink-1);
  font-family: var(--sd-font-body);
  max-width: min(780px, 94vw);
}
html:root .edit-item-inner h3.title,
html:root .confirm-dialog h3.title {
  font-family: var(--sd-font-display);
  font-size: 17px; font-weight: 600; letter-spacing: -.02em;
  color: var(--sd-ink-1); text-shadow: none;
}
html:root .edit-item-inner p.sub-title {
  font-size: 12px; color: var(--sd-ink-3);
}
html:root .input-label,
html:root .options-label {
  font-family: var(--sd-font-body);
  font-size: 11px; font-weight: 600; color: var(--sd-ink-3);
  text-transform: none; letter-spacing: .02em;
}
html:root .input-field,
html:root .edit-item-inner input,
html:root .edit-item-inner select {
  background: var(--sd-field);
  border: 1px solid var(--sd-edge);
  border-radius: var(--sd-r-sm);
  color: var(--sd-ink-1);
  font-family: var(--sd-font-body);
  font-size: 13px;
  padding: 10px 12px;
  box-shadow: none;
}
html:root .input-field:focus,
html:root .edit-item-inner input:focus {
  outline: none; border-color: var(--sd-accent);
}
html:root .input-description {
  font-family: var(--sd-font-body); font-size: 11px; color: var(--sd-ink-3);
}
html:root .action-btn,
html:root .view-btn,
html:root .btn {
  
  background: var(--sd-surface-2) !important;
  border: 1px solid var(--sd-edge) !important;
  border-radius: var(--sd-r-sm) !important;
  color: var(--sd-ink-2) !important;
  font-family: var(--sd-font-body) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html:root .action-btn:hover,
html:root .view-btn:hover {
  background: var(--sd-surface-3); color: var(--sd-ink-1);
}
html:root .action-btn.is-primary,
html:root .view-btn.is-active {
  background: var(--sd-accent); color: var(--sd-accent-ink); border-color: transparent;
}
html:root .display-options svg.layout-icon,
html:root svg.color-button {
  box-sizing: border-box;
  width: 32px; height: 29px; padding: 7px;
  border-radius: var(--sd-r-sm);
  background: var(--sd-surface-2);
  border: 1px solid var(--sd-edge);
  color: var(--sd-ink-2);
}
html:root .display-options svg.layout-icon.selected {
  background: var(--sd-accent); color: var(--sd-accent-ink); border-color: transparent;
}
html:root .add-field-tag {
  background: var(--sd-surface-2);
  border: 1px solid var(--sd-edge);
  border-radius: 999px;
  color: var(--sd-ink-3);
  font-family: var(--sd-font-body);
  font-size: 11px;
  padding: 5px 11px;
}
html:root * {
  scrollbar-width: thin;
  scrollbar-color: var(--sd-surface-3) transparent;
}
html:root .item-group-container { isolation: isolate; }
html:root header,
html:root .settings-outer { position: relative; z-index: 60; }
html:root .item-group-container {
  max-width: none !important;
  width: 100%;
  padding-inline: clamp(16px, 2vw, 40px);
  box-sizing: border-box;
}
html:root header {
  background: transparent;
  box-shadow: none;
  padding: 24px clamp(16px, 2vw, 40px) 4px;
}
html:root .page-titles h1 {
  font-family: var(--sd-font-display);
  font-size: 30px; font-weight: 700; letter-spacing: -.03em;
  margin: 0; text-shadow: none;
}
html:root .page-titles .subtitle {
  font-size: 13px; color: var(--sd-ink-3); letter-spacing: 0;
}
html:root .settings-outer {
  display: flex; align-items: center; justify-content: center;
  background: transparent; box-shadow: none; border: none;
  padding: 2px clamp(16px, 2vw, 40px) 24px;
}
html:root form.normal {
  width: 100%; max-width: 760px; margin: 0 auto;
  background: transparent; box-shadow: none; border: none;
}
html:root form.normal > label { display: none; }
html:root .options-outer {
  position: absolute; right: clamp(16px, 2vw, 40px); top: 50%;
  transform: translateY(-50%); width: auto;
}
html:root #filter-tiles {
  box-sizing: border-box; width: 100%;
  font-family: var(--sd-font-body); font-size: 17px;
  border: 1px solid var(--sd-edge); border-radius: var(--sd-r-md);
  padding: 15px 19px; box-shadow: var(--sd-shadow-sm);
}
html:root #filter-tiles:focus {
  outline: none; border-color: var(--sd-accent); background: var(--sd-surface-2);
}
html:root .collapsable {
  box-sizing: border-box;
  border: 1px solid var(--sd-edge);
  border-radius: var(--sd-r-lg);
  box-shadow: var(--sd-shadow);
  padding: 18px 16px 16px;
  margin: 0 0 18px;
}
html:root .section-header {
  background: transparent; border: none; box-shadow: none;
  padding: 0 4px 14px; gap: 9px;
}
html:root .section-header h3 {
  font-family: var(--sd-font-display);
  font-size: 17px; font-weight: 600; letter-spacing: -.012em;
  margin: 0; text-shadow: none;
}
html:root .section-icon * {
  color: var(--sd-ink-3); fill: var(--sd-ink-3);
  width: 15px; height: 15px; font-size: 15px;
}
html:root .section-header .header-action { opacity: 0; transition: opacity .15s ease; }
html:root .collapsable:hover .header-action { opacity: .45; }
html:root .there-are-items {
  
  grid-template-columns: repeat(auto-fill, minmax(var(--sd-cell), 1fr)) !important;
  gap: var(--sd-gap);
}
html:root .item {
  box-sizing: border-box;
  display: flex; flex-direction: column-reverse;
  align-items: center; justify-content: flex-end;
  gap: calc(var(--sd-tile-pad) * .5);
  padding: var(--sd-tile-pad) 6px calc(var(--sd-tile-pad) * .8);
  border: 1px solid transparent; border-radius: var(--sd-r-md);
  
  height: auto !important; max-height: none !important; min-height: 0 !important;
}
html:root .item:hover { border-color: var(--sd-edge); }
html:root .item:focus-visible {
  outline: 2px solid var(--sd-accent); outline-offset: 2px;
}
html:root .item-wrapper { height: auto; min-height: 0; }
html:root .item .item-icon {
  box-sizing: border-box;
  width: var(--sd-icon); height: var(--sd-icon);
  max-width: none; max-height: none;
  display: flex; align-items: center; justify-content: center;
}
html:root .item .tile-icon {
  width: var(--sd-icon); height: var(--sd-icon);
  max-width: var(--sd-icon); max-height: var(--sd-icon);
  font-size: calc(var(--sd-icon) * .82);
  object-fit: contain; margin: 0;
}
html:root .item .tile-title {
  width: 100%; height: auto; max-height: none; overflow: visible;
  background: transparent; padding: 0;
}
html:root .item .tile-title .text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  white-space: normal; overflow: hidden; overflow-wrap: break-word; hyphens: auto;
  min-height: 2.5em; text-align: center;
  font-family: var(--sd-font-body); font-size: var(--sd-label);
  font-weight: 480; line-height: 1.28; text-shadow: none;
}
html:root .item .description { display: none !important; }
html:root .content-inner .widget-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  
  align-items: stretch;
}
html:root .content-inner .widget-base {
  box-sizing: border-box; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--sd-surface-1);
  border: 1px solid var(--sd-edge);
  border-radius: var(--sd-r-md);
  padding: 14px 16px;
  min-width: 0;
}
html:root .widget-base .update-btn {
  position: absolute; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  top: 7px; right: 7px; border-radius: var(--sd-r-sm);
  opacity: 0; transition: opacity .15s ease;
}
html:root .widget-base:hover .update-btn { opacity: .6; }
html:root .widget-base .update-btn svg { width: 11px; height: 11px; margin: 0; }
html:root .clock {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
html:root .clock .upper {
  background: transparent; border: none; padding: 0; width: auto;
  display: flex; align-items: baseline; justify-content: center; gap: 7px;
}
html:root .clock .city {
  font-family: var(--sd-font-body); font-size: 12px; font-weight: 620;
  color: var(--sd-ink-1); margin: 0; white-space: nowrap;
}
html:root .clock .date {
  font-family: var(--sd-font-body); font-size: 11px; font-weight: 430;
  color: var(--sd-ink-3); margin: 0; white-space: nowrap;
}
html:root .clock .time {
  font-family: var(--sd-font-display);
  font-size: 44px; font-weight: 500; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; line-height: 1.05; margin: 4px 0 0;
  text-shadow: none;
}
html:root .widget-base:first-child .clock .time { color: var(--sd-accent); }
html:root .customapi-wrapper .row {
  border: none; background: none; padding: 3px 0;
}
html:root .customapi-wrapper .lbl {
  font-family: var(--sd-font-body); font-size: 12.5px; color: var(--sd-ink-3);
}
html:root .customapi-wrapper .val {
  font-family: var(--sd-font-body); font-size: 13.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--sd-ink-1);
}
@media (max-width: 779px) {
html:root .options-outer {
    top: -46px; right: 14px; transform: none;
  }
html:root .collapsable { padding: 14px 11px; margin-bottom: 14px; }
html:root .clock .time { font-size: 38px; }
}
@media (max-width: 599px) {
html:root,
html:root .there-are-items {
    
    --sd-icon: clamp(46px, 12.5vw, 60px);
    --sd-cell: clamp(90px, 25vw, 128px);
    --sd-label: 12.5px;
    --sd-tile-pad: 13px;
  }
html:root .page-titles h1 { font-size: 24px; }
}
@media (min-width: 1780px) {
html:root .widget-list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
html:root * { transition: none !important; animation: none !important; }
}
html:root .edit-mode-bottom-banner button,
html:root .dashy-modal button:not(.add-field-tag),
html:root .confirm-dialog button,
html:root .options-panel button:not(.close-btn) {
  background: var(--sd-surface-2) !important;
  border: 1px solid var(--sd-edge) !important;
  border-radius: var(--sd-r-sm) !important;
  color: var(--sd-ink-2) !important;
  font-family: var(--sd-font-body) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html:root .edit-mode-bottom-banner button:hover,
html:root .dashy-modal button:not(.add-field-tag):hover,
html:root .confirm-dialog button:hover,
html:root .options-panel button:not(.close-btn):hover {
  background: var(--sd-surface-3) !important;
  color: var(--sd-ink-1) !important;
  border-color: var(--sd-edge-strong) !important;
}
html:root .options-panel .action-btn.is-primary,
html:root .options-panel .view-btn.is-active,
html:root .confirm-dialog .confirm {
  background: var(--sd-accent) !important;
  color: var(--sd-accent-ink) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}
html:root {          
  --sd-s1: 4px;  --sd-s2: 8px;  --sd-s3: 12px;
  --sd-s4: 16px; --sd-s5: 20px; --sd-s6: 24px; --sd-s7: 32px;
  --sd-ctrl-h: 38px;                 
  --sd-track: var(--sd-field);       
}
html:root .options-panel {
  padding: 0 0 var(--sd-s4) !important;
  overflow: hidden;
}
html:root .options-panel .panel-header {
  padding: var(--sd-s5) var(--sd-s5) var(--sd-s4) !important;
  border-bottom: 1px solid var(--sd-edge);
  margin-bottom: var(--sd-s5);
}
html:root .options-panel .section {
  padding: 0 var(--sd-s5) !important;
  margin-bottom: var(--sd-s5) !important;
  background: transparent !important;
  border: none !important;
}
html:root .options-panel .section:last-child { margin-bottom: 0 !important; }
html:root .options-panel .options-label,
html:root .options-panel .theme-label {
  display: block;
  margin-bottom: var(--sd-s2) !important;
  font-family: var(--sd-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  color: var(--sd-ink-3) !important;
  text-transform: none !important;
}
html:root .options-panel .actions-row { gap: var(--sd-s2); }
html:root .options-panel .action-btn {
  height: var(--sd-ctrl-h) !important;
  padding: 0 var(--sd-s3) !important;
  gap: var(--sd-s2);
  font-size: 13px !important;
}
html:root .options-panel .display-options,
html:root .options-panel .view-switch-row {
  display: flex !important;
  gap: var(--sd-s1) !important;
  background: var(--sd-track) !important;
  border: 1px solid var(--sd-edge) !important;
  border-radius: var(--sd-r-sm) !important;
  padding: var(--sd-s1) !important;
}
html:root .options-panel .display-options svg.layout-icon {
  flex: 1 1 0 !important;
  width: auto !important;
  height: 30px !important;
  padding: 7px !important;
  background: transparent !important;
  border: none !important;
  border-radius: calc(var(--sd-r-sm) - 2px) !important;
  color: var(--sd-ink-3) !important;
}
html:root .options-panel .display-options svg.layout-icon:hover {
  color: var(--sd-ink-1) !important;
  background: var(--sd-surface-2) !important;
}
html:root .options-panel .display-options svg.layout-icon.selected {
  background: var(--sd-surface-3) !important;
  color: var(--sd-ink-1) !important;
  
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28) !important;
}
html:root .options-panel .view-switch-row .view-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 46px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  background: transparent !important;
  border: none !important;
  border-radius: calc(var(--sd-r-sm) - 2px) !important;
  color: var(--sd-ink-3) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}
html:root .options-panel .view-switch-row .view-btn:hover {
  color: var(--sd-ink-1) !important; background: var(--sd-surface-2) !important;
}
html:root .options-panel .view-switch-row .view-btn.is-active {
  background: var(--sd-surface-3) !important;
  color: var(--sd-ink-1) !important;
  
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28) !important;
}
html:root .theme-selector-section {
  display: flex !important; align-items: flex-end !important; gap: var(--sd-s2) !important;
}
html:root .theme-dropdown .vs__dropdown-toggle {
  display: flex !important; align-items: center !important;
  min-height: var(--sd-ctrl-h) !important;
  padding: 0 var(--sd-s3) !important;
  background: var(--sd-field) !important;
  border: 1px solid var(--sd-edge) !important;
  border-radius: var(--sd-r-sm) !important;
}
html:root .theme-dropdown .vs__selected-options {
  display: flex !important; align-items: center !important; padding: 0 !important; flex-wrap: nowrap !important;
}
html:root .theme-dropdown .vs__selected {
  position: static !important; margin: 0 !important; padding: 0 !important; border: none !important;
  color: var(--sd-ink-1) !important; font-family: var(--sd-font-body) !important; font-size: 13px !important;
}
html:root .theme-dropdown .vs__search {
  margin: 0 !important; padding: 0 !important; height: auto !important; min-width: 0 !important;
  border: none !important; color: var(--sd-ink-1) !important; font-size: 13px !important;
}
html:root .theme-dropdown .vs__actions { padding: 0 0 0 var(--sd-s2) !important; }
html:root .theme-dropdown .vs__open-indicator { fill: var(--sd-ink-3) !important; }
html:root .theme-dropdown .vs__dropdown-menu {
  background: var(--sd-panel) !important; border: 1px solid var(--sd-edge) !important;
  border-radius: var(--sd-r-sm) !important; box-shadow: var(--sd-shadow) !important; padding: var(--sd-s1) !important;
}
html:root .theme-dropdown .vs__dropdown-option {
  color: var(--sd-ink-2) !important; font-size: 13px !important;
  border-radius: calc(var(--sd-r-sm) - 3px) !important; padding: var(--sd-s2) var(--sd-s3) !important;
}
html:root .theme-dropdown .vs__dropdown-option--highlight {
  background: var(--sd-surface-3) !important; color: var(--sd-ink-1) !important;
}
html:root .theme-selector-section svg.color-button {
  box-sizing: border-box !important;
  width: var(--sd-ctrl-h) !important; height: var(--sd-ctrl-h) !important;
  padding: 10px !important; flex: none !important;
}
html:root .edit-mode-bottom-banner {
  
  box-sizing: border-box !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--sd-s7) !important;
  padding: var(--sd-s5) var(--sd-s6) !important;
}
html:root .edit-mode-bottom-banner * { box-sizing: border-box; }
html:root .edit-mode-bottom-banner .edit-banner-section {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--sd-s2) !important;
}
html:root .edit-mode-bottom-banner .intro-container {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--sd-s1) !important;
  
  flex: 1 1 32ch;
  min-width: 22ch;
  max-width: 46ch;
}
html:root .edit-mode-intro.l-1 {
  font-family: var(--sd-font-display) !important;
  font-size: 15px !important; font-weight: 600 !important;
  letter-spacing: -.015em !important; color: var(--sd-ink-1) !important; margin: 0 !important;
}
html:root .edit-mode-intro.l-2 {
  font-size: 12.5px !important; line-height: 1.45 !important;
  color: var(--sd-ink-3) !important; margin: 0 !important;
}
html:root .edit-mode-bottom-banner .edit-config-buttons-container,
html:root .edit-mode-bottom-banner .save-buttons-container {
  flex-direction: row !important;
  align-items: center !important;
  align-content: flex-start !important;
  max-width: 420px;
}
html:root .edit-mode-bottom-banner .section-sub-title {
  flex: 1 0 100% !important;
  margin: 0 0 var(--sd-s1) !important;
  font-size: 11px !important; font-weight: 600 !important;
  color: var(--sd-ink-3) !important; letter-spacing: .01em !important;
}
html:root .edit-mode-bottom-banner button {
  height: var(--sd-ctrl-h) !important;
  padding: 0 var(--sd-s3) !important;
  gap: var(--sd-s2) !important;
  font-size: 12.5px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html:root .edit-mode-bottom-banner .empty-space { flex: 1 1 auto !important; }
html:root .edit-mode-bottom-banner .save-buttons-container button:nth-child(3) {
  background: var(--sd-accent) !important;
  color: var(--sd-accent-ink) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}
html:root .dashy-modal .tabs-component { background: var(--sd-panel) !important; }
html:root .dashy-modal .tab__nav__items {
  display: flex !important;
  gap: var(--sd-s1) !important;
  background: var(--sd-panel) !important;
  border-bottom: 1px solid var(--sd-edge) !important;
  padding: var(--sd-s3) var(--sd-s4) 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
html:root .dashy-modal .tab__nav__item {
  background: transparent !important;
  border: none !important;
  border-radius: var(--sd-r-sm) var(--sd-r-sm) 0 0 !important;
  padding: var(--sd-s3) var(--sd-s4) !important;
  margin: 0 !important;
  color: var(--sd-ink-3) !important;
  font-family: var(--sd-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  position: relative;
}
html:root .dashy-modal .tab__nav__item:hover {
  color: var(--sd-ink-1) !important; background: var(--sd-surface-2) !important;
}
html:root .dashy-modal .tab__nav__item.active {
  color: var(--sd-ink-1) !important;
  background: var(--sd-surface-3) !important;
  font-weight: 600 !important;
}
html:root .dashy-modal .tab__nav__item.active::after {
  content: ''; position: absolute; left: var(--sd-s3); right: var(--sd-s3); bottom: -1px;
  height: 2px; background: var(--sd-accent); border-radius: 2px;
}
html:root .dashy-modal .tabs__content {
  background: var(--sd-panel) !important;
  padding: var(--sd-s6) !important;
}
html:root .dashy-modal .tab-item h2,
html:root .dashy-modal .tab-item h3 {
  font-family: var(--sd-font-display) !important;
  font-size: 19px !important; font-weight: 600 !important;
  letter-spacing: -.02em !important; color: var(--sd-ink-1) !important;
  margin: 0 0 var(--sd-s4) !important; text-align: left !important;
}
html:root .dashy-modal .tab__pagination {
  display: flex !important;
  gap: var(--sd-s1) !important;
  background: var(--sd-panel) !important;
  border-bottom: 1px solid var(--sd-edge) !important;
  padding: var(--sd-s3) var(--sd-s4) 0 !important;
  margin: 0 !important;
}
html:root .dashy-modal .tab__pagination .tab__nav__item {
  flex: 0 1 auto !important;
  height: var(--sd-ctrl-h) !important;
  padding: 0 var(--sd-s4) !important;
  border-radius: var(--sd-r-sm) var(--sd-r-sm) 0 0 !important;
}
html:root .main-options-container {
  max-width: 560px;
  margin: 0 auto;
}
html:root .main-tab .config-buttons {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: var(--sd-s2) !important;
  margin: 0 0 var(--sd-s6) !important;
}
html:root .main-tab .config-button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--sd-s3) !important;
  width: 100% !important;
  height: 44px !important;
  padding: 0 var(--sd-s4) !important;
  margin: 0 !important;
  text-align: left !important;
  font-size: 13px !important;
}
html:root .main-tab .instance-info {
  border-top: 1px solid var(--sd-edge);
  padding-top: var(--sd-s4);
  font-size: 12px;
  color: var(--sd-ink-3);
  line-height: 1.7;
}
html:root .main-tab .instance-info a { color: var(--sd-accent); }
html:root .dashy-modal .tab-item > h2:first-child {
  text-align: left !important;
  margin: 0 auto var(--sd-s5) !important;
  max-width: 560px;
}
html:root .dashy-modal { overflow: hidden !important; }
html:root .dashy-modal .modal-body { overflow: auto !important; }
html:root .main-tab .main-options-container {
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}
html:root .main-tab .config-buttons { width: 100% !important; }
html:root .main-tab .config-buttons > h2 {
  grid-column: 1 / -1 !important;
  text-align: left !important;
  margin: 0 0 var(--sd-s3) !important;
  font-family: var(--sd-font-display) !important;
  font-size: 19px !important; font-weight: 600 !important;
  letter-spacing: -.02em !important; color: var(--sd-ink-1) !important;
}
html:root .modal-overlay { z-index: 200 !important; }
html:root dialog.dashy-modal,
html:root dialog.confirm-dialog { z-index: 201 !important; }
html:root .context-menu { z-index: 150 !important; }
html:root .main-tab .config-button {
  justify-content: center !important;
  text-align: center !important;
}
html:root .main-tab .instance-info {
  grid-column: 1 / -1 !important;
  text-align: center !important;
  margin-top: var(--sd-s3) !important;
}
html:root .edit-mode-bottom-banner .edit-config-buttons-container {
  display: grid !important;
  grid-template-columns: minmax(0, 300px) !important;
  gap: var(--sd-s2) !important;
  align-content: flex-start !important;
}
html:root .edit-mode-bottom-banner .save-buttons-container {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 200px)) !important;
  gap: var(--sd-s2) !important;
  align-content: flex-start !important;
}
html:root .edit-mode-bottom-banner .section-sub-title {
  grid-column: 1 / -1 !important;
  flex: none !important;
}
html:root .edit-mode-bottom-banner button {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}
html:root .editor-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: var(--sd-s2) !important;
  background: var(--sd-track) !important;
  border: 1px solid var(--sd-edge) !important;
  border-radius: var(--sd-r-sm) var(--sd-r-sm) 0 0 !important;
  border-bottom: none !important;
  padding: var(--sd-s2) var(--sd-s3) !important;
  margin: 0 !important;
}
html:root .editor-toolbar .toolbar-divider {
  width: 1px !important; height: 20px !important;
  background: var(--sd-edge) !important; border: none !important; margin: 0 var(--sd-s1) !important;
}
html:root .editor-toolbar .icon-btn,
html:root .editor-toolbar .format-btn {
  height: 30px !important; padding: 0 var(--sd-s3) !important;
  font-size: 12px !important; border-radius: calc(var(--sd-r-sm) - 2px) !important;
}
html:root .editor-status {
  margin-left: auto !important; font-size: 11.5px !important; color: var(--sd-ink-3) !important;
}
html:root .chip-ok,
html:root .chip-warn,
html:root .chip-err {
  border-radius: 999px !important; padding: 3px 10px !important;
  font-size: 11px !important; font-weight: 600 !important; border: none !important;
}
html:root .chip-ok { background: color-mix(in srgb, var(--success) 22%, transparent) !important; color: var(--success) !important; }
html:root .chip-warn { background: color-mix(in srgb, var(--error) 22%, transparent) !important; color: var(--error) !important; }
html:root .chip-err { background: color-mix(in srgb, var(--danger) 22%, transparent) !important; color: var(--danger) !important; }
html:root .cm-container,
html:root .css-editor,
html:root .prism-editor-wrapper {
  border: 1px solid var(--sd-edge) !important;
  border-radius: 0 0 var(--sd-r-sm) var(--sd-r-sm) !important;
  overflow: hidden !important;
  background: var(--sd-field) !important;
}
html:root .cm-scroller {
  font-family: var(--sd-font-mono) !important; font-size: 13px !important; line-height: 1.6 !important;
}
html:root .cm-gutterElement { color: var(--sd-ink-3) !important; }
html:root .export-config-inner {
  max-width: 680px !important; margin: 0 auto !important;
}
html:root .current-config,
html:root .collapsible {
  background: var(--sd-surface-1) !important;
  border: 1px solid var(--sd-edge) !important;
  border-radius: var(--sd-r-sm) !important;
  padding: var(--sd-s4) !important;
  margin-bottom: var(--sd-s3) !important;
}
html:root .collapsible-header {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  font-family: var(--sd-font-body) !important; font-size: 13px !important; font-weight: 600 !important;
  color: var(--sd-ink-1) !important; cursor: pointer;
}
html:root .config-path {
  font-family: var(--sd-font-mono) !important; font-size: 12px !important;
  color: var(--sd-ink-3) !important; word-break: break-all;
}
html:root .download-button-container {
  display: flex !important; flex-wrap: wrap !important; gap: var(--sd-s2) !important;
  margin: var(--sd-s4) 0 !important;
}
html:root .config-list {
  width: 100% !important; border-collapse: collapse !important;
  font-size: 12.5px !important; color: var(--sd-ink-2) !important;
}
html:root .config-list tr { border-bottom: 1px solid var(--sd-edge) !important; }
html:root .config-list td,
html:root .config-list th {
  padding: var(--sd-s2) var(--sd-s3) !important; text-align: left !important;
}
html:root .config-list th {
  font-size: 11px !important; font-weight: 600 !important; color: var(--sd-ink-3) !important;
}
html:root .col-path { font-family: var(--sd-font-mono) !important; }
html:root .css-editor-outer {
  max-width: 760px !important; margin: 0 auto !important;
}
html:root .style-section { margin-bottom: var(--sd-s5) !important; }
html:root .quick-note {
  font-size: 12px !important; color: var(--sd-ink-3) !important; line-height: 1.6 !important;
  background: var(--sd-surface-1) !important; border-left: 2px solid var(--sd-accent) !important;
  border-radius: 0 var(--sd-r-sm) var(--sd-r-sm) 0 !important;
  padding: var(--sd-s3) var(--sd-s4) !important; margin: var(--sd-s4) 0 !important;
}
html:root .css-editor-outer .save-button {
  background: var(--sd-accent) !important; color: var(--sd-accent-ink) !important;
  border-color: transparent !important; font-weight: 600 !important;
  height: var(--sd-ctrl-h) !important; padding: 0 var(--sd-s5) !important;
}
html:root .language-and-theme,
html:root .config-location { font-size: 12px !important; color: var(--sd-ink-3) !important; }
html:root .log-block,
html:root .env-grid {
  font-family: var(--sd-font-mono) !important; font-size: 12px !important;
  background: var(--sd-field) !important; border: 1px solid var(--sd-edge) !important;
  border-radius: var(--sd-r-sm) !important; padding: var(--sd-s3) !important;
}
html:root .action-bar {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: var(--sd-s2) !important;
  margin-top: var(--sd-s4) !important;
}
html:root .action-bar button,
html:root .secondary-actions button {
  width: 100% !important;
  height: var(--sd-ctrl-h) !important;
  justify-content: center !important;
  gap: var(--sd-s2) !important;
  font-size: 12.5px !important;
}
html:root .action-bar .secondary-actions {
  display: contents !important;
}
html:root .action-bar .primary-action {
  background: var(--sd-accent) !important;
  color: var(--sd-accent-ink) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}
html:root .errors,
html:root .no-permission-note {
  font-size: 12px !important; color: var(--sd-ink-3) !important;
  margin-top: var(--sd-s3) !important;
}
html:root .dashy-modal hr,
html:root .style-section,
html:root .export-config-inner > div {
  border-style: solid !important;
  border-color: var(--sd-edge) !important;
}
html:root .dashy-modal hr {
  border: none !important; border-top: 1px solid var(--sd-edge) !important;
  margin: var(--sd-s5) 0 !important;
}
html:root .css-editor textarea,
html:root .css-editor .prism-editor__textarea {
  background: var(--sd-field) !important;
  color: var(--sd-ink-1) !important;
  font-family: var(--sd-font-mono) !important;
  font-size: 13px !important;
  padding: var(--sd-s3) !important;
}
html:root .dashy-modal select {
  height: var(--sd-ctrl-h) !important;
  
  background-color: var(--sd-field) !important;
  border: 1px solid var(--sd-edge) !important;
  border-radius: var(--sd-r-sm) !important;
  color: var(--sd-ink-1) !important;
  font-family: var(--sd-font-body) !important;
  font-size: 13px !important;
  padding: 0 var(--sd-s3) !important;
}
html:root .theme-configurator-wrapper {
  background: var(--sd-panel) !important;
  border: 1px solid var(--sd-edge) !important;
  border-radius: var(--sd-r-md) !important;
  padding: var(--sd-s4) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45) !important;
  z-index: 6 !important;                    
  isolation: isolate;                       
  
  left: var(--sd-s4) !important; right: var(--sd-s4) !important;
  width: auto !important;
}
html:root .configurator-title {
  font-family: var(--sd-font-display) !important;
  font-size: 15px !important; font-weight: 600 !important;
  color: var(--sd-ink-1) !important; margin: 0 0 var(--sd-s3) !important;
}
html:root .color-row {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: var(--sd-s3) !important;
  border: none !important; border-bottom: 1px solid var(--sd-edge) !important;
  padding: var(--sd-s2) 0 !important;
}
html:root .color-row:last-child { border-bottom: none !important; }
html:root .color-name {
  font-family: var(--sd-font-body) !important; font-size: 12.5px !important;
  color: var(--sd-ink-2) !important;
}
html:root .swatch-input {
  width: 46px !important; height: 26px !important;
  border: 1px solid var(--sd-edge) !important;
  border-radius: var(--sd-r-sm) !important;
  padding: 2px !important; background: var(--sd-field) !important;
  cursor: pointer;
}
html:root .show-all-vars-btn,
html:root .theme-configurator-wrapper .revert {
  height: 32px !important; font-size: 12px !important; margin-top: var(--sd-s3) !important;
}
html:root .download-button-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
}
html:root .download-button-container button {
  width: 100% !important; height: 44px !important; justify-content: center !important;
}
html:root .dashy-modal button {
  font-size: 13px !important;
  line-height: 1.25 !important;
}
html:root .download-button-container button {
  height: auto !important;
  min-height: 44px !important;
  padding: var(--sd-s2) var(--sd-s3) !important;
  text-align: center !important;
}
html:root .theme-configurator-wrapper .show-all-vars-btn,
html:root .theme-configurator-wrapper .revert,
html:root .dashy-modal .quick-note a {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  height: auto !important;
  color: var(--sd-accent) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer;
}
html:root .theme-configurator-wrapper .show-all-vars-btn:hover,
html:root .theme-configurator-wrapper .revert:hover {
  text-decoration: underline !important;
  background: transparent !important;
}
html:root .theme-configurator-wrapper .action-buttons,
html:root .action-buttons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--sd-s2) !important;
  margin-top: var(--sd-s4) !important;
}
html:root .action-buttons button {
  width: 100% !important;
  height: var(--sd-ctrl-h) !important;
  justify-content: center !important;
}
html:root .action-buttons button:first-child {
  background: var(--sd-accent) !important;
  color: var(--sd-accent-ink) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}
html:root .css-wrapper .save-button {
  background: var(--sd-accent) !important;
  color: var(--sd-accent-ink) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
  height: var(--sd-ctrl-h) !important;
  padding: 0 var(--sd-s5) !important;
}
html:root .edit-mode-bottom-banner button {
  
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 var(--sd-s3) !important;
  white-space: normal !important;
  line-height: 1.2 !important;
  text-align: center !important;
}
html:root .edit-mode-bottom-banner .save-buttons-container {
  grid-template-columns: repeat(2, minmax(0, 220px)) !important;
}
html:root .dashy-modal * {
  border-top-style: var(--sd-bs, initial);
}
html:root .dashy-modal [style*="dotted"] { border-style: solid !important; }
html:root .export-config-inner > *,
html:root .css-editor-outer > *,
html:root .main-options-container > * {
  border-style: solid !important;
  border-color: var(--sd-edge) !important;
}
html:root .action-text-btn,
html:root .action-text-btn:hover,
html:root .action-text-btn:focus {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: var(--sd-s1) 0 !important;
  margin: 0 !important;
  height: auto !important;
  color: var(--sd-accent) !important;
  font-family: var(--sd-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-align: center !important;
  cursor: pointer;
}
html:root .action-text-btn { text-decoration: none !important; }
html:root .action-text-btn:hover { text-decoration: underline !important; }
html:root .css-editor { min-height: 220px !important; }
html:root .css-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--sd-s3) !important;
}
html:root .css-wrapper .save-button {
  align-self: flex-start !important;
  min-width: 220px !important;
  margin: 0 !important;
}
html:root .config-list {
  table-layout: fixed !important;
  width: 100% !important;
}
html:root .config-list .col-title { width: 22% !important; }
html:root .config-list .col-path { width: 22% !important; }
html:root .config-list .col-content { width: 30% !important; }
html:root .config-list .col-status { width: 12% !important; }
html:root .config-list .col-actions {
  width: 14% !important; white-space: nowrap !important; overflow: visible !important;
  text-align: right !important;
}
html:root .config-list .cell-truncate {
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
html:root .config-list .col-actions button {
  width: 30px !important; height: 30px !important;
  padding: 0 !important; margin-left: var(--sd-s1) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
html:root .config-list .col-actions svg { width: 14px !important; height: 14px !important; }
html:root .config-list td.actions {
  white-space: nowrap !important;
  text-align: right !important;
  overflow: visible !important;
}
html:root .config-list td.actions button {
  width: 30px !important; height: 30px !important; padding: 0 !important;
  margin-left: var(--sd-s1) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  position: relative;
}
html:root .config-list td.actions svg { width: 14px !important; height: 14px !important; }
html:root .config-list td.mono { font-family: var(--sd-font-mono) !important; }
html:root .config-list .arr,
html:root .arr {
  background: transparent !important; border: none !important; box-shadow: none !important;
  color: var(--sd-ink-3) !important; width: auto !important; padding: 0 var(--sd-s1) !important;
}
html:root .config-list .link-cell {
  background: transparent !important; border: none !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 0 !important; height: auto !important;
  color: var(--sd-accent) !important; text-align: left !important;
}
html:root .config-list .link-cell:hover { text-decoration: underline !important; }
html:root .config-list {
  table-layout: fixed !important;
  width: 100% !important;
  overflow: visible !important;
}
html:root .config-list th:nth-child(1),
html:root .config-list td:nth-child(1) { width: 20% !important; }
html:root .config-list th:nth-child(2),
html:root .config-list td:nth-child(2) { width: 22% !important; }
html:root .config-list th:nth-child(4),
html:root .config-list td:nth-child(4) { width: 90px !important; }
html:root .config-list th:nth-child(5),
html:root .config-list td:nth-child(5) { width: 122px !important; }
html:root .config-list td,
html:root .config-list th {
  padding: var(--sd-s2) var(--sd-s2) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html:root .config-list td.actions {
  overflow: visible !important;
  padding-right: 0 !important;
}
html:root .config-list td.actions button {
  width: 28px !important; height: 28px !important; margin-left: 3px !important;
}
html:root .config-list td.actions button.arr {
  width: 20px !important; margin-left: 2px !important;
  background: transparent !important; border: none !important;
}
html:root .export-config-inner,
html:root .export-config-wrapper {
  overflow-x: hidden !important;
}
html:root .dashy-tooltip,
html:root .tooltip {
  z-index: 300 !important;
}
html:root .dashy-tooltip .tooltip-inner {
  background: var(--sd-panel) !important;
  color: var(--sd-ink-1) !important;
  border: 1px solid var(--sd-edge) !important;
  border-radius: var(--sd-r-sm) !important;
  box-shadow: var(--sd-shadow) !important;
  font-family: var(--sd-font-body) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  padding: 7px 11px !important;
  max-width: 260px !important;
}
html:root .dashy-tooltip .tooltip-arrow {
  border-color: var(--sd-panel) !important;
}
html:root .theme-configurator-wrapper {
  padding: var(--sd-s5) !important;
}
html:root .configurator-title {
  margin: 0 0 var(--sd-s4) !important;
}
html:root .color-row-container {
  border-top: 1px solid var(--sd-edge) !important;
}
html:root .color-row {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: var(--sd-s3) 0 !important;
  border-bottom: 1px solid var(--sd-edge) !important;
  border-top: none !important;
}
html:root .color-name {
  font-size: 13px !important; color: var(--sd-ink-2) !important;
  text-transform: capitalize !important; margin: 0 !important;
}
html:root .swatch-input {
  width: 52px !important; height: 28px !important; margin: 0 !important;
  border: 1px solid var(--sd-edge) !important; border-radius: var(--sd-r-sm) !important;
  padding: 2px !important; background: var(--sd-field) !important; cursor: pointer;
}
html:root .theme-configurator-wrapper .action-text-btn {
  display: block !important;
  margin: 0 !important;
  padding: var(--sd-s2) 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: left !important;
  line-height: 1.4 !important;
}
html:root .theme-configurator-wrapper .show-all-vars-btn {
  color: var(--sd-ink-2) !important;
}
html:root .theme-configurator-wrapper .show-all-vars-btn::before {
  content: '›'; margin-right: var(--sd-s2); color: var(--sd-ink-3);
}
html:root .theme-configurator-wrapper .show-all-vars-btn:hover {
  color: var(--sd-ink-1) !important; text-decoration: none !important;
}
html:root .theme-configurator-wrapper .show-all-vars-btn:first-of-type {
  margin-top: var(--sd-s4) !important;
}
html:root .theme-configurator-wrapper .action-text-btn:not(.show-all-vars-btn) {
  color: var(--sd-ink-3) !important;
  font-size: 12.5px !important;
}
html:root .theme-configurator-wrapper .action-text-btn:not(.show-all-vars-btn):hover {
  color: var(--sd-ink-1) !important; text-decoration: underline !important;
}
html:root .theme-configurator-wrapper .action-text-btn:not(.show-all-vars-btn):first-of-type {
  margin-top: var(--sd-s3) !important;
  padding-top: var(--sd-s3) !important;
  border-top: 1px solid var(--sd-edge) !important;
}
html:root .theme-configurator-wrapper .action-text-btn:not(.show-all-vars-btn):last-of-type {
  color: var(--danger) !important;
}
html:root .theme-configurator-wrapper .action-text-btn:not(.show-all-vars-btn):last-of-type:hover {
  color: var(--danger) !important; text-decoration: underline !important;
}
html:root .theme-configurator-wrapper .action-buttons {
  margin: var(--sd-s5) 0 0 !important;
  padding-top: var(--sd-s4) !important;
  border-top: 1px solid var(--sd-edge) !important;
}
html:root .theme-configurator-wrapper .action-buttons button {
  margin: 0 !important;
  padding: 0 var(--sd-s4) !important;
  gap: var(--sd-s2) !important;
}
html:root .minimal-headings-row {
  display: flex !important;
  gap: var(--sd-s1) !important;
  background: var(--sd-track) !important;
  border: 1px solid var(--sd-edge) !important;
  border-radius: var(--sd-r-sm) !important;
  padding: var(--sd-s1) !important;
}
html:root .minimal-section-heading {
  background: transparent !important;
  border: none !important;
  border-radius: calc(var(--sd-r-sm) - 2px) !important;
  padding: var(--sd-s2) var(--sd-s3) !important;
  color: var(--sd-ink-3) !important;
  box-shadow: none !important;
}
html:root .minimal-section-heading .section-icon * {
  color: var(--sd-ink-3) !important; fill: var(--sd-ink-3) !important;
}
html:root .minimal-section-heading:hover {
  background: var(--sd-surface-2) !important;
}
html:root .minimal-section-heading:hover .section-icon * {
  color: var(--sd-ink-1) !important; fill: var(--sd-ink-1) !important;
}
html:root .minimal-section-heading.selected {
  background: var(--sd-surface-3) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28) !important;
}
html:root .minimal-section-heading.selected .section-icon * {
  color: var(--sd-accent) !important; fill: var(--sd-accent) !important;
}
html:root .minimal-section-inner {
  background: var(--sd-surface-1) !important;
  border: 1px solid var(--sd-edge) !important;
  border-radius: var(--sd-r-lg) !important;
  padding: var(--sd-s5) !important;
  margin-top: var(--sd-s3) !important;
}
html:root .minimal-home h1 {
  font-family: var(--sd-font-display) !important;
  font-size: 30px !important; font-weight: 700 !important; letter-spacing: -.03em !important;
}
html:root form.minimal input {
  box-sizing: border-box !important;
  background: var(--sd-surface-1) !important;
  border: 1px solid var(--sd-edge) !important;
  border-radius: var(--sd-r-md) !important;
  color: var(--sd-ink-1) !important;
  font-family: var(--sd-font-body) !important;
}
html:root .tab-scroll-btn {
  background: transparent !important; border: none !important;
  color: var(--sd-ink-3) !important;
}
html:root body {
  background:
    radial-gradient(62% 55% at 12% 6%,   var(--sd-mesh-warm), transparent 62%),
    radial-gradient(58% 52% at 88% 12%,  var(--sd-mesh-sea),  transparent 60%),
    radial-gradient(72% 60% at 50% 104%, var(--sd-mesh-deep), transparent 64%),
    linear-gradient(180deg, var(--sd-ground), var(--sd-ground-2)) !important;
  background-attachment: fixed !important;
  color: var(--sd-ink-1) !important;
  font-family: var(--sd-font-body) !important;
}
html:root .not-found-page,
html:root .home { background: transparent !important; }
html:root .not-found-title {
  font-family: var(--sd-font-display) !important;
  color: var(--sd-ink-1) !important;
  opacity: .18 !important;
}
html:root .not-found-sad-face {
  color: var(--sd-accent) !important;
  font-family: var(--sd-font-display) !important;
}
html:root .not-found-subtitle {
  font-family: var(--sd-font-display) !important;
  font-size: 22px !important; font-weight: 600 !important;
  letter-spacing: -.02em !important; color: var(--sd-ink-1) !important;
}
html:root .not-found-message {
  font-family: var(--sd-font-body) !important;
  font-size: 13px !important; color: var(--sd-ink-3) !important;
}
html:root .not-found-message a { color: var(--sd-accent) !important; }
html:root .go-home {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  height: var(--sd-ctrl-h) !important; padding: 0 var(--sd-s5) !important;
  background: var(--sd-accent) !important; color: var(--sd-accent-ink) !important;
  border: none !important; border-radius: var(--sd-r-sm) !important;
  font-family: var(--sd-font-body) !important; font-size: 13px !important; font-weight: 600 !important;
  text-decoration: none !important; margin-top: var(--sd-s4) !important;
}
html:root header,
html:root .page-titles h1 {
  background: transparent !important;
  font-family: var(--sd-font-display) !important;
  color: var(--sd-ink-1) !important;
}
html:root .edit-mode-bottom-banner button,
html:root .main-tab .config-button,
html:root .download-button-container button,
html:root .action-bar button {
  
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--sd-s3) !important;
  padding: 0 var(--sd-s4) !important;
  text-align: left !important;
}
html:root .edit-mode-bottom-banner button > svg,
html:root .main-tab .config-button > svg,
html:root .download-button-container button > svg,
html:root .action-bar button > svg,
html:root .main-tab .config-button > .button-icon {
  
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
}
html:root .item .opening-method-icon {
  position: absolute !important;
  bottom: 5px !important;
  right: 6px !important;
  width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--sd-ink-3) !important;
  opacity: 0;
  transition: opacity .14s ease;
}
html:root .item:hover .opening-method-icon,
html:root .item:focus-visible .opening-method-icon {
  opacity: .5;
}
html:root .item .hotkey-denominator {
  position: absolute !important; top: 4px; left: 6px;
  margin: 0 !important; font-size: 10px !important; color: var(--sd-ink-3) !important;
}
html:root .dashy-schema-form {
  font-family: var(--sd-font-body); color: var(--sd-ink-1);
}
html:root .dashy-schema-form .dashy-jf-vertical-layout,
html:root .dashy-schema-form .dashy-jf-horizontal-layout {
  gap: var(--sd-s5);
}
html:root .dashy-schema-form .dashy-jf-control {
  gap: var(--sd-s2); min-width: 0;
}
html:root .dashy-schema-form .dashy-jf-control .dashy-jf-label {
  font-family: var(--sd-font-body);
  font-size: 11px; font-weight: 600; color: var(--sd-ink-3);
  letter-spacing: .02em; line-height: 1.3; margin: 0 0 2px;
}
html:root .dashy-schema-form .dashy-jf-control .dashy-jf-label .dashy-jf-asterisk {
  color: var(--sd-accent);
}
html:root .dashy-schema-form .dashy-jf-control .dashy-jf-description {
  font-size: 11.5px; line-height: 1.45; color: var(--sd-ink-3);
  opacity: 1;                      
  margin: 2px 0 0;
}
html:root .dashy-schema-form .dashy-jf-control .dashy-jf-error {
  font-size: 11.5px; color: var(--sd-err);
}
html:root .dashy-schema-form .dashy-jf-input,
html:root .dashy-schema-form .dashy-jf-select,
html:root .dashy-schema-form .dashy-jf-text-area {
  box-sizing: border-box;                      
  -webkit-appearance: none; appearance: none;
  background: var(--sd-field);
  border: 1px solid var(--sd-edge);
  border-radius: var(--sd-r-sm);
  color: var(--sd-ink-1);
  font-family: var(--sd-font-body); font-size: 13px;
  padding: 0 var(--sd-s3); height: var(--sd-ctrl-h);
  box-shadow: none; outline: none;
  transition: border-color .14s;
}
html:root .dashy-schema-form .dashy-jf-text-area {
  height: auto; min-height: 5rem; padding: var(--sd-s3);
  font-family: var(--sd-font-mono); font-size: 12px; line-height: 1.5;
}
html:root .dashy-schema-form .dashy-jf-input:focus,
html:root .dashy-schema-form .dashy-jf-select:focus,
html:root .dashy-schema-form .dashy-jf-text-area:focus {
  
  box-shadow: none; border-color: var(--sd-accent);
}
html:root .dashy-schema-form .dashy-jf-select {
  padding-right: var(--sd-s6);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2397a7b1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sd-s3) center;
  background-size: 11px 8px;
}
html:root .dashy-schema-form .dashy-jf-option {
  background: var(--sd-panel); color: var(--sd-ink-1);
}
html:root .dashy-schema-form input[type='checkbox'].dashy-jf-input {
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 18px; height: 18px; min-width: 18px; padding: 0; margin: 0;
  background: var(--sd-field);
  border: 1px solid var(--sd-edge);
  border-radius: 5px;
  cursor: pointer;
  transition: background-color .14s, border-color .14s;
}
html:root .dashy-schema-form input[type='checkbox'].dashy-jf-input:hover {
  border-color: var(--sd-ink-3);
}
html:root .dashy-schema-form input[type='checkbox'].dashy-jf-input:checked {
  background-color: var(--sd-accent); border-color: var(--sd-accent);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.8 2.8L11 4.6' fill='none' stroke='%2316222b' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 12px;
}
html:root .dashy-schema-form input[type='checkbox'].dashy-jf-input:focus-visible {
  outline: 2px solid var(--sd-accent); outline-offset: 2px;
}
html:root .dashy-schema-form .dashy-jf-group,
html:root .dashy-schema-form .dashy-jf-array-list {
  box-sizing: border-box;
  margin: 0; padding: var(--sd-s4);
  background: var(--sd-surface-1);
  border: 1px solid var(--sd-edge);
  border-radius: var(--sd-r-md);
  min-width: 0;
}
html:root .dashy-schema-form .dashy-jf-group .dashy-jf-group-label,
html:root .dashy-schema-form .dashy-jf-array-list .dashy-jf-array-list-label {
  float: none; width: auto; padding: 0; margin: 0 0 var(--sd-s4);
  font-family: var(--sd-font-display);
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--sd-ink-2); text-transform: none;
}
html:root .dashy-schema-form .dashy-jf-array-list .dashy-jf-array-list-no-data {
  font-size: 11.5px; color: var(--sd-ink-3); opacity: 1; font-style: normal;
}
html:root .dashy-schema-form .dashy-jf-array-list .dashy-jf-array-list-item-wrapper {
  border: 1px solid var(--sd-edge); border-radius: var(--sd-r-sm);
  background: var(--sd-surface-1);
}
html:root .dashy-schema-form .dashy-jf-array-list .dashy-jf-array-list-item-content {
  border-top: 1px solid var(--sd-edge);
}
html:root .dashy-schema-form .dashy-jf-array-list-add,
html:root .dashy-schema-form .dashy-jf-array-list-item-move-up,
html:root .dashy-schema-form .dashy-jf-array-list-item-move-down,
html:root .dashy-schema-form .dashy-jf-array-list-item-delete {
  background: var(--sd-surface-2); color: var(--sd-ink-2);
  border: 1px solid var(--sd-edge); border-radius: var(--sd-r-sm);
  font-family: var(--sd-font-body); font-size: 12px; font-weight: 500;
  padding: 0 var(--sd-s3); height: 28px;
}
html:root .dashy-schema-form .dashy-jf-array-list-add:hover:not(:disabled),
html:root .dashy-schema-form .dashy-jf-array-list-item-move-up:hover:not(:disabled),
html:root .dashy-schema-form .dashy-jf-array-list-item-move-down:hover:not(:disabled) {
  background: var(--sd-surface-3); color: var(--sd-ink-1); border-color: var(--sd-ink-3);
}
html:root .dashy-schema-form .dashy-jf-array-list-item-delete:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sd-err) 20%, transparent);
  border-color: var(--sd-err); color: var(--sd-err);
}
html:root .dashy-schema-form > p.validation-summary,
html:root .dashy-schema-form > .form-error {
  color: var(--sd-err); border-color: var(--sd-err); border-radius: var(--sd-r-sm);
  font-size: 12px;
}
html:root .dashy-modal input[type='checkbox']:not(.toggle):not(.dashy-jf-input),
html:root .options-panel input[type='checkbox']:not(.toggle) {
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box;
  width: 18px; height: 18px; min-width: 18px;
  background: var(--sd-field);
  border: 1px solid var(--sd-edge);
  border-radius: 5px; cursor: pointer;
  transition: background-color .14s, border-color .14s;
}
html:root .dashy-modal input[type='checkbox']:not(.toggle):not(.dashy-jf-input):checked,
html:root .options-panel input[type='checkbox']:not(.toggle):checked {
  background-color: var(--sd-accent); border-color: var(--sd-accent);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.8 2.8L11 4.6' fill='none' stroke='%2316222b' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 12px;
}
html:root .editor-options label {
  display: inline-flex; align-items: center; gap: var(--sd-s2);
  font-size: 12px; color: var(--sd-ink-2);
}
html:root input[type='color'] {
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box;
  width: 34px; height: 26px; padding: 0;
  background: var(--sd-field);
  border: 1px solid var(--sd-edge);
  border-radius: var(--sd-r-sm);
  cursor: pointer;
}
html:root input[type='color']::-webkit-color-swatch-wrapper { padding: 3px; }
html:root input[type='color']::-webkit-color-swatch {
  border: none; border-radius: 4px;
}
html:root .status-pill {
  background: var(--sd-surface-2) !important;
  color: var(--sd-ink-2) !important;
  border: 1px solid var(--sd-edge);
  border-radius: 999px; padding: 2px var(--sd-s3);
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
}
html:root .status-pill.status-valid {
  color: var(--sd-ok) !important; border-color: var(--sd-ok);
}
html:root .status-pill.status-invalid {
  color: var(--sd-err) !important; border-color: var(--sd-err);
}
html:root .log-block,
html:root .log-block code,
html:root .not-found-message a {
  font-family: var(--sd-font-mono); font-size: 12px;
}
html:root .dashy-modal .close-button {
  background: var(--sd-surface-2) !important;
  color: var(--sd-ink-2) !important;
  border: 1px solid var(--sd-edge);
  border-radius: var(--sd-r-sm);
}
html:root .dashy-modal .close-button:hover {
  background: var(--sd-surface-3) !important; color: var(--sd-ink-1) !important;
}
html:root .edit-item-inner .row .input-container,
html:root .edit-item-inner .row .select-container {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  column-gap: var(--sd-s4); row-gap: var(--sd-s1);
  align-items: center;
  width: 100%;
}
html:root .edit-item-inner .row .input-container .input-label,
html:root .edit-item-inner .row .select-container .select-label {
  grid-column: 1; grid-row: 1;
  flex: none;
  font-family: var(--sd-font-body);
  font-size: 11px; font-weight: 600; color: var(--sd-ink-3);
  letter-spacing: .02em; line-height: 1.3; margin: 0;
}
html:root .edit-item-inner .row .input-container input.input-field,
html:root .edit-item-inner .row .select-container .v-select {
  grid-column: 2; grid-row: 1;
  flex: none; width: 100%; min-width: 0;
  box-sizing: border-box;                    
}
html:root .edit-item-inner .row .input-container input.input-field {
  height: var(--sd-ctrl-h);
  padding: 0 var(--sd-s3);
  font-family: var(--sd-font-body); font-size: 13px;
  color: var(--sd-ink-1);
  background: var(--sd-field);
  border: 1px solid var(--sd-edge); border-radius: var(--sd-r-sm);
}
html:root .edit-item-inner .row .input-container input.input-field:focus {
  border-color: var(--sd-accent); box-shadow: none; outline: none;
}
html:root .edit-item-inner .row .input-container .input-description,
html:root .edit-item-inner .row .select-container .select-description {
  grid-column: 2; grid-row: 2;
  flex: none; margin: 0;
  font-family: var(--sd-font-body);
  font-size: 11.5px; line-height: 1.45; color: var(--sd-ink-3);
}
html:root .edit-item-inner .edit-item-select .v-select div.vs__dropdown-toggle {
  box-sizing: border-box;
  min-height: var(--sd-ctrl-h); height: var(--sd-ctrl-h);
  background: var(--sd-field);
  border: 1px solid var(--sd-edge);
  border-radius: var(--sd-r-sm);
  padding: 0 var(--sd-s2) 0 var(--sd-s3);
}
html:root .edit-item-inner .edit-item-select .v-select div.vs__dropdown-toggle .vs__selected,
html:root .edit-item-inner .edit-item-select .v-select input.vs__search {
  font-family: var(--sd-font-body); font-size: 13px; color: var(--sd-ink-1);
  margin: 0; padding: 0;
}
html:root .edit-item-inner .row:not(:last-child) {
  border-bottom: 1px solid var(--sd-edge);
}
html:root .edit-item-inner .row {
  display: flex; align-items: flex-start; gap: var(--sd-s3);
  padding: var(--sd-s4) 0;
}
html:root .edit-item-inner .row > svg {
  box-sizing: content-box;
  flex: 0 0 auto;
  width: 14px; height: 14px; padding: 11px; margin: 0;
  background: transparent;
  border: 1px solid transparent; border-radius: var(--sd-r-sm);
  cursor: pointer;
  transition: background-color .14s, border-color .14s;
}
html:root .edit-item-inner .row > svg path { fill: var(--sd-ink-3); }
html:root .edit-item-inner .row > svg:hover {
  background: color-mix(in srgb, var(--sd-err) 16%, transparent);
  border-color: var(--sd-err);
}
html:root .edit-item-inner .row > svg:hover path { fill: var(--sd-err); }
html:root .edit-item-inner h4 {
  font-family: var(--sd-font-display);
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--sd-ink-2); margin: var(--sd-s6) 0 var(--sd-s4);
}
html:root .edit-item-inner .more-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--sd-s2);
}
html:root .edit-item-inner .more-fields span.add-field-tag {
  box-sizing: border-box;
  display: flex; align-items: center; gap: var(--sd-s2);
  width: 100%; min-width: 0; height: 32px;
  margin: 0; padding: 0 var(--sd-s3);
  background: var(--sd-surface-2);
  border: 1px solid var(--sd-edge);
  border-radius: var(--sd-r-sm);             
  color: var(--sd-ink-2);
  font-family: var(--sd-font-body); font-size: 11.5px;
  text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html:root .edit-item-inner .more-fields span.add-field-tag:hover {
  background: var(--sd-surface-3); color: var(--sd-ink-1); border-color: var(--sd-ink-3);
}
html:root .edit-item-inner .more-fields span.add-field-tag svg {
  flex: 0 0 auto;
  width: 9px; height: 9px; margin: 0; padding: 0;
  background: transparent; border: none;
}
html:root .edit-item-inner .more-fields span.add-field-tag svg path { fill: var(--sd-ink-3); }
html:root .edit-item-inner .more-fields span.add-field-tag:hover svg { background: transparent; }
html:root .edit-item-inner .more-fields span.add-field-tag:hover svg path { fill: var(--sd-ink-1); }
html:root .dashy-schema-form .dashy-jf-group,
html:root .dashy-schema-form .dashy-jf-array-list {
  display: flow-root;
}
html:root .dashy-schema-form .dashy-jf-group > *:not(legend),
html:root .dashy-schema-form .dashy-jf-array-list > *:not(legend) {
  clear: both;
}
html:root .dashy-schema-form .dashy-jf-group > legend.dashy-jf-group-label,
html:root .dashy-schema-form .dashy-jf-array-list > legend.dashy-jf-array-list-legend {
  float: left; width: 100%;
  margin: 0 0 var(--sd-s4); padding: 0;
}
html:root .dashy-schema-form .dashy-jf-array-list > legend.dashy-jf-array-list-legend {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sd-s3);
}
html:root .dashy-jf-array-list-legend .dashy-jf-array-list-label { order: 0; }
html:root .dashy-jf-array-list-legend .dashy-jf-array-list-add { order: 1; }
html:root .kb-sc-info {
  box-sizing: border-box;                    
  max-width: 420px;
  padding: var(--sd-s5) var(--sd-s5) var(--sd-s5);
  background: var(--sd-panel);
  border: 1px solid var(--sd-edge);
  border-radius: var(--sd-r-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  color: var(--sd-ink-2);
  isolation: isolate;                        
}
html:root .kb-sc-info h5 {
  
  position: static; top: auto; left: auto;
  margin: 0 0 var(--sd-s4);
  padding: 0;
  background: transparent;
  border: none; border-radius: 0; box-shadow: none;
  font-family: var(--sd-font-display);
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--sd-ink-1);
  display: flex; align-items: center; gap: var(--sd-s2);
}
html:root .kb-sc-info p {
  margin: 0 0 var(--sd-s3);
  font-size: 12.5px; line-height: 1.5; color: var(--sd-ink-2);
}
html:root .kb-sc-info .close {
  box-sizing: border-box;
  position: absolute; top: var(--sd-s3); right: var(--sd-s3);
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: transparent;
  border: 1px solid transparent; border-radius: var(--sd-r-sm);
  color: var(--sd-ink-3);
  font-size: 13px; line-height: 1;
  cursor: pointer;
  transition: color .14s, background-color .14s, border-color .14s;
}
html:root .kb-sc-info .close:hover {
  background: var(--sd-surface-3); color: var(--sd-ink-1); border-color: var(--sd-edge);
}
html:root .kb-sc-info .action-buttons {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sd-s2);
  margin-top: var(--sd-s4);
}
html:root .kb-sc-info .action-buttons button {
  box-sizing: border-box;
  width: 100%; height: var(--sd-ctrl-h);
  padding: 0 var(--sd-s3);
  background: var(--sd-surface-2);
  border: 1px solid var(--sd-edge);
  border-radius: var(--sd-r-sm);             
  color: var(--sd-ink-2);
  font-family: var(--sd-font-body); font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: background-color .14s, border-color .14s, color .14s;
}
html:root .kb-sc-info .action-buttons button:hover {
  background: var(--sd-surface-3); color: var(--sd-ink-1); border-color: var(--sd-ink-3);
}
html:root .kb-sc-info .action-buttons button:nth-child(1) {
  background: var(--sd-accent); border-color: var(--sd-accent);
  color: var(--sd-accent-ink); font-weight: 600;
}
html:root .kb-sc-info .action-buttons button:nth-child(1):hover {
  filter: brightness(1.08); color: var(--sd-accent-ink); border-color: var(--sd-accent);
}
html:root .kb-sc-info .action-buttons button:nth-child(3) {
  color: var(--sd-err);
}
html:root .kb-sc-info .action-buttons button:nth-child(3):hover {
  background: color-mix(in srgb, var(--sd-err) 16%, transparent);
  border-color: var(--sd-err); color: var(--sd-err);
}

@media (prefers-color-scheme: light) {
html:root {
  --sd-ground:      #eef1f0;
  --sd-ground-2:    #e1e8e7;
  --sd-panel:       #ffffff;
  --sd-field:       #ffffff;

  --sd-surface-1:   rgba(255, 255, 255, .70);
  --sd-surface-2:   rgba(255, 255, 255, .95);
  --sd-surface-3:   rgba(16, 36, 40, .07);

  --sd-edge:        rgba(16, 36, 40, .11);
  --sd-edge-strong: rgba(16, 36, 40, .22);

  --sd-ink-1:       #12201f;
  --sd-ink-2:       #4d605f;
  --sd-ink-3:       #70837f;

  
  --sd-accent:      #985417;
  --sd-accent-ink:  #fff8f1;

  --sd-shadow:      0 12px 32px rgba(20, 45, 50, .13);
  --sd-shadow-sm:   0 4px 14px rgba(20, 45, 50, .10);
  
  --sd-icon-shadow: drop-shadow(0 1px 2px rgba(20, 45, 50, .35))
                    drop-shadow(0 0 1px rgba(20, 45, 50, .28));

  
  --sd-ok:    #1e7a45;
  --sd-warn:  #8a6410;
  --sd-err:   #b23b32;
  --sd-info:  #1f6d8a;

  --sd-mesh-warm:   rgba(224, 154, 90, .26);
  --sd-mesh-sea:    rgba(120, 170, 185, .28);
  --sd-mesh-deep:   rgba(200, 216, 214, .38);
}
html:root .item .item-icon {
  background: var(--sd-surface-3);
  border-radius: calc(var(--sd-r-sm) + 2px);
  padding: calc(var(--sd-icon) * .105);
}
html:root .item .tile-icon {
  
  width: calc(var(--sd-icon) * .79);
  height: calc(var(--sd-icon) * .79);
  max-width: calc(var(--sd-icon) * .79);
  max-height: calc(var(--sd-icon) * .79);
}
}
/* Styles applied to index.html for the loading screen, prior to the app being injected */
/* Dashy - Licensed under MIT, (C) Alicia Sykes 2024 */

body { margin: 0; }
#app .loading-placeholder {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: progress;
  background: #121212;
}
#app .loading-placeholder h1 {
  font-size: 20vh;
  margin: 1rem auto;
  font-family: Tahoma, monospace;
  cursor: progress;
  color: #0c0c0c;
  text-shadow: 0px 4px 4px #090909, 0 0 0 #000, 0px 2px 2px #000000;
}
#app .loading-placeholder p.loading {
  font-size: 2rem;
  opacity: 0.75;
  font-family: monospace;
  cursor: progress;
  color: #0c0c0c;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-shadow: 0 1px 1px #090909, 0 0 0 #000, 0 1px 1px #000000;
}
#app .loading-placeholder .catastrophic-error p {
  color: #e11a4bfc;
  margin: 0.5rem 0;
  font-weight: bold;
  font-size: 4vh;
  text-align: center;
  font-family: monospace;
  text-shadow: 1px 2px 1px #090909, 0 0 0 #000, 0 1px 1px #000000
}
#app .loading-placeholder .catastrophic-error p.err-l2 {
  opacity: 0.75;
  font-size: 2vh;
  font-weight: normal;
  padding: 0 1rem;
}
#app .loading-placeholder .catastrophic-error p.err-l2 a {
  color: #e11a4bfc;
}
#app .loading-placeholder.still-not-loaded { cursor: default; }
#app .loading-placeholder.still-not-loaded p.loading { display: none; }
#app .loading-placeholder.still-not-loaded .catastrophic-error { display: block !important; }
@media (max-width: 780px) {
  .loading-placeholder h1 { font-size: 12vh !important; }
  #app .loading-placeholder .catastrophic-error p { font-size: 2.5vh !important; }
  #app .loading-placeholder .catastrophic-error p.err-l2 { font-size: 1.2vh !important; }
}
::selection { background-color: #e11a4bfc; color: #121212; }