/* Dibos CSS-project | MIT | generated from canonical CSS modules */

/* tokens.css */
:root {
  --fw-accent:#6254b7;
  --fw-accent-hover:#5143a0;
  --fw-accent-soft:#eeebf9;
  --fw-accent-text:#57469e;
  --fw-bg:#f7f8fa;
  --fw-surface:#fff;
  --fw-surface-alt:#fafafb;
  --fw-sidebar:#f2f3f6;
  --fw-text:#242429;
  --fw-muted:#696a73;
  --fw-border:#e5e5eb;
  --fw-border-strong:#c9cad3;
  --fw-success:#287346;
  --fw-success-bg:#eaf5ee;
  --fw-warning:#8a5900;
  --fw-warning-bg:#fff5db;
  --fw-danger:#b52e3c;
  --fw-danger-bg:#fceff0;
  --fw-info:#2768a4;
  --fw-info-bg:#edf4fc;
  --fw-on-accent:#fff;
  --fw-font:'Segoe UI Variable','Segoe UI',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --fw-control-border-width:1px;
  --fw-focus-color:var(--fw-accent);
  --fw-focus-on-accent:var(--fw-on-accent);
  --fw-radius:5px;
  --fw-radius-lg:8px;
  --fw-space-1:4px;
  --fw-space-2:8px;
  --fw-space-3:12px;
  --fw-space-4:16px;
  --fw-space-5:20px;
  --fw-space-6:24px;
  --fw-space-8:32px;
  --fw-shadow:0 2px 5px #18203805,0 0 1px #18203812;
  --fw-shadow-overlay:0 12px 45px #15132c24,0 1px 4px #15132c10;
  --fw-duration:160ms;
  --fw-duration-slow:240ms;
  --fw-ease:cubic-bezier(.2,.8,.2,1);
  --fw-control-height:34px;
  color-scheme:light;
}

:root[data-theme="fluent"] {
  --fw-accent:#0f6cbd;
  --fw-accent-hover:#115ea3;
  --fw-accent-soft:#eaf3fc;
  --fw-accent-text:#0f548c
}

:root[data-theme="sky"] {
  --fw-accent:#0075a1;
  --fw-accent-hover:#005e85;
  --fw-accent-soft:#e4f4fa;
  --fw-accent-text:#00628c
}

:root[data-theme="sage"] {
  --fw-accent:#477754;
  --fw-accent-hover:#365d40;
  --fw-accent-soft:#ecf4ed;
  --fw-accent-text:#3a6546
}

:root[data-theme="peach"] {
  --fw-accent:#a74d27;
  --fw-accent-hover:#8b3d1e;
  --fw-accent-soft:#fff0e7;
  --fw-accent-text:#98431f
}

:root[data-theme="rose"] {
  --fw-accent:#a34269;
  --fw-accent-hover:#883456;
  --fw-accent-soft:#fcecf3;
  --fw-accent-text:#93395e
}

:root[data-mode="dark"], :root[data-theme="dark"] {
  --fw-bg:#1d1e22;
  --fw-surface:#26272c;
  --fw-surface-alt:#222328;
  --fw-sidebar:#202126;
  --fw-text:#f1f0f6;
  --fw-muted:#b3b2be;
  --fw-border:#393a43;
  --fw-border-strong:#62636e;
  --fw-accent:#b5a5f5;
  --fw-accent-hover:#c5b9ff;
  --fw-accent-soft:#39314e;
  --fw-accent-text:#d1c5ff;
  --fw-on-accent:#241c38;
  --fw-success:#87d2a3;
  --fw-success-bg:#253b2f;
  --fw-warning:#edc574;
  --fw-warning-bg:#43391f;
  --fw-danger:#f2a1a9;
  --fw-danger-bg:#472c32;
  --fw-info:#99c9f5;
  --fw-info-bg:#263a4c;
  color-scheme:dark
}

:root[data-density="compact"] {
  --fw-control-height:28px
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important
  }

}


/* components.css */
.fw-icon {
  width:19px;
  height:19px;
  flex:none;
  vertical-align:middle;
  fill:currentColor
}

.fw-row {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap
}

.fw-stack {
  display:flex;
  flex-direction:column;
  gap:12px
}

.fw-muted {
  color:var(--fw-muted)
}

.fw-btn {
  font:inherit;
  font-size:13px;
  line-height:1.25;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:var(--fw-control-height);
  padding:7px 13px;
  border:1px solid var(--fw-border-strong);
  border-radius:var(--fw-radius);
  background:var(--fw-surface);
  color:var(--fw-text);
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:background var(--fw-duration) var(--fw-ease),transform var(--fw-duration) var(--fw-ease)
}

.fw-btn:hover {
  background:var(--fw-sidebar)
}

.fw-btn:active {
  transform:translateY(1px)
}

.fw-btn--primary {
  background:var(--fw-accent);
  color:var(--fw-on-accent);
  border-color:transparent
}

.fw-btn--primary:hover {
  background:var(--fw-accent-hover)
}

.fw-btn--subtle {
  background:transparent;
  border-color:transparent
}

.fw-btn--icon {
  width:34px;
  padding:7px
}

.fw-btn--small {
  min-height:28px;
  font-size:12px;
  padding:5px 10px
}

.fw-btn--large {
  min-height:42px;
  padding:10px 20px;
  font-size:15px
}

.fw-btn:disabled,.fw-input:disabled {
  opacity:.45;
  cursor:not-allowed;
  transform:none
}

.fw-btn[aria-pressed="true"] {
  background:var(--fw-accent-soft);
  color:var(--fw-accent-text);
  border-color:var(--fw-accent)
}

.fw-group {
  display:inline-flex
}

.fw-group>.fw-btn {
  border-radius:0;
  margin-left:-1px
}

.fw-group>.fw-btn:first-child {
  border-radius:var(--fw-radius) 0 0 var(--fw-radius);
  margin:0
}

.fw-group>.fw-btn:last-child {
  border-radius:0 var(--fw-radius) var(--fw-radius) 0
}

.fw-field {
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:13px;
  flex:1;
  min-width:0
}

.fw-label {
  font-weight:500
}

.fw-input,.fw-select,.fw-textarea {
  width:100%;
  box-sizing:border-box;
  font:inherit;
  font-size:13px;
  min-height:var(--fw-control-height);
  padding:7px 10px;
  background:var(--fw-surface);
  color:var(--fw-text);
  border:1px solid var(--fw-border-strong);
  border-radius:var(--fw-radius);
  outline:none
}

