.lw-button {
  --lw-button-ring: var(--lw-color-primary-200);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: var(--lw-border-width) solid transparent;
  border-radius: var(--lw-radius-md);
  font-family: var(--lw-font-family-base);
  font-weight: var(--lw-font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--lw-motion-fast) var(--lw-ease-standard),
    border-color var(--lw-motion-fast) var(--lw-ease-standard),
    color var(--lw-motion-fast) var(--lw-ease-standard),
    box-shadow var(--lw-motion-fast) var(--lw-ease-standard);
}

.lw-button--sm { gap: 4px; padding: 7px 12px; font-size: var(--lw-font-size-button-sm); }
.lw-button--md { padding: 9px 14px; font-size: var(--lw-font-size-button-md); }
.lw-button--lg { gap: 8px; padding: 10px 16px; font-size: var(--lw-font-size-button-lg); }
.lw-button--primary { background: var(--lw-color-primary-700); color: var(--lw-color-white); }
.lw-button--primary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--lw-color-primary-800); }
.lw-button--primary:active:not(:disabled):not([aria-disabled="true"]) { background: var(--lw-color-primary-900); }
.lw-button--secondary { background: var(--lw-color-gray-100); border-color: var(--lw-color-gray-300); color: var(--lw-color-text-primary); }
.lw-button--secondary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--lw-color-gray-200); }
.lw-button--secondary:active:not(:disabled):not([aria-disabled="true"]) { background: var(--lw-color-gray-300); }
.lw-button--outline { background: var(--lw-color-surface); border-color: var(--lw-color-primary-700); color: var(--lw-color-primary-700); }
.lw-button--outline:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--lw-color-primary-50); }
.lw-button--outline:active:not(:disabled):not([aria-disabled="true"]) { background: var(--lw-color-primary-100); }
.lw-button--ghost { background: transparent; color: var(--lw-color-primary-700); }
.lw-button--ghost:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--lw-color-primary-50); }
.lw-button--ghost:active:not(:disabled):not([aria-disabled="true"]) { background: var(--lw-color-primary-100); }
.lw-button--dark { --lw-button-ring: var(--lw-color-gray-400); background: var(--lw-color-gray-900); color: var(--lw-color-white); }
.lw-button--dark:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--lw-color-gray-800); }
.lw-button--dark:active:not(:disabled):not([aria-disabled="true"]) { background: var(--lw-color-gray-700); }
.lw-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lw-button-ring); }
.lw-button:disabled,
.lw-button[aria-disabled="true"] { background: var(--lw-color-gray-200); border-color: transparent; color: var(--lw-color-gray-500); box-shadow: none; }
.lw-button--outline:disabled,
.lw-button--outline[aria-disabled="true"],
.lw-button--ghost:disabled,
.lw-button--ghost[aria-disabled="true"] { background: transparent; border-color: var(--lw-color-gray-300); color: var(--lw-color-gray-400); }

.lw-field { display: flex; flex-direction: column; gap: 6px; color: var(--lw-color-text-primary); font-size: var(--lw-font-size-b4); line-height: var(--lw-line-height-b4); font-weight: var(--lw-font-weight-semibold); }
.lw-input,
.lw-textarea { width: 100%; padding: 10px 12px; border: var(--lw-border-width) solid var(--lw-color-gray-300); border-radius: var(--lw-radius-md); background: var(--lw-color-white); color: var(--lw-color-text-primary); font-size: var(--lw-font-size-b3); line-height: var(--lw-line-height-b3); transition: border-color var(--lw-motion-fast) var(--lw-ease-standard), box-shadow var(--lw-motion-fast) var(--lw-ease-standard), background-color var(--lw-motion-fast) var(--lw-ease-standard); }
.lw-textarea { resize: vertical; }
.lw-input::placeholder,
.lw-textarea::placeholder { color: var(--lw-color-gray-500); }
.lw-input:hover:not(:disabled),
.lw-textarea:hover:not(:disabled) { border-color: var(--lw-color-gray-400); }
.lw-input:focus,
.lw-textarea:focus { outline: none; border-color: var(--lw-color-primary-700); box-shadow: 0 0 0 3px var(--lw-color-primary-100); }
.lw-input:disabled,
.lw-textarea:disabled { background: var(--lw-color-gray-100); border-color: var(--lw-color-gray-200); color: var(--lw-color-gray-400); }

