.invoice-app{min-height:100vh;background:linear-gradient(135deg,#e0eafc,#cfdef3,#e0eafc);font-family:Tajawal,Inter,Arial,sans-serif;position:relative;overflow-x:hidden}.invoice-app:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 25% 25%,rgba(207,222,243,.3) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(224,234,252,.3) 0%,transparent 50%),radial-gradient(circle at 50% 50%,rgba(207,222,243,.2) 0%,transparent 50%);pointer-events:none;z-index:-1}.invoice-header{background:#e0eafce6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(207,222,243,.5);position:sticky;top:0;z-index:100;box-shadow:0 4px 20px #cfdef34d}.invoice-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;background:linear-gradient(135deg,#cfdef3,#e0eafc);color:#2d3748;border:1px solid rgba(207,222,243,.5);border-radius:12px;font-weight:600;text-decoration:none;transition:all .3s ease;box-shadow:0 4px 15px #cfdef34d}.invoice-btn:hover{background:linear-gradient(135deg,#e0eafc,#cfdef3);transform:translateY(-2px);box-shadow:0 8px 25px #cfdef366;border-color:#cfdef3cc}.lang-switcher{padding:8px 16px;background:linear-gradient(135deg,#cfdef3,#e0eafc);color:#2d3748;border:1px solid rgba(207,222,243,.5);border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 10px #cfdef34d}.lang-switcher:hover{background:linear-gradient(135deg,#e0eafc,#cfdef3);transform:translateY(-1px);box-shadow:0 4px 15px #cfdef366}.template-grid-optimized{display:grid;gap:1.5rem;margin:0 auto;max-width:1200px}.template-grid-layout-optimized{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.template-card-optimized{position:relative;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);cursor:pointer;border:2px solid transparent;background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 32px #cfdef333}.template-card-optimized:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#e0eafc4d,#cfdef333);opacity:0;transition:opacity .3s ease;pointer-events:none}.template-card-optimized:hover:before{opacity:1}.template-card-interaction-optimized{transform:translateZ(0);will-change:transform}.template-card-interaction-optimized:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 40px #cfdef34d,0 8px 16px #cfdef333;background:#fffffff2}.template-selection-optimized{position:relative;overflow:hidden;border:2px solid #cfdef3;background:linear-gradient(135deg,#e0eafc4d,#cfdef333)}.template-selection-optimized:after{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#cfdef3,#e0eafc);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.template-card-optimized[data-premium=true]{background:linear-gradient(135deg,#fffffff2,#e0eafc4d);border:2px solid #cfdef3;position:relative}.template-card-optimized[data-premium=true]:before{content:"👑";position:absolute;top:-8px;right:-8px;background:linear-gradient(135deg,#cfdef3,#e0eafc);color:#2d3748;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 4px 12px #cfdef366;z-index:10}.template-card-optimized .template-icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 16px;position:relative;overflow:hidden;transition:all .3s ease;background:linear-gradient(135deg,#cfdef3,#e0eafc);color:#2d3748;box-shadow:0 4px 15px #cfdef34d}.template-card-optimized:hover .template-icon{transform:scale(1.1) rotate(5deg);box-shadow:0 6px 20px #cfdef366}.template-card-optimized[data-color=blue] .template-icon{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff}.template-card-optimized[data-color=green] .template-icon{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.template-card-optimized[data-color=purple] .template-icon{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff}.template-card-optimized[data-color=orange] .template-icon{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.template-card-optimized[data-color=gray] .template-icon{background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff}.template-content{text-align:center;padding:20px}.template-title{font-size:18px;font-weight:700;color:#2d3748;margin-bottom:8px;line-height:1.3}.template-description{font-size:14px;color:#4a5568;line-height:1.5;margin-bottom:16px}.ats-score-container{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:8px 12px;background:linear-gradient(135deg,#cfdef34d,#e0eafc33);border-radius:8px;border:1px solid rgba(207,222,243,.4)}.ats-score-label{font-size:12px;color:#4a5568;font-weight:500}.ats-score-value{font-size:14px;font-weight:700;padding:4px 8px;border-radius:6px;background:#ffffffe6;color:#2d3748;box-shadow:0 2px 4px #cfdef333}.ats-score-excellent{color:#059669;background:linear-gradient(135deg,#d1fae5,#a7f3d0)}.ats-score-good{color:#2563eb;background:linear-gradient(135deg,#dbeafe,#bfdbfe)}.ats-score-average{color:#d97706;background:linear-gradient(135deg,#fef3c7,#fde68a)}.ats-score-poor{color:#dc2626;background:linear-gradient(135deg,#fee2e2,#fecaca)}.price-badge{position:absolute;top:12px;right:12px;background:linear-gradient(135deg,#cfdef3,#e0eafc);color:#2d3748;padding:4px 8px;border-radius:12px;font-size:12px;font-weight:700;box-shadow:0 2px 8px #cfdef366;border:1px solid rgba(207,222,243,.5)}.selected-template-indicator{position:absolute;bottom:12px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#cfdef3,#e0eafc);color:#2d3748;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;box-shadow:0 4px 12px #cfdef366;animation:pulse 2s infinite;border:1px solid rgba(207,222,243,.5)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.invoice-main-content{background:#fffc;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;margin:2rem auto;box-shadow:0 20px 40px #cfdef333;border:1px solid rgba(207,222,243,.3);overflow:hidden}.customization-panel{background:linear-gradient(135deg,#e0eafc4d,#cfdef333);border-radius:16px;padding:24px;margin:16px;border:1px solid rgba(207,222,243,.4);box-shadow:0 8px 25px #cfdef326}.form-input{background:#ffffffe6;border:1px solid rgba(207,222,243,.5);border-radius:8px;padding:12px 16px;transition:all .3s ease}.form-input:focus{outline:none;border-color:#cfdef3;box-shadow:0 0 0 3px #cfdef333;background:#fff}.btn-primary{background:linear-gradient(135deg,#cfdef3,#e0eafc);color:#2d3748;border:1px solid rgba(207,222,243,.5);border-radius:8px;padding:12px 24px;font-weight:600;transition:all .3s ease;box-shadow:0 4px 15px #cfdef34d}.btn-primary:hover{background:linear-gradient(135deg,#e0eafc,#cfdef3);transform:translateY(-2px);box-shadow:0 8px 25px #cfdef366}@media (max-width: 768px){.template-grid-layout-optimized{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.template-card-optimized{padding:16px}.template-title{font-size:16px}.template-description{font-size:13px}.invoice-main-content{margin:1rem;border-radius:16px}}@media (max-width: 640px){.template-grid-layout-optimized{grid-template-columns:1fr;max-width:320px}.template-card-optimized{padding:20px}}@media (prefers-color-scheme: dark){.invoice-app{background:linear-gradient(135deg,#1a202c,#2d3748,#1a202c)}.invoice-header{background:#2d3748e6;border-bottom-color:#4a556880}.template-card-optimized{background:#2d3748e6;color:#f7fafc}.template-title{color:#f7fafc}.template-description{color:#e2e8f0}.ats-score-container{background:#2d37484d;border-color:#4a556866}.ats-score-value{background:#2d3748e6;color:#f7fafc}.invoice-main-content{background:#2d3748cc;border-color:#4a55684d}}.template-card-optimized{contain:layout style paint}.template-icon{contain:layout style}@media (prefers-reduced-motion: reduce){.template-card-optimized,.template-icon{transition:none}.template-selection-optimized:after{animation:none}.selected-template-indicator{animation:none}}@media (prefers-contrast: high){.template-card-optimized{border:2px solid #000000}.template-card-optimized[data-premium=true]{border:3px solid #000000}.ats-score-container{border:2px solid #000000}}.template-card-loading{position:relative;overflow:hidden}.template-card-loading:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(207,222,243,.4),transparent);animation:loading-shimmer 1.5s infinite}@keyframes loading-shimmer{0%{left:-100%}to{left:100%}}.template-card-optimized:focus{outline:3px solid #cfdef3;outline-offset:2px}@media print{.template-card-optimized{-moz-column-break-inside:avoid;break-inside:avoid;box-shadow:none;border:1px solid #000000}.template-card-optimized:hover{transform:none}.invoice-app{background:#fff}}.invoice-a4-container{width:210mm;min-height:297mm;margin:0 auto;background:#fff;box-shadow:0 0 20px #cfdef34d;border-radius:8px;overflow:hidden;position:relative;transform-origin:top center;transition:transform .3s ease;border:1px solid rgba(207,222,243,.2)}@media (max-width: 768px){.invoice-a4-container{width:100%;min-height:auto;transform:scale(.9);margin:0}}@media (max-width: 640px){.invoice-a4-container{transform:scale(.8)}}@media (max-width: 480px){.invoice-a4-container{transform:scale(.7)}}.invoice-content{padding:32px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#2d3748;background:#fff}.invoice-header-modern{position:relative;overflow:hidden}.invoice-header-modern:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--main-color),var(--accent-color))}.invoice-header-classic{border-bottom:3px solid var(--border-color);position:relative}.invoice-header-minimal{border-bottom:1px solid var(--light-color);position:relative}.invoice-header-corporate{position:relative;overflow:hidden}.invoice-header-corporate:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:#ffffff4d}.invoice-table-clean th{background:linear-gradient(135deg,var(--bg-color),var(--light-color));color:var(--text-color);font-weight:600;padding:16px 12px;text-align:right;border-bottom:2px solid var(--border-color)}.invoice-table-clean td{padding:16px 12px;border-bottom:1px solid rgba(207,222,243,.3);transition:background-color .2s ease}.invoice-table-clean tr:hover td{background-color:#cfdef31a}.invoice-table-bordered th{background:var(--main-color);color:#fff;font-weight:600;padding:16px 12px;text-align:right;border:1px solid var(--border-color)}.invoice-table-bordered td{padding:16px 12px;border:1px solid var(--border-color);background:#fff}.invoice-table-bordered tr:nth-child(2n) td{background:#cfdef31a}.invoice-table-striped th{background:var(--main-color);color:#fff;font-weight:600;padding:16px 12px;text-align:right}.invoice-table-striped td{padding:16px 12px;border-bottom:1px solid rgba(207,222,243,.3)}.invoice-table-striped tr:nth-child(2n) td{background:#cfdef31a}.invoice-table-striped tr:hover td{background:#cfdef333}.invoice-table-elegant th{background:linear-gradient(135deg,var(--main-color),var(--accent-color));color:#fff;font-weight:600;padding:18px 16px;text-align:right;position:relative}.invoice-table-elegant th:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:#ffffff4d}.invoice-table-elegant td{padding:18px 16px;border-bottom:1px solid rgba(207,222,243,.3);background:#fff;transition:all .3s ease}.invoice-table-elegant tr:hover td{background:#cfdef31a;transform:translate(2px)}.invoice-footer-simple{border-top:1px solid rgba(207,222,243,.3)}.invoice-footer-detailed{position:relative;overflow:hidden}.invoice-footer-detailed:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--main-color),var(--accent-color))}.invoice-footer-professional{position:relative;overflow:hidden}.invoice-footer-professional:after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:#ffffff4d}.invoice-preview-qr{display:flex;align-items:center;justify-content:center;padding:20px;background:#cfdef31a;border-radius:12px;border:1px solid rgba(207,222,243,.3);min-width:160px;min-height:160px}.invoice-preview-qr svg{border-radius:8px;background:#fff;padding:12px;box-shadow:0 4px 16px #cfdef34d;transition:transform .2s ease,box-shadow .2s ease}.invoice-preview-qr svg:hover{transform:scale(1.05);box-shadow:0 6px 20px #cfdef366}.invoice-summary{flex:1;margin-right:24px}.invoice-summary-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(207,222,243,.3)}.invoice-summary-row:last-child{border-bottom:none;font-weight:600;font-size:1.1em;color:var(--main-color);padding-top:12px;border-top:2px solid var(--border-color)}.company-logo{max-width:120px;max-height:60px;-o-object-fit:contain;object-fit:contain;border-radius:8px;box-shadow:0 2px 8px #cfdef333;border:1px solid rgba(207,222,243,.2)}.invoice-number-badge{background:linear-gradient(135deg,var(--main-color),var(--accent-color));color:#fff;padding:8px 16px;border-radius:20px;font-weight:600;font-size:.9em;box-shadow:0 2px 8px #cfdef34d}.client-info-box{background:#cfdef31a;border:1px solid rgba(207,222,243,.3);border-radius:8px;padding:16px;margin-top:16px}.client-info-box h3{color:var(--main-color);font-weight:600;margin-bottom:8px;font-size:1.1em}.notes-section{background:#cfdef31a;border-left:4px solid var(--main-color);padding:16px;margin-top:16px;border-radius:0 8px 8px 0}.notes-section h3{color:var(--main-color);font-weight:600;margin-bottom:8px}.export-controls{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}.export-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none;font-size:14px}.export-btn-primary{background:linear-gradient(135deg,var(--main-color),var(--accent-color));color:#fff;box-shadow:0 4px 12px #cfdef34d}.export-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #cfdef366}.export-btn-secondary{background:#fff;color:var(--main-color);border:2px solid var(--main-color)}.export-btn-secondary:hover{background:var(--main-color);color:#fff;transform:translateY(-2px)}@media (prefers-color-scheme: dark){.invoice-a4-container{background:#1a1a1a;color:#fff;border-color:#4a55684d}.invoice-content{color:#fff;background:#1a1a1a}.invoice-table-clean td,.invoice-table-bordered td,.invoice-table-striped td,.invoice-table-elegant td{background:#2a2a2a;color:#fff}.invoice-table-striped tr:nth-child(2n) td{background:#333}.client-info-box,.notes-section,.invoice-preview-qr{background:#2d37484d;border-color:#4a556866}.invoice-preview-qr svg{background:#2a2a2a}.invoice-preview-qr svg:hover{box-shadow:0 6px 20px #2d374880}}@media print{.invoice-a4-container{width:210mm;height:297mm;margin:0;box-shadow:none;border-radius:0;transform:none;border:none}.export-controls{display:none}.invoice-content{padding:20mm}.invoice-preview-qr{background:#fff;border:1px solid #000000;box-shadow:none}.invoice-preview-qr svg{background:#fff;box-shadow:none}.invoice-preview-qr svg:hover{transform:none;box-shadow:none}}.fade-in{animation:fadeIn .5s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-in{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@media (max-width: 1024px){.invoice-content{padding:24px}.export-controls{justify-content:center}}@media (max-width: 768px){.invoice-content{padding:16px}.invoice-header{flex-direction:column;gap:16px}.invoice-summary{margin-right:0;margin-bottom:16px}.invoice-footer{flex-direction:column;gap:16px}.invoice-preview-qr{align-self:center;min-width:140px;min-height:140px;padding:16px}.invoice-preview-qr svg{width:100px;height:100px}}@media (max-width: 640px){.invoice-preview-qr{min-width:120px;min-height:120px;padding:12px}.invoice-preview-qr svg{width:80px;height:80px}}@media (max-width: 480px){.invoice-preview-qr{min-width:100px;min-height:100px;padding:10px}.invoice-preview-qr svg{width:70px;height:70px}}@media (prefers-reduced-motion: reduce){.invoice-a4-container,.export-btn,.invoice-table-elegant tr:hover td{transition:none}.fade-in,.slide-in{animation:none}.invoice-preview-qr svg{transition:none}.invoice-preview-qr svg:hover{transform:none;box-shadow:0 4px 16px #cfdef34d}}@media (prefers-contrast: high){.invoice-a4-container{border:2px solid #000000}.invoice-table-clean th,.invoice-table-bordered th,.invoice-table-striped th,.invoice-table-elegant th{background:#000;color:#fff}.invoice-summary-row{border-bottom:2px solid #000000}.invoice-preview-qr{border:2px solid #000000;background:#fff}.invoice-preview-qr svg{border:1px solid #000000;background:#fff}}.invoice-a4-container{will-change:transform;contain:layout style paint}.invoice-table{contain:layout style}.export-btn{will-change:transform}.invoice-content::-webkit-scrollbar{width:8px}.invoice-content::-webkit-scrollbar-track{background:#cfdef333;border-radius:4px}.invoice-content::-webkit-scrollbar-thumb{background:var(--main-color);border-radius:4px}.invoice-content::-webkit-scrollbar-thumb:hover{background:var(--accent-color)}:root{--main-color: #cfdef3;--accent-color: #e0eafc;--bg-color: rgba(207, 222, 243, .1);--border-color: rgba(207, 222, 243, .3);--text-color: #2d3748;--light-color: rgba(207, 222, 243, .2)}