html,body{margin:0;padding:0;width:100%;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f5f5f5}#root{min-height:100vh;display:flex;flex-direction:column}*{box-sizing:border-box}.header-container{width:100%;height:65px;background-color:#0076ce;display:flex;justify-content:center;align-items:center;box-shadow:0 2px 5px #0003;position:relative;z-index:10002;transition:background-color .5s}body.lights-off-mode .header-container{background-color:transparent;box-shadow:none}.header-content{width:100%;max-width:1400px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;color:#fff}.header-left{display:flex;align-items:center;padding-left:15px}.logo{font-size:20px;font-weight:700;letter-spacing:1px;cursor:pointer;position:relative;z-index:10003;transition:color .3s;display:flex;align-items:center;justify-content:center}.eye-wrapper{display:inline-flex;justify-content:center;align-items:center;width:14px;height:20px;position:relative;margin:0 1px}.original-letter{transition:opacity .3s;opacity:1}.fantasy-eye{position:absolute;width:10px;height:10px;background-color:#fff;border-radius:50%;opacity:0;transform:scale(0);box-shadow:0 0 5px #fffc,0 0 10px #ffffff80;display:flex;justify-content:center;align-items:center;overflow:hidden;transition:all .5s ease-in-out}.pupil{width:4px;height:4px;background-color:#000;border-radius:50%;z-index:2;transition:transform .1s linear,width .5s ease,height .5s ease}.eyelid{position:absolute;top:-100%;left:-50%;width:200%;height:100%;background-color:#080808;z-index:3;transition:top .5s cubic-bezier(.68,-.55,.265,1.55),transform .5s ease}body.lights-off-mode .logo{color:transparent}body.lights-off-mode .original-letter{opacity:0}body.lights-off-mode .fantasy-eye{opacity:1;transform:scale(1.2);animation:random-blink 5s infinite}.nervous:not(.evil-active) .fantasy-eye{animation:scared-blink 2s infinite!important;width:11px;height:11px}.nervous:not(.evil-active) .pupil{animation:pupil-shiver .2s infinite}.evil-active .fantasy-eye{animation:none!important;background-color:#ffebee;box-shadow:0 0 10px red,0 0 15px red}.evil-active .left-eye .eyelid{top:-45%;transform:rotate(25deg)}.evil-active .right-eye .eyelid{top:-45%;transform:rotate(-25deg)}.evil-active .pupil{width:2px;height:6px;background-color:#200}@keyframes random-blink{0%,45%,50%,to{transform:scale(1.2) scaleY(1)}47%{transform:scale(1.2) scaleY(.1)}}@keyframes scared-blink{0%{transform:scale(1.3) scaleY(1)}5%{transform:scale(1.3) scaleY(.1)}10%{transform:scale(1.3) scaleY(1)}15%{transform:scale(1.3) scaleY(.1)}20%{transform:scale(1.3) scaleY(1)}40%{transform:scale(1.3) scaleY(1)}50%{transform:scale(1.3) scaleY(.6)}60%{transform:scale(1.3) scaleY(.6)}70%{transform:scale(1.3) scaleY(1.1)}75%{transform:scale(1.3) scaleY(.1)}80%,to{transform:scale(1.3) scaleY(1)}}@keyframes pupil-shiver{0%{margin-left:0;margin-top:0}25%{margin-left:.5px;margin-top:0}50%{margin-left:0;margin-top:.5px}75%{margin-left:-.5px;margin-top:0}to{margin-left:0;margin-top:0}}.header-right{display:flex;gap:20px;font-size:14px;align-items:center;height:100%;position:relative}body.lights-off-mode .app-version-badge{opacity:0;visibility:hidden;transition:opacity .3s}.app-version-badge{font-size:9px;background:none;border:none;padding:0;font-weight:500;color:#ffffffb3;cursor:default;transition:opacity .3s}.dark-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#080808;z-index:10000;opacity:0;pointer-events:none;transition:opacity .8s ease-in-out}.dark-overlay.active{opacity:1;pointer-events:all}.pull-switch-container{position:relative;width:0;height:0;margin-right:30px;z-index:10003;top:0;transition:filter .5s}.pull-switch-container.dimmed{filter:brightness(.4)}.pull-switch-container.dimmed:hover{filter:brightness(.7);cursor:pointer}.switch-base{width:18px;height:10px;background:linear-gradient(to right,#7f8c8d,#ecf0f1,#7f8c8d);border-radius:0 0 6px 6px;box-shadow:0 2px 3px #0000004d;border-top:1px solid #bdc3c7;position:absolute;top:-32.5px;left:50%;transform:translate(-50%);z-index:2}.switch-chain{width:2px;background:repeating-linear-gradient(to bottom,#7f8c8d,#7f8c8d 1px,#ecf0f1 1px 3px);position:absolute;top:-24px;left:50%;transform-origin:top center;box-shadow:0 0 1px #0000004d;z-index:1;pointer-events:none}.switch-handle{width:12px;height:12px;background:radial-gradient(circle at 30% 30%,#fff,#bdc3c7,#7f8c8d);border-radius:50%;position:absolute;top:-24px;left:50%;transform-origin:top center;cursor:grab;box-shadow:0 2px 4px #0006;z-index:3;border:1px solid #7f8c8d}.switch-handle:active{cursor:grabbing}.pull-switch-container:not(.dragging) .switch-handle{transition:transform .6s cubic-bezier(.5,1.8,.4,.8),filter .3s}.pull-switch-container:not(.dragging) .switch-chain{transition:height .6s cubic-bezier(.5,1.8,.4,.8),transform .6s cubic-bezier(.5,1.8,.4,.8)}.selector-container{max-width:1200px;margin:40px auto;padding:0 20px;text-align:center}.selector-title{color:#333;margin-bottom:30px;font-weight:300;font-size:28px}.models-grid{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}.model-card{background:#fff;border:1px solid #ddd;width:250px;padding:20px;border-radius:4px;box-shadow:0 2px 5px #0000000d;transition:transform .2s;display:flex;flex-direction:column;justify-content:space-between}.model-card:hover{transform:translateY(-5px);border-color:#0076ce}.model-card h3{font-size:18px;color:#444;margin-top:0}.model-card p{font-size:13px;color:#666;height:40px}.select-btn{background-color:#fff;color:#0076ce;border:1px solid #0076CE;padding:8px 16px;cursor:pointer;font-weight:700;margin-top:15px}.select-btn:hover{background-color:#0076ce;color:#fff}.config-container{width:100%;max-width:1400px;margin:0 auto;padding:20px;box-sizing:border-box}.config-body{display:flex;gap:20px;align-items:flex-start}.config-sidebar{flex:0 0 250px;background-color:#f9f9f9;border:1px solid #ddd;padding:10px;position:sticky;top:80px;height:fit-content}.step-item{padding:12px 15px;cursor:pointer;color:#555;border-bottom:1px solid #eee;font-size:14px;transition:background-color .2s}.step-item:hover{background-color:#eef}.active-step{background-color:#0076ce;color:#fff;font-weight:700;border-left:4px solid #005bb5}.config-main{flex:1;background-color:#fff;border:1px solid #ddd;padding:20px;display:flex;flex-direction:column}.config-main-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;padding-bottom:15px;margin-bottom:20px}.step-title{font-size:18px;font-weight:500;color:#333;margin:0}.step-controls{display:flex;gap:10px}.nav-btn{padding:8px 16px;border:1px solid #ccc;background-color:#fff;color:#333;border-radius:4px;cursor:pointer;font-size:14px;transition:all .2s ease}.nav-btn:hover:not(:disabled){background-color:#f0f0f0;border-color:#bbb}.nav-btn:disabled{opacity:.5;cursor:not-allowed;background-color:#f9f9f9}.nav-btn.primary{background-color:#0076ce;color:#fff;border-color:#0076ce}.nav-btn.primary:hover:not(:disabled){background-color:#005bb5;border-color:#005bb5}.main-selection-area{margin-bottom:40px}.bottom-visual-panel{border-top:2px solid #eee;padding-top:20px;background-color:#fdfdfd;margin-top:auto;flex-shrink:0}.panel-title{font-size:16px;color:#555;margin-bottom:15px;border-left:4px solid #0076CE;padding-left:10px}.option-group{margin-top:20px}.option-group label{display:block;font-weight:700;margin-bottom:5px;font-size:13px}.tech-select{width:100%;max-width:400px;padding:8px;border:1px solid #999;border-radius:0}.drives-table-container{border:1px solid #ddd;border-radius:4px;overflow:hidden;margin-top:20px}.drives-table{width:100%;border-collapse:collapse}.drives-table th{background-color:#f8f9fa;text-align:left;padding:10px 12px;font-weight:600;border-bottom:2px solid #ddd;font-size:12px;color:#555;text-transform:uppercase}.drives-table td{padding:10px 12px;border-bottom:1px solid #eee;vertical-align:middle;font-size:13px}.group-header td{background-color:#e9ecef;font-weight:700;color:#333;font-size:11px;padding:8px 12px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;letter-spacing:.5px}.qty-input{width:60px;padding:5px;border:1px solid #ccc;border-radius:4px;text-align:center}.slots-wrapper{display:flex;flex-direction:column;gap:20px}.slot-card{border:1px solid #ccc;border-radius:4px;padding:20px;background-color:#fff;border-left:5px solid #ddd;margin-bottom:20px}.slot-card:has(select option:checked:not([value=""])){border-left-color:#0076ce}.slot-header{display:flex;justify-content:space-between;margin-bottom:15px;align-items:center}.summary-box{background-color:#fafafa;border:1px solid #ddd;padding:20px;border-radius:5px}.export-btn{margin-top:30px;background-color:#0076ce;color:#fff;border:none;padding:10px 20px;font-size:16px;border-radius:4px;cursor:pointer;float:right;transition:background-color .2s ease}.export-btn:hover:not(:disabled){background-color:#005bb5}.export-btn:disabled{background-color:#ccc;cursor:not-allowed}.rack-container{background-color:#2c2c2c;padding:20px;border-radius:4px;box-shadow:inset 0 0 20px #00000080}.rack-stack{display:flex;flex-direction:column;gap:15px}.rack-unit{background-color:#1a1a1a;padding:10px;border:1px solid #444;border-radius:2px;position:relative}.base-unit-glow{border-color:#0076ce;box-shadow:0 0 10px #0076ce33}.rack-label{color:#888;font-size:11px;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px;font-weight:700}.rack-grid{display:grid;gap:2px;background-color:#222;padding:2px;border:1px solid #555}.grid-25{grid-template-columns:repeat(25,1fr)}.grid-15{grid-template-columns:repeat(15,1fr)}.drive-slot{height:40px;border-radius:1px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9px;cursor:help;position:relative;overflow:visible;transition:height .3s ease;background-color:#333;border:1px solid #444}.drive-slot.tall-drive{height:60px}.drive-text{color:#fff;font-weight:700;font-size:8px;text-align:center;line-height:1.1;padding:0 2px;z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.8);pointer-events:none}.drive-slot.fastcache{background-color:#4c93d9!important;border:1px solid #1565C0!important;color:#fff!important;box-shadow:inset 0 0 4px #00000080}.drive-slot.data-ssd{background-color:#8e24aa!important;border:1px solid #7B1FA2!important;color:#fff!important;box-shadow:inset 0 0 4px #00000080}.drive-slot.data-sas{background-color:#ef6c00!important;border:1px solid #E65100!important;color:#fff!important;box-shadow:inset 0 0 4px #00000080}.drive-slot.data-lff{background-color:#1565c0!important;border:1px solid #0d47a1!important;color:#fff!important;box-shadow:inset 0 0 4px #00000080}.drive-slot.syspack{background-color:#4caf50;border:1px solid #388e3c;box-shadow:inset 0 0 4px #00000080;background-image:url('data:image/svg+xml;utf8,<svg fill="%23fff" height="10" viewBox="0 0 24 24" width="10" xmlns="http://www.w3.org/2000/svg"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>');background-repeat:no-repeat;background-position:center 20%}.drive-slot.empty{background-color:#333;border:1px solid #444}.io-strip{margin-top:5px;border-top:1px dashed #444;padding-top:5px;display:flex;gap:10px;justify-content:space-between}.io-section{flex:1;display:flex;flex-direction:column}.io-section.mini{flex:.25}.io-label{color:#888;font-size:8px;text-transform:uppercase;margin-bottom:2px}.io-visual{height:25px;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;border:1px solid #444;background-color:#2a2a2a;text-shadow:0 1px 1px rgba(0,0,0,.8);white-space:nowrap;overflow:visible;position:relative}.filled-green{background-color:#388e3c;border-color:#2e7d32;box-shadow:inset 0 0 5px #0000004d}.filled-blue{background-color:#0277bd;border-color:#01579b;box-shadow:inset 0 0 5px #0000004d}.filled-purple{background-color:#7b1fa2;border-color:#6a1b9a;box-shadow:inset 0 0 5px #0000004d}.empty-io{background-color:#222;color:#555;border:1px dashed #444;font-style:italic;font-size:8px;position:relative;overflow:visible}[data-tooltip]{cursor:help}[data-tooltip]:hover:after{content:attr(data-tooltip);position:absolute;bottom:110%;left:50%;transform:translate(-50%);background-color:#333;color:#fff;padding:6px 10px;border-radius:4px;font-size:11px;white-space:pre-wrap;width:max-content;max-width:250px;z-index:9999;box-shadow:0 4px 10px #00000080;pointer-events:none;text-align:center;border:1px solid #555;line-height:1.4}[data-tooltip]:hover:before{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:6px;border-style:solid;border-color:#333 transparent transparent transparent;z-index:9999}.footer-container{width:100%;background-color:#1a1a1a;color:#888;padding:15px 0;border-top:1px solid #333;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;position:relative;z-index:1000;margin-top:auto}.footer-content{width:100%;max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 20px;box-sizing:border-box}.footer-left{display:flex;flex-direction:column;gap:2px}.footer-brand{font-size:12px;font-weight:700;color:#ccc;letter-spacing:.5px}.footer-copy{font-size:10px;color:#666}.footer-right{text-align:right;display:flex;flex-direction:column;gap:2px}.tech-line{font-size:9px;color:#555;font-family:Consolas,Courier New,monospace;letter-spacing:.2px}@media(max-width:768px){.footer-content{flex-direction:column;gap:15px;text-align:center}.footer-right{text-align:center}}.app-container{display:flex;flex-direction:column;min-height:100vh;width:100%}.main-content-wrapper{flex:1;display:flex;flex-direction:column;width:100%}.dell-header{background-color:#0076ce;color:#fff;padding:0 40px;height:60px;display:flex;align-items:center;box-shadow:0 2px 5px #0003;position:sticky;top:0;z-index:1000;width:100%;box-sizing:border-box}.dell-header h1{font-size:20px;font-weight:600}.main-layout{display:grid;grid-template-columns:1fr 350px;gap:20px;padding:20px 40px;max-width:1800px;margin:0 auto;width:100%;box-sizing:border-box}