:root {
    --m-bg: #F8F9FE;
    --m-paper: #ffffff;
    --m-paper-soft: #Fcfdff;
    --m-line: #Eef2F7;
    --m-line-strong: #E1E6F0;
    --m-text: #2D3748;
    --m-subtext: #718096;
    --m-accent: #7C8BFE;
    --m-accent-deep: #5A67D8;
    --m-success: #A7F3D0;
    --m-warning: #FDE68A;
    --m-danger: #FBCFE8;
    --m-radius: 20px;
    --m-shadow-1: 0 4px 15px rgba(124, 139, 254, 0.08), 0 1px 3px rgba(0,0,0,0.02);
    --m-shadow-2: 0 12px 30px rgba(124, 139, 254, 0.12), 0 4px 8px rgba(0,0,0,0.03);
    --m-title: clamp(1.25rem, 1.05rem + .9vw, 1.95rem);
    --m-h2: clamp(1.05rem, .95rem + .55vw, 1.45rem);
    --m-body: clamp(.9rem, .86rem + .2vw, 1rem);
    --m-mobile-div-fs: 14px;
    --m-mobile-div-lh: 1.7;
    --m-mobile-div-ch: 22;
    --m-mobile-edge-gap: 14px;
}

body.app-modern {
    color: var(--m-text);
    background: linear-gradient(135deg, #F5F7FA 0%, #E8ECF5 100%);
    background-attachment: fixed;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--m-body);
    line-height: 1.65;
    letter-spacing: .01em;
}

body.app-modern::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(124, 139, 254, 0.15), transparent 45%), 
        radial-gradient(circle at 85% 85%, rgba(162, 178, 252, 0.2), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9), transparent 100%);
}

body.app-modern :where(.container, .main-container) {
    max-width: min(1280px, calc(100% - 32px));
    position: relative;
}

body.app-modern :where(.header, .compact-header) {
    border-radius: calc(var(--m-radius) + 2px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: var(--m-shadow-2);
}

body.app-modern :where(.header h1, .compact-header h1) {
    letter-spacing: -.02em;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
    font-size: var(--m-title);
    line-height: 1.2;
}

body.app-modern :where(h2, .section h2, .feature-section h2) {
    font-size: var(--m-h2);
    line-height: 1.3;
    letter-spacing: -.01em;
}

body.app-modern :where(h3, h4) {
    line-height: 1.35;
}

body.app-modern :where(p, li, .feature-text p, .disclaimer-content, .record-info .time, .record-info .template) {
    text-wrap: pretty;
}

body.app-modern :where(.main-content) {
    gap: 20px;
    align-items: start;
}

body.app-modern :where(.left-panel, .right-panel, .card, .section, .compact-section, .disclaimer-section, .form-section, .record-card, .stat-card, .preview-container, .table-container, .search-section, .card-key-section) {
    border-radius: var(--m-radius);
    border: 1px solid var(--m-line);
    box-shadow: var(--m-shadow-1);
    background: var(--m-paper);
}

body.app-modern :where(.section, .card, .left-panel, .right-panel) {
    padding-inline: clamp(14px, 2vw, 28px);
}

body.app-modern :where(.section, .card, .compact-section, .form-section, .disclaimer-section) {
    margin-block: 10px;
}

body.app-modern :where(.feature-list, .records-grid, .stats-grid, .btn-group) {
    row-gap: 12px;
}

body.app-modern :where(.search-section, .search-box, .search-filters) {
    align-items: end;
    gap: 10px;
}

body.app-modern :where(.header-actions, .footer-right, .record-actions, .actions) {
    gap: 10px;
}

body.app-modern :where(.step-number) {
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08), 0 3px 6px rgba(124, 139, 254, 0.2);
    background: var(--m-accent);
}

