: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);
 }

 .workspace-container {
     display: grid;
     padding-left: 40px;
     padding-right: 40px;
 }

 .workspace-container button {
     margin-bottom: 15px;
 }

 .workspace-container button:hover {
     background: var(--primary-hover);
     transform: translateY(-2px);
 }


 h2 span {
     background: var(--gradient);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .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;
     }
 }

 .team-container {
     padding: 20px;
 }

 .team-header {
     display: flex;
     align-items: center;
     gap: 20px;
     margin-bottom: 30px;
 }

 .team-logo-square {
     width: 70px;
     height: 70px;
     background: var(--border);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 32px;
     color: #fff;
     font-weight: 900;
 }

 .team-info h2 {
     margin: 0;
     font-size: 1.8rem;
     color: #fff;
 }

 .btn-delete-team {
     background: #ff4d4d22;
     color: #ff4d4d;
     border: 1px solid #ff4d4d;
     padding: 5px 12px;
     border-radius: 6px;
     cursor: pointer;
     font-size: 0.7rem;
     margin-top: 5px;
 }

 .invite-section {
     background: rgba(255, 255, 255, 0.03);
     padding: 20px;
     border-radius: 10px;
     border: 1px solid #333;
     margin-bottom: 30px;
 }

 .invite-section h4 {
     margin: 0 0 15px 0;
     font-size: 0.8rem;
     color: var(--accent);
 }

 .invite-group {
     display: flex;
     gap: 10px;
 }

 .invite-group input {
     flex: 1;
     padding: 12px;
     background: #000;
     border: 1px solid #444;
     color: #fff;
     border-radius: 6px;
 }

 .members-table {
     width: 100%;
     border-collapse: collapse;
 }

 .members-table th {
     text-align: left;
     border-bottom: 2px solid #222;
     color: #666;
     font-size: 0.8rem;
     padding: 15px 10px;
 }

 .members-table td {
    text-align: left;
     padding: 15px 10px;
     border-bottom: 1px solid #1a1a1a;
 }

 .role-badge {
     font-size: 0.7rem;
     padding: 4px 8px;
     background: #222;
     color: #aaa;
     border: 1px solid #444;
     border-radius: 4px;
 }

 .btn-action {
     background: none;
     border: none;
     cursor: pointer;
     font-size: 0.75rem;
 }

 .btn-remove {
     color: #ff4d4d;
 }

 .btn-leave {
     color: #ffa500;
 }

 .empty-state-container {
     text-align: center;
     padding: 40px;
 }

 .team-logo-container {
     position: relative;
     cursor: pointer;
 }

 .team-logo-square img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 12px;
 }

 .upload-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity 0.3s;
     border-radius: 12px;
     font-size: 0.7rem;
     color: #fff;
 }

 .team-logo-container:hover .upload-overlay {
     opacity: 1;
 }

 #logo-upload {
     display: none;
 }