:root {
     --primary: #7C3AED;
     --primary-hover: #6D28D9;
     --accent: #10B981;
     --bg-dark: #050507;
     --bg-card: #0F0F13;
     --text-main: #F9FAFB;
     --text-muted: #9CA3AF;
     --border: rgba(255, 255, 255, 0.08);
     --glass: rgba(255, 255, 255, 0.03);
     --gradient: linear-gradient(90deg, #7C3AED, #EC4899);
 }


 .settings-container {
     max-width: 600px;
     margin: 40px auto;
     padding: 20px;
 }

 .settings-section {
     text-align: left;
     margin-top: 30px;
     padding-top: 20px;
     border-top: 1px solid var(--border);
 }

 .settings-section h3 {
     margin-bottom: 20px;
     color: var(--primary-light);
     font-size: 1.1rem;
 }

 .input-label {
     display: block;
     margin-top: 8px;
     margin-bottom: 8px;
     font-size: 0.85rem;
     color: var(--text-muted);
     margin-left: 5px;
 }

 .btn-danger {
     background: transparent;
     border: 1px solid #ff5a5a;
     color: #ff5a5a;
     margin-top: 20px;
 }

 .btn-danger:hover {
     background: #ff5a5a;
     color: white;
 }

 .avatar-upload {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-bottom: 30px;
 }

 body.subpage {
     height: auto;
     overflow-y: auto;
     display: block;
 }

 .box-container.settings-page {
     min-height: calc(100vh - 160px);
     display: flex;
     justify-content: center;
     align-items: flex-start;
     padding: 60px 20px;
 }

 .settings-container {
     margin-bottom: 50px;
 }

 @media (max-width: 670px) {
     .box {
         border: none;
         background-color: var(--bg-dark);
     }

     .box:hover {
         border-color: none;
         box-shadow: none;
     }
 }