/*
 * Global backend visual skin.
 * Presentation-only overrides for admin / agent / user pages.
 */
:root {
    --ll-ink: #211a33;
    --ll-ink-soft: #514663;
    --ll-muted: #81758f;
    --ll-violet: #8e78ff;
    --ll-violet-deep: #6047c8;
    --ll-violet-light: #c38cff;
    --ll-cyan-soft: #9be7ff;
    --ll-line: rgba(255, 255, 255, 0.72);
    --ll-line-soft: rgba(126, 87, 194, 0.13);
    --ll-glass: rgba(255, 255, 255, 0.58);
    --ll-glass-strong: rgba(255, 255, 255, 0.72);
    --ll-danger: #c2416b;
    --ll-danger-bg: rgba(255, 228, 235, 0.8);
    --ll-success: #19745a;
    --ll-success-bg: rgba(221, 255, 244, 0.82);
    --ll-warning: #a86f00;
    --ll-warning-bg: rgba(255, 244, 210, 0.82);
    --ll-shadow: 0 28px 78px rgba(96, 71, 200, 0.16);
    --ll-shadow-soft: 0 14px 38px rgba(96, 71, 200, 0.1);
    --ll-radius: 8px;
    --ll-primary-gradient: linear-gradient(135deg, rgba(195,140,255,.96), rgba(142,120,255,.96));
    --ll-primary-gradient-hover: linear-gradient(135deg, rgba(211,166,255,.98), rgba(120,99,238,.98));
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    color: var(--ll-ink);
    background:
        radial-gradient(circle at 12% 8%, rgba(196, 181, 253, 0.46), transparent 30%),
        radial-gradient(circle at 86% 12%, rgba(155, 231, 255, 0.2), transparent 24%),
        radial-gradient(circle at 56% 88%, rgba(232, 121, 249, 0.16), transparent 34%),
        linear-gradient(180deg, #fcfaff 0%, #f4efff 48%, #fbf9ff 100%) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
    letter-spacing: 0;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(126, 87, 194, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(126, 87, 194, 0.07) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, black, transparent 88%);
}

body::after {
    content: "";
    position: fixed;
    inset: auto -10% -28% -10%;
    z-index: -2;
    height: 58vh;
    pointer-events: none;
    background:
        radial-gradient(circle at 28% 42%, rgba(196, 181, 253, 0.24), transparent 28%),
        radial-gradient(circle at 76% 38%, rgba(155, 231, 255, 0.14), transparent 28%),
        radial-gradient(circle at 56% 50%, rgba(232, 121, 249, 0.14), transparent 30%);
    filter: blur(34px);
}

a {
    color: var(--ll-violet-deep);
}

.header,
header.header,
.topbar,
.admin-header {
    color: var(--ll-ink) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.66) !important;
    background: rgba(247, 243, 255, 0.68) !important;
    box-shadow: 0 12px 42px rgba(96, 71, 200, 0.08) !important;
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
}

.header h1,
.topbar h1,
.admin-header h1,
h1,
h2,
h3 {
    color: var(--ll-ink);
    letter-spacing: 0;
}

.container {
    background: transparent !important;
}

.sidebar,
aside.sidebar,
.side-nav,
.admin-sidebar {
    color: var(--ll-ink-soft) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.66) !important;
    background: rgba(247, 243, 255, 0.58) !important;
    box-shadow: 12px 0 42px rgba(96, 71, 200, 0.08) !important;
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
}

.sidebar a,
.side-nav a,
.admin-sidebar a {
    color: var(--ll-ink-soft) !important;
    border-left-color: transparent !important;
    border-radius: var(--ll-radius);
    margin: 3px 10px;
    font-weight: 760;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.sidebar a:hover,
.sidebar a.active,
.side-nav a:hover,
.side-nav a.active,
.admin-sidebar a:hover,
.admin-sidebar a.active {
    color: var(--ll-violet-deep) !important;
    background: rgba(255, 255, 255, 0.56) !important;
    border-left-color: var(--ll-violet) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.74), 0 12px 28px rgba(96,71,200,.1);
    transform: translateY(-1px);
}

.main-content,
.content,
.admin-content,
main,
.page-content {
    background: transparent !important;
}

