:root { font-family: Inter, "Microsoft YaHei", sans-serif; color: #18312e; background: #f3f7f5; --ink:#18312e; --muted:#68807a; --line:#d9e5e1; --panel:#ffffff; --canvas:#f3f7f5; --stage:#eaf2ef; --accent:#138b7e; --accent-soft:#dff6ef; --rail:#fbfdfc; }
* { box-sizing: border-box; } [hidden] { display:none!important; } body { min-width: 320px; margin: 0; overflow: hidden; color: var(--ink); background: var(--canvas); } button, input, select { font: inherit; } button, label { -webkit-tap-highlight-color: transparent; }
.app-header { position:relative; z-index:5; display:flex; align-items:center; min-height:60px; gap:20px; padding:0 18px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter:blur(14px); }.brand { display:inline-flex; align-items:center; gap:9px; color:var(--ink); font-size:17px; font-weight:700; letter-spacing:0; text-decoration:none; }.brand-mark { display:grid; grid-template-columns:repeat(2, 8px); gap:3px; transform:rotate(8deg); }.brand-mark i { width:8px; height:8px; border-radius:2px; background:#22bfae; transition:transform .18s ease; }.brand-mark i:nth-child(2){background:#ff8260}.brand-mark i:nth-child(3){background:#bfd6ca}.brand-mark i:nth-child(4){background:#427183}.brand:hover i:nth-child(1){transform:translate(-1px,-1px)}.brand:hover i:nth-child(4){transform:translate(1px,1px)}
.project-title { display:flex; align-items:center; gap:8px; min-width:0; padding-left:16px; border-left:1px solid var(--line); color:var(--muted); font-size:12px; }.project-title strong { color:var(--ink); font-size:13px; }.project-dot { width:7px; height:7px; border-radius:50%; background:#22bfae; box-shadow:0 0 0 4px #22bfae1e; }.header-actions { display:flex; align-items:center; gap:7px; margin-left:auto; }
.primary-button,.secondary-button,.icon-button { display:inline-flex; align-items:center; justify-content:center; min-height:34px; border:0; border-radius:8px; cursor:pointer; transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; }.primary-button { padding:0 12px; color:#fff; background:#147f76; box-shadow:0 6px 14px #147f7626; }.primary-button:hover { background:#0d7068; transform:translateY(-1px); }.secondary-button { padding:0 11px; border:1px solid var(--line); color:#365451; background:var(--panel); }.secondary-button:hover { color:#087b71; border-color:#9bded2; background:#effaf6; transform:translateY(-1px); }.icon-button { width:34px; color:var(--muted); background:transparent; font-size:19px; }.icon-button:hover { color:#087b71; background:#eaf6f2; transform:translateY(-1px); }.icon-button:disabled { opacity:.38; cursor:not-allowed; transform:none; }.header-upload { cursor:pointer; }
.workspace { --settings-width:276px; --history-width:286px; display:grid; grid-template-columns:var(--settings-width) 7px 54px minmax(0,1fr) 7px var(--history-width); height:calc(100vh - 60px); background:var(--canvas); }.settings-panel,.right-sidebar { min-width:0; overflow:auto; overscroll-behavior:contain; background:var(--panel); scrollbar-color:#a5bdb6 transparent; }.settings-panel { padding:17px 14px 28px; border-right:1px solid var(--line); }.right-sidebar { border-left:1px solid var(--line); }.resize-handle { position:relative; z-index:3; cursor:col-resize; background:var(--canvas); touch-action:none; }.resize-handle::after { position:absolute; top:18px; bottom:18px; left:2px; width:2px; border-radius:2px; background:#c0d5cf; content:""; }.resize-handle:hover::after,.resize-handle:focus-visible::after { background:#21bda9; box-shadow:0 0 10px #21bda966; }.resize-handle:focus-visible { outline:0; }
.tool-rail { display:flex; flex-direction:column; align-items:center; gap:9px; padding:14px 8px; border-right:1px solid var(--line); background:var(--rail); }.tool-rail span { flex:1; }.rail-button { display:grid; width:37px; height:37px; place-items:center; border:0; border-radius:10px; color:#708883; background:transparent; cursor:pointer; font-size:17px; text-decoration:none; transition:transform .18s ease,background .18s ease,color .18s ease; }.rail-button:hover { color:#087c72; background:#eaf7f2; transform:translateY(-2px); }.rail-button.is-active { color:#087d73; background:#def7ef; box-shadow:inset 0 0 0 1px #b6e8dc; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:9px; min-height:30px; }.panel-heading > span { color:var(--muted); font-size:11px; }.panel-heading h2 { margin:0; color:var(--ink); font-size:16px; font-weight:700; }.drawer-close { display:none; }.settings-section { display:grid; gap:12px; margin:0 0 13px; padding:14px; border-bottom:1px solid var(--line); }.settings-panel > .panel-heading { margin:0 3px 9px; }.field-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.field-row label,.processing-section label { display:grid; gap:5px; color:var(--muted); font-size:11px; }.field-row input,.processing-section input:not([type="range"]):not([type="checkbox"]),.processing-section select { width:100%; min-height:34px; padding:0 9px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:var(--panel); outline:0; }.field-row input:focus,.processing-section input:focus,.processing-section select:focus { border-color:#49bdaa; box-shadow:0 0 0 3px #49bdaa21; }.segmented,.tool-choice { display:grid; padding:3px; border:0; border-radius:9px; background:#edf3f0; }.segmented { grid-template-columns:1fr 1fr; }.segmented legend,.tool-choice legend { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }.segmented label,.tool-choice label { position:relative; display:grid; place-items:center; min-height:31px; cursor:pointer; }.segmented input,.tool-choice input { position:absolute; opacity:0; }.segmented span,.tool-choice span { width:100%; padding:7px 5px; border-radius:6px; color:var(--muted); font-size:11px; text-align:center; transition:background .18s ease,color .18s ease,box-shadow .18s ease; }.segmented input:checked + span,.tool-choice input:checked + span { color:#17504a; background:#fff; box-shadow:0 2px 6px #2846401c; }.action-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.action-grid button { min-width:0; font-size:11px; }.section-label { color:var(--muted); font-size:11px; font-weight:700; }.tool-choice { grid-template-columns:repeat(3,1fr); }.switch-row { display:flex!important; align-items:center; justify-content:space-between; color:#506963!important; font-size:12px!important; }.switch-row input { width:34px; height:19px; margin:0; appearance:none; border-radius:10px; background:#b8cac5; cursor:pointer; transition:background .18s ease; }.switch-row input::after { display:block; width:15px; height:15px; margin:2px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0003; content:""; transition:transform .18s ease; }.switch-row input:checked { background:#1db69f; }.switch-row input:checked::after { transform:translateX(15px); }.processing-section { padding-top:16px; }.processing-section summary { cursor:pointer; color:var(--ink); font-size:13px; font-weight:700; }.processing-section[open] { display:grid; }.processing-section p { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }.processing-section input[type="range"] { width:100%; accent-color:#139180; }.processing-section input[type="color"] { padding:2px!important; }
.canvas-panel { display:grid; min-width:0; min-height:0; grid-template-rows:auto minmax(0,1fr) auto; gap:12px; padding:14px 18px 12px; background:var(--canvas); }.canvas-toolbar { display:flex; align-items:center; justify-content:space-between; min-height:40px; padding:0 3px 10px; border-bottom:1px solid var(--line); }.canvas-toolbar > div:first-child > * { display:block; }.canvas-toolbar strong { margin-top:2px; font-size:14px; }.canvas-toolbar > div:first-child span:last-child { margin-top:3px; color:var(--muted); font-size:11px; }.eyebrow { color:#7aa89c!important; font-size:9px!important; font-weight:700; letter-spacing:1.1px; }.zoom-control { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }.zoom-control input { width:105px; accent-color:#159987; }.zoom-control output { width:35px; color:#46645d; font-variant-numeric:tabular-nums; }.canvas-scroll { display:grid; min-height:0; place-items:center; overflow:auto; padding:clamp(22px,5vw,68px); border:1px solid #dce8e4; border-radius:11px; background-color:var(--stage); background-image:radial-gradient(#a9c6bd 1px,transparent 1px); background-size:16px 16px; }.canvas-scroll.is-pan-ready,.canvas-scroll.is-pan-ready #grid-canvas { cursor:grab; }.canvas-scroll.is-panning,.canvas-scroll.is-panning #grid-canvas { cursor:grabbing; user-select:none; }.canvas-scroll.is-panning .canvas-shell { transform:none; }.canvas-shell { padding:8px; border:1px solid #c9d9d3; border-radius:9px; background:#fff; box-shadow:0 15px 38px #27473c26; transition:transform .18s ease,box-shadow .18s ease; }.canvas-shell:hover { transform:translateY(-2px); box-shadow:0 19px 42px #27473c31; }#grid-canvas { display:block; max-width:none; background:#f7f5ef; cursor:crosshair; touch-action:none; }.status { min-height:17px; margin:0 3px; color:var(--muted); font-size:11px; }.status.error { color:#c8463e; }
.palette-panel,.preview-panel { padding:17px 15px; }.palette-panel { border-bottom:1px solid var(--line); }.settings-panel .preview-panel { position:sticky; top:0; z-index:2; margin:0 -14px 13px; padding:14px; border-block:1px solid var(--line); background:var(--panel); box-shadow:0 8px 14px #183a2d0c; }.palette-description { min-height:34px; margin:7px 0 12px; color:var(--muted); font-size:11px; line-height:1.45; }.selected-color { display:grid; grid-template-columns:41px 1fr; align-items:center; gap:9px; margin-bottom:11px; }.selected-color > span { width:41px; aspect-ratio:1; border:2px solid #fff; border-radius:8px; box-shadow:0 0 0 1px #afc8c0,0 5px 13px #2042361a; }.selected-color label > span { display:block; margin-bottom:4px; color:var(--muted); font-size:10px; }.selected-color input { width:100%; min-height:30px; padding:0 8px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:var(--panel); text-transform:uppercase; }.color-square { position:relative; height:123px; overflow:hidden; border:1px solid #bdcfca; border-radius:8px; cursor:crosshair; touch-action:none; background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,var(--hue,#e45a4f)); }.color-square.is-locked { opacity:.45; cursor:not-allowed; }.color-square i { position:absolute; width:14px; height:14px; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 2px #27443d; transform:translate(-50%,-50%); pointer-events:none; }.hue-slider { width:100%; margin:11px 0; accent-color:#138b7e; }.full-button { width:100%; }.palette { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-top:12px; }.quick-palette { padding-top:12px; border-top:1px solid var(--line); }.palette-swatch { aspect-ratio:1; border:1px solid #76938b66; border-radius:6px; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; }.palette-swatch:hover,.palette-swatch.is-selected { position:relative; z-index:1; transform:translateY(-2px) scale(1.04); box-shadow:0 0 0 2px #22bcae,0 7px 13px #1c51402b; }.palette-swatch.is-current { position:relative; z-index:1; box-shadow:0 0 0 2px #18c8b3,0 7px 14px #164a3d35; }.palette-swatch.is-current::before { position:absolute; top:-5px; right:-5px; display:grid; width:15px; height:15px; place-items:center; border:1px solid #fff; border-radius:50%; color:#fff; background:#087d73; box-shadow:0 1px 4px #153b3270; content:"✓"; font-size:10px; font-weight:800; line-height:1; }.palette-swatch.is-locked { cursor:pointer; }.preview-panel { border-bottom:1px solid var(--line); }.live-preview { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:11px; }.live-preview figure { min-width:0; margin:0; }.live-preview img { display:block; width:100%; aspect-ratio:1; object-fit:contain; border:1px solid var(--line); border-radius:7px; background:#eff4f2; }.live-preview figure:first-child img { image-rendering:auto; }.live-preview figure:last-child img { image-rendering:pixelated; }.live-preview figcaption { margin-top:4px; color:var(--muted); font-size:10px; text-align:center; }.preview-panel.is-eyedropper #live-original { cursor:crosshair; border-color:#19b9a7; box-shadow:0 0 0 3px #19b9a729,0 7px 16px #174c4030; transform:translateY(-1px); }
dialog { width:min(720px,calc(100% - 28px)); padding:0; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:var(--panel); box-shadow:0 24px 70px #142c2545; } dialog::backdrop { background:#142b2490; backdrop-filter:blur(3px); }.dialog-head,.dialog-actions { display:flex; align-items:center; justify-content:space-between; padding:14px 17px; border-bottom:1px solid var(--line); }.dialog-head h2 { margin:2px 0 0; font-size:16px; }.dialog-head p { margin:3px 0 0; color:var(--muted); font-size:11px; }.dialog-head + canvas { display:block; width:calc(100% - 34px); height:auto; margin:14px 17px 0; background:#15211f; touch-action:none; }.crop-help { margin:11px 17px 0; color:var(--muted); font-size:12px; }.dialog-actions { justify-content:flex-end; margin-top:14px; border-top:1px solid var(--line); border-bottom:0; }.preview-crop-button { width:100%; margin-top:11px; }
.palette-manage { margin:0 0 12px; padding:9px 0; border-block:1px solid var(--line); }.palette-manage[hidden] { display:none!important; }.palette-swatch.is-disabled { position:relative; opacity:.48; }.palette-swatch.is-disabled::after { position:absolute; inset:45% -2px auto; height:2px; border-radius:2px; background:#d93f46; content:""; transform:rotate(-35deg); }.palette-swatch.is-managing,.palette-swatch.is-editing { position:relative; }.palette-swatch.is-managing:hover { box-shadow:0 0 0 2px #e15c62,0 7px 13px #1c51402b; }.palette-swatch.is-editing:hover { box-shadow:0 0 0 2px #22bcae,0 7px 13px #1c51402b; }
.color-count-control { display:grid; grid-template-columns:minmax(0,1fr) 72px; gap:7px; }.color-count-control input[hidden] { display:none; }.hue-slider { height:10px; appearance:none; border-radius:6px; background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }.hue-slider::-webkit-slider-thumb { width:17px; height:17px; appearance:none; border:2px solid #fff; border-radius:50%; background:var(--hue-color,#f00); box-shadow:0 0 0 1px #36544d,0 2px 5px #0003; }.hue-indicator { display:flex; align-items:center; justify-content:flex-end; gap:7px; margin-top:-6px; color:var(--muted); font-size:10px; }.hue-indicator span { width:13px; height:13px; border:1px solid var(--line); border-radius:4px; }.hue-indicator output { font-variant-numeric:tabular-nums; }
body.is-dark { --ink:#e8f2ee; --muted:#a5bbb4; --line:#29433d; --panel:#142321; --canvas:#101c1a; --stage:#1c302c; --accent:#78e4c9; --accent-soft:#1c4c42; --rail:#172826; } body.is-dark .app-header { background:color-mix(in srgb,#142321 92%,transparent); } body.is-dark .brand { color:#eef8f4; } body.is-dark .project-title strong,body.is-dark .panel-heading h2 { color:#eef8f4; } body.is-dark .secondary-button { color:#c7ded7; background:#1e3631; border-color:#3a5750; } body.is-dark .secondary-button:hover { color:#91f2dc; background:#28483f; border-color:#5fae9d; } body.is-dark .icon-button:hover { color:#91f2dc; background:#203d36; } body.is-dark .tool-rail { border-color:#29433d; } body.is-dark .rail-button { color:#a3bdb4; } body.is-dark .rail-button:hover { color:#8ef0d7; background:#203d36; } body.is-dark .rail-button.is-active { color:#8cf0d8; background:#1d5046; box-shadow:inset 0 0 0 1px #367e70; } body.is-dark .segmented,body.is-dark .tool-choice { background:#203932; } body.is-dark .segmented input:checked + span,body.is-dark .tool-choice input:checked + span { color:#effaf5; background:#304a43; box-shadow:0 2px 6px #0005; } body.is-dark .field-row input,body.is-dark .processing-section input:not([type="range"]):not([type="checkbox"]),body.is-dark .processing-section select,body.is-dark .selected-color input { color:#e8f3ee; border-color:#38564e; background:#1c322e; } body.is-dark .canvas-scroll { border-color:#38554d; background-color:#1d302d; background-image:radial-gradient(#49655e 1px,transparent 1px); } body.is-dark .canvas-shell { border-color:#778b84; background:#eef1ea; box-shadow:0 15px 38px #0008; } body.is-dark .zoom-control output { color:#b5cac3; } body.is-dark .selected-color > span { border-color:#edf7f2; box-shadow:0 0 0 1px #54756b; } body.is-dark .color-square { border-color:#56746b; } body.is-dark .palette-swatch { border-color:#d4eee555; } body.is-dark dialog { box-shadow:0 24px 70px #000a; }
@media (max-width:1050px) { .workspace { grid-template-columns:54px minmax(0,1fr) 7px 270px; }.settings-panel,.workspace > #settings-resize { display:none; }.tool-rail { border-right:1px solid var(--line); }.right-resize { display:block; } }
@media (max-width:760px) { body { overflow:auto; }.app-header { gap:10px; padding:0 10px; }.project-title { display:none; }.header-upload { display:none; }.workspace { height:calc(100vh - 60px); grid-template-columns:46px minmax(0,1fr); }.right-sidebar,.right-resize { display:none; }.tool-rail { padding-inline:4px; }.canvas-panel { padding:11px; }.canvas-scroll { padding:18px; }.zoom-control span:first-child { display:none; }.zoom-control input { width:72px; }.settings-panel { position:fixed; z-index:10; top:60px; bottom:0; left:0; width:min(320px,calc(100% - 45px)); display:none; box-shadow:12px 0 30px #16372b28; }.settings-panel.is-open { display:block; }.drawer-close { display:inline-flex; }.settings-panel::after { position:fixed; inset:60px 0 0; z-index:-1; background:#10231d55; content:""; }.tool-rail .rail-button:first-child { display:grid; }.header-actions { gap:3px; }.header-actions .icon-button { width:30px; }.primary-button { padding:0 9px; font-size:12px; } }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }