:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;color:#e0e0e0;background-color:#1a1a1a}#root{min-height:100vh}*{box-sizing:border-box}.app{min-height:100vh;background:#1a1a1a}.app-header{background:#1e1e1e;color:#e8e8e8;padding:1.25rem 2rem;border-bottom:1px solid #2a2a2a;display:flex;justify-content:space-between;align-items:center}.app-header h1{margin:0;font-size:1.5rem;font-weight:500;letter-spacing:.5px}.header-actions{display:flex;gap:1rem;align-items:center}.nav-buttons{display:flex;gap:.5rem}.nav-buttons button{background:#2a2a2a;color:#a0a0a0;border:1px solid #3a3a3a;padding:.5rem 1.25rem;border-radius:4px;cursor:pointer;font-size:.95rem;transition:all .2s;font-weight:400}.nav-buttons button.active{background:#4a7bc8;color:#fff;border-color:#4a7bc8}.nav-buttons button:hover{background:#3a5a8a;color:#fff;border-color:#3a5a8a}.btn-demo-download{background:#2a2a2a;color:#e8e8e8;border:1px solid #3a3a3a;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:.9rem;transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;font-weight:400}.btn-demo-download:hover{background:#4a7bc8;border-color:#4a7bc8;color:#fff}.btn-logout{background:transparent;color:#888;border:1px solid #3a3a3a;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:.9rem;transition:all .2s}.btn-logout:hover{background:#252525;color:#e88;border-color:#4a3a3a}.app-content{padding:2rem;max-width:1600px;margin:0 auto}.data-view{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:1.5rem}.calculator-view{max-width:1200px;margin:0 auto}.column{display:flex;flex-direction:column}@media(max-width:768px){.app-header{flex-direction:column;gap:1rem}.data-view{grid-template-columns:1fr}.app-content{padding:1rem}}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#1a1a1a}.login-box{background:#1e1e1e;padding:2.5rem;border-radius:6px;border:1px solid #2a2a2a;width:100%;max-width:380px}.login-box h1{color:#e8e8e8;margin-bottom:.5rem;text-align:center;font-size:1.5rem;font-weight:500;letter-spacing:.5px}.login-box p{color:#888;margin-bottom:2rem;text-align:center;font-size:.9rem}.login-input{width:100%;padding:.7rem;border:1px solid #2a2a2a;border-radius:4px;font-size:.95rem;background:#252525;color:#e8e8e8;margin-bottom:1rem;transition:border-color .2s}.login-input:focus{outline:none;border-color:#4a7bc8}.login-button{width:100%;padding:.7rem;background:#4a7bc8;color:#fff;border:none;border-radius:4px;font-size:.95rem;font-weight:400;cursor:pointer;transition:background .2s}.login-button:hover{background:#5a8bd8}.error-message{color:#e88;background:#2a2020;padding:.65rem;border-radius:4px;margin-bottom:1rem;font-size:.85rem;border:1px solid #3a2a2a}.login-hint{margin-top:2rem;text-align:center;color:#666;font-size:.85rem}.customer-manager{background:#1e1e1e;border-radius:6px;padding:1.5rem;border:1px solid #2a2a2a}.header-buttons{display:flex;gap:.5rem}.btn-import{background:#2a2a2a;color:#e8e8e8;border:1px solid #3a3a3a;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:.9rem;font-weight:400;transition:all .2s}.btn-import:hover{background:#4a7bc8;border-color:#4a7bc8;color:#fff}.customer-form{display:flex;gap:.5rem;margin-bottom:1rem;padding:1rem;background:#252525;border-radius:4px;border:1px solid #2a2a2a}.input-field{flex:1;padding:.65rem;border:1px solid #2a2a2a;border-radius:4px;font-size:.95rem;background:#1e1e1e;color:#e8e8e8}.input-field:focus{outline:none;border-color:#4a7bc8}.btn-submit{background:#4a7bc8;color:#fff;border:none;padding:.5rem 1.5rem;border-radius:4px;cursor:pointer;font-size:.9rem;font-weight:400;transition:background .2s}.btn-submit:hover{background:#5a8bd8}.customer-list{display:flex;flex-direction:column;gap:.5rem}.customer-item{background:#252525;padding:.85rem 1rem;border-radius:4px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background .2s;border:1px solid transparent}.customer-item:hover{background:#2a2a2a}.customer-item.selected{border-color:#4a7bc8;background:#1e2a40}.customer-info{flex:1;color:#e8e8e8}.customer-name{font-weight:500;font-size:.95rem;margin-bottom:.25rem}.customer-stats{font-size:.85rem;color:#888}.btn-select{background:#2a2a2a;color:#e8e8e8;border:none;padding:.4rem .9rem;border-radius:4px;cursor:pointer;font-size:.85rem;transition:background .2s}.btn-select:hover{background:#333}.customer-actions{display:flex;gap:.5rem}.btn-export{background:transparent;color:#888;border:1px solid #3a3a3a;padding:.35rem .75rem;border-radius:4px;cursor:pointer;font-size:.85rem;transition:all .2s}.btn-export:hover{background:#4a7bc8;color:#fff;border-color:#4a7bc8}.btn-delete{background:transparent;color:#888;border:1px solid #3a3a3a;padding:.35rem .75rem;border-radius:4px;cursor:pointer;font-size:.85rem;transition:all .2s}.server-manager{background:#1e1e1e;border-radius:6px;padding:1.5rem;margin-top:1.5rem;border:1px solid #2a2a2a}.server-form{padding:1.25rem;background:#252525;border-radius:4px;margin-bottom:1.5rem;border:1px solid #2a2a2a}.server-list{display:flex;flex-direction:column;gap:.5rem}.server-item{background:#252525;padding:.85rem 1rem;border-radius:4px;cursor:pointer;transition:background .2s;border:1px solid transparent}.server-item:hover{background:#2a2a2a}.server-item.selected{border-color:#4a7bc8;background:#1e2a40}.server-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.server-name{color:#e8e8e8;font-weight:500;font-size:.95rem}.server-actions{display:flex;gap:.5rem}.btn-edit,.btn-select,.btn-delete{background:transparent;color:#888;border:1px solid #3a3a3a;padding:.35rem .75rem;border-radius:4px;cursor:pointer;font-size:.85rem;transition:all .2s}.btn-select:hover{background:#2a2a2a;color:#aaa}.server-details{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;font-size:.85rem}.select-customer-message{text-align:center;padding:2rem;color:#888;font-size:.95rem;background:#252525;border-radius:4px;border:1px dashed #3a3a3a}.disk-manager{background:#1e1e1e;border-radius:6px;padding:1.5rem;margin-top:1.5rem;border:1px solid #2a2a2a}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.section-header h2{margin:0;color:#e8e8e8;font-size:1.25rem;font-weight:500}.btn-add{background:#4a7bc8;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:.9rem;font-weight:400;transition:background .2s}.btn-add:hover{background:#5a8bd8}.disk-form{padding:1.25rem;background:#252525;border-radius:4px;margin-bottom:1.5rem;border:1px solid #2a2a2a}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}.form-group{display:flex;flex-direction:column}.form-group label{margin-bottom:.4rem;color:#b0b0b0;font-size:.85rem;font-weight:400}.form-group input,.form-group textarea{padding:.65rem;border:1px solid #2a2a2a;border-radius:4px;font-size:.95rem;background:#1e1e1e;color:#e8e8e8;font-family:inherit;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#4a7bc8}.form-group textarea{resize:vertical;min-height:80px}.form-actions{display:flex;gap:.5rem;margin-top:1rem}.form-actions button{padding:.65rem 1.25rem;border:none;border-radius:4px;cursor:pointer;font-weight:400;transition:background .2s;font-size:.95rem}.btn-primary{background:#4a7bc8;color:#fff}.btn-primary:hover{background:#5a8bd8}.btn-secondary{background:transparent;color:#888;border:1px solid #3a3a3a}.btn-secondary:hover{background:#252525;color:#aaa}.disk-list{display:flex;flex-direction:column;gap:.5rem}.disk-item{background:#252525;padding:.85rem 1rem;border-radius:4px;transition:background .2s;border:1px solid transparent}.disk-item:hover{background:#2a2a2a}.disk-item.system-disk{background:#1e2a40;border-color:#3a4a6a}.disk-item.system-disk:hover{background:#1e2a40}.disk-info{flex:1}.disk-main{display:flex;align-items:center;gap:.75rem;margin-bottom:.25rem}.calculation-prefix{color:#888;font-size:1.1rem;font-weight:500;min-width:1rem}.disk-size{color:#e8e8e8;font-weight:500;font-size:.95rem}.disk-letter{background:#2a2a2a;color:#7ba8e8;padding:.2rem .6rem;border-radius:4px;font-size:.85rem;font-weight:500;border:1px solid #3a3a3a;order:-1}.disk-total{margin-top:1rem;padding:.75rem 1rem;background:#1e2a40;border-radius:4px;border:1px solid #4a7bc8}.total-line{height:2px;background:#3a3a3a;margin-bottom:.75rem}.disk-total strong{color:#7ba8e8;font-size:1.05rem}.comment{color:#888;font-size:.85rem}.disk-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.disk-drive{color:#e8e8e8;font-weight:500;font-size:.95rem}.disk-actions{display:flex;gap:.5rem}.btn-edit,.btn-delete{background:transparent;color:#888;border:1px solid #3a3a3a;padding:.35rem .75rem;border-radius:4px;cursor:pointer;font-size:.85rem;transition:all .2s}.btn-edit:hover{background:#d88820;color:#fff;border-color:#d88820}.btn-delete:hover{background:#2a2a2a;color:#e88;border-color:#4a3a3a}.disk-details{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;font-size:.85rem}.detail-label{color:#888}.detail-value{color:#b0b0b0}.storage-summary{background:#252525;padding:1rem;border-radius:4px;margin-top:1.5rem;border:1px solid #2a2a2a}.storage-summary h3{margin:0 0 .75rem;color:#e8e8e8;font-size:1rem;font-weight:500}.summary-stats{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;font-size:.9rem}.summary-label{color:#888}.summary-value{color:#e8e8e8;font-weight:500}.empty-state{text-align:center;padding:2rem;color:#666;font-size:.9rem}.select-server-message{text-align:center;padding:2rem;color:#888;font-size:.95rem;background:#252525;border-radius:4px;border:1px dashed #3a3a3a}.calculator{background:#1e1e1e;border-radius:6px;padding:1.5rem;border:1px solid #2a2a2a}.customer-selector{background:#252525;padding:1.25rem;border-radius:4px;margin-bottom:1.5rem;border:1px solid #2a2a2a}.customer-selector label{display:block;font-weight:700;color:#e0e0e0;margin-bottom:.75rem;font-size:1rem}.customer-select{width:100%;padding:.65rem;border:1px solid #2a2a2a;border-radius:4px;font-size:.95rem;background:#1e1e1e;color:#e8e8e8;cursor:pointer;transition:border-color .2s}.customer-select:focus{outline:none;border-color:#4a7bc8}.customer-select:hover{border-color:#4a7bc8}.selected-customer-info{margin-top:1rem;padding:.75rem;background:#1e2a40;border-left:3px solid #4a7bc8;border-radius:4px;color:#e8e8e8}.selected-customer-info strong{color:#7ba8e8}.customer-count{color:#888;font-size:.9rem;font-weight:400}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}.stat-card{background:#252525;color:#e8e8e8;padding:1.25rem;border-radius:4px;text-align:center;border:1px solid #2a2a2a}.stat-card.highlight{background:#4a7bc8;border-color:#5a8bd8}.stat-label{font-size:.9rem;opacity:.9;margin-bottom:.5rem}.stat-value{font-size:2rem;font-weight:700}.calculation-section{margin-top:2rem}.calculation-section h3{color:#e0e0e0;margin-bottom:1rem}.calculation-results{display:flex;flex-direction:column;gap:1.5rem}.customer-calculation{background:#252525;padding:1.25rem;border-radius:4px;border:1px solid #2a2a2a}.customer-calculation h4{color:#e8e8e8;margin:0 0 1rem;font-size:1.1rem;font-weight:500}.server-calculations{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}.server-calc-item{background:#1e1e1e;padding:1rem;border-radius:4px;border:1px solid #2a2a2a}.server-calc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid #2a2a2a}.server-calc-header strong{color:#e8e8e8;font-size:.95rem}.server-storage{color:#888;font-size:.9rem}.license-breakdown{display:flex;flex-direction:column;gap:.5rem}.license-item{display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:center;padding:.5rem;background:#252525;border-radius:4px;font-size:.9rem}.license-name{color:#b0b0b0}.license-qty{color:#888;text-align:right}.license-price{color:#e8e8e8;font-weight:500;text-align:right;min-width:80px}.license-total{display:flex;justify-content:space-between;padding:.75rem .5rem .25rem;margin-top:.5rem;border-top:1px solid #3a3a3a;font-size:.95rem;color:#e8e8e8}.customer-total{display:flex;justify-content:space-between;padding:.75rem;background:#1e1e1e;border-radius:4px;margin-top:1rem;border:1px solid #4a7bc8}.customer-total strong{color:#e8e8e8}.customer-total .amount{color:#7ba8e8;font-size:1.1rem}.total-calculation{background:#252525;padding:1.25rem;border-radius:4px;border:2px solid #4a7bc8;margin-bottom:1.5rem}.total-calculation h4{color:#e8e8e8;margin:0 0 1rem;font-size:1.1rem;font-weight:500}.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.summary-item{display:flex;flex-direction:column;gap:.5rem;padding:1rem;background:#1e1e1e;border-radius:4px;border:1px solid #2a2a2a}.summary-item.highlight{background:#1e2a40;border-color:#4a7bc8}.summary-item span{color:#888;font-size:.85rem}.summary-item strong{color:#e8e8e8;font-size:1.2rem}.summary-item.highlight strong.amount{color:#7ba8e8;font-size:1.5rem}.setup-fee-section{background:#252525;padding:1.25rem;border-radius:4px;border:1px solid #2a2a2a;margin-top:1.5rem}.setup-fee-section h4{color:#e8e8e8;margin:0 0 1rem;font-size:1.1rem;font-weight:500}.setup-fee{background:#1e1e1e;padding:1rem;border-radius:4px;border:1px solid #2a2a2a}.setup-fee h4{color:#e8e8e8;margin:0 0 .75rem;font-size:1rem;font-weight:500}.setup-item{display:flex;justify-content:space-between;padding:.65rem;margin-bottom:.5rem;background:#1e1e1e;border-radius:4px;font-size:.9rem;border:1px solid #2a2a2a}.setup-item span{color:#b0b0b0}.setup-item .amount{color:#e8e8e8;font-weight:500}.setup-total{display:flex;justify-content:space-between;padding:.75rem .5rem;margin-top:.75rem;border-top:2px solid #3a3a3a;font-size:1rem}.setup-total strong{color:#e8e8e8}.setup-total .amount{color:#7ba8e8;font-size:1.2rem}.placeholder-box{background:#252525;border:1px dashed #3a3a3a;border-radius:4px;padding:2rem;text-align:center}.placeholder-text{font-size:1.1rem;color:#888;font-weight:400;margin-bottom:1rem}.placeholder-details{color:#b0b0b0;line-height:1.8;margin-bottom:2rem}.calculation-preview{background:#252525;padding:1.25rem;border-radius:4px;text-align:left;margin-top:1.25rem;border:1px solid #2a2a2a}.calculation-preview h4{color:#e0e0e0;margin-bottom:1rem}.calculation-preview ul{list-style:none;padding-left:0}.calculation-preview>ul>li{margin-bottom:.75rem;padding:.5rem;background:#1e1e1e;border-radius:4px;color:#e8e8e8}.calculation-preview ul ul{margin-top:.5rem;padding-left:1.5rem;list-style:disc}.calculation-preview ul ul li{margin-bottom:.25rem;background:transparent;padding:.25rem 0;color:#b0b0b0;font-size:.9rem}.no-data{color:gray;font-style:italic;text-align:center;padding:1rem}