*{box-sizing:border-box}:root{--bg: #f6f4ef;--panel: #ffffff;--ink: #24303f;--ink-soft: #5b6675;--line: #e5e1d8;--accent: #d97706;--accent-deep: #b45309;--ok: #15803d;--warn: #dc2626;--radius: 10px;font-size:15px}html,body,#root{height:100%;margin:0}body{font-family:-apple-system,PingFang TC,Microsoft JhengHei,Noto Sans TC,Segoe UI,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;touch-action:manipulation}button{font-family:inherit;cursor:pointer}input{font-family:inherit}#app{height:100%;display:grid;grid-template-rows:54px 1fr}.topbar{display:flex;align-items:center;gap:14px;padding:0 14px;background:#2d2a26;color:#f8f5ef}.brand{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.brand-icon{font-size:20px}.brand-name{font-weight:700;font-size:17px;letter-spacing:1px}.brand-sub{font-size:11px;opacity:.55}.industry-picker{display:flex;gap:6px}.chip{border:1px solid rgba(255,255,255,.25);background:transparent;color:#f8f5ef;border-radius:999px;padding:5px 12px;font-size:13px;transition:all .15s}.chip:hover{border-color:#fbbf24}.chip.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.plan-fields{display:flex;gap:10px;align-items:center;margin-left:auto}.field{display:flex;align-items:center;gap:6px;font-size:13px;color:#d8d2c6}.field input{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:6px;padding:4px 8px;width:110px;font-size:13px}.field input::placeholder{color:#fff6}.industry-badge{background:#d9770659;border:1px solid var(--accent);padding:3px 10px;border-radius:999px;font-size:13px}.topbar-actions{display:flex;gap:8px}.btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;padding:6px 12px;font-size:13px;transition:all .12s;min-height:32px}.btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent-deep)}.btn:disabled{opacity:.4;cursor:default}.btn-small{padding:4px 9px;font-size:12.5px;min-height:30px}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.btn-primary:hover:not(:disabled){background:var(--accent-deep);color:#fff}.btn-danger{color:var(--warn)}.btn-danger:hover:not(:disabled){border-color:var(--warn);color:var(--warn)}.btn-icon{padding:4px 9px}.btn-ghost{background:transparent;border-color:#ffffff4d;color:#fff}.btn-tour{border-color:#b45309;color:#b45309;font-weight:600}.main{display:grid;grid-template-columns:288px minmax(420px,1fr) 330px;min-height:0}.sidebar{border-right:1px solid var(--line);background:#fbfaf7;min-height:0}.sidebar-scroll{height:100%;overflow-y:auto;padding:10px}.baseplate-card{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#3f3a33,#57503f);color:#fdf9ef;border-radius:var(--radius);padding:9px 10px;margin-bottom:10px}.bp-icon{font-size:20px}.bp-name{font-weight:700;font-size:13.5px}.bp-tagline{font-size:10.5px;opacity:.75}.bp-price{margin-left:auto;text-align:right;font-size:11px;opacity:.9;white-space:nowrap}.industry-filter{margin-bottom:8px}.filter-title{font-size:11.5px;color:var(--ink-soft);display:block;margin-bottom:4px}.filter-chips{display:flex;gap:6px}.chip-filter{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer}.chip-filter.active{background:#fef3c7;border-color:var(--accent);color:var(--accent-deep);font-weight:600}.chip-filter input{display:none}.catalog-title{font-size:12px;color:var(--ink-soft);margin:8px 2px 6px}.catalog{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.catalog-item{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);transition:opacity .2s}.catalog-item.dimmed{opacity:.38}.cat-body{display:flex;gap:8px;align-items:flex-start;width:100%;background:none;border:0;text-align:left;padding:8px 30px 8px 9px;border-radius:var(--radius)}.cat-body:hover{background:#fdf6e9}.cat-icon{font-size:20px;line-height:1.2}.cat-main{display:flex;flex-direction:column;gap:1px;min-width:0}.cat-name{font-weight:700;font-size:13px}.cat-no{color:var(--accent-deep);font-size:11px;margin-right:4px}.cat-tagline{font-size:11px;color:var(--ink-soft)}.cat-price{font-size:11px;color:#92400e}.cat-expand{position:absolute;top:7px;right:7px;border:0;background:#f1ede4;border-radius:5px;width:20px;height:20px;font-size:11px;color:var(--ink-soft)}.cat-expand.open{background:var(--accent);color:#fff}.brick-details{border-top:1px dashed var(--line);padding:7px 9px 8px}.stud-row{display:flex;gap:6px;font-size:11px;padding:2px 0}.stud-label{flex:0 0 44px;color:var(--accent-deep);font-weight:600}.stud-value{color:var(--ink-soft)}.pains-hint{margin-top:14px}.pains-title{font-size:12px;color:var(--ink-soft);margin-bottom:6px}.pain-hint-card{display:block;width:100%;text-align:left;margin-bottom:5px;background:#fff7ed;border:1px solid #fcd34d;color:#7c2d12;border-radius:8px;padding:7px 9px;font-size:12px}.pain-hint-card:hover{background:#ffedd5}.canvas{display:grid;grid-template-rows:auto 1fr;min-width:0;min-height:0;background:var(--bg)}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;min-height:46px;flex-wrap:wrap;border-bottom:1px solid var(--line);background:#fbfaf7}.toolbar-left{min-width:0}.toolbar-hint{font-size:13px;color:var(--ink-soft)}.toolbar-right{display:flex;gap:6px;flex-wrap:wrap}.brick-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.selected-name{font-weight:700;font-size:14px;margin-right:4px}.connect-banner{display:flex;align-items:center;gap:10px;background:#ecfdf5;border:1px solid #34d399;color:#065f46;border-radius:8px;padding:5px 10px;font-size:13px;font-weight:600}.connect-banner .hint{font-weight:400;opacity:.75}.tour-banner{display:flex;align-items:center;gap:10px;background:#fef9c3;border:1px solid #facc15;color:#713f12;border-radius:8px;padding:6px 12px;font-size:14px;font-weight:700}.tour-tagline{font-weight:400;font-size:12.5px;opacity:.8}.canvas-scroll{overflow:auto;height:100%}.canvas-content{position:relative;min-width:760px;min-height:100%;padding:12px 14px}.rail{display:flex;align-items:stretch;margin-bottom:12px;min-height:116px}.rail-head{flex:0 0 34px;writing-mode:vertical-rl;color:#fff;font-weight:700;font-size:13px;letter-spacing:2px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:10px;text-shadow:0 1px 2px rgba(0,0,0,.25)}.rail-lane{flex:1;display:flex;gap:12px;align-items:center;border-bottom:2px dashed #ddd8cc;padding:8px 6px;flex-wrap:wrap}.rail-empty{font-size:12px;color:#b9b2a4}.canvas-brick{position:relative;width:148px;min-height:88px;background:var(--panel);border:1.5px solid;border-radius:var(--radius);padding:22px 8px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;box-shadow:0 1px 3px #00000014;overflow:hidden;transition:box-shadow .15s,transform .15s}.canvas-brick:hover{box-shadow:0 3px 8px #00000024}.cb-stripe{position:absolute;top:0;left:0;right:0;height:8px}.cb-no{position:absolute;top:10px;left:8px;font-size:10.5px;color:var(--ink-soft);font-weight:700}.cb-tier{position:absolute;top:10px;right:8px;font-size:9.5px;font-weight:700;background:#b45309;color:#fff;border-radius:4px;padding:1px 5px}.cb-tier.lite{background:#65a30d}.cb-icon{font-size:22px;display:block}.cb-name{display:block;font-weight:700;font-size:13px;margin-top:2px}.cb-scene{display:block;font-size:10px;color:var(--accent-deep);margin-top:1px}.cb-price{display:block;font-size:11px;color:#92400e;margin-top:3px}.canvas-brick.selected{outline:3px solid #2563eb;outline-offset:2px}.canvas-brick.connecting-src{outline:3px solid var(--accent);outline-offset:2px;animation:softpulse 1s infinite}.canvas-brick.target-valid{outline:3px dashed var(--ok);outline-offset:3px}.canvas-brick.target-invalid{opacity:.55}.canvas-brick.pulse{animation:painpulse 1.1s ease-in-out 3;outline:3px solid #e11d48;outline-offset:2px}.canvas-brick.tour-active{outline:4px solid #eab308;outline-offset:3px;transform:scale(1.07);z-index:3;box-shadow:0 6px 18px #00000040}.tour-running .canvas-brick:not(.tour-active){opacity:.45}@keyframes softpulse{0%,to{outline-color:var(--accent)}50%{outline-color:#fcd34d}}@keyframes painpulse{0%,to{outline-color:#e11d48}50%{outline-color:#fb7185}}.conn-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:4}.conn-group{pointer-events:none}.conn-hit{fill:none;stroke:transparent;stroke-width:16;pointer-events:stroke;cursor:pointer}.conn-line{fill:none;stroke:var(--ok);stroke-width:2.5;marker-end:url(#conn-arrow);pointer-events:none}.conn-label{font-size:11px;fill:#14532d;font-weight:600;paint-order:stroke;stroke:#f2fbf4;stroke-width:4px;pointer-events:none}.conn-flash{fill:none;stroke:var(--warn);stroke-width:3;stroke-dasharray:8 5;animation:flashfade .9s forwards}@keyframes flashfade{0%{opacity:1}70%{opacity:.9}to{opacity:0}}.quote{border-left:1px solid var(--line);background:#fbfaf7;overflow-y:auto;padding:12px}.quote-title{margin:0 0 8px;font-size:15px}.quote-list{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.quote-row{display:grid;grid-template-columns:26px 1fr 68px 68px 24px;align-items:center;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:5px 6px;font-size:12.5px}.quote-row.base{background:#f3f1ea}.qr-icon{text-align:center}.qr-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qr-sub{display:block;font-weight:400;font-size:10px;color:var(--ink-soft)}.qr-setup,.qr-monthly{text-align:right;font-variant-numeric:tabular-nums}.qr-remove{border:0;background:none;color:#b0a89a;font-size:12px}.qr-remove:hover{color:var(--warn)}.tier-chip{background:#65a30d;color:#fff;font-size:10px;border-radius:4px;padding:1px 5px;margin-left:4px;font-weight:700}.qr-tier{position:absolute}.quote-empty{font-size:12.5px;color:var(--ink-soft);text-align:center;padding:8px}.tier-toggle{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}.tier-btn{border:0;background:#fff;padding:3px 8px;font-size:11.5px;color:var(--ink-soft)}.tier-btn.on{background:var(--accent);color:#fff;font-weight:700}.kit-card{background:linear-gradient(135deg,#fff7ed,#fef3c7);border:1.5px solid #f59e0b;border-radius:var(--radius);padding:8px 10px;margin-bottom:6px}.kit-head{font-weight:700;font-size:13px;color:#92400e}.kit-bricks{font-size:11px;color:#a16207;margin:2px 0}.kit-save{font-size:16px;font-weight:800;color:#b45309}.quote-totals{background:#2d2a26;color:#f8f5ef;border-radius:var(--radius);padding:10px 12px;margin:8px 0}.total-row{display:flex;justify-content:space-between;font-size:13.5px}.total-row strong{font-variant-numeric:tabular-nums;font-size:16px}.total-row.monthly{margin-top:4px}.total-row.monthly strong{font-size:19px;color:#fcd34d}.roi-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:9px 10px;margin-bottom:10px}.roi-title{font-weight:700;font-size:13px;margin-bottom:6px}.roi-inputs{display:flex;gap:8px;margin-bottom:6px}.roi-inputs label{flex:1;font-size:11.5px;color:var(--ink-soft);display:flex;flex-direction:column;gap:3px}.roi-inputs input{border:1px solid var(--line);border-radius:6px;padding:5px 7px;font-size:14px;width:100%}.roi-formula{font-size:11px;color:var(--ink-soft);margin-bottom:4px}.roi-result{font-size:14.5px}.roi-result strong{font-size:20px;color:var(--ok)}.roi-note{font-size:10.5px;color:#9ca3af;margin-top:3px}.export-row{display:flex;flex-wrap:wrap;gap:6px}.toasts{position:fixed;bottom:18px;left:50%;transform:translate(-50%);z-index:300;display:flex;flex-direction:column;gap:6px;align-items:center}.toast{background:#1f2937;color:#fff;border-radius:8px;padding:9px 16px;font-size:13.5px;box-shadow:0 4px 14px #0000004d;max-width:560px;animation:toastin .18s ease-out}.toast-ok{background:#14532d}.toast-warn{background:#7f1d1d}.toast-info{background:#1f2937}@keyframes toastin{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#1e1b178c;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}.modal{background:#fff;border-radius:12px;width:460px;max-width:100%;max-height:86vh;display:flex;flex-direction:column;box-shadow:0 18px 50px #00000059}.modal-wide{width:820px}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:700;font-size:15px}.modal-head>div{display:flex;gap:6px;align-items:center}.modal-body{padding:14px 16px;overflow-y:auto}.setting-block{margin-bottom:16px}.setting-label{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-bottom:6px}.setting-block .field{color:var(--ink);margin-bottom:8px}.setting-block .field input{color:var(--ink);background:#fff;border:1px solid var(--line);width:100%}.mode-options{display:flex;flex-direction:column;gap:8px}.mode-option{text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}.mode-option.active{border-color:var(--accent);background:#fffbeb}.mode-name{font-weight:700;font-size:14px}.mode-desc{font-size:12px;color:var(--ink-soft)}.about{font-size:11.5px;color:var(--ink-soft)}.plans-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.plans-list{display:flex;flex-direction:column;gap:6px}.plan-item{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:7px 9px}.plan-info{flex:1;min-width:0}.plan-name{font-weight:700;font-size:13.5px;display:block}.plan-meta{font-size:11px;color:var(--ink-soft)}.pain-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:220;background:radial-gradient(ellipse at top,#3b342c,#211d18);display:flex;align-items:center;justify-content:center;padding:24px}.pain-panel{max-width:860px;width:100%;color:#f8f5ef;text-align:center}.pain-title{font-size:34px;font-weight:800;margin-bottom:6px}.pain-sub{font-size:17px;opacity:.7;margin-bottom:26px}.pain-cards{display:flex;flex-direction:column;gap:14px;max-width:640px;margin:0 auto}.pain-card{position:relative;background:#fdf9ef;color:#37302a;border:0;border-radius:14px;padding:22px 20px 22px 58px;font-size:21px;font-weight:600;text-align:left;box-shadow:0 6px 18px #00000059;transition:transform .12s}.pain-card:hover{transform:scale(1.02)}.pain-num{position:absolute;left:16px;top:50%;transform:translateY(-50%);background:var(--accent);color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800}.pain-skip{margin-top:22px;font-size:14px}.pain-chosen{font-size:24px;font-weight:700;color:#fde68a;margin-bottom:14px}.pain-solution-title{font-size:19px;margin-bottom:16px}.pain-bricks{display:flex;flex-direction:column;gap:10px;max-width:560px;margin:0 auto 24px}.pain-brick{background:#fdf9ef1f;border:1px solid rgba(253,249,239,.3);border-radius:12px;padding:12px 16px;text-align:left}.pb-icon{font-size:26px;margin-right:8px}.pb-name{font-size:19px;font-weight:700}.pb-tag{display:block;font-size:14px;opacity:.75;margin-top:3px}.pain-go{font-size:19px;padding:12px 26px}.preview-body{background:#8a857c}.client-sheet{max-width:740px;margin:0 auto}.client-page{background:#fff;padding:34px 40px;color:#1f2430}.cp-head{border-bottom:3px solid var(--accent);padding-bottom:12px;margin-bottom:18px}.cp-customer{font-size:30px;font-weight:800}.cp-title{font-size:17px;color:var(--accent-deep);font-weight:700;margin-top:2px}.cp-meta{font-size:12px;color:#6b7280;margin-top:6px}.cp-section{margin-bottom:20px}.cp-section h3{font-size:16px;border-left:4px solid var(--accent);padding-left:8px;margin:0 0 10px}.cp-brick{border:1px solid #e5e7eb;border-radius:8px;padding:10px 12px;margin-bottom:8px;break-inside:avoid}.cpb-head{font-weight:700;font-size:15px}.cpb-tagline{font-size:12.5px;color:#6b7280;margin:2px 0 8px}.cpb-studs{width:100%;border-collapse:collapse;font-size:12px}.cpb-studs th{text-align:left;color:var(--accent-deep);width:52px;font-weight:600;padding:1px 6px 1px 0;vertical-align:top}.cpb-studs td{color:#374151;padding:1px 0}.cp-flows{margin:0;padding-left:20px;font-size:13.5px;line-height:1.9}.cp-arrow{color:var(--ok);font-weight:600}.cp-table{width:100%;border-collapse:collapse;font-size:13px}.cp-table th,.cp-table td{border:1px solid #d1d5db;padding:6px 10px;text-align:left}.cp-table th{background:#f9fafb}.cp-table td:nth-child(2),.cp-table td:nth-child(3){text-align:right;white-space:nowrap}.cp-kit{margin-top:8px;color:#b45309;font-weight:700;font-size:13.5px}.cp-totals{margin-top:10px;font-size:14px;display:flex;gap:28px;flex-wrap:wrap}.cp-totals strong{font-size:17px}.cp-roi{font-size:15px;margin:0}.cp-roi strong{font-size:20px;color:var(--ok)}.cp-note{font-size:11px;color:#9ca3af}.print-only{display:none}.ob-spotlight{position:fixed;border-radius:12px;pointer-events:none;z-index:240;box-shadow:0 0 0 9999px #1a16119e;outline:2.5px solid rgba(217,119,6,.95);transition:top .35s ease,left .35s ease,width .35s ease,height .35s ease}.ob-card{position:fixed;z-index:245;width:360px;max-width:calc(100vw - 24px);background:#fff;border-radius:14px;padding:16px 18px 14px;box-shadow:0 14px 40px #00000061;transition:top .35s ease,left .35s ease}.ob-chip{display:inline-block;background:var(--accent);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:2px 10px;margin-bottom:8px}.ob-title{font-size:17px;font-weight:800;margin:0 0 6px}.ob-body{font-size:14px;color:#3c4656;line-height:1.7;margin:0 0 14px}.ob-actions{display:flex;gap:8px;justify-content:flex-end}.present{font-size:16.5px}.present .main{grid-template-columns:320px minmax(420px,1fr) 372px}.present .topbar{height:62px}.present .brand-name{font-size:20px}.present .chip{font-size:15.5px;padding:8px 16px}.present .field span{font-size:14.5px}.present .field input{font-size:15.5px;width:150px;padding:7px 10px}.present .btn{font-size:15px;padding:9px 15px;min-height:44px}.present .btn-small{font-size:14.5px;padding:7px 12px;min-height:40px}.present .bp-name{font-size:15.5px}.present .bp-tagline{font-size:12px}.present .cat-icon{font-size:26px}.present .cat-name{font-size:15.5px}.present .cat-tagline,.present .cat-price{font-size:12.5px}.present .catalog-title{font-size:13.5px}.present .canvas-toolbar{min-height:62px}.present .toolbar-hint{font-size:15.5px}.present .selected-name{font-size:17px}.present .connect-banner{font-size:15.5px;padding:8px 14px}.present .tour-banner{font-size:17px}.present .rail{min-height:168px;margin-bottom:16px}.present .rail-head{flex-basis:42px;font-size:16px}.present .canvas-brick{width:205px;min-height:124px;padding:28px 10px 10px}.present .cb-icon{font-size:32px}.present .cb-name{font-size:17px}.present .cb-price{font-size:13.5px}.present .cb-no{font-size:13px;top:12px}.present .cb-tier{font-size:11.5px;top:12px}.present .cb-scene{font-size:12px}.present .conn-label{font-size:13.5px;stroke-width:5px}.present .conn-line{stroke-width:3.5}.present .quote-title{font-size:19px}.present .quote-row{font-size:15px;padding:8px}.present .qr-sub{font-size:11.5px}.present .kit-head{font-size:15.5px}.present .kit-bricks{font-size:13px}.present .kit-save{font-size:21px}.present .total-row{font-size:16.5px}.present .total-row strong{font-size:19px}.present .total-row.monthly strong{font-size:24px}.present .roi-title{font-size:15.5px}.present .roi-inputs input{font-size:16px}.present .roi-result{font-size:17px}.present .roi-result strong{font-size:24px}.present .roi-note{font-size:12px}.present .toast{font-size:16px;padding:12px 20px}@media print{@page{size:A4;margin:14mm}body{background:#fff}#app,.toasts,.modal-overlay{display:none!important}.print-only{display:block!important}.client-page{padding:0}.cp-section{break-inside:avoid-page}.cp-brick,.cp-table{break-inside:avoid}}