.lw-card { background: var(--lw-color-surface); border: var(--lw-border-width) solid var(--lw-color-gray-200); border-radius: var(--lw-radius-lg); box-shadow: var(--lw-shadow-card); overflow: hidden; }
.lw-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--lw-space-6); }
.lw-modal[hidden] { display: none; }
.lw-modal__overlay { position: absolute; inset: 0; background: var(--lw-color-black-alpha-40); }
.lw-modal__dialog { position: relative; width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; padding: var(--lw-space-6); background: var(--lw-color-gray-100); border-radius: var(--lw-radius-lg); box-shadow: var(--lw-shadow-card); animation: lw-modal-in var(--lw-motion-modal) var(--lw-ease-standard); }
.lw-modal__dialog--wide { max-width: 560px; }

.lw-badge,
.lw-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: var(--lw-border-width) solid transparent; border-radius: var(--lw-radius-pill); font-size: var(--lw-font-size-c2); line-height: var(--lw-line-height-c2); font-weight: var(--lw-font-weight-semibold); }
.lw-badge { background: var(--lw-color-primary-100); color: var(--lw-color-primary-700); }
.lw-pill { background: var(--lw-color-white); border-color: var(--lw-color-primary-700); color: var(--lw-color-primary-700); }
.lw-pill:hover { background: var(--lw-color-primary-50); }
.lw-pill:active { background: var(--lw-color-primary-100); }

.lw-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: var(--lw-border-width) solid var(--lw-color-gray-300); border-radius: var(--lw-radius-md); background: var(--lw-color-white); color: var(--lw-color-text-primary); transition: background-color var(--lw-motion-fast) var(--lw-ease-standard), border-color var(--lw-motion-fast) var(--lw-ease-standard), box-shadow var(--lw-motion-fast) var(--lw-ease-standard); }
.lw-icon-button:hover { background: var(--lw-color-gray-100); border-color: var(--lw-color-gray-400); }
.lw-icon-button:active { background: var(--lw-color-gray-200); }
.lw-icon-button:focus-visible { outline: none; border-color: var(--lw-color-primary-700); box-shadow: 0 0 0 3px var(--lw-color-primary-100); }

.lw-spinner { display: inline-flex; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: lw-spin 0.8s linear infinite; }
.lw-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--lw-radius-md); font-size: var(--lw-font-size-c1); line-height: var(--lw-line-height-c1); font-weight: var(--lw-font-weight-medium); }
.lw-status--success { background: var(--lw-color-green-50); color: var(--lw-color-green-700); }
.lw-status--warning { background: var(--lw-color-yellow-50); color: var(--lw-color-yellow-700); }
.lw-status--error { background: var(--lw-color-red-50); color: var(--lw-color-red-700); }
.lw-focus-ring:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lw-color-primary-100); }

.lw-chat-message { border-radius: var(--lw-radius-md); padding: 10px 12px; font-size: var(--lw-font-size-b3); line-height: var(--lw-line-height-b3); white-space: pre-wrap; }
.lw-chat-message--assistant { background: var(--lw-color-gray-100); color: var(--lw-color-text-primary); }
.lw-chat-message--user { background: var(--lw-color-primary-700); color: var(--lw-color-white); }
.lw-chat-message--system { background: var(--lw-color-primary-50); color: var(--lw-color-primary-700); }
.lw-chat-message--success { background: var(--lw-color-green-50); color: var(--lw-color-green-700); }
.lw-chat-message--error { background: var(--lw-color-red-50); color: var(--lw-color-red-700); }

@keyframes lw-spin { to { transform: rotate(360deg); } }
@keyframes lw-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }