:root {
    color-scheme: light dark;
    --ui-font-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --ui-radius-sm: 8px;
    --ui-radius-md: 14px;
    --ui-radius-lg: 22px;
    --ui-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.08);
    --ui-shadow-md: 0 18px 40px rgba(15, 23, 42, 0.18);
    --ui-transition: 0.2s ease;
}

:root {
    --ui-bg: #f6f8fb;
    --ui-bg-accent: #e6f2ff;
    --ui-card: #ffffff;
    --ui-card-muted: rgba(15, 23, 42, 0.06);
    --ui-border: rgba(15, 23, 42, 0.12);
    --ui-text: #0d1526;
    --ui-text-muted: #2a3654;
    --ui-primary: #1f6feb;
    --ui-primary-soft: rgba(31, 111, 235, 0.16);
    --ui-success: #0b8f66;
    --ui-warning: #b86a13;
    --ui-danger: #c83434;
    --ui-glow: rgba(31, 111, 235, 0.2);
    --text-primary: var(--ui-text);
    --text-secondary: var(--ui-text-muted);
    --text-tertiary: #3a4864;
    --text-muted: var(--ui-text-muted);
    --bg-card: var(--ui-card);
    --bg-primary: var(--ui-bg);
    --bg-secondary: var(--ui-bg-accent);
    --border-color: var(--ui-border);
    --border-light: rgba(15, 23, 42, 0.12);
    --border-medium: rgba(15, 23, 42, 0.18);
    --primary: var(--ui-primary);
    --primary-light: #3d82f6;
    --primary-dark: #1b59c9;
    --primary-gradient: linear-gradient(135deg, #1f6feb 0%, #3d82f6 100%);
    --accent-gradient: linear-gradient(135deg, #2dd4bf 0%, #60a5fa 100%);
    --glow-gradient: linear-gradient(135deg, rgba(31, 111, 235, 0.5) 0%, rgba(96, 165, 250, 0.4) 100%);
}

:root[data-theme="light"] {
    --ui-bg: #f6f8fb;
    --ui-bg-accent: #e6f2ff;
    --ui-card: #ffffff;
    --ui-card-muted: rgba(15, 23, 42, 0.06);
    --ui-border: rgba(15, 23, 42, 0.12);
    --ui-text: #0d1526;
    --ui-text-muted: #2a3654;
    --ui-primary: #1f6feb;
    --ui-primary-soft: rgba(31, 111, 235, 0.16);
    --ui-success: #0b8f66;
    --ui-warning: #b86a13;
    --ui-danger: #c83434;
    --ui-glow: rgba(31, 111, 235, 0.2);
    --text-primary: #0d1526;
    --text-secondary: #2a3654;
    --text-tertiary: #3a4864;
    --text-muted: #2a3654;
    --bg-card: #ffffff;
    --bg-primary: #f6f8fb;
    --bg-secondary: #e6f2ff;
    --border-color: rgba(15, 23, 42, 0.12);
    --border-light: rgba(15, 23, 42, 0.12);
    --border-medium: rgba(15, 23, 42, 0.18);
    --primary: #1f6feb;
    --primary-light: #3d82f6;
    --primary-dark: #1b59c9;
    --primary-gradient: linear-gradient(135deg, #1f6feb 0%, #3d82f6 100%);
    --accent-gradient: linear-gradient(135deg, #2dd4bf 0%, #60a5fa 100%);
    --glow-gradient: linear-gradient(135deg, rgba(31, 111, 235, 0.5) 0%, rgba(96, 165, 250, 0.4) 100%);
}

:root[data-theme="dark"] {
    --ui-bg: #0c121c;
    --ui-bg-accent: #0f1b2a;
    --ui-card: rgba(255, 255, 255, 0.09);
    --ui-card-muted: rgba(255, 255, 255, 0.14);
    --ui-border: rgba(148, 163, 184, 0.3);
    --ui-text: #f8fafc;
    --ui-text-muted: #cbd5f5;
    --ui-primary: #6aa7ff;
    --ui-primary-soft: rgba(106, 167, 255, 0.22);
    --ui-success: #2dd4bf;
    --ui-warning: #fbbf24;
    --ui-danger: #f87171;
    --ui-glow: rgba(106, 167, 255, 0.32);
    --text-primary: #f8fafc;
    --text-secondary: #cbd5f5;
    --text-tertiary: #9fb0c9;
    --text-muted: #cbd5f5;
    --bg-card: var(--ui-card);
    --bg-primary: var(--ui-bg);
    --bg-secondary: var(--ui-bg-accent);
    --border-color: var(--ui-border);
    --border-light: rgba(148, 163, 184, 0.2);
    --border-medium: rgba(148, 163, 184, 0.28);
    --primary: var(--ui-primary);
    --primary-light: #8bbdff;
    --primary-dark: #4f8ee8;
    --primary-gradient: linear-gradient(135deg, #4f8ee8 0%, #6aa7ff 100%);
    --accent-gradient: linear-gradient(135deg, #2dd4bf 0%, #6aa7ff 100%);
    --glow-gradient: linear-gradient(135deg, rgba(106, 167, 255, 0.5) 0%, rgba(45, 212, 191, 0.35) 100%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ui-bg: #0c121c;
        --ui-bg-accent: #0f1b2a;
        --ui-card: rgba(255, 255, 255, 0.09);
        --ui-card-muted: rgba(255, 255, 255, 0.14);
        --ui-border: rgba(148, 163, 184, 0.3);
        --ui-text: #f8fafc;
        --ui-text-muted: #cbd5f5;
        --ui-primary: #6aa7ff;
        --ui-primary-soft: rgba(106, 167, 255, 0.22);
        --ui-success: #2dd4bf;
        --ui-warning: #fbbf24;
        --ui-danger: #f87171;
        --ui-glow: rgba(106, 167, 255, 0.32);
        --text-primary: #f8fafc;
        --text-secondary: #cbd5f5;
        --text-tertiary: #9fb0c9;
        --text-muted: #cbd5f5;
        --bg-card: var(--ui-card);
        --bg-primary: var(--ui-bg);
        --bg-secondary: var(--ui-bg-accent);
        --border-color: var(--ui-border);
        --border-light: rgba(148, 163, 184, 0.2);
        --border-medium: rgba(148, 163, 184, 0.28);
        --primary: var(--ui-primary);
        --primary-light: #8bbdff;
        --primary-dark: #4f8ee8;
        --primary-gradient: linear-gradient(135deg, #4f8ee8 0%, #6aa7ff 100%);
        --accent-gradient: linear-gradient(135deg, #2dd4bf 0%, #6aa7ff 100%);
        --glow-gradient: linear-gradient(135deg, rgba(106, 167, 255, 0.5) 0%, rgba(45, 212, 191, 0.35) 100%);
    }
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--ui-font-sans);
    color: var(--ui-text) !important;
    background: radial-gradient(circle at top, var(--ui-bg-accent), transparent 45%), var(--ui-bg) !important;
    min-height: 100vh;
    transition: background var(--ui-transition), color var(--ui-transition);
}

body, p, span, label, small, li, dt, dd {
    color: var(--ui-text);
}

body::before {
    display: none !important;
}

a {
    color: var(--ui-primary);
}

a:hover {
    color: var(--ui-primary);
}

.navbar,
nav,
.sidebar,
.top-nav {
    background: var(--ui-card) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
    backdrop-filter: blur(16px);
}

.nav-links a,
.nav-item,
.nav-links li a {
    color: var(--ui-text-muted) !important;
}

.nav-links a:hover,
.nav-item:hover {
    color: var(--ui-text) !important;
}

.container,
.main-wrapper {
    color: var(--ui-text);
}

.card,
.download-card,
.feature-card,
.product-card,
.stat-card,
.download-section,
.feature-list,
.orders-panel,
.platform-chart,
.login-container,
.form-card {
    background: var(--ui-card) !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow-sm);
    color: var(--ui-text);
}

.item-icon,
.product-icon,
.product-icon img {
    background: var(--ui-bg-accent) !important;
    border: 1px solid var(--ui-border);
}

.item-icon i,
.product-icon i {
    color: var(--ui-primary);
}

.btn,
.download-btn,
.hero-btn-primary,
.item-btn,
.cta-btn {
    background: var(--ui-primary) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    border-radius: var(--ui-radius-sm) !important;
    transition: transform var(--ui-transition), box-shadow var(--ui-transition);
}

.btn-secondary,
.btn-refresh {
    background: var(--ui-card-muted) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border) !important;
}

.btn-approve {
    background: var(--ui-success) !important;
    color: #fff !important;
}

.btn-reject {
    background: var(--ui-danger) !important;
    color: #fff !important;
}

.btn-revoke {
    background: var(--ui-warning) !important;
    color: #1f2937 !important;
}

.btn-restore {
    background: var(--ui-primary) !important;
    color: #fff !important;
}

.btn:hover,
.download-btn:hover,
.hero-btn-primary:hover,
.item-btn:hover,
.cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px var(--ui-glow);
}

input,
select,
textarea,
button {
    font-family: var(--ui-font-sans);
}

input,
select,
textarea {
    background: var(--ui-card-muted) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-text) !important;
    border-radius: var(--ui-radius-sm) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--ui-text-muted) !important;
}

.version-tag,
.status-badge,
.orders-badge,
.pill,
.hero-badge,
.tag,
.badge {
    background: var(--ui-primary-soft) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.table,
.orders-table {
    color: var(--ui-text);
}

.orders-table thead th {
    background: var(--ui-bg-accent) !important;
}

.orders-table tbody tr {
    background: var(--ui-card) !important;
}

.orders-table tbody tr:nth-child(even) {
    background: var(--ui-card-muted) !important;
}

.orders-table tbody td {
    color: var(--ui-text) !important;
}

.orders-table tbody tr:hover {
    background: rgba(50, 84, 255, 0.08) !important;
}

.app-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    margin-right: 6px;
    vertical-align: -3px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.ui-theme-toggle {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--ui-border);
    background: var(--ui-card);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-md);
    cursor: pointer;
    font-size: 13px;
}

.ui-theme-toggle:hover {
    box-shadow: 0 12px 28px var(--ui-glow);
}

@media (max-width: 720px) {
    .ui-theme-toggle {
        right: 12px;
        bottom: 12px;
        padding: 8px 12px;
    }
}