.fw-input[aria-invalid="true"],.fw-select[aria-invalid="true"],.fw-textarea[aria-invalid="true"] {
  border-color:var(--fw-danger)
}

.fw-textarea {
  resize:vertical;
  min-height:80px
}

.fw-help {
  font-size:11px;
  color:var(--fw-muted)
}

.fw-error {
  color:var(--fw-danger);
  font-size:12px
}

.fw-check,.fw-radio {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  cursor:pointer
}

.fw-check input,.fw-radio input {
  width:17px;
  height:17px;
  accent-color:var(--fw-accent);
  margin:0
}

.fw-switch {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  cursor:pointer
}

.fw-switch input {
  appearance:none;
  width:34px;
  height:19px;
  border:1px solid var(--fw-muted);
  border-radius:20px;
  background:var(--fw-surface);
  position:relative;
  margin:0;
  cursor:pointer;
  flex-shrink:0;
  transition:background var(--fw-duration)
}

.fw-switch input:before {
  content:'';
  display:block;
  width:11px;
  height:11px;
  background:var(--fw-muted);
  border-radius:50%;
  position:absolute;
  left:3px;
  top:3px;
  transition:transform var(--fw-duration)
}

.fw-switch input:checked {
  background:var(--fw-accent);
  border-color:var(--fw-accent)
}

.fw-switch input:checked:before {
  background:var(--fw-on-accent);
  transform:translateX(15px)
}

.fw-range {
  width:100%;
  accent-color:var(--fw-accent)
}

.fw-search {
  position:relative
}

.fw-search>.fw-icon {
  position:absolute;
  left:10px;
  top:8px;
  color:var(--fw-muted);
  width:16px;
  height:16px
}

.fw-search .fw-input {
  padding-left:34px
}

.fw-select {
  cursor:pointer
}

.fw-upload {
  padding:22px;
  border:1px dashed var(--fw-border-strong);
  border-radius:var(--fw-radius);
  text-align:center;
  font-size:12px
}

.fw-upload input {
  max-width:100%;
  font:inherit
}

.fw-badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 8px;
  border-radius:4px;
  font-size:11px;
  font-weight:500;
  white-space:nowrap;
  background:var(--fw-accent-soft);
  color:var(--fw-accent-text)
}

.fw-badge--success {
  background:var(--fw-success-bg);
  color:var(--fw-success)
}

.fw-badge--warning {
  background:var(--fw-warning-bg);
  color:var(--fw-warning)
}

.fw-badge--danger {
  background:var(--fw-danger-bg);
  color:var(--fw-danger)
}

.fw-badge--neutral {
  background:var(--fw-sidebar);
  color:var(--fw-muted)
}

.fw-badge .fw-icon {
  width:12px;
  height:12px
}

.fw-alert {
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:var(--fw-info-bg);
  border:1px solid color-mix(in srgb,var(--fw-info) 15%,transparent);
  border-radius:var(--fw-radius);
  padding:12px;
  font-size:12px;
  color:var(--fw-info)
}

.fw-alert strong {
  display:block;
  font-weight:600;
  margin-bottom:3px
}

.fw-alert--success {
  background:var(--fw-success-bg);
  color:var(--fw-success);
  border-color:color-mix(in srgb,var(--fw-success) 15%,transparent)
}

.fw-alert--warning {
  background:var(--fw-warning-bg);
  color:var(--fw-warning)
}

.fw-alert--danger {
  background:var(--fw-danger-bg);
  color:var(--fw-danger)
}

.fw-progress {
  width:100%;
  height:5px;
  border:0;
  border-radius:5px;
  overflow:hidden;
  accent-color:var(--fw-accent);
  background:var(--fw-border)
}

.fw-progress::-webkit-progress-bar {
  background:var(--fw-border)
}

.fw-progress::-webkit-progress-value {
  background:var(--fw-accent);
  border-radius:5px
}

.fw-spinner {
  width:25px;
  height:25px;
  border:2px solid var(--fw-border);
  border-top-color:var(--fw-accent);
  border-radius:50%;
  animation:fw-spin .85s linear infinite
}

.fw-skeleton {
  height:12px;
  border-radius:4px;
  background:linear-gradient(90deg,var(--fw-border),var(--fw-sidebar),var(--fw-border));
  background-size:200% 100%;
  animation:fw-shimmer 1.8s linear infinite
}

.fw-empty {
  text-align:center;
  padding:20px;
  color:var(--fw-muted);
  font-size:13px
}

.fw-empty .fw-icon {
  width:36px;
  height:36px;
  margin-bottom:8px
}

.fw-empty strong {
  display:block;
  color:var(--fw-text);
  margin-bottom:5px
}

.fw-tabs {
  display:flex;
  gap:22px;
  border-bottom:1px solid var(--fw-border)
}

.fw-tab {
  font:inherit;
  font-size:13px;
  position:relative;
  border:0;
  background:transparent;
  color:var(--fw-muted);
  padding:13px 0;
  cursor:pointer;
  white-space:nowrap
}

.fw-tab[aria-selected="true"] {
  color:var(--fw-text);
  font-weight:600
}

.fw-tab[aria-selected="true"]:after {
  content:'';
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  height:3px;
  background:var(--fw-accent);
  border-radius:3px
}

.fw-breadcrumbs {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  color:var(--fw-muted)
}

.fw-breadcrumbs a {
  color:inherit
}

.fw-breadcrumbs .fw-icon {
  width:12px;
  height:12px
}

.fw-tree {
  font-size:13px
}

.fw-tree details {
  padding:5px 0
}

.fw-tree details>div {
  padding:8px 0 4px 24px
}

.fw-tree summary {
  cursor:pointer
}

.fw-menu {
  position:relative;
  display:inline-block
}

.fw-menu-panel {
  position:absolute;
  z-index:30;
  top:calc(100% + 5px);
  left:0;
  background:var(--fw-surface);
  padding:5px;
  border:1px solid var(--fw-border);
  border-radius:7px;
  min-width:170px;
  box-shadow:var(--fw-shadow-overlay)
}

.fw-menu-panel button {
  display:flex;
  width:100%;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:0;
  background:transparent;
  color:var(--fw-text);
  font:inherit;
  font-size:12px;
  text-align:left;
  cursor:pointer;
  border-radius:4px
}

