/*
 * Admin Framework UI
 * 统一后台页面的视觉、对称布局、交互动效和移动端表现。
 */

:root {
    --admin-bg: #f4f7fb;
    --admin-bg-soft: #eef4f8;
    --admin-surface: #ffffff;
    --admin-surface-soft: #f8fafc;
    --admin-border: #dfe7ef;
    --admin-border-strong: #cbd7e3;
    --admin-text: #172331;
    --admin-text-soft: #64748b;
    --admin-primary: #2563eb;
    --admin-primary-dark: #1d4ed8;
    --admin-success: #10b981;
    --admin-danger: #dc2626;
    --admin-warning: #f59e0b;
    --admin-cyan: #06b6d4;
    --admin-radius: 8px;
    --admin-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
    --admin-shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.08);
    --admin-focus: 0 0 0 3px rgba(37, 99, 235, 0.16);
    --admin-transition: 160ms ease;
    --primary-color: var(--admin-primary);
    --secondary-color: var(--admin-success);
    --danger-color: var(--admin-danger);
    --warning-color: var(--admin-warning);
    --card-bg: var(--admin-surface);
    --text-primary: var(--admin-text);
    --text-secondary: var(--admin-text-soft);
    --border-radius: var(--admin-radius);
    --shadow: var(--admin-shadow-soft);
    --shadow-hover: var(--admin-shadow);
    --transition: all var(--admin-transition);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.42);
    border-radius: 999px;
}

html {
    background: var(--admin-bg);
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    color: var(--admin-text);
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(16, 185, 129, 0.07)),
        var(--admin-bg) !important;
    background-attachment: fixed !important;
    letter-spacing: 0;
    overflow-x: hidden;
}

body.admin-ready {
    animation: adminPageEnter 220ms ease both;
}

body.admin-page-leaving {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.container {
    width: 100%;
    max-width: min(1280px, calc(100vw - 32px)) !important;
    margin-inline: auto;
}

header,
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    color: var(--admin-text) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: var(--admin-radius) !important;
    box-shadow: var(--admin-shadow-soft) !important;
    backdrop-filter: blur(12px);
}

header .logo,
.header .logo {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    max-width: 100%;
}

header .logo > img,
.header .logo > img {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    flex: 0 0 56px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.14);
}

header h1,
.header h1,
.logo h1 {
    color: var(--admin-text) !important;
    letter-spacing: 0 !important;
    min-width: 0;
    overflow-wrap: anywhere;
}

header .logout-btn,
header .back-btn,
.header .logout-btn,
.header .back-btn {
    flex: 0 0 auto;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

.card,
.settings-card,
.feature-card,
.group-card,
.shop-card,
.store-card,
.panel,
.search-container,
.keyboard-display,
.preview-container,
.history-item,
.stat,
.stat-item,
.modal,
.modal-content,
.phone-mockup,
.section {
    background: var(--admin-surface) !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: var(--admin-radius) !important;
    box-shadow: var(--admin-shadow-soft) !important;
}

.grid-container,
.features-grid,
.cards-container,
.stores-container,
.groups-container,
.shops-container,
.stats,
.stats-grid,
.form-grid,
.preview-grid,
.settings-grid,
.action-grid,
.button-grid,
.keyboard-layout {
    min-width: 0;
}

.grid-container > *,
.features-grid > *,
.cards-container > *,
.stores-container > *,
.groups-container > *,
.shops-container > *,
.stats > *,
.stats-grid > *,
.form-grid > *,
.preview-grid > *,
.settings-grid > *,
.action-grid > *,
.button-grid > *,
.keyboard-layout > * {
    min-width: 0;
}

.card,
.settings-card,
.panel,
.search-container,
.feature-card {
    transition: transform var(--admin-transition), box-shadow var(--admin-transition), border-color var(--admin-transition), background var(--admin-transition) !important;
}

.card:hover,
.settings-card:hover,
.panel:hover,
.shop-card:hover,
.store-card:hover,
.feature-card:hover {
    border-color: var(--admin-border-strong) !important;
    box-shadow: var(--admin-shadow) !important;
    transform: translateY(-1px) !important;
}

.feature-card {
    color: var(--admin-text) !important;
}

.feature-card:hover {
    background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
    color: var(--admin-text) !important;
}

.feature-icon,
.card-title i,
.card-title .icon,
.preview-header i {
    background: linear-gradient(135deg, var(--admin-primary), var(--admin-cyan)) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2);
}

.card-title,
.card-header,
.modal-header {
    color: var(--admin-text) !important;
    border-bottom-color: var(--admin-border) !important;
}

.dashboard-title,
.page-title,
.preview-title {
    color: var(--admin-text) !important;
    text-shadow: none !important;
}

