:root {
  --ui-icon-xs: 11px;
  --ui-icon-sm: 14px;
  --ui-icon-md: 16px;
  --ui-icon-lg: 18px;
  --ui-icon-size: var(--ui-icon-lg);
  --ui-icon-button-compact: 18px;
  --ui-icon-button-desktop: 21px;
  --ui-icon-hit-mobile: 44px;
  --ui-icon-stroke: 1.8;
  --ui-motion-fast: 160ms;
  --ui-motion-standard: 220ms;
  --ui-control-primary: #18181b;
  --ui-control-preview: #245bdd;
  --ui-control-muted: #98a2b0;
  --ui-control-danger: #c93434;
}

.ui-icon-xs { --ui-icon-size: var(--ui-icon-xs); }
.ui-icon-sm { --ui-icon-size: var(--ui-icon-sm); }
.ui-icon-md { --ui-icon-size: var(--ui-icon-md); }
.ui-icon-lg { --ui-icon-size: var(--ui-icon-lg); }

[data-icon], .ui-icon {
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  line-height: 0;
  pointer-events: none;
}

/* Shared popup close control. Component event handlers and IDs remain page-owned. */
html body button.ui-modal-close.ui-modal-close.ui-modal-close.ui-modal-close[data-icon-button-size="modal-close"] {
  width:30px !important;
  min-width:30px !important;
  max-width:30px !important;
  height:30px !important;
  min-height:30px !important;
  max-height:30px !important;
  flex:0 0 30px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  box-sizing:border-box !important;
  border:1px solid rgba(118,137,164,.16) !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.58) !important;
  color:#667085 !important;
  box-shadow:0 1px 2px rgba(31,48,75,.05) !important;
  font-size:0 !important;
  line-height:0 !important;
  cursor:pointer;
  transition:background var(--ui-motion-fast) ease, border-color var(--ui-motion-fast) ease, color var(--ui-motion-fast) ease, box-shadow var(--ui-motion-fast) ease;
}

html body button.ui-modal-close.ui-modal-close.ui-modal-close.ui-modal-close[data-icon-button-size="modal-close"]:hover,
html body button.ui-modal-close.ui-modal-close.ui-modal-close.ui-modal-close[data-icon-button-size="modal-close"]:focus-visible {
  border-color:rgba(118,137,164,.28) !important;
  background:rgba(255,255,255,.92) !important;
  color:#18243a !important;
  box-shadow:0 3px 8px rgba(31,48,75,.09) !important;
  outline:none !important;
}

html body button.ui-modal-close.ui-modal-close.ui-modal-close.ui-modal-close[data-icon-button-size="modal-close"] [data-icon],
html body button.ui-modal-close.ui-modal-close.ui-modal-close.ui-modal-close[data-icon-button-size="modal-close"] .ui-icon,
html body button.ui-modal-close.ui-modal-close.ui-modal-close.ui-modal-close[data-icon-button-size="modal-close"] svg {
  width:12px !important;
  min-width:12px !important;
  max-width:12px !important;
  height:12px !important;
  min-height:12px !important;
  max-height:12px !important;
  padding:0 !important;
}

[data-icon] > svg, .ui-icon > svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--ui-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-search-control {
  position: relative;
  width: 100%;
  min-width: 0;
}

.ui-search-control > .ui-search-icon {
  position: absolute;
  z-index: 1;
  left: 11px;
  top: 50%;
  width: 16px;
  height: 16px;
  color: #8290a4;
  pointer-events: none;
  transform: translateY(-50%);
}

.ui-search-control > input {
  margin-bottom: 0 !important;
  padding-left: 36px !important;
}

.ui-search-control:focus-within > .ui-search-icon {
  color: var(--workspace-primary, var(--blue, #245bdd));
}

.btn, .workspace-nav-item, .workspace-collapse, .admin-nav button, .admin-collapse {
  align-items: center;
  gap: 4px;
}

.btn > [data-icon], .btn > .ui-icon,
.workspace-nav-item > [data-icon], .workspace-nav-item > .ui-icon,
.workspace-collapse > [data-icon], .workspace-collapse > .ui-icon,
.admin-nav button > [data-icon], .admin-nav button > .ui-icon,
.admin-collapse > [data-icon], .admin-collapse > .ui-icon {
  width: 1em;
  height: 1em;
  flex-basis: 1em;
  margin: 0;
}

.btn:not(.secondary):not(.soft):not(.red) > [data-icon],
.btn:not(.secondary):not(.soft):not(.red) > .ui-icon {
  color: #fff;
}

.btn.icon-action > [data-icon], .btn.icon-action > .ui-icon,
.btn.save-row > [data-icon], .btn.save-row > .ui-icon,
.btn.delete-customer > [data-icon], .btn.delete-customer > .ui-icon,
.btn.recent-preview > [data-icon], .btn.recent-preview > .ui-icon,
.btn.image-remove-hit > [data-icon], .btn.image-remove-hit > .ui-icon {
  color: inherit;
}

.btn.icon, .icon-btn, .workspace-logout {
  display: inline-grid;
  place-items: center;
  gap: 0;
}

.btn.icon, .icon-btn, .workspace-logout,
.ops .op-icon, .edit-head, .circle, .circle-plus, .x-del, .drag-handle,
.img-actions button, .product-img .x {
  min-width: var(--ui-icon-button-desktop) !important;
  min-height: var(--ui-icon-button-desktop) !important;
}

.ops [data-copy].op-icon, .ops [data-del].op-icon,
.ops .drag-row-handle, .edit-head {
  width: var(--ui-icon-button-desktop) !important;
  height: var(--ui-icon-button-desktop) !important;
}

.btn.icon > [data-icon], .icon-btn > [data-icon], .workspace-logout > [data-icon] {
  margin: 0;
}

.btn.icon > [data-icon], .icon-btn > [data-icon], .workspace-logout > [data-icon],
.ops .op-icon [data-icon], .ops .op-icon svg, .edit-head [data-icon], .edit-head svg,
.action-icon [data-icon], .action-icon svg {
  width: 14px;
  height: 14px;
}

.btn, .icon-btn, .workspace-nav-item, .workspace-logout {
  transition: transform var(--ui-motion-fast) ease, box-shadow var(--ui-motion-standard) ease,
    background-color var(--ui-motion-standard) ease, color var(--ui-motion-standard) ease,
    border-color var(--ui-motion-standard) ease, opacity var(--ui-motion-standard) ease;
}

.btn:hover:not(:disabled), .icon-btn:hover:not(:disabled), .workspace-nav-item:hover,
.workspace-logout:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn:active:not(:disabled), .icon-btn:active:not(:disabled), .workspace-nav-item:active,
.workspace-logout:active:not(:disabled) {
  transform: translateY(0) scale(.98);
}

.btn:disabled, .icon-btn:disabled, .workspace-logout:disabled {
  cursor: not-allowed;
  opacity: .56;
  transform: none;
}

.btn:focus-visible, .icon-btn:focus-visible, .workspace-nav-item:focus-visible,
.workspace-logout:focus-visible, [data-icon]:focus-visible {
  outline: 3px solid rgba(36, 91, 221, .28);
  outline-offset: 2px;
}

.is-loading > [data-icon], .is-loading > .ui-icon {
  animation: ui-icon-spin .8s linear infinite;
}

[data-motion-list] > * {
  opacity: 0;
  transform: translateY(8px);
}

[data-motion-list].motion-list-ready > * {
  animation: ui-list-enter 320ms cubic-bezier(.22, .7, .2, 1) both;
  animation-delay: calc(var(--motion-index, 0) * 30ms);
}

[data-motion-list].motion-list-static > * {
  opacity: 1;
  transform: none;
  animation: none;
}

@media (min-width:681px) and (min-height:501px), (min-width:951px) {
  button [data-icon],
  button .ui-icon,
  button svg {
    width:12px !important;
    height:12px !important;
    min-width:12px !important;
    min-height:12px !important;
    max-width:12px !important;
    max-height:12px !important;
    flex-basis:12px !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }

  .btn.icon:not([data-icon-button-size]),
  .icon-btn,
  .icon-action,
  .op-icon,
  .action-icon,
  .edit-head,
  .circle,
  .circle-plus,
  .x-del,
  .drag-handle,
  .save-row,
  .save-public,
  .image-remove-hit,
  .recent-preview,
  .delete-customer,
  .product-audit-button,
  .summary-edit,
  button[aria-label]:not([data-icon-button-size]):has(> [data-icon]:only-child),
  button[aria-label]:not([data-icon-button-size]):has(> .ui-icon:only-child),
  button[aria-label]:not([data-icon-button-size]):has(> svg.lucide:only-child) {
    width:21px !important;
    min-width:21px !important;
    height:21px !important;
    min-height:21px !important;
    padding:0 !important;
  }
}

@keyframes ui-icon-spin {
  to { transform: rotate(360deg); }
}

@keyframes ui-list-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  [data-motion-list] > * { opacity: 1; transform: none; }
}

@media (max-width: 680px), (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  :root { --ui-icon-size: var(--ui-icon-md); }
  html body button.ui-modal-close.ui-modal-close.ui-modal-close.ui-modal-close[data-icon-button-size="modal-close"] {
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
    flex-basis:44px !important;
  }
  .btn.icon, .icon-btn, .workspace-logout,
  .ops .op-icon, .edit-head, .circle, .circle-plus, .x-del, .drag-handle,
  .img-actions button, .product-img .x {
    min-width: var(--ui-icon-hit-mobile) !important;
    min-height: var(--ui-icon-hit-mobile) !important;
  }
  .ops [data-copy].op-icon, .ops [data-del].op-icon,
  .ops .drag-row-handle, .edit-head {
    width: var(--ui-icon-hit-mobile) !important;
    height: var(--ui-icon-hit-mobile) !important;
  }
}