*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;overscroll-behavior:none}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;background:#fff;color:#1a1a1a;-webkit-tap-highlight-color:transparent}.app-shell{height:100%;width:100%;display:flex;flex-direction:column}.drawing-canvas{display:block;touch-action:none;border:1px solid #e5e5e5;border-radius:12px;background:#fff}.app-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid #e5e5e5;background:#fff}.header-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}.brand{display:flex;align-items:baseline;gap:10px;min-width:0}.brand-name{font-weight:700;font-size:15px}.brand-sub{color:#999;font-size:12px}.header-stats{color:#666;font-size:12px}.header-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}.header-actions .tool.primary{background:#1a1a1a;color:#fff;border-color:#1a1a1a;display:inline-flex;align-items:center;gap:6px}.tool-sep{width:1px;height:18px;background:#e5e5e5;margin:0 2px;flex:none}.seg{display:flex;border:1px solid #e5e5e5;border-radius:8px;overflow:hidden}.seg .tool{border-radius:0}.header-actions .tool{padding:5px 10px;border:1px solid #e5e5e5;border-radius:8px;background:#fff;cursor:pointer;font-size:13px}.header-actions .tool.active{background:#1a1a1a;color:#fff;border-color:#1a1a1a}.header-actions .tool:disabled{opacity:.4;cursor:not-allowed}.app-main{display:flex;flex:1;min-height:0}.canvas-hint{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#b8b8b8;font-size:15px;pointer-events:none;text-align:center}.canvas-hint span{font-size:12px}.tool{min-width:72px;min-height:44px;border:none;border-radius:999px;background:transparent;font-size:15px;cursor:pointer}.tool.icon-tool{min-width:44px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center}.icon-tool svg{display:block}.tool.active{background:#1a1a1a;color:#fff}.tool:disabled{opacity:.35;cursor:default}.wizard-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10}.wizard-canvas{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none}.region-box{position:absolute;border:2px dashed rgba(37,99,235,.7);background:#2563eb14;border-radius:4px;pointer-events:none}.region-index{position:absolute;top:-10px;left:-10px;width:22px;height:22px;border-radius:50%;background:#2563eb;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}.annotation-box{position:absolute;border:2px solid #16a34a;background:#16a34a1a;border-radius:4px;pointer-events:none}.annotation-label{position:absolute;top:-24px;left:0;background:#16a34a;color:#fff;font-size:12px;padding:2px 8px;border-radius:4px;white-space:nowrap}.drag-rect{position:absolute;border:2px dashed #f59e0b;background:#f59e0b1a;pointer-events:none}.wizard-topbar{position:fixed;top:max(12px,env(safe-area-inset-top));left:50%;transform:translate(-50%);display:flex;gap:12px;align-items:center;padding:8px 16px;background:#fffffff2;border:1px solid #e5e5e5;border-radius:999px;box-shadow:0 2px 12px #00000014;font-size:14px;white-space:nowrap}.wizard-topbar button,.annotate-form button,.mode-picker button{min-height:40px;padding:0 16px;border:1px solid #d4d4d4;border-radius:999px;background:#fff;font-size:14px;cursor:pointer}.wizard-topbar .primary,.annotate-form .primary{background:#1a1a1a;color:#fff;border-color:#1a1a1a}.annotate-form{position:fixed;bottom:0;left:0;right:0;z-index:20;background:#fff;border-top:1px solid #e5e5e5;border-radius:16px 16px 0 0;box-shadow:0 -4px 24px #0000001f;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}.form-row{display:flex;gap:8px;flex-wrap:wrap}.form-row.actions{justify-content:flex-end}.chip{border:1px solid #d4d4d4;border-radius:999px;padding:8px 16px;background:#fff;font-size:14px}.chip.active{background:#1a1a1a;color:#fff;border-color:#1a1a1a}.chip.suggested{border-color:#2f6fed;border-style:dashed}.suggestion-badge{margin-left:6px;padding:1px 6px;border-radius:999px;background:#2f6fed;color:#fff;font-size:11px;line-height:1.4}.form-note{min-height:44px;border:1px solid #d4d4d4;border-radius:8px;padding:0 12px;font-size:16px}.annotate-form .danger{color:#dc2626;border-color:#dc2626;margin-right:auto}.mode-picker{position:fixed;bottom:0;left:0;right:0;z-index:20;background:#fff;border-radius:16px 16px 0 0;box-shadow:0 -4px 24px #0000001f;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}.mode-picker p{font-size:15px;color:#666}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;background:#00000073;display:flex;align-items:center;justify-content:center;padding:16px}.modal{background:#fff;border-radius:10px;padding:16px;width:min(560px,100%);max-height:85vh;display:flex;flex-direction:column;gap:10px}.modal h2{margin:0;font-size:15px}.prompt-preview{flex:1;min-height:220px;overflow:auto;background:#f6f6f6;border:1px solid #e0e0e0;border-radius:6px;padding:10px;font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-word;margin:0}.modal-actions{display:flex;gap:8px}.export-dialog p{margin:0 0 4px;font-weight:600}.export-dialog button{display:block;width:100%;margin:4px 0;padding:8px 12px;text-align:left;border:1px solid #e5e5e5;background:#fff;border-radius:8px;cursor:pointer}.modal-actions button{padding:6px 14px;border:1px solid #ccc;background:#fff;border-radius:6px;cursor:pointer}.llm-settings{font-size:12px;color:#666}.llm-settings summary{cursor:pointer;-webkit-user-select:none;user-select:none}.llm-settings label{display:block;margin-top:6px}.llm-settings input{display:block;width:100%;box-sizing:border-box;margin-top:2px;padding:5px 6px;border:1px solid #ccc;border-radius:4px}.llm-settings button{margin-top:8px;padding:5px 12px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer}.workspace{flex:1;position:relative;min-width:0;display:flex;flex-direction:column}.canvas-stage{flex:1;position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:18px}.canvas-foot{display:flex;justify-content:space-between;gap:12px;padding:8px 18px;color:#999;font-size:12px;flex-wrap:wrap}.element-panel{width:400px;flex-shrink:0;border-left:1px solid #e5e5e5;background:#fafafa;overflow-y:auto;display:flex;flex-direction:column}.tabs{display:flex;border-bottom:1px solid #eee;position:sticky;top:0;background:#fafafa;z-index:1}.tabs button{flex:1;border:none;border-radius:0;background:transparent;padding:10px;color:#888;font-size:13px;border-bottom:2px solid transparent;cursor:pointer}.tabs button.active{color:#1a1a1a;border-bottom-color:#1a1a1a;background:#f0f0f0}.tab-count{color:#888;font-weight:400;margin-left:2px}.panel-body{flex:1;overflow-y:auto;min-height:0}.pane{display:none;padding:12px}.pane.active{display:block}.copybar{display:flex;justify-content:flex-end;margin-bottom:8px}.copybar button.primary{background:#1a1a1a;color:#fff;border-color:#1a1a1a}.spec-pre{background:#f6f6f6;border:1px solid #e0e0e0;border-radius:10px;padding:12px;font:11px/1.5 ui-monospace,SF Mono,Consolas,monospace;white-space:pre-wrap;word-break:break-all;color:#555;max-height:55vh;overflow:auto}.panel-empty{padding:32px 16px;color:#aaa;text-align:center;font-size:13px}.panel-list{display:flex;flex-direction:column;gap:8px}.element-card{background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:8px 10px}.element-card.confirmed{border-color:#1a1a1a}.element-card.selected{border-color:#2563eb;background:#2563eb0f}.element-card.stroke-guest{border-style:dashed;border-color:#b8b8b8;background:#fafafa}.card-head{display:flex;align-items:center;gap:8px;cursor:pointer}.card-dot{width:10px;height:10px;border-radius:3px;flex:none}.card-index{color:#999;font-size:12px}.card-type{font-weight:600}.card-check{color:#1a1a1a;font-size:12px;margin-left:auto}.card-conf{color:#999;font-size:12px;margin-left:auto}.card-reason{color:#888;font-size:12px;margin-top:4px}.card-parent{color:#4a7ba6;font-size:12px;margin-top:2px}.card-actions{display:flex;gap:8px;margin-top:8px}.card-actions select{flex:1;padding:4px 6px;border:1px solid #ddd;border-radius:6px;background:#fff}.card-actions button{padding:4px 12px;border:1px solid #ddd;border-radius:6px;background:#fff;cursor:pointer}.card-actions .primary{background:#1a1a1a;color:#fff;border-color:#1a1a1a}.card-edit{margin-top:8px;display:flex;flex-direction:column;gap:8px}.card-note{padding:6px 8px;border:1px solid #ddd;border-radius:6px}.card-styles{display:flex;gap:6px;flex-wrap:wrap}.card-styles .chip{padding:3px 10px;border:1px solid #ddd;border-radius:999px;background:#fff;cursor:pointer;font-size:13px}.card-styles .chip.active{background:#1a1a1a;color:#fff;border-color:#1a1a1a}.card-edit .danger{color:#c0392b;border:1px solid #e5b4b0;border-radius:6px;background:#fff;padding:4px 10px;cursor:pointer;align-self:flex-start}@media(max-width:899px){.canvas-stage{padding:8px}.canvas-foot{padding:6px 8px}.element-panel{display:none}}.panel-legend{margin-top:auto;padding:10px 12px;border-top:1px solid #eee;color:#888;font-size:12px;line-height:1.8}.panel-legend b{color:#555;display:block}.selection-delete-btn{display:block;position:fixed;bottom:12px;left:50%;transform:translate(-50%);z-index:40;padding:8px 18px;border:1px solid #dc2626;border-radius:999px;background:#fffffff2;box-shadow:0 2px 12px #0000001a;color:#dc2626;cursor:pointer;font-size:13px;font-weight:600}@media(min-width:900px){.selection-delete-btn{display:none}}.panel-drawer-handle{display:none}@media(max-width:899px){.element-panel{display:flex;position:fixed;left:0;right:0;bottom:0;top:auto;max-height:55vh;border-top:1px solid #e5e5e5;border-left:none;border-radius:12px 12px 0 0;transform:translateY(100%);transition:transform .25s ease;z-index:30;box-shadow:0 -4px 16px #0000001f}.element-panel.open{transform:translateY(0)}.panel-drawer-handle{display:inline-flex;align-items:center;gap:6px;position:fixed;bottom:12px;left:50%;transform:translate(-50%);z-index:29;padding:8px 18px;border:1px solid #e5e5e5;border-radius:999px;background:#fffffff2;box-shadow:0 2px 12px #0000001a;cursor:pointer;font-size:13px}}.page-gen-dialog{width:min(720px,100%)}.page-gen-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#666}.page-gen-field textarea{width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid #ccc;border-radius:6px;font:inherit;font-size:13px;color:#1a1a1a;resize:vertical}.page-gen-status{margin:0;font-size:12px;color:#666}.page-gen-hints{margin:0;padding-left:18px;font-size:12px;line-height:1.7;color:#8a6d3b}.page-gen-error{margin:0;padding:8px 10px;border:1px solid #f0b7b1;border-radius:6px;background:#fdf0ef;color:#b3261e;font-size:12px;line-height:1.6}.page-gen-preview{flex:1;width:100%;min-height:320px;border:1px solid #e0e0e0;border-radius:6px;background:#fff}@media(max-width:899px){.page-gen-preview{min-height:240px}}.header-actions .tool.ai-page{display:inline-flex;align-items:center;gap:6px}.page-gen-dialog{overflow-y:auto}.page-gen-dialog .llm-settings{padding-top:8px;border-top:1px solid #eee}.page-gen-notice{margin:0;padding:6px 10px;border:1px solid #e5e5e5;border-radius:6px;background:#fafafa;color:#555;font-size:12px;line-height:1.6}