.card,
.stat-card,
.dashboard-card,
.agent-info,
.announcement-card,
.feature-card,
.module-card,
.pricing-card,
.package-card,
.settings-card,
.form-card,
.table-card,
.section,
.panel,
.box,
.alert,
.notice,
.success,
.error,
.invite-note {
    border: 1px solid var(--ll-line) !important;
    border-radius: var(--ll-radius) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.64), rgba(238,232,255,.34)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.84),
        inset 0 -18px 42px rgba(167,139,250,.08),
        var(--ll-shadow-soft) !important;
    backdrop-filter: blur(20px) saturate(1.28);
    -webkit-backdrop-filter: blur(20px) saturate(1.28);
}

.feature-card:hover {
    border-color: rgba(255, 255, 255, 0.9) !important;
}

.ll-hover-glass {
    --mx: 50%;
    --my: 50%;
    position: relative;
    overflow: hidden;
}

.ll-hover-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.68), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,.42), transparent 34%, rgba(196,181,253,.16));
    opacity: 0;
    transition: opacity .22s ease;
    mix-blend-mode: screen;
}

.ll-hover-glass:hover::after {
    opacity: 1;
}

.ll-hover-glass:hover {
    border-color: rgba(255,255,255,.9) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.88),
        inset 0 -18px 44px rgba(167,139,250,.12),
        0 28px 72px rgba(96,71,200,.16) !important;
}

.stat-card .number,
.summary-item .num,
.metric-card .number,
.num {
    color: var(--ll-violet-deep) !important;
    font-weight: 950;
}

.summary-item,
.summary-item.green,
.summary-item.blue,
.summary-item.orange,
.summary-item.red {
    border: 1px solid rgba(255,255,255,.74) !important;
    border-radius: var(--ll-radius) !important;
    background: linear-gradient(135deg, rgba(195,140,255,.96), rgba(142,120,255,.96)) !important;
    box-shadow: var(--ll-shadow-soft) !important;
}

table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
    border: 1px solid var(--ll-line) !important;
    border-radius: var(--ll-radius) !important;
    background: rgba(255,255,255,.56) !important;
    box-shadow: var(--ll-shadow-soft);
}

thead,
table th {
    color: var(--ll-ink) !important;
    background: rgba(238, 232, 255, 0.72) !important;
}

th,
td {
    border-color: rgba(126, 87, 194, 0.12) !important;
}

tr:hover td {
    background: rgba(255,255,255,.5) !important;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
select,
textarea,
.form-control {
    border: 1px solid rgba(255,255,255,.72) !important;
    border-radius: var(--ll-radius) !important;
    color: var(--ll-ink) !important;
    background: rgba(255,255,255,.58) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 8px 22px rgba(96,71,200,.07) !important;
    backdrop-filter: blur(12px) saturate(1.18);
    -webkit-backdrop-filter: blur(12px) saturate(1.18);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    outline: none !important;
    border-color: rgba(142,120,255,.68) !important;
    background: rgba(255,255,255,.72) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.86),
        0 0 0 4px rgba(167,139,250,.16),
        0 14px 34px rgba(96,71,200,.12) !important;
}

button,
.btn,
.action-btn,
.logout-btn,
.recharge-mini-btn,
.feature-btn,
input[type="submit"],
input[type="button"] {
    border: 1px solid rgba(255,255,255,.74) !important;
    border-radius: var(--ll-radius) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 10px 28px rgba(96,71,200,.1) !important;
    font-weight: 850;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

button:hover,
.btn:hover,
.action-btn:hover,
.logout-btn:hover,
.recharge-mini-btn:hover,
.feature-btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 16px 38px rgba(96,71,200,.16) !important;
    filter: saturate(1.06);
}

.btn-primary,
.action-btn,
.feature-btn,
button[type="submit"],
input[type="submit"] {
    color: #fff !important;
    background: var(--ll-primary-gradient) !important;
}

.feature-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 0 16px !important;
    color: #fff !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
}

.btn-secondary,
.secondary {
    color: var(--ll-ink) !important;
    background: rgba(255,255,255,.52) !important;
}

