:root{
  --bg:#0f0f12;--panel:#111111;--panel2:#1b1b1b;--stroke:#30303a;--stroke-soft:#24242a;--ink:#e8e8ec;--muted:#aeb0ba;--accent:#6aa3ff;--danger:#ff7c7c;--shadow:0 8px 28px rgba(0,0,0,.4);
}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.28 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;overflow:hidden}button,input,select{font:inherit}button:focus-visible,input:focus-visible,select:focus-visible,.stage:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app{height:100vh;display:grid;grid-template-rows:auto 1fr;min-height:0}header{padding:10px 12px 0}.bar{display:flex;gap:12px;align-items:center;padding:5px 12px;border:1px solid var(--stroke-soft);border-radius:12px;background:#1b1b1b;min-height:48px}.brand{display:flex;align-items:center;gap:9px;min-width:0}.brandLogo{width:30px;height:30px;display:block;object-fit:contain}.brandMark{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#fbfbfb,#a5d8ff);color:#111;font-size:10px;font-weight:900;letter-spacing:-.03em;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}.brandName{font-weight:800;letter-spacing:.10em;font-size:12px;white-space:nowrap}.brandTag{display:inline-flex;padding:2px 6px;border:1px solid #709ef0;border-radius:6px;background:rgba(106,163,255,.10);color:#8eb5ff;font-size:9px;font-weight:800;letter-spacing:.12em;white-space:nowrap}.header-chips{display:flex;gap:7px;align-items:center;flex-wrap:wrap;min-width:0}.header-actions{margin-left:auto;display:flex;gap:7px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.chip,.statusPill{padding:3px 7px;border:1px solid var(--stroke-soft);border-radius:999px;background:var(--panel2);font-size:10px;color:#bfc3ce;display:inline-flex;align-items:center;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}.localChip{color:#c8cfdd}.statusPill{font-size:9px;color:#aeb8ca}.statusPill.busy{border-color:#4f72aa;color:#cfe0ff}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--panel2);color:var(--ink);border:2px solid #50505a;padding:8px 10px;border-radius:12px;cursor:pointer;white-space:nowrap;user-select:none}.btn:hover{border-color:#70707a}.btn:disabled{opacity:.42;cursor:not-allowed}.btn.primary{border-color:var(--accent);background:#111824}.btn.compactBtn{padding:6px 9px;border-radius:10px}.input,.numberInput{background:#0f0f12;border:1px solid var(--stroke-soft);color:var(--ink);padding:8px 10px;border-radius:11px;min-width:0}.input.full{width:100%}.sampleSelect{max-width:138px}.numberInput{width:62px;text-align:left;font-variant-numeric:tabular-nums}.numberInput.compact{width:60px;padding:6px 8px;border-radius:10px}input[type="number"]{text-align:left}.smallSelect{min-width:112px}
.main{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:12px;padding:12px;min-height:0}.canvasWrap{height:100%;background:var(--panel);border:1px solid var(--stroke);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0}.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-bottom:1px dashed var(--stroke-soft);padding-bottom:10px}.previewModeControl{display:flex;align-items:center;gap:7px;padding:3px 4px 3px 8px;border:1px solid var(--stroke-soft);border-radius:11px;background:var(--panel2);white-space:nowrap}.toolbarLabel{font-size:10px;color:#c4c5cc}.toolbarControl{display:flex;align-items:center;gap:7px;padding:4px 8px;border:1px solid var(--stroke-soft);border-radius:11px;background:var(--panel2);font-size:10px;color:#c4c5cc;white-space:nowrap}.toolbarControl input[type="range"]{width:115px}.unit{font-size:10px;color:var(--muted);margin-left:-2px}.segmented{display:flex;border:1px solid var(--stroke-soft);background:#151519;padding:3px;border-radius:10px}.segment{border:0;background:transparent;color:#aeb1ba;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:10px}.segment.active{background:#0f0f12;color:var(--ink);box-shadow:inset 0 0 0 1px var(--accent)}.linkViewsBtn{gap:6px;border-width:1px;color:#b9bbc5}.linkViewsBtn.active{border-color:var(--accent);color:#dce8ff;background:rgba(106,163,255,.08)}.linkViewsIcon{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stage{flex:1;min-height:230px;background:#0d0d11;border:1px solid var(--stroke);border-radius:14px;position:relative;overflow:hidden;overscroll-behavior:contain}.previewGrid{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--stroke);min-width:0;min-height:0}.previewGrid.single{grid-template-columns:1fr}.previewPanel{display:grid;grid-template-rows:28px minmax(0,1fr);min-width:0;min-height:0;background:#101014}.previewPanel[hidden]{display:none}.previewPanelLabel{display:flex;align-items:center;padding:0 10px;background:#17171c;color:#b9bbc5;border-bottom:1px solid var(--stroke);font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.previewViewport{position:relative;overflow:auto;min-width:0;min-height:0;cursor:grab;scrollbar-color:#444 #16161a;scrollbar-width:thin}.previewViewport.panning{cursor:grabbing}.canvasMover{min-width:100%;min-height:100%;display:grid;place-items:center;padding:10px;width:max-content;height:max-content}.previewViewport canvas{display:block;box-shadow:0 3px 18px rgba(0,0,0,.25);image-rendering:auto}.bg-checker .previewViewport{background-color:#d5d5d5;background-image:linear-gradient(45deg,#bdbdbd 25%,transparent 25%),linear-gradient(-45deg,#bdbdbd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bdbdbd 75%),linear-gradient(-45deg,transparent 75%,#bdbdbd 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.bg-white .previewViewport{background:#fff}.bg-black .previewViewport{background:#000}.bg-gray .previewViewport{background:#777}.hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:6px 10px;border-radius:999px;background:rgba(8,8,10,.72);color:#aeb0b8;font-size:10px;pointer-events:none;z-index:4}.dropOverlay{display:none;position:absolute;inset:10px;border:2px dashed var(--accent);border-radius:12px;background:rgba(20,31,49,.84);place-items:center;font-weight:800;color:#dce8ff;z-index:10}.stage.dragging .dropOverlay{display:grid}.stage.sampling #originalViewport,.stage.sampling #originalMover,.stage.sampling #originalCanvas,.stage.sampling #backgroundSampleOverlay{cursor:crosshair!important}.note{padding:9px 11px;border:1px solid #354767;border-radius:10px;background:#111824;color:#c9daf8;font-size:11px}.note.error{border-color:#744343;background:#211313;color:#ffb2b2}
.sidebar{min-height:0;overflow:auto;padding-right:2px}.panel{display:flex;flex-direction:column;gap:10px;padding-bottom:12px}.effect{background:var(--panel);border:1px solid var(--stroke);border-radius:14px;padding:12px}.introCard{background:linear-gradient(180deg,#131821,#111)}.eyebrow{font-size:9px;font-weight:850;letter-spacing:.14em;color:#82adf8}.introCard h2{font-size:17px;line-height:1.1;margin:6px 0 7px}.introCard p{font-size:10px;line-height:1.45;color:#a7aab3;margin:0}.sectionHead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.sectionHead h3{margin:0;font-size:11px;letter-spacing:.04em;text-transform:uppercase}.sectionOnly{justify-content:flex-start}.controlBlock{padding:9px 0;border-top:1px dashed var(--stroke-soft)}.controlBlock:first-of-type{border-top:0;padding-top:0}.controlTitle{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px}.controlTitle label,.controlTitle>span:first-child{font-size:11px;font-weight:700}.controlHint{font-size:9px;color:#858893;text-align:right}.rangeRow{display:grid;grid-template-columns:minmax(0,1fr) 62px auto;gap:7px;align-items:center}.rangeRow input[type="range"]{width:100%;min-width:0}.rangeRow:has(#expandContractNumber){grid-template-columns:minmax(0,1fr) 96px auto}.rangeRow:has(#expandContractNumber) #expandContractNumber{width:78px;justify-self:end}.rangeRow .numberInput+ .unit{min-width:16px}.moduleHelp{font-size:9px;line-height:1.4;color:#858893;margin-top:7px}.colorReadout{display:flex;align-items:center;gap:9px;padding:9px;border:1px solid var(--stroke-soft);border-radius:10px;background:#0f0f13}.colorReadout strong{display:block;font-size:10px}.colorReadout span:not(.colorSwatch){font-size:9px;color:#8f919b}.colorSwatch{width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.24);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}.sampleBlock{padding:9px;border:1px solid var(--stroke-soft);border-radius:10px;background:#0f0f13}.sampleColorRow{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:7px;align-items:center}.sampleColorRow input[type="color"]{width:34px;height:32px;padding:2px;border:1px solid var(--stroke);border-radius:8px;background:#101014}.sampleColorRow .btn.active{border-color:var(--accent);background:#111824}.checkRow{display:flex;gap:9px;align-items:flex-start;padding:10px 0 0;border-top:1px dashed var(--stroke-soft);cursor:pointer}.checkRow input{margin-top:2px}.checkRow strong{display:block;font-size:10px}.checkRow small{display:block;color:#858893;font-size:9px;margin-top:2px}.exportCard{display:grid;gap:8px}.exportCard .sectionHead{margin-bottom:1px}.exportPrimary{width:100%}.progressTrack{height:5px;background:#18181d;border:1px solid var(--stroke-soft);border-radius:999px;overflow:hidden}.progressBar{width:0;height:100%;background:#6aa3ff;transition:width .12s linear}.exportCard .moduleHelp{margin-top:0}
@media (max-width:1100px){body{overflow:auto}.app{height:auto;min-height:100vh}.main{grid-template-columns:1fr}.canvasWrap{height:72vh;min-height:520px}.sidebar{overflow:visible}.panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.introCard,.exportCard{grid-column:1/-1}.header-chips{display:none}}
@media (max-width:700px){header{padding:7px 7px 0}.bar{align-items:flex-start;flex-wrap:wrap;padding:7px}.header-actions{width:100%;margin-left:0;justify-content:flex-start}.brandTag{display:none}.main{padding:7px;gap:7px}.canvasWrap{height:67vh;min-height:430px;padding:8px}.toolbar{gap:6px}.previewModeControl{width:100%;justify-content:space-between}.segmented{flex:1}.segment{flex:1}.linkViewsBtn{display:none}.toolbarControl input[type="range"]{width:80px}.panel{grid-template-columns:1fr}.effect{padding:11px}.previewGrid{grid-template-columns:1fr}.stage[data-mode="compare"] .previewGrid{grid-template-columns:1fr 1fr}.stage[data-mode="compare"] .previewPanelLabel{font-size:8px}.sampleColorRow{grid-template-columns:34px minmax(0,1fr)}.sampleColorRow .btn{grid-column:1/-1}}
@media (max-width:430px){.header-actions .sampleSelect{max-width:118px}.header-actions .btn{padding:7px 8px;font-size:11px}.toolbarControl{font-size:9px}.canvasWrap{height:62vh;min-height:390px}.segment{padding:6px 5px}.rangeRow{grid-template-columns:minmax(0,1fr) 58px auto}.numberInput{width:58px}.rangeRow:has(#expandContractNumber){grid-template-columns:minmax(0,1fr) 88px auto}.rangeRow:has(#expandContractNumber) #expandContractNumber{width:78px;justify-self:end}}

/* 01A.5 local mask touch-up */
.canvasMover{position:relative}.stage.brushing #processedViewport,.stage.brushing #processedMover,.stage.brushing #processedCanvas{cursor:none!important}.brushCursor{position:absolute;z-index:6;border:1px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(0,0,0,.8),0 0 8px rgba(0,0,0,.45);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:difference}.touchupToggle{width:100%}.touchupToggle.active{border-color:var(--accent);background:#111824;color:#dce8ff}.brushModeGroup{display:grid;grid-template-columns:1fr 1fr;gap:7px}.smoothBrushBtn{grid-column:1/-1}.brushModeBtn{padding:7px 8px;font-size:10px;white-space:normal}.brushModeBtn.active{border-color:var(--accent);background:rgba(106,163,255,.09);color:#dce8ff}.touchupActions{display:flex;gap:7px;flex-wrap:wrap}.touchupActions .btn{flex:1 1 120px}.touchupAware{margin-top:0}.touchupCard.disabledBrush .brushModeGroup,.touchupCard.disabledBrush #brushSize,.touchupCard.disabledBrush #brushSizeNumber{opacity:.72}

/* 01A.7 local contour smoothing brush */
.touchupCard.smoothingBrush .touchupAware{opacity:.48}.touchupCard.smoothingBrush .touchupAware small{color:#737984}

/* 01A.13 targeted Background Aware brush */
.stage.brushSampling #originalViewport,.stage.brushSampling #originalMover,.stage.brushSampling #originalCanvas,.stage.brushSampling #processedViewport,.stage.brushSampling #processedMover,.stage.brushSampling #processedCanvas{cursor:crosshair!important}.brushModeGroup .smoothBrushBtn{grid-column:auto}.awareSampleBlock{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;padding:9px 0;border-top:1px dashed var(--stroke-soft)}.awareSampleReadout{display:flex;align-items:center;gap:8px;min-width:0}.awareSampleReadout strong{display:block;font-size:10px}.awareSampleReadout small{display:block;color:#858893;font-size:9px;margin-top:2px}.sampleSwatch{width:28px;height:28px;flex:0 0 28px;border-radius:8px;border:1px solid rgba(255,255,255,.24);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}.sampleSwatch.empty{background-color:#1b1b1f;background-image:linear-gradient(45deg,#444 25%,transparent 25%),linear-gradient(-45deg,#444 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#444 75%),linear-gradient(-45deg,transparent 75%,#444 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.awareSampleBlock .btn.active{border-color:var(--accent);background:#111824}.touchupCard.disabledBrush .awareSampleBlock{opacity:.72}
@media (max-width:430px){.awareSampleBlock{grid-template-columns:1fr}.awareSampleBlock .btn{width:100%}}

/* 01A.16.2 hard cursor ownership for Original-preview tools */
#originalMover #originalCanvas,#originalMover .backgroundSampleOverlay,#originalMover .originalToolSurface{grid-area:1/1}.backgroundSampleOverlay{z-index:5;pointer-events:none;box-shadow:none!important;opacity:.5}.originalToolSurface{z-index:6;align-self:center;justify-self:center;background:transparent;pointer-events:none;touch-action:none}.stage.sampling .originalToolSurface{display:block;pointer-events:auto;cursor:crosshair!important}.stage.backgroundSampling:not(.sampling) .originalToolSurface{display:block;pointer-events:auto;cursor:none!important}.stage.sampling #originalViewport,.stage.sampling #originalViewport *{cursor:crosshair!important}.stage.backgroundSampling:not(.sampling) #originalViewport,.stage.backgroundSampling:not(.sampling) #originalViewport *{cursor:none!important}.backgroundSampleCursor{z-index:8;display:block;box-sizing:border-box;border:2px dashed rgba(255,255,255,.98);outline:1px solid rgba(0,0,0,.78);outline-offset:1px;box-shadow:0 0 8px rgba(0,0,0,.62);mix-blend-mode:normal;pointer-events:none}.backgroundSampleCursor[hidden]{display:none!important}.backgroundSampleTool{margin-top:9px;padding-top:9px;border-top:1px dashed var(--stroke-soft)}.backgroundSampleToggle{width:100%;white-space:normal}.toolLocationHelp{color:#a9c8ff;font-weight:650}.toolLocationHelp strong{color:#d7e7ff}.backgroundSampleToggle.active{border-color:#e55ab0;background:rgba(229,90,176,.09);color:#ffd8ef}.backgroundSampleControls{display:grid;gap:8px;margin-top:8px}.backgroundSampleControls:not(.active){opacity:.78}.backgroundSampleActions{display:flex;gap:7px;flex-wrap:wrap}.backgroundSampleActions .btn{flex:1 1 120px}.backgroundSampleStatus{display:flex;gap:7px;align-items:flex-start}.backgroundSampleStatus small{font-size:9px;line-height:1.35;color:#858893}.backgroundSampleStatus .statusPill{flex:0 0 auto;border-color:rgba(229,90,176,.38)}
@media (max-width:430px){.backgroundSampleStatus{display:grid}.backgroundSampleActions .btn{flex-basis:100%}}

/* 01A.20 paired Original-preview selection actions */
.backgroundSampleModeGroup{display:grid;grid-template-columns:1fr 1fr;gap:7px}.backgroundSampleModeBtn{padding:7px 8px;font-size:10px;white-space:normal}.backgroundSampleModeBtn.active{border-color:#e55ab0;background:rgba(229,90,176,.09);color:#ffd8ef}.backgroundSampleModeBtn.restore.active{border-color:#6edca4;background:rgba(110,220,164,.09);color:#d9ffeb}.selectionActionTitle{margin-bottom:-1px}.stage.backgroundRestoreMode .backgroundSampleCursor{border-color:#8ff0b9;outline-color:rgba(8,45,26,.95);box-shadow:0 0 8px rgba(61,214,132,.34)}
@media (max-width:430px){.backgroundSampleModeGroup{grid-template-columns:1fr}}


/* 01A.24 per-stroke Brush Profile */
.brushProfileGroup{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.brushProfileBtn{min-width:0;padding:7px 5px;border-width:1px;border-radius:10px;display:grid;grid-template-rows:20px auto;gap:3px;font-size:9px;white-space:normal}.brushProfileBtn.active{border-color:var(--accent);background:rgba(106,163,255,.09);color:#dce8ff}.profileDot{width:20px;height:20px;margin:auto;border-radius:50%;background:radial-gradient(circle,#dfe7f6 0 38%,rgba(223,231,246,.82) 48%,rgba(223,231,246,.34) 72%,rgba(223,231,246,0) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}.profileHard{background:radial-gradient(circle,#dfe7f6 0 79%,rgba(223,231,246,.86) 86%,rgba(223,231,246,0) 100%)}.profileFirm{background:radial-gradient(circle,#dfe7f6 0 64%,rgba(223,231,246,.76) 73%,rgba(223,231,246,0) 100%)}.profileBalanced{background:radial-gradient(circle,#dfe7f6 0 48%,rgba(223,231,246,.62) 63%,rgba(223,231,246,0) 100%)}.profileSoft{background:radial-gradient(circle,#dfe7f6 0 20%,rgba(223,231,246,.42) 52%,rgba(223,231,246,0) 100%)}#brushCursor::after{content:"";position:absolute;left:50%;top:50%;width:var(--brush-core,72%);height:var(--brush-core,72%);transform:translate(-50%,-50%);border:1px dotted rgba(255,255,255,.82);border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.28)}.touchupCard.disabledBrush .brushProfileGroup{opacity:.72}
@media (max-width:430px){.brushProfileGroup{grid-template-columns:repeat(2,minmax(0,1fr))}.brushProfileBtn{grid-template-rows:18px auto}.profileDot{width:18px;height:18px}}