@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;600;700&display=swap";:root{--color-primary: #2563eb;--color-primary-dark: #1d4ed8;--color-primary-light: #3b82f6;--color-secondary: #8b5cf6;--color-secondary-dark: #7c3aed;--color-secondary-light: #a78bfa;--gradient-primary: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);--gradient-secondary: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);--gradient-hero: linear-gradient(135deg, #2563eb 0%, #8b5cf6 100%);--color-bg: #0f172a;--color-bg-secondary: #1e293b;--color-bg-tertiary: #334155;--color-surface: #1e293b;--color-surface-hover: #334155;--color-text-primary: #f8fafc;--color-text-secondary: #cbd5e1;--color-text-muted: #94a3b8;--color-border: #334155;--color-divider: #475569;--color-success: #10b981;--color-error: #ef4444;--color-warning: #f59e0b;--color-info: #3b82f6;--glass-bg: rgba(30, 41, 59, .7);--glass-border: rgba(148, 163, 184, .1);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1);--font-family-ar: "Noto Sans Arabic", "Cairo", sans-serif;--font-family-en: "Inter", "Roboto", sans-serif;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--transition-fast: .15s ease-in-out;--transition-base: .25s ease-in-out;--transition-slow: .35s ease-in-out}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family-en);background:var(--color-bg);color:var(--color-text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[dir=rtl] body{font-family:var(--font-family-ar)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-secondary)}::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:var(--radius-lg)}::-webkit-scrollbar-thumb:hover{background:var(--color-primary-dark)}.container{max-width:1200px;margin-inline:auto;padding-inline:var(--spacing-lg)}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--glass-shadow);padding:var(--spacing-xl)}.btn{padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);font-weight:500;cursor:pointer;transition:all var(--transition-base);border:none;font-size:var(--text-base)}.btn-primary{background:var(--gradient-primary);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-secondary{background:var(--gradient-secondary);color:#fff}.btn-secondary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-outline{background:transparent;border:2px solid var(--color-primary);color:var(--color-primary)}.btn-outline:hover{background:var(--color-primary);color:#fff}.input{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--text-base);transition:all var(--transition-base)}.input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #2563eb1a}.card{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--spacing-lg);transition:all var(--transition-base)}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn var(--transition-slow) ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.slide-in{animation:slideIn var(--transition-base) ease-out}[dir=rtl] .slide-in{animation:slideInRTL var(--transition-base) ease-out}@keyframes slideInRTL{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.spinner{width:40px;height:40px;border:4px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}[dir=rtl],[dir=rtl] .text-left{text-align:right}[dir=rtl] .text-right{text-align:left}[dir=rtl] .icon-flip{transform:scaleX(-1)}.margin-start{margin-inline-start:var(--spacing-md)}.margin-end{margin-inline-end:var(--spacing-md)}.padding-start{padding-inline-start:var(--spacing-md)}.padding-end{padding-inline-end:var(--spacing-md)}[dir=rtl] .flex-row{flex-direction:row-reverse}[dir=rtl] .grid-rtl{direction:rtl}.template-card{cursor:pointer;transition:all var(--transition-base);height:100%;display:flex;flex-direction:column;border:1px solid var(--color-border)}.template-card:hover{transform:translateY(-8px);border-color:var(--color-primary);box-shadow:0 8px 24px #2563eb33}.template-card-header{padding:var(--spacing-lg);border-bottom:1px solid var(--color-border)}.template-card-header h3{margin:0;font-size:var(--text-xl);color:var(--color-text-primary)}.template-card-body{padding:var(--spacing-lg);flex:1}.template-description{color:var(--color-text-secondary);margin-bottom:var(--spacing-md);line-height:1.6}.template-meta{display:flex;gap:var(--spacing-sm);align-items:center;color:var(--color-text-muted);font-size:var(--text-sm)}.template-fields-count{padding:var(--spacing-xs) var(--spacing-sm);background:var(--color-bg-tertiary);border-radius:var(--radius-sm)}.template-card-footer{padding:var(--spacing-lg);border-top:1px solid var(--color-border)}.btn-sm{padding:var(--spacing-xs) var(--spacing-md);font-size:var(--text-sm);width:100%}.template-browser{width:100%}.template-browser-header{margin-bottom:var(--spacing-2xl)}.template-browser-header h2{font-size:var(--text-3xl);margin-bottom:var(--spacing-lg)}.template-filters{display:flex;flex-direction:column;gap:var(--spacing-lg)}.template-search{max-width:400px}.view-mode-toggle{display:flex;gap:var(--spacing-xs);background:var(--color-surface);padding:var(--spacing-xs);border-radius:var(--radius-md);width:fit-content}.view-btn{padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-base);font-size:var(--text-xl);color:var(--color-text-secondary)}.view-btn:hover{background:var(--color-bg-secondary);color:var(--color-text-primary)}.view-btn.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.category-tabs{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.category-tab{padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-base);font-size:var(--text-base)}.category-tab:hover{background:var(--color-surface-hover);border-color:var(--color-primary)}.category-tab.active{background:var(--gradient-primary);border-color:var(--color-primary);color:#fff}.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--spacing-lg)}.template-list-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg);padding:var(--spacing-md);background:var(--color-surface);border-radius:var(--radius-md)}.selected-count{color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:500}.template-list{display:flex;flex-direction:column;gap:var(--spacing-md);max-height:600px;overflow-y:auto;padding:var(--spacing-sm)}.template-list-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-lg);transition:all var(--transition-base);cursor:pointer}.template-list-item:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md)}.template-list-item.selected{border-color:var(--color-primary);background:#2563eb0d}.template-list-checkbox{display:flex;align-items:center}.template-list-checkbox input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:var(--color-primary)}.template-list-content{flex:1;min-width:0}.template-list-content h4{margin:0 0 var(--spacing-xs) 0;font-size:var(--text-lg);color:var(--color-text-primary)}.template-list-content p{margin:0 0 var(--spacing-sm) 0;font-size:var(--text-sm);color:var(--color-text-secondary);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.template-list-meta{display:flex;gap:var(--spacing-sm)}.template-fields-badge{padding:var(--spacing-xs) var(--spacing-sm);background:var(--color-bg-tertiary);border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--color-text-muted)}.template-list-action{display:flex;align-items:center}.template-list::-webkit-scrollbar{width:8px}.template-list::-webkit-scrollbar-track{background:var(--color-bg-secondary);border-radius:var(--radius-sm)}.template-list::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-sm)}.template-list::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.template-browser-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-2xl);gap:var(--spacing-md)}.no-templates{grid-column:1 / -1;text-align:center;padding:var(--spacing-2xl);color:var(--color-text-muted)}@media(max-width:768px){.template-grid{grid-template-columns:1fr}.template-search{max-width:100%}.template-list-item{flex-direction:column;align-items:stretch}.template-list-action{justify-content:stretch}.template-list-action .btn{width:100%}}.letter-form{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--spacing-xl)}.letter-form-title{font-size:var(--text-2xl);margin-bottom:var(--spacing-lg);color:var(--color-text-primary)}.letter-form-fields{display:flex;flex-direction:column;gap:var(--spacing-lg)}.form-field{display:flex;flex-direction:column;gap:var(--spacing-sm)}.form-label{font-size:var(--text-base);font-weight:500;color:var(--color-text-primary)}.required-mark{color:var(--color-error);margin-inline-start:var(--spacing-xs)}.letter-textarea{min-height:100px;resize:vertical;font-family:inherit}[dir=rtl] .form-label{text-align:right}[dir=rtl] .input{text-align:right;direction:rtl}.letter-preview{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--spacing-xl);height:100%;display:flex;flex-direction:column}.letter-preview-header{margin-bottom:var(--spacing-lg)}.letter-preview-header h3{font-size:var(--text-2xl);color:var(--color-text-primary)}.letter-preview-content{flex:1;overflow-y:auto;background:#fff;border-radius:var(--radius-md);padding:var(--spacing-xl)}.letter-paper{width:210mm;max-width:794px;min-height:297mm;margin:0 auto;background:#fff;color:#000;padding:40px;box-shadow:0 2px 8px #0000001a;border:1px solid #e5e7eb}.letter-text{font-family:var(--font-family-en);font-size:14px;line-height:1.8;white-space:pre-wrap;word-wrap:break-word;color:#000;margin:0}[dir=rtl] .letter-text{font-family:var(--font-family-ar);text-align:right}.letter-signature{margin-top:var(--spacing-2xl);padding-top:var(--spacing-lg);border-top:1px solid #e5e7eb}.signature-text{font-family:var(--font-family-en);font-size:14px;line-height:1.6;white-space:pre-wrap;color:#000;margin:0 0 var(--spacing-md) 0}[dir=rtl] .signature-text{font-family:var(--font-family-ar);text-align:right}.signature-image{max-width:200px;height:auto;margin-top:var(--spacing-md)}.letter-preview-content::-webkit-scrollbar{width:6px}.letter-preview-content::-webkit-scrollbar-track{background:#f1f1f1}.letter-preview-content::-webkit-scrollbar-thumb{background:#888;border-radius:3px}.letter-preview-content::-webkit-scrollbar-thumb:hover{background:#555}.letter-editor{width:100%;height:calc(100vh - 100px);display:flex;flex-direction:column}.letter-editor-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg);background:var(--color-surface);border-radius:var(--radius-lg);margin-bottom:var(--spacing-lg);gap:var(--spacing-md);flex-wrap:wrap}.letter-editor-header h2{flex:1;margin:0;font-size:var(--text-2xl)}.letter-editor-actions{display:flex;gap:var(--spacing-sm)}.letter-editor-content{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg);overflow:hidden}.letter-editor-form,.letter-editor-preview{overflow-y:auto}@media(max-width:1024px){.letter-editor-content{grid-template-columns:1fr}.letter-editor-preview{display:none}}@media(max-width:768px){.letter-editor-header{flex-direction:column;align-items:stretch}.letter-editor-header h2{text-align:center}.letter-editor-actions{justify-content:center}}.profile-settings{max-width:800px;margin:0 auto}.profile-header{margin-bottom:var(--spacing-2xl)}.profile-header h2{font-size:var(--text-3xl);margin-bottom:var(--spacing-sm)}.profile-subtitle{color:var(--color-text-secondary);font-size:var(--text-base)}.profile-form{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--spacing-2xl)}.form-section{margin-bottom:var(--spacing-2xl);padding-bottom:var(--spacing-2xl);border-bottom:1px solid var(--color-border)}.form-section:last-of-type{border-bottom:none}.form-section h3{font-size:var(--text-xl);margin-bottom:var(--spacing-lg);color:var(--color-text-primary)}.signature-upload{margin-top:var(--spacing-md)}.signature-upload-area{border:2px dashed var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-2xl);text-align:center;transition:all var(--transition-base);cursor:pointer}.signature-upload-area:hover{border-color:var(--color-primary);background:var(--color-bg-secondary)}.upload-label{cursor:pointer;display:block}.upload-icon{font-size:3rem;margin-bottom:var(--spacing-md)}.upload-hint{font-size:var(--text-sm);color:var(--color-text-muted)}.signature-preview{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.signature-preview img{max-width:300px;max-height:150px;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-md);background:#fff}.profile-actions{display:flex;justify-content:flex-end;margin-top:var(--spacing-xl)}@media(max-width:768px){.profile-form{padding:var(--spacing-lg)}.profile-actions{justify-content:stretch}.profile-actions .btn{width:100%}}.my-letters{width:100%}.my-letters-header{margin-bottom:var(--spacing-2xl)}.my-letters-header h2{font-size:var(--text-3xl);margin-bottom:var(--spacing-sm)}.my-letters-subtitle{color:var(--color-text-secondary);font-size:var(--text-base)}.no-letters{text-align:center;padding:var(--spacing-2xl);max-width:500px;margin:0 auto}.no-letters-icon{font-size:4rem;margin-bottom:var(--spacing-lg)}.no-letters h3{font-size:var(--text-2xl);margin-bottom:var(--spacing-md)}.no-letters p{color:var(--color-text-secondary)}.letters-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:var(--spacing-lg)}.letter-card{display:flex;flex-direction:column;border:1px solid var(--color-border);transition:all var(--transition-base)}.letter-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--color-primary)}.letter-card-header{padding:var(--spacing-lg);border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-md)}.letter-card-header h3{margin:0;font-size:var(--text-lg);flex:1}.letter-language-badge{background:var(--color-bg-tertiary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:var(--text-sm);white-space:nowrap}.letter-card-body{padding:var(--spacing-lg);flex:1}.letter-template-name,.letter-date{margin-bottom:var(--spacing-sm);font-size:var(--text-sm);color:var(--color-text-secondary)}.letter-template-name strong,.letter-date strong{color:var(--color-text-primary)}.letter-card-actions{padding:var(--spacing-lg);border-top:1px solid var(--color-border);display:flex;gap:var(--spacing-sm)}.letter-card-actions .btn{flex:1}@media(max-width:768px){.letters-grid{grid-template-columns:1fr}.letter-card-actions{flex-direction:column}}.main-nav{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.nav-btn{padding:var(--spacing-sm) var(--spacing-lg);background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);color:#fff;cursor:pointer;transition:all var(--transition-base);font-size:var(--text-base);font-weight:500}.nav-btn:hover{background:#fff3;border-color:#fff6}.nav-btn.active{background:#fff;color:var(--color-primary);border-color:#fff}@media(max-width:768px){.main-nav{width:100%}.nav-btn{flex:1;min-width:100px}}