:root{--primary-blue: #2563eb;--primary-dark: #1d4ed8;--primary-light: #3b82f6;--primary-gradient: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);--secondary-green: #10b981;--secondary-green-dark: #059669;--success: #22c55e;--warning: #f59e0b;--error: #ef4444;--bg-body: #f0f4f8;--bg-light: #f8fafc;--bg-white: #ffffff;--bg-card: rgba(255, 255, 255, 0.9);--text-dark: #1e293b;--text-body: #334155;--text-muted: #64748b;--text-light: #94a3b8;--border: #e2e8f0;--border-light: #f1f5f9;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);--shadow-glow: 0 0 40px rgba(37, 99, 235, 0.15);--space-xs: 0.25rem;--space-sm: 0.5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);font-size:16px;line-height:1.6;color:var(--text-body);background:var(--bg-body);min-height:100vh;position:relative;overflow-x:hidden}.bg-decoration{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}.bg-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;animation:float 20s ease-in-out infinite}.bg-blob-1{width:600px;height:600px;background:linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(16, 185, 129, 0.15));top:-200px;right:-100px;animation-delay:0s}.bg-blob-2{width:500px;height:500px;background:linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(37, 99, 235, 0.1));bottom:-150px;left:-100px;animation-delay:-7s}.bg-blob-3{width:400px;height:400px;background:linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(245, 158, 11, 0.1));top:50%;left:50%;transform:translate(-50%, -50%);animation-delay:-14s}@keyframes float{0%,100%{transform:translate(0, 0) scale(1)}33%{transform:translate(30px, -30px) scale(1.05)}66%{transform:translate(-20px, 20px) scale(0.95)}}.container{max-width:900px;margin:0 auto;padding:var(--space-lg);position:relative;z-index:1}@media(min-width: 768px){.container{padding:var(--space-2xl)}}.header{text-align:center;margin-bottom:var(--space-xl);padding:var(--space-xl) 0}.logo{display:flex;align-items:center;justify-content:center;gap:var(--space-md);margin-bottom:var(--space-md)}.logo-icon{width:56px;height:56px;background:var(--primary-gradient);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg),var(--shadow-glow)}.logo-icon svg{width:32px;height:32px;color:#fff}.logo h1{font-size:clamp(1.75rem,5vw,2.5rem);font-weight:800;color:var(--text-dark);letter-spacing:-0.02em}.tagline{font-size:1.125rem;color:var(--text-muted);max-width:400px;margin:0 auto}.card{background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-xl);border:1px solid hsla(0,0%,100%,.8);box-shadow:var(--shadow-lg);padding:var(--space-xl);margin-bottom:var(--space-xl);transition:transform var(--transition-base),box-shadow var(--transition-base)}.card:hover{box-shadow:var(--shadow-xl)}@media(min-width: 768px){.card{padding:var(--space-2xl)}}.section-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-xl)}.section-icon{width:48px;height:48px;background:linear-gradient(135deg, var(--bg-light) 0%, var(--border-light) 100%);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}.section-icon svg{width:24px;height:24px;color:var(--primary-blue)}.section-icon.results-icon{background:var(--primary-gradient)}.section-icon.results-icon svg{color:#fff}.section-header h2{font-size:1.375rem;font-weight:700;color:var(--text-dark);letter-spacing:-0.01em}.quick-answer{background:linear-gradient(135deg, rgba(37, 99, 235, 0.03) 0%, rgba(16, 185, 129, 0.03) 100%);border:1px solid rgba(37,99,235,.1)}.quick-answer-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg);flex-wrap:wrap}.badge{display:inline-flex;align-items:center;padding:var(--space-xs) var(--space-md);background:var(--primary-gradient);color:#fff;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius-full)}.quick-answer h2{font-size:1.25rem;font-weight:700;color:var(--text-dark)}.highlight-text{font-size:1.125rem;margin-bottom:var(--space-lg)}.highlight-text mark{background:linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%);color:var(--primary-dark);padding:2px 8px;border-radius:var(--radius-sm);font-weight:600}.table-wrapper{overflow-x:auto;margin:0 calc(var(--space-lg)*-1);padding:0 var(--space-lg)}@media(min-width: 768px){.table-wrapper{margin:0;padding:0}}table{width:100%;border-collapse:collapse;font-size:.9375rem}table caption{font-size:.8125rem;color:var(--text-muted);text-align:left;margin-bottom:var(--space-md);font-weight:500}table th,table td{padding:var(--space-md);text-align:left;border-bottom:1px solid var(--border)}table th{font-weight:600;color:var(--text-dark);font-size:.8125rem;text-transform:uppercase;letter-spacing:.05em;background:var(--bg-light)}table tbody tr{transition:background var(--transition-fast)}table tbody tr:hover{background:var(--bg-light)}table tbody tr:last-child td{border-bottom:none}table td strong{color:var(--primary-blue);font-weight:600}.table-note{font-size:.8125rem;color:var(--text-muted);margin-top:var(--space-md)}.settings-grid{display:grid;grid-template-columns:1fr;gap:var(--space-xl)}@media(min-width: 640px){.settings-grid{grid-template-columns:repeat(2, 1fr)}}.form-group label{display:block;font-weight:600;font-size:.875rem;color:var(--text-dark);margin-bottom:var(--space-sm)}.form-group small{display:block;font-size:.75rem;color:var(--text-muted);margin-top:var(--space-sm)}.select-wrapper{position:relative}.select-wrapper select{width:100%;appearance:none;padding:var(--space-md) var(--space-xl) var(--space-md) var(--space-md);font-size:1rem;font-family:inherit;color:var(--text-dark);background:var(--bg-white);border:2px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.select-wrapper select:hover{border-color:var(--text-light)}.select-wrapper select:focus{outline:none;border-color:var(--primary-blue);box-shadow:0 0 0 4px rgba(37,99,235,.1)}.select-wrapper .select-arrow{position:absolute;right:var(--space-md);top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--text-muted);pointer-events:none;transition:transform var(--transition-fast)}.number-input-wrapper{display:flex;align-items:center;background:var(--bg-white);border:2px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:all var(--transition-fast)}.number-input-wrapper:focus-within{border-color:var(--primary-blue);box-shadow:0 0 0 4px rgba(37,99,235,.1)}.number-input-wrapper input{flex:1;width:100%;padding:var(--space-md);font-size:1rem;font-family:inherit;font-weight:600;color:var(--text-dark);text-align:center;border:none;background:rgba(0,0,0,0);-moz-appearance:textfield}.number-input-wrapper input::-webkit-outer-spin-button,.number-input-wrapper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number-input-wrapper input:focus{outline:none}.number-btn{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--bg-light);border:none;cursor:pointer;transition:all var(--transition-fast)}.number-btn svg{width:20px;height:20px;color:var(--text-muted);transition:color var(--transition-fast)}.number-btn:hover{background:var(--border)}.number-btn:hover svg{color:var(--primary-blue)}.number-btn:active{transform:scale(0.95)}.price-input-wrapper{display:flex;align-items:center;background:var(--bg-white);border:2px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:all var(--transition-fast)}.price-input-wrapper:focus-within{border-color:var(--primary-blue);box-shadow:0 0 0 4px rgba(37,99,235,.1)}.price-input-wrapper .currency-symbol{padding:var(--space-md);background:var(--bg-light);color:var(--text-muted);font-weight:600;border-right:1px solid var(--border)}.price-input-wrapper input{flex:1;padding:var(--space-md);font-size:1rem;font-family:inherit;font-weight:600;color:var(--text-dark);border:none;background:rgba(0,0,0,0);-moz-appearance:textfield}.price-input-wrapper input::-webkit-outer-spin-button,.price-input-wrapper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.price-input-wrapper input:focus{outline:none}.wall-card{background:var(--bg-light);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-lg);border:1px solid var(--border);position:relative;transition:all var(--transition-base);animation:slideIn .3s ease-out}.wall-card:hover{border-color:var(--text-light)}@keyframes slideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.wall-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-lg)}.wall-header h3{font-size:1rem;font-weight:600;color:var(--text-dark);display:flex;align-items:center;gap:var(--space-sm)}.wall-header h3 .wall-number{width:28px;height:28px;background:var(--primary-gradient);color:#fff;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:700}.delete-wall-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0);border:none;border-radius:var(--radius-md);cursor:pointer;color:var(--text-muted);transition:all var(--transition-fast)}.delete-wall-btn svg{width:20px;height:20px}.delete-wall-btn:hover{background:rgba(239,68,68,.1);color:var(--error)}.wall-dimensions{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin-bottom:var(--space-lg)}.dimension-input label{display:block;font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-xs)}.dimension-input .input-with-unit{display:flex;align-items:center;background:var(--bg-white);border:2px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:all var(--transition-fast)}.dimension-input .input-with-unit:focus-within{border-color:var(--primary-blue);box-shadow:0 0 0 4px rgba(37,99,235,.1)}.dimension-input .input-with-unit input{flex:1;padding:var(--space-sm) var(--space-md);font-size:1rem;font-family:inherit;font-weight:600;color:var(--text-dark);border:none;background:rgba(0,0,0,0);min-width:0;-moz-appearance:textfield}.dimension-input .input-with-unit input::-webkit-outer-spin-button,.dimension-input .input-with-unit input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.dimension-input .input-with-unit input:focus{outline:none}.dimension-input .input-with-unit .unit{padding:var(--space-sm) var(--space-md);background:var(--bg-light);color:var(--text-muted);font-size:.875rem;font-weight:500;border-left:1px solid var(--border)}.opening-toggle{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--bg-white);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:1px solid rgba(0,0,0,0)}.opening-toggle:hover{background:var(--border-light)}.opening-toggle input[type=checkbox]{position:relative;width:22px;height:22px;appearance:none;background:var(--bg-white);border:2px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}.opening-toggle input[type=checkbox]:checked{background:var(--primary-blue);border-color:var(--primary-blue)}.opening-toggle input[type=checkbox]:checked::after{content:"";position:absolute;top:3px;left:7px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.opening-toggle input[type=checkbox]:focus{outline:none;box-shadow:0 0 0 4px rgba(37,99,235,.1)}.opening-toggle span{font-size:.875rem;color:var(--text-body)}.opening-dimensions{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin-top:var(--space-md);padding:var(--space-md);background:rgba(37,99,235,.03);border-radius:var(--radius-md);border:1px dashed var(--border);animation:fadeIn .2s ease-out}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.add-wall-btn{width:100%;padding:var(--space-lg);display:flex;align-items:center;justify-content:center;gap:var(--space-sm);font-size:1rem;font-weight:600;font-family:inherit;color:var(--primary-blue);background:rgba(0,0,0,0);border:2px dashed var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast)}.add-wall-btn svg{width:24px;height:24px}.add-wall-btn:hover{background:rgba(37,99,235,.05);border-color:var(--primary-blue)}.add-wall-btn:active{transform:scale(0.98)}.results-section{background:linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);border:none;color:#fff}.results-section .section-icon{background:hsla(0,0%,100%,.2)}.results-section .section-icon svg{color:#fff}.results-section h2{color:#fff}.results-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--space-md)}@media(min-width: 640px){.results-grid{grid-template-columns:repeat(4, 1fr)}}.result-card{background:hsla(0,0%,100%,.1);backdrop-filter:blur(10px);border-radius:var(--radius-lg);padding:var(--space-lg);text-align:center;border:1px solid hsla(0,0%,100%,.15);transition:all var(--transition-fast)}.result-card:hover{background:hsla(0,0%,100%,.15);transform:translateY(-2px)}.result-card.highlight{background:rgba(16,185,129,.3);border-color:rgba(16,185,129,.5)}.result-card.total{background:hsla(0,0%,100%,.2);border-color:hsla(0,0%,100%,.3)}.result-card.total .result-value{font-size:1.75rem}.result-icon{width:40px;height:40px;margin:0 auto var(--space-md);background:hsla(0,0%,100%,.15);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}.result-icon svg{width:22px;height:22px;color:#fff}.result-content{display:flex;flex-direction:column}.result-label{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;opacity:.9;margin-bottom:var(--space-xs)}.result-value{font-size:1.5rem;font-weight:800;line-height:1.2;letter-spacing:-0.02em}.result-unit{font-size:.75rem;opacity:.8;margin-top:var(--space-xs)}.affiliate-grid{display:grid;grid-template-columns:1fr;gap:var(--space-md)}@media(min-width: 768px){.affiliate-grid{grid-template-columns:repeat(3, 1fr)}}.affiliate-card{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-lg);background:var(--bg-light);border-radius:var(--radius-lg);text-decoration:none;color:inherit;border:1px solid var(--border);transition:all var(--transition-base)}.affiliate-card:hover{background:var(--bg-white);border-color:var(--primary-blue);box-shadow:var(--shadow-md);transform:translateY(-2px)}.affiliate-card:hover .affiliate-cta{color:var(--primary-dark)}.affiliate-icon{width:48px;height:48px;background:linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}.affiliate-icon svg{width:24px;height:24px;color:var(--primary-blue)}.affiliate-content{flex:1;min-width:0}.affiliate-content h3{font-size:.9375rem;font-weight:600;color:var(--text-dark);margin-bottom:var(--space-xs)}.affiliate-content p{font-size:.8125rem;color:var(--text-muted);margin-bottom:var(--space-sm)}.affiliate-cta{font-size:.8125rem;font-weight:600;color:var(--primary-blue);transition:color var(--transition-fast)}.ad-slot{display:none}.ad-placeholder{display:none;opacity:.5}.faq-list{display:flex;flex-direction:column;gap:var(--space-md)}.faq-item{background:var(--bg-light);border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden;transition:all var(--transition-fast)}.faq-item:hover{border-color:var(--text-light)}.faq-item[open]{background:var(--bg-white);border-color:var(--primary-blue);box-shadow:var(--shadow-md)}.faq-item[open] summary{color:var(--primary-blue)}.faq-item[open] summary::after{transform:rotate(180deg)}.faq-item summary{padding:var(--space-lg);font-weight:600;font-size:1rem;color:var(--text-dark);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);transition:color var(--transition-fast)}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary::after{content:"";width:20px;height:20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-size:contain;flex-shrink:0;transition:transform var(--transition-fast)}.faq-item summary:focus{outline:none}.faq-item summary:focus-visible{outline:2px solid var(--primary-blue);outline-offset:-2px}.faq-answer{padding:0 var(--space-lg) var(--space-lg);color:var(--text-body);line-height:1.7}.faq-answer p{margin:0}.faq-answer strong{color:var(--text-dark)}.footer{text-align:center;padding:var(--space-2xl) var(--space-lg);color:var(--text-muted);font-size:.875rem}.footer p{margin-bottom:var(--space-sm)}.footer p:last-child{margin-bottom:0}.footer-note{font-size:.8125rem;color:var(--text-light)}@media(max-width: 480px){.results-grid{grid-template-columns:1fr}.result-card{flex-direction:row;text-align:left}.result-card .result-icon{margin:0;margin-right:var(--space-md)}.settings-grid{gap:var(--space-lg)}}@media print{.bg-decoration,.ad-slot,.affiliate-section,.add-wall-btn,.delete-wall-btn{display:none}.card{box-shadow:none;border:1px solid #ddd}.results-section{background:#f0f4f8;color:#1e293b}.results-section .result-card{background:#fff;border:1px solid #ddd}}