:root{color-scheme:dark;font-family:Manrope,Avenir Next,Segoe UI,sans-serif;--rf-bg: #031231;--rf-bg-soft: #0b1d44;--rf-surface: #0f214a;--rf-surface-muted: #132752;--rf-border: #22467d;--rf-border-strong: #2f5ea5;--rf-text: #e7eefc;--rf-text-muted: #b7c7e6;--rf-brand: #00b8ff;--rf-brand-strong: #00d084;--rf-brand-soft: rgba(0, 184, 255, .14);--rf-success: #5ad9a7;--rf-warning: #f5c46f;--rf-danger: #ff7b8a;--rf-radius: 12px;--rf-radius-sm: 8px;--rf-shadow: 0 14px 34px rgba(3, 10, 26, .55);--rf-shadow-soft: 0 7px 20px rgba(3, 10, 26, .45)}html,body{background:radial-gradient(circle at 12% 0%,rgba(40,96,189,.36) 0%,transparent 38%),radial-gradient(circle at 88% 100%,rgba(14,158,122,.34) 0%,transparent 36%),radial-gradient(circle at 56% 45%,rgba(7,27,71,.62) 0%,transparent 62%),var(--rf-bg);color:var(--rf-text);margin:0;padding:0}.container{grid-template-rows:auto auto auto;min-height:100dvh;overflow:visible}app-header-controls{min-height:0}.studio-shell{align-items:start;display:grid;gap:1rem;grid-template-columns:minmax(270px,300px) minmax(0,1fr);min-height:0;overflow:visible}.studio-rail,.studio-review{display:flex;min-width:0;min-height:0}.studio-rail>.planning-panel{min-width:0;width:100%}.studio-main{align-items:start;display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);min-height:0}.workspace-tabs{background:#0a1a39eb;border:1px solid var(--rf-border);border-radius:12px;display:grid;gap:.4rem;grid-template-columns:repeat(3,minmax(0,1fr));padding:.4rem}.workspace-tabs button{align-items:center;background:transparent;border:1px solid transparent;border-radius:9px;color:var(--rf-text-muted);cursor:pointer;display:flex;font:inherit;font-size:.86rem;font-weight:700;gap:.55rem;justify-content:center;min-height:2.65rem;padding:.5rem .75rem}.workspace-tabs button:hover{background:#ffffff0a;color:var(--rf-text)}.workspace-tabs button.workspace-tab--active{background:linear-gradient(135deg,#00b8ff2e,#31d78a1f);border-color:#00b8ff7a;color:var(--rf-text)}.workspace-tabs button>span{align-items:center;background:var(--rf-surface-muted);border:1px solid var(--rf-border-strong);border-radius:999px;display:inline-flex;font-size:.72rem;height:1.45rem;justify-content:center;width:1.45rem}.workspace-tabs small{background:#ffffff14;border-radius:999px;font-size:.68rem;padding:.15rem .42rem}.studio-panel{background:linear-gradient(180deg,#0f2549f2,#0a1a39f2);border:1px solid var(--rf-border);border-radius:14px;box-sizing:border-box;display:grid;gap:.9rem;height:48rem;min-height:38rem;min-height:0;overflow:hidden;padding:1rem}.studio-panel--canvas{grid-template-rows:auto minmax(0,1fr)}.studio-panel--builder,.studio-review{height:auto;min-height:38rem}.studio-review{display:block;width:100%}.studio-panel--canvas app-rack-preview{min-height:0}.studio-panel__header{border-bottom:1px solid rgba(148,163,184,.14);display:grid;gap:.3rem;padding-bottom:.75rem}.studio-panel__header h2,.studio-panel__header p{margin:0}.studio-panel__header p{color:var(--rf-text-muted);font-size:.9rem;line-height:1.45}.studio-eyebrow{color:var(--rf-brand);font-size:.72rem;font-weight:800;letter-spacing:.08em;margin:0;text-transform:uppercase}.planning-panel--rail{height:auto;overflow:visible;padding-bottom:1.6rem;scroll-padding-bottom:1.6rem}@media(max-width:1180px){.studio-main{grid-template-columns:1fr}.studio-panel{height:44rem;min-height:38rem}}.planning-card--summary,.planning-card--racks{gap:.75rem}.rack-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.rack-card{background:var(--rf-surface);border:1px solid var(--rf-border);border-radius:var(--rf-radius);cursor:pointer;display:flex;flex-direction:column;gap:.4rem;padding:1rem;text-align:left;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}.rack-card:hover{border-color:var(--rf-brand);box-shadow:var(--rf-shadow-soft);transform:translateY(-1px)}.rack-card.selected{border-color:var(--rf-brand-strong);box-shadow:0 0 0 3px var(--rf-brand-soft)}.rack-label{color:var(--rf-text);font-size:1.2rem;font-weight:700}.rack-description{color:var(--rf-text-muted);font-size:.92rem;line-height:1.3}.templates{margin-top:1.5rem}.templates-title{font-size:1rem;margin:0 0 .75rem}.template-group{margin-top:1rem}.section-toggle{background:var(--rf-brand-soft);border:1px solid var(--rf-border-strong);border-radius:var(--rf-radius-sm);color:var(--rf-brand-strong);cursor:pointer;font-size:.82rem;font-weight:600;margin:0 0 .45rem;padding:.35rem .5rem;text-align:left;width:100%}.section-toggle:hover{background:#00b8ff3d}.section-toggle.compact{margin-top:.25rem;max-width:150px}.template-grid{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.template-card{background:var(--rf-surface);border:1px solid var(--rf-border);border-radius:10px;cursor:pointer;display:flex;flex-direction:column;gap:.2rem;padding:.7rem;text-align:left;transition:border-color .12s ease,box-shadow .12s ease}.template-card[draggable=true]{cursor:grab}.template-card[draggable=true]:active{cursor:grabbing}.template-card:hover{border-color:var(--rf-brand);box-shadow:var(--rf-shadow-soft)}.template-card.selected{border-color:var(--rf-brand-strong);box-shadow:0 0 0 2px var(--rf-brand-soft)}.template-name{color:var(--rf-text);font-size:.92rem;font-weight:600}.template-meta{color:var(--rf-text-muted);font-size:.78rem}.template-description{color:var(--rf-text-muted);font-size:.8rem;line-height:1.25;margin-top:.15rem}.placement-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.placement-workflow{background:var(--rf-surface);border:1px solid var(--rf-border);border-radius:10px;margin-top:1rem;padding:.7rem}.placement-helper{color:var(--rf-text-muted);font-size:.82rem;line-height:1.35;margin:0}.placement-editor{margin-top:.4rem}.placement-template-line{align-items:center;display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .35rem}.placement-template-meta{background:var(--rf-brand-soft);border:1px solid var(--rf-border-strong);border-radius:999px;color:var(--rf-brand-strong);font-size:.72rem;font-weight:600;padding:.08rem .38rem}.field-label{color:var(--rf-text-muted);display:block;font-size:.78rem;font-weight:600;margin:.45rem 0 .25rem}.field-label.compact{margin-top:.35rem}.field-input{border:1px solid var(--rf-border);border-radius:var(--rf-radius-sm);box-sizing:border-box;font:inherit;padding:.45rem .55rem;width:100%}.field-input.compact{font-size:.82rem;padding:.35rem .45rem}.field-textarea{min-height:62px;resize:vertical}.action-btn{background:var(--rf-brand-soft);border:1px solid var(--rf-border-strong);border-radius:var(--rf-radius-sm);color:var(--rf-brand-strong);cursor:pointer;font-weight:600;padding:.5rem .75rem;transition:border-color .12s ease,background-color .12s ease,transform .12s ease}.action-btn:hover:not(:disabled){background:#d8e9ff;border-color:var(--rf-brand);transform:translateY(-1px)}.action-btn:disabled{cursor:not-allowed;opacity:.6}.action-btn.primary{background:linear-gradient(135deg,#31d78a,#67e7b2);border-color:#44e39a;color:#05211f}.mini-btn{background:#f5f8fc;border:1px solid var(--rf-border);border-radius:6px;cursor:pointer;font-size:.78rem;padding:.25rem .5rem}.mini-btn.active{border-color:var(--rf-brand);color:var(--rf-brand-strong)}.mini-btn.danger{border-color:#f1b8bd;color:var(--rf-danger)}.checkbox-row{align-items:center;display:flex;gap:.4rem}.external-management{border-top:1px solid var(--rf-border);margin-top:1rem;padding-top:.8rem}.external-add{display:grid;gap:.4rem}.external-list{display:grid;gap:.5rem;margin-top:.65rem}.external-row{align-items:start;border:1px solid var(--rf-border);border-radius:var(--rf-radius-sm);display:flex;gap:.5rem;justify-content:space-between;padding:.45rem}.external-main{display:grid;flex:1;gap:.35rem}.external-status{color:var(--rf-text-muted);font-size:.75rem;margin:0}.fit-ok{color:var(--rf-success)}.fit-warning{color:var(--rf-warning)}.placed-list{margin-top:1rem}.network-toggle-btn{margin-bottom:.45rem}.network-map{border-top:1px solid var(--rf-border);margin-top:1rem;padding-top:.8rem}.network-line{color:var(--rf-text-muted);font-size:.8rem;margin:0 0 .3rem}.vlan-list{display:grid;gap:.45rem;margin-top:.55rem}.vlan-card{background:var(--rf-surface);border:1px solid var(--rf-border);border-radius:var(--rf-radius-sm);padding:.45rem .55rem}.vlan-title{color:var(--rf-text);font-size:.86rem;font-weight:700;margin:0 0 .3rem}.vlan-kind{border:1px solid var(--rf-border);border-radius:999px;font-size:.68rem;font-weight:600;margin-left:.35rem;padding:.08rem .38rem}.vlan-kind.access{background:#00b8ff24;border-color:#3ca8ea;color:#8fd9ff}.vlan-kind.poe{background:#5ad9a729;border-color:#5ad9a7;color:#bdf4de}.field-input:focus-visible,.action-btn:focus-visible,.mini-btn:focus-visible,.section-toggle:focus-visible,.template-card:focus-visible,.rack-card:focus-visible{outline:2px solid var(--rf-brand);outline-offset:1px}.toast-stack{bottom:1rem;display:grid;gap:.45rem;pointer-events:none;position:fixed;right:1rem;width:min(360px,100vw - 1.5rem);z-index:50}.toast{align-items:flex-start;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid transparent;border-radius:10px;box-shadow:0 10px 22px #10243a29;display:flex;gap:.4rem;justify-content:space-between;padding:.52rem .6rem;pointer-events:auto}.toast-info{background:#0a1e46fa;border-color:#2f5ea5;color:#9ed7ff}.toast-success{background:#092328fa;border-color:#5ad9a7;color:var(--rf-success)}.toast-warning{background:#2f250efa;border-color:#f5c46f;color:var(--rf-warning)}.toast-error{background:#311218fa;border-color:#ff7b8a;color:var(--rf-danger)}.toast-text{font-size:.8rem;line-height:1.3;margin:0}.toast-close{background:transparent;border:0;color:inherit;cursor:pointer;flex-shrink:0;font-size:.8rem;font-weight:700;line-height:1;margin-top:.02rem;padding:.1rem}.item-modal-backdrop{align-items:center;background:#040c1c9e;display:flex;inset:0;justify-content:center;padding:1rem;position:fixed;z-index:55}.item-modal{background:var(--rf-surface);border:1px solid var(--rf-border);border-radius:var(--rf-radius);box-shadow:0 18px 36px #10243a38;display:flex;flex-direction:column;height:80vh;padding:.9rem;width:min(80vw,100%)}.camera-bulk-modal{width:min(94vw,1400px)}.network-map-modal{width:min(92vw,1200px)}.network-tree{max-height:70vh;overflow:auto}.tree-level{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}.tree-root{margin-bottom:.2rem}.tree-connector{border-left:2px solid var(--rf-border-strong);height:18px;margin:.2rem auto;width:0}.tree-node{background:var(--rf-surface);border:1px solid var(--rf-border);border-radius:var(--rf-radius-sm);color:var(--rf-text);font-size:.78rem;font-weight:700;padding:.4rem .55rem}.tree-root-node{background:linear-gradient(180deg,var(--rf-brand-soft) 0%,#d9e9ff 100%);border-color:var(--rf-border-strong);color:var(--rf-brand-strong)}.tree-trunks{margin-bottom:.35rem}.tree-branches{align-items:stretch;display:grid;gap:.55rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));justify-content:stretch}.tree-branch-card{background:var(--rf-surface);border:1px solid var(--rf-border);border-radius:10px;display:flex;flex-direction:column;gap:.3rem;padding:.5rem .55rem}.tree-branch-title{align-items:center;color:var(--rf-text);display:flex;flex-wrap:wrap;font-size:.82rem;font-weight:700;gap:.35rem;margin:0}.tree-branch-meta{color:var(--rf-text-muted);font-size:.72rem;margin:0}.tree-member-connector{border-left:2px solid var(--rf-border);height:12px;margin-left:.2rem;width:0}.tree-members{display:grid;gap:.3rem}.tree-member{background:var(--rf-bg-soft);border:1px solid var(--rf-border);border-radius:8px;color:var(--rf-text-muted);font-size:.72rem;padding:.28rem .42rem}.camera-bulk-modal .item-modal-columns{grid-template-columns:minmax(220px,.7fr) minmax(780px,1.8fr)}.item-modal-loading{justify-content:center}.item-modal-loading .item-modal-header{justify-content:center;position:relative}.item-modal-loading .item-modal-close{position:absolute;right:0;top:0}.item-modal-header{align-items:start;display:flex;gap:.6rem;justify-content:space-between}.item-modal-header .placement-actions{margin:0}.item-modal-title{font-size:1.02rem;margin:0}.item-modal-close{background:transparent;border:0;color:var(--rf-text-muted);cursor:pointer;font-size:.85rem;font-weight:700;line-height:1;padding:.15rem}.item-modal-subtitle{color:var(--rf-text-muted);font-size:.82rem;margin:.2rem 0 .55rem}.item-modal-columns{display:grid;flex:1;gap:.8rem;height:100%;grid-template-columns:minmax(220px,.9fr) minmax(280px,1.1fr);margin-top:.25rem;min-height:0}.item-modal-left,.item-modal-right{display:flex;flex-direction:column;height:100%;min-width:0;overflow:auto}.item-modal-grid{display:grid;gap:.25rem}.item-modal-grid p{color:var(--rf-text);font-size:.82rem;margin:0}.item-modal-description{border-top:1px solid var(--rf-border);color:var(--rf-text-muted);font-size:.82rem;margin:.55rem 0 0;padding-top:.5rem}.item-modal-form-grid{margin-top:.45rem}.item-modal-ports{display:flex;flex:1;flex-direction:column;margin-top:0;min-height:0}.item-modal-ports-grid{align-content:start;border:1px solid var(--rf-border);border-radius:8px;display:grid;flex:1;gap:.3rem;grid-auto-rows:max-content;max-height:none;overflow:auto;padding:.45rem}.item-modal-port-row{align-items:start;display:grid;gap:.35rem;grid-template-columns:64px minmax(0,1fr)}.item-modal-port-spacer{height:0;pointer-events:none}.item-modal-port-label{color:var(--rf-text-muted);font-size:.75rem;font-weight:600;margin-top:.25rem}.item-modal-port-sides{display:grid;gap:.35rem}.item-modal-port-sides.dual-sided{gap:.45rem;grid-template-columns:repeat(2,minmax(0,1fr))}.item-modal-port-side-row{align-items:center;display:grid;gap:.25rem;grid-template-columns:44px minmax(0,1fr)}.item-modal-port-side-label{color:var(--rf-text-muted);font-size:.72rem;font-weight:600}.template-selected-badge{align-self:flex-start;background:var(--rf-brand-soft);border:1px solid var(--rf-border-strong);border-radius:999px;color:var(--rf-brand-strong);font-size:.68rem;font-weight:700;margin-top:.15rem;padding:.08rem .38rem}.placement-workflow.active{border-color:var(--rf-border-strong);box-shadow:0 0 0 2px var(--rf-brand-soft)}.item-modal-loading-body{align-items:center;display:flex;gap:.6rem;justify-content:center;margin-top:.65rem;text-align:center;width:100%}.item-modal-loading-text{color:var(--rf-text-muted);font-size:.84rem;margin:0}.item-modal-spinner{animation:item-modal-spin .85s linear infinite;border:2px solid var(--rf-border);border-radius:999px;border-top-color:var(--rf-brand);display:inline-block;height:16px;width:16px}.camera-bulk-head,.camera-bulk-row{align-items:center;display:grid;gap:.4rem;grid-template-columns:52px minmax(120px,1fr) minmax(120px,1fr) 86px 80px minmax(180px,1.4fr) 70px}.ethernet-bulk-head,.ethernet-bulk-row{align-items:center;display:grid;gap:.4rem;grid-template-columns:52px minmax(150px,1fr) minmax(150px,1fr) minmax(220px,1.4fr) 70px}.camera-bulk-head,.ethernet-bulk-head{border-bottom:1px solid var(--rf-border);color:var(--rf-text-muted);font-size:.72rem;font-weight:700;padding:0 .1rem .2rem}.camera-bulk-row,.ethernet-bulk-row{border-bottom:1px dashed var(--rf-border);padding:.2rem 0}.camera-bulk-row:last-child{border-bottom:0}.ethernet-bulk-row:last-child{border-bottom:0}.camera-bulk-id{color:var(--rf-text-muted);font-size:.78rem;font-weight:600}.camera-bulk-poe{justify-content:flex-start}@keyframes item-modal-spin{to{transform:rotate(360deg)}}@media(max-width:900px){.studio-shell,.studio-main{grid-template-columns:1fr;min-height:auto}.studio-panel{height:auto;min-height:34rem}.workspace-tabs{grid-template-columns:1fr}.planning-panel--rail{height:auto}.toast-stack{bottom:.7rem;left:.7rem;right:.7rem;width:auto}.item-modal-columns{grid-template-columns:1fr}.camera-bulk-head{display:none}.camera-bulk-row{border:1px solid var(--rf-border);border-radius:8px;grid-template-columns:1fr 1fr;padding:.45rem}.ethernet-bulk-head{display:none}.ethernet-bulk-row{border:1px solid var(--rf-border);border-radius:8px;grid-template-columns:1fr 1fr;padding:.45rem}.tree-branches{grid-template-columns:1fr}}@page{size:letter portrait;margin:.5in}@media print{body *{visibility:hidden!important}.preview,.preview *{visibility:visible!important}html,body{background:#fff;color:#000;height:11in;width:8.5in}.container{margin:0!important;max-width:none!important;min-height:0!important;padding:0!important}.workspace{display:block!important;min-height:0!important}.preview{left:0;margin:0!important;position:absolute!important;top:0;width:100%!important}.selected-panel,.components-panel,router-outlet{display:none!important}.preview-title{margin-bottom:.15in!important}.rack-shell{border:1px solid #000000!important;min-height:0!important;padding:.1in!important}.rack-rails{background:#fff!important;box-shadow:none!important;height:9.6in!important;width:100%!important}.rack-slots{background:#fff!important;border:1px solid #000000!important}.rack-slot{background:#fff!important;border-bottom:.75pt solid #000000!important;border-left:0!important;border-right:0!important;border-top:0!important;color:#000!important;position:relative!important}.rack-slot:last-child{border-bottom:0!important}.rack-slot.occupied,.rack-slot.selected,.rack-slot.occupied.selected,.rack-slot.drag-over{background:#e5e7eb!important;box-shadow:none!important}.placed-item,.unit-label{color:#000!important;opacity:1!important}.rack-slot.occupied{border-left:1.25pt solid #000000!important;border-right:1.25pt solid #000000!important;border-top:0!important;border-bottom:0!important;box-shadow:none!important}.rack-slot.occupied-start{border-top:1.25pt solid #000000!important}.rack-slot.occupied-end{border-bottom:1.25pt solid #000000!important}.placed-item{background:#fff!important;border:1px solid #000000!important;border-radius:2px!important;padding:.02in .05in!important}.rack-slot,.unit-label,.placed-item{print-color-adjust:exact;-webkit-print-color-adjust:exact}}