:root {
  --ui-icon-sm: 13px;
  --ui-icon-md: 15px;
  --ui-button-ease: 180ms cubic-bezier(.2, .8, .2, 1);
}

button.ui-icon-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.ui-button-icon, button.ui-icon-button > svg { width:var(--ui-icon-md); height:var(--ui-icon-md); flex:0 0 auto; pointer-events:none; }
button.tiny.ui-icon-button > svg, button.detail-trigger.ui-icon-button > svg, .prompt-tools button.ui-icon-button > svg { width:var(--ui-icon-sm); height:var(--ui-icon-sm); }
button:focus-visible, [role="button"]:focus-visible { outline:2px solid rgba(125,211,252,.92); outline-offset:2px; }

body.ui-icons-main .btn, body.ui-icons-main .model-btn, body.ui-icons-main .seg-btn,
body.ui-icons-main .view-btn, body.ui-icons-main .size-preset-btn {
  touch-action:manipulation;
  transition:color var(--ui-button-ease), border-color var(--ui-button-ease), background-color var(--ui-button-ease), box-shadow var(--ui-button-ease), transform var(--ui-button-ease), opacity var(--ui-button-ease);
}
body.ui-icons-main .btn:not(.primary), body.ui-icons-main .model-btn, body.ui-icons-main .view-btn { box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 3px 10px rgba(0,0,0,.12); }
body.ui-icons-main .btn:hover:not(:disabled), body.ui-icons-main .model-btn:hover:not(:disabled), body.ui-icons-main .view-btn:hover:not(:disabled) { border-color:rgba(148,163,184,.48); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 7px 18px rgba(0,0,0,.2); }
body.ui-icons-main .btn:active:not(:disabled), body.ui-icons-main .model-btn:active:not(:disabled), body.ui-icons-main .seg-btn:active:not(:disabled), body.ui-icons-main .view-btn:active:not(:disabled), body.ui-icons-main .size-preset-btn:active:not(:disabled) { transform:translateY(1px) scale(.985); }
body.ui-icons-main button:disabled { cursor:not-allowed; filter:saturate(.72); }
body.ui-icons-main .prompt-tools .btn.tiny.ui-icon-button { width:auto; min-width:82px; padding-inline:8px; }
body.ui-icons-main .modal-head .btn.ui-icon-button { padding-inline:10px; }

body.ui-icons-admin button, body.ui-icons-login button {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 4px 12px rgba(2,6,23,.16);
  touch-action:manipulation;
  transition:color var(--ui-button-ease), border-color var(--ui-button-ease), background-color var(--ui-button-ease), box-shadow var(--ui-button-ease), transform var(--ui-button-ease), opacity var(--ui-button-ease);
}
body.ui-icons-admin button:hover:not(:disabled), body.ui-icons-login button:hover:not(:disabled) { box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 8px 20px rgba(2,6,23,.26); }
body.ui-icons-admin button:active:not(:disabled), body.ui-icons-login button:active:not(:disabled) { transform:translateY(1px) scale(.985); }
body.ui-icons-admin button:disabled, body.ui-icons-login button:disabled { opacity:.48; cursor:not-allowed; box-shadow:none; }
body.ui-icons-admin .dr-day, body.ui-icons-admin .dr-cal-nav { min-height:28px; box-shadow:none; }
body.ui-icons-admin .page, body.ui-icons-admin #adminPanel, body.ui-icons-admin .panel,
body.ui-icons-admin .summary-grid, body.ui-icons-admin .grid-2 { min-width:0; max-width:100%; }
body.ui-icons-admin .panel { overflow-x:auto; }
@media (max-width:1280px) {
  body.ui-icons-admin .summary-grid, body.ui-icons-admin .grid-2 { grid-template-columns:minmax(0, 1fr); }
  body.ui-icons-admin .toolbar-grid { grid-template-columns:auto minmax(280px, 1fr) auto auto; }
  body.ui-icons-admin .toolbar-grid #status { grid-column:1 / -1; justify-self:start; text-align:left; }
}
body.ui-icons-canvas button.ui-icon-button > svg { width:15px; height:15px; }

