:root{--bg: #f6f6f7;--panel: #ffffff;--border: #e2e3e6;--text: #16181d;--muted: #6b7280;--accent: #2563eb;--accent-soft: #eff5ff;--error: #dc2626;--warning: #d97706;--suggestion: #2563eb;--info: #6b7280;--ok: #059669;--radius: 8px;--shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 12px rgba(0, 0, 0, .04)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;color:var(--text);background:var(--bg)}button{font:inherit;cursor:pointer;border:1px solid var(--border);background:#fff;border-radius:6px;padding:6px 12px;transition:background .12s,border-color .12s}button:hover:not(:disabled){background:#f3f4f6}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}button.primary:hover:not(:disabled){background:#1d4ed8}button.danger{color:var(--error);border-color:#fecaca}button.sm{padding:3px 8px;font-size:12px}input,select{font:inherit;padding:6px 9px;border:1px solid var(--border);border-radius:6px;background:#fff;width:100%}input:focus,select:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}.app{display:flex;flex-direction:column;height:100%}.topbar{display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--border);min-height:48px}.topbar .spacer{flex:1}.brand{font-weight:650;letter-spacing:-.2px}.brand small{color:var(--muted);font-weight:400;margin-left:6px}.editor{display:flex;flex:1;min-height:0}.sidebar{width:290px;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}.rightbar{width:340px;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;min-height:0}.viewport{flex:1;position:relative;min-width:0}.viewport canvas{width:100%;height:100%;display:block;outline:none}.panel-h{padding:9px 12px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}.panel-body{overflow-y:auto;padding:10px 12px;flex:1}.tabs{display:flex;border-bottom:1px solid var(--border)}.tabs button{flex:1;border:0;border-radius:0;padding:9px 4px;font-size:12px;color:var(--muted);background:transparent}.tabs button.active{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent);font-weight:600}.tabs button:disabled{opacity:.35}.infobar{display:flex;align-items:center;padding:5px 12px;gap:10px;background:var(--panel);border-bottom:1px solid var(--border)}.header-info{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);min-width:0}.header-info .hi-item{display:inline-flex;align-items:center;gap:5px;max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-info .hi-ico{opacity:.6}.header-info .hi-sub{color:var(--muted);opacity:.85}.header-info .hi-sub:before{content:"· "}.header-info .hi-role{font-size:10px;text-transform:uppercase;letter-spacing:.4px;padding:1px 5px;border-radius:3px;background:var(--border);color:var(--muted)}.header-info .hi-role.warn{background:#fef3c7;color:#92400e}.tabs.wrap{flex-wrap:wrap}.tabs.wrap button{flex:1 0 32%;padding:8px 2px}.rightbar.empty{background:var(--bg, #f8fafc)}.rightbar.empty .tabs button{color:var(--muted);box-shadow:none;font-weight:500}.pad{padding:12px}.bp-item{display:flex;align-items:center;gap:9px;padding:8px 9px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:6px;cursor:grab;background:#fff}.bp-item:hover{border-color:var(--accent);background:var(--accent-soft)}.bp-item:active{cursor:grabbing}.bp-icon{width:34px;height:34px;border-radius:5px;flex-shrink:0;background:linear-gradient(160deg,#e5e7eb,#cbd5e1);display:grid;place-items:center;font-size:15px}.bp-name{font-size:13px;font-weight:500}.bp-meta{font-size:11px;color:var(--muted)}.hint{border:1px solid var(--border);border-left-width:3px;border-radius:var(--radius);padding:8px 10px;margin-bottom:7px;background:#fff}.hint.ERROR{border-left-color:var(--error)}.hint.WARNING{border-left-color:var(--warning)}.hint.SUGGESTION{border-left-color:var(--suggestion)}.hint.INFO{border-left-color:var(--info)}.hint-msg{font-size:13px;font-weight:500}.hint-detail{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45}.hint-values{font-size:11px;color:var(--muted);margin-top:4px;font-family:ui-monospace,monospace}.hint-actions{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}.tag{display:inline-block;font-size:10px;padding:1px 6px;border-radius:99px;background:#f1f3f5;color:var(--muted);margin-right:4px;cursor:pointer}.tag:hover{background:#e5e7eb}.counts{display:flex;gap:6px}.count{font-size:11px;padding:2px 8px;border-radius:99px;background:#f1f3f5;font-weight:600}.count.e{background:#fee2e2;color:#991b1b}.count.w{background:#fef3c7;color:#92400e}.count.s{background:#dbeafe;color:#1e40af}.price-box{border:1px solid var(--border);border-radius:var(--radius);padding:12px;background:#fff;margin-bottom:10px}.price-main{font-size:22px;font-weight:650;letter-spacing:-.5px}.price-sub{font-size:12px;color:var(--muted);margin-top:2px}.price-warn{font-size:12px;color:var(--warning);margin-top:8px;padding:7px 9px;background:#fffbeb;border-radius:6px;line-height:1.5}.price-cat{display:flex;justify-content:space-between;font-size:12px;padding:4px 0}.price-cat span:last-child{font-variant-numeric:tabular-nums}table{width:100%;border-collapse:collapse;font-size:12px}th{text-align:left;padding:6px 5px;border-bottom:1px solid var(--border);color:var(--muted);font-weight:600;position:sticky;top:0;background:#fff}td{padding:5px;border-bottom:1px solid #f1f3f5;font-variant-numeric:tabular-nums}tr.grain-group{background:#fffbeb}.row{display:flex;gap:8px;align-items:center}.row>*{flex:1}.stack{display:flex;flex-direction:column;gap:9px}.muted{color:var(--muted)}.small{font-size:12px}.center{display:grid;place-items:center;height:100%}.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:22px;box-shadow:var(--shadow);width:100%;max-width:380px}.plan-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:8px}.plan-card:hover{border-color:var(--accent)}.badge{font-size:11px;padding:2px 7px;border-radius:99px;background:#f1f3f5;color:var(--muted)}.badge.lock{background:#fef3c7;color:#92400e}.badge.mine{background:#d1fae5;color:#065f46}.banner{padding:8px 14px;font-size:12px;background:#fef3c7;color:#92400e;border-bottom:1px solid #fde68a}.banner.err{background:#fee2e2;color:#991b1b;border-color:#fecaca}.mode-switch{display:flex;border:1px solid var(--border);border-radius:6px;overflow:hidden}.mode-switch button{border:0;border-radius:0;padding:5px 11px;font-size:12px}.mode-switch button.active{background:var(--accent);color:#fff}.viewport-hint{position:absolute;left:12px;bottom:10px;font-size:11px;color:var(--muted);background:#ffffffe6;padding:5px 10px;border-radius:6px;border:1px solid var(--border);pointer-events:none}.viewport-hint kbd{font-family:ui-monospace,monospace;font-size:10px;background:#f1f3f5;border:1px solid var(--border);border-radius:3px;padding:1px 4px;margin:0 2px}h3{font-weight:600}input[type=color]{padding:2px;cursor:pointer}input[type=checkbox],input[type=radio]{cursor:pointer}details summary{list-style:none}details summary::-webkit-details-marker{display:none}