*{margin:0;padding:0;box-sizing:border-box}:root{font-family:Inter,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;font-weight:400;--primary-color: #d63384;--secondary-color: #ff6b9d;--accent-color: #ffc107;--success-color: #28a745;--error-color: #dc3545;--warning-color: #ffc107;--info-color: #17a2b8;--text-primary: #2c3e50;--text-secondary: #6c757d;--text-light: #ffffff;--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--bg-romantic: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);--bg-classic: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);--bg-modern: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--bg-vintage: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .2);--border-radius: 12px;--border-radius-lg: 20px;--transition: all .3s cubic-bezier(.4, 0, .2, 1)}body{margin:0;min-height:100vh;background:var(--bg-gradient);color:var(--text-primary);overflow-x:hidden}#app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}@keyframes slideUp{0%{transform:translate(-50%) translateY(0);opacity:1}to{transform:translate(-50%) translateY(-100%);opacity:0}}@keyframes floatUp{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(-100px) rotate(10deg);opacity:0}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.access-form-container{width:100%;max-width:500px;animation:fadeIn .6s ease-out}.access-form{background:var(--bg-primary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);padding:40px;text-align:center;position:relative;overflow:hidden}.access-form:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--bg-romantic)}.form-header h1{font-size:2.5rem;margin-bottom:10px;background:var(--bg-romantic);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.form-header p{color:var(--text-secondary);margin-bottom:30px;font-size:1.1rem}.input-group{margin-bottom:25px;text-align:left}.input-group label{display:block;margin-bottom:8px;font-weight:600;color:var(--text-primary)}.input-group input{width:100%;padding:15px 20px;border:2px solid #e9ecef;border-radius:var(--border-radius);font-size:1.1rem;transition:var(--transition);background:var(--bg-primary)}.input-group input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #d633841a}.input-hint{font-size:.9rem;color:var(--text-secondary);margin-top:5px}.access-button{width:100%;padding:18px 30px;background:var(--bg-romantic);color:var(--text-light);border:none;border-radius:var(--border-radius);font-size:1.1rem;font-weight:600;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden}.access-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.access-button:active{transform:translateY(0)}.access-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.form-footer{margin-top:30px;padding-top:20px;border-top:1px solid #e9ecef}.access-hint{color:var(--text-secondary);font-style:italic;text-align:center;margin-top:20px;padding:15px;background:#d633840d;border-radius:var(--border-radius);border:1px solid rgba(214,51,132,.1)}.card-creator-container{width:100%;max-width:1000px;animation:fadeIn .6s ease-out}.card-creator{background:var(--bg-primary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);padding:40px;position:relative;overflow:hidden}.card-creator:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--bg-romantic)}.creator-header h1{font-size:2.5rem;margin-bottom:10px;background:var(--bg-romantic);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center}.creator-header p{color:var(--text-secondary);margin-bottom:40px;font-size:1.1rem;text-align:center}.creator-form{display:grid;gap:30px}.form-section{background:var(--bg-secondary);padding:25px;border-radius:var(--border-radius);border:1px solid #e9ecef}.form-section h3{margin-bottom:20px;color:var(--text-primary);font-size:1.3rem}.input-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.input-group textarea{width:100%;padding:15px 20px;border:2px solid #e9ecef;border-radius:var(--border-radius);font-size:1rem;font-family:inherit;transition:var(--transition);background:var(--bg-primary);resize:vertical;min-height:120px}.input-group textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #d633841a}.input-group select{width:100%;padding:15px 20px;border:2px solid #e9ecef;border-radius:var(--border-radius);font-size:1rem;font-family:inherit;transition:var(--transition);background:var(--bg-primary)}.input-group select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #d633841a}.design-options{display:grid;gap:25px}.theme-section h4,.customization-section h4{margin-bottom:15px;color:var(--text-primary);font-size:1.1rem}.customization-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.color-customization{margin-top:20px}.color-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.color-input{display:flex;flex-direction:column;align-items:center;gap:8px}.color-input label{font-size:.9rem;font-weight:600;color:var(--text-primary)}.color-input input[type=color]{width:60px;height:60px;border:3px solid #e9ecef;border-radius:50%;cursor:pointer;transition:var(--transition)}.color-input input[type=color]:hover{border-color:var(--primary-color);transform:scale(1.1)}.image-upload-section{margin-top:20px}.upload-area{border:3px dashed #e9ecef;border-radius:var(--border-radius);padding:40px;text-align:center;cursor:pointer;transition:var(--transition);background:var(--bg-primary)}.upload-area:hover{border-color:var(--primary-color);background:#d633840d}.upload-content{display:flex;flex-direction:column;align-items:center;gap:10px}.upload-icon{font-size:3rem;opacity:.7}.upload-hint{font-size:.9rem;color:var(--text-secondary)}.image-preview{position:relative;border-radius:var(--border-radius);overflow:hidden;margin-top:20px}.image-preview img{width:100%;height:200px;object-fit:cover;border-radius:var(--border-radius)}.remove-image-btn{position:absolute;top:10px;right:10px;background:#dc3545e6;color:#fff;border:none;border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.remove-image-btn:hover{background:#dc3545;transform:scale(1.1)}.decoration-toolbar{margin-top:20px}.decoration-category h4{margin-bottom:15px;color:var(--text-primary)}.decoration-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}.decoration-btn{padding:10px 20px;border:2px solid #e9ecef;border-radius:var(--border-radius);background:var(--bg-primary);cursor:pointer;transition:var(--transition);font-size:1rem;font-weight:600}.decoration-btn:hover{border-color:var(--primary-color);background:#d633841a;transform:translateY(-2px)}.decoration-canvas{border:2px dashed #e9ecef;border-radius:var(--border-radius);min-height:200px;padding:20px;position:relative;background:var(--bg-primary);overflow:hidden}.canvas-placeholder{text-align:center;color:var(--text-secondary);padding:40px 20px}.canvas-placeholder p{margin:5px 0}.decoration{position:absolute;cursor:move;-webkit-user-select:none;user-select:none;transition:var(--transition);z-index:10}.decoration:hover{transform:scale(1.1)}.decoration-heart{color:#ff6b9d}.decoration-flower{color:#ff9a9e}.decoration-star{color:#ffc107}.decoration-border{color:#6c757d}.theme-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin-top:15px}.theme-option{display:flex;flex-direction:column;align-items:center;padding:20px;border:2px solid #e9ecef;border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);background:var(--bg-primary)}.theme-option:hover{border-color:var(--primary-color);transform:translateY(-2px)}.theme-option.selected{border-color:var(--primary-color);background:#d633841a}.theme-preview{width:60px;height:40px;border-radius:8px;margin-bottom:10px;position:relative;overflow:hidden}.theme-preview.romantic{background:var(--bg-romantic)}.theme-preview.classic{background:var(--bg-classic)}.theme-preview.modern{background:var(--bg-modern)}.theme-preview.vintage{background:var(--bg-vintage)}.theme-option span{font-weight:600;color:var(--text-primary)}.form-actions{display:flex;gap:15px;justify-content:center;margin-top:30px}.preview-button,.create-button{padding:15px 30px;border:none;border-radius:var(--border-radius);font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:10px}.preview-button{background:var(--bg-secondary);color:var(--text-primary);border:2px solid #e9ecef}.preview-button:hover{background:#e9ecef;transform:translateY(-2px)}.create-button{background:var(--bg-romantic);color:var(--text-light)}.create-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.anniversary-card-container{width:100%;max-width:900px;animation:fadeIn .6s ease-out}.card-wrapper{position:relative;margin-bottom:30px}.anniversary-card{background:var(--bg-primary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;position:relative;min-height:500px}.anniversary-card.romantic{background:var(--bg-romantic)}.anniversary-card.classic{background:var(--bg-classic)}.anniversary-card.modern{background:var(--bg-modern)}.anniversary-card.vintage{background:var(--bg-vintage)}.card-background{position:absolute;inset:0;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d63384' fill-opacity='0.1'%3E%3Cpath d='M30 30c0-11.046-8.954-20-20-20s-20 8.954-20 20 8.954 20 20 20 20-8.954 20-20zm0 0c0 11.046 8.954 20 20 20s20-8.954 20-20-8.954-20-20-20-20 8.954-20 20z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.card-content{position:relative;z-index:2;padding:60px 40px;text-align:center;color:var(--text-primary)}.card-title{font-size:3rem;font-weight:700;margin-bottom:20px;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.card-date{font-size:1.2rem;color:var(--text-secondary);margin-bottom:40px;font-style:italic}.greeting{font-size:1.3rem;margin-bottom:30px;font-weight:600}.message{font-size:1.2rem;line-height:1.8;font-style:italic;max-width:600px;margin:40px auto}.signature{font-size:1.1rem;margin-top:50px;text-align:right;font-weight:600}.hearts{font-size:2rem;margin-top:40px;animation:pulse 2s infinite}.card-actions{display:flex;gap:15px;justify-content:center;margin-bottom:30px;flex-wrap:wrap}.action-button{padding:12px 24px;border:none;border-radius:var(--border-radius);font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:8px;background:var(--bg-primary);color:var(--text-primary);border:2px solid #e9ecef}.action-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.share-button:hover{background:var(--success-color);color:var(--text-light);border-color:var(--success-color)}.edit-button:hover{background:var(--info-color);color:var(--text-light);border-color:var(--info-color)}.print-button:hover{background:var(--warning-color);color:var(--text-primary);border-color:var(--warning-color)}.card-info{background:var(--bg-secondary);padding:20px;border-radius:var(--border-radius);text-align:center;border:1px solid #e9ecef}.access-info{font-size:1.1rem;margin-bottom:10px}.access-code{font-family:Courier New,monospace;font-weight:700;color:var(--primary-color);background:var(--bg-primary);padding:5px 10px;border-radius:6px;border:1px solid #e9ecef;display:inline-block;margin:0 10px}.copy-code{background:var(--primary-color);color:var(--text-light);border:none;border-radius:6px;padding:5px 10px;cursor:pointer;margin-left:10px;transition:var(--transition)}.copy-code:hover{background:var(--secondary-color);transform:scale(1.05)}.share-instructions{color:var(--text-secondary);font-size:.9rem}.floating-heart{position:absolute;pointer-events:none;z-index:10;animation:floatUp 3s ease-out forwards}.preview-modal{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.preview-content{background:var(--bg-primary);border-radius:var(--border-radius-lg);max-width:600px;width:100%;max-height:90vh;overflow-y:auto;position:relative}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e9ecef}.preview-header h3{margin:0;color:var(--text-primary)}.close-preview{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-secondary);transition:var(--transition)}.close-preview:hover{color:var(--text-primary)}.preview-card{margin:20px;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow-md)}.preview-actions{padding:20px;text-align:center;border-top:1px solid #e9ecef}.close-preview-button{background:var(--primary-color);color:var(--text-light);border:none;padding:12px 24px;border-radius:var(--border-radius);cursor:pointer;font-weight:600;transition:var(--transition)}.close-preview-button:hover{background:var(--secondary-color);transform:translateY(-2px)}@media(max-width:768px){#app{padding:10px}.access-form,.card-creator{padding:30px 20px}.card-content{padding:40px 20px}.card-title{font-size:2.2rem}.form-actions{flex-direction:column}.card-actions{flex-direction:column;align-items:center}.action-button{width:100%;max-width:300px;justify-content:center}.theme-selector{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.card-title{font-size:1.8rem}.message{font-size:1.1rem}.theme-selector{grid-template-columns:1fr}.access-code{display:block;margin:10px 0}}