:root{--bg:#fff;--bg-strong:#f5f7fb;--panel:#fff;--panel-soft:#fbfcff;--input-bg:#fff;--button-bg:#f1f6ff;--bg-top:#f7faff;--text:#18202a;--text-dim:#546174;--border:#d5deea;--accent:#2f5fd6;--accent-strong:#1f43a8;--danger:#ba3e38;--danger-bg:#fff2f2;--divider-soft:#18202a1f;--tree-line:#aeb9c8;--font-display:"Space Grotesk", "Segoe UI", sans-serif;--font-body:"Manrope", "Segoe UI", sans-serif}:root[data-theme=dark]{--bg:#0b0b0c;--bg-strong:#141416;--panel:#101012;--panel-soft:#17171a;--input-bg:#141418;--button-bg:#1b1c20;--bg-top:#060607;--text:#f1f1f4;--text-dim:#a9abb3;--border:#2a2b31;--accent:#9cb4ff;--accent-strong:#7d98e8;--danger:#ff9a92;--danger-bg:#2a1717;--divider-soft:#f1f1f41f;--tree-line:#6a7280}*{box-sizing:border-box}body{background:linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 38%, var(--bg) 100%);color:var(--text);font-family:var(--font-body);margin:0}#app{min-height:100dvh}main{gap:1rem;width:min(1200px,100% - 2rem);margin:0 auto;padding:2rem 0 3rem;display:grid}h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.1}header{alignment-baseline:middle;padding:1rem}.header-row{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}h1{font-size:clamp(1.9rem,3.2vw,2.7rem)}.subtitle{color:var(--text-dim);max-width:75ch;margin-top:.6rem}.settings-anchor{position:relative}.header-actions{align-items:center;gap:.45rem;display:inline-flex}.icon-button{border:1px solid var(--border);background:var(--bg-strong);border-radius:999px;justify-content:center;align-items:center;width:2.3rem;height:2.3rem;font-size:1.1rem;line-height:1;display:inline-flex}.icon-link{color:var(--text);text-decoration:none}.icon-link svg{width:1rem;height:1rem}.settings-popover{z-index:20;gap:.85rem;width:min(22rem,100vw - 2rem);display:grid;position:absolute;top:2.7rem;right:0;box-shadow:0 14px 34px #1e41a029}.settings-popover h2{margin-bottom:.15rem;font-size:1.1rem}.settings-popover>label{color:var(--text);gap:.35rem;font-weight:600;display:grid}.settings-popover>label select{font-weight:400}.card{border:1px solid var(--border);background:var(--panel);border-radius:14px;padding:1rem}label,select,input,button{font:inherit}select,input:not([type=checkbox]){border:1px solid var(--border);background:var(--input-bg);color:var(--text);border-radius:10px;padding:.5rem .65rem}input[type=checkbox]{width:1rem;min-width:1rem;height:1rem;accent-color:var(--accent);flex:none;margin:0;padding:0}.actions{flex-wrap:wrap;gap:.5rem;margin-top:.2rem;display:flex}button,.file-upload{border:1px solid var(--accent);color:var(--accent);background:var(--button-bg);cursor:pointer;border-radius:10px;padding:.45rem .7rem;text-decoration:none}button.active{background:var(--accent);color:#fff}.danger{border-color:var(--danger);color:var(--danger);background:var(--danger-bg)}.file-upload input{display:none}.toolbar{gap:.9rem;display:grid}.tab-row,.controls{flex-wrap:wrap;gap:.5rem;display:flex}.search-input-wrap{flex:1;min-width:220px;position:relative}.search-input-wrap input{width:100%;padding-right:2rem}.search-clear{color:var(--text-dim);background:0 0;border:none;border-radius:6px;padding:.15rem;font-size:1.1rem;line-height:1;position:absolute;top:50%;right:.45rem;transform:translateY(-50%)}.search-clear:hover,.search-clear:focus-visible{color:var(--text);background:var(--bg-strong)}.filter-menu{flex:0 0 220px;width:220px;position:relative}.filter-menu>summary{border:1px solid var(--border);background:var(--input-bg);cursor:pointer;border-radius:10px;width:100%;min-width:0;padding:.5rem 2.15rem .5rem .65rem;list-style:none;display:block;position:relative}.filter-menu>summary::-webkit-details-marker{display:none}.filter-menu>summary .summary-label{white-space:nowrap;display:block;overflow:hidden}.filter-menu>summary:before{content:"";background:linear-gradient(to right, #0000, var(--input-bg) 62%);pointer-events:none;z-index:1;width:2rem;position:absolute;top:1px;bottom:1px;right:1.35rem}.filter-menu>summary:after{content:"";border-right:2px solid var(--text-dim);border-bottom:2px solid var(--text-dim);transform-origin:50%;pointer-events:none;z-index:2;width:.5rem;height:.5rem;position:absolute;top:50%;right:.7rem;transform:translateY(-60%)rotate(45deg)}.filter-menu[open]>summary{border-color:var(--accent)}.filter-list{z-index:15;border:1px solid var(--border);background:var(--input-bg);border-radius:10px;gap:.35rem;min-width:220px;padding:.55rem;display:grid;position:absolute;top:calc(100% + .4rem);left:0;box-shadow:0 10px 24px #18202a1f}.filter-list label{-webkit-user-select:none;user-select:none;align-items:center;gap:.5rem;display:flex}.sort-menu .filter-list{gap:.2rem;padding:.3rem}.sort-menu .filter-list button{text-align:left;width:100%;color:var(--text);background:0 0;border:none;border-radius:8px;padding:.3rem .45rem}.sort-menu .filter-list button:hover,.sort-menu .filter-list button:focus-visible{background:var(--bg-strong)}.sort-menu .filter-list button.active{background:var(--accent);color:#fff}.stats{flex-wrap:wrap;gap:.45rem;display:flex}.stats span{background:var(--bg-strong);border-radius:999px;padding:.25rem .6rem;font-size:.9rem}.grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.8rem;display:grid}.item-card{flex-direction:column;gap:.55rem;height:100%;display:flex}.title-row{justify-content:space-between;align-items:baseline;gap:.7rem;display:flex}.tiny{color:var(--text-dim);font-size:.93rem}.check-row{-webkit-user-select:none;user-select:none;align-items:center;gap:.55rem;display:flex}.blueprints-section{border-top:1px solid var(--border);margin-top:.15rem;padding-top:.5rem}.blueprints-heading{-webkit-user-select:none;user-select:none;margin:0 0 .5rem;font-weight:600}.component-row{position:relative}.component-row-text{display:inline-block;position:relative}.tree-guides{align-items:stretch;margin-right:0;display:inline-flex}.tree-guide{flex:0 0 .98rem;width:.98rem;height:1.15rem;position:relative}.tree-guide.pipe:before,.tree-guide.tee:before,.tree-guide.tee-root:before,.tree-guide.elbow:before{content:"";border-left:1px solid var(--tree-line);position:absolute;left:50%}.tree-guide.pipe:before,.tree-guide.tee:before{top:-.25rem;bottom:-.25rem}.tree-guide.tee-root:before{top:.2rem;bottom:-.25rem}.tree-guide.elbow:before{top:-.25rem;bottom:50%}.tree-guide.tee:after,.tree-guide.tee-root:after,.tree-guide.elbow:after{content:"";border-top:1px solid var(--tree-line);position:absolute;top:50%;left:50%;right:.12rem}.component-row{gap:.35rem}.component-row-text[data-tooltip]:hover:after,.component-row-text[data-tooltip]:focus-visible:after{opacity:1;transition-delay:.35s;transform:translateY(0)}.component-row-text[data-tooltip]:after{content:attr(data-tooltip);border:1px solid var(--border);background:var(--panel);width:max-content;max-width:min(40rem,100vw - 3rem);color:var(--text);white-space:pre;opacity:0;pointer-events:none;z-index:12;border-radius:8px;padding:.45rem .55rem;font-size:.84rem;line-height:1.35;transition:opacity .12s,transform .12s;position:absolute;top:calc(100% + .3rem);left:0;transform:translateY(-2px);box-shadow:0 8px 20px #00000029}.component-row-nested{margin-left:0;padding-left:0}.component-row-deep{padding-left:0}.component-row-deep>input[type=checkbox]{margin-left:.28rem}.component-row-deep .tree-guide:last-child{transform:translate(.32rem)}ul{margin:.5rem 0 0;padding-left:1rem}.item-card details>summary{cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-grid{flex-wrap:wrap;gap:.75rem;margin-top:auto;display:flex}.toggle-grid.with-blueprint-divider{border-top:1px solid var(--divider-soft);padding-top:.42rem}.status{border:1px dashed var(--border);color:var(--text-dim);border-radius:10px;padding:1rem}.status.error{color:var(--danger);background:#fff3f2;border-color:#d8aaa2}footer{color:var(--text-dim);gap:.25rem;padding:1rem;font-size:.92rem;display:grid}@media (width<=700px){main{width:min(1200px,100% - 1rem)}.header-row{flex-direction:column}.settings-anchor{align-self:flex-end}.controls{flex-direction:column}.tab-row{-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding-bottom:.2rem;overflow-x:auto}.tab-row button{white-space:nowrap}.search-input-wrap{min-width:unset;width:100%}.controls>select,.filter-menu,.sort-menu{width:100%}.filter-menu>summary{width:100%;min-width:unset}.filter-list{min-width:unset;left:0;right:0}.grid{grid-template-columns:1fr}}
