| :root { | |
| --sidebar-bg: #1e293b; | |
| --main-bg: #4b5563; | |
| --text-white: #ffffff; | |
| --text-gray: #d1d5db; | |
| --banner-gradient-start: #a855f7; | |
| --banner-gradient-end: #ec4899; | |
| --green-check: #22c55e; | |
| --gray-check: #9ca3af; | |
| --yellow-button: #eab308; | |
| --purple-user: #a855f7; | |
| --premium-bg: #eab308; | |
| --link-blue: #60a5fa; | |
| --award-yellow: #fde047; | |
| --transition-speed: 0.3s; | |
| --card-bg: rgba(255, 255, 255, 0.05); | |
| --primary: #4361ee; | |
| --secondary: #3a0ca3; | |
| --gray: #adb5bd; | |
| --warning: #ffd166; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: var(--main-bg); | |
| color: var(--text-white); | |
| display: flex; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| .sidebar { | |
| width: 220px; | |
| background-color: var(--sidebar-bg); | |
| padding: 20px 15px; | |
| position: fixed; | |
| height: 100vh; | |
| overflow-y: auto; | |
| z-index: 1000; | |
| display: flex; | |
| flex-direction: column; | |
| transition: transform var(--transition-speed); | |
| box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2); | |
| } | |
| .sidebar.collapsed { | |
| transform: translateX(-100%); | |
| } | |
| .sidebar .logo { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 30px; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .sidebar .logo img { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| margin-right: 10px; | |
| transition: transform 0.3s ease; | |
| } | |
| .sidebar .logo img:hover { | |
| transform: scale(1.1); | |
| } | |
| .sidebar .logo-text { | |
| font-size: 18px; | |
| font-weight: bold; | |
| color: var(--yellow-button); | |
| } | |
| .sidebar .logo-subtext { | |
| font-size: 12px; | |
| color: var(--text-gray); | |
| } | |
| .sidebar ul { | |
| list-style: none; | |
| flex: 1; | |
| } | |
| .sidebar ul li { | |
| margin-bottom: 10px; | |
| } | |
| .sidebar ul li a { | |
| display: flex; | |
| align-items: center; | |
| color: var(--text-gray); | |
| text-decoration: none; | |
| padding: 8px 10px; | |
| border-radius: 6px; | |
| transition: background var(--transition-speed), transform var(--transition-speed); | |
| } | |
| .sidebar ul li a:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| color: var(--text-white); | |
| transform: translateX(5px); | |
| } | |
| .sidebar ul li a i { | |
| margin-right: 10px; | |
| width: 20px; | |
| text-align: center; | |
| transition: color var(--transition-speed); | |
| } | |
| .sidebar ul li a:hover i { | |
| color: var(--yellow-button); | |
| } | |
| .sidebar .user-info { | |
| display: flex; | |
| align-items: center; | |
| padding: 10px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| margin-top: auto; | |
| background: rgba(255, 255, 255, 0.03); | |
| border-radius: 8px; | |
| } | |
| .sidebar .user-avatar { | |
| background-color: var(--purple-user); | |
| color: var(--text-white); | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| margin-right: 10px; | |
| box-shadow: 0 0 5px rgba(168, 85, 247, 0.5); | |
| } | |
| .sidebar .user-text { | |
| font-size: 14px; | |
| } | |
| .sidebar .user-status { | |
| font-size: 12px; | |
| color: var(--text-gray); | |
| } | |
| .main-content { | |
| flex: 1; | |
| margin-left: 220px; | |
| padding: 20px; | |
| transition: margin-left var(--transition-speed); | |
| background: rgba(75, 85, 99, 0.9); | |
| backdrop-filter: blur(5px); | |
| } | |
| .main-content.expanded { | |
| margin-left: 0; | |
| } | |
| .topbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 40px; | |
| padding: 10px 20px; | |
| background: rgba(30, 41, 59, 0.8); | |
| border-radius: 10px; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| .topbar .logo { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .topbar .logo img { | |
| width: 30px; | |
| height: 30px; | |
| margin-right: 10px; | |
| } | |
| .topbar .logo-text { | |
| font-size: 18px; | |
| font-weight: bold; | |
| color: var(--yellow-button); | |
| } | |
| .topbar nav { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .topbar nav a { | |
| color: var(--link-blue); | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: color var(--transition-speed); | |
| } | |
| .topbar nav a:hover { | |
| color: var(--primary); | |
| } | |
| .topbar .right { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .topbar .toggle-btn { | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| color: var(--text-white); | |
| border: none; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| font-size: 18px; | |
| cursor: pointer; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); | |
| transition: transform var(--transition-speed), background var(--transition-speed); | |
| } | |
| .topbar .toggle-btn:hover { | |
| transform: scale(1.1); | |
| background: linear-gradient(90deg, #2a4494, #270a66); | |
| } | |
| .topbar .notification { | |
| position: relative; | |
| } | |
| .topbar .notification i { | |
| color: var(--text-gray); | |
| font-size: 18px; | |
| transition: color var(--transition-speed); | |
| } | |
| .topbar .notification i:hover { | |
| color: var(--warning); | |
| } | |
| .topbar .notification .dot { | |
| position: absolute; | |
| top: -2px; | |
| right: -2px; | |
| width: 8px; | |
| height: 8px; | |
| background-color: #ef4444; | |
| border-radius: 50%; | |
| } | |
| .topbar .user { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .topbar .user-avatar { | |
| background-color: var(--premium-bg); | |
| color: #000; | |
| width: 25px; | |
| height: 25px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| font-size: 12px; | |
| box-shadow: 0 0 5px rgba(234, 179, 8, 0.5); | |
| } | |
| .topbar .user-name { | |
| font-weight: 500; | |
| color: var(--text-white); | |
| } | |
| .topbar .premium { | |
| background-color: var(--premium-bg); | |
| color: #000; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| font-weight: bold; | |
| } | |
| .topbar .logout i { | |
| color: var(--text-gray); | |
| font-size: 18px; | |
| transition: color var(--transition-speed); | |
| } | |
| .topbar .logout i:hover { | |
| color: #ef4444; | |
| } | |
| .banner { | |
| max-width: 400px; | |
| margin: 0 auto 40px; | |
| background: linear-gradient(135deg, var(--banner-gradient-start), var(--banner-gradient-end)); | |
| border-radius: 16px; | |
| padding: 20px; | |
| text-align: center; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .banner .title { | |
| font-size: 16px; | |
| margin-bottom: 15px; | |
| color: var(--text-white); | |
| font-weight: bold; | |
| } | |
| .banner p { | |
| font-size: 14px; | |
| line-height: 1.4; | |
| margin-bottom: 15px; | |
| color: var(--award-yellow); | |
| } | |
| .banner .footer { | |
| font-size: 12px; | |
| color: rgba(255, 255, 255, 0.8); | |
| font-style: italic; | |
| } | |
| .packages-section { | |
| text-align: center; | |
| } | |
| .packages-section h1 { | |
| font-size: 24px; | |
| margin-bottom: 10px; | |
| color: var(--yellow-button); | |
| text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); | |
| } | |
| .packages-section .subtitle { | |
| font-size: 14px; | |
| color: var(--text-gray); | |
| margin-bottom: 30px; | |
| } | |
| .packages { | |
| display: flex; | |
| justify-content: center; | |
| gap: 20px; | |
| } | |
| .package-card { | |
| background-color: #6b7280; | |
| border-radius: 12px; | |
| padding: 20px; | |
| width: 200px; | |
| text-align: left; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); | |
| transition: transform var(--transition-speed), box-shadow var(--transition-speed); | |
| } | |
| .package-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); | |
| } | |
| .package-header { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| } | |
| .package-header i { | |
| color: var(--text-gray); | |
| margin-right: 10px; | |
| font-size: 18px; | |
| } | |
| .package-header .name { | |
| font-size: 18px; | |
| font-weight: bold; | |
| color: var(--yellow-button); | |
| } | |
| .package-features { | |
| list-style: none; | |
| margin-bottom: 20px; | |
| } | |
| .package-features li { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 8px; | |
| color: var(--text-gray); | |
| font-size: 14px; | |
| transition: color var(--transition-speed); | |
| } | |
| .package-features li:hover { | |
| color: var(--text-white); | |
| } | |
| .package-features li i { | |
| margin-right: 10px; | |
| } | |
| .package-features .checked i { | |
| color: var(--green-check); | |
| } | |
| .package-features .unchecked i { | |
| color: var(--gray-check); | |
| } | |
| .package-award { | |
| font-size: 16px; | |
| font-weight: bold; | |
| color: var(--award-yellow); | |
| margin-bottom: 10px; | |
| text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); | |
| } | |
| .package-button { | |
| background-color: var(--yellow-button); | |
| color: #000; | |
| padding: 8px 16px; | |
| border: none; | |
| border-radius: 6px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| width: 100%; | |
| transition: background var(--transition-speed), transform var(--transition-speed); | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); | |
| } | |
| .package-button:hover { | |
| background-color: #d97706; | |
| transform: scale(1.05); | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); | |
| } | |
| .welcome { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| padding: 15px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 10px; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| .user-avatar { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| background-color: var(--primary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--text-white); | |
| font-size: 20px; | |
| margin-right: 15px; | |
| box-shadow: 0 0 10px rgba(67, 97, 238, 0.5); | |
| } | |
| .welcome-text h2 { | |
| font-size: 18px; | |
| margin-bottom: 5px; | |
| color: var(--text-white); | |
| } | |
| .welcome-text p { | |
| color: var(--gray); | |
| font-size: 14px; | |
| } | |
| .balance-cards { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .card { | |
| background-color: #6b7280; | |
| border-radius: 12px; | |
| padding: 20px; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); | |
| transition: transform var(--transition-speed); | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .card-title { | |
| font-size: 16px; | |
| color: var(--gray); | |
| margin-bottom: 15px; | |
| } | |
| .meta-balance { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .balance-amount { | |
| font-size: 28px; | |
| font-weight: 700; | |
| color: var(--primary); | |
| text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); | |
| } | |
| .balance-actions { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .btn { | |
| padding: 8px 15px; | |
| border-radius: 5px; | |
| border: none; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all var(--transition-speed); | |
| } | |
| .btn-primary { | |
| background-color: var(--primary); | |
| color: var(--text-white); | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--secondary); | |
| transform: scale(1.05); | |
| } | |
| .btn-outline { | |
| background-color: transparent; | |
| border: 1px solid var(--primary); | |
| color: var(--primary); | |
| } | |
| .btn-outline:hover { | |
| background-color: var(--primary); | |
| color: var(--text-white); | |
| transform: scale(1.05); | |
| } | |
| .stats { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .stat-card { | |
| background-color: #6b7280; | |
| border-radius: 12px; | |
| padding: 20px; | |
| text-align: center; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); | |
| transition: transform var(--transition-speed); | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .stat-value { | |
| font-size: 24px; | |
| font-weight: 700; | |
| margin: 10px 0; | |
| color: var(--primary); | |
| } | |
| .stat-label { | |
| color: var(--gray); | |
| font-size: 14px; | |
| } | |
| .dashboard-cards { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .dashboard-card { | |
| background-color: #6b7280; | |
| border-radius: 12px; | |
| padding: 20px; | |
| color: var(--text-white); | |
| text-align: center; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); | |
| transition: transform var(--transition-speed); | |
| } | |
| .dashboard-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .dashboard-card h2 { | |
| margin: 10px 0; | |
| font-size: 22px; | |
| color: var(--primary); | |
| } | |
| .dashboard-card p { | |
| font-size: 14px; | |
| color: var(--gray); | |
| } | |
| .dashboard-btn { | |
| background: var(--yellow-button); | |
| color: #000; | |
| padding: 8px 18px; | |
| border: none; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-weight: bold; | |
| margin-top: 10px; | |
| transition: background var(--transition-speed), transform var(--transition-speed); | |
| } | |
| .dashboard-btn:hover { | |
| background: #d97706; | |
| transform: scale(1.05); | |
| } | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| z-index: 2000; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .modal-content { | |
| background-color: var(--sidebar-bg); | |
| padding: 30px; | |
| border-radius: 10px; | |
| width: 90%; | |
| max-width: 500px; | |
| color: var(--text-white); | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: scale(0.9); } | |
| to { opacity: 1; transform: scale(1); } | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| padding-bottom: 10px; | |
| } | |
| .close { | |
| font-size: 24px; | |
| cursor: pointer; | |
| color: var(--gray); | |
| transition: color var(--transition-speed); | |
| } | |
| .close:hover { | |
| color: #ef4444; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 5px; | |
| font-weight: 600; | |
| color: var(--text-white); | |
| } | |
| .form-group input, .form-group select { | |
| width: 100%; | |
| padding: 10px; | |
| border: 1px solid var(--gray); | |
| border-radius: 5px; | |
| background: rgba(255, 255, 255, 0.1); | |
| color: var(--text-white); | |
| transition: border-color var(--transition-speed); | |
| } | |
| .form-group input:focus, .form-group select:focus { | |
| border-color: var(--primary); | |
| outline: none; | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| transform: translateX(-100%); | |
| } | |
| .sidebar.active { | |
| transform: translateX(0); | |
| } | |
| .main-content { | |
| margin-left: 0; | |
| } | |
| .main-content.expanded { | |
| margin-left: 0; | |
| } | |
| .packages { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .balance-cards, .stats, .dashboard-cards { | |
| grid-template-columns: 1fr; | |
| } | |
| .balance-actions { | |
| flex-direction: column; | |
| } | |
| .topbar { | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .topbar nav { | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| } |