.stat,
.stat-item {
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    color: var(--admin-text) !important;
    min-height: 112px;
}

.stat-value,
.stat strong {
    color: var(--admin-text) !important;
    text-shadow: none !important;
}

.stat-label,
.stat span {
    color: var(--admin-text-soft) !important;
}

input,
select,
textarea,
.form-control,
.form-input,
.form-select,
.form-textarea {
    color: var(--admin-text) !important;
    background: #fff !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: var(--admin-radius) !important;
    box-shadow: none !important;
    transition: border-color var(--admin-transition), box-shadow var(--admin-transition), background var(--admin-transition) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none !important;
    border-color: var(--admin-primary) !important;
    box-shadow: var(--admin-focus) !important;
}

label,
.form-label,
.editor-label,
.campaign-name-label {
    color: var(--admin-text) !important;
}

.instruction,
.info-box,
.campaign-limit-info,
.formatting-help,
.schedule-option,
.alert,
.empty-state,
.keyboard-mock,
.special-btn-info {
    background: var(--admin-surface-soft) !important;
    border-color: var(--admin-border) !important;
    border-radius: var(--admin-radius) !important;
    color: var(--admin-text) !important;
}

.btn,
button,
.back-btn,
.logout-btn,
.action-btn,
.action-button,
.btn-action,
.save-btn,
.reset-btn,
.add-btn,
.refresh-btn,
.store-button {
    position: relative;
    overflow: hidden;
    border-radius: var(--admin-radius) !important;
    transition: transform var(--admin-transition), box-shadow var(--admin-transition), background var(--admin-transition), opacity var(--admin-transition) !important;
}

.btn,
.btn-primary,
.back-btn,
.btn-send,
.action-btn,
.action-button,
.add-btn,
.refresh-btn,
.store-button,
#search-button {
    background: var(--admin-primary) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22) !important;
}

.btn-success,
.save-btn,
.btn-secondary {
    background: var(--admin-success) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 8px 18px rgba(16, 185, 129, 0.22) !important;
}

.btn-danger,
.reset-btn,
.logout-btn,
.btn-leave,
.delete-btn {
    background: var(--admin-danger) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.2) !important;
}

.btn-warning,
.toggle-btn {
    background: var(--admin-warning) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 8px 18px rgba(245, 158, 11, 0.22) !important;
}

.btn:hover,
button:hover,
.back-btn:hover,
.logout-btn:hover,
.action-btn:hover,
.action-button:hover,
.btn-action:hover,
.save-btn:hover,
.reset-btn:hover,
.add-btn:hover,
.refresh-btn:hover,
.store-button:hover {
    transform: translateY(-1px) !important;
    filter: brightness(0.98);
}

.btn:active,
button:active,
.back-btn:active,
.logout-btn:active,
.action-btn:active,
.action-button:active,
.btn-action:active,
.save-btn:active,
.reset-btn:active,
.add-btn:active,
.refresh-btn:active,
.store-button:active,
.admin-pressing {
    transform: translateY(0) scale(0.985) !important;
}

button:disabled,
.btn:disabled,
.is-disabled {
    opacity: 0.58 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.admin-ripple {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    background: rgba(255, 255, 255, 0.42);
    animation: adminRipple 480ms ease-out forwards;
}

table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    max-width: 100%;
}

.table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

thead,
th {
    background: var(--admin-surface-soft) !important;
}

th,
td {
    border-bottom-color: var(--admin-border) !important;
}

tbody tr {
    transition: background var(--admin-transition);
}

tbody tr:hover {
    background: #f8fbff !important;
}

.badge,
.tag,
.ad-badge,
.keyboard-key,
.keyboard-key-mock {
    border-radius: 999px !important;
}

.keyboard-key:not(.special):not(.primary):not(.success):not(.danger):not([style*="background"]),
.preview-button:not([style*="background"]) {
    background: var(--admin-primary) !important;
}

.keyboard-key.success:not([style*="background"]),
.preview-button.success:not([style*="background"]) {
    background: var(--admin-success) !important;
}

.keyboard-key.danger:not([style*="background"]),
.preview-button.danger:not([style*="background"]) {
    background: var(--admin-danger) !important;
}

.keyboard-key-mock.primary,
.keyboard-key-mock.success,
.keyboard-key-mock.danger,
.keyboard-key-mock.special {
    color: #fff !important;
}

.keyboard-key-mock.primary {
    background: var(--admin-primary) !important;
}

.keyboard-key-mock.success {
    background: var(--admin-success) !important;
}

.keyboard-key-mock.danger {
    background: var(--admin-danger) !important;
}

