:root{--bg: #f1f5f9;--panel: #ffffff;--border: #e2e8f0;--text: #0f172a;--muted: #64748b;--accent: #0ea5e9;--accent-ink: #0369a1;--brand: #facc15;--danger: #dc2626;--radius: 8px;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;font-size:13px;color:var(--text);background:var(--bg)}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;overflow:hidden}button,input,textarea,select{font:inherit;color:inherit}button{border:1px solid var(--border);background:#fff;border-radius:6px;padding:5px 10px;cursor:pointer;white-space:nowrap}button:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--text);color:#fff;border-color:var(--text)}button.primary:hover:not(:disabled){background:#1e293b}button.danger{color:var(--danger)}button.block{width:100%;margin-top:6px}.link-btn{border:none;background:none;padding:2px 0;color:var(--accent-ink);text-align:left;white-space:normal}.link-btn:hover:not(:disabled){background:none;text-decoration:underline}.icon-btn{border:none;background:none;padding:0 6px;font-size:16px;color:var(--muted)}input[type=text],textarea,.search,.project-name{width:100%;border:1px solid var(--border);border-radius:6px;padding:6px 8px;background:#fff;outline:none}input[type=text]:focus,textarea:focus,.search:focus,.project-name:focus{border-color:var(--accent);box-shadow:0 0 0 3px #0ea5e926}textarea{resize:vertical}.muted{color:var(--muted)}.small{font-size:11.5px}.grow{flex:1;min-width:0}.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.app{display:flex;flex-direction:column;height:100%}.workspace{flex:1;display:flex;min-height:0}.stage{flex:1;position:relative;min-width:0}.toolbar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--border)}.brand{font-weight:800;font-size:16px;letter-spacing:-.02em;display:flex;align-items:center;gap:6px}.brand-bolt{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--text);font-size:15px}.project-name{width:220px;border-color:transparent;font-weight:600}.project-name:hover{border-color:var(--border)}.tb-group{display:flex;gap:4px}.zoom-val{min-width:56px}.spacer{flex:1}.menu-wrap{position:relative}.menu{position:absolute;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 10px 30px #0f172a1f;padding:4px;display:flex;flex-direction:column;z-index:20;min-width:210px}.menu button{border:none;text-align:left}.panel{background:var(--panel);display:flex;flex-direction:column;min-height:0}.library{width:248px;border-right:1px solid var(--border)}.inspector{width:284px;border-left:1px solid var(--border)}.panel-head{padding:10px;border-bottom:1px solid var(--border)}.panel-scroll{flex:1;overflow-y:auto}.panel-scroll.pad{padding:14px;display:flex;flex-direction:column;gap:14px}.panel-foot{padding:8px 10px;border-top:1px solid var(--border);font-size:11.5px}.lib-section{padding:8px 10px 4px}.lib-section header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px}.eye{border:none;font-size:10.5px;padding:2px 6px;text-transform:none;letter-spacing:0;color:var(--muted)}.eye.off{color:var(--danger);background:#fef2f2}.lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.lib-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 5px;border-color:transparent;white-space:normal}.lib-item:hover:not(:disabled){border-color:var(--border)}.lib-item.active{border-color:var(--accent);background:#f0f9ff}.lib-name{font-size:10.5px;line-height:1.2;text-align:center}.lib-count{position:absolute;top:3px;right:4px;font-size:9.5px;font-weight:700;color:var(--muted)}.insp-title{display:flex;gap:10px;align-items:center}.insp-name{font-weight:700;font-size:14px}.field{display:flex;flex-direction:column;gap:6px}.field>label,.sub-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.sub-label{margin-top:4px}.check{display:flex;gap:8px;align-items:center}.slider{display:flex;align-items:center;gap:8px}.slider input{flex:1;accent-color:var(--text)}.slider-val{min-width:52px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}.color-picker{display:flex;flex-direction:column;gap:8px}.key-swatches{display:flex;flex-direction:column;gap:3px}.key-swatch{display:flex;align-items:center;gap:8px;text-align:left;border-color:transparent;padding:4px 6px}.key-swatch.active{border-color:var(--text)}.swatches{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.swatch{width:22px;height:22px;padding:0;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--border)}.swatch.active{box-shadow:0 0 0 2px var(--text)}.swatch.custom{position:relative;overflow:hidden;cursor:pointer;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);display:inline-block}.swatch.custom input,.key-dot input{position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;opacity:0;cursor:pointer}.dot{width:12px;height:12px;border-radius:50%;flex:none}.conn-list,.key-list,.schedule{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.conn-list li,.key-list li,.schedule li{display:flex;align-items:center;gap:8px}.query-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.query-item{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;border-color:#fecaca;background:#fef2f2;white-space:pre-wrap}.query-item:hover{border-color:#dc2626}.query-q{flex:none;width:18px;height:18px;border-radius:50%;background:#dc2626;color:#fff;font-weight:700;font-size:12px;display:grid;place-items:center}.conn-ends{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.key-dot{position:relative;width:22px;height:22px;border-radius:50%;flex:none;overflow:hidden}.key-dot .swatch.custom{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0}.canvas-wrap{position:absolute;top:0;right:0;bottom:0;left:0}.canvas-wrap.drop-active:after{content:"Drop to add";position:absolute;top:12px;right:12px;bottom:12px;left:12px;border:2px dashed var(--accent);border-radius:12px;background:#0ea5e90f;display:grid;place-items:center;font-weight:700;color:var(--accent-ink);pointer-events:none}.canvas{width:100%;height:100%;display:block;touch-action:none;-webkit-user-select:none;user-select:none;background:#f8fafc}.empty-state{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none}.empty-card{text-align:center;background:#ffffffeb;border:1px solid var(--border);border-radius:14px;padding:28px 36px;max-width:380px;box-shadow:0 10px 40px #0f172a0f}.empty-card h2{margin:8px 0 6px;font-size:18px}.empty-card p{margin:4px 0}.empty-bolt{font-size:32px}.banner{position:absolute;top:12px;left:50%;transform:translate(-50%);background:var(--text);color:#fff;padding:7px 8px 7px 14px;border-radius:999px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 24px #0f172a33;white-space:nowrap}.banner.connect{background:#15803d}.banner button{border-radius:999px;border:none;padding:3px 10px;color:var(--text)}.toast{position:absolute;bottom:44px;left:50%;transform:translate(-50%);background:#1e293b;color:#fff;padding:8px 14px;border-radius:8px;box-shadow:0 8px 24px #0f172a33}.hints{position:absolute;bottom:10px;left:12px;font-size:11px;color:var(--muted);background:#ffffffd9;padding:3px 8px;border-radius:6px;pointer-events:none}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a73;display:grid;place-items:center;z-index:50;padding:24px}.modal{background:var(--panel);border-radius:12px;box-shadow:0 20px 60px #0f172a4d;width:min(920px,100%);max-height:100%;display:flex;flex-direction:column}.modal-head,.modal-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px}.modal-head{border-bottom:1px solid var(--border)}.modal-foot{border-top:1px solid var(--border)}.modal-loading{padding:60px;text-align:center}.page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;padding:16px;overflow-y:auto}.page-thumb{display:flex;flex-direction:column;gap:6px;align-items:center;padding:8px;border:2px solid transparent;border-radius:10px}.page-thumb:hover:not(:disabled){border-color:var(--border)}.page-thumb.active,.page-thumb.active:hover:not(:disabled){border-color:var(--accent);background:#f0f9ff}.page-thumb:disabled{opacity:1}.page-img{width:100%;aspect-ratio:1;display:grid;place-items:center;background:#f8fafc;border-radius:6px;overflow:hidden}.page-img img{max-width:100%;max-height:100%;box-shadow:0 1px 4px #0f172a33}.fp-source{color:var(--text);word-break:break-all}.layers-section{flex:none;max-height:55%;display:flex;flex-direction:column;border-top:1px solid var(--border);background:#fbfcfd}.layers-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.layers-head button{text-transform:none;letter-spacing:0;font-size:12px;padding:3px 9px;color:var(--text)}.layers-section .layer-list{overflow-y:auto;padding:0 8px 10px}.tabs{display:flex;border-bottom:1px solid var(--border)}.tabs button{flex:1;border:none;border-radius:0;border-bottom:2px solid transparent;padding:10px 8px 8px;font-weight:600;color:var(--muted);background:none}.tabs button:hover:not(:disabled){background:#f8fafc}.tabs button.active{color:var(--text);border-bottom-color:var(--text)}.tabs.inline{border-bottom:none}.tabs.inline button{flex:none}.tab-count{font-size:10.5px;background:#f1f5f9;border-radius:999px;padding:1px 6px;margin-left:2px}.layer-list{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:2px}.layer-row{border:1px solid transparent;border-radius:8px;padding:4px 6px;cursor:pointer}.layer-row:hover{background:#f8fafc}.layer-row.active{border-color:var(--accent);background:#f0f9ff}.layer-row.is-hidden .layer-name{color:var(--muted);text-decoration:line-through}.layer-main{display:flex;align-items:center;gap:2px}.layer-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;padding-left:4px}.layer-name-input{flex:1;min-width:0;padding:2px 6px!important}.layer-count{font-size:11px;color:var(--muted);padding:0 4px}.icon-toggle{border:none;background:none;padding:3px;color:var(--text);display:grid;place-items:center}.icon-toggle.off{color:#94a3b8}.icon-toggle.on{color:#b45309}.icon-toggle:not(.on):not(.off) svg{opacity:.55}.layer-actions{display:none;gap:2px;padding:4px 0 2px 26px;flex-wrap:wrap}.layer-row.active .layer-actions,.layer-row:hover .layer-actions{display:flex}.layer-actions button{padding:1px 5px;font-size:11px}.layers-totals{margin-left:auto;white-space:nowrap;margin-right:8px;font-weight:500;text-transform:none;letter-spacing:0}.icon-toggle.caret{color:var(--muted);padding:3px 1px}.layer-empty{padding:2px 0 4px 26px}.layer-contents{padding:2px 0 4px 18px;cursor:default}.layer-cat+.layer-cat{margin-top:4px}.layer-cat-head{display:flex;align-items:center;gap:2px}.layer-cat-name{flex:1;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding-left:2px}.layer-cat.is-hidden .layer-cat-name{text-decoration:line-through}.layer-cat.is-hidden .layer-items{opacity:.45}.layer-items{list-style:none;margin:0;padding:0 0 0 22px}.layer-items button{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;padding:1px 4px;border-radius:6px;text-align:left;font-size:12.5px;color:var(--text)}.layer-items button:hover:not(:disabled){background:#e0f2fe}.layer-items button:disabled{opacity:1;cursor:default;color:var(--text)}.layer-items .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.move-here{display:block;padding-left:26px;font-size:12px}.layer-select{display:flex;align-items:center;gap:6px}.layer-select span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}select{border:1px solid var(--border);border-radius:6px;padding:5px 6px;background:#fff;max-width:100%}.menu-note{padding:4px 10px 6px}.product-select{width:100%}.product-select.unset{color:var(--muted)}.product-meta{display:flex;justify-content:space-between;align-items:center;gap:8px}.product-form{display:flex;flex-direction:column;gap:6px}.row.nowrap{flex-wrap:nowrap}.row.end{justify-content:flex-end}.warn,.link-btn.warn{color:var(--danger)}.modal.wide{width:min(1000px,100%);height:min(720px,100%)}.modal-toolbar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border)}.modal-body{flex:1;overflow:auto;padding:0 16px 16px}.product-new{display:flex;flex-direction:column;gap:8px;max-width:360px;margin:14px 0;padding:12px;border:1px solid var(--border);border-radius:10px;background:#f8fafc}.equip-table{width:100%;border-collapse:collapse}.equip-table th{position:sticky;top:0;background:var(--panel);text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:12px 8px 8px;border-bottom:1px solid var(--border)}.equip-table td{padding:6px 8px;border-bottom:1px solid #f1f5f9;vertical-align:middle}.equip-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.equip-table tr.unset td{background:#fff7f7}.equip-table tfoot td{font-weight:700;border-top:2px solid var(--border);border-bottom:none;padding-top:10px}.equip-table tfoot .muted,.equip-table tfoot .warn{font-weight:500}.equip-table td .link-btn{padding:0}.conn-list li.off-layer{opacity:.45}.save-status{font-size:12px;color:var(--muted);white-space:nowrap}.save-status.warn{color:#b45309}.save-status.ok:before{content:"✓ ";color:#16a34a}.menu-sep{height:1px;background:var(--border);margin:4px 0}.plan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;padding-top:16px}.plan-card{border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;background:#fff}.plan-card.current{border-color:var(--accent);box-shadow:0 0 0 2px #0ea5e926}.plan-thumb{border:none;border-radius:0;border-bottom:1px solid var(--border);aspect-ratio:4 / 3;padding:0;background:#f8fafc;display:grid;place-items:center;overflow:hidden}.plan-thumb img{width:100%;height:100%;object-fit:contain}.plan-info{padding:8px 10px 4px;min-width:0}.plan-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.plan-actions{display:flex;gap:4px;padding:6px 10px 10px}.plan-actions button{padding:3px 8px;font-size:12px}.banner.plan{background:var(--accent-ink)}.pct-input{display:flex;align-items:center;gap:3px;width:74px;flex:none}.pct-input input{text-align:right;padding:4px 6px!important}.controlled-by{display:flex;flex-wrap:wrap;gap:4px}.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 4px;border-radius:999px;font-size:12px}.notice{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:12px;background:#fffbeb;border:1px solid #fde68a;border-radius:6px;padding:6px 8px}.tb-group.seg{gap:0}.tb-group.seg button{display:grid;place-items:center;padding:5px 8px}.tb-group.seg button:first-child{border-radius:6px 0 0 6px}.tb-group.seg button:last-child{border-radius:0 6px 6px 0;margin-left:-1px}.tb-group.seg button.active{background:var(--text);border-color:var(--text);color:#fff}.rotate-handle:hover .rh-bg{fill:#e0f2fe}.rotate-handle.active .rh-bg{fill:var(--accent)}.rotate-handle.active .rh-icon{stroke:#fff}.plan-defaults{margin:14px 0 6px}.plan-defaults h3{margin:0 0 2px;font-size:13px}.plan-defaults p{margin:0 0 4px}.plan-defaults select{min-width:260px}.default-tag{font-size:10.5px;font-weight:600;color:var(--accent-ink);background:#e0f2fe;border-radius:999px;padding:1px 7px;margin-left:6px;white-space:nowrap}.menu-heading{padding:6px 10px 2px;font-size:11px;font-weight:700;color:var(--muted)}.owned-input{width:56px;text-align:right;border:1px solid var(--border);border-radius:6px;padding:3px 6px;font-variant-numeric:tabular-nums}.owned-input:focus{outline:none;border-color:var(--accent)}.equip-table tr.covered td{color:var(--muted)}.ok-tag{color:#15803d;font-weight:600;white-space:nowrap}.auth-page{height:100%;overflow-y:auto;display:grid;place-items:center;padding:24px 16px;background:var(--bg)}.auth-card{width:min(380px,100%);background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px #0f172a14;padding:28px 28px 22px;display:flex;flex-direction:column;gap:14px}.auth-card h1{font-size:17px;margin:4px 0 0}.auth-card p{margin:0}.auth-brand{font-weight:800;font-size:20px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}.auth-tagline{margin-top:-8px!important}.auth-field{display:flex;flex-direction:column;gap:5px}.auth-label{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:12px}.auth-label .link-btn{font-weight:400}.auth-field input{width:100%;border:1px solid var(--border);border-radius:6px;padding:8px 10px;background:#fff;outline:none}.auth-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #0ea5e926}.auth-hint{margin-top:-8px!important}.auth-submit{padding:9px 12px;font-weight:600}.auth-switch{text-align:center;color:var(--muted)}.auth-switch .link-btn{display:inline}.auth-msg{border-radius:6px;padding:8px 10px;background:#f1f5f9}.auth-msg.error{background:#fef2f2;color:#b91c1c}.auth-msg.ok{background:#f0fdf4;color:#15803d}.account-btn{border:none;padding:0;background:none;border-radius:999px}.account-btn:hover:not(:disabled){background:none}.avatar{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:999px;background:var(--text);color:#fff;font-weight:700;font-size:12px}.account-btn:hover .avatar{background:#334155}.account-who{display:flex;flex-direction:column;padding:6px 10px 4px;max-width:260px;overflow-wrap:anywhere}.account-modal{width:min(460px,100%)}.account-body{overflow-y:auto}.account-section{display:flex;flex-direction:column;gap:12px;padding:16px;border-bottom:1px solid var(--border)}.account-section:last-child{border-bottom:none}.account-section h2{font-size:13px;margin:0}.account-section p{margin:-6px 0 0}.danger-zone h2{color:var(--danger)}
