body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{width:100vw;height:100vh}*{-webkit-overflow-scrolling:touch}@media(max-width:768px){body{user-select:none;-webkit-user-select:none}input,textarea,[contenteditable]{user-select:text;-webkit-user-select:text}}.azure-icon{display:flex;flex-direction:column;align-items:center;padding:8px;margin:5px;cursor:grab;border-radius:4px;transition:background-color .2s;min-width:80px}.azure-icon:hover{background-color:#f0f0f0}.azure-icon:active{cursor:grabbing}.icon-symbol{width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:4px;margin-bottom:5px}.icon-image{width:100%;height:100%;object-fit:contain}.icon-label{font-size:11px;text-align:center;color:#333;word-wrap:break-word;max-width:80px;line-height:1.2}@media(max-width:768px){.azure-icon{padding:6px;margin:3px;min-width:70px}.icon-symbol{width:45px;height:45px;margin-bottom:4px}.icon-label{font-size:10px;max-width:70px}}@media(max-width:480px){.azure-icon{padding:5px;margin:2px;min-width:60px}.icon-symbol{width:38px;height:38px;margin-bottom:3px}.icon-label{font-size:9px;max-width:60px;line-height:1.1}.azure-icon{min-height:65px}}@media(min-width:1920px){.azure-icon{padding:10px;min-width:100px}.icon-symbol{width:60px;height:60px}.icon-label{font-size:12px;max-width:100px}}.azure-icon.dragging{opacity:.5}.azure-icon-clone{display:flex;flex-direction:column;align-items:center;padding:8px;border-radius:4px;background-color:#0078d41a;border:2px dashed #0078D4;box-shadow:0 4px 12px #0000004d;transition:transform .1s ease}.azure-icon-clone .icon-symbol{width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:4px;margin-bottom:5px}.azure-icon-clone .icon-image{width:100%;height:100%;object-fit:contain}.azure-icon-clone .icon-label{font-size:11px;text-align:center;color:#0078d4;font-weight:700;word-wrap:break-word;max-width:80px;line-height:1.2}@media(hover:none)and (pointer:coarse){.azure-icon{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}.azure-icon:active{background-color:#0078d41a}}.mobile-menu-toggle{display:none;position:fixed;top:70px;left:10px;z-index:1001;background:#0078d4;color:#fff;border:none;border-radius:8px;padding:10px 15px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px #0078d44d;transition:all .3s;align-items:center;gap:8px}.mobile-menu-toggle:hover{background:#005a9e;transform:translateY(-2px);box-shadow:0 6px 16px #0078d466}.mobile-menu-toggle:active{transform:translateY(0)}.hamburger-icon{font-size:20px;line-height:1}.menu-text{font-size:14px}.mobile-overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:999;touch-action:none}.toolbar{width:250px;background-color:#f8f9fa;border-right:1px solid #dee2e6;padding:0;height:100vh;display:flex;flex-direction:column;overflow:hidden}.toolbar-header{display:flex;justify-content:space-between;align-items:center;padding:15px;background:linear-gradient(135deg,#0078d4,#005a9e);color:#fff;border-bottom:2px solid #005a9e;flex-shrink:0}.toolbar-title{margin:0;font-size:16px;font-weight:600;flex:1}.expand-all-btn{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:16px;transition:all .2s;display:flex;align-items:center;justify-content:center;width:32px;height:32px}.expand-all-btn:hover{background:#ffffff4d;border-color:#ffffff80}.category-tabs{display:none}.category-accordion{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#c1c1c1 #f1f1f1}.category-accordion::-webkit-scrollbar{width:8px}.category-accordion::-webkit-scrollbar-track{background:#f1f1f1}.category-accordion::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.category-accordion::-webkit-scrollbar-thumb:hover{background:#555}.category-section{border-bottom:1px solid #dee2e6}.category-header{width:100%;padding:12px 15px;background:#fff;border:none;border-left:3px solid transparent;text-align:left;cursor:pointer;font-size:13px;color:#333;transition:all .2s;display:flex;align-items:center;gap:10px;font-weight:500}.category-header:hover{background:#f8f9fa;border-left-color:#0078d4}.category-header.expanded{background:#e7f3ff;border-left-color:#0078d4;color:#0078d4;font-weight:600}.category-icon{font-size:10px;width:16px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.category-name{flex:1}.category-count{background:#6c757d;color:#fff;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;min-width:24px;text-align:center}.category-header.expanded .category-count{background:#0078d4}.category-content{background:#fff;animation:slideDown .3s ease-out;overflow:hidden}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:2000px}}.toolbar-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;padding:12px;background:#f8f9fa}.toolbar-icons::-webkit-scrollbar{display:none}@media(max-width:768px){.mobile-menu-toggle{display:flex}.mobile-overlay{display:block}.toolbar{position:fixed;top:0;left:-300px;width:280px;height:100vh;max-height:100vh;z-index:1000;transition:left .3s ease-in-out;box-shadow:4px 0 12px #0000004d;border-right:2px solid #dee2e6;border-bottom:none}.toolbar>*{position:relative;z-index:1001}.toolbar .azure-icon{position:relative;z-index:1002}.toolbar.mobile-open{left:0}.toolbar-header{padding:12px 15px}.toolbar-title{font-size:15px}.expand-all-btn{width:28px;height:28px;font-size:14px}.category-header{padding:10px 12px;font-size:12px}.category-count{font-size:10px;padding:2px 6px}.toolbar-icons{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px;padding:10px}}@media(max-width:480px){.toolbar{max-height:40vh}.toolbar-header{padding:10px 12px}.toolbar-title{font-size:14px}.expand-all-btn{width:26px;height:26px;font-size:13px}.category-header{padding:8px 10px;font-size:11px}.category-icon{font-size:9px;width:14px}.category-count{font-size:9px;padding:1px 5px;min-width:20px}.toolbar-icons{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:5px;padding:8px}}@media(min-width:1920px){.toolbar{width:300px}.toolbar-header{padding:18px 20px}.toolbar-title{font-size:18px}.expand-all-btn{width:36px;height:36px;font-size:18px}.category-header{padding:14px 18px;font-size:14px}.toolbar-icons{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;padding:15px}}@media(hover:none)and (pointer:coarse){.category-accordion{-webkit-overflow-scrolling:touch}.category-section,.toolbar-icons{pointer-events:auto}}.canvas-container{flex:1;position:relative;overflow:auto;background-color:#e9ecef;cursor:default;scroll-behavior:smooth}.canvas-container::-webkit-scrollbar{width:12px;height:12px}.canvas-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:6px}.canvas-container::-webkit-scrollbar-thumb{background:#0078d4;border-radius:6px;transition:background .2s}.canvas-container::-webkit-scrollbar-thumb:hover{background:#106ebe}.canvas-container::-webkit-scrollbar-corner{background:#f1f1f1}.canvas{position:relative;width:5000px;height:5000px;min-width:100%;min-height:100%;background-color:#fff;background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);background-size:20px 20px;cursor:default;touch-action:none;-webkit-touch-callout:none}.canvas:before{content:"📐 Canvas: 5000 × 5000 px";position:absolute;bottom:20px;right:20px;background:#0078d4e6;color:#fff;padding:8px 16px;border-radius:6px;font-size:12px;font-weight:600;pointer-events:none;z-index:1000;box-shadow:0 2px 8px #0003}.connections-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.canvas-item{position:absolute;display:flex;flex-direction:column;align-items:center;padding:10px;background-color:#fff;border:2px solid transparent;border-radius:8px;cursor:move;-webkit-user-select:none;user-select:none;z-index:2;box-shadow:0 2px 8px #0000001a;transition:box-shadow .2s,border-color .2s}.canvas-item:hover{box-shadow:0 4px 12px #00000026}.canvas-item.selected{border-color:#0078d4;box-shadow:0 4px 16px #0078d44d}.canvas-item.connecting{border-color:#7fba00;animation:pulse 1s infinite}@keyframes pulse{0%,to{box-shadow:0 0 #7fba0066}50%{box-shadow:0 0 0 10px #7fba0000}}.item-symbol{width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:4px;margin-bottom:8px;background-color:#f8f9fa;padding:8px}.item-image{width:100%;height:100%;object-fit:contain}.item-label{font-size:12px;text-align:center;color:#333;font-weight:500;max-width:100px;word-wrap:break-word;cursor:text;padding:2px 4px;border-radius:3px;transition:background-color .2s}.item-label:hover{background-color:#f0f0f0}.item-label-edit{font-size:12px;text-align:center;color:#333;font-weight:500;max-width:100px;padding:4px 8px;border:2px solid #0078D4;border-radius:4px;outline:none;background-color:#fff;box-shadow:0 2px 8px #0078d433;z-index:10}.delete-btn{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;background-color:#e74c3c;color:#fff;border:2px solid white;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;line-height:1;z-index:3;transition:transform .2s}.delete-btn:hover{transform:scale(1.1);background-color:#c0392b}.canvas-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#999;pointer-events:none}.canvas-placeholder p{margin:10px 0;font-size:18px}.canvas-hint{font-size:14px!important;color:#666}.connection-hint{position:absolute;top:20px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:600;box-shadow:0 4px 12px #667eea66;z-index:100;animation:bounce 2s infinite}@keyframes bounce{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-5px)}}.connecting-status{position:absolute;top:20px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#7fba00,#5a9000);color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:600;box-shadow:0 4px 12px #7fba0066;z-index:100;animation:pulse 1.5s infinite}.connection-line{cursor:pointer;transition:stroke-width .2s}.connection-line:hover{stroke-width:3}.connection-led{cursor:help;filter:drop-shadow(0 0 3px currentColor)}.led-valid{animation:led-blink-green 2s infinite}.led-warning{animation:led-blink-yellow 1.5s infinite}.led-invalid{animation:led-blink-red 1s infinite}@keyframes led-blink-green{0%,to{opacity:1;filter:drop-shadow(0 0 4px #28a745)}50%{opacity:.7;filter:drop-shadow(0 0 8px #28a745)}}@keyframes led-blink-yellow{0%,to{opacity:1;filter:drop-shadow(0 0 4px #ffc107)}50%{opacity:.7;filter:drop-shadow(0 0 8px #ffc107)}}@keyframes led-blink-red{0%,to{opacity:1;filter:drop-shadow(0 0 4px #dc3545)}50%{opacity:.6;filter:drop-shadow(0 0 8px #dc3545)}}.led-pulse{animation:pulse-ring 2s infinite}@keyframes pulse-ring{0%{r:6;opacity:.6}to{r:12;opacity:0}}@media(max-width:768px){.canvas-container{scrollbar-width:thin}.canvas-container::-webkit-scrollbar{width:8px;height:8px}.canvas{width:3000px;height:3000px;min-height:400px;background-size:15px 15px}.connections-svg{width:100%;height:100%}.canvas:before{content:"📐 3000 × 3000 px";font-size:10px;padding:6px 12px;bottom:10px;right:10px}.canvas-item{padding:8px}.item-symbol{width:50px;height:50px;padding:6px}.item-label{font-size:11px;max-width:90px}.canvas-item{min-width:80px;min-height:80px}}@media(max-width:480px){.canvas{width:2000px;height:2000px;min-height:300px;background-size:12px 12px}.connections-svg{width:100%;height:100%}.canvas:before{content:"📐 2000 × 2000 px";font-size:9px;padding:4px 10px}.canvas-item{padding:6px}.item-symbol{width:40px;height:40px;padding:5px;margin-bottom:6px}.item-label,.item-label-edit{font-size:10px;max-width:75px}.canvas-item{min-width:70px;min-height:70px}.connections-svg line{stroke-width:3px}.connections-svg marker path{stroke-width:1px}}@media(hover:none)and (pointer:coarse){.canvas{touch-action:none;-webkit-user-select:none;user-select:none}.canvas-item{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.canvas-item:active{cursor:grabbing;box-shadow:0 6px 20px #0078d466;transform:scale(1.05);transition:transform .1s ease}}@media(max-width:768px)and (orientation:landscape){.canvas{min-height:250px}.main-content>.toolbar{max-height:50vh}.main-content>.cost-summary{max-height:40vh}}@media(min-width:1920px){.canvas-item{padding:12px}.item-symbol{width:70px;height:70px;padding:10px}.item-label{font-size:13px;max-width:120px}}.control-panel{background-color:#f8f9fa;border-bottom:2px solid #dee2e6;padding:15px 20px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 4px #0000001a}.app-title{margin:0;font-size:24px;color:#0078d4;font-weight:600}.control-buttons{display:flex;gap:10px}.control-btn{padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s;box-shadow:0 2px 4px #0000001a}.control-btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.control-btn:active{transform:translateY(0)}.save-btn{background-color:#0078d4;color:#fff}.save-btn:hover{background-color:#005a9e}.load-btn{background-color:#7fba00;color:#fff}.load-btn:hover{background-color:#6a9a00}.validate-btn{background-color:#28a745;color:#fff;font-weight:600}.validate-btn:hover{background-color:#218838;transform:translateY(-2px);box-shadow:0 4px 12px #28a7454d}.export-btn{background-color:#00bcf2;color:#fff}.export-btn:hover{background-color:#009bd1}.export-png-btn{background-color:#8e44ad;color:#fff}.export-png-btn:hover{background-color:#7d3c98}.export-pdf-btn{background-color:#e67e22;color:#fff}.export-pdf-btn:hover{background-color:#d35400}.terraform-btn{background-color:#623ce4;color:#fff}.terraform-btn:hover{background-color:#5231c7}.arm-btn{background-color:#0089d6;color:#fff}.arm-btn:hover{background-color:#006fb5}.cost-btn{background-color:#16a34a;color:#fff}.cost-btn:hover{background-color:#15803d}.clear-btn{background-color:#e74c3c;color:#fff}.clear-btn:hover{background-color:#c0392b}.help-text{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#666}.help-text p{margin:0}@media(max-width:768px){.control-panel{flex-direction:column;gap:12px;padding:12px 15px;align-items:stretch}.app-title{font-size:20px;text-align:center}.control-buttons{flex-wrap:wrap;justify-content:center;gap:8px}.control-btn{padding:8px 16px;font-size:13px;flex:1;min-width:90px}}@media(max-width:480px){.control-panel{padding:10px 12px;gap:10px}.app-title{font-size:18px}.control-buttons{gap:6px}.control-btn{padding:7px 12px;font-size:12px;min-width:80px}.control-btn{flex:1 1 calc(50% - 3px)}}@media(min-width:1920px){.control-panel{padding:18px 30px}.app-title{font-size:28px}.control-btn{padding:12px 24px;font-size:15px}}.help-overlay{position:fixed;top:70px;right:20px;background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;padding:20px;max-width:400px;z-index:1000;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}.help-button{position:fixed;top:70px;right:20px;background:#0078d4;color:#fff;border:none;border-radius:8px;padding:10px 20px;cursor:pointer;font-size:14px;font-weight:600;box-shadow:0 2px 8px #0078d44d;z-index:1000;transition:background .2s}.help-button:hover{background:#005a9e}.help-content{position:relative}.close-help{position:absolute;top:-10px;right:-10px;background:#e74c3c;color:#fff;border:none;border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;transition:background .2s}.close-help:hover{background:#c0392b}.help-content h3{margin:0 0 20px;color:#0078d4;font-size:18px}.help-section{margin-bottom:20px}.help-section h4{margin:0 0 10px;color:#333;font-size:15px}.help-section ol,.help-section ul{margin:0;padding-left:20px}.help-section li{margin-bottom:8px;font-size:13px;color:#555;line-height:1.5}.help-section li strong{color:#0078d4}.help-tip{margin-top:10px;padding:10px;background:#fff3cd;border-left:4px solid #ffc107;border-radius:4px;font-size:13px;color:#856404}.help-tip strong{color:#856404}.app-footer{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:12px 20px;text-align:center;box-shadow:0 -2px 10px #0000001a;position:relative;z-index:1;flex-shrink:0}.footer-content{display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;flex-wrap:wrap}.footer-copyright{color:#ffffffe6}.footer-divider{color:#fff9;font-weight:300}.footer-author{color:#ffffffe6}.footer-author strong{color:#fff;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.2)}.footer-suggestions{color:#ffffffe6}.footer-email{color:gold;text-decoration:none;font-weight:500;transition:color .2s ease}.footer-email:hover{color:#fff;text-decoration:underline}.footer-version{color:#ffffffbf;font-size:12px;font-weight:500;background:#ffffff26;padding:2px 8px;border-radius:10px}@media(max-width:600px){.footer-content{flex-direction:column;gap:5px}.footer-divider{display:none}}.cost-summary{background:#fff;border:1px solid #dee2e6;border-radius:8px;padding:15px;margin:10px 0;box-shadow:0 2px 4px #0000001a}.cost-summary.empty{text-align:center;padding:30px;color:#6c757d}.cost-icon{font-size:48px;margin-bottom:10px}.cost-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid #0078D4;flex-wrap:wrap;gap:10px}.cost-header h3{margin:0;font-size:18px;color:#333}.cost-selectors{display:flex;gap:8px}.region-selector,.currency-selector{padding:5px 10px;border:1px solid #dee2e6;border-radius:4px;background:#fff;font-size:12px;cursor:pointer;transition:all .2s}.region-selector:hover,.currency-selector:hover{border-color:#0078d4}.region-selector:focus,.currency-selector:focus{outline:none;border-color:#0078d4;box-shadow:0 0 0 2px #0078d41a}.cost-region{font-size:12px;color:#6c757d;background:#f8f9fa;padding:3px 8px;border-radius:4px}.cost-total{display:flex;gap:20px;margin-bottom:15px}.cost-monthly,.cost-yearly{flex:1;padding:15px;background:#f8f9fa;border-radius:6px;text-align:center}.cost-label{display:block;font-size:12px;color:#6c757d;margin-bottom:5px;text-transform:uppercase;font-weight:600}.cost-value{display:block;font-size:24px;font-weight:700;color:#333;margin-bottom:5px}.cost-badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;text-transform:uppercase}.cost-badge.low{background:#d4edda;color:#155724}.cost-badge.medium{background:#fff3cd;color:#856404}.cost-badge.high{background:#f8d7da;color:#721c24}.cost-actions{margin:10px 0}.cost-toggle-btn{width:100%;padding:10px;background:#f8f9fa;border:1px solid #dee2e6;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;text-align:left;transition:all .2s;color:#333}.cost-toggle-btn:hover{background:#e9ecef;border-color:#0078d4}.cost-toggle-btn.optimization-btn{background:#fff3cd;border-color:#ffc107;color:#856404}.cost-toggle-btn.optimization-btn:hover{background:#ffe69c}.cost-breakdown{margin-top:10px;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.cost-table{width:100%;border-collapse:collapse;margin:10px 0;font-size:13px}.cost-table thead{background:#f8f9fa}.cost-table th{padding:8px;text-align:left;font-weight:600;color:#495057;border-bottom:2px solid #dee2e6}.cost-table td{padding:8px;border-bottom:1px solid #dee2e6}.cost-table tbody tr:hover{background:#f8f9fa}.service-name{font-weight:500;color:#333}.service-type{color:#6c757d;font-size:12px}.service-cost{font-weight:600;color:#0078d4;text-align:right}.cost-table tfoot{background:#e9ecef}.cost-table tfoot td{padding:10px 8px;border-top:2px solid #0078D4}.total-cost{text-align:right;color:#0078d4;font-size:16px}.cost-details-note{margin-top:10px;padding:10px;background:#e7f3ff;border-left:3px solid #0078D4;border-radius:4px}.cost-details-note small{font-size:12px;color:#495057;line-height:1.5}.cost-optimizations{margin-top:10px;animation:slideDown .3s ease-out}.optimization-card{background:#fff3cd;border:1px solid #ffc107;border-radius:6px;padding:12px;margin-bottom:10px}.optimization-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.optimization-service{font-weight:600;color:#856404;font-size:14px}.optimization-savings{background:#28a745;color:#fff;padding:3px 8px;border-radius:4px;font-size:12px;font-weight:600}.optimization-suggestion{margin:0;font-size:13px;color:#856404;line-height:1.5}.cost-footer{margin-top:15px;padding-top:10px;border-top:1px solid #dee2e6;text-align:center}.cost-footer small{font-size:11px;color:#6c757d}@media(max-width:768px){.cost-total{flex-direction:column;gap:10px}.cost-table{font-size:12px}.cost-table th,.cost-table td{padding:6px}}@media(max-width:768px){.cost-summary{width:100%;max-height:30vh;overflow-y:auto;padding:12px;margin:0;border-radius:0}.cost-header{flex-direction:column;align-items:flex-start;gap:8px}.cost-header h3{font-size:16px}.cost-selectors{width:100%;justify-content:space-between}.region-selector,.currency-selector{flex:1;font-size:11px;padding:4px 8px}.cost-total{flex-direction:column;gap:10px}.cost-value{font-size:20px}.cost-table{font-size:12px}.cost-table th,.cost-table td{padding:6px 4px}.export-pdf-btn{padding:8px 16px;font-size:13px}}@media(max-width:480px){.cost-summary{max-height:25vh;padding:10px}.cost-summary.empty{padding:20px}.cost-icon{font-size:36px}.cost-header h3{font-size:15px}.region-selector,.currency-selector{font-size:10px;padding:3px 6px}.cost-value{font-size:18px}.cost-label{font-size:11px}.cost-badge{font-size:10px;padding:2px 8px}.cost-table{font-size:11px}.cost-table th,.cost-table td{padding:5px 3px}.export-pdf-btn{padding:7px 12px;font-size:12px}.cost-toggle-btn{padding:8px;font-size:13px}}@media(max-width:768px)and (orientation:landscape){.cost-summary{max-height:40vh}}@media(min-width:1920px){.cost-summary{width:380px;padding:18px}.cost-header h3{font-size:20px}.cost-value{font-size:28px}.cost-table{font-size:14px}.cost-table th,.cost-table td{padding:10px}}.validation-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-in}.validation-panel{background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;max-width:900px;width:90%;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.validation-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px 30px;display:flex;justify-content:space-between;align-items:center}.validation-header h2{margin:0;font-size:24px;font-weight:600}.close-btn{background:#fff3;border:none;color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;transition:background .2s}.close-btn:hover{background:#ffffff4d}.validation-score-card{display:flex;align-items:center;gap:30px;padding:30px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-bottom:2px solid #dee2e6}.score-circle{width:120px;height:120px;border-radius:50%;border:6px solid;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;box-shadow:0 4px 15px #0000001a}.score-value{font-size:36px;font-weight:700;line-height:1}.score-grade{font-size:18px;font-weight:600;color:#6c757d;margin-top:4px}.score-details{flex:1}.score-details h3{margin:0 0 15px;font-size:22px;color:#212529}.score-stats{display:flex;gap:20px;flex-wrap:wrap}.stat{padding:8px 16px;background:#fff;border-radius:20px;font-size:14px;font-weight:500;box-shadow:0 2px 8px #00000014}.stat.error{background:#ffebee;color:#c62828}.stat.warning{background:#fff3e0;color:#ef6c00}.stat.info{background:#e3f2fd;color:#1565c0}.validation-tabs{display:flex;background:#f8f9fa;border-bottom:2px solid #dee2e6;padding:0 20px}.tab{background:none;border:none;padding:15px 25px;cursor:pointer;font-size:15px;font-weight:500;color:#6c757d;border-bottom:3px solid transparent;transition:all .2s;position:relative}.tab:hover{color:#495057;background:#00000005}.tab.active{color:#667eea;border-bottom-color:#667eea;background:#fff}.validation-content{flex:1;overflow-y:auto;padding:30px}.summary-tab,.errors-tab,.warnings-tab,.recommendations-tab{animation:fadeIn .3s ease-in}.summary-tab h3{margin:0 0 20px;font-size:20px;color:#212529}.success-message,.error-message{text-align:center;padding:30px;border-radius:12px}.success-message{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);border:2px solid #81c784}.error-message{background:linear-gradient(135deg,#ffebee,#ffcdd2);border:2px solid #e57373}.success-icon,.error-icon{font-size:64px;margin-bottom:15px}.success-message h4,.error-message h4{margin:0 0 10px;font-size:24px;color:#212529}.success-message p,.error-message p{margin:10px 0;font-size:16px;color:#495057}.warning-note{margin-top:20px!important;padding:15px;background:#fff3e0;border-left:4px solid #ff9800;border-radius:4px;text-align:left}.issue-list{text-align:left;margin:20px auto;max-width:600px;list-style:none;padding:0}.issue-list li{padding:12px;background:#fff;margin-bottom:10px;border-radius:8px;border-left:4px solid #dc3545;font-size:14px}.issues-list{display:flex;flex-direction:column;gap:15px}.issue-card{background:#fff;border:2px solid;border-radius:12px;padding:20px;transition:transform .2s,box-shadow .2s}.issue-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0000001a}.issue-card.error{border-color:#dc3545;background:#fff5f5}.issue-card.warning{border-color:#ffc107;background:#fffef5}.issue-card.recommendation{border-color:#17a2b8;background:#f0f9ff}.issue-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.issue-icon{font-size:24px}.issue-message{margin:10px 0;font-size:15px;color:#495057;line-height:1.6}.invalid-connection-details{margin:15px 0;padding:15px;background:#ffe5e5;border:1px solid #ff6b6b;border-radius:8px}.connection-flow{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-weight:600}.connection-service{padding:6px 12px;background:#fff;border:2px solid #0078D4;border-radius:6px;font-size:13px;color:#0078d4}.connection-service.error{border-color:#dc3545;color:#dc3545;background:#fff0f0}.connection-arrow{font-size:20px;color:#dc3545;font-weight:700}.connection-reason{margin:10px 0 0;padding:10px;background:#fff;border-left:3px solid #dc3545;font-size:13px;line-height:1.5}.connection-reason strong{color:#dc3545;display:block;margin-bottom:5px}.issue-meta{display:flex;gap:15px;margin-top:12px;flex-wrap:wrap}.issue-type,.issue-category,.issue-missing{font-size:12px;padding:4px 12px;background:#0000000d;border-radius:12px;text-transform:capitalize;color:#6c757d;font-weight:500}.issue-missing{background:#fff3cd;color:#856404}.no-issues{text-align:center;padding:60px 20px}.no-issues-icon{font-size:80px;margin-bottom:20px}.no-issues p{font-size:18px;color:#6c757d}.validation-footer{padding:20px 30px;background:#f8f9fa;border-top:2px solid #dee2e6;display:flex;justify-content:flex-end;gap:15px}.validation-footer button{padding:12px 30px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.btn-secondary{background:#6c757d;color:#fff}.btn-secondary:hover{background:#5a6268}.btn-success{background:linear-gradient(135deg,#28a745,#20c997);color:#fff}.btn-success:hover{transform:translateY(-2px);box-shadow:0 4px 15px #28a74566}.btn-danger{background:#dc3545;color:#fff;opacity:.6;cursor:not-allowed}@media(max-width:768px){.validation-panel{width:95%;max-height:90vh}.validation-score-card{flex-direction:column;text-align:center;gap:20px}.validation-tabs{overflow-x:auto;padding:0 10px}.tab{padding:12px 15px;font-size:13px;white-space:nowrap}.validation-content{padding:20px}.score-stats{justify-content:center}}@media(max-width:480px){.validation-header h2{font-size:18px}.score-circle{width:100px;height:100px}.score-value{font-size:28px}.validation-footer{flex-direction:column}.validation-footer button{width:100%}}*{box-sizing:border-box;margin:0;padding:0}.app{display:flex;flex-direction:column;height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}.main-content{display:flex;flex:1;overflow:hidden;position:relative}.main-content>.cost-summary{width:320px;max-width:320px;min-width:280px;overflow-y:auto;flex-shrink:0;border-left:2px solid #dee2e6;border-radius:0;margin:0}@media(max-width:768px){.main-content>.cost-summary{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:100%;min-width:100%;border-left:none;border-top:2px solid #dee2e6;max-height:30vh;z-index:500;border-radius:0}.canvas{flex:1;min-height:calc(100vh - 200px)}}@media(max-width:480px){.app{font-size:14px}.main-content>.cost-summary{max-height:25vh}.canvas{min-height:calc(100vh - 220px)}}@media(min-width:1920px){.main-content>.toolbar{width:300px}.main-content>.cost-summary{width:380px;max-width:380px}}