.btn-danger,
.danger,
button.delete,
a.delete {
    color: #fff !important;
    background: linear-gradient(135deg, #d45a83, #a83b65) !important;
}

.success,
.alert-success {
    color: var(--ll-success) !important;
    background: var(--ll-success-bg) !important;
}

.error,
.alert-danger,
.alert-error {
    color: var(--ll-danger) !important;
    background: var(--ll-danger-bg) !important;
}

.warning,
.alert-warning {
    color: var(--ll-warning) !important;
    background: var(--ll-warning-bg) !important;
}

.modal,
.modal-content,
.popup,
.dialog {
    border: 1px solid var(--ll-line) !important;
    border-radius: var(--ll-radius) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(238,232,255,.42)) !important;
    box-shadow: var(--ll-shadow) !important;
    backdrop-filter: blur(24px) saturate(1.35);
    -webkit-backdrop-filter: blur(24px) saturate(1.35);
}

.badge,
.tag,
.status,
.product-status {
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.7) !important;
    background: rgba(255,255,255,.54) !important;
}

/*
 * Legacy green theme overrides.
 * A number of older backend pages use inline green styles or page-local
 * classes. These selectors intentionally normalize the visual theme only.
 */
.btn,
.copy-btn,
.submit-btn,
.btn-success,
.feature-btn,
.page-tabs a.active,
.tabs a.active,
.tab.active,
.edit-tabs .edit-tab.active,
.page-link.active,
.amount-btn.active,
.pay-option.active,
button[name],
button[id*="Btn"],
a[class*="btn"],
label.btn,
[style*="background: #28a745"],
[style*="background:#28a745"],
[style*="background: linear-gradient(135deg, #28a745"],
[style*="background:linear-gradient(135deg,#28a745"],
[style*="background: #20c997"],
[style*="background:#20c997"] {
    color: #fff !important;
    background: var(--ll-primary-gradient) !important;
    border-color: rgba(255,255,255,.74) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 12px 28px rgba(96,71,200,.12) !important;
}

.btn:hover,
.copy-btn:hover,
.submit-btn:hover,
.btn-success:hover,
.feature-btn:hover,
button[name]:hover,
button[id*="Btn"]:hover,
a[class*="btn"]:hover,
label.btn:hover {
    background: var(--ll-primary-gradient-hover) !important;
}

.tabs a.active,
.page-tabs a.active,
.tab.active,
.edit-tabs .edit-tab.active {
    color: var(--ll-violet-deep) !important;
    background: rgba(255,255,255,.58) !important;
    border-bottom-color: var(--ll-violet) !important;
    box-shadow: inset 0 -2px 0 var(--ll-violet), 0 12px 28px rgba(96,71,200,.08) !important;
}

.tabs,
.page-tabs,
.edit-tabs {
    border-bottom-color: rgba(142,120,255,.18) !important;
}

.app-type-card {
    border-color: rgba(255,255,255,.72) !important;
    background: rgba(255,255,255,.58) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.74), 0 10px 26px rgba(96,71,200,.08) !important;
}

.app-type-card:hover,
.app-type-card:has(input:checked),
.style-card.active,
.style-card:hover,
.amount-btn.active,
.pay-option.active {
    color: var(--ll-violet-deep) !important;
    border-color: rgba(142,120,255,.66) !important;
    background: rgba(246,242,255,.82) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 14px 32px rgba(96,71,200,.12) !important;
}

.status-active,
.status-paid,
.amount-plus,
.status-text.success,
.status-success,
[style*="color: #28a745"],
[style*="color:#28a745"],
[style*="color:green"],
[style*="color: green"] {
    color: var(--ll-violet-deep) !important;
}

.badge-success,
.status-active,
.toast-success {
    color: var(--ll-violet-deep) !important;
    background: rgba(246,242,255,.82) !important;
    border-color: rgba(142,120,255,.24) !important;
}

.card h3,
.dashboard-card h3,
.recharge-form h3 {
    border-bottom-color: rgba(142,120,255,.24) !important;
}

hr {
    border: 0;
    border-top: 1px solid var(--ll-line-soft);
}

@media (max-width: 900px) {
    .container {
        display: block !important;
    }

    .sidebar,
    aside.sidebar,
    .side-nav,
    .admin-sidebar {
        width: auto !important;
        min-height: 0 !important;
        position: relative !important;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 12px !important;
    }

    .sidebar a,
    .side-nav a,
    .admin-sidebar a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .main-content,
    .content,
    .admin-content,
    main {
        padding: 18px !important;
    }

    table {
        display: block;
        overflow-x: auto;
    }
}

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