@media (max-width:700px) {
  :root { --ui-icon-md:14px; }
  body.ui-icons-main { overflow:auto; }
  body.ui-icons-main .topbar {
    height:auto;
    min-height:56px;
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:8px;
    padding:8px;
  }
  body.ui-icons-main .app-sub, body.ui-icons-main .topbar-spacer { display:none; }
  body.ui-icons-main .app-title { max-width:none; padding-inline:4px; }
  body.ui-icons-main .model-switch {
    width:100%;
    min-width:0;
    overflow-x:auto;
    justify-content:flex-start;
    scrollbar-width:thin;
  }
  body.ui-icons-main .model-switch .model-btn { min-width:max-content; padding-inline:10px; }
  body.ui-icons-main .user-box { width:100%; min-width:0; margin-left:0; flex-wrap:wrap; }
  body.ui-icons-main .user-label { flex:1 1 100%; max-width:100%; padding-inline:4px; }
  body.ui-icons-main .user-box .model-btn { flex:1 1 0; min-width:0; }
  body.ui-icons-main .page { height:auto; min-height:0; overflow:visible; }
  body.ui-icons-main .prompt-tools .btn.tiny.ui-icon-button { min-width:78px; gap:4px; }
  body.ui-icons-admin button, body.ui-icons-login button { min-height:40px; }
  body.ui-icons-admin .toolbar-grid { grid-template-columns:minmax(0, 1fr); }
  body.ui-icons-admin .toolbar-grid > * { min-width:0; width:100%; }
  body.ui-icons-admin .dr-trigger { min-height:40px; }
}
@media (prefers-reduced-motion:reduce) {
  button, .btn, .model-btn, .seg-btn, .view-btn, .size-preset-btn { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* Main WebUI uses a light surface system; keep icon affordances subtle on it. */
body.ui-icons-main.theme-light .btn:not(.primary),
body.ui-icons-main.theme-light .model-btn,
body.ui-icons-main.theme-light .view-btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 2px 7px rgba(15, 23, 42, 0.08);
}
body.ui-icons-main.theme-light .btn:hover:not(:disabled),
body.ui-icons-main.theme-light .model-btn:hover:not(:disabled),
body.ui-icons-main.theme-light .view-btn:hover:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 15px rgba(15, 23, 42, 0.12);
}
body.ui-icons-main.theme-light button:disabled {
  filter: none;
}

body.ui-icons-admin button,
body.ui-icons-login button {
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}
body.ui-icons-admin button:hover:not(:disabled),
body.ui-icons-login button:hover:not(:disabled) {
  box-shadow: 0 6px 15px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* Lucide icon finish for the glass workbench. Keep icons crisp, optically
   balanced with labels, and visible on both translucent themes. */
body.ui-icons-main .ui-button-icon,
body.ui-icons-main .btn-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: currentColor;
  opacity: 0.92;
  stroke-width: 2.1;
  pointer-events: none;
  transition: opacity var(--ui-button-ease), transform var(--ui-button-ease);
}

body.ui-icons-main .model-btn .ui-button-icon {
  width: 15px;
  height: 15px;
  flex-basis: 15px;
}

body.ui-icons-main .btn:hover:not(:disabled) .ui-button-icon,
body.ui-icons-main .model-btn:hover:not(:disabled) .ui-button-icon,
body.ui-icons-main .seg-btn:hover .ui-button-icon,
body.ui-icons-main .view-btn:hover .ui-button-icon {
  opacity: 1;
  transform: translateY(-0.5px);
}

body.ui-icons-main button:disabled .ui-button-icon {
  opacity: 0.58;
}

body.ui-icons-main .number-step-btn.ui-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

body.ui-icons-main .number-step-btn.ui-icon-button::before {
  display: none;
}

body.ui-icons-main .number-step-btn .ui-button-icon {
  width: 12px;
  height: 12px;
  flex-basis: 12px;
  stroke-width: 2.4;
}

body.ui-icons-main.theme-light .ui-button-icon,
body.ui-icons-main.theme-light .btn-icon {
  opacity: 0.88;
}