:root{--aws-blue: #0073bb;--aws-dark-blue: #232f3e;--aws-light-blue: #4a90e2;--aws-orange: #ff9900;--aws-gray: #f2f3f3;--aws-dark-gray: #687078;--aws-light-gray: #fafafa;--aws-border: #d5dbdb;--aws-text: #232f3e;--aws-text-light: #687078;--aws-success: #1b660f;--aws-warning: #ff9900;--aws-error: #d13212;--aws-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);--aws-shadow-hover: 0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);--border-radius: 4px;--font-family: 'Amazon Ember','Helvetica Neue',Roboto,Arial,sans-serif} *{margin: 0;padding: 0;box-sizing: border-box} body{font-family: var(--font-family);line-height: 1.6;color: var(--aws-text);background-color: var(--aws-light-gray);font-size: 14px} .aws-header{background-color: var(--aws-dark-blue);color: white;padding: 12px 0;border-bottom: 1px solid #3c4043} .aws-header .container{max-width: 1200px;margin: 0 auto;padding: 0 20px;display: flex;align-items: center;justify-content: space-between} .aws-header .logo{display: flex;align-items: center;gap: 12px} .aws-header .logo .service-icon{width: 32px;height: 32px;border-radius: 4px} .aws-header h1{font-size: 18px;font-weight: 400;color: white} .container{max-width: 1200px;margin: 0 auto;padding: 20px} .page-header{background: white;border: 1px solid var(--aws-border);border-radius: var(--border-radius);padding: 24px;margin-bottom: 20px;box-shadow: var(--aws-shadow)} .page-header h1{font-size: 24px;font-weight: 400;color: var(--aws-text);margin-bottom: 8px} .page-header p{color: var(--aws-text-light);font-size: 14px;line-height: 1.5} main{display: grid;grid-template-columns: 1fr 1fr;gap: 20px;align-items: start} .config-card{order: 1} .results-card{order: 2} .card{background: white;border: 1px solid var(--aws-border);border-radius: var(--border-radius);box-shadow: var(--aws-shadow);overflow: hidden} .card-header{background: var(--aws-gray);border-bottom: 1px solid var(--aws-border);padding: 16px 24px;display: flex;justify-content: space-between;align-items: center} .card-header h2{font-size: 16px;font-weight: 600;color: var(--aws-text);margin: 0} .card-header .btn{margin: 0;padding: 8px 16px;font-size: 14px} .card-header .btn.success{background-color: #1d8102;border-color: #1d8102} .card-header .btn.error{background-color: #d13212;border-color: #d13212} .card-body{padding: 24px} .form-section{margin-bottom: 24px} .form-section:last-child{margin-bottom: 0} .input-group{margin-bottom: 20px} .input-group label{display: block;font-weight: 600;color: var(--aws-text);margin-bottom: 6px;font-size: 14px} .input-group input[type="text"],.input-group input[type="number"],.input-group select{width: 100%;padding: 8px 12px;border: 1px solid var(--aws-border);border-radius: var(--border-radius);font-size: 14px;color: var(--aws-text);background: white;transition: border-color 0.2s,box-shadow 0.2s} .input-group input:focus,.input-group select:focus{outline: none;border-color: var(--aws-blue);box-shadow: 0 0 0 2px rgba(0,115,187,0.2)} .input-group input:invalid{border-color: var(--aws-error)} .radio-group{display: flex;flex-direction: column;gap: 8px} .radio-label{display: flex;align-items: center;gap: 8px;cursor: pointer;padding: 8px;border-radius: var(--border-radius);transition: background-color 0.2s} .radio-label:hover{background-color: var(--aws-gray)} .radio-label input[type="radio"]{margin: 0} .help-text{font-size: 12px;color: var(--aws-text-light);margin-top: 4px;line-height: 1.4} .tooltip-container{position: relative;display: inline-block;margin-left: 6px} .tooltip-trigger{background: var(--aws-blue);color: white;border: none;border-radius: 50%;width: 18px;height: 18px;font-size: 12px;cursor: pointer;display: flex;align-items: center;justify-content: center} .tooltip-content{position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%);background: var(--aws-dark-blue);color: white;padding: 8px 12px;border-radius: var(--border-radius);font-size: 12px;white-space: nowrap;max-width: 250px;white-space: normal;z-index: 1000;opacity: 0;visibility: hidden;transition: opacity 0.2s,visibility 0.2s} .tooltip-trigger:hover + .tooltip-content,.tooltip-trigger:focus + .tooltip-content{opacity: 1;visibility: visible} .btn{display: inline-block;padding: 8px 16px;border: 1px solid transparent;border-radius: var(--border-radius);font-size: 14px;font-weight: 400;text-align: center;text-decoration: none;cursor: pointer;transition: all 0.2s;line-height: 1.4} .btn-primary{background-color: var(--aws-blue);border-color: var(--aws-blue);color: white} .btn-primary:hover{background-color: var(--aws-light-blue);border-color: var(--aws-light-blue);box-shadow: var(--aws-shadow-hover)} .btn-secondary{background-color: white;border-color: var(--aws-border);color: var(--aws-text)} .btn-secondary:hover{background-color: var(--aws-gray);border-color: var(--aws-dark-gray)} .results-section{background: white;border: 1px solid var(--aws-border);border-radius: var(--border-radius);box-shadow: var(--aws-shadow)} .results-header{background: var(--aws-gray);border-bottom: 1px solid var(--aws-border);padding: 16px 24px;display: flex;align-items: center;justify-content: space-between} .results-header h2{font-size: 16px;font-weight: 600;color: var(--aws-text);margin: 0} .results-body{padding: 24px} .config-summary{background: var(--aws-light-gray);border: 1px solid var(--aws-border);border-radius: var(--border-radius);padding: 16px;margin-bottom: 20px} .config-summary h3{font-size: 14px;font-weight: 600;color: var(--aws-text);margin-bottom: 12px} .config-summary ul{list-style: none;margin: 0;padding: 0} .config-summary li{font-size: 13px;color: var(--aws-text-light);margin-bottom: 4px;line-height: 1.4} .config-summary strong{color: var(--aws-text)} .licensing-summary{background: #e8f4fd;border: 1px solid var(--aws-blue);border-radius: var(--border-radius);padding: 16px;margin-bottom: 20px} .licensing-summary h3{font-size: 14px;font-weight: 600;color: var(--aws-text);margin-bottom: 12px;display: flex;align-items: center;gap: 8px} .licensing-summary h3::before{content: "🔑";font-size: 16px} .licensing-summary ul{list-style: none;margin: 0 0 12px 0;padding: 0} .licensing-summary li{font-size: 13px;color: var(--aws-text-light);margin-bottom: 4px;line-height: 1.4} .licensing-summary strong{color: var(--aws-text)} .licensing-note{font-size: 12px;color: var(--aws-blue);background: white;padding: 8px 12px;border-radius: var(--border-radius);border-left: 3px solid var(--aws-blue);margin: 0;font-weight: 500} .results-table{width: 100%;border-collapse: collapse;font-size: 14px;margin-bottom: 20px;table-layout: fixed} .results-table th{background: var(--aws-gray);border: 1px solid var(--aws-border);padding: 12px;text-align: left;font-weight: 600;color: var(--aws-text);font-size: 13px;white-space: nowrap} .results-table th:first-child{width: 50%} .results-table th:nth-child(2){width: 25%} .results-table th:nth-child(3){width: 25%} .results-table td{border: 1px solid var(--aws-border);padding: 12px;color: var(--aws-text)} .results-table .cost-value{text-align: right;font-weight: 600;color: var(--aws-text)} .results-table .total-row{background: var(--aws-light-gray);font-weight: 600} .results-table .final-total{background: #e8f4fd;border-top: 2px solid var(--aws-blue)} .results-table .section-header td{background: var(--aws-gray);border: 1px solid var(--aws-border);padding: 10px 12px;font-weight: 600;color: var(--aws-text);font-size: 13px;text-transform: uppercase;letter-spacing: 0.5px} .results-table .column-header th{background: var(--aws-gray);border: 1px solid var(--aws-border);padding: 12px;text-align: left;font-weight: 600;color: var(--aws-text);font-size: 13px;white-space: nowrap} .results-table .column-header th:first-child{width: 50%} .results-table .column-header th:nth-child(2){width: 25%} .results-table .column-header th:nth-child(3){width: 25%} .results-table .upfront-header th:first-child{width: 50%} .results-table .upfront-header th:nth-child(2){text-align: right;width: 50%} .results-table .section-spacer td{border: none;padding: 8px;background: transparent} .results-table .upfront-cost-row td{background: #fff9f0;border: 1px solid #ffe4b3} .results-table .upfront-total-row{background: #fff3d9;font-weight: 600;border-top: 2px solid var(--aws-orange)} .results-table .upfront-total-row td{border: 1px solid #ffe4b3} .calculation-details{background: var(--aws-light-gray);border: 1px solid var(--aws-border);border-radius: var(--border-radius);padding: 16px;margin-top: 20px} .calculation-details h4{font-size: 14px;font-weight: 600;color: var(--aws-text);margin-bottom: 12px} .calculation-details ul{list-style: none;margin: 0;padding: 0} .calculation-details li{font-size: 13px;color: var(--aws-text-light);margin-bottom: 4px;line-height: 1.4} .loading{display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 40px;color: var(--aws-text-light);text-align: center} .loading-spinner{width: 32px;height: 32px;border: 3px solid var(--aws-border);border-top: 3px solid var(--aws-blue);border-radius: 50%;animation: spin 1s linear infinite;margin-bottom: 16px} .loading-text{font-size: 16px;font-weight: 600;color: var(--aws-text);margin-bottom: 8px} .loading-details{font-size: 14px;color: var(--aws-text-light);margin-bottom: 4px} .loading-progress{font-size: 12px;color: var(--aws-dark-gray);font-style: italic} @keyframes spin{0%{transform: rotate(0deg)} 100%{transform: rotate(360deg)} } .results-placeholder{padding: 40px;text-align: center;color: var(--aws-text-light);font-style: italic} .error-message{color: var(--aws-error);font-size: 12px;margin-top: 4px;display: block} .input-group input[aria-invalid="true"]{border-color: var(--aws-error)} .disclaimer{background: #fdf2f2;border: 1px solid #f5c6cb;border-radius: var(--border-radius);padding: 16px;margin-top: 24px;font-size: 13px;line-height: 1.5} .disclaimer h4{color: var(--aws-error);font-size: 14px;font-weight: 600;margin-bottom: 8px} .disclaimer p{color: #721c24;margin-bottom: 8px} .disclaimer p:last-child{margin-bottom: 0} .disclaimer ul{color: #721c24;margin: 8px 0 0 20px;padding: 0} .disclaimer li{margin-bottom: 6px;line-height: 1.4} .disclaimer a{color: var(--aws-blue);text-decoration: none} .disclaimer a:hover{text-decoration: underline} .disclaimer strong{font-weight: 600} @media (max-width: 768px){main{grid-template-columns: 1fr;gap: 20px} .config-card{order: 1} .results-card{order: 2} .container{padding: 10px} .card-body{padding: 16px} .aws-header .container{flex-direction: column;gap: 10px;text-align: center} .results-table th:first-child{width: 40%} .results-table th:nth-child(2),.results-table th:nth-child(3){width: 30%} .results-table th,.results-table td{padding: 8px;font-size: 12px} } @media (prefers-reduced-motion: reduce){*{animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important} } button:focus,input:focus,select:focus{outline: 2px solid var(--aws-blue);outline-offset: 2px} @media (prefers-contrast: high){:root{--aws-border: #000;--aws-text: #000;--aws-text-light: #333} } .export-section{margin-top: 20px;padding-top: 20px;border-top: 1px solid var(--aws-border);text-align: center} .export-button{background-color: var(--aws-orange);color: white;border: none;padding: 12px 24px;font-size: 14px;font-weight: 600;border-radius: var(--border-radius);cursor: pointer;transition: all 0.2s ease;box-shadow: var(--aws-shadow);font-family: var(--font-family);display: inline-flex;align-items: center;gap: 8px} .export-button:hover:not(:disabled){background-color: #e88900;box-shadow: var(--aws-shadow-hover);transform: translateY(-1px)} .export-button:active:not(:disabled){transform: translateY(0);box-shadow: var(--aws-shadow)} .export-button:disabled{background-color: var(--aws-dark-gray);cursor: not-allowed;opacity: 0.6} .export-message{margin-top: 12px;padding: 8px 16px;border-radius: var(--border-radius);font-size: 13px;font-weight: 500} .export-message.success{background-color: #d4edda;color: var(--aws-success);border: 1px solid #c3e6cb} .export-message.error{background-color: #f8d7da;color: var(--aws-error);border: 1px solid #f5c6cb} @media (max-width: 768px){.export-button{width: 100%;justify-content: center} }