:root {
    --ink: #090812;
    --ink-soft: #11101d;
    --surface: rgba(25, 23, 39, .72);
    --surface-strong: rgba(31, 28, 48, .9);
    --surface-soft: rgba(255,255,255,.065);
    --line: rgba(255,255,255,.13);
    --line-strong: rgba(215,174,88,.45);
    --gold: #765E5E;
    --gold-bright: #e9cfa0;
    --gold-dim: #5b4548;
    --text: #faf8f3;
    --muted: #a9a5b5;
    --success: #54d39b;
    --danger: #ff7782;
    --shadow: 0 28px 80px rgba(0,0,0,.42);
    --shadow-soft: 0 14px 40px rgba(0,0,0,.24);
    --radius-lg: 28px;
    --radius-md: 18px;
}

html { background: var(--ink); }
body {
    color: var(--text) !important;
    background:
        radial-gradient(circle at 9% 8%, rgba(93,65,125,.26), transparent 31%),
        radial-gradient(circle at 94% 5%, rgba(215,174,88,.12), transparent 24%),
        radial-gradient(circle at 80% 90%, rgba(62,45,102,.24), transparent 32%),
        linear-gradient(145deg, #080710 0%, #121020 48%, #0a0912 100%) !important;
    position: relative;
    overflow-x: hidden;
}
body::before, body::after {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: -1;
    border-radius: 999px;
    filter: blur(4px);
}
body::before { width: 320px; height: 320px; top: -150px; left: 15%; background: rgba(215,174,88,.07); }
body::after { width: 420px; height: 420px; right: -210px; bottom: -180px; background: rgba(105,72,142,.13); }

.card, .login-card, .profile-card, .glass-card, .stat-card, header {
    background: linear-gradient(145deg, rgba(35,31,54,.82), rgba(16,15,27,.76)) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow) !important;
    backdrop-filter: blur(28px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(130%) !important;
}
.card::before, .login-card::before { opacity: .35; }

.logo-icon, .admin-avatar {
    background: linear-gradient(145deg, rgba(215,174,88,.2), rgba(255,255,255,.06)) !important;
    border: 1px solid var(--line-strong) !important;
    box-shadow: 0 10px 30px rgba(215,174,88,.12), inset 0 1px rgba(255,255,255,.18);
}
.logo-icon { overflow: hidden; padding: 7px; }
.logo-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; display: block; }

h1, h2, h3, .name, .profile-header h2 { letter-spacing: -.025em; }
h1, h2, h3, .stat-val, .name { color: var(--text) !important; }
.subtitle, p, .telegram-handle, .stat-label, .info-label, .label { color: var(--muted) !important; }

.step-box, .info-item, .code-item, .progress-track, #userInfo, .tabs, .admin-info {
    background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)) !important;
    border-color: var(--line) !important;
}
.step-box:hover, .info-item:hover, .code-item:hover { border-color: rgba(215,174,88,.34) !important; transform: translateY(-1px); }

input, select, textarea {
    background: rgba(255,255,255,.96) !important;
    color: #171421 !important;
    border: 1px solid rgba(255,255,255,.55) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
input:focus, select:focus, textarea:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 4px rgba(215,174,88,.17) !important; }

.activate-btn, .submit-btn, .action-btn {
    background: linear-gradient(135deg, var(--gold-bright), var(--gold)) !important;
    color: #20170b !important;
    border: 1px solid rgba(255,236,177,.55) !important;
    box-shadow: 0 12px 28px rgba(215,174,88,.18) !important;
}
.activate-btn:hover, .submit-btn:hover, .action-btn:hover { filter: brightness(1.06); box-shadow: 0 16px 34px rgba(215,174,88,.28) !important; }
.activate-btn:disabled { filter: grayscale(.8); opacity: .48; }

h2 { border-right-color: var(--gold) !important; }
.step-icon, .input-icon, .check-icon { color: var(--gold-bright) !important; }
.status-badge.active { color: #8ef0bd !important; }

.banner, .banner-wrapper, .banner-placeholder {
    background: linear-gradient(135deg, #2c2038, #10101c 75%) !important;
}
.banner::after, .banner-wrapper::after {
    content: 'WKZ'; position: absolute; inset: 0; display: grid; place-items: center;
    color: rgba(241,211,139,.14); font: 800 5rem/1 Arial, sans-serif; letter-spacing: .18em;
    pointer-events: none;
}
.banner img, .banner-img { position: relative; z-index: 1; opacity: .76; }
.banner-edit-btn, .edit-btn { background: rgba(9,8,18,.66) !important; border-color: rgba(215,174,88,.45) !important; }
.avatar, .avatar-wrapper { border-color: rgba(241,211,139,.72) !important; box-shadow: 0 12px 36px rgba(0,0,0,.45), 0 0 0 5px rgba(215,174,88,.08) !important; }
.avatar-placeholder { background: linear-gradient(135deg, #493158, #171323) !important; }

.logout-btn { background: rgba(255,119,130,.12) !important; border-color: rgba(255,119,130,.38) !important; }
.tab-btn { background: rgba(255,255,255,.06) !important; border-color: var(--line) !important; }
.tab-btn.active { background: linear-gradient(135deg, var(--gold-bright), var(--gold)) !important; color: #20170b !important; }
.badge-active { background: rgba(84,211,155,.15) !important; }

.brand-lockup { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.brand-lockup img { width: 48px; height: 38px; object-fit: cover; border-radius: 11px; border: 1px solid var(--line-strong); }
.brand-lockup strong { display: block; color: var(--gold-bright); font: 800 1rem/1 'Tajawal', sans-serif; letter-spacing: .08em; }
.brand-lockup span { display: block; color: var(--muted); font-size: .72rem; margin-top: 4px; }
.brand-watermark { position: absolute; top: 19px; left: 24px; opacity: .55; }
.brand-watermark img { width: 54px; height: 38px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line-strong); }

@media (max-width: 640px) {
    body { padding: 14px !important; }
    .card, .login-card, .profile-card { border-radius: 23px !important; }
    .glass-card { padding: 20px !important; }
    .brand-watermark { top: 14px; left: 14px; }
}