body.app-modern :where(.quick-start, .disclaimer-section, .card-key-section, .compact-section, .form-section) {
    background: linear-gradient(180deg, #ffffff 0%, #F8F9FE 100%);
}

body.app-modern :where(.feature-item, .record-card, .stat-card) {
    border: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body.app-modern :where(.feature-item:hover, .record-card:hover, .stat-card:hover) {
    border-color: var(--m-accent);
    box-shadow: var(--m-shadow-2);
    transform: translateY(-4px);
}

body.app-modern :where(.btn, .header-btn, .start-btn, button, [type="button"], [type="submit"]) {
    border-radius: 12px;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    letter-spacing: .01em;
}

body.app-modern :where(.btn, .start-btn, button, [type="button"], [type="submit"]) {
    border: 1px solid rgba(124, 139, 254, 0.2);
    box-shadow: 0 4px 12px rgba(124, 139, 254, 0.2);
    background: var(--m-accent);
    color: white;
}

body.app-modern :where(.btn-secondary) {
    border-color: var(--m-line-strong);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    background: white;
    color: var(--m-text);
}

body.app-modern :where(.header-btn.secondary, .btn-secondary) {
    backdrop-filter: saturate(112%) blur(2px);
}

body.app-modern :where(.btn-download, .btn-success) {
    border-color: rgba(104, 211, 145, 0.4);
    box-shadow: 0 4px 12px rgba(104, 211, 145, 0.2);
    background: var(--m-success);
    color: white;
}

body.app-modern :where(.btn:hover, .header-btn:hover, .start-btn:hover, button:hover, [type="button"]:hover, [type="submit"]:hover) {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(124, 139, 254, 0.25);
}

body.app-modern :where(.btn-success:hover, .btn-download:hover) {
    box-shadow: 0 8px 20px rgba(104, 211, 145, 0.25);
}

body.app-modern :where(.btn:active, .header-btn:active, .start-btn:active, button:active, [type="button"]:active, [type="submit"]:active) {
    transform: translateY(1px) scale(0.96);
    box-shadow: 0 2px 6px rgba(124, 139, 254, 0.1);
}

body.app-modern :where(input, textarea, select) {
    background: var(--m-paper-soft);
    border-color: var(--m-line-strong);
    border-radius: 12px;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 44px;
}

body.app-modern :where(.form-group, .card-key-input) {
    margin-bottom: 12px;
}

body.app-modern :where(label) {
    color: #344054;
    font-weight: 600;
    margin-bottom: 8px;
    display: inline-block;
    transition: color 0.3s ease;
}

body.app-modern :where(input:hover, textarea:hover, select:hover) {
    border-color: #c7ceda;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

body.app-modern :where(input:focus, textarea:focus, select:focus) {
    border-color: var(--m-accent);
    box-shadow: 0 0 0 4px rgba(47, 95, 215, 0.15), 0 4px 12px rgba(0,0,0,0.05);
    background: #fff;
    transform: translateY(-1px);
}

body.app-modern :where(input:focus + label, textarea:focus + label, select:focus + label) {
    color: var(--m-accent);
}

body.app-modern :where(.stats-grid, .records-grid, .form-grid, .compact-grid) {
    gap: 14px;
}

body.app-modern :where(.stat-number) {
    letter-spacing: -.03em;
}

body.app-modern :where(.table-container table) {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--m-line);
}

body.app-modern :where(th) {
    background: #f5f7fb;
    color: #2f3a4c;
    font-weight: 700;
}

body.app-modern :where(td) {
    color: #2f3a4c;
    vertical-align: middle;
}

body.app-modern :where(tr:hover) {
    background: #f8faff;
}

body.app-modern :where(tr:nth-child(even) td) {
    background: rgba(247, 249, 252, 0.46);
}

body.app-modern :where(.status-badge, .record-info .type) {
    border-radius: 9999px;
    border: 1px solid rgba(124, 139, 254, 0.3);
    background: rgba(124, 139, 254, 0.1);
    color: var(--m-accent);
    padding-inline: 10px;
    font-weight: 600;
}

body.app-modern :where(.alert, .status-message, .countdown) {
    border-radius: 12px;
    border-width: 1px;
    box-shadow: 0 4px 12px rgba(124, 139, 254, 0.1);
}

body.app-modern :where(.preview-image img, .record-image, #previewImage) {
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

body.app-modern :where(.header, .compact-header) {
    position: relative;
    overflow: hidden;
}

body.app-modern :where(.header, .compact-header)::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 45%);
}

body.app-modern :where(.disclaimer-section, .preview-notice, .card-key-status) {
    border-left-width: 3px;
}

body.app-modern :where(.footer, footer) {
    border-top: 1px solid var(--m-line);
}

body.app-modern :where(.header-btn, .start-btn, .btn) {
    text-decoration: none;
}

body.app-modern :where(.compact-section h3.clickable, .section-title) {
    border-radius: 8px;
}

body.app-modern :where(.header p, .header-subtitle, .footer-note, .record-info .time, .step-text, .feature-text p, .disclaimer-content) {
    color: var(--m-subtext);
}

body.app-modern :where(.nav-links a, .footer-link, .admin-link a) {
    transition: color .2s ease, transform .2s ease;
}

body.app-modern :where(.nav-links a:hover, .footer-link:hover, .admin-link a:hover) {
    color: var(--m-accent);
    transform: translateY(-1px);
}

body.app-modern.page-home :where(.compact-header) {
    box-shadow: 0 14px 30px rgba(124, 139, 254, 0.1);
}

body.app-modern.page-home :where(.left-panel) {
    background: linear-gradient(180deg, #ffffff 0%, #F8F9FE 100%);
}

body.app-modern.page-home :where(.right-panel .disclaimer-section) {
    background: linear-gradient(180deg, #ffffff 0%, #Fcfdff 100%);
}

body.app-modern.page-home :where(.feature-item) {
    border-color: rgba(124, 139, 254, 0.2);
}

body.app-modern.page-license :where(.card),
body.app-modern.page-seal :where(.card),
body.app-modern.page-id-card :where(.card) {
    box-shadow: 0 6px 16px rgba(124, 139, 254, 0.08);
}

body.app-modern.page-license :where(.preview-container),
body.app-modern.page-seal :where(.preview-container),
body.app-modern.page-id-card :where(.preview-container) {
    background: linear-gradient(180deg, #ffffff 0%, #F8F9FE 100%);
    border-color: rgba(124, 139, 254, 0.3);
}

body.app-modern.page-license :where(.card-key-section),
body.app-modern.page-seal :where(.card-key-section),
body.app-modern.page-id-card :where(.card-key-section) {
    border-left: 4px solid var(--m-accent);
}

body.app-modern.page-history :where(.header),
body.app-modern.page-admin :where(.header) {
    box-shadow: 0 12px 24px rgba(124, 139, 254, 0.1);
}

body.app-modern.page-history :where(.stats-bar .stat-item, .stats-grid .stat-card),
body.app-modern.page-admin :where(.stats-grid .stat-card) {
    background: linear-gradient(180deg, #ffffff 0%, #F8F9FE 100%);
    border: 1px solid rgba(124, 139, 254, 0.2);
}

body.app-modern.page-history :where(.records-grid .record-card) {
    background: linear-gradient(180deg, #ffffff 0%, #Fcfdff 100%);
}

body.app-modern.page-admin :where(.section) {
    background: linear-gradient(180deg, #ffffff 0%, #F8F9FE 100%);
}

body.app-modern.page-admin :where(table) {
    border: 1px solid rgba(124, 139, 254, 0.2);
}

body.app-modern.page-admin :where(th) {
    background: rgba(124, 139, 254, 0.05);
}

body.app-modern .modern-soft-enter {
    animation: modernSoftEnter .42s ease both;
}

body.app-modern.app-modern-steady .modern-soft-enter {
    animation: none;
}

body.app-modern .modern-soft-enter[data-level="2"] {
    animation-delay: .05s;
}

body.app-modern .modern-soft-enter[data-level="3"] {
    animation-delay: .1s;
}

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

@media (max-width: 768px) {
    body.app-modern :where(.container, .main-container) {
        max-width: calc(100% - (var(--m-mobile-edge-gap) * 2));
    }

    body.app-modern :where(.header, .compact-header, .left-panel, .right-panel, .card, .section, .compact-section, .disclaimer-section, .form-section, .preview-container) {
        border-radius: 12px;
    }

    body.app-modern :where(.section, .card, .left-panel, .right-panel) {
        padding-inline: clamp(14px, 4vw, 18px);
    }

    body.app-modern :where(.header-actions, .record-actions, .actions) {
        gap: 8px;
    }

    body.app-modern :where(.form-section, .compact-section, .card-key-section, .search-section, .preview-container, .quick-start, .disclaimer-section) {
        padding-inline: clamp(12px, 3.8vw, 16px);
    }

    body.app-modern :where(.m-mobile-text, div[data-mobile-text], .feature-text, .disclaimer-content, .record-info, .empty-state, .preview-notice) {
        font-size: var(--mobile-fs, var(--m-mobile-div-fs));
        line-height: var(--mobile-lh, var(--m-mobile-div-lh));
        max-inline-size: calc(var(--mobile-ch, var(--m-mobile-div-ch)) * 1ch);
        text-wrap: pretty;
        padding-inline: max(4px, env(safe-area-inset-left), env(safe-area-inset-right));
    }

    body.app-modern :where(.m-mobile-text, div[data-mobile-text], .feature-text, .disclaimer-content, .record-info, .empty-state, .preview-notice) :where(p, li, span, strong, a) {
        font-size: inherit;
        line-height: inherit;
    }

    body.app-modern :where(.m-mobile-text.centered, div[data-mobile-center="true"]) {
        margin-inline: auto;
    }

    body.app-modern :where(.m-mobile-fs-sm, div[data-mobile-fs="sm"]) {
        --mobile-fs: 13px;
    }

    body.app-modern :where(.m-mobile-fs-md, div[data-mobile-fs="md"]) {
        --mobile-fs: 14px;
    }

    body.app-modern :where(.m-mobile-fs-lg, div[data-mobile-fs="lg"]) {
        --mobile-fs: 15px;
    }

    body.app-modern.mobile-preset-global-read :where(.m-mobile-text, div[data-mobile-text], .feature-text, .disclaimer-content, .record-info, .empty-state, .preview-notice) {
        --mobile-fs: 15px;
        --mobile-lh: 1.8;
        --mobile-ch: 20;
    }

    body.app-modern.mobile-preset-global-action :where(.m-mobile-text, div[data-mobile-text], .feature-text, .disclaimer-content, .record-info, .empty-state, .preview-notice) {
        --mobile-fs: 14px;
        --mobile-lh: 1.68;
        --mobile-ch: 24;
    }

    body.app-modern.mobile-preset-global-alert :where(.m-mobile-text, div[data-mobile-text], .feature-text, .disclaimer-content, .record-info, .empty-state, .preview-notice) {
        --mobile-fs: 14px;
        --mobile-lh: 1.72;
        --mobile-ch: 18;
        font-weight: 500;
    }

    body.app-modern.mobile-preset-global-alert :where(.m-mobile-text, div[data-mobile-text], .feature-text, .disclaimer-content, .record-info, .empty-state, .preview-notice) :where(strong, b) {
        font-weight: 700;
    }

    body.app-modern :where(.m-mobile-preset-read, div[data-mobile-preset="read"]) {
        --mobile-fs: 15px;
        --mobile-lh: 1.8;
        --mobile-ch: 20;
    }

    body.app-modern :where(.m-mobile-preset-action, div[data-mobile-preset="action"]) {
        --mobile-fs: 14px;
        --mobile-lh: 1.68;
        --mobile-ch: 24;
    }

    body.app-modern :where(.m-mobile-preset-alert, div[data-mobile-preset="alert"]) {
        --mobile-fs: 14px;
        --mobile-lh: 1.72;
        --mobile-ch: 18;
        font-weight: 500;
        letter-spacing: .005em;
    }

    body.app-modern :where(.m-mobile-preset-alert, div[data-mobile-preset="alert"]) :where(strong, b) {
        font-weight: 700;
    }

    body.app-modern :where(.m-mobile-ch-18, div[data-mobile-ch="18"]) {
        --mobile-ch: 18;
    }

    body.app-modern :where(.m-mobile-ch-20, div[data-mobile-ch="20"]) {
        --mobile-ch: 20;
    }

    body.app-modern :where(.m-mobile-ch-22, div[data-mobile-ch="22"]) {
        --mobile-ch: 22;
    }

    body.app-modern :where(.m-mobile-ch-24, div[data-mobile-ch="24"]) {
        --mobile-ch: 24;
    }

    body.app-modern :where(.m-mobile-ch-26, div[data-mobile-ch="26"]) {
        --mobile-ch: 26;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.app-modern * {
        animation: none !important;
        transition: none !important;
    }
}