.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .72rem 1rem; border: 1px solid transparent; border-radius: .8rem; font-weight: 800; text-decoration: none; transition: transform .15s, opacity .15s, background .15s; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; opacity: .5; }
.button--primary, .button--dark { background: var(--brand-primary); color: white; }
.button--primary { background: var(--brand-accent); color: #1d1608; }
.button--secondary { border-color: var(--line); background: white; color: var(--ink); }
.button--danger { background: var(--danger); color: white; }
.button--block { width: 100%; }
.text-button, .icon-button { border: 0; background: none; color: var(--brand-primary); font-weight: 800; }
.icon-button { width: 42px; height: 42px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: .75rem; background: white; }
.badge { display: inline-flex; padding: .35rem .65rem; border-radius: 999px; background: color-mix(in srgb, var(--brand-accent) 18%, white); color: #6c4300; font-size: .8rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.field { display: grid; gap: .4rem; }
.field__label { font-weight: 750; }
.field__hint { color: var(--muted); font-size: .86rem; }
.field__error, .form-message { color: var(--danger); font-size: .9rem; font-weight: 700; }
.input, .select, .textarea { width: 100%; border: 1px solid #cbd5db; border-radius: .75rem; background: white; color: var(--ink); padding: .76rem .85rem; outline: none; }
.textarea { min-height: 96px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 22%, transparent); }
.input-wrap { position: relative; }
.input--with-action { padding-right: 3.4rem; }
.input-action { position: absolute; top: 50%; right: .25rem; transform: translateY(-50%); border: 0; }
.notice { display: flex; gap: .75rem; padding: .9rem 1rem; border-radius: .85rem; background: #eef5ff; border: 1px solid #c9ddf8; }
.notice--warning { background: #fff7e5; border-color: #f0d49a; }
.notice__icon { flex: 0 0 auto; margin-top: .1rem; }
.notice__title { margin-bottom: .15rem; font-weight: 850; }
.notice__text { margin: 0; color: var(--muted); }
.empty-state { padding: 2rem; text-align: center; color: var(--muted); }
.empty-state__icon { width: 46px; height: 46px; margin: 0 auto .8rem; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand-primary); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-grid__wide { grid-column: 1 / -1; }
.toggle-field { display: flex; align-items: flex-start; gap: .7rem; }
.toggle-field input { margin-top: .25rem; }
.toggle-field span { display: grid; }
.toggle-field small { color: var(--muted); }
.status-dot { width: 9px; height: 9px; display: inline-block; border-radius: 50%; background: #94a3ad; }
.status-dot--success { background: var(--success); }
.toast-region { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; display: grid; gap: .5rem; }
.toast { max-width: 360px; padding: .85rem 1rem; border-radius: .8rem; background: #071521; color: white; box-shadow: var(--shadow); }
.toast--danger { background: var(--danger); }
.dialog, .app-dialog { width: min(94vw, 580px); max-height: 90vh; overflow: auto; padding: 0; border: 0; border-radius: 1rem; box-shadow: var(--shadow); }
.app-dialog--wide { width: min(94vw, 760px); }
.dialog::backdrop, .app-dialog::backdrop { background: rgba(2, 11, 18, .7); backdrop-filter: blur(3px); }
.dialog__header, .dialog-header { padding: 1.25rem 1.25rem .5rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.dialog__form, .dialog-form { display: grid; gap: 1rem; padding: 1.25rem; }
.dialog__actions, .dialog-actions { display: flex; justify-content: flex-end; gap: .75rem; }
.skeleton { display: block; background: linear-gradient(90deg,#edf1f3,#f8fafb,#edf1f3); background-size: 200%; animation: shimmer 1.2s linear infinite; border-radius: .4rem; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .form-grid__wide { grid-column: auto; } .dialog-actions { flex-direction: column-reverse; } }