:root {
    --tech-bg: #eef4fb;
    --tech-surface: rgba(255, 255, 255, 0.94);
    --tech-surface-muted: rgba(248, 251, 255, 0.96);
    --tech-border: #d8e3ef;
    --tech-border-strong: #bed1e4;
    --tech-text: #0f172a;
    --tech-muted: #64748b;
    --tech-accent: #169bff;
    --tech-accent-strong: #0b72d8;
    --tech-accent-soft: rgba(22, 155, 255, 0.12);
    --tech-price: #ff7a1a;
    --tech-success: #15a06d;
    --tech-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    --tech-shadow-soft: 0 6px 16px rgba(15, 23, 42, 0.05);
    --tech-radius-xl: 10px;
    --tech-radius-lg: 8px;
    --tech-radius-md: 6px;
}

html,
body {
    font-family: Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--tech-text);
}

body {
    background: var(--tech-bg) url('/assets/common/images/scifi-light-bg.svg') center top / cover no-repeat fixed !important;
}

a {
    text-decoration: none;
}

.bg-content {
    min-height: 100vh;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(238, 244, 251, 0.72)) !important;
}

.navbar-acg,
.fly-header {
    background: var(--tech-surface) !important;
    border: 1px solid var(--tech-border);
    box-shadow: var(--tech-shadow-soft);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.navbar-acg {
    border-radius: 0 0 14px 14px;
    padding: 10px 0;
}

.navbar-acg .navbar-brand,
.fly-logo {
    position: relative;
    font-weight: 700;
}

.navbar-acg .navbar-brand::after,
.fly-logo::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, var(--tech-accent), transparent);
}

.navbar-acg .navbar-brand span,
.fly-logo .user-logo-title {
    color: var(--tech-text) !important;
}

.navbar-acg .nav-link,
.fly-header .layui-nav .layui-nav-item a,
.fly-nav-user a,
.fly-nav a,
.meta,
.stat-bottom,
.stat-row,
.text-muted,
.auth-subtitle,
.ay-sub,
.layui-form-mid {
    color: var(--tech-muted) !important;
}

.navbar-acg .nav-link.active,
.navbar-acg .nav-link:hover,
.fly-header .layui-nav .layui-this a,
.fly-header .layui-nav .layui-nav-item a:hover,
.text-link,
.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--tech-accent-strong) !important;
}

.panel,
.acg-card,
.auth-card,
.layui-card,
.layui-panel,
.more-table,
.cash-pay,
.dropdown-menu,
.modal-content,
.list-group-item,
.user-info-box .dropdown-menu,
.layui-nav-child,
.optional-card {
    background: var(--tech-surface) !important;
    border: 1px solid var(--tech-border) !important;
    border-radius: var(--tech-radius-lg) !important;
    box-shadow: var(--tech-shadow);
}

.panel,
.auth-card,
.layui-card,
.layui-panel,
.acg-card {
    overflow: hidden;
}

.panel::before,
.auth-card::before,
.acg-card::before,
.layui-card::before {
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(90deg, var(--tech-accent), rgba(22, 155, 255, 0));
}

.panel-header,
.card-header,
.auth-card .brand-header {
    background: var(--tech-surface-muted) !important;
    border-bottom: 1px solid var(--tech-border);
}

.panel-title,
.auth-card .auth-subtitle,
.goods-title,
.layui-card-header,
h1, h2, h3, h4, h5, h6 {
    color: var(--tech-text);
}

.chip,
.sku,
.pay-item,
.layui-badge,
.badge-soft,
.a-badge,
.btn,
.layui-btn,
.qty-group button,
.optional-card {
    border-radius: var(--tech-radius-md) !important;
}

.chip,
.sku,
.pay-item,
.qty-group button,
.optional-card {
    background: #fff !important;
    border: 1px solid var(--tech-border) !important;
    color: var(--tech-muted) !important;
    box-shadow: none;
}

.chip.is-primary,
.sku.is-primary,
.btn-primary,
.btn-gradient,
.navbar-acg .btn-primary,
.layui-btn-normal {
    background: linear-gradient(135deg, var(--tech-accent), #5fd4ff) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 10px 18px rgba(22, 155, 255, 0.18) !important;
}

.btn-outline-secondary,
.user-login-box .btn-outline-secondary {
    background: #fff !important;
    border: 1px solid var(--tech-border-strong) !important;
    color: var(--tech-accent-strong) !important;
}

.price,
.price .unit,
.abacus .price,
.badge-money,
.text-danger {
    color: var(--tech-price) !important;
}

.badge-soft-primary {
    background: var(--tech-accent-soft);
    color: var(--tech-accent-strong);
    border: 1px solid rgba(22, 155, 255, 0.22);
}

.badge-soft-success {
    background: rgba(21, 160, 109, 0.12);
    color: var(--tech-success);
    border: 1px solid rgba(21, 160, 109, 0.22);
}

.badge-soft-danger {
    background: rgba(255, 122, 26, 0.12);
    color: var(--tech-price);
    border: 1px solid rgba(255, 122, 26, 0.22);
}

.badge-soft-info,
.badge-soft-muted,
.badge-soft-warning {
    background: rgba(100, 116, 139, 0.1);
    color: var(--tech-muted);
    border: 1px solid rgba(100, 116, 139, 0.18);
}

.form-control,
.form-select,
.input-group-text,
.layui-input,
.layui-textarea,
.layui-select-title input,
.xm-input,
.ay-input {
    background: #fff !important;
    border: 1px solid var(--tech-border) !important;
    border-radius: var(--tech-radius-md) !important;
    color: var(--tech-text) !important;
    box-shadow: none;
}

.form-control:focus,
.form-select:focus,
.layui-input:focus,
.layui-textarea:focus,
.xm-input:focus,
.ay-input:focus {
    border-color: var(--tech-accent) !important;
    box-shadow: 0 0 0 3px rgba(22, 155, 255, 0.14) !important;
}

.input-group-text {
    color: var(--tech-accent-strong) !important;
}

.auth-wrapper,
.ay-wrap {
    padding: 24px;
}

.auth-card,
.ay-card {
    border-radius: 10px !important;
}

.auth-card .brand-logo,
.ay-logo {
    background: linear-gradient(135deg, rgba(22, 155, 255, 0.12), rgba(95, 212, 255, 0.18));
    border-radius: var(--tech-radius-md);
}

.item-cover,
.acg-thumb,
.brand-icon,
#user-avatar,
.user-avatar,
.brand-logo img {
    border-radius: var(--tech-radius-md);
}

.qty-group button {
    min-width: 42px;
}

.item-detail .panel-body,
.panel-body,
.layui-card-body {
    color: var(--tech-text);
}

.layui-nav-tree,
.layui-nav-tree .layui-nav-item a {
    background: transparent !important;
}

.layui-nav-tree .layui-this > a,
.layui-nav-tree .layui-nav-item a:hover {
    background: var(--tech-accent-soft) !important;
    color: var(--tech-accent-strong) !important;
    border-radius: var(--tech-radius-md);
}

.layui-nav-child dd a:hover {
    background: rgba(22, 155, 255, 0.08) !important;
}

footer {
    color: var(--tech-muted);
}

@media (max-width: 991.98px) {
    .navbar-acg,
    .fly-header {
        border-radius: 0 0 10px 10px;
    }

    .panel,
    .acg-card,
    .auth-card,
    .layui-card {
        border-radius: var(--tech-radius-lg) !important;
    }
}