.fw-menu-panel button:hover {
  background:var(--fw-accent-soft)
}

.fw-menubar {
  display:flex;
  gap:4px;
  padding:5px;
  background:var(--fw-surface-alt);
  border:1px solid var(--fw-border);
  border-radius:5px
}

.fw-nav {
  display:flex;
  flex-direction:column;
  gap:3px
}

.fw-nav button {
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left
}

.fw-tooltip {
  position:relative
}

.fw-tooltip:hover:after,.fw-tooltip:focus-visible:after {
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 7px);
  left:50%;
  transform:translateX(-50%);
  padding:6px 10px;
  background:var(--fw-text);
  color:var(--fw-surface);
  font-size:11px;
  border-radius:4px;
  white-space:nowrap;
  box-shadow:var(--fw-shadow);
  z-index:20
}

.fw-card {
  background:var(--fw-surface);
  border:1px solid var(--fw-border);
  border-radius:var(--fw-radius-lg);
  padding:18px;
  box-shadow:var(--fw-shadow);
  font-size:13px
}

.fw-card h3 {
  margin:0 0 8px;
  font-size:15px
}

.fw-accordion {
  border:1px solid var(--fw-border);
  border-radius:5px;
  background:var(--fw-surface);
  font-size:13px
}

.fw-accordion summary {
  cursor:pointer;
  padding:13px;
  font-weight:500
}

.fw-accordion>div {
  padding:0 13px 13px;
  color:var(--fw-muted);
  line-height:1.6
}

.fw-split {
  display:grid;
  grid-template-columns:minmax(80px,1fr) 2fr;
  border:1px solid var(--fw-border);
  border-radius:5px;
  overflow:hidden;
  min-height:120px
}

.fw-split>div {
  padding:15px;
  overflow:auto
}

.fw-split>div:first-child {
  background:var(--fw-surface-alt);
  border-right:1px solid var(--fw-border);
  resize:horizontal;
  min-width:80px;
  max-width:250px
}

.fw-kpi {
  font-size:30px;
  font-weight:600;
  letter-spacing:-1px;
  line-height:1.3
}

.fw-trend {
  color:var(--fw-success);
  font-size:11px;
  display:flex;
  gap:4px;
  align-items:center;
  margin-top:4px
}

.fw-avatar {
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  font-size:10px;
  background:var(--fw-accent-soft);
  color:var(--fw-accent-text);
  flex-shrink:0
}

.fw-table-wrap {
  overflow:auto
}

.fw-table {
  border-collapse:collapse;
  width:100%;
  font-size:12px;
  text-align:left;
  white-space:nowrap
}

.fw-table th {
  font-size:11px;
  font-weight:500;
  color:var(--fw-muted);
  background:var(--fw-surface-alt)
}

.fw-table th,.fw-table td {
  padding:11px 13px;
  border-bottom:1px solid var(--fw-border)
}

.fw-table tbody tr:last-child td {
  border-bottom:0
}

.fw-table tbody tr:hover {
  background:var(--fw-accent-soft)
}

.fw-table tbody tr:has(input:checked) {
  background:var(--fw-accent-soft)
}

.fw-table th button {
  font:inherit;
  color:inherit;
  background:transparent;
  border:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0
}

.fw-table input[type="checkbox"] {
  accent-color:var(--fw-accent);
  width:14px;
  height:14px;
  margin:0
}

.fw-dialog {
  border:1px solid var(--fw-border);
  border-radius:10px;
  padding:0;
  background:var(--fw-surface);
  color:var(--fw-text);
  box-shadow:var(--fw-shadow-overlay);
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 40px);
  width:460px;
  font-family:var(--fw-font);
  animation:fw-enter var(--fw-duration-slow) var(--fw-ease)
}

.fw-dialog::backdrop {
  background:#18142565;
  backdrop-filter:blur(3px)
}

.fw-dialog-head {
  padding:20px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--fw-border)
}

.fw-dialog-head h2 {
  font-size:18px;
  margin:0
}

.fw-dialog-body {
  padding:24px;
  font-size:13px;
  line-height:1.65
}

.fw-dialog-foot {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:16px 24px;
  border-top:1px solid var(--fw-border);
  background:var(--fw-surface-alt)
}

.fw-drawer {
  margin:0 0 0 auto;
  height:100dvh;
  max-height:100dvh;
  border-radius:0;
  width:380px
}

.fw-toast-area {
  position:fixed;
  right:24px;
  bottom:40px;
  z-index:1000;
  display:grid;
  gap:10px;
  max-width:calc(100vw - 48px)
}

.fw-toast {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background:var(--fw-surface);
  border:1px solid var(--fw-border);
  border-radius:8px;
  box-shadow:var(--fw-shadow-overlay);
  font-size:13px;
  animation:fw-enter var(--fw-duration-slow) var(--fw-ease)
}

.fw-toast>.fw-icon {
  color:var(--fw-success)
}

.fw-chart {
  position:relative;
  height:160px;
  width:100%
}

.fw-code {
  font:12px/1.8 'Cascadia Code',Consolas,monospace;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:0;
  color:var(--fw-accent-text);
  padding:22px;
  background:var(--fw-surface-alt);
  border-radius:6px;
  max-height:380px;
  overflow:auto
}

.fw-code-inline {
  font:11px Consolas,monospace;
  background:var(--fw-sidebar);
  padding:2px 5px;
  border-radius:3px
}

@keyframes fw-spin {
  to {
    transform:rotate(360deg)
  }

}

@keyframes fw-shimmer {
  to {
    background-position:-200% 0
  }

}

@keyframes fw-enter {
  from {
    opacity:0;
    transform:translateY(6px) scale(.985)
  }

  to {
    opacity:1;
    transform:translateY(0) scale(1)
  }

}

.fw-component {
  font:13px/1.5 var(--fw-font);
  color:var(--fw-text)
}

.fw-component * {
  box-sizing:border-box
}

.fw-nav button[aria-current="page"] {
  background:var(--fw-accent-soft);
  color:var(--fw-accent-text)
}

