*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f5f0e8;--surface: #ffffff;--text: #1a1a2e;--text-secondary: #666;--border: #e0d8cc;--primary: #5b3a8c;--primary-light: #7b52ab;--accent: #c9a84c;--radius: 12px;--radius-sm: 8px;--shadow: 0 2px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--transition: .25s ease}html{font-family:Tajawal,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh;margin:0}#root{min-height:100vh;display:flex;flex-direction:column}.app{min-height:100vh;display:flex;flex-direction:column;max-width:480px;margin:0 auto;width:100%;background:var(--surface);box-shadow:var(--shadow-lg)}.navbar{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--border)}.navbar-content{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}.navbar-spacer{width:60px}.navbar-title{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.3px}.lang-toggle{display:flex;align-items:center;gap:4px;background:none;border:none;color:var(--text-secondary);font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;padding:6px 10px;border-radius:var(--radius-sm);transition:background var(--transition)}.lang-toggle:hover{background:#0000000d}.tabs{display:flex;justify-content:center;gap:0;padding:0 16px;border-bottom:1px solid var(--border);background:var(--surface)}.tab-btn{flex:1;max-width:160px;background:none;border:none;border-bottom:3px solid transparent;padding:12px 16px;font-family:inherit;font-size:15px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all var(--transition)}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:700}.tab-btn:hover:not(.active){color:var(--text)}.main-content{flex:1;padding:0 16px 24px}.form-section{padding:12px 0}.form-title{font-size:20px;font-weight:700;text-align:center;margin-bottom:10px;color:var(--text)}.form-row{display:flex;gap:10px;margin-bottom:0}.form-row .form-group{flex:1}.form-group{margin-bottom:10px}.form-group label{display:block;font-size:13px;font-weight:500;color:var(--text-secondary);margin-bottom:3px}.form-group input[type=text],.form-group input[type=date],.form-group input[type=time],.form-group textarea{width:100%;padding:8px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:inherit;font-size:15px;color:var(--text);background:var(--surface);transition:border-color var(--transition);outline:none}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--primary)}.form-group textarea{resize:vertical;min-height:60px}.select-wrapper{position:relative}.select-wrapper select{width:100%;padding:8px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:inherit;font-size:15px;color:var(--text);background:var(--surface);appearance:none;cursor:pointer;outline:none}.select-arrow{position:absolute;top:50%;inset-inline-start:14px;transform:translateY(-50%);pointer-events:none;color:var(--text-secondary);font-size:14px}[dir=ltr] .select-arrow{inset-inline-start:auto;inset-inline-end:14px}.char-count{display:block;text-align:left;font-size:12px;color:var(--text-secondary);margin-top:4px}[dir=ltr] .char-count{text-align:right}.icon-selector{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.icon-selector::-webkit-scrollbar{height:4px}.icon-selector::-webkit-scrollbar-track{background:transparent}.icon-selector::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.icon-option{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 10px 6px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);font-family:inherit;transition:all var(--transition)}.icon-option:hover{border-color:var(--primary-light);color:var(--text)}.icon-option.active{border-color:var(--primary);background:#5b3a8c14;color:var(--primary)}.icon-option-label{font-size:10px;font-weight:500;white-space:nowrap}.message-templates{display:flex;gap:8px;margin-bottom:8px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.message-templates::-webkit-scrollbar{height:4px}.message-templates::-webkit-scrollbar-track{background:transparent}.message-templates::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.msg-template-btn{flex:0 0 200px;scroll-snap-align:start;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;font-family:inherit;font-size:13px;line-height:1.5;color:var(--text);text-align:right;cursor:pointer;transition:all var(--transition);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}[dir=ltr] .msg-template-btn{text-align:left}.msg-template-btn:hover{border-color:var(--primary-light);background:#5b3a8c0a}.msg-template-btn.active{border-color:var(--primary);background:#5b3a8c14}.preview-section{margin:8px 0 24px}.card-preview{position:relative;width:100%;aspect-ratio:1 / 1;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:all .4s ease}.card-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px 24px 24px;position:relative;z-index:2;text-align:center}.invitation-body{justify-content:center;gap:8px}.card-crescent-wrapper{margin-bottom:12px}.card-occasion{font-size:26px;font-weight:800;line-height:1.3;margin-bottom:16px;text-shadow:0 2px 8px rgba(0,0,0,.2)}.card-message{font-size:15px;font-weight:400;line-height:1.7;max-width:85%;opacity:.95;text-shadow:0 1px 4px rgba(0,0,0,.15)}.card-invited-text{font-size:30px;font-weight:800;margin-bottom:8px;text-shadow:0 2px 8px rgba(0,0,0,.2)}.card-invite-detail{font-size:15px;font-weight:500;line-height:2}.card-invite-label{opacity:.75}.card-invite-value{font-weight:700}.card-footer{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:relative;z-index:3}.card-footer-item{display:flex;flex-direction:column;align-items:center;gap:2px}.card-footer-label{font-size:11px;font-weight:400}.card-footer-name{font-size:15px;font-weight:700}.card-deco.stars-field{position:absolute;top:0;left:0;width:100%;height:30%;z-index:1;pointer-events:none}.card-deco.mosque{position:absolute;bottom:40px;left:0;width:100%;height:30%;z-index:1;pointer-events:none}.hanging-lanterns{position:absolute;top:0;left:0;width:100%;height:80px;z-index:1;pointer-events:none}.hanging-lantern{position:absolute;top:-5px;animation:sway 3s ease-in-out infinite;transform-origin:top center}@keyframes sway{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}.card-deco.pattern-geometric{position:absolute;top:-20px;right:-20px;width:65%;height:65%;z-index:1;pointer-events:none;opacity:.9}[dir=ltr] .card-deco.pattern-geometric{right:auto;left:-20px}.card-deco.pattern-arches{position:absolute;bottom:40px;left:0;width:100%;height:35%;z-index:1;pointer-events:none}.card-deco.pattern-floral{position:absolute;top:-30px;right:-30px;width:60%;height:60%;z-index:1;pointer-events:none;opacity:.9}[dir=ltr] .card-deco.pattern-floral{right:auto;left:-30px}.card-actions{display:flex;gap:10px;margin-top:12px}.action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border:none;border-radius:var(--radius-sm);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all var(--transition)}.action-download{background:var(--primary);color:#fff}.action-download:hover{background:var(--primary-light)}.action-whatsapp{background:#25d366;color:#fff}.action-whatsapp:hover{background:#1ebe57}.template-gallery{padding:8px 0 16px}.gallery-title{font-size:16px;font-weight:700;margin-bottom:12px;color:var(--text)}.template-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.template-thumb{position:relative;aspect-ratio:3 / 4;border-radius:var(--radius-sm);overflow:hidden;border:2.5px solid transparent;cursor:pointer;padding:0;transition:all var(--transition)}.template-thumb.selected{border-color:var(--primary);box-shadow:0 0 0 2px #5b3a8c40}.template-thumb:hover:not(.selected){border-color:var(--border);transform:translateY(-2px)}.template-thumb-content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:6px;gap:2px}.thumb-stars{display:flex;gap:4px;margin-bottom:2px}.thumb-text{text-align:center;line-height:1.2}.app-footer{text-align:center;padding:20px 16px;font-size:12px;color:var(--text-secondary);border-top:1px solid var(--border);background:var(--surface)}[dir=rtl] .form-group input,[dir=rtl] .form-group textarea,[dir=rtl] .form-group select{text-align:right}[dir=ltr] .form-group input,[dir=ltr] .form-group textarea,[dir=ltr] .form-group select{text-align:left}@media(min-width:768px){.app{margin-top:20px;margin-bottom:20px;border-radius:16px;overflow:hidden}}@media(max-width:360px){.template-grid{grid-template-columns:repeat(3,1fr)}.card-occasion{font-size:22px}.card-invited-text{font-size:26px}}