*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.ato-app{min-height:100vh;background:#fafafa}.header{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;padding:2rem;text-align:center}.header h1{font-size:3rem;font-weight:700;letter-spacing:.5em;margin-bottom:.5rem}.tagline{font-size:1rem;opacity:.8;letter-spacing:.2em}.main{max-width:800px;margin:0 auto;padding:2rem}.tabs{display:flex;gap:.5rem;margin-bottom:2rem}.tabs button{flex:1;padding:.8rem;border:2px solid #1a1a2e;background:#fff;color:#1a1a2e;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;border-radius:8px}.tabs button.active{background:#1a1a2e;color:#fff}.tabs button:hover:not(.active){background:#f0f0f0}.config-panel{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 2px 8px #0000000d}.config-panel h2{font-size:1.5rem;margin-bottom:1.5rem;color:#1a1a2e}.config-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.config-row label{font-size:1rem;color:#333;font-weight:500}.config-row input[type=number]{width:100px;padding:.5rem;border:1px solid #ddd;border-radius:6px;font-size:1rem;text-align:center}.config-row input[type=range]{flex:1;margin:0 1rem}.value{font-size:.9rem;color:#666;min-width:80px;text-align:right}.dimensions{text-align:center;font-size:1.2rem;color:#1a1a2e;font-weight:600;margin:2rem 0;padding:1rem;background:#f5f5f5;border-radius:8px}.calculation{margin:2rem 0;padding:1.5rem;background:#f0f8ff;border-radius:8px;border:1px solid #d0e8ff}.calculation h3{font-size:1.1rem;margin-bottom:1rem;color:#1a1a2e}.grid-layout p{margin:.5rem 0;font-size:.95rem}.grid-layout .total{margin-top:1rem;font-weight:600;color:#1a1a2e}.preview-custom{margin:2rem 0;display:flex;justify-content:center}.grid-visual{display:flex;border:2px solid #333;background:#ddd;padding:2px;gap:2px}.grid-column{display:flex;flex-direction:column;gap:2px}.grid-cell{background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#fff;font-weight:600}.btn-primary{width:100%;padding:1rem;background:#1a1a2e;color:#fff;border:none;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary:hover:not(:disabled){background:#16213e;transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.error{margin-top:1rem;padding:1rem;background:#fee;border:1px solid #fcc;border-radius:8px;color:#c33;text-align:center}.footer{text-align:center;padding:2rem;color:#999;font-size:.85rem;margin-top:2rem}@media (max-width: 600px){.header h1{font-size:2rem;letter-spacing:.3em}.main{padding:1rem}.config-panel{padding:1.5rem}.tabs{flex-direction:column}.tabs button{padding:1rem}}