.app-button,
.app-icon-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: var(--app-space-2);
    min-height: var(--app-control-height);
    border: 1px solid transparent;
    border-radius: var(--app-radius-md);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--app-transition-fast), border-color var(--app-transition-fast), color var(--app-transition-fast);
}

.app-button {
    min-width: 80px;
    padding: 0 var(--app-space-4);
}

.app-button:hover,
.app-icon-button:hover {
    text-decoration: none;
}

.app-button--primary {
    border-color: var(--app-color-primary);
    background: var(--app-color-primary);
    color: #ffffff;
}

.app-button--primary:hover {
    border-color: var(--app-color-primary-hover);
    background: var(--app-color-primary-hover);
}

.app-button--secondary {
    border-color: var(--app-color-border-strong);
    background: var(--app-color-surface);
    color: var(--app-color-text);
}

.app-button--secondary:hover {
    border-color: var(--app-color-primary);
    color: var(--app-color-primary);
}

.app-button--danger {
    border-color: var(--app-color-danger);
    background: var(--app-color-danger);
    color: #ffffff;
}

.app-button--danger:hover {
    border-color: var(--app-color-danger-hover);
    background: var(--app-color-danger-hover);
}

.app-icon-button {
    width: var(--app-control-height);
    min-width: var(--app-control-height);
    padding: 0;
    border-color: var(--app-color-border);
    background: var(--app-color-surface);
}

.app-icon {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.app-action-menu {
    display: inline-flex;
    position: relative;
    vertical-align: middle;
}

.app-action-menu__trigger {
    display: inline-flex;
    min-width: 0;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 7px;
    border: 0;
    border-radius: var(--app-radius-md);
    background: transparent;
    color: var(--app-color-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.app-action-menu__trigger:hover,
.app-action-menu__trigger:focus-visible,
.app-action-menu[data-action-menu-open="true"] .app-action-menu__trigger {
    background: var(--app-color-primary-soft);
    outline: 0;
}

.app-action-menu__trigger svg:first-child { width: 17px; height: 17px; }
.app-action-menu__trigger svg:last-child:not(:first-child) { width: 13px; height: 13px; }

.app-action-menu__popup {
    position: fixed;
    z-index: 2800;
    display: grid;
    min-width: 170px;
    max-width: min(260px, calc(100vw - 16px));
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--app-color-border);
    border-radius: var(--app-radius-md);
    background: var(--app-color-surface);
    box-shadow: var(--app-shadow-overlay);
}

.app-action-menu__popup[hidden] { display: none; }

.app-action-menu__item {
    display: flex;
    width: 100%;
    min-height: 34px;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--app-radius-sm);
    background: transparent;
    color: var(--app-color-text);
    font: inherit;
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
}

.app-action-menu__item:hover,
.app-action-menu__item:focus-visible {
    background: var(--app-color-surface-muted);
    color: var(--app-color-primary);
    outline: 0;
    text-decoration: none;
}

.app-action-menu__item--danger { color: var(--app-color-danger); }
.app-action-menu__item--danger:hover,
.app-action-menu__item--danger:focus-visible { background: #fff1f0; color: var(--app-color-danger-hover); }
.app-action-menu__item:disabled,
.app-action-menu__item[aria-disabled="true"] { color: var(--app-color-text-muted); cursor: not-allowed; opacity: .62; }
.app-action-menu__item:disabled:hover,
.app-action-menu__item[aria-disabled="true"]:hover { background: transparent; color: var(--app-color-text-muted); }

.app-action-menu__divider {
    height: 1px;
    margin: 4px 2px;
    background: var(--app-color-border);
}

.app-card {
    border: 1px solid var(--app-color-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-color-surface);
    box-shadow: var(--app-shadow-low);
}

.app-card__header,
.app-card__body,
.app-card__footer {
    padding: var(--app-space-4);
}

.app-card__header {
    border-bottom: 1px solid var(--app-color-border);
}

.app-card__footer {
    border-top: 1px solid var(--app-color-border);
}

.app-field {
    display: grid;
    gap: var(--app-space-2);
}

.app-label {
    color: var(--app-color-text);
    font-weight: 600;
}

.app-input,
.app-select,
.app-textarea {
    width: 100%;
    min-height: var(--app-control-height);
    border: 1px solid var(--app-color-border-strong);
    border-radius: var(--app-radius-md);
    background: var(--app-color-surface);
    padding: 8px 12px;
    transition: border-color var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

.app-input:focus,
.app-select:focus,
.app-textarea:focus {
    border-color: var(--app-color-primary);
    box-shadow: 0 0 0 3px rgba(18, 100, 215, 0.14);
    outline: 0;
}

.app-field-error {
    color: var(--app-color-danger);
    font-size: 13px;
}

.app-data-table {
    min-width: 0;
    max-width: 100%;
}

.app-table-wrap {
    width: 100%;
    overflow: auto;
    border: 1px solid var(--app-color-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-color-surface);
}

.app-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.app-table th,
.app-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--app-color-border);
    text-align: left;
    vertical-align: middle;
}

.app-table td {
    min-height: var(--app-table-row-height);
}

.app-table th {
    background: var(--app-color-surface-muted);
    color: var(--app-color-text-muted);
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

.app-table tbody tr:hover {
    background: #f7faff;
}

.app-feedback {
    position: fixed;
    top: calc(var(--app-header-height) + var(--app-space-3));
    right: var(--app-space-4);
    z-index: 2500;
    display: grid;
    width: min(380px, calc(100vw - 24px));
    gap: var(--app-space-2);
    pointer-events: none;
}

.app-toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--app-space-3);
    padding: var(--app-space-3) var(--app-space-4);
    border: 1px solid var(--app-color-border);
    border-left-width: 4px;
    border-radius: var(--app-radius-lg);
    background: var(--app-color-surface);
    box-shadow: var(--app-shadow-overlay);
    pointer-events: auto;
}