.fw-data-heading {
  padding:15px;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.fw-data-heading strong {
  font-size:12px;
  font-weight:600
}

.fw-data-heading small {
  font-size:11px;
  color:var(--fw-muted);
  margin-left:7px
}

.fw-split-button {
  display:inline-flex
}

.fw-split-button>.fw-btn {
  border-radius:var(--fw-radius) 0 0 var(--fw-radius)
}

.fw-split-button>.fw-menu>.fw-btn {
  border-radius:0 var(--fw-radius) var(--fw-radius) 0;
  border-left:0
}


/* fields.css */
/* Field-label layout is independent from the single-border focus styling. */
:root {
  --fw-label-width: 140px;
  --fw-label-gap: 12px;
}

.fw-field--top {
  display: flex;
  flex-direction: column;
}

.fw-field--left {
  display: grid;
  grid-template-columns: minmax(72px, min(36%, var(--fw-label-width))) minmax(0, 1fr);
  column-gap: var(--fw-label-gap);
  row-gap: 6px;
  align-items: center;
}

.fw-field--left > .fw-label {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.fw-field--left > :is(input, select, textarea, .fw-search) {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.fw-field--left > :is(.fw-help, .fw-error, output) {
  grid-column: 2;
}

.fw-field--inside {
  position: relative;
}

.fw-field--inside > .fw-label {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.fw-field input::placeholder,
.fw-field textarea::placeholder {
  color: var(--fw-muted);
  opacity: 1;
}


/* spinners.css */
/* Dibos CSS-project: ten dependency-free loading animations. */
.fw-spinner {
  --fw-spinner-size: 36px;
  --fw-spinner-color: var(--fw-accent);
  --fw-spinner-color-2: var(--fw-info);
  --fw-spinner-color-3: var(--fw-success);
  --fw-spinner-duration: 1s;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--fw-spinner-size);
  height: var(--fw-spinner-size);
  box-sizing: border-box;
  vertical-align: middle;
  border: 3px solid var(--fw-border);
  border-top-color: var(--fw-spinner-color);
  border-radius: 50%;
  background: none;
  animation: fw-loader-turn var(--fw-spinner-duration) linear infinite;
}
.fw-spinner > i { display: none; box-sizing: border-box; }
.fw-spinner--small { --fw-spinner-size: 24px; }
.fw-spinner--large { --fw-spinner-size: 56px; }
.fw-spinner--speed-slow { --fw-spinner-duration: 1.6s; }
.fw-spinner--speed-fast { --fw-spinner-duration: .65s; }
.fw-spinner[data-spinner-color="multi"] { --fw-spinner-color: #7964d8; --fw-spinner-color-2: #2aa8be; --fw-spinner-color-3: #e7779a; }
.fw-spinner[data-spinner-color="blue"] { --fw-spinner-color: #0f6cbd; --fw-spinner-color-2: #51a9e3; --fw-spinner-color-3: #9bcdf0; }
.fw-spinner[data-spinner-color="purple"] { --fw-spinner-color: #735bca; --fw-spinner-color-2: #a991e8; --fw-spinner-color-3: #d1b9ef; }
.fw-spinner[data-spinner-color="green"] { --fw-spinner-color: #14846b; --fw-spinner-color-2: #5cb79a; --fw-spinner-color-3: #9ed5b9; }
.fw-spinner[data-spinner-color="rose"] { --fw-spinner-color: #c1427f; --fw-spinner-color-2: #e580ac; --fw-spinner-color-3: #f0b6cd; }
.fw-spinner[data-spinner-color="orange"] { --fw-spinner-color: #b9621c; --fw-spinner-color-2: #e49949; --fw-spinner-color-3: #f3c57b; }
.fw-spinner:where(.fw-spinner--dual,.fw-spinner--gradient,.fw-spinner--dots,.fw-spinner--orbit,.fw-spinner--ripple,.fw-spinner--bars,.fw-spinner--comet,.fw-spinner--tiles,.fw-spinner--blob) {
  border: 0;
  border-radius: 0;
  animation: none;
}
/* Two arcs share the same center; no separate image or JavaScript is needed. */
.fw-spinner--dual::before, .fw-spinner--dual::after {
  content: ""; position: absolute; inset: 0; border: 3px solid transparent; border-top-color: var(--fw-spinner-color); border-bottom-color: var(--fw-spinner-color); border-radius: 50%;
  animation: fw-loader-turn var(--fw-spinner-duration) linear infinite;
}
.fw-spinner--dual::after { inset: 24%; border-width: 2px; border-top-color: var(--fw-spinner-color-2); border-bottom-color: var(--fw-spinner-color-2); animation-direction: reverse; }
/* A conic gradient is clipped to a thin ring. */
.fw-spinner--gradient { border-radius: 50%; background: conic-gradient(from 0deg,transparent 5%,var(--fw-spinner-color),var(--fw-spinner-color-2),var(--fw-spinner-color-3),transparent 95%); mask: radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px)); animation: fw-loader-turn var(--fw-spinner-duration) linear infinite; }
/* Three dots move rather than flashing. */
.fw-spinner--dots > i:nth-child(-n+3) { display: block; position: absolute; top: 39%; width: 24%; height: 24%; left: calc(var(--i) * 38%); border-radius: 50%; background: var(--fw-spinner-color); animation: fw-loader-bounce var(--fw-spinner-duration) ease-in-out infinite; animation-delay: calc(var(--i) * var(--fw-spinner-duration) / -5); }
.fw-spinner--dots > i:nth-child(2) { background: var(--fw-spinner-color-2); }
.fw-spinner--dots > i:nth-child(3) { background: var(--fw-spinner-color-3); }
/* Three satellites rotate at different starting angles. */
.fw-spinner--orbit::before { content: ""; position: absolute; inset: 9%; border: 1px solid var(--fw-border); border-radius: 50%; }
.fw-spinner--orbit > i:nth-child(-n+3) { display: block; position: absolute; inset: 0; animation: fw-loader-turn var(--fw-spinner-duration) linear infinite; animation-delay: calc(var(--i) * var(--fw-spinner-duration) / -3); }
.fw-spinner--orbit > i:nth-child(-n+3)::before { content: ""; position: absolute; top: 1%; left: 39%; width: 23%; height: 23%; border-radius: 50%; background: var(--fw-spinner-color); }
.fw-spinner--orbit > i:nth-child(2)::before { background: var(--fw-spinner-color-2); }
.fw-spinner--orbit > i:nth-child(3)::before { background: var(--fw-spinner-color-3); }
/* Ripple rings expand smoothly from the center. */
.fw-spinner--ripple::before,.fw-spinner--ripple::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--fw-spinner-color); border-radius: 50%; animation: fw-loader-ripple calc(var(--fw-spinner-duration) * 1.4) ease-out infinite; }
.fw-spinner--ripple::after { border-color: var(--fw-spinner-color-2); animation-delay: calc(var(--fw-spinner-duration) * -.7); }
/* Five equalizers form a soft wave. */
.fw-spinner--bars > i:nth-child(-n+5) { display: block; position: absolute; top: 10%; left: calc(var(--i) * 21%); width: 13%; height: 80%; border-radius: 3px; background: var(--fw-spinner-color); transform-origin: center; animation: fw-loader-wave var(--fw-spinner-duration) ease-in-out infinite; animation-delay: calc(var(--i) * var(--fw-spinner-duration) / -7); }
.fw-spinner--bars > i:nth-child(2n) { background: var(--fw-spinner-color-2); }
.fw-spinner--bars > i:nth-child(3) { background: var(--fw-spinner-color-3); }
/* Eight dots fade along an orbit without increasing the animation frequency. */
.fw-spinner--comet > i { display: block; position: absolute; top: 42%; left: 42%; width: 16%; height: 16%; border-radius: 50%; background: var(--fw-spinner-color); transform: rotate(calc(var(--i) * 45deg)) translateY(calc(var(--fw-spinner-size) * -.39)); animation: fw-loader-trail var(--fw-spinner-duration) linear infinite; animation-delay: calc(var(--i) * var(--fw-spinner-duration) / -8); }
.fw-spinner--comet > i:nth-child(3n) { background: var(--fw-spinner-color-2); }
/* Four tiles tilt and rise in sequence. */
.fw-spinner--tiles > i:nth-child(-n+4) { display: block; position: absolute; width: 36%; height: 36%; border-radius: 3px; background: var(--fw-spinner-color); animation: fw-loader-tile calc(var(--fw-spinner-duration) * 1.4) ease-in-out infinite; animation-delay: calc(var(--i) * var(--fw-spinner-duration) * -.2); }
.fw-spinner--tiles > i:nth-child(1) { left: 7%; top: 7%; }
.fw-spinner--tiles > i:nth-child(2) { right: 7%; top: 7%; background: var(--fw-spinner-color-2); }
.fw-spinner--tiles > i:nth-child(3) { right: 7%; bottom: 7%; background: var(--fw-spinner-color-3); }
.fw-spinner--tiles > i:nth-child(4) { left: 7%; bottom: 7%; }
/* A single organic shape gently morphs instead of flashing. */
.fw-spinner--blob { background: linear-gradient(135deg,var(--fw-spinner-color),var(--fw-spinner-color-2),var(--fw-spinner-color-3)); border-radius: 48% 52% 64% 36% / 44% 40% 60% 56%; animation: fw-loader-blob calc(var(--fw-spinner-duration) * 2.2) ease-in-out infinite; }
.fw-spinner--paused,.fw-spinner--paused::before,.fw-spinner--paused::after,.fw-spinner--paused *,.fw-spinner--paused *::before { animation-play-state: paused !important; }
.fw-loading { display: inline-flex; align-items: center; gap: 14px; color: var(--fw-text); font: 13px/1.5 var(--fw-font); }
@keyframes fw-loader-turn { to { transform: rotate(360deg); } }
@keyframes fw-loader-bounce { 0%,70%,100% { transform: translateY(0) scale(.82); } 35% { transform: translateY(-65%) scale(1); } }
@keyframes fw-loader-ripple { 0% { transform: scale(.12); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
@keyframes fw-loader-wave { 0%,70%,100% { transform: scaleY(.35); } 35% { transform: scaleY(1); } }
@keyframes fw-loader-trail { 0%,100% { opacity: 1; } 75% { opacity: .18; } }
@keyframes fw-loader-tile { 0%,70%,100% { transform: translateY(0) rotate(0); opacity: .65; } 35% { transform: translateY(-13%) rotate(14deg); opacity: 1; } }
@keyframes fw-loader-blob { 0%,100% { transform: rotate(0) scale(.86); border-radius: 48% 52% 64% 36% / 44% 40% 60% 56%; } 50% { transform: rotate(180deg) scale(1); border-radius: 65% 35% 38% 62% / 54% 64% 36% 46%; } }
@media (prefers-reduced-motion: reduce) {
  .fw-spinner,.fw-spinner::before,.fw-spinner::after,.fw-spinner *,.fw-spinner *::before,.fw-spinner *::after { animation: none !important; }
  .fw-spinner--ripple::before { transform: scale(.5); opacity: .75; }
  .fw-spinner--ripple::after { transform: scale(.9); opacity: .35; }
}
.fw-spinner[data-spinner-color="custom"] {
  --fw-spinner-color-2: color-mix(in srgb,var(--fw-spinner-color),var(--fw-surface) 35%);
  --fw-spinner-color-3: color-mix(in srgb,var(--fw-spinner-color),var(--fw-surface) 60%);
}


/* extras.css */
/* Collapsible application shell; the toggle stays outside the sidebar. */
.fw-shell { display:grid; grid-template-columns:var(--fw-sidebar-width,226px) minmax(0,1fr); }
.fw-shell > [data-fw-sidebar] { min-width:0; }
.fw-shell[data-fw-sidebar-state="hidden"] { grid-template-columns:minmax(0,1fr); }
[data-fw-sidebar][hidden] { display:none!important; }
:root[data-sidebar-collapsed="true"] .fw-shell[data-fw-sidebar-key="dibos-main"] { grid-template-columns:minmax(0,1fr); }
:root[data-sidebar-collapsed="true"] .fw-shell[data-fw-sidebar-key="dibos-main"] > [data-fw-sidebar] { display:none; }
.fw-sidebar-toggle { flex-shrink:0; }
.fw-sidebar-demo { border:1px solid var(--fw-border); border-radius:var(--fw-radius); overflow:hidden; width:100%; }
.fw-sidebar-demo-header { padding:10px; border-bottom:1px solid var(--fw-border); background:var(--fw-surface); }
.fw-sidebar-demo .fw-shell { --fw-sidebar-width:145px; min-height:170px; }
.fw-sidebar-demo [data-fw-sidebar] { padding:10px; background:var(--fw-sidebar); border-right:1px solid var(--fw-border); }
.fw-sidebar-demo main { padding:18px; background:var(--fw-surface); min-width:0; }
.fw-sidebar-demo .fw-nav .fw-btn { font-size:11px; padding:6px; }

/* File selection and drag-and-drop share one native form field. */
.fw-file { width:100%; min-width:0; display:flex; flex-direction:column; gap:10px; text-align:left; }
.fw-file-input { color:var(--fw-text); max-width:100%; font:inherit; font-size:12px; }
.fw-file-input::file-selector-button { font:inherit; color:var(--fw-text); background:var(--fw-surface); border:1px solid var(--fw-border-strong); border-radius:var(--fw-radius); padding:8px 12px; margin-right:10px; cursor:pointer; }
.fw-file-input:focus-visible { outline:none; }
.fw-file-input:focus-visible::file-selector-button { border-color:var(--fw-focus-color); }
.fw-file-help,.fw-file-status { font-size:11px; line-height:1.6; margin:0; color:var(--fw-muted); }
.fw-file-error { font-size:12px; color:var(--fw-danger); margin:0; }
.fw-file-error:empty { display:none; }
.fw-file-list { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.fw-file-list li { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--fw-surface-alt); border:1px solid var(--fw-border); border-radius:var(--fw-radius); min-width:0; }
.fw-file-name { font-size:12px; overflow-wrap:anywhere; flex:1; min-width:0; }
.fw-file-size { font-size:10px; white-space:nowrap; color:var(--fw-muted); }
.fw-file-list .fw-btn { flex-shrink:0; }
.fw-dropzone { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:26px 18px; min-height:170px; border:1px dashed var(--fw-border-strong); border-radius:var(--fw-radius-lg); background:var(--fw-surface); text-align:center; cursor:pointer; }
.fw-dropzone>.fw-icon { width:28px; height:28px; color:var(--fw-accent-text); }
.fw-dropzone strong { font-size:13px; font-weight:600; }
.fw-dropzone .fw-file-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.fw-dropzone:focus-within,.fw-dropzone[data-dragging="true"] { border-color:var(--fw-focus-color); border-style:solid; background:var(--fw-accent-soft); outline:none; box-shadow:none; }
.fw-dropzone:has(input:disabled) { opacity:.5; cursor:not-allowed; }
.fw-dropzone:has(input:disabled) input { cursor:not-allowed; }
.fw-dropzone:has(input[aria-invalid="true"]) { border-color:var(--fw-danger); }

/* Statistics cards: independent horizontal and vertical alignment. */
.fw-stat-card { --stat-color:var(--fw-accent); --stat-on-color:var(--fw-on-accent); display:flex; flex-direction:column; gap:8px; min-height:190px; padding:24px; border:1px solid var(--fw-border); border-radius:var(--fw-radius-lg); background:var(--fw-surface); color:var(--fw-text); width:100%; }
.fw-stat-card--small { min-height:150px; padding:18px; }
.fw-stat-card--large { min-height:240px; padding:30px; }
.fw-stat-card--soft { background:color-mix(in srgb,var(--stat-color) 10%,var(--fw-surface)); border-color:color-mix(in srgb,var(--stat-color) 30%,var(--fw-border)); }
.fw-stat-card--outline { border-color:var(--stat-color); }
.fw-stat-card--solid { background:var(--stat-color); color:var(--stat-on-color); border-color:var(--stat-color); }
.fw-stat-card--align-start { align-items:flex-start; text-align:left; }
.fw-stat-card--align-center { align-items:center; text-align:center; }
.fw-stat-card--align-end { align-items:flex-end; text-align:right; }
.fw-stat-card--valign-start { justify-content:flex-start; }
.fw-stat-card--valign-center { justify-content:center; }
.fw-stat-card--valign-end { justify-content:flex-end; }
.fw-stat-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:8px; color:var(--stat-color); background:color-mix(in srgb,var(--stat-color) 12%,var(--fw-surface)); }
.fw-stat-card--solid .fw-stat-icon { color:inherit; background:color-mix(in srgb,currentColor 14%,transparent); }
.fw-stat-value { font-size:36px; font-weight:650; letter-spacing:-1.2px; line-height:1.15; overflow-wrap:anywhere; max-width:100%; }
.fw-stat-card--small .fw-stat-value { font-size:30px; }
.fw-stat-label { font-size:13px; font-weight:600; }
.fw-stat-description { font-size:11px; line-height:1.6; opacity:.8; }
.fw-stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)); gap:16px; width:100%; }
@media(max-width:760px) {
  .fw-shell.fw-shell--responsive { display:block; }
  .fw-shell--responsive > [data-fw-sidebar] { position:fixed; top:56px; left:0; width:230px; height:calc(100dvh - 80px); z-index:49; background:var(--fw-sidebar); box-shadow:var(--fw-shadow-overlay); overflow:auto; }
  .fw-sidebar-demo .fw-shell { --fw-sidebar-width:120px; }
}
@media(forced-colors:active) { .fw-dropzone:focus-within,.fw-dropzone[data-dragging="true"],.fw-file-input:focus-visible::file-selector-button { border-color:Highlight; } .fw-stat-card { border-color:CanvasText; } }

@media(max-width:760px) { :root[data-sidebar-collapsed="true"] .fw-shell[data-fw-sidebar-key="dibos-main"]>[data-fw-sidebar]:not([hidden]) { display:flex; } }
.fw-stat-card--solid .fw-stat-description { opacity:1; }


/* editor.css */
.fw-clearable { display:block; position:relative; min-width:0; width:100%; }
.fw-clearable>.fw-input { padding-right:35px; width:100%; }
.fw-clear-button { position:absolute; right:5px; top:50%; transform:translateY(-50%); width:24px; height:24px; display:grid; place-items:center; font:18px/1 var(--fw-font); color:var(--fw-muted); border:0; border-radius:3px; background:transparent; cursor:pointer; }
.fw-clear-button[hidden] { display:none; }
.fw-clear-button:hover,.fw-clear-button:focus-visible { color:var(--fw-text); background:var(--fw-accent-soft); outline:none; }
.fw-field--left>.fw-clearable { grid-column:2; }
.fw-rich { width:100%; min-width:0; }
.fw-rich>.fw-label { display:block; margin-bottom:8px; }
.fw-rich-frame { border:1px solid var(--fw-border-strong); border-radius:var(--fw-radius); background:var(--fw-surface); }
.fw-rich-frame:focus-within { border-color:var(--fw-focus-color); }
.fw-rich-toolbar { display:flex; flex-wrap:wrap; gap:5px; align-items:center; padding:9px; border-bottom:1px solid var(--fw-border); border-radius:var(--fw-radius) var(--fw-radius) 0 0; background:var(--fw-surface-alt); z-index:20; }
.fw-rich[data-toolbar="sticky"] .fw-rich-toolbar { position:sticky; top:var(--fw-editor-sticky-top,66px); }
.fw-rich-toolbar .fw-select { width:auto; max-width:150px; min-height:29px; height:29px; padding:3px 23px 3px 7px; font-size:11px; }
.fw-rich-toolbar .fw-btn { min-height:29px; height:29px; min-width:29px; padding:4px 7px; font-size:12px; }
.fw-rich-toolbar .fw-btn[aria-pressed="true"] { background:var(--fw-accent-soft); color:var(--fw-accent-text); border-color:var(--fw-accent); }
.fw-rich-toolbar label { display:inline-flex; align-items:center; gap:4px; font-size:10px; color:var(--fw-muted); }
.fw-rich-toolbar input[type=number] { width:48px; min-height:29px; height:29px; padding:3px 4px; font-size:11px; }
.fw-rich-toolbar input[type=color] { width:29px; height:29px; padding:3px; border:1px solid var(--fw-border-strong); border-radius:var(--fw-radius); background:var(--fw-surface); }
.fw-rich-toolbar input[type=color]:focus { outline:none; border-color:var(--fw-focus-color); }
.fw-rich-toolbar input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
.fw-rich-toolbar input[type=color]::-webkit-color-swatch { border:0; border-radius:2px; }
.fw-rich-divider { width:1px; height:20px; background:var(--fw-border); margin:0 2px; }
.fw-rich-content { min-height:210px; padding:16px; font:14px/1.65 var(--fw-font); color:var(--fw-text); outline:none; overflow-wrap:anywhere; }
.fw-rich-content:empty:before { content:attr(data-placeholder); color:var(--fw-muted); pointer-events:none; }
.fw-rich-content p { margin:0 0 12px; }
.fw-rich-content h1,.fw-rich-content h2,.fw-rich-content h3 { line-height:1.3; }
.fw-rich-content blockquote { border-left:3px solid var(--fw-border-strong); padding-left:14px; margin-left:0; }
.fw-rich-content ul,.fw-rich-content ol { padding-left:26px; }
.fw-rich-html { width:100%; min-height:230px; border:0; border-radius:0; font:12px/1.7 Consolas,monospace; }
.fw-rich-link { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px; border-top:1px solid var(--fw-border); }
.fw-rich-link[hidden],.fw-rich-content[hidden],.fw-rich-html[hidden] { display:none; }
.fw-rich-link label { font-size:12px; flex:1; min-width:170px; }
.fw-rich-link .fw-input { width:100%; }
.fw-rich-foot { display:flex; justify-content:space-between; gap:10px; font-size:10px; color:var(--fw-muted); margin-top:7px; }
.fw-rich-disabled { opacity:.55; }
.catalog-stat-controls { display:contents; }
.catalog-stat-controls[hidden] { display:none; }
.catalog-detail-preview--stat>.fw-stack { width:min(100%,420px); }
.catalog-detail-preview--editor>.fw-stack { width:100%; }
.catalog-detail-preview--editor { overflow:visible; }
@media(max-width:760px) { .fw-rich[data-toolbar="sticky"] .fw-rich-toolbar { top:56px; } .fw-rich-toolbar { gap:4px; padding:7px; } }
@media(forced-colors:active) { .fw-rich-frame:focus-within { border-color:Highlight; } .fw-clear-button:focus-visible { background:Highlight; color:HighlightText; } }
.fw-rich-toolbar input[type=number] { width:64px; min-width:64px; }

.catalog-component-card:has(.fw-rich) { overflow:visible; }
.catalog-detail-preview.catalog-detail-preview--editor { overflow:visible; }
/* Password reveal changes visibility only; the field keeps its single border. */
.fw-input-wrap { display:block; position:relative; width:100%; min-width:0; }
.fw-field--left>.fw-input-wrap { grid-column:2; grid-row:1; }
.fw-password>.fw-input { padding-right:40px; width:100%; }
.fw-password.fw-clearable>.fw-input { padding-right:70px; }
.fw-password.fw-clearable>.fw-clear-button { right:37px; }
.fw-password-toggle { position:absolute; top:50%; right:5px; transform:translateY(-50%); display:grid; place-items:center; width:30px; height:26px; padding:4px; border:0; border-radius:3px; background:transparent; color:var(--fw-muted); cursor:pointer; }
.fw-password-toggle:hover,.fw-password-toggle:focus-visible { background:var(--fw-accent-soft); color:var(--fw-accent-text); outline:none; }
.fw-password-toggle:disabled { opacity:.45; cursor:not-allowed; }
.fw-password-toggle .fw-icon { width:18px; height:18px; }
.fw-password-slash[hidden] { display:none; }
/* Avoid a second browser-supplied eye beside the library control in Edge. */
.fw-password>.fw-input::-ms-reveal,.fw-password>.fw-input::-ms-clear { display:none; }
@media(forced-colors:active) { .fw-password-toggle:focus-visible { background:Highlight; color:HighlightText; } }
.fw-password-toggle .fw-icon { fill:none; }


/* focus.css */
/*
 * Dibos Web UI — one-pixel focus borders
 * Load after component and application styles. Focus recolors the existing
 * border; it never adds an outside ring, glow, underline or layout shift.
 */
/* Text controls keep the same width, padding and radius in every state. */
.fw-input, .fw-select, .fw-textarea {
  border: var(--fw-control-border-width) solid var(--fw-border-strong);
  outline: none;
  box-shadow: none;
  transition: border-color var(--fw-duration) var(--fw-ease);
}

.fw-input:focus, .fw-select:focus, .fw-textarea:focus {
  border-color: var(--fw-focus-color);
  outline: none;
  box-shadow: none;
}

.fw-input[aria-invalid="true"], .fw-select[aria-invalid="true"], .fw-textarea[aria-invalid="true"] {
  border-color: var(--fw-danger);
}

.fw-input:disabled, .fw-select:disabled, .fw-textarea:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Buttons already reserve their border. Only its color changes on focus. */
.fw-btn:focus {
  outline: none;
  box-shadow: none;
}

.fw-btn:focus-visible {
  border-color: var(--fw-focus-color);
}

.fw-btn--primary:focus-visible {
  border-color: var(--fw-focus-on-accent);
}

/* Custom choice controls keep native semantics and keyboard behavior. */
.fw-check input[type="checkbox"], .fw-radio input[type="radio"], .fw-table input[type="checkbox"] {
  appearance: none;
  display: inline-grid;
  place-content: center;
  flex: none;
  width: 17px;
  height: 17px;
  padding: 0;
  margin: 0;
  border: var(--fw-control-border-width) solid var(--fw-border-strong);
  border-radius: 3px;
  background: var(--fw-surface);
  cursor: pointer;
  outline: none;
  box-shadow: none;
  transition: border-color var(--fw-duration) var(--fw-ease),               background-color var(--fw-duration) var(--fw-ease);
}

.fw-radio input[type="radio"] {
  border-radius: 50%;
}

.fw-table input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

.fw-check input[type="checkbox"]:checked, .fw-check input[type="checkbox"]:indeterminate, .fw-table input[type="checkbox"]:checked, .fw-table input[type="checkbox"]:indeterminate {
  border-color: var(--fw-accent);
  background: var(--fw-accent);
}

.fw-check input[type="checkbox"]:checked::before, .fw-table input[type="checkbox"]:checked::before {
  content: "";
  width: 4px;
  height: 8px;
  margin-top: -2px;
  border: solid var(--fw-on-accent);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.fw-check input[type="checkbox"]:indeterminate::before, .fw-table input[type="checkbox"]:indeterminate::before {
  content: "";
  width: 7px;
  height: 1px;
  background: var(--fw-on-accent);
}

.fw-radio input[type="radio"]:checked::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fw-accent);
}

.fw-check input[type="checkbox"]:focus-visible, .fw-radio input[type="radio"]:focus-visible, .fw-table input[type="checkbox"]:focus-visible, .fw-switch input:focus-visible {
  border-color: var(--fw-focus-color);
  outline: none;
  box-shadow: none;
}

.fw-check input[type="checkbox"]:checked:focus-visible, .fw-check input[type="checkbox"]:indeterminate:focus-visible, .fw-table input[type="checkbox"]:checked:focus-visible, .fw-table input[type="checkbox"]:indeterminate:focus-visible, .fw-switch input:checked:focus-visible {
  border-color: var(--fw-focus-on-accent);
}

.fw-check input:disabled, .fw-radio input:disabled, .fw-table input:disabled, .fw-switch input:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.fw-switch input:focus {
  outline: none;
  box-shadow: none;
}

/* A focused slider recolors its existing track and thumb border. */
.fw-range {
  appearance: none;
  height: 20px;
  margin: 0;
  background: transparent;
  outline: none;
}

.fw-range::-webkit-slider-runnable-track {
  height: 4px;
  border: 1px solid var(--fw-border-strong);
  border-radius: 4px;
  background: var(--fw-border);
}

.fw-range::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6px;
  border: 1px solid var(--fw-accent);
  border-radius: 50%;
  background: var(--fw-accent);
}

.fw-range::-moz-range-track {
  height: 2px;
  border: 1px solid var(--fw-border-strong);
  border-radius: 4px;
  background: var(--fw-border);
}

.fw-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 1px solid var(--fw-accent);
  border-radius: 50%;
  background: var(--fw-accent);
}

