*{margin:0;padding:0;box-sizing:border-box}:root{--background:#0a0a0a;--foreground:#ffffff;--card-background:#1a1a1a;--card-hover:#2a2a2a;--accent:#6366f1;--accent-hover:#818cf8;--text-secondary:#a0a0a0;--border:#2a2a2a}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--background);color:var(--foreground);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative}body:before{background-image:var(--background-image,none);background-size:cover;background-position:50%;background-repeat:no-repeat;opacity:var(--background-opacity,.5);z-index:-2}body:after,body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;transition:opacity .3s ease}body:after{background:var(--background);opacity:calc(1 - var(--background-opacity, .5));z-index:-1}.container{width:100%;max-width:600px;margin:0 auto}.profile-header{text-align:center;margin-bottom:40px;padding:20px 0}.avatar{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-hover));display:flex;align-items:center;justify-content:center;font-size:60px;margin:0 auto 20px;border:4px solid var(--border);box-shadow:0 8px 32px rgba(99,102,241,.3)}.name{font-size:32px;font-weight:700;margin-bottom:8px;background:linear-gradient(135deg,var(--foreground),var(--text-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.title{font-size:18px;margin-bottom:16px;font-weight:500}.bio,.title{color:var(--text-secondary)}.bio{font-size:16px;line-height:1.6;max-width:500px;margin:0 auto}.links-container{display:flex;flex-direction:column;gap:16px;margin-bottom:40px}.link-card{display:flex;align-items:center;gap:16px;padding:20px;background:var(--card-background);border:1px solid var(--border);border-radius:16px;text-decoration:none;color:var(--foreground);transition:all .3s ease;cursor:pointer}.link-card:hover{background:var(--card-hover);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(99,102,241,.2)}.link-icon{font-size:32px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.link-content{flex:1 1;min-width:0}.link-title{font-size:18px;font-weight:600;margin-bottom:4px;color:var(--foreground)}.link-description{font-size:14px;color:var(--text-secondary);line-height:1.4}.link-arrow{font-size:24px;color:var(--text-secondary);transition:transform .3s ease,color .3s ease;flex-shrink:0}.link-card:hover .link-arrow{transform:translateX(4px);color:var(--accent)}.footer{text-align:center;padding:20px 0;color:var(--text-secondary);font-size:14px}.footer p{margin:0}.avatar-image{width:100%;height:100%;object-fit:cover;border-radius:50%}.avatar-emoji{font-size:60px}.edit-button{position:fixed;top:20px;right:20px;background:var(--card-background);border:1px solid var(--border);color:var(--foreground);padding:12px 20px;border-radius:12px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;transition:all .3s ease;z-index:100;box-shadow:0 4px 12px rgba(0,0,0,.3)}.edit-button:hover{background:var(--card-hover);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 20px rgba(99,102,241,.3)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;overflow-y:auto}.modal-content{background:var(--card-background);border:1px solid var(--border);border-radius:20px;width:100%;max-width:700px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.5)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid var(--border)}.modal-header h2{margin:0;font-size:24px;color:var(--foreground)}.modal-close{background:none;border:none;color:var(--text-secondary);font-size:32px;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .2s ease}.modal-close:hover{background:var(--card-hover);color:var(--foreground)}.modal-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 24px}.modal-tabs button{background:none;color:var(--text-secondary);padding:16px 24px;cursor:pointer;font-size:14px;font-weight:500;border:none;border-bottom:2px solid transparent;transition:all .2s ease}.modal-tabs button:hover{color:var(--foreground)}.modal-tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}.modal-body{flex:1 1;overflow-y:auto;padding:24px}.form-section{gap:20px}.form-group,.form-section{display:flex;flex-direction:column}.form-group{gap:8px}.form-group label{font-size:14px;font-weight:500;color:var(--foreground)}.form-group input,.form-group textarea{background:var(--background);border:1px solid var(--border);border-radius:8px;padding:12px;color:var(--foreground);font-size:14px;font-family:inherit;transition:all .2s ease}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.1)}.form-group textarea{resize:vertical;min-height:100px}.links-list{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.link-item{background:var(--background);border:1px solid var(--border);border-radius:12px;padding:16px;justify-content:space-between;gap:16px}.link-info,.link-item{display:flex;align-items:center}.link-info{gap:12px;flex:1 1}.link-info .link-icon{font-size:24px;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.link-info strong{display:block;color:var(--foreground);font-size:14px;margin-bottom:4px}.link-info small{display:block;color:var(--text-secondary);font-size:12px;word-break:break-all}.link-actions{display:flex;gap:8px}.link-actions button{background:var(--card-background);border:1px solid var(--border);color:var(--foreground);padding:8px 16px;border-radius:8px;cursor:pointer;font-size:12px;transition:all .2s ease}.link-actions button:hover{background:var(--card-hover);border-color:var(--accent)}.link-actions button.delete{color:#ef4444}.link-actions button.delete:hover{background:rgba(239,68,68,.1);border-color:#ef4444}.link-edit-form{display:flex;flex-direction:column;gap:8px;width:100%}.link-edit-form input{background:var(--card-background);border:1px solid var(--border);border-radius:6px;padding:8px;color:var(--foreground);font-size:12px}.link-edit-actions{display:flex;gap:8px;margin-top:8px}.link-edit-actions button{flex:1 1;padding:8px;border-radius:6px;border:none;cursor:pointer;font-size:12px;font-weight:500}.add-link-form{background:var(--background);border:2px dashed var(--border);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}.add-link-form h3{margin:0 0 8px;font-size:16px;color:var(--foreground)}.add-link-form input{background:var(--card-background);border:1px solid var(--border);border-radius:8px;padding:12px;color:var(--foreground);font-size:14px}.add-button{background:var(--accent);border:none;color:white;padding:12px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;margin-top:8px}.add-button:hover{background:var(--accent-hover);transform:translateY(-1px)}.color-presets{margin-bottom:32px}.color-presets h3{margin:0 0 16px;font-size:16px;color:var(--foreground)}.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));grid-gap:12px;gap:12px}.preset-button{border:2px solid var(--border);border-radius:12px;padding:16px;cursor:pointer;color:white;font-weight:500;font-size:14px;transition:all .2s ease}.preset-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.3)}.color-inputs h3{margin:0 0 16px;font-size:16px;color:var(--foreground)}.color-input-group{display:flex;gap:12px;align-items:center}.color-input-group input[type=color]{width:60px;height:40px;border:1px solid var(--border);border-radius:8px;cursor:pointer;background:none}.color-input-group input[type=text]{flex:1 1;background:var(--background);border:1px solid var(--border);border-radius:8px;padding:12px;color:var(--foreground);font-size:14px;font-family:monospace}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:24px;border-top:1px solid var(--border)}.cancel-button,.save-button{padding:12px 24px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;border:none}.cancel-button{background:var(--background);border:1px solid var(--border);color:var(--foreground)}.cancel-button:hover{background:var(--card-hover)}.save-button{background:var(--accent);color:white}.save-button:hover{background:var(--accent-hover);transform:translateY(-1px)}.background-section{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border)}.background-section h3{margin:0 0 16px;font-size:16px;color:var(--foreground)}.range-value{text-align:center;color:var(--accent);font-weight:600;font-size:18px;margin-top:8px}.remove-background-button{background:#ef4444;border:none;color:white;padding:12px 24px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;width:100%;margin-top:16px}.remove-background-button:hover{background:#dc2626;transform:translateY(-1px)}.image-upload{display:flex;flex-direction:column;gap:12px}.image-upload-label{font-size:14px;font-weight:500;color:var(--foreground)}.image-upload-container{position:relative;width:100%}.image-upload-input{display:none}.image-upload-placeholder{border:2px dashed var(--border);border-radius:12px;padding:40px;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--background)}.image-upload-placeholder:hover{border-color:var(--accent);background:var(--card-background)}.image-upload-placeholder svg{color:var(--text-secondary);margin:0 auto 12px}.image-upload-placeholder p{color:var(--foreground);font-size:14px;margin:4px 0}.image-upload-hint{color:var(--text-secondary)!important;font-size:12px!important}.image-preview{position:relative;width:100%;border-radius:12px;overflow:hidden;border:2px solid var(--border);background:var(--background)}.image-preview-img{width:100%;height:200px;object-fit:cover;display:block}.image-preview-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;gap:12px;opacity:0;transition:opacity .3s ease}.image-preview:hover .image-preview-overlay{opacity:1}.image-preview-button{background:var(--accent);border:none;color:white;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.image-preview-button:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px)}.image-preview-button:disabled{opacity:.6;cursor:not-allowed}.image-preview-button.remove{background:#ef4444}.image-preview-button.remove:hover:not(:disabled){background:#dc2626}.form-hint{display:block;font-size:12px;color:var(--text-secondary);margin-top:4px}input[type=range]{width:100%;margin:8px 0;height:8px;border-radius:4px;background:var(--card-background);outline:none;-webkit-appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease}input[type=range]::-webkit-slider-thumb:hover{background:var(--accent-hover);transform:scale(1.1)}input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;border:none;-moz-transition:all .2s ease;transition:all .2s ease}input[type=range]::-moz-range-thumb:hover{background:var(--accent-hover);transform:scale(1.1)}@media (max-width:640px){.avatar{width:100px;height:100px}.avatar-emoji{font-size:50px}.name{font-size:28px}.title{font-size:16px}.bio{font-size:14px}.link-card{padding:16px}.link-title{font-size:16px}.link-description{font-size:13px}.edit-button{top:10px;right:10px;padding:10px 16px;font-size:12px}.modal-content{max-height:95vh}.modal-body,.modal-footer,.modal-header{padding:16px}.preset-grid{grid-template-columns:repeat(2,1fr)}}