*{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;padding:24px;overflow:hidden}.header{display:flex;justify-content:space-between;align-items:center;margin-top:20px;margin-bottom:24px}.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 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:absolute;bottom:0;left:0;width:100%;height:80px;background:#fff;display:flex;justify-content:space-around;align-items:center;border-top-left-radius:30px;border-top-right-radius:30px;box-shadow:0 -5px 20px #0000000d;padding-bottom:10px}.nav-item{display:flex;flex-direction:column;align-items:center;gap:6px;color:#a0a0a0;text-decoration:none;font-size:11px;font-weight:500}.nav-item.active{color:#111}.nav-item i{font-size:20px}.nav-item.middle-active i{background:#7854f7;color:#fff;width:45px;height:45px;border-radius:50%;display:flex;justify-content:center;align-items:center;margin-top:-10px;box-shadow:0 5px 15px #7854f74d}.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}.quick-stats{display:flex;align-items:center;justify-content:space-around;background:#fff;border-radius:20px;padding:24px 20px;margin-bottom:24px;box-shadow:0 4px 20px #0000000f}.stat-item{display:flex;flex-direction:column;align-items:center}.stat-number{font-size:26px;font-weight:700;color:#111}.stat-label{font-size:13px;color:#888;margin-top:4px}.stat-divider{width:1px;height:45px;background:#f0f0f0}.bio-card{background:linear-gradient(135deg,#f8f5ff,#faf5ff);border-radius:20px;padding:20px;margin-bottom:24px}.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:14px;border:1px solid #e0e0e0;border-radius:14px;font-size:15px;font-family:Poppins,sans-serif;resize:none;outline:none}.edit-inline textarea:focus{border-color:#7854f7}.profile-section{margin-bottom:28px}.section-header-row{display:flex;align-items:center;gap:12px;margin-bottom:16px}.section-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px}.section-icon{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:12px}.info-card{background:#fff;border-radius:18px;padding:18px 20px;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:16px;flex:1}.info-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:18px}.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:4px}.info-label{font-size:13px;color:#888;font-weight:500}.info-value{font-size:15px;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:10px 14px;border:2px solid #7854f7;border-radius:12px;font-size:15px;font-family:Poppins,sans-serif;outline:none;background:#fafafa}.edit-input.date-input{padding:8px 12px;border:1px solid #e0e0e0;background:#fff}.privacy-card{background:#fafafa;border-radius:14px;padding:16px 20px;margin-left:64px}.privacy-label{font-size:12px;color:#888;display:block;margin-bottom:12px}.privacy-options-row{display:flex;gap:10px}.privacy-btn{flex:1;padding:10px 14px;border:1px solid #e0e0e0;border-radius:12px;background:#fff;font-size:13px;font-family:Poppins,sans-serif;cursor:pointer;transition:all .2s ease;color:#666}.privacy-btn.active{background:#7854f7;border-color:#7854f7;color:#fff}.gender-card{flex-wrap:wrap}.gender-select{padding:8px 14px;border:1px solid #e0e0e0;border-radius:12px;font-size:15px;font-family:Poppins,sans-serif;background:#fff;cursor:pointer;outline:none;min-width:150px}.gender-select:focus{border-color:#7854f7}.gender-toggle{display:flex;align-items:center;gap:10px}.toggle-text{font-size:12px;color:#888}.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}.profile-screen::-webkit-scrollbar{width:4px}.profile-screen::-webkit-scrollbar-track{background:transparent}.profile-screen::-webkit-scrollbar-thumb{background:#e0e0e0;border-radius:2px}.profile-screen::-webkit-scrollbar-thumb:hover{background:#ccc}