.fw-range:focus-visible::-webkit-slider-runnable-track {
  border-color: var(--fw-focus-color);
}

.fw-range:focus-visible::-moz-range-track {
  border-color: var(--fw-focus-color);
}

.fw-range:focus-visible::-webkit-slider-thumb {
  border-color: var(--fw-focus-on-accent);
}

.fw-range:focus-visible::-moz-range-thumb {
  border-color: var(--fw-focus-on-accent);
}

/* Color and file inputs follow the same single-edge convention. */
.dibos-palette-field input[type="color"]:focus {
  border-color: var(--fw-focus-color);
  outline: none;
  box-shadow: none;
}

.dibos-palette-field input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 2px;
}

.dibos-palette-field input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: 2px;
}

.fw-upload:has(input:focus-visible) {
  border-color: var(--fw-focus-color);
}

.fw-upload input:focus {
  outline: none;
  box-shadow: none;
}

/* Frameless controls reserve one transparent edge before receiving focus. */
.fw-tree summary, .fw-menu-panel button, .fw-table th button, .catalog-nav-item, .catalog-card-name, .catalog-segment button {
  border: var(--fw-control-border-width) solid transparent;
  border-radius: var(--fw-radius);
}

.fw-tree summary:focus-visible, .fw-menu-panel button:focus-visible, .fw-table th button:focus-visible, .catalog-nav-item:focus-visible, .catalog-card-name:focus-visible, .catalog-segment button:focus-visible, .catalog-theme:focus-visible {
  border-color: var(--fw-focus-color);
  outline: none;
  box-shadow: none;
}

