* {margin:0; padding:0; box-sizing:border-box}
 body {margin:0; min-height:100vh; font-family:system-ui,sans-serif; background-color:#0a0f1a; color:#fff; line-height:1.5;}
 #bg-canvas {position:fixed; top:0; left:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; filter:blur(20px)}
 .dashboard {position:relative; z-index:1; min-height:100vh; display:flex; background:rgba(10,15,26,0.7); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);overflow-x:hidden}
 .sidebar {width:280px; background:rgba(13,17,23,0.8); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-right:1px solid rgba(33,150,243,0.15); display:flex; flex-direction:column; transition:transform 0.3s ease; position:relative; z-index:10}
 .sidebar-header {padding:29px 20px; border-bottom:1px solid rgba(33,150,243,0.1); margin-bottom:20px}
 .sidebar-overlay {display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:5; opacity:0; transition:opacity 0.3s ease}
 .sidebar-overlay.active {display:block; opacity:1}
 .logo {display:flex; justify-content:center; align-items:center; gap:8px; font-size:24px; font-weight:600; text-decoration:none}
 .logo-icon {color:#2196f3; height:40px; width:40px}
 .logo-text {background:linear-gradient(135deg,#fff 0,#94a3b8 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
 .logo-text span {color:#2196f3; -webkit-text-fill-color:#2196f3; background:none}
 .nav-menu {flex:1; padding:0 16px; display:flex; flex-direction:column; gap:8px}
 .nav-item {display:flex; align-items:center; gap:14px; padding:10px 16px; border-radius:8px; color:#94a3b8; text-decoration:none; font-weight:500; transition:all 0.2s ease; border-left:3px solid transparent; border-right:3px solid transparent}
 .nav-item:hover {background:rgba(33,150,243,0.1); color:#fff; border-left-color:#2196f3; border-right-color:#2196f3}
 .nav-item.active {background:rgba(33,150,243,0.15); color:#2196f3; border-left-color:#2196f3; border-right-color:#2196f3}
 .nav-item svg {width:22px; height:22px; fill:currentColor; opacity:0.9}
 .sidebar-footer {padding:24px 16px 30px; border-top:1px solid rgba(33,150,243,0.1); margin-top:20px; font-size:12px; color:#4b5565; text-align:center}
 .main-content {flex:1; display:flex; flex-direction:column; overflow-x:hidden}
 .top-bar {height:57px; padding:0 32px; background:rgba(13,17,23,0.6); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(33,150,243,0.15); display:flex; align-items:center; justify-content:flex-end; gap:24px; position:relative; z-index:100}
 .top-bar-right {display:flex; align-items:center; gap:20px; position:relative}
 .icon-btn {background:rgba(255,255,255,0.05); border:1px solid rgba(33,150,243,0.2); border-radius:50%; width:38px; height:38px; display:flex; align-items:center; justify-content:center; color:#cbd5e1; cursor:pointer; transition:all 0.2s; position:relative}
 .icon-btn:hover {background:rgba(33,150,243,0.15); color:#2196f3; border-color:#2196f3}
 .icon-btn svg {width:20px; height:20px; fill:currentColor}
 .profile-badge {display:flex; align-items:center; gap:12px; padding:4px 10px 4px 16px; background:rgba(255,255,255,0.05); border-radius:40px; border:1px solid rgba(33,150,243,0.2); cursor:pointer; height:38px; transition:all 0.2s; position:relative}
 .profile-badge:hover {background:rgba(33,150,243,0.15); border-color:#2196f3}
 .profile-badge span {font-weight:500; color:#fff; font-size:14px}
 .avatar {width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#1976d2,#2196f3); display:flex; align-items:center; justify-content:center; font-weight:600; color:#0a0f1a; font-size:14px}
 .dropdown {position:absolute; top:calc(100% + 12px); right:0; background:rgba(18,22,30,0.95); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(33,150,243,0.3); border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,0.6); opacity:0; visibility:hidden; transform:translateY(-10px); transition:all 0.2s ease; color:#fff}
 .dropdown.show {opacity:1; visibility:visible; transform:translateY(0)}
 #notificationDropdown {width:400px}
 #profileDropdown {width:240px}
 .dropdown-header {font-weight:600; font-size:15px; padding-bottom:12px; border-bottom:1px solid rgba(33,150,243,0.2); margin-bottom:12px; color:#fff}
 .dropdown-item {display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:8px; cursor:pointer; transition:background 0.2s; color:#cbd5e1; font-size:14px}
 .dropdown-item:hover {background:rgba(33,150,243,0.15); color:#2196f3}
 .dropdown-item svg {width:20px; height:20px; fill:currentColor}
 .empty-notification {display:flex; flex-direction:column; align-items:center; gap:12px; padding:24px 12px; color:#94a3b8; text-align:center}
 .empty-notification svg {width:40px; height:40px; opacity:0.6}
 .content-area {padding:32px; overflow-y:auto}
 .page-title {font-size:28px; font-weight:600; margin-bottom:24px; background:linear-gradient(135deg,#fff 0,#94a3b8 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
 .stats-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-bottom:24px}
 .stat-card-link {text-decoration:none; color:inherit; display:block; transition:transform 0.2s}
 .stat-card-link:hover {transform:translateY(-2px)}
 .stat-card {background:rgba(22,27,34,0.5); border:1px solid rgba(33,150,243,0.15); border-radius:20px; padding:20px; display:flex; align-items:center; gap:16px; transition:border-color 0.2s}
 .stat-card-link:hover .stat-card {border-color:#2196f3}
 .stat-icon {width:52px; height:52px; border-radius:16px; background:linear-gradient(135deg,rgba(33,150,243,0.15) 0,rgba(25,118,210,0.1) 100%); border:1px solid rgba(33,150,243,0.3); display:flex; align-items:center; justify-content:center; color:#2196f3}
 .stat-icon svg {width:28px; height:28px; fill:currentColor}
 .stat-content h3 {font-size:14px; font-weight:500; color:#94a3b8; margin-bottom:4px}
 .stat-content .value {font-size:26px; font-weight:600; color:#fff; line-height:1.2}
 .info-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:24px}
 .info-card {background:rgba(10,15,26,0.5); border:1px solid rgba(33,150,243,0.1); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:8px}
 .info-card-label {color:#94a3b8; font-size:14px; letter-spacing:0.3px}
 .info-card-value {font-weight:600; color:#fff; font-size:24px}
 .badge {background:rgba(33,150,243,0.2); border:1px solid rgba(33,150,243,0.3); color:#2196f3; padding:4px 12px; border-radius:40px; font-size:13px; font-weight:500; display:inline-block}
 hr {border:none; border-top:1px dashed rgba(33,150,243,0.2); margin:24px 0}
 .mobile-menu-toggle {display:none; background:none; border:none; color:#fff; font-size:32px; cursor:pointer}
 

 .auth-container {min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px}
 .auth-card {background:rgba(13,17,23,0.8); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(33,150,243,0.3); border-radius:24px; padding:40px; width:100%; max-width:460px; box-shadow:0 20px 40px rgba(0,0,0,0.4)}
 .auth-logo {display:flex; justify-content:center; align-items:center; gap:12px; margin-bottom:32px; font-size:32px; font-weight:600; text-decoration:none}
 .auth-logo-icon {color:#2196f3; height:48px; width:48px}
 .auth-logo-text {background:linear-gradient(135deg,#fff 0,#94a3b8 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
 .auth-logo-text span {color:#2196f3; -webkit-text-fill-color:#2196f3; background:none}
 .auth-tabs {display:flex; gap:16px; margin-bottom:32px; border-bottom:1px solid rgba(33,150,243,0.2); padding-bottom:16px}
 .auth-tab {flex:1; text-align:center; padding:12px; cursor:pointer; border-radius:8px; color:#94a3b8; font-weight:500; transition:all 0.2s}
 .auth-tab.active {background:rgba(33,150,243,0.15); color:#2196f3}
 .auth-form {display:none}
 .auth-form.active {display:block}
 .form-group {margin-bottom:24px}
 .form-group label {display:block; margin-bottom:8px; color:#94a3b8; font-size:14px}
 .form-control {width:100%; padding:12px 16px; background:rgba(255,255,255,0.05); border:1px solid rgba(33,150,243,0.2); border-radius:12px; color:#fff; font-size:16px; transition:all 0.2s}
 .form-control:focus {outline:none; border-color:#2196f3; background:rgba(33,150,243,0.1)}
 .btn {width:100%; padding:14px; background:linear-gradient(135deg,#1976d2,#2196f3); border:none; border-radius:12px; color:#fff; font-size:16px; font-weight:600; cursor:pointer; transition:all 0.2s}
 .btn:hover {transform:translateY(-2px); box-shadow:0 10px 20px rgba(33,150,243,0.3)}
 .alert {padding:12px 16px; border-radius:12px; margin-bottom:24px; font-size:14px}
 .alert-error {background:rgba(244,67,54,0.1); border:1px solid rgba(244,67,54,0.3); color:#ff8a80}
 .alert-success {background:rgba(76,175,80,0.1); border:1px solid rgba(76,175,80,0.3); color:#81c784}


.balance-header {margin-bottom:32px}
.balance-card {background:linear-gradient(135deg,rgba(33,150,243,0.2) 0,rgba(25,118,210,0.1) 100%); border:1px solid rgba(33,150,243,0.3); border-radius:24px; padding:32px; display:flex; align-items:center; gap:24px; backdrop-filter:blur(10px)}
.balance-card-icon {width:64px; height:64px; border-radius:20px; background:rgba(33,150,243,0.2); border:1px solid rgba(33,150,243,0.4); display:flex; align-items:center; justify-content:center; color:#2196f3}
.balance-card-icon svg {width:36px; height:36px; fill:currentColor}
.balance-card-content {display:flex; flex-direction:column; gap:4px}
.balance-card-label {color:#94a3b8; font-size:16px; letter-spacing:0.5px}
.balance-card-value {font-size:48px; font-weight:700; color:#fff; line-height:1.2}
.section-title {display:flex; align-items:center; gap:12px; margin-bottom:20px}
.section-title h2 {font-size:22px; font-weight:600; color:#fff}
.promo-section,.payment-section,.history-section {background:rgba(22,27,34,0.5); border:1px solid rgba(33,150,243,0.15); border-radius:20px; padding:24px; margin-bottom:24px}
.promo-form {display:flex; gap:12px; margin-bottom:8px}
.promo-form .form-control {flex:1; background:rgba(10,15,26,0.5)}
.promo-form .btn {width:auto; padding:12px 32px}
.form-hint {color:#6b7a8f; font-size:13px; margin-top:8px}
.payment-methods,.payment-amount {margin-bottom:28px}
.payment-methods h3,.payment-amount h3 {font-size:16px; color:#94a3b8; margin-bottom:16px; font-weight:500}
.methods-grid {display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.method-card {cursor:pointer; position:relative}
.method-card input[type="radio"] {position:absolute; opacity:0; width:0; height:0}
.method-content {display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 12px; background:rgba(10,15,26,0.5); border:1px solid rgba(33,150,243,0.2); border-radius:16px; transition:all 0.2s; color:#94a3b8}
.method-content svg {width:32px; height:32px; fill:currentColor; opacity:0.8}
.method-content span {font-size:14px; font-weight:500; text-align:center}
.method-card input[type="radio"]:checked + .method-content {background:rgba(33,150,243,0.15); border-color:#2196f3; color:#2196f3}
.method-card:hover .method-content {border-color:rgba(33,150,243,0.5); color:#cbd5e1}
.amount-input-group {position:relative; margin-bottom:16px}
.amount-input-group input {padding-right:60px; font-size:18px; font-weight:600}
.amount-currency {position:absolute; right:16px; top:50%; transform:translateY(-50%); color:#94a3b8; font-weight:500}
.amount-presets {display:flex; flex-wrap:wrap; gap:10px}
.amount-preset {padding:8px 20px; background:rgba(10,15,26,0.5); border:1px solid rgba(33,150,243,0.2); border-radius:40px; color:#94a3b8; font-size:14px; cursor:pointer; transition:all 0.2s}
.amount-preset:hover {background:rgba(33,150,243,0.15); border-color:#2196f3; color:#fff}
.btn-large {padding:16px; font-size:18px; margin-top:16px}
.empty-state {display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px; background:rgba(10,15,26,0.3); border-radius:16px; border:1px dashed rgba(33,150,243,0.2)}
.empty-state svg {width:64px; height:64px; color:#2a384b; margin-bottom:16px}
.empty-state-text {font-size:18px; font-weight:500; color:#94a3b8; margin-bottom:8px}
.empty-state-hint {font-size:14px; color:#4b5565; text-align:center}
.payment-layout {display:grid; grid-template-columns:3fr 2fr; gap:32px}
.payment-methods-column h3,.payment-amount-column h3 {font-size:16px; color:#94a3b8; margin-bottom:16px; font-weight:500}
.payment-methods-column {padding-right:16px}
.payment-amount-column {padding-left:16px; display:flex; flex-direction:column}
.payment-amount-column .btn-large {margin-top:auto}


 @media (max-width:900px) {
 body.menu-open {overflow:hidden}
 .sidebar {position:fixed; left:auto; right:0; top:57px; bottom:0; transform:translateX(100%); border-left:1px solid rgba(33,150,243,0.15); border-right:none}
 .sidebar.mobile-open {transform:translateX(0)}
 .sidebar-footer {display: none;}
 .top-bar {padding:0 10px; gap: 10px;}
 .top-bar-right {gap: 8px;}
 .content-area {padding:24px 16px}
 .stats-grid,.info-grid {grid-template-columns:1fr}
 #notificationDropdown {width:300px;}
 .mobile-menu-toggle {display:block;}
 .icon-btn {position: static;}
 .payment-layout {grid-template-columns:1fr; gap:24px}
 .payment-methods-column {padding-right:0}
 .payment-amount-column {padding-left:0}
 }

@media (max-width:768px) {.balance-card {padding:24px}
 .balance-card-value {font-size:36px}
 .promo-form {flex-direction:column}
 .promo-form .btn {width:100%}
}