*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}body{display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:#e5e5f7}.mobile-screen{width:380px;height:820px;background-color:#fff;border-radius:8px;box-shadow:0 20px 50px #0000001a;position:relative;overflow:hidden;display:flex;flex-direction:column}.page-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:24px 24px 100px}.header{display:flex;justify-content:space-between;align-items:center;margin-top:20px;margin-bottom:24px}.page-title{font-size:18px;font-weight:600;color:#111}.page-title.light{color:#fff}.header-icon-box{width:42px;height:42px;border-radius:50%;border:1px solid #f0f0f0;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;background:#fff}.header-icon-box.light{background:#fff3;border:1px solid rgba(255,255,255,.3)}.header-icon-box.light i{color:#fff}.header-icon-box i{font-size:16px;color:#111}.notification-dot{position:absolute;top:10px;right:12px;width:6px;height:6px;background-color:#ff5252;border-radius:50%}.header-right{display:flex;align-items:center;gap:12px}.profile-pic{width:42px;height:42px;border-radius:50%;object-fit:cover;cursor:pointer}.greeting h1{font-size:24px;font-weight:600;color:#111;margin-bottom:4px}.greeting p{font-size:13px;color:#666;margin-bottom:24px}.hero-card{background:linear-gradient(135deg,#eaddff,#f3e8ff);border-radius:24px;padding:24px;display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;position:relative;overflow:hidden}.hero-content{z-index:2}.hero-content h2{font-size:16px;font-weight:600;color:#111;margin-bottom:16px;line-height:1.4}.btn-primary{background-color:#1a1a2e;color:#fff;padding:10px 20px;border-radius:20px;font-size:12px;font-weight:500;border:none;cursor:pointer}.hero-image{width:80px;height:80px;background:linear-gradient(135deg,#b088f9,#7854f7);border-radius:50%;opacity:.6}.stats-row{display:flex;gap:15px;margin-bottom:24px}.stat-card{flex:1;background:#fff;border:1px solid #f0f0f0;border-radius:20px;padding:16px;box-shadow:0 4px 10px #00000005;position:relative}.stat-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}.stat-icon{width:32px;height:32px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:14px}.stat-icon.red{background-color:#ffe5e5;color:#ff5252}.stat-icon.purple{background-color:#eae1ff;color:#7854f7}.stat-val{font-size:16px;font-weight:600;color:#111}.stat-val span{font-size:11px;font-weight:400;color:#666}.stat-desc{font-size:11px;color:#888;line-height:1.3;width:70%}.arrow-btn{position:absolute;bottom:16px;right:16px;width:28px;height:28px;border-radius:50%;background-color:#f5f5f5;display:flex;justify-content:center;align-items:center;color:#333;font-size:12px;text-decoration:none}.section-header{font-size:18px;font-weight:600;color:#111;margin-bottom:16px}.lesson-card{background:#f4ecff;border-radius:24px;padding:20px;position:relative}.lesson-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.avatars{display:flex}.avatars img{width:24px;height:24px;border-radius:50%;border:2px solid #f4ecff;margin-left:-8px}.avatars img:first-child{margin-left:0}.rating{font-size:12px;font-weight:600;color:#111;display:flex;align-items:center;gap:4px}.rating i{color:#7854f7}.lesson-title h3{font-size:18px;font-weight:600;color:#111;margin-bottom:20px;line-height:1.3}.lesson-footer{display:flex;gap:15px;align-items:center;font-size:11px;color:#666}.bottom-nav{position:sticky;bottom:0;left:0;width:100%;height:80px;background:#ffffffbf;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;justify-content:space-around;align-items:center;border-top:1px solid rgba(255,255,255,.3);padding-bottom:10px;flex-shrink:0;z-index:100}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;color:#a0a0a0;background:none;border:none;font-size:10px;font-weight:500;cursor:pointer;padding:8px 12px;transition:all .2s ease;font-family:Poppins,sans-serif}.nav-item i{font-size:18px}.nav-item.active{color:#111}.nav-item.middle-active{background:linear-gradient(135deg,#f3e8ff,#e9d5ff);border-radius:16px;padding:10px 14px}.nav-item.middle-active i{font-size:20px;color:#7c3aed}.nav-item.middle-active span{color:#7c3aed;font-weight:600}.nav-item.middle-active.active{background:linear-gradient(135deg,#7c3aed,#a855f7);box-shadow:0 4px 15px #7c3aed59}.nav-item.middle-active.active i,.nav-item.middle-active.active span{color:#fff}.rooms-filter{display:flex;gap:8px;margin-bottom:20px;overflow-x:auto;padding-bottom:8px}.filter-btn{padding:8px 16px;border-radius:20px;border:1px solid #e0e0e0;background:#fff;font-size:12px;font-weight:500;color:#666;cursor:pointer;white-space:nowrap;transition:all .2s ease;font-family:Poppins,sans-serif}.filter-btn.active{background:#7854f7;border-color:#7854f7;color:#fff}.rooms-list{display:flex;flex-direction:column;gap:16px}.room-card{background:#fff;border-radius:20px;padding:20px;box-shadow:0 4px 15px #0000000d;border:1px solid #f0f0f0}.room-card.live{border:2px solid #7854f7;background:linear-gradient(135deg,#faf5ff,#fff)}.room-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.room-live-badge{display:flex;align-items:center;gap:6px;background:#ff5252;color:#fff;padding:4px 10px;border-radius:12px;font-size:10px;font-weight:600}.live-dot{width:6px;height:6px;background:#fff;border-radius:50%;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.room-time{font-size:12px;color:#888;display:flex;align-items:center;gap:6px}.room-users{font-size:12px;color:#666;display:flex;align-items:center;gap:4px}.room-card h3{font-size:16px;font-weight:600;color:#111;margin-bottom:4px}.room-topic{font-size:13px;color:#888;margin-bottom:16px}.room-avatars{display:flex;align-items:center;margin-bottom:16px}.room-avatars img{width:32px;height:32px;border-radius:50%;border:2px solid #fff;margin-left:-10px;box-shadow:0 2px 8px #0000001a}.room-avatars img:first-child{margin-left:0}.more-users{margin-left:8px;font-size:12px;color:#888}.room-join-btn{width:100%;padding:12px;border-radius:14px;border:none;background:linear-gradient(135deg,#7854f7,#a855f7);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:Poppins,sans-serif}.room-join-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #7854f74d}.room-join-btn.outline{background:#fff;border:2px solid #7854f7;color:#7854f7}.community-header{background:linear-gradient(135deg,#7854f7,#a855f7);margin:-24px -24px 0;padding:44px 24px 20px}.community-hero{background:linear-gradient(135deg,#7854f7,#a855f7);margin:-24px -24px 20px;padding:44px 24px 30px}.community-stats{display:flex;justify-content:space-around;text-align:center}.community-stat{display:flex;flex-direction:column}.stat-num{font-size:24px;font-weight:700;color:#fff}.community-stat .stat-label{font-size:12px;color:#fffc;margin-top:2px}.community-tabs{display:flex;gap:8px;margin-bottom:20px}.community-tab{padding:10px 20px;border-radius:20px;border:none;background:#f5f5f5;font-size:13px;font-weight:500;color:#666;cursor:pointer;transition:all .2s ease;font-family:Poppins,sans-serif}.community-tab.active{background:#7854f7;color:#fff}.community-posts{display:flex;flex-direction:column;gap:16px}.community-post{background:#fff;border-radius:20px;padding:18px;box-shadow:0 4px 15px #0000000d;border:1px solid #f0f0f0}.post-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}.post-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover}.post-user-info{flex:1;display:flex;flex-direction:column}.post-user-name{font-size:14px;font-weight:600;color:#111}.post-time{font-size:11px;color:#888}.post-follow-btn{padding:6px 14px;border-radius:16px;border:1px solid #7854f7;background:transparent;color:#7854f7;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;font-family:Poppins,sans-serif}.post-follow-btn:hover{background:#7854f7;color:#fff}.post-follow-btn.following{background:#f5f5f5;border-color:#e0e0e0;color:#888}.post-content{font-size:14px;color:#333;line-height:1.6;margin-bottom:12px}.post-tags{display:flex;gap:8px;margin-bottom:14px}.post-tag{font-size:11px;color:#7854f7;background:#f4ecff;padding:4px 10px;border-radius:10px}.post-actions{display:flex;gap:20px;padding-top:12px;border-top:1px solid #f0f0f0}.post-action{display:flex;align-items:center;gap:6px;background:none;border:none;font-size:13px;color:#888;cursor:pointer;transition:all .2s ease;font-family:Poppins,sans-serif}.post-action:hover{color:#7854f7}.post-action.liked{color:#ff5252}.community-fab{position:fixed;bottom:100px;right:calc(50% - 166px);width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#7854f7,#a855f7);border:none;color:#fff;font-size:20px;cursor:pointer;box-shadow:0 5px 20px #7854f766;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.community-fab:hover{transform:scale(1.1)}.task-progress-card{background:linear-gradient(135deg,#7854f7,#a855f7);border-radius:24px;padding:24px;margin-bottom:24px;color:#fff}.task-progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.task-progress-header h2{font-size:18px;font-weight:600;margin-bottom:4px}.task-progress-header p{font-size:13px;opacity:.9}.task-progress-circle{position:relative;width:60px;height:60px}.task-progress-circle svg{width:100%;height:100%;transform:rotate(-90deg)}.circle-bg{fill:none;stroke:#fff3;stroke-width:3}.circle-progress{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;font-weight:600}.task-progress-bar{height:8px;background:#fff3;border-radius:4px;margin-bottom:8px}.progress-fill{height:100%;background:#fff;border-radius:4px;transition:width .3s ease}.task-count{font-size:12px;opacity:.9}.task-list{display:flex;flex-direction:column;gap:12px}.task-item{display:flex;align-items:center;gap:14px;background:#fff;border-radius:16px;padding:16px;box-shadow:0 4px 15px #0000000d;border:1px solid #f0f0f0;transition:all .2s ease}.task-item.completed{opacity:.7}.task-item.completed .task-info h4{text-decoration:line-through;color:#888}.task-checkbox{width:24px;height:24px;border-radius:8px;border:2px solid #e0e0e0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;flex-shrink:0}.task-checkbox.checked{background:#7854f7;border-color:#7854f7;color:#fff;font-size:12px}.task-info{flex:1}.task-info h4{font-size:14px;font-weight:500;color:#111;margin-bottom:4px}.task-time{font-size:11px;color:#888;display:flex;align-items:center;gap:4px}.task-xp{font-size:12px;font-weight:600;color:#7854f7;background:#f4ecff;padding:4px 10px;border-radius:10px}.settings-profile{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#f8f5ff,#faf5ff);border-radius:20px;padding:20px;margin-bottom:24px;cursor:pointer;transition:all .2s ease}.settings-profile:hover{transform:translateY(-2px);box-shadow:0 5px 15px #00000014}.settings-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 4px 10px #0000001a}.settings-user-info{flex:1}.settings-user-info h3{font-size:18px;font-weight:600;color:#111;margin-bottom:2px}.settings-user-info span{font-size:13px;color:#888}.settings-arrow{color:#ccc;font-size:14px}.settings-section{margin-bottom:24px}.settings-section-title{font-size:13px;font-weight:600;color:#888;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}.settings-list{display:flex;flex-direction:column;gap:2px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 15px #0000000d;border:1px solid #f0f0f0}.settings-item{display:flex;align-items:center;gap:14px;padding:16px;cursor:pointer;transition:all .2s ease}.settings-item:hover{background:#fafafa}.settings-item:not(:last-child){border-bottom:1px solid #f5f5f5}.settings-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px}.settings-icon.blue{background:#e0f2fe;color:#3b82f6}.settings-icon.purple{background:#f3e8ff;color:#7854f7}.settings-icon.green{background:#dcfce7;color:#22c55e}.settings-icon.orange{background:#ffedd5;color:#f97316}.settings-icon.pink{background:#fce7f3;color:#ec4899}.settings-icon.cyan{background:#cffafe;color:#06b6d4}.settings-icon.indigo{background:#e0e7ff;color:#6366f1}.settings-icon.teal{background:#ccfbf1;color:#14b8a6}.settings-item span{flex:1;font-size:14px;color:#111}.settings-item i.fa-chevron-right{color:#ccc;font-size:12px}.settings-value{font-size:13px;color:#888}.toggle-switch{width:48px;height:26px;background:#e0e0e0;border-radius:13px;position:relative;cursor:pointer;transition:all .3s ease}.toggle-switch.active{background:#7854f7}.toggle-knob{width:22px;height:22px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:all .3s ease;box-shadow:0 1px 4px #00000026}.toggle-switch.active .toggle-knob{left:24px}.settings-logout{width:100%;padding:16px;border-radius:16px;border:1px solid #fee2e2;background:#fff;color:#ef4444;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s ease;font-family:Poppins,sans-serif}.settings-logout:hover{background:#fef2f2}.profile-screen{padding:0;overflow-y:auto;overflow-x:hidden}.profile-header-fixed{position:fixed;top:0;left:50%;transform:translate(-50%);width:380px;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:transparent;transition:all .3s ease}.profile-header-fixed.scrolled{background:#ffffffe6;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 2px 20px #00000014}.profile-header-fixed h1{position:absolute;left:50%;transform:translate(-50%);font-size:17px;font-weight:600;color:#fff;transition:all .3s ease}.profile-header-fixed.scrolled h1{color:#111}.back-btn-header{width:38px;height:38px;border-radius:50%;background:transparent;border:2px solid rgba(255,255,255,.4);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;transition:all .2s ease;flex-shrink:0}.profile-header-fixed.scrolled .back-btn-header{border-color:#00000026;color:#666}.back-btn-header:hover{border-color:#fffc;background:#ffffff26}.profile-header-fixed.scrolled .back-btn-header:hover{border-color:#7854f7;color:#7854f7;background:#7854f714}.save-btn-header{padding:10px 22px;border-radius:22px;border:none;font-size:14px;font-weight:600;font-family:Poppins,sans-serif;cursor:pointer;transition:all .3s ease;background:#fff3;color:#fff;flex-shrink:0}.profile-header-fixed.scrolled .save-btn-header{background:#0000000f;color:#999}.save-btn-header.active{background:#fff;color:#7854f7}.profile-header-fixed.scrolled .save-btn-header.active{background:#7854f7;color:#fff}.save-btn-header.active:hover{transform:scale(1.02)}.profile-header-gradient{background:linear-gradient(135deg,#7854f7,#a855f7,#c084fc);padding:75px 20px 50px;position:relative}.profile-header-gradient:after{content:"";position:absolute;bottom:0;left:0;right:0;height:40px;background:#fff;border-radius:30px 30px 0 0}.profile-header-content{display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}.profile-pic-wrapper{position:relative;cursor:pointer;margin-bottom:16px}.profile-pic-large{width:100px;height:100px;border-radius:50%;border:4px solid #fff;object-fit:cover;box-shadow:0 8px 25px #0003}.profile-pic-badge{position:absolute;bottom:4px;right:4px;width:30px;height:30px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#7854f7;font-size:13px;box-shadow:0 2px 10px #00000026}.profile-name{font-size:24px;font-weight:700;color:#fff;margin-bottom:6px}.profile-id{font-size:15px;color:#ffffffd9;margin-bottom:0}.premium-section-wrapper{padding:0 20px;margin-top:-20px;position:relative;z-index:5}.premium-pill{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:linear-gradient(135deg,#fff7ed,#ffedd5);border-radius:16px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0000000d;gap:12px}.premium-pill i:first-child{color:#f59e0b;font-size:18px}.premium-pill span{flex:1;color:#111;font-size:15px;font-weight:600}.premium-pill i:last-child{color:#ccc;font-size:12px}.premium-pill.active{background:linear-gradient(135deg,#fef3c7,#fde68a)}.premium-pill.active i:first-child{color:#d97706}.premium-pill:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000014}.avatar-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:flex-end;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.avatar-modal-content{background:#fff;border-radius:24px 24px 0 0;padding:24px;width:100%;max-width:380px;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.avatar-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.avatar-modal-header h3{font-size:20px;font-weight:600;color:#111}.avatar-modal-header button{width:40px;height:40px;border-radius:50%;background:#f5f5f5;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.avatar-item{position:relative;cursor:pointer}.avatar-item img{width:70px;height:70px;border-radius:50%;border:3px solid transparent;transition:all .2s ease}.avatar-item:hover img{transform:scale(1.05)}.avatar-item.selected img{border-color:#7854f7}.avatar-check{position:absolute;bottom:2px;right:2px;width:22px;height:22px;background:#7854f7;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px}.profile-content{padding:20px 20px 50px}.social-stats{display:flex;align-items:center;justify-content:space-around;background:#fff;border-radius:20px;padding:20px 16px;margin-bottom:20px;box-shadow:0 4px 20px #0000000f}.social-stat-item{display:flex;flex-direction:column;align-items:center;flex:1}.social-stat-number{font-size:22px;font-weight:700;color:#111}.social-stat-number .goal-unit{font-size:14px;font-weight:500;color:#888;margin-left:2px}.social-stat-label{font-size:13px;color:#888;margin-top:4px}.social-stat-divider{width:1px;height:40px;background:#f0f0f0}.bio-card{background:linear-gradient(135deg,#f8f5ff,#faf5ff);border-radius:20px;padding:20px;margin-bottom:20px}.bio-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.bio-label{font-size:14px;font-weight:600;color:#7854f7}.edit-btn-small{width:36px;height:36px;border-radius:10px;background:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:#7854f7;box-shadow:0 2px 10px #0000000d}.bio-text{font-size:15px;color:#555;line-height:1.6}.edit-inline textarea{width:100%;padding:16px;border:2px solid #7854f7;border-radius:16px;font-size:15px;font-family:Poppins,sans-serif;resize:none;outline:none;background:#fff;line-height:1.5}.edit-inline textarea:focus{border-color:#7854f7;box-shadow:0 0 0 3px #7854f71a}.profile-section{margin-bottom:24px}.section-header-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}.section-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;background:linear-gradient(135deg,#eaddff,#f3e8ff);color:#7854f7}.section-icon.contact-icon{background:linear-gradient(135deg,#dbeafe,#eff6ff);color:#3b82f6}.section-icon.more-icon{background:linear-gradient(135deg,#fef3c7,#fefce8);color:#f59e0b}.section-title{font-size:16px;font-weight:600;color:#111}.info-cards{display:flex;flex-direction:column;gap:14px}.info-card{background:#fff;border-radius:20px;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 12px #0000000a;cursor:pointer;transition:all .2s ease}.info-card:hover{box-shadow:0 4px 18px #00000014;transform:translateY(-2px)}.info-card-left{display:flex;align-items:center;gap:18px;flex:1}.info-icon{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}.info-icon.name-icon{background:linear-gradient(135deg,#eaddff,#f3e8ff);color:#7854f7}.info-icon.id-icon{background:linear-gradient(135deg,#dbeafe,#eff6ff);color:#3b82f6}.info-icon.email-icon{background:linear-gradient(135deg,#fce7f3,#fdf2f8);color:#ec4899}.info-icon.phone-icon{background:linear-gradient(135deg,#d1fae5,#ecfdf5);color:#10b981}.info-icon.birthday-icon{background:linear-gradient(135deg,#fef3c7,#fefce8);color:#f59e0b}.info-icon.gender-icon{background:linear-gradient(135deg,#e0e7ff,#eef2ff);color:#6366f1}.info-details{display:flex;flex-direction:column;gap:6px;flex:1}.info-label{font-size:13px;color:#888;font-weight:500}.info-value{font-size:16px;color:#111;font-weight:500}.info-badge{display:inline-block;font-size:11px;color:#888;background:#f5f5f5;padding:3px 10px;border-radius:8px;margin-top:2px}.info-arrow{color:#ccc;font-size:14px}.edit-input{width:100%;padding:12px 16px;border:2px solid #7854f7;border-radius:14px;font-size:16px;font-family:Poppins,sans-serif;outline:none;background:#fafafa;transition:all .2s ease}.edit-input:focus{background:#fff;box-shadow:0 0 0 3px #7854f71a}.edit-input.date-input{padding:10px 14px;border:2px solid #7854f7;background:#fff}.privacy-card{background:#fafafa;border-radius:16px;padding:18px 20px;margin-top:12px}.privacy-header{display:flex;align-items:center;gap:8px;margin-bottom:14px}.privacy-header i{color:#7854f7;font-size:14px}.privacy-label{font-size:13px;color:#666;font-weight:500}.privacy-options-row{display:flex;gap:12px}.privacy-btn{flex:1;padding:12px 16px;border:2px solid #e0e0e0;border-radius:14px;background:#fff;font-size:14px;font-family:Poppins,sans-serif;cursor:pointer;transition:all .2s ease;color:#666}.privacy-btn.active{background:#7854f7;border-color:#7854f7;color:#fff}.gender-select{padding:10px 16px;border:2px solid #e0e0e0;border-radius:14px;font-size:15px;font-family:Poppins,sans-serif;background:#fff;cursor:pointer;outline:none;min-width:160px;transition:all .2s ease;position:relative}.gender-select:focus{border-color:#7854f7;box-shadow:0 0 0 3px #7854f71a}.gender-toggle{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f5f5f5;border-radius:12px;flex-shrink:0;z-index:1}.toggle-text{font-size:12px;color:#666;font-weight:500}.toggle-switch-mini{width:44px;height:24px;background:#e0e0e0;border-radius:12px;position:relative;cursor:pointer;transition:all .3s ease}.toggle-switch-mini.active{background:#7854f7}.toggle-knob-mini{width:20px;height:20px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:all .3s ease;box-shadow:0 1px 4px #00000026}.toggle-switch-mini.active .toggle-knob-mini{left:22px}.bottom-spacer{height:30px}.page-content::-webkit-scrollbar,.profile-screen::-webkit-scrollbar{width:4px}.page-content::-webkit-scrollbar-track,.profile-screen::-webkit-scrollbar-track{background:transparent}.page-content::-webkit-scrollbar-thumb,.profile-screen::-webkit-scrollbar-thumb{background:#e0e0e0;border-radius:2px}.page-content::-webkit-scrollbar-thumb:hover,.profile-screen::-webkit-scrollbar-thumb:hover{background:#ccc}.dark-mode{background-color:#0f0f1a;color:#f0f0f0}.dark-mode .page-content{background-color:#0f0f1a}.dark-mode .header-icon-box{background:#1a1a2e;border-color:#2a2a3e}.dark-mode .header-icon-box i,.dark-mode .page-title,.dark-mode .greeting h1{color:#f0f0f0}.dark-mode .greeting p{color:#888}.dark-mode .hero-card{background:linear-gradient(135deg,#1a1a2e,#2a2a3e)}.dark-mode .hero-content h2{color:#f0f0f0}.dark-mode .btn-primary{background:linear-gradient(135deg,#7854f7,#a855f7)}.dark-mode .stat-card{background:#1a1a2e;border-color:#2a2a3e}.dark-mode .stat-val{color:#f0f0f0}.dark-mode .stat-desc{color:#888}.dark-mode .arrow-btn{background:#2a2a3e;color:#f0f0f0}.dark-mode .section-header{color:#f0f0f0}.dark-mode .lesson-card{background:#1a1a2e}.dark-mode .lesson-title h3,.dark-mode .rating{color:#f0f0f0}.dark-mode .lesson-footer{color:#888}.dark-mode .arrow-btn{background:#2a2a3e}.dark-mode .bottom-nav{background:#0f0f1ad9;border-top-color:#ffffff1a}.dark-mode .nav-item{color:#666}.dark-mode .nav-item.active{color:#f0f0f0}.dark-mode .nav-item.middle-active{background:linear-gradient(135deg,#2a2a3e,#3a3a4e)}.dark-mode .filter-btn{background:#1a1a2e;border-color:#2a2a3e;color:#888}.dark-mode .filter-btn.active{background:#7854f7;border-color:#7854f7;color:#fff}.dark-mode .room-card{background:#1a1a2e;border-color:#2a2a3e}.dark-mode .room-card.live{background:linear-gradient(135deg,#1a1a2e,#0f0f1a);border-color:#7854f7}.dark-mode .room-card h3{color:#f0f0f0}.dark-mode .room-topic,.dark-mode .room-time,.dark-mode .room-users{color:#888}.dark-mode .room-join-btn.outline{background:transparent;border-color:#7854f7}.dark-mode .community-post{background:#1a1a2e;border-color:#2a2a3e}.dark-mode .post-user-name{color:#f0f0f0}.dark-mode .post-content{color:#ccc}.dark-mode .post-tag{background:#2a2a3e}.dark-mode .post-actions{border-top-color:#2a2a3e}.dark-mode .community-tab{background:#1a1a2e;color:#888}.dark-mode .community-tab.active{background:#7854f7;color:#fff}.dark-mode .task-item{background:#1a1a2e;border-color:#2a2a3e}.dark-mode .task-info h4{color:#f0f0f0}.dark-mode .task-item.completed .task-info h4{color:#666}.dark-mode .task-checkbox{border-color:#3a3a4e}.dark-mode .task-xp{background:#2a2a3e}.dark-mode .settings-profile{background:linear-gradient(135deg,#1a1a2e,#2a2a3e)}.dark-mode .settings-user-info h3{color:#f0f0f0}.dark-mode .settings-section-title{color:#666}.dark-mode .settings-list{background:#1a1a2e;border-color:#2a2a3e}.dark-mode .settings-item{background:transparent}.dark-mode .settings-item:hover{background:#2a2a3e}.dark-mode .settings-item:not(:last-child){border-bottom-color:#2a2a3e}.dark-mode .settings-item span{color:#f0f0f0}.dark-mode .settings-icon{opacity:.9}.dark-mode .settings-value{color:#888}.dark-mode .settings-logout{background:#1a1a2e;border-color:#3a1a1a;color:#ef4444}.dark-mode .settings-logout:hover{background:#2a1a1a}.dark-mode .toggle-switch{background:#3a3a4e}.dark-mode .toggle-switch.active{background:#7854f7}.dark-mode .profile-header-fixed.scrolled{background:#0f0f1af2;box-shadow:0 2px 20px #0000004d}.dark-mode .profile-header-fixed.scrolled h1{color:#f0f0f0}.dark-mode .profile-header-fixed.scrolled .back-btn-header{border-color:#fff3;color:#f0f0f0}.dark-mode .profile-header-gradient:after{background:#0f0f1a}.dark-mode .premium-pill{background:linear-gradient(135deg,#1a1a2e,#2a2a3e);box-shadow:0 4px 15px #0003}.dark-mode .premium-pill span{color:#f0f0f0}.dark-mode .premium-pill i:last-child{color:#666}.dark-mode .avatar-modal{background:#000000b3}.dark-mode .avatar-modal-content{background:#1a1a2e}.dark-mode .avatar-modal-header h3{color:#f0f0f0}.dark-mode .avatar-modal-header button{background:#2a2a3e;color:#f0f0f0}.dark-mode .avatar-item img{border-color:#2a2a3e}.dark-mode .avatar-item.selected img{border-color:#7854f7}.dark-mode .profile-content{background:#0f0f1a}.dark-mode .social-stats{background:#1a1a2e;box-shadow:0 4px 20px #0003}.dark-mode .social-stat-number{color:#f0f0f0}.dark-mode .social-stat-label{color:#888}.dark-mode .social-stat-divider{background:#2a2a3e}.dark-mode .bio-card{background:linear-gradient(135deg,#1a1a2e,#2a2a3e)}.dark-mode .bio-text{color:#ccc}.dark-mode .edit-btn-small{background:#2a2a3e;color:#7854f7}.dark-mode .edit-inline textarea{background:#0f0f1a;border-color:#7854f7;color:#f0f0f0}.dark-mode .section-title{color:#f0f0f0}.dark-mode .section-icon{background:linear-gradient(135deg,#2a2a3e,#3a3a4e)}.dark-mode .info-card{background:#1a1a2e;box-shadow:0 2px 12px #00000026}.dark-mode .info-card:hover{box-shadow:0 4px 18px #00000040}.dark-mode .info-label{color:#888}.dark-mode .info-value{color:#f0f0f0}.dark-mode .info-badge{background:#2a2a3e;color:#888}.dark-mode .info-arrow{color:#555}.dark-mode .edit-input{background:#0f0f1a;border-color:#7854f7;color:#f0f0f0}.dark-mode .edit-input.date-input{background:#1a1a2e}.dark-mode .privacy-card{background:#1a1a2e;box-shadow:0 2px 12px #0000001a}.dark-mode .privacy-header i{color:#a78bfa}.dark-mode .privacy-label{color:#aaa}.dark-mode .privacy-btn{background:#2a2a3e;border-color:#3a3a4e;color:#888}.dark-mode .privacy-btn.active{background:#7854f7;border-color:#7854f7;color:#fff}.dark-mode .gender-select{background:#0f0f1a;border-color:#2a2a3e;color:#f0f0f0}.dark-mode .gender-toggle{background:#2a2a3e}.dark-mode .toggle-text{color:#aaa}.dark-mode .toggle-switch-mini{background:#3a3a4e}.dark-mode .toggle-switch-mini.active{background:#7854f7}.dark-mode .page-content::-webkit-scrollbar-track,.dark-mode .profile-screen::-webkit-scrollbar-track{background:transparent}.dark-mode .page-content::-webkit-scrollbar-thumb,.dark-mode .profile-screen::-webkit-scrollbar-thumb{background:#3a3a4e}.dark-mode .page-content::-webkit-scrollbar-thumb:hover,.dark-mode .profile-screen::-webkit-scrollbar-thumb:hover{background:#4a4a5e}.cropper-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.cropper-overlay.dark{background:#000000f2}.cropper-container{background:#fff;border-radius:24px;padding:24px;width:100%;max-width:360px;animation:slideUp .3s ease}.cropper-overlay.dark .cropper-container{background:#1a1a2e}.cropper-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.cropper-header h3{font-size:20px;font-weight:600;color:#111}.cropper-overlay.dark .cropper-header h3{color:#f0f0f0}.cropper-close{width:36px;height:36px;border-radius:50%;background:#f5f5f5;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:#666;transition:all .2s ease}.cropper-overlay.dark .cropper-close{background:#2a2a3e;color:#f0f0f0}.cropper-close:hover{background:#eee}.cropper-info{font-size:13px;color:#888;margin-bottom:20px;text-align:center}.cropper-preview-container{width:100%;aspect-ratio:1;background:#000;border-radius:16px;overflow:hidden;position:relative;touch-action:none;margin-bottom:20px}.cropper-circle-mask{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;box-shadow:inset 0 0 0 2000px #00000080;border-radius:50%}.cropper-circle-inner{position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid rgba(255,255,255,.8);border-radius:50%}.cropper-image{position:absolute;top:50%;left:50%;transform-origin:center center;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;will-change:transform}.cropper-grid{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;border-radius:50%;overflow:hidden}.grid-line{position:absolute;background:#fff6}.grid-line.horizontal{left:0;right:0;height:1px}.grid-line.vertical{top:0;bottom:0;width:1px}.cropper-controls{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding:0 8px}.zoom-control{flex:1;display:flex;align-items:center;gap:12px}.zoom-control i{color:#888;font-size:14px}.zoom-slider{flex:1;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#e0e0e0;border-radius:2px;outline:none}.cropper-overlay.dark .zoom-slider{background:#3a3a4e}.zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:#7854f7;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px #7854f766}.zoom-value{font-size:13px;color:#666;min-width:45px;text-align:right}.cropper-overlay.dark .zoom-value{color:#aaa}.cropper-actions{display:flex;gap:12px}.cropper-btn{flex:1;padding:14px 20px;border-radius:14px;border:none;font-size:15px;font-weight:600;font-family:Poppins,sans-serif;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}.cropper-btn.cancel{background:#f5f5f5;color:#666}.cropper-overlay.dark .cropper-btn.cancel{background:#2a2a3e;color:#aaa}.cropper-btn.confirm{background:linear-gradient(135deg,#7854f7,#a855f7);color:#fff}.cropper-btn.confirm:hover{transform:translateY(-2px);box-shadow:0 4px 15px #7854f766}.cropper-btn.confirm:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.progressive-image{position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit}.progressive-image.error{display:flex;align-items:center;justify-content:center}.progressive-image .initials{font-size:24px;font-weight:600;color:#ffffffe6;text-transform:uppercase}.blur-placeholder{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease}.loading-spinner{width:24px;height:24px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.progressive-img{width:100%;height:100%;object-fit:cover;transition:opacity .3s ease}.progressive-img.loading{opacity:.7}.progressive-img.loaded{opacity:1}.avatar-upload-container{display:flex;flex-direction:column;align-items:center;gap:16px}.avatar-upload-container.dark{color:#f0f0f0}.hidden-input{display:none}.avatar-preview{position:relative;width:120px;height:120px;border-radius:50%;overflow:hidden;cursor:pointer;box-shadow:0 8px 30px #00000026;transition:transform .2s ease}.avatar-preview:hover{transform:scale(1.02)}.current-avatar{width:100%;height:100%;object-fit:cover}.avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7854f7,#a855f7);color:#fff;font-size:48px}.avatar-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#0006;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}.avatar-preview:hover .avatar-overlay{opacity:1}.camera-icon{color:#fff;font-size:28px}.upload-progress{display:flex;align-items:center;justify-content:center}.progress-ring{width:60px;height:60px;border-radius:50%;background:conic-gradient(#7854f7 calc(var(--progress) * 1%),#ffffff4d calc(var(--progress) * 1%));display:flex;align-items:center;justify-content:center;position:relative}.progress-ring:before{content:"";position:absolute;width:50px;height:50px;background:#0009;border-radius:50%}.progress-ring span{position:relative;z-index:1;color:#fff;font-size:14px;font-weight:600}.change-avatar-btn{display:flex;align-items:center;gap:8px;padding:12px 24px;border-radius:14px;border:2px solid #7854f7;background:transparent;color:#7854f7;font-size:14px;font-weight:600;font-family:Poppins,sans-serif;cursor:pointer;transition:all .2s ease}.avatar-upload-container.dark .change-avatar-btn{border-color:#a78bfa;color:#a78bfa}.change-avatar-btn:hover{background:#7854f7;color:#fff}.avatar-upload-container.dark .change-avatar-btn:hover{background:#a78bfa;color:#1a1a2e}.change-avatar-btn:disabled{opacity:.5;cursor:not-allowed}.upload-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.upload-modal-content{background:#fff;border-radius:24px;padding:32px;width:100%;max-width:340px;text-align:center}.upload-modal.dark .upload-modal-content{background:#1a1a2e}.upload-modal h3{font-size:20px;font-weight:600;color:#111;margin-bottom:8px}.upload-modal.dark h3{color:#f0f0f0}.upload-modal p{font-size:14px;color:#888;margin-bottom:24px}.upload-options{display:flex;flex-direction:column;gap:12px}.upload-option{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:16px;border:2px solid #f0f0f0;background:#fff;cursor:pointer;transition:all .2s ease;text-align:left}.upload-modal.dark .upload-option{border-color:#2a2a3e;background:#1a1a2e}.upload-option:hover{border-color:#7854f7;background:#faf5ff}.upload-modal.dark .upload-option:hover{border-color:#a78bfa;background:#2a2a3e}.upload-option-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px}.upload-option-icon.camera{background:linear-gradient(135deg,#eaddff,#f3e8ff);color:#7854f7}.upload-option-icon.gallery{background:linear-gradient(135deg,#dbeafe,#eff6ff);color:#3b82f6}.upload-option-icon.delete{background:linear-gradient(135deg,#fee2e2,#fef2f2);color:#ef4444}.upload-option-text h4{font-size:15px;font-weight:600;color:#111;margin-bottom:2px}.upload-modal.dark .upload-option-text h4{color:#f0f0f0}.upload-option-text span{font-size:12px;color:#888}.avatar-upload-wrapper{background:linear-gradient(135deg,#f8f5ff,#faf5ff);border-radius:20px;padding:24px;display:flex;justify-content:center}.dark-mode .avatar-upload-wrapper{background:linear-gradient(135deg,#1a1a2e,#2a2a3e)}.profile-pic-large.progressive-image{width:100px;height:100px;border-radius:50%;border:4px solid #fff;box-shadow:0 8px 25px #0003}.profile-pic-large .progressive-img{border-radius:50%}