:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;--bg: #f3f5f7;--surface: #ffffff;--surface-raised: #fbfcfd;--ink: #171a1f;--muted: #66717f;--soft: #8792a0;--border: #dce2e8;--border-strong: #c3ccd5;--accent: #0f8f83;--accent-strong: #0b6f65;--accent-soft: #e4f5f2;--danger: #d94841;--danger-soft: #fff0ef;--warning: #b97316;--shadow: 0 18px 45px rgb(21 27 35 / 10%)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;background:linear-gradient(180deg,#f7f8fa 0%,var(--bg) 42%,#eef2f4 100%);color:var(--ink)}button,input,select{font:inherit}button{border:0}.app-shell{min-height:100vh;display:grid;grid-template-rows:auto 1fr}.hidden-input{display:none}.topbar{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 22px;background:#ffffffe0;border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}.brand{min-width:0;display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;display:grid;place-items:center;color:#fff;background:#151a20;border-radius:8px;box-shadow:inset 0 -8px 18px #ffffff14;flex:0 0 auto}.brand h1{margin:0;font-size:20px;line-height:1.1;letter-spacing:0}.brand p{margin:4px 0 0;color:var(--muted);font-size:13px}.top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.button,.icon-button,.segment,.swatch,.error-toast{transition:transform .15s ease,border-color .15s ease,background-color .15s ease,color .15s ease,box-shadow .15s ease}.button{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;border-radius:8px;border:1px solid transparent;cursor:pointer;font-weight:700;white-space:nowrap}.button.primary{background:var(--accent);color:#fff;box-shadow:0 10px 20px #0f8f832e}.button.primary:hover:not(:disabled){background:var(--accent-strong);transform:translateY(-1px)}.button.secondary{color:var(--ink);background:var(--surface);border-color:var(--border)}.button.secondary:hover:not(:disabled),.icon-button:hover:not(:disabled){border-color:var(--border-strong);box-shadow:0 8px 20px #151b2314;transform:translateY(-1px)}.button:disabled,.icon-button:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.icon-group{display:inline-flex;align-items:center;gap:6px;padding:4px;border:1px solid var(--border);background:var(--surface);border-radius:8px}.icon-button{width:34px;height:34px;display:grid;place-items:center;color:var(--ink);background:transparent;border:1px solid transparent;border-radius:7px;cursor:pointer}.icon-button.danger:not(:disabled){color:var(--danger)}.workspace{display:grid;grid-template-columns:minmax(250px,290px) minmax(0,1fr) minmax(230px,270px);gap:16px;padding:16px;min-height:calc(100vh - 74px)}.tool-panel,.meta-panel,.editor-pane{min-width:0}.tool-panel,.meta-panel{align-self:stretch;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);overflow:hidden}.panel-section{padding:18px;border-bottom:1px solid var(--border)}.panel-section:last-child{border-bottom:0}.section-title{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:14px;font-weight:800;margin-bottom:14px}.color-control{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center}.color-control input[type=color]{width:48px;height:40px;padding:3px;border:1px solid var(--border);border-radius:8px;background:var(--surface-raised);cursor:pointer}.color-control code{height:40px;display:flex;align-items:center;padding:0 11px;border:1px solid var(--border);border-radius:8px;background:var(--surface-raised);color:var(--muted);font-size:13px}.swatches{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:12px}.swatch{aspect-ratio:1;min-height:28px;border-radius:8px;border:1px solid var(--border);cursor:pointer;background:linear-gradient(45deg,rgb(0 0 0 / 8%) 25%,transparent 25% 75%,rgb(0 0 0 / 8%) 75%),var(--swatch);background-size:10px 10px;box-shadow:inset 0 0 0 2px #fffc}.swatch.active{outline:2px solid var(--accent);outline-offset:2px}.range-row,.angle-control,.select-row{display:grid;grid-template-columns:minmax(0,1fr) 70px;gap:10px;align-items:center}.range-row input[type=range],.angle-control input[type=range]{width:100%;accent-color:var(--accent)}.number-input,.select-row select{width:100%;height:38px;border:1px solid var(--border);border-radius:8px;background:var(--surface-raised);color:var(--ink);padding:0 10px}.segmented{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:5px;border:1px solid var(--border);border-radius:8px;background:var(--surface-raised)}.segment{min-height:40px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 6px;border-radius:7px;color:var(--muted);background:transparent;cursor:pointer;font-size:13px;font-weight:800}.segment.active{color:var(--accent-strong);background:var(--accent-soft);box-shadow:inset 0 0 0 1px #0f8f832e}.angle-control{grid-template-columns:minmax(0,1fr) 72px 32px;margin-top:12px}.angle-control.disabled{opacity:.46}.angle-control span{color:var(--soft);font-size:12px;font-weight:800}.select-row{grid-template-columns:45px 1fr;color:var(--muted);font-size:13px;font-weight:700}.editor-pane{position:relative;display:grid;grid-template-rows:auto 1fr;min-height:520px;background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden;box-shadow:var(--shadow)}.editor-pane.dragging{border-color:var(--accent);box-shadow:var(--shadow),0 0 0 4px #0f8f8324}.canvas-toolbar{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface-raised)}.canvas-title{min-width:0}.canvas-toolbar strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;max-width:55vw}.canvas-toolbar span,.format-badge{color:var(--muted);font-size:12px;font-weight:800;white-space:nowrap}.canvas-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}.zoom-tools{display:grid;grid-template-columns:34px minmax(90px,140px) 52px 34px 34px;align-items:center;gap:6px;padding:4px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}.zoom-tools input[type=range]{width:100%;accent-color:var(--accent)}.zoom-tools output{color:var(--ink);font-size:12px;font-weight:900;text-align:center}.icon-button.compact{width:30px;height:30px}.canvas-stage{min-height:0;overflow:auto;overscroll-behavior:contain;background-color:#e9edf0;background-image:linear-gradient(45deg,#d9dee3 25%,transparent 25%),linear-gradient(-45deg,#d9dee3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9dee3 75%),linear-gradient(-45deg,transparent 75%,#d9dee3 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.canvas-zoom-plane{min-width:100%;min-height:100%;width:max-content;height:max-content;display:grid;place-items:center;padding:22px}.image-canvas{display:block;max-width:none;max-height:none;flex:0 0 auto;border-radius:4px;background:#fff;box-shadow:0 0 0 1px #151b231f,0 20px 50px #151b2333;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.empty-state{grid-row:1 / -1;min-height:520px;display:grid;place-items:center;align-content:center;gap:18px;padding:28px;background:linear-gradient(90deg,transparent 0 23px,rgb(15 143 131 / 9%) 23px 24px,transparent 24px 100%),linear-gradient(0deg,transparent 0 23px,rgb(217 72 65 / 9%) 23px 24px,transparent 24px 100%),var(--surface-raised);background-size:24px 24px;color:var(--muted)}.format-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;max-width:420px}.format-strip span{min-width:45px;height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px;border:1px solid var(--border);border-radius:7px;color:var(--muted);background:#fffc;font-size:12px;font-weight:800}.loading-layer{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#ffffffb8;color:var(--accent-strong);font-weight:900;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:12}.error-toast{position:absolute;left:18px;right:18px;bottom:18px;min-height:44px;padding:10px 14px;border-radius:8px;color:var(--danger);background:var(--danger-soft);border:1px solid rgb(217 72 65 / 28%);cursor:pointer;font-weight:800;text-align:left;z-index:14}.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat-grid div{min-height:72px;display:grid;align-content:center;gap:5px;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--surface-raised)}.stat-grid span,.image-meta dt{color:var(--muted);font-size:12px;font-weight:800}.stat-grid strong{font-size:22px;line-height:1}.image-meta{margin:14px 0 0;display:grid;gap:8px}.image-meta div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px}.image-meta dd{margin:0;color:var(--ink);font-size:13px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-section{min-height:260px}.history-list{display:grid;gap:8px}.history-item{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:38px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-raised);font-size:12px}.history-item i{width:12px;height:12px;border:1px solid rgb(0 0 0 / 14%);border-radius:50%}.history-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:800}.history-item strong{color:var(--soft)}.empty-history{height:120px;display:grid;place-items:center;border:1px dashed var(--border-strong);border-radius:8px;color:var(--soft);font-weight:900}@media (max-width: 1180px){.workspace{grid-template-columns:minmax(240px,280px) minmax(0,1fr)}.meta-panel{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr}.meta-panel .panel-section{border-bottom:0;border-right:1px solid var(--border)}.meta-panel .panel-section:last-child{border-right:0}}@media (max-width: 820px){.topbar{position:static;align-items:flex-start}.top-actions{width:100%;justify-content:flex-start}.workspace{grid-template-columns:1fr;min-height:auto;padding:12px}.tool-panel,.meta-panel{display:block}.meta-panel .panel-section{border-right:0;border-bottom:1px solid var(--border)}.editor-pane,.empty-state{min-height:420px}.canvas-toolbar{align-items:flex-start;flex-direction:column}.canvas-actions{width:100%;justify-content:space-between}.zoom-tools{grid-template-columns:34px minmax(84px,1fr) 50px 34px 34px;flex:1 1 auto}.canvas-toolbar strong{max-width:calc(100vw - 76px)}}@media (max-width: 520px){.topbar{padding:12px}.brand-mark{width:38px;height:38px}.brand h1{font-size:18px}.button{flex:1 1 auto}.icon-group{flex:0 0 auto}.panel-section{padding:15px}.segmented{grid-template-columns:1fr}.canvas-zoom-plane{padding:12px}}