* {
  box-sizing: border-box;
  scrollbar-color: #94a3b8 #e2e8f0;
  scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-track { background: #e2e8f0; }
*::-webkit-scrollbar-thumb { border-radius: 999px; background: #94a3b8; }
*::-webkit-scrollbar-thumb:hover { background: #64748b; }
.field { width: 100%; border: 1px solid #cbd5e1; border-radius: .625rem; padding: .7rem .85rem; outline: none; transition: border-color .15s, box-shadow .15s; }
.field:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); }
.input-prefix-icon { position: absolute; left: .875rem; top: 50%; line-height: 1; pointer-events: none; transform: translateY(-50%); }
.primary-button, .secondary-button { border-radius: .625rem; padding: .7rem 1rem; font-weight: 600; transition: background-color .15s, opacity .15s; }
.primary-button { background: #4f46e5; color: #fff; }
.primary-button:hover { background: #4338ca; }
.secondary-button { border: 1px solid #cbd5e1; background: #fff; color: #334155; }
.secondary-button:hover { background: #f8fafc; }
.primary-button:disabled, .secondary-button:disabled { cursor: not-allowed; opacity: .6; }
.icon-button { display: inline-grid; height: 2.25rem; width: 2.25rem; place-items: center; border-radius: .5rem; color: #64748b; }
.icon-button:hover { background: #f1f5f9; color: #0f172a; }
.code-panel { overflow-x: auto; border-radius: .625rem; background: #0f172a; padding: 1rem; color: #e2e8f0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .8125rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.modal-scroll { scrollbar-gutter: stable; }