.keyboard-key-mock.special {
    background: #7c3aed !important;
}

.modal,
.modal-content {
    animation: adminModalEnter 180ms ease both;
}

.notification {
    position: fixed !important;
    right: 16px !important;
    max-width: min(420px, calc(100vw - 32px)) !important;
    transform: translateX(12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    border-radius: var(--admin-radius) !important;
    box-shadow: var(--admin-shadow) !important;
    transition: transform 180ms ease, opacity 180ms ease, visibility 180ms ease !important;
    z-index: 9999;
}

.notification.show {
    right: 16px !important;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.admin-style-editor {
    margin-top: 12px;
    padding: 14px;
    background: var(--admin-surface-soft);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
}

.admin-style-editor-head,
.admin-style-editor-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.admin-style-editor-title {
    font-weight: 700;
    color: var(--admin-text);
}

.admin-style-editor-actions,
.admin-style-editor-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-style-editor-btn {
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--admin-border) !important;
    border-radius: var(--admin-radius) !important;
    background: #fff !important;
    color: var(--admin-text) !important;
    box-shadow: none !important;
    font-size: 13px;
    line-height: 1.2;
}

.admin-style-editor-btn:hover {
    border-color: var(--admin-primary) !important;
    color: var(--admin-primary) !important;
}

.admin-style-editor-empty {
    padding: 14px;
    color: var(--admin-text-soft);
    text-align: center;
    background: #fff;
    border: 1px dashed var(--admin-border);
    border-radius: var(--admin-radius);
}

.admin-style-editor-row {
    padding: 12px;
    margin-top: 10px;
    background: #fff;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
}

.admin-style-editor-row-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--admin-text-soft);
}

.admin-style-editor-item {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(140px, 1.35fr) minmax(190px, auto) minmax(150px, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--admin-border);
}

.admin-style-editor-row .admin-style-editor-item:first-of-type {
    border-top: 0;
}

.admin-style-editor[data-mode="keyboard"] .admin-style-editor-item {
    grid-template-columns: minmax(120px, 1fr) minmax(190px, auto) minmax(150px, 1fr) auto;
}

.admin-style-editor-input {
    width: 100% !important;
    min-height: 38px;
    padding: 8px 10px !important;
    font-size: 14px;
}

.admin-style-editor-input[readonly] {
    background: #f8fafc !important;
    color: var(--admin-text-soft) !important;
}

.admin-style-editor-style {
    display: grid;
    grid-template-columns: repeat(4, minmax(42px, 1fr));
    gap: 6px;
}

.admin-style-option {
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid var(--admin-border) !important;
    border-radius: var(--admin-radius) !important;
    background: #fff !important;
    color: var(--admin-text) !important;
    box-shadow: none !important;
    font-size: 13px;
}

.admin-style-option[data-style="primary"] {
    color: var(--admin-primary) !important;
}

.admin-style-option[data-style="success"] {
    color: var(--admin-success) !important;
}

.admin-style-option[data-style="danger"] {
    color: var(--admin-danger) !important;
}

.admin-style-option.is-active {
    color: #fff !important;
    border-color: transparent !important;
}

.admin-style-option.is-active[data-style=""] {
    background: #64748b !important;
}

.admin-style-option.is-active[data-style="primary"] {
    background: var(--admin-primary) !important;
}

.admin-style-option.is-active[data-style="success"] {
    background: var(--admin-success) !important;
}

.admin-style-option.is-active[data-style="danger"] {
    background: var(--admin-danger) !important;
}

.admin-style-editor-remove {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
}

.loading i,
.fa-spinner {
    animation-duration: 800ms !important;
}

@keyframes adminPageEnter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes adminModalEnter {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes adminRipple {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.4);
    }
}

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

@media (max-width: 560px) {
    .container {
        max-width: 100% !important;
    }

    header .logout-btn,
    header .back-btn,
    .header .logout-btn,
    .header .back-btn {
        flex: 1 1 100%;
        width: 100% !important;
        max-width: 100%;
        justify-content: center;
        white-space: normal;
    }

    .card,
    .settings-card,
    .feature-card,
    .group-card,
    .shop-card,
    .store-card,
    .panel,
    .search-container,
    .history-item {
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08) !important;
    }

    .admin-style-editor-head,
    .admin-style-editor-row-head {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-style-editor-actions,
    .admin-style-editor-row-actions {
        width: 100%;
    }

    .admin-style-editor-btn {
        flex: 1 1 auto;
    }

    .admin-style-editor-item,
    .admin-style-editor[data-mode="keyboard"] .admin-style-editor-item {
        grid-template-columns: 1fr;
    }

    .admin-style-editor-remove {
        width: 100%;
    }
}