/* Tabs and header links use their own surface; no surrounding focus frame. */
.fw-tab:focus-visible, .catalog-header-link:focus-visible {
  color: var(--fw-accent-text);
  background: var(--fw-accent-soft);
  outline: none;
  box-shadow: none;
}

.fw-accordion summary:focus-visible, .fw-split > div:focus-visible {
  outline: none;
}

.fw-accordion:has(> summary:focus-visible), .fw-split:has(> div:focus-visible) {
  border-color: var(--fw-focus-color);
}

.fw-table [contenteditable="true"] {
  display: inline-block;
  border: var(--fw-control-border-width) solid transparent;
  border-radius: 3px;
}

.fw-table [contenteditable="true"]:focus {
  border-color: var(--fw-focus-color);
  outline: none;
  box-shadow: none;
}

/* Text links stay visibly focusable without drawing a second rectangle. */
a:where(:not(.fw-btn, .catalog-nav-item, .catalog-header-link)):focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--fw-focus-color);
}

/* Scrollable regions have no control border: draw one line inside their box. */
.fw-table-wrap:focus-visible {
  outline: 1px solid var(--fw-focus-color);
  outline-offset: -1px;
}

/* System high-contrast modes retain a visible, single system-colored edge. */
@media (forced-colors: active) {
  .fw-input:focus,   .fw-select:focus,   .fw-textarea:focus,   .fw-btn:focus-visible {
    border-color: Highlight;
  }

  .fw-check input[type="checkbox"],   .fw-radio input[type="radio"],   .fw-table input[type="checkbox"],   .fw-range {
    appearance: auto;
  }

  .fw-check input::before,   .fw-radio input::before,   .fw-table input::before {
    display: none;
  }

}