.app-toast--success { border-left-color: var(--app-color-success); }
.app-toast--warning { border-left-color: var(--app-color-warning); }
.app-toast--error { border-left-color: var(--app-color-danger); }
.app-toast--info { border-left-color: var(--app-color-info); }

.app-toast__message {
    min-width: 0;
    overflow-wrap: anywhere;
}

.app-toast__close {
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--app-color-text-muted);
}

.app-dialog {
    width: min(520px, calc(100vw - 24px));
    max-height: calc(100vh - 40px);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--app-color-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-color-surface);
    color: var(--app-color-text);
    box-shadow: var(--app-shadow-overlay);
}

.app-dialog--small { width: min(400px, calc(100vw - 24px)); }
.app-dialog--large { width: min(820px, calc(100vw - 24px)); }

.app-dialog::backdrop {
    background: rgba(10, 18, 30, 0.52);
}

.app-dialog__surface {
    display: grid;
    max-height: inherit;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.app-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-space-3);
    padding: var(--app-space-4);
    border-bottom: 1px solid var(--app-color-border);
}

.app-dialog__title {
    margin: 0;
    font-size: 17px;
    line-height: 1.4;
}

.app-dialog__content,
.app-dialog__message {
    min-width: 0;
    margin: 0;
    padding: var(--app-space-4);
    overflow: auto;
    overflow-wrap: anywhere;
}

.app-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--app-space-2);
    padding: var(--app-space-3) var(--app-space-4);
    border-top: 1px solid var(--app-color-border);
    background: var(--app-color-surface-muted);
}

.app-dialog[data-dialog-busy="true"] .app-dialog__surface {
    cursor: progress;
}

.app-state {
    min-height: var(--app-state-min-height);
}

.app-state__panel {
    display: grid;
    min-height: var(--app-state-min-height);
    place-items: center;
    padding: var(--app-space-6);
    text-align: center;
}

.app-state__content {
    min-width: 0;
}

.app-state__message {
    max-width: 560px;
    margin: var(--app-space-2) auto 0;
    color: var(--app-color-text-muted);
    overflow-wrap: anywhere;
}

.app-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--app-color-border);
    border-top-color: var(--app-color-primary);
    border-radius: 50%;
    animation: app-spin 700ms linear infinite;
}

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

.app-table-state {
    padding: var(--app-space-6);
    color: var(--app-color-text-muted);
    text-align: center;
}

.app-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--app-space-2);
    padding: var(--app-space-3) 0;
}

.app-pagination__summary {
    margin-right: auto;
    color: var(--app-color-text-muted);
    font-size: 13px;
}

.app-form[data-submitting="true"] {
    cursor: progress;
}

.app-field [aria-invalid="true"] {
    border-color: var(--app-color-danger);
    box-shadow: 0 0 0 3px rgba(197, 50, 50, 0.12);
}

.app-upload {
    display: grid;
    gap: var(--app-space-3);
    padding: var(--app-space-4);
    border: 1px dashed var(--app-color-border-strong);
    border-radius: var(--app-radius-lg);
    background: var(--app-color-surface-muted);
}

.app-upload[data-upload-state="uploading"] {
    cursor: progress;
    opacity: 0.75;
}

.app-upload__preview {
    display: block;
    width: min(240px, 100%);
    max-height: 180px;
    object-fit: contain;
    border: 1px solid var(--app-color-border);
    border-radius: var(--app-radius-md);
    background: var(--app-color-surface);
}

.app-status {
    display: inline-flex;
    align-items: center;
    gap: var(--app-space-2);
    color: var(--app-color-text-muted);
}

.app-status--error { color: var(--app-color-danger); }
.app-status--forbidden { color: var(--app-color-warning); }

@media (max-width: 560px) {
    .app-pagination {
        align-items: stretch;
    }

    .app-pagination__summary {
        flex-basis: 100%;
    }
}

@media (max-width: 560px) {
    .app-feedback {
        top: var(--app-space-3);
        right: var(--app-space-3);
    }

    .app-dialog__actions .app-button {
        flex: 1 1 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}