html,body,#root{height:100%;margin:0}body{overflow:hidden}:root{--bg:#0f1115;--canvas:#0b0d11;--surface-1:#171a20;--surface-2:#1e222a;--surface-3:#272c35;--border:#2a2f3a;--border-strong:#3a4150;--text:#e8ebef;--text-dim:#9aa2ad;--text-muted:#69707c;--accent:#4c8dff;--accent-strong:#7aa9ff;--accent-bg:#4c8dff26;--danger:#f2685f;--warn:#e8a13a;--ok:#46c48a;--r-sm:6px;--r:8px;--r-lg:12px;--sh-1:0 2px 8px #00000059;--sh-2:0 14px 36px #0000008c;--font:"Inter", system-ui, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif}*{box-sizing:border-box}.app{background:var(--bg);height:100vh;color:var(--text);font:14px/1.45 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;flex-direction:column;display:flex}.bar,.status{background:var(--surface-1);flex-wrap:wrap;align-items:center;gap:8px 6px;padding:8px 12px;display:flex}.bar{border-bottom:1px solid var(--border);box-shadow:var(--sh-1);z-index:5}.status{border-top:1px solid var(--border);color:var(--text-dim);gap:4px;font-size:12px}.brand{letter-spacing:.01em;color:var(--text);align-items:center;gap:7px;margin-right:6px;padding-right:2px;font-weight:600;display:inline-flex}.brand svg{color:var(--accent)}.sep{background:var(--border);width:1px;height:20px;margin:0 4px}.spacer{flex:1}button{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);color:var(--text-dim);font:inherit;cursor:pointer;align-items:center;gap:6px;padding:6px 11px;line-height:1;transition:background .12s,color .12s,border-color .12s;display:inline-flex}button svg{opacity:.85;flex:none}button:hover:not(:disabled){background:var(--surface-3);color:var(--text);border-color:var(--border-strong)}button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}button:disabled{opacity:.38;cursor:not-allowed}button.on{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-strong)}button.on svg{opacity:1}.segmented,.toggle{border:1px solid var(--border);border-radius:var(--r);background:var(--canvas);gap:2px;padding:2px;display:inline-flex}.segmented button,.toggle button{border-radius:var(--r-sm);color:var(--text-dim);background:0 0;border:none}.segmented button:hover:not(:disabled),.toggle button:hover:not(:disabled){background:var(--surface-2);color:var(--text);border-color:#0000}.segmented button.on,.toggle button.on{background:var(--accent);color:#fff}.stage{flex:1;min-height:0;position:relative}.stage2d{width:100%;height:100%;position:relative}.canvas2d{cursor:crosshair;touch-action:none;background:#0f1216;width:100%;height:100%;display:block}.magnifier{pointer-events:none;background:#0f1216;border:2px solid #48bb78;border-radius:50%;position:absolute;box-shadow:0 6px 20px #0009}.touch-readout{color:#fff;font-variant-numeric:tabular-nums;pointer-events:none;background:#e53e3ee6;border-radius:999px;padding:6px 14px;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.hint{color:#6b747f;pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.panel{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-2);background:color-mix(in srgb, var(--surface-2) 97%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:224px;box-shadow:var(--sh-2);flex-direction:column;gap:11px;padding:14px;display:flex;position:absolute;top:12px;right:12px}.panel-head{justify-content:space-between;align-items:center;margin-bottom:1px;display:flex}.panel-head strong{font-size:14px;font-weight:600}.panel label{color:var(--text-dim);flex-direction:column;gap:5px;font-size:12px;display:flex}.panel input{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--canvas);color:var(--text);font:inherit;font-variant-numeric:tabular-nums;padding:8px 10px;transition:border-color .12s}.panel input:focus-visible,.panel input:focus{border-color:var(--accent);outline:none}.row3{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}select{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);color:var(--text);font:inherit;cursor:pointer;padding:6px 9px;transition:border-color .12s}select:hover{border-color:var(--border-strong)}select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.panel .note{color:var(--text-muted);margin:-3px 0 0;font-size:11px;line-height:1.5}.panel .icon{color:var(--text-dim);background:0 0;border:none;padding:5px}.panel .icon:hover:not(:disabled){background:var(--surface-3);color:var(--text)}.panel .tight{border:1px solid color-mix(in srgb, var(--danger) 45%, transparent);border-radius:var(--r-sm);background:color-mix(in srgb, var(--danger) 12%, transparent);color:var(--danger);margin:0;padding:9px 11px;font-size:12px;line-height:1.5}.panel .danger{border-color:color-mix(in srgb, var(--danger) 45%, transparent);color:var(--danger);justify-content:center}.panel .danger:hover:not(:disabled){background:color-mix(in srgb, var(--danger) 14%, transparent);border-color:var(--danger);color:var(--danger)}.field-label{color:#9aa3ad;margin:2px 0 -4px;font-size:12px}.mat-grid{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.mat{color:#9aa3ad;cursor:pointer;background:#14171c;border:1px solid #333a45;border-radius:8px;flex-direction:column;align-items:center;gap:5px;padding:6px 4px;font-size:11px;display:flex}.mat:hover{border-color:#4a5563}.mat.on{border-color:var(--accent);color:var(--text);box-shadow:0 0 0 1px var(--accent)}.mat-swatch{object-fit:cover;border:1px solid #00000040;border-radius:5px;width:100%;height:34px}.mat-swatch.follow{background:repeating-linear-gradient(45deg,#333a45,#333a45 4px,#232830 4px 8px)}.status .num{font-variant-numeric:tabular-nums;color:var(--text)}.area{color:var(--accent-strong)}.area strong{color:#fff}.warn{color:var(--warn);align-items:center;gap:5px;display:inline-flex}.tip{color:var(--text-muted);align-items:center;gap:5px;display:inline-flex}.tip a{color:var(--text-dim)}.tip a:hover{color:var(--accent-strong)}.status svg{flex:none}.sync-chip svg{opacity:1}.sync-chip.synced{color:var(--ok);border-color:color-mix(in srgb, var(--ok) 40%, var(--border))}.sync-chip.syncing{color:var(--accent-strong)}.sync-chip.offline{color:var(--text-muted)}.sync-chip.conflict{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 55%, transparent);background:color-mix(in srgb, var(--warn) 12%, var(--surface-2))}.sync-banner{z-index:60;border:1px solid color-mix(in srgb, var(--warn) 55%, transparent);border-radius:var(--r);background:color-mix(in srgb, var(--warn) 16%, var(--surface-2));max-width:min(92vw,640px);box-shadow:var(--sh-2);flex-wrap:wrap;align-items:center;gap:14px;padding:10px 14px;display:flex;position:fixed;top:12px;left:50%;transform:translate(-50%)}.sync-banner>span{color:var(--text);align-items:center;gap:7px;display:inline-flex}.sync-banner svg{color:var(--warn);flex:none}.sync-banner-actions{gap:8px;margin-left:auto;display:flex}.sync-modal-backdrop{z-index:70;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0000008c;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.sync-modal{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-2);width:min(92vw,380px);box-shadow:var(--sh-2);flex-direction:column;gap:12px;padding:18px;display:flex}.sync-modal-head{justify-content:space-between;align-items:center;display:flex}.sync-modal-head strong{font-size:15px;font-weight:600}.icon-btn{color:var(--text-dim);background:0 0;border:none;padding:6px}.icon-btn:hover:not(:disabled){background:var(--surface-3);color:var(--text);border-color:#0000}.sync-modal-note{color:var(--text-muted);margin:0;font-size:12px;line-height:1.6}.sync-modal input{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--canvas);color:var(--text);font:inherit;padding:10px 12px}.sync-modal input:focus-visible,.sync-modal input:focus{border-color:var(--accent);outline:none}.sync-modal-actions{align-items:center;gap:8px;display:flex}.sync-modal .primary,.sync-banner .sync-banner-actions button:first-child{background:var(--accent);border-color:var(--accent);color:#fff}.sync-modal .primary:hover:not(:disabled),.sync-banner .sync-banner-actions button:first-child:hover:not(:disabled){background:var(--accent-strong);border-color:var(--accent-strong)}.ghost{background:0 0}.ghost.danger{border-color:color-mix(in srgb, var(--danger) 45%, transparent);color:var(--danger)}.ghost.danger:hover:not(:disabled){background:color-mix(in srgb, var(--danger) 14%, transparent);border-color:var(--danger);color:var(--danger)}@media (width<=720px){.bar,.status{flex-wrap:wrap}button{min-height:44px;padding:10px 14px}select{min-height:44px;padding:8px 10px}.brand,.sep,.spacer,.tip{display:none}.panel{width:auto;max-height:55vh;padding:14px 14px calc(14px + env(safe-area-inset-bottom));background:#1c2027fa;border-bottom:none;border-radius:14px 14px 0 0;inset:auto 0 0;overflow-y:auto;box-shadow:0 -8px 24px #00000080}.panel input,.panel select,.sync-modal input{min-height:44px;padding:10px 12px;font-size:16px}.panel .icon{min-width:44px;min-height:44px;padding:8px 12px}.panel .danger{min-height:44px}}