.rack-builder{--ink:#071525;--navy:#091727;--blue:#1677ff;--line:#cbd8e6;--panel:#fff;--soft:#f3f7fb;color:var(--ink);margin:2rem 0 5rem}.rack-builder button,.rack-builder input,.rack-builder select,.rack-builder textarea{font:inherit}.rb-intro{padding:1.5rem 0}.rb-intro h1{font-size:clamp(2rem,5vw,4rem);letter-spacing:-.06em;margin:.2rem 0}.rb-intro p{max-width:680px;color:#52647a}.rb-toolbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;background:var(--navy);padding:.75rem;border-radius:8px 8px 0 0}.rb-toolbar button,.view-tabs button,.device-actions button{border:1px solid #507092;background:transparent;color:#eff7ff;padding:.5rem .7rem;border-radius:4px;cursor:pointer;font-size:.8rem}.rb-toolbar button:hover,.view-tabs button.active{background:#1677ff;border-color:#1677ff}.rb-toolbar .spacer{flex:1}.rb-layout{display:grid;grid-template-columns:230px minmax(420px,1fr) 320px;background:var(--soft);border:1px solid var(--line);min-height:720px}.rb-library,.rb-side{background:var(--panel);padding:1rem;border-right:1px solid var(--line)}.rb-side{border-right:0;border-left:1px solid var(--line)}.rb-panel-title{font-size:.73rem;letter-spacing:.12em;text-transform:uppercase;color:#54708d;font-weight:800;margin:.2rem 0 1rem}.palette-item{display:flex;gap:.7rem;align-items:center;width:100%;background:#fff;border:1px solid #dce6f0;border-radius:5px;margin:.35rem 0;padding:.55rem;text-align:left;cursor:grab;color:var(--ink)}.palette-item:hover{border-color:#1677ff;background:#f4f9ff}.palette-icon{display:grid;place-items:center;width:29px;height:29px;background:#e7f1ff;color:#1471e6;border-radius:4px;font-weight:800}.palette-item small{display:block;color:#71849a;font-size:.7rem;margin-top:.1rem}.rb-canvas{padding:1rem;min-width:0}.view-tabs{display:flex;gap:.35rem;margin-bottom:.75rem}.view-tabs button{color:#24496e;border-color:#a9bfd3;background:#fff}.rack-wrap{position:relative;max-width:560px;margin:auto;padding:0 38px}.rack{height:1176px;position:relative;border:9px solid #112940;border-radius:4px;background:repeating-linear-gradient(to bottom,#edf3f9 0 27px,#9cb2c8 27px 28px);box-shadow:0 12px 25px #00152b20}.rack:before,.rack:after{content:"";position:absolute;top:0;bottom:0;width:9px;background:#071525}.rack:before{left:28px}.rack:after{right:28px}.rack-unit{height:28px;position:relative;border-bottom:1px solid #b9c9d8}.rack-unit span{position:absolute;left:-36px;top:7px;font-size:9px;color:#58728c;font-weight:700}.rack-device{position:absolute;left:46px;right:46px;z-index:3;display:flex;align-items:center;justify-content:space-between;text-align:left;border:1px solid #254b6c;border-radius:3px;color:#eaf4ff;padding:0 10px;cursor:grab;overflow:hidden}.rack-device b{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rack-device span{font-size:.64rem;opacity:.85;white-space:nowrap}.rack-device.server{background:#175b96}.rack-device.storage{background:#2e5a84}.rack-device.switch{background:#236b61}.rack-device.fc{background:#6b438f}.rack-device.firewall{background:#99422f}.rack-device.ups{background:#5d5665}.rack-device.patch{background:#60778c}.rack-device.blank{background:#aebdca;color:#23384c}.rack-device.selected,.vertical-pdu.selected,.rear-device.selected{outline:3px solid #ffbb25;outline-offset:2px}.pdu-rails{position:absolute;inset:0;pointer-events:none}.vertical-pdu{pointer-events:auto;position:absolute;top:20px;bottom:20px;width:23px;border:0;border-radius:4px;background:#0b3155;color:#dcedff;font-size:9px;writing-mode:vertical-rl;padding:5px;cursor:pointer}.vertical-pdu.left{left:4px}.vertical-pdu.right{right:4px}.rear-details{max-width:560px;margin:1rem auto;border-top:1px solid var(--line);padding-top:1rem}.rear-device{background:#fff;border:1px solid var(--line);margin-bottom:.5rem;padding:.6rem}.rear-device header{display:flex;justify-content:space-between;font-size:.78rem}.rear-device header small{color:#607992}.port-row{display:flex;flex-wrap:wrap;gap:3px;margin-top:.4rem}.port{font-size:.62rem;border:1px solid #6e92b6;background:#edf5ff;color:#153a5c;padding:3px;border-radius:2px;cursor:pointer}.port.fibre-channel{background:#f5eaff;color:#5a287e}.port.management{background:#e7f8ef;color:#0d6544}.port.connection-source{outline:2px solid #ffab14}.psu-row{display:flex;gap:.5rem;margin-top:.4rem;font-size:.65rem;color:#607992}.rb-side label{display:block;font-size:.73rem;font-weight:700;margin:.65rem 0}.rb-side input,.rb-side select,.rb-side textarea{width:100%;box-sizing:border-box;border:1px solid #c6d4e2;border-radius:3px;padding:.45rem;margin-top:.25rem;background:#fff;color:var(--ink)}.rb-side textarea{min-height:58px;resize:vertical}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}.rb-side fieldset{border:1px solid #d6e1eb;margin:1rem 0;padding:.3rem .7rem}.rb-side legend{font-size:.72rem;font-weight:800;color:#4a6782}.panel-heading{display:flex;justify-content:space-between;gap:.4rem;align-items:start}.panel-heading h2{font-size:1.1rem;margin:.1rem 0}.device-actions{display:flex;gap:.25rem}.device-actions button{color:#315472;border-color:#b6c9da;background:#fff;padding:.3rem}.device-actions .danger{color:#a22f2f}.save-properties{background:#1677ff;color:#fff;border:0;border-radius:3px;padding:.6rem .8rem;cursor:pointer;font-weight:700}.empty-panel,.empty{color:#667d94;font-size:.85rem;padding:1rem 0}.hint{font-size:.75rem;color:#54718d}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#dbe6ef;margin:1rem 0}.stats-grid div{background:#fff;padding:.55rem}.stats-grid b{display:block;font-size:1rem}.stats-grid span{font-size:.64rem;color:#657d94}.warning-box{border-top:1px solid var(--line);margin-top:1rem;padding-top:.7rem}.warning-box h3{font-size:.82rem;margin:0}.warning-box ul{padding-left:1rem;font-size:.72rem;color:#7a5014}.warning-box .good{color:#26724b}.connection-panel{max-width:560px;margin:1rem auto;background:#071525;color:#ddebfa;padding:1rem;border-radius:4px}.connection-panel h2{margin:0;font-size:1rem}.connection-panel p{font-size:.75rem;color:#a9c2dc}.connection-panel ul{list-style:none;padding:0}.connection-panel li{display:flex;justify-content:space-between;border-top:1px solid #28445e;padding:.5rem 0;font-size:.76rem}.connection-panel small{display:block;color:#91b1d0}.connection-panel button{color:#fff;background:none;border:0;cursor:pointer;font-size:1.1rem}@media(max-width:1050px){.rb-layout{grid-template-columns:200px minmax(380px,1fr)}.rb-side{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}.rb-side #properties{max-width:600px}.rb-canvas{overflow:auto}}@media(max-width:690px){.rb-layout{grid-template-columns:1fr}.rb-library{border-right:0;border-bottom:1px solid var(--line)}#equipment-library{display:grid;grid-template-columns:1fr 1fr;gap:.25rem}.palette-item{margin:0}.rb-toolbar .spacer{display:none}.rack-wrap{transform-origin:top left;min-width:470px}.rb-canvas{overflow:auto}.rb-toolbar{position:sticky;top:0;z-index:5}}